/**
 * Navigation drawer — IA-3.
 *
 * A left-anchored drawer that slides in rightward, opened by an icon-only
 * hamburger on the left of the header, with the current-page caption beside it.
 * When signed in, the identity badge takes the line above them, its top line
 * level with the Association name on the right. Same arrangement at every
 * width.
 */

/* ---- Header row ---------------------------------------------------------- */

.site-header .inside-header {
	/* One row at every width: hamburger and caption left, lockup right.
	   `!important` on the direction is deliberate and load-bearing -- the
	   parent theme switches this container to a column at mobile widths, which
	   put the hamburger on its own line above the lockup and right-aligned it,
	   the opposite of what IA-3 specifies. */
	display: flex !important;
	flex-direction: row !important;
	/* Top-aligned: the caption's first line and the Association name share a
	   baseline at the top of the header. */
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sp-4);
	flex-wrap: nowrap;
	min-height: var(--header-height);
}

/* The header outranks the drawer and scrim in stacking order, so the hamburger
   is always clickable — including to close the drawer. */
body .site-header { z-index: 120; }

/* Lockup pushed to the right; the hamburger and caption stay left (IA-3). */
.site-header .site-branding,
.site-header .site-logo {
	margin-inline-start: auto;
}

/* The parent theme's own navigation is stood down; one pattern only. */
.site-header .main-navigation,
.site-header nav#site-navigation,
.site-header .menu-toggle {
	display: none !important;
}

/* ---- Hamburger ----------------------------------------------------------- */

.nitrusa-hamburger {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--nav-toggle-size, 48px);
	height: var(--nav-toggle-size, 48px);   /* ≥ 44px hit area (DSN-7) */
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--r-md);
	/* DSN-9: icons and action affordances carry the accent blue. */
	color: var(--c-icon);
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition);
}
.nitrusa-hamburger:hover { background-color: var(--c-surface-hover); color: var(--c-icon-hover); }
.nitrusa-hamburger:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
}

/* Three bars drawn from one element: the middle is the element, the outer two
   are its pseudo-elements. */
.nitrusa-hamburger__bars,
.nitrusa-hamburger__bars::before,
.nitrusa-hamburger__bars::after {
	display: block;
	width: 24px;
	height: 2px;
	background-color: currentColor;
	border-radius: var(--r-full);
	transition: transform var(--transition), opacity var(--transition);
}
.nitrusa-hamburger__bars { position: relative; }
.nitrusa-hamburger__bars::before,
.nitrusa-hamburger__bars::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
}
.nitrusa-hamburger__bars::before { top: -7px; }
.nitrusa-hamburger__bars::after  { top:  7px; }

/* Becomes a cross while the drawer is open. */
.nitrusa-drawer-open .nitrusa-hamburger__bars { background-color: transparent; }
.nitrusa-drawer-open .nitrusa-hamburger__bars::before { transform: translateY(7px) rotate(45deg); }
.nitrusa-drawer-open .nitrusa-hamburger__bars::after  { transform: translateY(-7px) rotate(-45deg); }

/* ---- Scrim --------------------------------------------------------------- */

.nitrusa-scrim {
	position: fixed;
	inset: var(--header-height) 0 0 0;   /* never over the header */
	z-index: 90;
	background-color: var(--c-scrim);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition), visibility var(--transition);
}
.nitrusa-drawer-open .nitrusa-scrim {
	display: block;
	opacity: 1;
	visibility: visible;
}

/* ---- Drawer -------------------------------------------------------------- */

.nitrusa-drawer {
	position: fixed;
	/* Below the sticky header, so the hamburger stays visible and clickable —
	   pressing it again is how the drawer closes. */
	top: var(--header-height);
	bottom: 0;
	inset-inline-start: 0;         /* anchored to the left, under the hamburger */
	z-index: 100;
	width: min(340px, 86vw);       /* never the whole screen on desktop */
	background-color: var(--c-bg-elevated);
	border-inline-end: 1px solid var(--c-border);
	box-shadow: var(--shadow-lg);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(-100%);  /* off-screen left; slides rightward to open */
	transition: transform var(--transition);
	padding-block: var(--sp-3);
}
.nitrusa-drawer-open .nitrusa-drawer { transform: translateX(0); }

/* Lock the page behind the drawer. */
html.nitrusa-drawer-open,
html.nitrusa-drawer-open body { overflow: hidden; }


