/**
 * Homepage Styles
 *
 * Per theme-architecture/CSS_ARCHITECTURE.md's homepage.css plan —
 * enqueued ONLY on the front page (see inc/assets.php's conditional
 * enqueue, added in this pass), not sitewide, per
 * theme-architecture/PERFORMANCE_ARCHITECTURE.md's conditional-asset
 * requirement.
 *
 * Consolidates: hero, trust-strip, and stats-bar rules that previously
 * lived in layouts.css (moved here so they only load on the homepage,
 * not every template) — PLUS new rules for this phase's tax-hub-preview
 * and business-compliance-preview's Pro cross-link card.
 *
 * NOTE: .pro-band / .pro-modules / .module-tag rules deliberately
 * remain in layouts.css, NOT here, even though pro-teaser.php (homepage)
 * uses them — per that file's own comment, they are shared with the
 * future template-pro-landing.php, so they must stay sitewide-loadable
 * rather than gated behind this homepage-only stylesheet.
 */

/* ===== Hero ===== */
.hero { padding: var(--space-7) 0 var(--space-6); text-align: center; }
.hero h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); max-width: 800px; margin: 0 auto var(--space-3); }
.hero p.subhead { font-size: clamp(1rem, 2vw, 1.25rem); color: var(--color-text-muted); max-width: 600px; margin: 0 auto var(--space-5); }
.hero-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); list-style: none; margin: 0 auto var(--space-5); padding: 0; }
.hero-stats strong { font-family: var(--font-mono); color: var(--color-primary); font-weight: 700; }
.hero-actions { display: flex; flex-direction: column; gap: var(--space-3); align-items: center; }
@media (min-width: 768px) { .hero-actions { flex-direction: row; justify-content: center; } }

/* ===== Trust Strip ===== */
.trust-strip { padding: var(--space-5) 0; border-top: var(--border-hairline); border-bottom: var(--border-hairline); }
.trust-list { display: flex; gap: var(--space-5); overflow-x: auto; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; justify-content: center; font-size: 0.875rem; color: var(--color-text-muted); font-weight: 500; }

/* ===== Stats Bar ===== */
.stats-bar { background: rgba(62,142,107,0.06); padding: var(--space-6) 0; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); text-align: center; }
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-number { font-family: var(--font-mono); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.25rem); color: var(--color-primary); display: block; }
.stat-label { font-size: 0.8125rem; color: var(--color-text-muted); }

/* ===== Calculator Hub ===== */
/* Card grid itself is shared (layouts.css .card-grid); calculator-specific
   card styling lives in components.css (.calc-card, .card-tab-*). No
   homepage-only override needed beyond the shared grid. */

/* ===== Tax Hub Preview (HSN/SAC search + Income Tax teaser) ===== */
.tax-hub-preview { background: rgba(62,142,107,0.04); }
.search-block { text-align: center; }
.source-note { font-size: 0.8125rem; color: var(--color-text-muted); margin-top: var(--space-1); }
.search-bar { max-width: 600px; margin: 0 auto; display: flex; gap: var(--space-2); }
.search-bar input[type="search"] {
	flex: 1; padding: 14px 20px; border-radius: var(--radius-pill);
	border: var(--border-hairline); font-size: 1rem; font-family: var(--font-body);
}
.search-bar input[type="search"]:focus {
	border-color: var(--color-secondary); outline: none;
	box-shadow: 0 0 0 2px rgba(62, 142, 107, 0.25);
}

.tax-hub-preview__income-tax { margin-top: var(--space-6); }

