/**
 * HP-02B Sprint 3 — Homepage V2 Section Styles
 *
 * Sections S-01 through S-08 per HP-02B spec.
 * All values reference DS-* tokens from tokens.css — no legacy --color-* tokens.
 * Depends on: tokens.css, layout.css (hz-section, hz-content-well, hz-grid).
 *
 * Surface extensions (.hz-section--forest, .hz-section--midnight) are defined
 * here because the layout.css C-LAY-002 variants do not include dark-green
 * or deep-navy surfaces — this file closes that gap for homepage use only.
 *
 * Load order (assets.php): hz-layout → hz-homepage-v2 (front_page only).
 *
 * @package HaritaZen
 * @since   HP-02B Sprint 3 (0.4.0)
 */

/* ==========================================================================
   Surface extensions — not in layout.css
   ========================================================================== */

/* Forest Green — hero and brand-identity sections (S-01) */
.hz-section--forest {
	background-color: var(--DS-C-BRAND-GREEN);
	color: #FAFAF7;
}

/* Deep Navy — AI section dark-surface (S-08) */
.hz-section--midnight {
	background-color: var(--DS-C-BG-NAVY);
	color: #FAFAF7;
}

/* ==========================================================================
   Shared: Homepage action buttons
   NOTE: .hz-btn base + all variants were consolidated into layout.css in
   Sprint 6 so they are available to all templates. Kept only the reference
   comment here for historical context.
   ========================================================================== */

/* .hz-btn base and all variant modifiers (--gold, --white-ghost, --forest,
   --green, --outline-green) are defined in layout.css (Sprint 6). */

/* ==========================================================================
   S-01 — Hero Section
   Forest Green surface. Minimum height from DS-LY-HERO-MIN-H (BD-02: 560px).
   Stats list is filterable via haritazen_hero_stats filter.
   ========================================================================== */

.hz-hero {
	min-height: var(--DS-LY-HERO-MIN-H);
	display: flex;
	align-items: center;
	padding-block: var(--DS-SP-SECTION-Y-LG);
}

.hz-hero__eyebrow {
	display: block;
	font-family: var(--DS-T-FAMILY-SANS);
	font-size: var(--DS-T-SIZE-XS);
	font-weight: 700;
	letter-spacing: var(--DS-T-TRACKING-WIDEST);
	text-transform: uppercase;
	color: var(--DS-C-BRAND-GOLD);
	margin-bottom: var(--DS-G-SP-003);
}

.hz-hero__heading {
	font-family: var(--DS-T-FAMILY-SERIF);
	font-size: clamp(var(--DS-T-SIZE-2XL), 5vw, var(--DS-T-SIZE-4XL));
	font-weight: normal;
	line-height: var(--DS-T-LEADING-TIGHT);
	letter-spacing: var(--DS-T-TRACKING-TIGHT);
	color: #FAFAF7;
	margin: 0 0 var(--DS-G-SP-003);
	text-wrap: balance;
	max-width: 900px;
}

.hz-hero__sub {
	display: block;
	font-family: var(--DS-T-FAMILY-SANS);
	font-size: clamp(var(--DS-T-SIZE-BASE), 2vw, var(--DS-T-SIZE-LG));
	font-weight: 400;
	color: rgba(250, 250, 247, 0.75);
	margin-top: var(--DS-G-SP-002);
}

.hz-hero__intro {
	font-family: var(--DS-T-FAMILY-SANS);
	font-size: var(--DS-T-SIZE-MD);
	line-height: var(--DS-T-LEADING-BASE);
	color: rgba(250, 250, 247, 0.72);
	max-width: 600px;
	margin: 0 0 var(--DS-G-SP-006);
}

/* Stats list */
.hz-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--DS-G-SP-006);
	list-style: none;
	padding: 0;
	margin: 0 0 var(--DS-G-SP-006);
	border-top: 1px solid rgba(250, 250, 247, 0.15);
	padding-top: var(--DS-G-SP-005);
}

.hz-hero__stat {
	display: flex;
	flex-direction: column;
	gap: var(--DS-G-SP-001);
}

.hz-hero__stat-value {
	font-family: var(--DS-T-FAMILY-SANS);
	font-size: var(--DS-T-SIZE-SM);
	font-weight: 700;
	color: #FAFAF7;
}

.hz-hero__stat-value--ai::before {
	content: '\2736\00A0'; /* ✦ + non-breaking space */
	color: var(--DS-C-BRAND-GOLD);
}