.nitrusa-drawer__list {
	list-style: none;
	margin: 0;
	padding: var(--sp-3) 0;
}
.nitrusa-drawer__list li { margin: 0; }
.nitrusa-drawer__list a {
	display: flex;
	align-items: center;
	min-height: 48px;             /* ≥ 44px touch target (DSN-7) */
	padding: var(--sp-3) var(--sp-5);
	color: var(--c-text-muted);
	font-weight: var(--fw-medium);
	text-decoration: none;
	border-inline-start: 3px solid transparent;
	transition: color var(--transition), background-color var(--transition), border-color var(--transition);
}
.nitrusa-drawer__list a:hover,
.nitrusa-drawer__list a:focus-visible {
	color: var(--c-text);
	background-color: var(--c-surface-hover);
}
.nitrusa-drawer__list .current-menu-item > a {
	color: var(--c-text);
	border-inline-start-color: var(--c-highlight);
}
/* Second level, indented rather than nested-flyout. */
.nitrusa-drawer__list .sub-menu { list-style: none; margin: 0; padding: 0; }
.nitrusa-drawer__list .sub-menu a {
	padding-inline-start: var(--sp-7);
	font-size: var(--fs-sm);
}

/* Respect a reduced-motion preference: appear, do not slide (IA-3). */
@media (prefers-reduced-motion: reduce) {
	.nitrusa-drawer, .nitrusa-scrim { transition: none; }
}

/* ---- Menu item icons ----------------------------------------------------- */

.nitrusa-drawer__list a {
	gap: var(--sp-3);
}
.nitrusa-icon {
	flex: 0 0 auto;
	color: var(--c-icon);          /* DSN-9 */
}
.nitrusa-drawer__label { flex: 1 1 auto; }

/* ---- Header actions: identity above hamburger + caption ------------------ */
/* With navigation behind a hamburger there is no persistent "you are here" cue,
   so the page states its own name beside the control that leaves it. Above
   them, when signed in, is the one thing the header cannot otherwise say: who
   you are. The block is flush to the left edge and its first line aligns with
   the Association name on the right -- so the header reads as two columns that
   start on the same line.

   The wordmark is bottom-aligned against the seal, so its first line starts
   partway down the header. This block is pushed down by the same amount so
   the two start on one line -- derived from the tokens that produce the offset
   rather than hard-coded, so it follows the seal and type scale at every
   breakpoint instead of drifting out at one of them. */
.nitrusa-header-actions {
	--nav-toggle-size: 48px;
	--lockup-text-height: calc(
		(var(--fs-3xl) + var(--fs-lg)) * var(--lh-tight) + 2px
	);
	/* The seal's rendered height is its size floored at the mobile minimum --
	   the same max() the seal itself uses. Reading --seal-size alone was 28px
	   out at mobile, where the floor is what actually applies. */
	--seal-rendered: max(var(--seal-size), var(--seal-size-mobile));
	--caption-top: calc(var(--sp-4) + var(--seal-rendered) - var(--lockup-text-height));

	display: flex;
	flex-direction: column;
	align-items: flex-start;   /* icon and label flush left */
	gap: var(--sp-2);
	margin-block-end: 0;
	padding-block-start: max(0px, var(--caption-top));
}

/* Second line: the hamburger, then the caption to its right. They belong
   together -- where you are, and how to leave -- and the caption no longer
   needs an offset to line up with the bars, because it now sits beside them. */
.nitrusa-header-actions__row {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}

/* The identity badge takes the top line. Its avatar is centred on the
   hamburger's centre line below it so the two rows read as one column, derived
   from the button and avatar sizes rather than a measured constant. The badge's
   own inline padding already carries part of that offset, so it is subtracted;
   floored at zero, because at mobile the padding alone is more than enough. */
.nitrusa-whoami {
	margin-inline-start: max(
		0px,
		calc((var(--nav-toggle-size, 48px) - 28px) / 2 - var(--sp-2))
	);
}

.nitrusa-caption {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	color: var(--c-highlight);    /* icon inherits via currentColor */
}
.nitrusa-caption__text {
	color: var(--c-caption);
	font-size: var(--fs-base);
	font-variant-caps: var(--caps-variant);
	letter-spacing: var(--caps-tracking);
	font-weight: var(--fw-semibold);
	white-space: nowrap;
}

/* The caption's mobile treatment lives with the rest of the mobile header
   rules at the end of this file, so there is one place that describes how the
   header behaves at each width. */

/* ---- Footer -------------------------------------------------------------- */

/* Seamless with the page: same background, no rules. The footer is the end of
   the page, not a separate panel bolted to it.

   `body` prefix for the same reason as the header — GeneratePress paints
   .site-footer from its own variables, and equal specificity made the outcome
   depend on enqueue order. */
.nitrusa-footer,
body .site-footer,
body .footer-widgets,
body .site-info,
body .inside-site-info {
	background-color: var(--c-bg);
	border: 0;
	box-shadow: none;
}
.nitrusa-footer {
	margin-top: var(--sp-8);
	padding-block: var(--sp-7) var(--sp-5);
}
.nitrusa-footer__inner {
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	align-items: start;
}
.nitrusa-footer__brand { display: flex; gap: var(--sp-4); align-items: flex-start; }
.nitrusa-footer__seal  { flex: 0 0 auto; width: 56px; height: 56px; }
.nitrusa-footer__name {
	margin: 0;
	font-weight: var(--fw-bold);
	color: var(--c-text);
}
.nitrusa-footer__tagline {
	margin: var(--sp-1) 0 0;
	color: var(--c-text-muted);
	font-size: var(--fs-sm);
	max-width: 42ch;
}
.nitrusa-footer__heading {
	margin: 0 0 var(--sp-3);
	font-size: var(--fs-base);
	color: var(--c-text-muted);
	font-variant-caps: var(--caps-variant);
	letter-spacing: var(--caps-tracking);
	font-weight: var(--fw-semibold);
}
.nitrusa-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-1);
	grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
}
.nitrusa-footer__list a {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 40px;
	color: var(--c-text-muted);
	text-decoration: none;
	transition: color var(--transition);
}
.nitrusa-footer__list a:hover { color: var(--c-text); }

