/**
 * HP-02B Navigation — nav.css
 *
 * Mega menu panels, hamburger → X animation, mobile accordion, nav overlay.
 * Uses DS-* design tokens exclusively (HP-02A.05A–C).
 * Loaded globally on every template — see inc/assets.php.
 *
 * Does NOT modify or override navigation.css (legacy classes, backward-compat).
 * All new selectors use the .hz-nav-* and .hz-drawer__* namespaces.
 *
 * Dependencies: tokens.css (DS-* tokens), layout.css (hz-content-well sizing)
 *
 * WCAG 2.1 AA compliance:
 *   - All interactive elements: min-height/width 44px (SC 2.5.5)
 *   - Focus rings: 2px solid DS-C-FOCUS (SC 2.4.7)
 *   - prefers-reduced-motion: disables all transitions (SC 2.3.3)
 *
 * @package HaritaZen
 * @since   HP-02B Sprint 2
 */

/* =========================================================================
   1. Desktop nav — mega-capable item enhancements
   ========================================================================= */

/* Chevron icon on links that open a panel */
.hz-nav__link--has-panel {
	display: inline-flex;
	align-items: center;
	gap: var(--DS-G-SP-002); /* 8px */
}

.hz-nav__chevron {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	transition: transform var(--DS-G-M-001);
	pointer-events: none;
}

[aria-expanded="true"] > .hz-nav__chevron,
[data-hz-panel][aria-expanded="true"] .hz-nav__chevron {
	transform: rotate(180deg);
}

/* =========================================================================
   2. Hamburger → X animation (CSS-only via aria-expanded state)
   ========================================================================= */

/* Extend the existing .hamburger span transition to include transform */
.hamburger span {
	transition: transform var(--DS-G-M-001), opacity var(--DS-G-M-001);
}

.hamburger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.hamburger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.hamburger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* =========================================================================
   3. Navigation overlay (dims page content behind open mega panel)
   ========================================================================= */

.hz-nav-overlay {
	position: fixed;
	inset: 0;
	background: rgba(28, 43, 74, 0.4); /* --DS-G-C-001 at 40% */
	z-index: calc(var(--DS-LY-Z-HEADER) - 10);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--DS-G-M-002), visibility var(--DS-G-M-002);
	pointer-events: none;
}

.hz-nav-overlay.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* =========================================================================
   4. Mega menu wrapper
   ========================================================================= */

/*
 * Positioned absolutely below the sticky .site-header.
 * position:sticky creates a containing block for absolutely-positioned children,
 * so top:100% resolves to immediately below the bottom edge of the header.
 */
.hz-nav-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--DS-C-BG-PRIMARY);
	border-bottom: 1px solid var(--DS-C-BORDER);
	box-shadow: var(--DS-SH-LG);
	z-index: var(--DS-LY-Z-HEADER);
	/* Hidden by default */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition:
		opacity var(--DS-G-M-001),
		transform var(--DS-G-M-001),
		visibility var(--DS-G-M-001);
}

.hz-nav-mega.has-open-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Mega menu is desktop-only */
@media (max-width: 1023px) {
	.hz-nav-mega {
		display: none;
	}
}

/* =========================================================================
   5. Individual mega panels
   ========================================================================= */

.hz-nav-mega__panel {
	display: none;
	padding-block: var(--DS-G-SP-006); /* 40px */
}

.hz-nav-mega__panel.is-active {
	display: block;
}

/* Content well — mirrors .hz-content-well but two-column */
.hz-nav-mega__inner {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: var(--DS-G-SP-007); /* 48px */
	max-width: var(--DS-LY-CONTENT-WELL-MAX);
	margin-inline: auto;
	padding-inline: clamp(var(--DS-G-SP-004), 3.5vw, var(--DS-G-SP-007));
}

/* Hub info — left column */
.hz-nav-mega__hub-info {
	display: flex;
	flex-direction: column;
	gap: var(--DS-G-SP-003); /* 12px */
	padding-right: var(--DS-G-SP-006); /* 40px gutter */
	border-right: 1px solid var(--DS-C-BORDER);
}

.hz-nav-mega__eyebrow {
	display: block;
	font-size: var(--DS-T-SIZE-XS);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--DS-T-TRACKING-WIDE);
	color: var(--DS-C-BRAND-GREEN);
}

.hz-nav-mega__description {
	font-size: var(--DS-T-SIZE-SM);
	color: var(--DS-C-TEXT-MUTED);
	line-height: var(--DS-T-LEADING-RELAXED);
	margin: 0;
	flex: 1;
}

.hz-nav-mega__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--DS-G-SP-002);
	font-size: var(--DS-T-SIZE-SM);
	font-weight: 600;
	color: var(--DS-C-BRAND-GREEN);
	text-decoration: none;
	min-height: 44px; /* ACC-QG-10 touch target */
	padding-block: var(--DS-G-SP-002);
	width: fit-content;
}

.hz-nav-mega__cta svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	transition: transform var(--DS-G-M-001);
}

.hz-nav-mega__cta:hover svg {
	transform: translateX(4px);
}

.hz-nav-mega__cta:hover {
	color: var(--DS-C-BRAND-NAVY);
}

.hz-nav-mega__cta:focus-visible {
	outline: var(--DS-A-FOCUS-RING);
	outline-offset: var(--DS-A-FOCUS-RING-OFFSET);
	border-radius: var(--DS-G-R-001);
}

