/* ==========================================================================
   Header — .ac-header
   ========================================================================== */

.ac-header {
	position:    sticky;
	top:         0;
	z-index:     var(--z-dropdown);
	width:       100%;
	background:  var(--ac-color-white);
	box-shadow:  0 1px 0 var(--ac-color-border);
	/* Only animate box-shadow — animating height on an auto-height element
	   causes the browser to recalculate layout every frame, producing flicker. */
	transition:  box-shadow var(--ac-duration-short) var(--ac-ease-standard);
	/* Nunito Sans for all header text */
	font-family: var(--ac-font-family-ui);
}

.ac-header.is-scrolled {
	box-shadow: var(--ac-shadow-md);
}

.ac-header__inner {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             var(--ac-space-6);
	height:          var(--ac-header-height);
	/* Transitioning between two explicit px values is safe — no layout-thrash.
	   (Only animating height:auto would cause the flicker.) */
	transition:      height var(--ac-duration-base) var(--ac-ease-standard);
}

.ac-header.is-scrolled .ac-header__inner {
	height: var(--ac-header-height-scrolled);
}

/* ------------------------------------------------------------------
   Logo
   ------------------------------------------------------------------ */
.ac-header__logo {
	flex-shrink:     0;
	display:         flex;
	align-items:     center;
	text-decoration: none;
}

.ac-header__logo img {
	height:     100px;
	width:      auto;
	max-width:  220px;
	object-fit: contain;
	/* Use transform instead of height to animate the logo shrink —
	   transform is GPU-composited and never triggers layout recalculation. */
	transform-origin: left center;
	transition:
		transform var(--ac-duration-base) var(--ac-ease-standard),
		opacity   var(--ac-duration-base) var(--ac-ease-standard);
}

.ac-header.is-scrolled .ac-header__logo img {
	/* Scale down to ~48/100 = 0.48 — no height change, no layout recalc */
	transform: scale( 0.48 );
}

.ac-header__logo-text {
	font-size:   var(--ac-font-size-lg);
	font-weight: var(--ac-font-weight-bold);
	color:       var(--ac-color-primary);
}

/* ------------------------------------------------------------------
   Navigation (mega menu wrapper)
   ------------------------------------------------------------------ */
.ac-header__nav {
	flex:        1;
	display:     flex;
	justify-content: center;
}

/* WP nav menu reset */
.ac-header__nav .menu {
	list-style:  none;
	margin:      0;
	padding:     0;
	display:     flex;
	align-items: center;
	gap:         var(--ac-space-1);
}

/* Top-level items need relative positioning for dropdown anchor */
.ac-header__nav .menu > li {
	position: relative;
}

.ac-header__nav .menu > li > a,
.ac-header__nav .menu > li > span {
	display:     block;
	padding:     var(--ac-space-2) var(--ac-space-3);
	font-size:   var(--ac-font-size-base);
	font-weight: var(--ac-font-weight-semibold);
	color:       var(--ac-color-primary);   /* #002F86 navy */
	text-decoration: none;
	border-radius:   var(--ac-radius-sm);
	transition:
		color            var(--ac-duration-short) var(--ac-ease-standard),
		background-color var(--ac-duration-short) var(--ac-ease-standard);
	white-space: nowrap;
}

.ac-header__nav .menu > li > a:hover,
.ac-header__nav .menu > li > a:focus-visible {
	color:            var(--ac-color-white);
	background-color: var(--ac-color-blue);   /* #0081C9 */
}

/* ------------------------------------------------------------------
   Dropdown submenus — hidden by default, revealed on hover / focus
   ------------------------------------------------------------------ */

/* Hide ALL sub-menus by default */
.ac-header__nav .menu .sub-menu {
	display:      none;
	position:     absolute;
	top:          calc(100% + 4px);
	left:         0;
	z-index:      var(--z-dropdown);
	min-width:    220px;
	background:   var(--ac-color-white);
	border:       1px solid var(--ac-color-border);
	border-radius: var(--ac-radius-md);
	box-shadow:   var(--ac-shadow-md);
	padding:      var(--ac-space-2) 0;
	list-style:   none;
	margin:       0;
}

/*
 * Show on:
 *  - :hover (mouse users)
 *  - :focus-within (keyboard tab into submenu — CSS-only fallback)
 *  - .is-open (set by JS disclosure toggle — carries aria-expanded)
 */
.ac-header__nav .menu > li:hover > .sub-menu,
.ac-header__nav .menu > li:focus-within > .sub-menu,
.ac-header__nav .menu > li.is-open > .sub-menu {
	display: block;
}

/* ------------------------------------------------------------------
   Disclosure toggle button (injected by JS beside parent nav links)
   ------------------------------------------------------------------ */