/* ---- Elsewhere: the parent association, and our accounts (IA-11) ---------
   The "Elsewhere" column is narrower than Quick Links because it holds one
   link and a row of icons, so its list stays a single column rather than
   splitting into two nearly-empty ones. */
.nitrusa-footer__nav--elsewhere .nitrusa-footer__list { grid-template-columns: 1fr; }

.nitrusa-footer__note {
	margin: 0;
	color: var(--c-text-subtle);
	font-size: var(--fs-sm);
}
/* "Parent Org" / "Follow us": a caption over the thing it names, in the same
   small-caps treatment the footer headings use one level up (DSN-10). */
.nitrusa-footer__note--label {
	margin-block: var(--sp-4) var(--sp-1);
	font-variant-caps: var(--caps-variant);
	letter-spacing: var(--caps-tracking);
	font-weight: var(--fw-semibold);
}
.nitrusa-footer__nav--elsewhere > .nitrusa-footer__note--label:first-of-type { margin-block-start: 0; }

.nitrusa-social {
	list-style: none;
	margin: var(--sp-4) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1);
}
.nitrusa-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* A 44px target, because an icon with no label beside it is the easiest
	   thing on the page to miss with a thumb (DSN-7). */
	width: 44px;
	height: 44px;
	border-radius: var(--r-md);
	color: var(--c-icon);
	transition: color var(--transition), background-color var(--transition);
}
.nitrusa-social__link:hover,
.nitrusa-social__link:focus-visible {
	color: var(--c-icon-hover);
	background-color: var(--c-surface);
}
.nitrusa-social__link .nitrusa-icon { width: 22px; height: 22px; }

.nitrusa-footer__legal {
	margin-top: var(--sp-6);
	padding-top: var(--sp-4);
}
.nitrusa-footer__legal p {
	margin: 0;
	color: var(--c-text-subtle);
	font-size: var(--fs-sm);
}

/* ---- Mobile header: same arrangement, scaled to fit (IA-3, DSN-7) --------
   The order never changes with width -- hamburger left, caption beside it,
   lockup right. Only the sizes do, so the row still fits on a narrow screen
   without wrapping. */

@media (max-width: 780px) {
	.site-header .inside-header { gap: var(--sp-3); }
	.site-header .inside-header { --seal-size: 56px; }
	.nitrusa-lockup { gap: var(--sp-2); }
}

@media (max-width: 560px) {
	.site-header .inside-header {
		gap: var(--sp-2);
		min-height: auto;
		padding-block: var(--sp-2);
	}
	.site-header .inside-header { --seal-size: 44px; }

	/* One declaration moves the button, the badge's offset, and the row --
	   they are all derived from it. */
	.nitrusa-header-actions { --nav-toggle-size: 40px; }

	/* The caption's words give way before its icon does: the icon still says
	   which section you are in, and the page itself names it. */
	.nitrusa-caption { display: inline-flex; }
	.nitrusa-caption__text { display: none; }

	.nitrusa-lockup__name { font-size: var(--fs-base); }
	.nitrusa-lockup__sub  { font-size: var(--fs-xs); }
}

@media (max-width: 380px) {
	.site-header .inside-header { --seal-size: 36px; }

	/* The subline used to be dropped here for want of room. It stays now: the
	   wordmark wraps and top-aligns with the seal (DSN-35), which is where the
	   room came from, and "Alumni Association" is the half of the lockup that
	   says what the Association *is* — the seal's own ring text is illegible at
	   this size (DSN-5), so dropping the subline left nothing saying it. */
}

/* The caption offset is derived from the wordmark's type scale, so it has to
   step at exactly the same widths the wordmark does. When it did not, desktop
   aligned and tablet and mobile did not. */

@media (max-width: 900px) {
	.nitrusa-header-actions {
		--lockup-text-height: calc((var(--fs-2xl) + var(--fs-base)) * var(--lh-tight) + 2px);
	}
}

@media (max-width: 560px) {
	.nitrusa-header-actions {
		--lockup-text-height: calc((var(--fs-base) + var(--fs-xs)) * var(--lh-tight) + 2px);
	}
}

@media (max-width: 380px) {
	/* The subline is hidden at this width, so only the name counts. */
	.nitrusa-header-actions {
		--lockup-text-height: calc(var(--fs-base) * var(--lh-tight) + 2px);
	}
}