.hz-hero__stat-detail {
	font-family: var(--DS-T-FAMILY-SANS);
	font-size: var(--DS-T-SIZE-XS);
	color: rgba(250, 250, 247, 0.55);
}

/* CTA row */
.hz-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--DS-G-SP-003);
	align-items: center;
}

/* ==========================================================================
   S-02 — Knowledge Hub Grid
   8-hub overview on mist surface. Linked hub cards: 1 → 2 → 4 columns.
   AI hub card has navy treatment to mark it as distinct.
   ========================================================================== */

.hz-hub-card {
	display: flex;
	flex-direction: column;
	gap: var(--DS-G-SP-003);
	padding: var(--DS-G-SP-005);
	background-color: var(--DS-C-BG-PRIMARY);
	border: 1px solid var(--DS-C-BORDER);
	border-radius: var(--DS-G-R-005);
	text-decoration: none;
	color: inherit;
	transition:
		box-shadow var(--DS-G-M-001),
		border-color var(--DS-G-M-001),
		transform var(--DS-G-M-001);
	height: 100%; /* fill list-item grid cell */
}

.hz-hub-card:hover {
	box-shadow: var(--DS-SH-MD);
	border-color: var(--DS-C-BRAND-GREEN);
	transform: translateY(-2px);
}

.hz-hub-card:focus-visible {
	outline: 2px solid var(--DS-C-FOCUS);
	outline-offset: 2px;
}

/* AI hub — navy treatment */
.hz-hub-card--ai {
	background-color: var(--DS-C-BG-NAVY);
	border-color: var(--DS-C-BG-NAVY);
	color: #FAFAF7;
}

.hz-hub-card--ai:hover {
	border-color: var(--DS-C-BRAND-GOLD);
}

/* Icon medallion */
.hz-hub-card__icon {
	width: 40px;
	height: 40px;
	border-radius: var(--DS-G-R-004);
	background-color: var(--DS-C-BG-MIST);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--DS-T-FAMILY-SANS);
	font-size: var(--DS-T-SIZE-XS);
	font-weight: 700;
	letter-spacing: 0;
	color: var(--DS-C-BRAND-GREEN);
	flex-shrink: 0;
	user-select: none;
}

.hz-hub-card--ai .hz-hub-card__icon {
	background-color: rgba(250, 250, 247, 0.08);
	color: var(--DS-C-BRAND-GOLD);
	font-size: var(--DS-T-SIZE-MD);
}

.hz-hub-card__name {
	font-family: var(--DS-T-FAMILY-SANS);
	font-size: var(--DS-T-SIZE-BASE);
	font-weight: 700;
	color: var(--DS-C-BRAND-NAVY);
	margin: 0;
}

.hz-hub-card--ai .hz-hub-card__name {
	color: #FAFAF7;
}

.hz-hub-card__desc {
	font-family: var(--DS-T-FAMILY-SANS);
	font-size: var(--DS-T-SIZE-SM);
	line-height: var(--DS-T-LEADING-BASE);
	color: var(--DS-C-TEXT-MUTED);
	margin: 0;
	flex-grow: 1;
}

.hz-hub-card--ai .hz-hub-card__desc {
	color: rgba(250, 250, 247, 0.65);
}

.hz-hub-card__arrow {
	font-size: var(--DS-T-SIZE-SM);
	color: var(--DS-C-BRAND-GREEN);
	font-weight: 600;
	margin-top: auto;
	padding-top: var(--DS-G-SP-002);
}

.hz-hub-card--ai .hz-hub-card__arrow {
	color: var(--DS-C-BRAND-GOLD);
}

/* list-item reset so grid items fill row height */
.hz-hub-grid__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* ==========================================================================
   S-03 / S-04 / S-05 / S-06 — Featured Content Cards
   Shared card shell for Guides, Tools, Templates, and Insights sections.
   Full-card anchor so keyboard nav covers the entire card.
   ========================================================================== */

.hz-content-card {
	display: flex;
	flex-direction: column;
	gap: var(--DS-G-SP-003);
	padding: var(--DS-G-SP-005);
	background-color: var(--DS-C-BG-PRIMARY);
	border: 1px solid var(--DS-C-BORDER);
	border-radius: var(--DS-G-R-005);
	text-decoration: none;
	color: inherit;
	transition:
		box-shadow var(--DS-G-M-001),
		border-color var(--DS-G-M-001);
	height: 100%;
}

.hz-content-card:hover {
	box-shadow: var(--DS-SH-BASE);
	border-color: var(--DS-C-BRAND-GREEN);
}