.toggle-group { display: inline-flex; border-radius: var(--radius-pill); border: var(--border-hairline); overflow: hidden; margin-bottom: var(--space-4); }
.toggle-group button {
	border: none; background: #fff; padding: 10px 22px; font-weight: 600; font-size: 0.9375rem;
	color: var(--color-text-muted); cursor: not-allowed; /* disabled in this phase — illustrative only */
}
.toggle-group button.active { background: var(--color-primary); color: #fff; }

/* .disclaimer-block / .disclaimer-icon moved to assets/css/components.css
   in the Calculator Platform Foundation pass — it is now a sitewide
   component (single-hz_calculator.php uses it too), not homepage-only. */

/* ===== Business Compliance Preview — Pro Cross-Link Card ===== */
.pro-crosslink {
	background: var(--color-navy); border-radius: var(--radius-md); padding: var(--space-4);
	color: var(--color-text-on-navy); max-width: 480px; margin-top: var(--space-5);
}
.pro-crosslink p { color: var(--color-text-on-navy-muted); margin-bottom: var(--space-3); }
.pro-crosslink p:first-child { color: var(--color-text-on-navy); font-weight: 600; }

/* Pro Teaser (.pro-band, .pro-inner, .pro-modules, .module-tag,
   .pro-module-card incl. its h3/h4 heading rule, .pro-modules-hint)
   styling lives in assets/css/layouts.css — see note at the top of
   this file. */

/* ==========================================================================
   V6.1 ADDITIONS — homepage sections S1, S9, S10 layout
   professional-workspaces (S3) → professional.css
   ai-assistants (S4) → ai-tools.css
   ========================================================================== */

/* ===== Hero V6.1 — Forest Green background, white text ===== */

.hero--professional {
	background: var(--color-primary);
	color: #fff;
	padding: var(--space-8) 0 var(--space-7);
	min-height: 480px;
	display: flex;
	align-items: center;
}

.hero--professional .hero-inner { width: 100%; }

.hero--professional h1,
.hero--professional .hero-heading { color: #fff; }

.hero-heading .hero-heading__sub {
	display: block;
	font-size: 0.72em;
	font-weight: 600;
	opacity: 0.88;
	margin-top: var(--space-2);
}

.hero--professional .hero-eyebrow {
	color: var(--color-accent);
	display: block;
	margin-bottom: var(--space-3);
}

.hero--professional p.subhead,
.hero--professional .hero-subhead {
	color: rgba(255, 255, 255, 0.85);
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}

.hero--professional .hero-stats strong {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--color-accent);
}

.hero--professional .hero-stats li {
	color: rgba(255, 255, 255, 0.8);
}

/* V6.1 hero CTA variants — used only on the green-bg hero */
.btn-ai {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	border: 2px solid var(--color-accent);
	color: var(--color-accent);
	background: transparent;
	padding: 12px 24px;
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-size: 1rem;
	font-family: var(--font-body);
	text-decoration: none;
	transition: background var(--motion-fast), color var(--motion-fast);
}
.btn-ai:hover,
.btn-ai:focus-visible {
	background: var(--color-accent);
	color: var(--color-navy);
	outline: none;
}
.btn-ai:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }

.btn-outline-white {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	border: 2px solid rgba(255, 255, 255, 0.55);
	color: #fff;
	background: transparent;
	padding: 12px 24px;
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-size: 1rem;
	font-family: var(--font-body);
	text-decoration: none;
	transition: border-color var(--motion-fast), background var(--motion-fast);
}
.btn-outline-white:hover,
.btn-outline-white:focus-visible {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.1);
	outline: none;
}
.btn-outline-white:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ===== Hero actions: 2×2 grid on mobile, row on desktop ===== */
.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	justify-content: center;
	margin-top: var(--space-5);
}

/* ===== Section header variants ===== */
.section-header--centered { text-align: center; }
.section-header--light { color: #fff; }
.section-header--light h2 { color: #fff; }

/* ===== Section footer (view-all CTA row below content grid) ===== */
.section-footer {
	text-align: center;
	margin-top: var(--space-5);
}

/* ===== S9: Why HaritaZen ===== */
.why-haritazen {
	background: var(--color-primary);
	color: #fff;
	padding: var(--space-7) 0;
}

.why-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	margin-top: var(--space-6);
}

@media (min-width: 768px) {
	.why-grid { grid-template-columns: repeat(3, 1fr); }
}

.why-pillar {
	text-align: center;
	padding: var(--space-4);
}

.why-pillar__icon {
	display: flex;
	justify-content: center;
	margin-bottom: var(--space-4);
	color: var(--color-accent);
}

.why-pillar__title {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 700;
	color: #fff;
	margin-bottom: var(--space-3);
}

.why-pillar__desc {
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-bottom: var(--space-3);
}

.why-pillar__note {
	font-size: 0.8125rem;
	color: var(--color-accent);
	font-weight: 500;
}

/* ===== S10: HSN/SAC Search section wrapper ===== */
.section--hsn-search { background: rgba(62, 142, 107, 0.04); }

.hsn-search-browse {
	text-align: center;
	margin-top: var(--space-4);
	font-size: 0.9375rem;
}

/* ===== Compliance Preview (S6) ===== */
.compliance-preview__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	margin-top: var(--space-5);
}

@media (min-width: 768px) {
	.compliance-preview__grid { grid-template-columns: 1fr 1fr; }
}

.compliance-preview__col-heading {
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: var(--space-3);
}

.compliance-preview__col-heading a {
	color: var(--color-navy);
	text-decoration: none;
}

.compliance-preview__col-heading a:hover { color: var(--color-primary); }

.compliance-preview__col-desc {
	font-size: 0.9375rem;
	color: var(--color-text-muted);
	margin-bottom: var(--space-3);
}

.compliance-preview__article-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-4);
}

.compliance-preview__article-list li {
	padding: var(--space-2) 0;
	border-bottom: var(--border-hairline);
	font-size: 0.9375rem;
}

.compliance-preview__article-list li:last-child { border-bottom: none; }

.compliance-preview__article-list--planned li {
	color: var(--color-text-muted);
}

.compliance-preview__hub-link {
	font-weight: 600;
	color: var(--color-primary);
	text-decoration: none;
	font-size: 0.9375rem;
}

.compliance-preview__hub-link:hover { text-decoration: underline; }

.compliance-preview__footer {
	text-align: center;
	margin-top: var(--space-6);
}