/*
Theme Name: StartupNepal Redesign
Template: startupnepal-theme
Description: Child theme for TheStartupNepal.com. Refines typography, spacing and hierarchy on top of the parent StartupNepal theme's existing brand system (Fraunces + DM Sans, red/dark/cream palette) — evolves the existing look rather than replacing it. Also adds real working handlers for the newsletter/community forms and two managed ad placements.
Version: 1.1.2
Author: Niraj (with Claude as CTO)
Text Domain: startupnepal-child
*/

/* ==========================================================================
   1. Design tokens
   Building on the parent theme's own tokens (--red #E8341A, --dark #0D0D0D,
   --cream #F5F0E8, --warm #FAF7F2, --mid #2A2A2A, --muted #8A8580,
   --border #E0D9CF, --accent #1A3CE8). Nothing here redefines brand color —
   it only adds a few structural tokens the parent CSS didn't have.
   ========================================================================== */
:root {
	--sn-radius: 6px;
	--sn-radius-sm: 3px;
	--sn-shadow-sm: 0 1px 3px rgba(13, 13, 13, 0.06);
	--sn-shadow-md: 0 8px 24px rgba(13, 13, 13, 0.08);
	--sn-shadow-lg: 0 16px 40px rgba(13, 13, 13, 0.12);
	--sn-space-xs: 0.5rem;
	--sn-space-sm: 1rem;
	--sn-space-md: 1.75rem;
	--sn-space-lg: 3rem;
	--sn-space-xl: 5rem;
	--sn-maxw: 1240px;
	--sn-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   1b. Header logo fix
   The parent theme prints the logo as a bare <img src=".../Logo.png"> with
   no CSS size constraint at all, and Logo.png itself is a 1024x1024px file.
   On production this is currently papered over by three overlapping rules
   pasted into Customizer > Additional CSS (400px, then 170px, then a
   body.single !important 120px override) — a live database setting, not a
   theme file, so it didn't come along when this staging site was cloned.
   Even on production the 170px rule still lets the logo overflow the 64px
   nav bar into the admin bar above it. Fixing it here properly instead:
   one rule, in a real file, sized to actually fit the nav.
   ========================================================================== */
.nav-logo-img {
	display: block;
	height: 48px;
	width: auto;
}

/* ==========================================================================
   2. Typography — same font pairing the site already ships (Fraunces for
   display/headlines, DM Sans for body/UI), just a more deliberate scale.
   ========================================================================== */
body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.hero-h1 {
	font-family: 'Fraunces', serif;
	font-weight: 400;
	font-size: clamp(2.75rem, 5.5vw, 4.5rem);
	line-height: 1.04;
	letter-spacing: -0.01em;
}

.hero-sub {
	font-family: 'DM Sans', sans-serif;
	font-size: 1.1rem;
	line-height: 1.6;
	color: var(--mid);
	max-width: 46ch;
}

.hero-tag {
	font-family: 'DM Sans', sans-serif;
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--red);
}

.section-title {
	font-family: 'Fraunces', serif;
	font-weight: 400;
	font-size: clamp(1.6rem, 2.6vw, 2.1rem);
	letter-spacing: -0.01em;
}

.card-title,
.article-title {
	font-family: 'Fraunces', serif;
	font-weight: 500;
	line-height: 1.28;
}

.card-category,
.article-cat,
.cat-name {
	font-family: 'DM Sans', sans-serif;
	font-weight: 600;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--red);
}

.card-excerpt,
.article-excerpt {
	color: var(--muted);
	line-height: 1.6;
}

/* ==========================================================================
   3. Hero
   ========================================================================== */
.hero {
	padding-block: var(--sn-space-xl) var(--sn-space-lg);
}

.hero-stats {
	display: flex;
	gap: var(--sn-space-lg);
	margin-top: var(--sn-space-md);
	padding-top: var(--sn-space-md);
	border-top: 1px solid var(--border);
}