/* Links grid — right column */
.hz-nav-mega__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--DS-G-SP-002);
	align-content: start;
}

.hz-nav-mega__link-item {
	display: flex;
}

.hz-nav-mega__link {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--DS-G-SP-003);
	border-radius: var(--DS-G-R-003);
	text-decoration: none;
	width: 100%;
	min-height: 44px; /* ACC-QG-10 */
	justify-content: center;
	transition: background-color var(--DS-G-M-001);
}

.hz-nav-mega__link:hover {
	background-color: var(--DS-C-BG-MIST);
}

.hz-nav-mega__link:focus-visible {
	outline: var(--DS-A-FOCUS-RING);
	outline-offset: var(--DS-A-FOCUS-RING-OFFSET);
	border-radius: var(--DS-G-R-003);
}

.hz-nav-mega__link-label {
	display: block;
	font-size: var(--DS-T-SIZE-SM);
	font-weight: 600;
	color: var(--DS-C-TEXT-PRIMARY);
	line-height: var(--DS-T-LEADING-TIGHT);
}

.hz-nav-mega__link-desc {
	display: block;
	font-size: var(--DS-T-SIZE-XS);
	color: var(--DS-C-TEXT-MUTED);
	line-height: var(--DS-T-LEADING-NORMAL);
}

/* =========================================================================
   6. Mobile accordion — sub-nav within .mobile-drawer
   ========================================================================= */

/*
 * nav.js injects .hz-drawer__accordion-btn before each .hz-drawer__sub-nav.
 * The parent <li> needs flex layout so the link and button sit inline.
 * CSS :has() provides this without JS; older browsers fall back gracefully
 * (the button appears below the link, still functional).
 */
.mobile-drawer__nav li:has( > .hz-drawer__sub-nav ) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: var(--border-hairline); /* preserve existing border */
}

.mobile-drawer__nav li:has( > .hz-drawer__sub-nav ) > a {
	flex: 1;
	border-bottom: none; /* parent <li> provides the border */
	padding: var(--DS-G-SP-004) 0;
}

/* Accordion toggle button (injected by nav.js) */
.hz-drawer__accordion-btn {
	background: none;
	border: none;
	color: var(--DS-C-TEXT-PRIMARY);
	padding: 0 var(--DS-G-SP-002);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	border-radius: var(--DS-G-R-002);
	cursor: pointer;
	flex-shrink: 0;
	transition: background-color var(--DS-G-M-001);
}

.hz-drawer__accordion-btn:hover {
	background-color: var(--DS-C-BG-MIST);
}

.hz-drawer__accordion-btn:focus-visible {
	outline: var(--DS-A-FOCUS-RING);
	outline-offset: var(--DS-A-FOCUS-RING-OFFSET);
	border-radius: var(--DS-G-R-002);
}

.hz-drawer__accordion-btn svg {
	width: 16px;
	height: 16px;
	pointer-events: none;
	transition: transform var(--DS-G-M-001);
}

.hz-drawer__accordion-btn[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* Sub-nav list (collapsed by default, animated on expand) */
.hz-drawer__sub-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	/* Collapsed: zero height, no padding, invisible */
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--DS-G-M-003), padding-bottom var(--DS-G-M-001);
}

.hz-drawer__sub-nav.is-open {
	max-height: 600px; /* generous ceiling — actual height is much less */
	padding-bottom: var(--DS-G-SP-003);
}

/* Override mobile-drawer__nav li border for sub-nav items */
.hz-drawer__sub-nav li {
	border-bottom: none !important;
}

.hz-drawer__sub-nav a {
	display: flex;
	align-items: center;
	padding: var(--DS-G-SP-002) var(--DS-G-SP-004);
	font-size: var(--DS-T-SIZE-SM);
	color: var(--DS-C-TEXT-MUTED);
	text-decoration: none;
	min-height: 44px;
	border-radius: var(--DS-G-R-002);
	transition: color var(--DS-G-M-001), background-color var(--DS-G-M-001);
}

.hz-drawer__sub-nav a:hover {
	color: var(--DS-C-BRAND-GREEN);
	background-color: var(--DS-C-BG-MIST);
}

.hz-drawer__sub-nav a:focus-visible {
	outline: var(--DS-A-FOCUS-RING);
	outline-offset: var(--DS-A-FOCUS-RING-OFFSET);
	border-radius: var(--DS-G-R-002);
}

/* =========================================================================
   7. Dark mode
   ========================================================================= */

@media (prefers-color-scheme: dark) {
	.hz-nav-mega {
		border-bottom-color: rgba(255, 255, 255, 0.08);
	}
	.hz-nav-mega__hub-info {
		border-right-color: rgba(255, 255, 255, 0.08);
	}
}

:root[data-theme="dark"] .hz-nav-mega,
:root[data-theme="dark"] .hz-nav-mega__hub-info {
	border-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="light"] .hz-nav-mega {
	border-bottom-color: var(--DS-C-BORDER);
}

:root[data-theme="light"] .hz-nav-mega__hub-info {
	border-right-color: var(--DS-C-BORDER);
}

/* =========================================================================
   8. Reduced motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	.hz-nav-mega,
	.hz-nav-overlay,
	.hz-nav__chevron,
	.hz-nav-mega__cta svg,
	.hz-drawer__sub-nav,
	.hz-drawer__accordion-btn svg,
	.hamburger span {
		transition: none;
	}
}