/**
 * Premium header: logo area refinements, header CTA row, the mobile
 * navigation drawer (the existing #site-navigation/#primary-menu element
 * repositioned via CSS alone — see header.php's file comment for why
 * nothing is duplicated between desktop and mobile), transparent-header
 * support, and a mega-menu-ready hook. Loaded after navigation.css so it
 * can extend/override the base nav rules for the drawer breakpoint only.
 */

/* ---------- Premium sticky transition + glassmorphism (Phase 2.14,
   docs/DECISIONS.md ADR-034) ----------
   Applies on every page (not just the opt-in .has-transparent-header
   variant below, which stays a separate, unchanged feature). The base
   .site-header rule itself (background-color, border, position:sticky)
   is Phase 2's Golden Baseline and is not touched here — this only adds
   a transition and an .is-scrolled enhancement on top of it. */

.site-header {
	transition:
		background-color var(--transition-base) var(--ease-standard),
		box-shadow var(--transition-base) var(--ease-standard),
		padding-block var(--transition-base) var(--ease-standard);
}

.site-header.is-scrolled {
	padding-block: var(--space-3);
	box-shadow: var(--shadow-md);
}

.js .site-header.is-scrolled {
	background-color: var(--glass-bg);
	-webkit-backdrop-filter: blur(var(--blur-sm));
	backdrop-filter: blur(var(--blur-sm));
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.js .site-header.is-scrolled {
		background-color: var(--color-background);
	}
}

/* ---------- Header actions row (CTAs, search, drawer trigger) ---------- */

.header-actions {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-inline-start: auto;
}

/* ---------- Header CTA buttons (populated via the header-cta menu, ADR-021) ---------- */

.header-cta {
	display: flex;
}

.header-cta__list {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.header-cta__list a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-md);
	background-color: var(--color-brand-primary);
	color: var(--color-text-inverse);
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-sm);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--transition-fast) var(--ease-standard);
}

.header-cta__list a:hover {
	background-color: var(--color-brand-primary-hover);
	color: var(--color-text-inverse);
}

.header-cta__list a svg {
	width: 1.1rem;
	height: 1.1rem;
	flex: 0 0 auto;
}

/* Site owner opts a menu item into WhatsApp/Emergency styling via the
   core "CSS Classes" field on that menu item (Screen Options → CSS
   Classes in Appearance → Menus) — see docs/COMPONENT_LIBRARY.md. */
.header-cta__list .cta-whatsapp a {
	background-color: var(--color-whatsapp);
}

.header-cta__list .cta-whatsapp a:hover {
	background-color: var(--color-whatsapp-dark);
}

.header-cta__list .cta-emergency a {
	background-color: var(--color-danger-500);
}

.header-cta__list .cta-emergency a:hover {
	background-color: var(--color-danger-500);
	filter: brightness(0.9);
}

@media (max-width: 64rem) {
	.header-cta__list a span {
		display: none;
	}

	.header-cta__list a {
		padding: var(--space-2);
	}
}

/* ---------- Mobile drawer trigger ----------
   Visibility (display: none on desktop, inline-flex at ≤48rem) stays the
   base rule set in navigation.css — only icon sizing/layout is added here. */

.menu-toggle {
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	gap: 0;
}

@media (max-width: 48rem) {
	.menu-toggle {
		display: inline-flex;
	}
}

.menu-toggle__icon-close {
	display: none;
}

/* The toggle target is #site-navigation.is-menu-open — the same class
   Phase 1/2 already toggled via JS, unchanged. .drawer-backdrop and
   .header-actions (both later siblings of #site-navigation inside
   .site-header) react to it via the general sibling combinator, so no
   second class or JS change is needed to reach them. */
.main-navigation.is-menu-open ~ .header-actions .menu-toggle__icon-open {
	display: none;
}

.main-navigation.is-menu-open ~ .header-actions .menu-toggle__icon-close {
	display: block;
}

/* ---------- Mobile navigation drawer ---------- */

.main-navigation__drawer-header {
	display: none;
}

.drawer-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	z-index: var(--z-modal-backdrop);
	background-color: rgba(17, 24, 39, 0.5);
	opacity: 0;
	transition: opacity var(--transition-base) var(--ease-standard);
}

.main-navigation.is-menu-open ~ .drawer-backdrop {
	display: block;
	opacity: 1;
}

