/*
 * Header — topbar, sticky nav, dropdowns, mobile panel.
 *
 * Every value transcribed from MEMORY.md "Header" and the SiteHeader
 * prototype. The prototype switched these in JavaScript; here they are two
 * media queries:
 *
 *   < 1330px  nav-compact    tighter padding, 11.5px labels
 *   < 1130px  nav-collapse   hamburger replaces the nav entirely
 *   <  768px  narrow         topbar hidden
 *
 * Dropdowns open on :hover AND :focus-within, so keyboard users get them
 * without any JavaScript — the prototype was mouse-only.
 */


/* ===============================================================
 * Topbar — ink, 40px, hidden below 768px
 * =============================================================== */

.ahf-topbar {
	background: var(--ahf-ink);
	height: var(--ahf-topbar-height);
	display: flex;
	align-items: center;
	font-size: var(--ahf-fs-topbar);
	font-weight: var(--ahf-fw-semibold);
}

.ahf-topbar__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.ahf-topbar__left {
	display: flex;
	gap: 22px;
	align-items: center;
	color: var(--ahf-on-dark-soft);
}

.ahf-topbar__phone {
	color: var(--ahf-gold-light);
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

.ahf-topbar__phone:hover {
	color: var(--ahf-white);
}

.ahf-topbar__right {
	display: flex;
	gap: 16px;
	align-items: center;
}

/*
 * The topbar links are small by design — the prototype sets them at 11–12px.
 * Their hit areas are not: a 14px social icon is well under the 24x24 minimum
 * WCAG 2.5.8 asks for, so the padding here grows the target without changing
 * how the bar looks.
 */
.ahf-topbar__social {
	color: var(--ahf-on-dark-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	min-height: 24px;
}

.ahf-topbar__social:hover {
	color: var(--ahf-gold-light);
}

.ahf-topbar__campus {
	font-size: 11px;
	font-weight: var(--ahf-fw-bold);
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ahf-gold-light);
	border-left: 1px solid var(--ahf-on-dark-faint);
	padding-left: 16px;
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

.ahf-topbar__campus:hover {
	color: var(--ahf-white);
}


/* ===============================================================
 * Header bar — white, sticky, 86px
 * =============================================================== */

.ahf-header {
	position: sticky;
	top: 0;
	z-index: var(--ahf-z-header);
	background: var(--ahf-white);
	border-bottom: 1px solid var(--ahf-border);
	box-shadow: var(--ahf-shadow-header);
}

.ahf-header__inner {
	height: var(--ahf-header-height);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.ahf-header__brand {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

/*
 * The real lockup, supplied by the designer August 2026.
 *
 * This replaces a crop taken out of the printed brand sheet. That crop kept
 * the sheet's cream ground, so the header had to apply mix-blend-mode:
 * multiply to knock it out. The supplied PNG has true alpha, so the blend is
 * gone — and it had to go, because multiply darkens whatever it sits on and
 * would have tinted the logo the moment it appeared on anything but white.
 *
 * _tests/install-logo.php trims the export to its artwork before importing it:
 * the original is a 3264x3264 square with the lockup in a band across the
 * middle, 72% empty. Sized by height, as it is here, the untrimmed file would
 * render the logo at roughly a third of its intended size.
 */
.ahf-logo {
	display: block;
	flex-shrink: 0;
}

.ahf-logo__img,
.ahf-header__brand .custom-logo {
	display: block;
	width: auto;
	height: 58px;
	max-width: none;
}

.ahf-logo__fallback {
	display: flex;
	align-items: center;
	height: 58px;
	font-size: 15px;
	font-weight: var(--ahf-fw-black);
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--ahf-ink);
}


/* ===============================================================
 * Primary nav
 * =============================================================== */

.ahf-nav__list {
	display: flex;
	align-items: center;
	list-style: none;
}

.ahf-nav__item {
	position: relative;
	display: flex;
	align-items: center;
}

.ahf-nav__link {
	display: flex;
	align-items: center;
	gap: 6px;
	height: var(--ahf-header-height);
	padding: 0 13px;
	font-size: var(--ahf-fs-nav);
	font-weight: var(--ahf-fw-bold);
	letter-spacing: .3px;
	text-transform: uppercase;
	white-space: nowrap;   /* "Get Involved" must not wrap onto two lines */
	color: var(--ahf-ink);
	border-bottom: 3px solid transparent;
	transition: border-color var(--ahf-transition), color var(--ahf-transition);
}

/* Caret on items that open a dropdown, as in the approved header. */
.ahf-nav__caret {
	width: 0;
	height: 0;
	border-left: 3.5px solid transparent;
	border-right: 3.5px solid transparent;
	border-top: 4px solid currentColor;
	opacity: .65;
	transition: transform var(--ahf-transition), opacity var(--ahf-transition);
}

.ahf-nav__item:hover > .ahf-nav__link .ahf-nav__caret,
.ahf-nav__item:focus-within > .ahf-nav__link .ahf-nav__caret {
	transform: rotate(180deg);
	opacity: 1;
}

/* Hover and current section both get the 3px gold bar. */
.ahf-nav__item:hover > .ahf-nav__link,
.ahf-nav__item:focus-within > .ahf-nav__link,
.ahf-nav__link.is-active {
	border-bottom-color: var(--ahf-gold);
	color: var(--ahf-gold-deep);
}

.ahf-nav__support {
	margin-left: 10px;
	white-space: nowrap;
}


/* ===============================================================
 * Dropdowns — white, 3px gold top border
 * =============================================================== */

.ahf-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 260px;
	background: var(--ahf-white);
	border-top: 3px solid var(--ahf-gold);
	box-shadow: var(--ahf-shadow-dropdown);
	z-index: var(--ahf-z-dropdown);

	opacity: 0;
	visibility: hidden;
	transform: translateY(var(--ahf-dropdown-rise));
	transition: opacity var(--ahf-transition), transform var(--ahf-transition), visibility var(--ahf-transition);
}

.ahf-dropdown--right {
	left: auto;
	right: 0;
}

/*
 * :focus-within is what makes these keyboard-accessible. The prototype only
 * opened on mouseenter, so a keyboard user could reach the parent link and
 * never see the eleven pages beneath it.
 */
.ahf-nav__item:hover > .ahf-dropdown,
.ahf-nav__item:focus-within > .ahf-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ahf-dropdown__list {
	list-style: none;
	padding: 6px 0;
}

.ahf-dropdown__link {
	display: block;
	padding: 10px 20px;
	font-size: var(--ahf-fs-dropdown);
	font-weight: var(--ahf-fw-medium);
	color: var(--ahf-text-body);
	transition: background var(--ahf-transition), padding-left var(--ahf-transition), color var(--ahf-transition);
}

.ahf-dropdown__link:hover,
.ahf-dropdown__link:focus-visible {
	background: var(--ahf-cream);
	padding-left: 26px;
	color: var(--ahf-ink);
}

.ahf-dropdown__link.is-current {
	color: var(--ahf-gold-deep);
	font-weight: var(--ahf-fw-bold);
	box-shadow: inset 3px 0 0 var(--ahf-gold);
}


/* ===============================================================
 * Hamburger — hidden until 1130px
 * =============================================================== */

.ahf-burger {
	display: none;
	flex-direction: column;
	gap: 5px;
}

.ahf-burger__bar {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--ahf-ink);
	transition: transform var(--ahf-transition), opacity var(--ahf-transition);
}

.ahf-burger[aria-expanded="true"] .ahf-burger__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.ahf-burger[aria-expanded="true"] .ahf-burger__bar:nth-child(2) {
	opacity: 0;
}

.ahf-burger[aria-expanded="true"] .ahf-burger__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}