.ac-nav__toggle {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           28px;
	height:          28px;
	padding:         0;
	margin-left:     2px;
	background:      transparent;
	border:          none;
	border-radius:   var(--ac-radius-sm);
	color:           var(--ac-color-text);
	font-size:       0.75rem;
	cursor:          pointer;
	vertical-align:  middle;
	transition:
		color            var(--ac-duration-short) var(--ac-ease-standard),
		background-color var(--ac-duration-short) var(--ac-ease-standard),
		transform        var(--ac-duration-short) var(--ac-ease-standard);
}

.ac-nav__toggle:hover,
.ac-nav__toggle:focus-visible {
	color:            var(--ac-color-primary);
	background-color: var(--ac-color-surface);
}

.ac-nav__toggle:focus-visible {
	outline:        3px solid var(--ac-color-focus-ring);
	outline-offset: 2px;
}

/* Rotate chevron when submenu is open */
.ac-header__nav .menu > li.is-open > .ac-nav__toggle i,
.ac-nav__toggle[aria-expanded="true"] i {
	transform: rotate(180deg);
}

/* Sub-menu links */
.ac-header__nav .menu .sub-menu li {
	position: relative;
}

.ac-header__nav .menu .sub-menu li a {
	display:        block;
	padding:        var(--ac-space-2) var(--ac-space-5);
	font-size:      var(--ac-font-size-sm);
	font-weight:    var(--ac-font-weight-normal);
	color:          var(--ac-color-text);
	text-decoration: none;
	white-space:    nowrap;
	transition:
		color            var(--ac-duration-short) var(--ac-ease-standard),
		background-color var(--ac-duration-short) var(--ac-ease-standard);
}

.ac-header__nav .menu .sub-menu li a:hover,
.ac-header__nav .menu .sub-menu li a:focus-visible {
	color:            var(--ac-color-primary);
	background-color: var(--ac-color-surface);
}

/* Nested third-level sub-menus fly out to the right */
.ac-header__nav .menu .sub-menu .sub-menu {
	top:  0;
	left: 100%;
}

.ac-header__nav .menu .sub-menu li:hover > .sub-menu,
.ac-header__nav .menu .sub-menu li:focus-within > .sub-menu {
	display: block;
}

/* ------------------------------------------------------------------
   Header actions (Help / Donate / Join)
   ------------------------------------------------------------------ */
.ac-header__actions {
	flex-shrink: 0;
	display:     flex;
	align-items: center;
	gap:         var(--ac-space-3);
}

/* Help button — the fa-circle-question icon IS the circle, no extra border */
.ac-header__help-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           44px;
	height:          44px;
	background:      transparent;
	border:          none;
	border-radius:   var(--ac-radius-pill);
	color:           var(--ac-color-primary);   /* #002F86 */
	font-size:       2.2rem;   /* icon fills the 44px touch target */
	cursor:          pointer;
	text-decoration: none;
	transition:      color var(--ac-duration-short) var(--ac-ease-standard);
}

.ac-header__help-btn:hover,
.ac-header__help-btn:focus-visible {
	color: var(--ac-color-blue);   /* #0081C9 */
}

.ac-header__help-btn:focus-visible {
	outline:        3px solid var(--ac-color-focus-ring);
	outline-offset: 2px;
}

/* Hamburger (mobile only) */
.ac-header__hamburger {
	display: none;
}

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */
@media (max-width: 56.25em) {
	.ac-header__inner {
		height: var(--ac-header-height-mobile);
		gap:    var(--ac-space-3);
	}

	/* Hide desktop nav */
	.ac-header__nav {
		display: none;
	}

	/* Hide help icon; show hamburger */
	.ac-header__help-btn {
		display: none;
	}

	/* Hide Donate / Join buttons on mobile — they appear inside the mobile menu */
	.ac-header__actions .ac-btn {
		display: none;
	}

	.ac-header__hamburger {
		display:         inline-flex;
		align-items:     center;
		justify-content: center;
		width:           56px;
		height:          56px;
		background:      var(--ac-color-secondary);
		border:          none;
		border-radius:   var(--ac-radius-md);
		color:           var(--ac-color-white);
		font-size:       1.5rem;
		cursor:          pointer;
		transition:
			background-color var(--ac-duration-short) var(--ac-ease-standard);
	}

	.ac-header__hamburger:hover,
	.ac-header__hamburger:focus-visible {
		background-color: var(--ac-color-secondary-dark);
	}

	.ac-header__hamburger:focus-visible {
		outline:        3px solid var(--ac-color-secondary);
		outline-offset: 3px;
	}

	/* Logo on mobile — base size is smaller so reset the scale */
	.ac-header__logo img {
		height: 60px;
		transform: none;
	}

	.ac-header.is-scrolled .ac-header__logo img {
		transform: scale( 0.8 );  /* 90px mobile base → 72px scrolled ≈ 0.8 */
	}
}