@media (max-width: 48rem) {
	.main-navigation {
		position: fixed;
		inset-block: 0;
		inset-inline-end: 0;
		inset-inline-start: auto;
		z-index: var(--z-modal);
		width: min(85vw, 22rem);
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--space-4);
		background-color: var(--color-background);
		box-shadow: var(--shadow-xl);
		transform: translateX(100%);
		transition: transform var(--transition-base) var(--ease-standard);
		overflow-y: auto;
	}

	.main-navigation.is-menu-open {
		transform: translateX(0);
	}

	.main-navigation__drawer-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-block-end: var(--space-4);
		margin-block-end: var(--space-2);
		border-block-end: 1px solid var(--color-border);
		font-weight: var(--font-weight-semibold);
	}

	.main-navigation ul#primary-menu {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		flex-basis: auto;
		padding-block-start: 0;
	}

	.main-navigation ul#primary-menu a {
		padding-block: var(--space-3);
		min-height: 2.75rem;
	}

	/* Premium stagger-in (Phase 2.14, docs/DECISIONS.md ADR-034): each
	   top-level item fades/slides in slightly after the drawer itself
	   finishes sliding open. .js-scoped and covered by the global
	   reduced-motion override (assets/css/accessibility.css), which
	   collapses the transition-delay's visible effect to near-zero. */
	.js .main-navigation ul#primary-menu > li {
		opacity: 0;
		transform: translateX(12px);
		transition:
			opacity var(--transition-base) var(--ease-out),
			transform var(--transition-base) var(--ease-out);
	}

	.js .main-navigation.is-menu-open ul#primary-menu > li {
		opacity: 1;
		transform: none;
	}

	.js .main-navigation.is-menu-open ul#primary-menu > li:nth-child(1) { transition-delay: 60ms; }
	.js .main-navigation.is-menu-open ul#primary-menu > li:nth-child(2) { transition-delay: 100ms; }
	.js .main-navigation.is-menu-open ul#primary-menu > li:nth-child(3) { transition-delay: 140ms; }
	.js .main-navigation.is-menu-open ul#primary-menu > li:nth-child(4) { transition-delay: 180ms; }
	.js .main-navigation.is-menu-open ul#primary-menu > li:nth-child(n+5) { transition-delay: 220ms; }
}

/* ---------- Transparent header (architecture-ready, opt-in via the
   agencycare_is_transparent_header filter — no page enables it yet) ---------- */

.has-transparent-header .site-header {
	position: absolute;
	inset-inline: 0;
	background-color: transparent;
	border-block-end-color: transparent;
	color: var(--color-text-inverse);
}

.has-transparent-header .site-header .site-title a,
.has-transparent-header .site-header .site-description {
	color: inherit;
}

.has-transparent-header .site-header.is-scrolled {
	position: fixed;
	background-color: var(--color-background);
	border-block-end-color: var(--color-border);
	color: inherit;
}

.has-transparent-header .site-header.is-scrolled .site-title a,
.has-transparent-header .site-header.is-scrolled .site-description {
	color: var(--color-heading);
}

/* ---------- Mega-menu-ready hook (structure only — no content populated
   this phase; a menu item opts in via the "mega-menu" CSS class,
   Appearance → Menus → Screen Options → CSS Classes) ---------- */

.main-navigation li.mega-menu {
	position: static;
}

.main-navigation li.mega-menu > .sub-menu {
	inset-inline: 0;
	width: 100%;
	max-width: none;
	flex-direction: row;
	flex-wrap: wrap;
	padding: var(--space-6);
	/* Phase 2.14 polish (docs/DECISIONS.md ADR-034): premium elevation and
	   a fade/lift-in transition matching the rest of the dropdown system —
	   still zero content populated, visual readiness only. */
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-2xl);
}

/* Overrides navigation.css's display:none base rule for this one variant
   — display can't be transitioned, so a fade-in needs visibility+opacity
   instead, which can. */
.js .main-navigation li.mega-menu > .sub-menu {
	display: flex;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px);
	transition:
		opacity var(--transition-fast) var(--ease-out),
		transform var(--transition-fast) var(--ease-out),
		visibility 0s linear var(--transition-fast);
}

.js .main-navigation li.mega-menu:hover > .sub-menu,
.js .main-navigation li.mega-menu:focus-within > .sub-menu {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: none;
	transition-delay: 0s;
}

@media (max-width: 48rem) {
	.main-navigation li.mega-menu > .sub-menu {
		flex-direction: column;
	}
}