.hz-content-card:focus-visible {
	outline: 2px solid var(--DS-C-FOCUS);
	outline-offset: 2px;
}

.hz-content-card__eyebrow {
	display: block;
	font-family: var(--DS-T-FAMILY-SANS);
	font-size: var(--DS-T-SIZE-XS);
	font-weight: 700;
	letter-spacing: var(--DS-T-TRACKING-WIDER);
	text-transform: uppercase;
	color: var(--DS-C-BRAND-GREEN);
}

.hz-content-card__title {
	font-family: var(--DS-T-FAMILY-SERIF);
	font-size: var(--DS-T-SIZE-LG);
	font-weight: normal;
	line-height: var(--DS-T-LEADING-SNUG);
	color: var(--DS-C-BRAND-NAVY);
	margin: 0;
	text-wrap: balance;
}

.hz-content-card__excerpt {
	font-family: var(--DS-T-FAMILY-SANS);
	font-size: var(--DS-T-SIZE-SM);
	line-height: var(--DS-T-LEADING-BASE);
	color: var(--DS-C-TEXT-MUTED);
	margin: 0;
	flex-grow: 1;
}

.hz-content-card__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--DS-G-SP-002);
	font-family: var(--DS-T-FAMILY-SANS);
	font-size: var(--DS-T-SIZE-SM);
	font-weight: 600;
	color: var(--DS-C-BRAND-GREEN);
	margin-top: auto;
	padding-top: var(--DS-G-SP-002);
}

/* Section-level footer row (heading + view-all CTA inline) */
.hz-featured-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--DS-G-SP-004);
	margin-bottom: var(--DS-G-SP-006);
}

.hz-featured-header .hz-section__header {
	margin-bottom: 0;
}

/* list-item reset so grid cells fill */
.hz-content-grid {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* ==========================================================================
   S-07 — Newsletter Section
   Feature-flag controlled (hz_newsletter_enabled). White surface.
   DPDP consent checkbox required before submit.
   Actual ESP wiring is a future sprint — form renders only.
   ========================================================================== */

.hz-newsletter__inner {
	max-width: 560px;
}

.hz-newsletter__form {
	display: flex;
	flex-direction: column;
	gap: var(--DS-G-SP-004);
	margin-top: var(--DS-G-SP-005);
}

.hz-newsletter__field {
	display: flex;
	gap: var(--DS-G-SP-003);
	flex-wrap: wrap;
}

.hz-newsletter__input {
	flex: 1 1 240px;
	padding: var(--DS-G-SP-003) var(--DS-G-SP-004);
	font-family: var(--DS-T-FAMILY-SANS);
	font-size: var(--DS-T-SIZE-BASE);
	background-color: var(--DS-C-BG-PRIMARY);
	border: 1px solid var(--DS-C-BORDER);
	border-radius: var(--DS-G-R-004);
	color: var(--DS-C-TEXT-PRIMARY);
	min-height: 44px;
}

.hz-newsletter__input::placeholder {
	color: var(--DS-C-TEXT-MUTED);
}

.hz-newsletter__input:focus {
	outline: 2px solid var(--DS-C-FOCUS);
	outline-offset: 1px;
	border-color: transparent;
}

.hz-newsletter__consent {
	display: flex;
	align-items: flex-start;
	gap: var(--DS-G-SP-002);
}

.hz-newsletter__consent-checkbox {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--DS-C-BRAND-GREEN);
	cursor: pointer;
}

.hz-newsletter__consent-label {
	font-family: var(--DS-T-FAMILY-SANS);
	font-size: var(--DS-T-SIZE-XS);
	line-height: var(--DS-T-LEADING-BASE);
	color: var(--DS-C-TEXT-MUTED);
	cursor: pointer;
}

.hz-newsletter__consent-label a {
	color: var(--DS-C-BRAND-GREEN);
	text-decoration: underline;
}

.hz-newsletter__note {
	font-family: var(--DS-T-FAMILY-SANS);
	font-size: var(--DS-T-SIZE-XS);
	color: var(--DS-C-TEXT-MUTED);
	margin: 0;
}

/* ==========================================================================
   S-08 — AI Section (Phase 1)
   Midnight (navy) surface. Three sub-zones:
     1. AI Search entry (conditional on hz_ai_search_enabled flag)
     2. AI Tools directory preview (3 cards from hz_ai_tool CPT or static fallback)
     3. AI Transparency notice (always rendered)
   No conversational AI. No "Coming Soon" placeholders.
   ========================================================================== */