/* ===============================================================
 * Mobile panel — full-screen ink accordion
 * =============================================================== */

.ahf-mobile {
	display: none;
	position: fixed;
	inset: 0;
	top: var(--ahf-header-height);
	z-index: var(--ahf-z-mobile-panel);
	background: var(--ahf-ink);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ahf-mobile.is-open {
	display: block;
}

.ahf-mobile__inner {
	padding: 12px var(--ahf-gutter) 60px;
}

.ahf-mobile__link,
.ahf-mobile__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 56px;
	padding: 8px 0;
	font-size: 15px;
	font-weight: var(--ahf-fw-bold);
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--ahf-white);
	border-bottom: 1px solid var(--ahf-on-dark-faint);
	text-align: left;
}

.ahf-mobile__link:hover,
.ahf-mobile__toggle:hover {
	color: var(--ahf-gold-light);
}

.ahf-mobile__chevron {
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--ahf-gold-light);
	border-bottom: 2px solid var(--ahf-gold-light);
	transform: rotate(45deg);
	transition: transform var(--ahf-transition);
	flex-shrink: 0;
	margin-right: 4px;
}

.ahf-mobile__toggle[aria-expanded="true"] .ahf-mobile__chevron {
	transform: rotate(-135deg);
}

/*
 * Height animation via max-height, matching the prototype. These lists run to
 * twelve items, so the ceiling is generous.
 */
.ahf-mobile__list {
	list-style: none;
	max-height: 0;
	overflow: hidden;
	transition: max-height .3s ease;
}

.ahf-mobile__list.is-open {
	max-height: 760px;
}

.ahf-mobile__list a {
	display: block;
	padding: 13px 0 13px 16px;
	font-size: 14px;
	color: var(--ahf-on-dark);
	border-left: 2px solid var(--ahf-on-dark-faint);
	margin-left: 2px;
}

.ahf-mobile__list a:hover {
	color: var(--ahf-gold-light);
	border-left-color: var(--ahf-gold);
}

.ahf-mobile__meta {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 28px;
	font-size: 14px;
}

.ahf-mobile__meta a {
	color: var(--ahf-gold-light);
}


/* ===============================================================
 * Breakpoint: nav-compact — below 1330px
 * Prototype: navPad "14px 9px", navFs "11.5px", btnPad "12px 16px"
 * =============================================================== */

@media (max-width: 1329px) {

	.ahf-nav__link {
		padding: 0 9px;
		font-size: var(--ahf-fs-nav-compact);
	}

	.ahf-nav__support {
		padding: 12px 16px;
	}
}


/* ===============================================================
 * Breakpoint: nav-collapse — below 1130px
 * =============================================================== */

@media (max-width: 1129px) {

	.ahf-nav {
		display: none;
	}

	.ahf-burger {
		display: flex;
	}

	/* The panel is fixed below the header, so lock the page behind it. */
	body.ahf-menu-open {
		overflow: hidden;
	}
}


/* ===============================================================
 * Breakpoint: narrow — below 768px
 * =============================================================== */

@media (max-width: 767px) {

	.ahf-topbar {
		display: none;
	}

	/* Scale the whole lockup by 0.8 rather than cropping it further. */
	.ahf-logo__img,
	.ahf-header__brand .custom-logo {
		height: 46px;
	}
}