.stat-num {
	font-family: 'Fraunces', serif;
	font-size: 1.6rem;
	color: var(--dark);
	display: block;
}

.stat-label {
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.hero-actions {
	display: flex;
	gap: var(--sn-space-sm);
	margin-top: var(--sn-space-md);
	flex-wrap: wrap;
}

.btn-primary,
.btn-outline {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 1.5rem;
	border-radius: var(--sn-radius-sm);
	font-family: 'DM Sans', sans-serif;
	font-weight: 600;
	font-size: 0.92rem;
	transition: transform var(--sn-transition), box-shadow var(--sn-transition), opacity var(--sn-transition);
}

.btn-primary {
	background: var(--red);
	color: #fff;
	box-shadow: var(--sn-shadow-sm);
}

.btn-primary:hover {
	transform: translateY(-1px);
	box-shadow: var(--sn-shadow-md);
	opacity: 0.94;
}

.btn-outline {
	border: 1.5px solid var(--dark);
	color: var(--dark);
}

.btn-outline:hover {
	background: var(--dark);
	color: #fff;
}

.featured-card {
	border-radius: var(--sn-radius);
	overflow: hidden;
	box-shadow: var(--sn-shadow-sm);
	transition: box-shadow var(--sn-transition), transform var(--sn-transition);
}

.featured-card:hover {
	box-shadow: var(--sn-shadow-lg);
	transform: translateY(-2px);
}

/* ==========================================================================
   4. Ticker
   ========================================================================== */
.ticker-wrap {
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	background: var(--warm);
}

.ticker-item {
	font-family: 'DM Sans', sans-serif;
	font-size: 0.85rem;
	color: var(--mid);
}

/* ==========================================================================
   5. Categories row
   ========================================================================== */
.categories-row {
	display: flex;
	gap: var(--sn-space-sm);
	flex-wrap: wrap;
	padding-block: var(--sn-space-md);
}

.cat-item {
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 0.6rem 1.2rem;
	transition: border-color var(--sn-transition), background var(--sn-transition);
}

.cat-item:hover {
	border-color: var(--red);
	background: var(--cream);
}

.cat-count {
	color: var(--muted);
	font-size: 0.78rem;
}

/* ==========================================================================
   6. Article grid + cards
   ========================================================================== */
.articles-grid {
	display: grid;
	gap: var(--sn-space-md);
}

.article-card {
	padding-block: var(--sn-space-sm);
	border-bottom: 1px solid var(--border);
	transition: opacity var(--sn-transition);
}

.article-card:hover {
	opacity: 0.82;
}

.article-num {
	font-family: 'Fraunces', serif;
	color: var(--border);
	font-size: 1.4rem;
}

/* ==========================================================================
   7. Startup spotlight cards
   ========================================================================== */
.spotlight-section {
	background: var(--cream);
	padding-block: var(--sn-space-xl);
}

.spotlight-grid {
	display: grid;
	gap: var(--sn-space-md);
}

.spotlight-card {
	background: #fff;
	border-radius: var(--sn-radius);
	padding: var(--sn-space-md);
	box-shadow: var(--sn-shadow-sm);
	transition: box-shadow var(--sn-transition), transform var(--sn-transition);
}

.spotlight-card:hover {
	box-shadow: var(--sn-shadow-md);
	transform: translateY(-3px);
}

.startup-tag {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	background: var(--accent-dim, var(--cream));
	color: var(--accent, var(--red));
}

/* ==========================================================================
   8. Community / Get Featured form
   ========================================================================== */
.community-section {
	padding-block: var(--sn-space-xl);
}

.community-form,
.nl-form {
	border-radius: var(--sn-radius);
}

.community-form input,
.community-form textarea,
.community-form select,
.nl-form input {
	font-family: 'DM Sans', sans-serif;
	border: 1px solid var(--border);
	border-radius: var(--sn-radius-sm);
	padding: 0.75rem 1rem;
	transition: border-color var(--sn-transition);
}

.community-form input:focus,
.community-form textarea:focus,
.community-form select:focus,
.nl-form input:focus {
	border-color: var(--red);
	outline: none;
}

/* ==========================================================================
   9. Newsletter strip + footer
   ========================================================================== */
.newsletter-strip {
	background: var(--dark);
	color: #fff;
	padding-block: var(--sn-space-lg);
}

.newsletter-strip .label {
	color: var(--red);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 0.75rem;
}

footer .social-links a {
	transition: opacity var(--sn-transition);
}

footer .social-links a:hover {
	opacity: 0.6;
}

.footer-links a {
	transition: color var(--sn-transition);
}

.footer-links a:hover {
	color: var(--red);
}

/* ==========================================================================
   10. Interior pages (About, Careers, Contact, Advertise, Privacy) —
   the parent theme's page.php is intentionally bare (just an <h1> and
   the_content). This gives those pages the same visual polish as the rest
   of the site instead of unstyled default text.
   ========================================================================== */
.post-content {
	max-width: 760px;
	margin: 0 auto;
	padding: var(--sn-space-xl) var(--sn-space-md);
}

.post-content h1 {
	font-family: 'Fraunces', serif;
	font-weight: 400;
	font-size: clamp(2.2rem, 4vw, 3rem);
	line-height: 1.1;
	margin-bottom: var(--sn-space-md);
	padding-bottom: var(--sn-space-md);
	border-bottom: 1px solid var(--border);
}

.post-content h2 {
	font-family: 'Fraunces', serif;
	font-weight: 500;
	margin-top: var(--sn-space-lg);
}

.post-content p {
	font-family: 'DM Sans', sans-serif;
	line-height: 1.75;
	color: var(--mid);
}

.post-content a {
	color: var(--red);
}

/* ==========================================================================
   11. Single article template
   ========================================================================== */
.single-article-inner {
	max-width: 760px;
	margin: 0 auto;
}

.single-title {
	font-family: 'Fraunces', serif;
	font-weight: 400;
	font-size: clamp(2.2rem, 4.5vw, 3.2rem);
	line-height: 1.08;
}

.post-meta {
	color: var(--muted);
	font-size: 0.85rem;
}

.single-featured-image {
	border-radius: var(--sn-radius);
	overflow: hidden;
	margin-block: var(--sn-space-md);
}

.single-content {
	font-family: 'DM Sans', sans-serif;
	font-size: 1.08rem;
	line-height: 1.8;
	color: var(--mid);
}

.single-content h2 {
	font-family: 'Fraunces', serif;
	margin-top: var(--sn-space-lg);
}

/* ==========================================================================
   12. Managed ad placements
   Two widget areas (registered in functions.php) render here:
   "Homepage Ad Slot" (below the ticker) and "In-Article Ad Slot" (below
   the featured image on single posts). Both are empty until Niraj adds
   real ad code via Appearance -> Widgets — the wrapper only renders when
   the widget area actually has something in it, so nothing shows as a
   broken empty box in the meantime.
   ========================================================================== */
.sn-ad-slot {
	max-width: var(--sn-maxw);
	margin: var(--sn-space-md) auto;
	padding: var(--sn-space-sm);
	text-align: center;
	background: var(--warm);
	border: 1px dashed var(--border);
	border-radius: var(--sn-radius);
}

.sn-ad-slot .sn-ad-label {
	display: block;
	font-family: 'DM Sans', sans-serif;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: var(--sn-space-xs);
}

.sn-ad-slot > .widget {
	display: flex;
	justify-content: center;
}

.sn-ad-slot img {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   13. Responsive
   ========================================================================== */
@media (max-width: 880px) {
	.hero-stats {
		gap: var(--sn-space-md);
	}

	.categories-row {
		gap: var(--sn-space-xs);
	}

	.post-content {
		padding-inline: var(--sn-space-sm);
	}
}

@media (max-width: 560px) {
	.hero-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.hero-stats {
		flex-wrap: wrap;
		row-gap: var(--sn-space-sm);
	}
}

/* ==========================================================================
   14. Events Calendar (The Events Calendar plugin) skin
   The /events/ page and single-event pages are rendered entirely by the
   Events Calendar plugin's own templates, not the theme, and ship with a
   generic default look (Helvetica, a stock blue #334aff for every button/
   link/active state) that doesn't match the site at all. Rather than
   fighting the plugin's markup with heavy CSS overrides, this re-points the
   plugin's own theming system: TEC exposes its entire look as CSS custom
   properties (--tec-color-*, --tec-font-family-*) scoped to the wrapping
   .tribe-common element on every view it renders, so overriding those here
   re-skins search, view tabs, buttons, list/month/day views, and single
   event pages consistently, without touching plugin files or fighting its
   markup on every update.
   ========================================================================== */
.tribe-common {
	--tec-font-family-sans-serif: 'DM Sans', sans-serif;

	--tec-color-accent-primary: var(--red);
	--tec-color-accent-primary-hover: #C22A13;
	--tec-color-accent-primary-active: #A82310;
	--tec-color-accent-primary-background: #E8341A12;
	--tec-color-accent-primary-background-datepicker: #E8341A12;
	--tec-color-accent-primary-week-event: #E8341A1a;
	--tec-color-accent-primary-week-event-hover: #E8341A33;
	--tec-color-accent-primary-week-event-featured: #E8341A0a;
	--tec-color-accent-primary-week-event-featured-hover: #E8341A24;

	--tec-color-button-primary: var(--red);
	--tec-color-button-primary-hover: #C22A13;
	--tec-color-button-primary-active: #A82310;
	--tec-color-button-primary-background: #E8341A12;

	--tec-color-background-events-bar-submit-button: var(--red);
	--tec-color-background-events-bar-submit-button-hover: #C22A13;
	--tec-color-text-events-bar-submit-button: #fff;
	--tec-color-text-events-bar-submit-button-active: #fff;

	--tec-color-text-primary: var(--dark);
	--tec-color-text-primary-light: var(--mid);
	--tec-color-text-events-title: var(--dark);
	--tec-color-text-secondary-event-date: var(--muted);
	--tec-color-link-primary: var(--dark);
	--tec-color-category-text: var(--red);

	--tec-color-border-default: var(--border);
	--tec-color-border-secondary: var(--border);
	--tec-color-border-secondary-month-grid: var(--border);
	--tec-color-border-tertiary: var(--border);
	--tec-color-border-events-bar: var(--border);
	--tec-color-border-hover: var(--muted);
	--tec-color-border-active: var(--dark);
	--tec-color-border-active-month-grid-hover: var(--dark);

	--tec-color-background: var(--warm);
	--tec-color-background-secondary: var(--cream);
	--tec-color-background-secondary-datepicker: var(--cream);
	--tec-color-background-view-selector-tabs: #fff;
	--tec-color-background-messages: #E8341A12;

	--tec-color-day-marker-current-month: var(--dark);
	--tec-color-day-marker-month: var(--dark);
	--tec-color-day-marker-past-month-active: var(--muted);

	--tec-color-icon-primary-alt: var(--muted);
	--tec-color-icon-secondary: var(--muted);
	--tec-color-icon-events-bar: var(--muted);
}

/* The plugin's view-selector "tabs" underline and search submit button
   round to match the rest of the site's buttons/inputs instead of the
   plugin's sharper default corners. */
.tribe-events-c-view-selector__button,
.tribe-events-c-search__button,
.tribe-events-c-events-bar__search-button,
.tribe-events-c-top-bar__today-button {
	border-radius: var(--sn-radius-sm) !important;
}