/* AI Search entry — only rendered when hz_ai_search_enabled is true */
.hz-ai-search {
	background-color: rgba(250, 250, 247, 0.05);
	border: 1px solid rgba(250, 250, 247, 0.12);
	border-radius: var(--DS-G-R-005);
	padding: var(--DS-G-SP-005) var(--DS-G-SP-006);
	margin-bottom: var(--DS-G-SP-007);
}

.hz-ai-search__label {
	display: block;
	font-family: var(--DS-T-FAMILY-SANS);
	font-size: var(--DS-T-SIZE-XS);
	font-weight: 700;
	letter-spacing: var(--DS-T-TRACKING-WIDEST);
	text-transform: uppercase;
	color: var(--DS-C-BRAND-GOLD);
	margin-bottom: var(--DS-G-SP-003);
}

.hz-ai-search__form {
	display: flex;
	gap: var(--DS-G-SP-003);
	flex-wrap: wrap;
}

.hz-ai-search__input {
	flex: 1 1 280px;
	padding: var(--DS-G-SP-003) var(--DS-G-SP-004);
	font-family: var(--DS-T-FAMILY-SANS);
	font-size: var(--DS-T-SIZE-BASE);
	background-color: rgba(250, 250, 247, 0.08);
	border: 1px solid rgba(250, 250, 247, 0.2);
	border-radius: var(--DS-G-R-004);
	color: #FAFAF7;
	min-height: 44px;
}

.hz-ai-search__input::placeholder {
	color: rgba(250, 250, 247, 0.4);
}

.hz-ai-search__input:focus {
	outline: 2px solid var(--DS-C-BRAND-GOLD);
	outline-offset: 1px;
	border-color: transparent;
}

/* AI tool cards grid */
.hz-ai-tool-card {
	display: flex;
	flex-direction: column;
	gap: var(--DS-G-SP-003);
	padding: var(--DS-G-SP-005);
	background-color: rgba(250, 250, 247, 0.05);
	border: 1px solid rgba(250, 250, 247, 0.1);
	border-radius: var(--DS-G-R-005);
	color: #FAFAF7;
	transition: border-color var(--DS-G-M-001);
}

.hz-ai-tool-card:hover {
	border-color: rgba(250, 250, 247, 0.25);
}

.hz-ai-tool-card__name {
	font-family: var(--DS-T-FAMILY-SANS);
	font-size: var(--DS-T-SIZE-BASE);
	font-weight: 700;
	color: #FAFAF7;
	margin: 0;
}

.hz-ai-tool-card__desc {
	font-family: var(--DS-T-FAMILY-SANS);
	font-size: var(--DS-T-SIZE-SM);
	line-height: var(--DS-T-LEADING-BASE);
	color: rgba(250, 250, 247, 0.62);
	margin: 0;
	flex-grow: 1;
}

.hz-ai-tool-card__status {
	display: inline-flex;
	align-items: center;
	gap: var(--DS-G-SP-001);
	font-family: var(--DS-T-FAMILY-SANS);
	font-size: var(--DS-T-SIZE-XS);
	font-weight: 700;
	letter-spacing: var(--DS-T-TRACKING-WIDER);
	text-transform: uppercase;
	color: var(--DS-C-BRAND-GOLD);
	padding-top: var(--DS-G-SP-002);
	margin-top: auto;
	border-top: 1px solid rgba(250, 250, 247, 0.08);
}

/* AI Transparency notice — always rendered in S-08 */
.hz-transparency {
	margin-top: var(--DS-G-SP-007);
	padding: var(--DS-G-SP-004) var(--DS-G-SP-005);
	border-left: 3px solid var(--DS-C-BRAND-GOLD);
	background-color: rgba(250, 250, 247, 0.03);
	border-radius: 0 var(--DS-G-R-003) var(--DS-G-R-003) 0;
}

.hz-transparency__text {
	font-family: var(--DS-T-FAMILY-SANS);
	font-size: var(--DS-T-SIZE-XS);
	line-height: var(--DS-T-LEADING-BASE);
	color: rgba(250, 250, 247, 0.6);
	margin: 0;
}

.hz-transparency__text strong {
	color: var(--DS-C-BRAND-GOLD);
	font-weight: 700;
}

/* ==========================================================================
   Reduced-motion override
   Collapses all homepage-v2 transitions per prefers-reduced-motion: reduce.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.hz-btn,
	.hz-hub-card,
	.hz-content-card,
	.hz-ai-tool-card {
		transition: none;
	}
}