/*
 * PAHAL — header, mega menu, mobile drawer.
 *
 * Progressive enhancement remains the organising principle.
 *
 *   No JavaScript : panels open on :hover and :focus-within, the drawer is a
 *                   static list, and the header is solid. Fully operable.
 *   With JavaScript : click-to-toggle, Escape, outside click, arrow keys, an
 *                   off-canvas drawer, and — on the front page only — a header
 *                   that floats transparently over the hero and solidifies on
 *                   scroll. Gated behind html.js so no-JS never gets a
 *                   transparent header stranded over light content.
 */

/* ---- Shell ------------------------------------------------------- */

.pahal-header {
	position: sticky;
	top: 0;
	z-index: var(--pahal-z-header);
	background-color: var(--pahal-white);
	border-bottom: 1px solid var(--pahal-rule);
	transition:
		background-color var(--pahal-duration-menu) var(--pahal-ease-out),
		border-color var(--pahal-duration-menu) var(--pahal-ease-out);
}

.pahal-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pahal-space-m);
	min-height: var(--pahal-header-height);
}

/* Transparent-over-hero. JS only. */
html.js .pahal-header--overlay {
	position: fixed;
	inset-inline: 0;
	background-color: transparent;
	border-bottom-color: transparent;
}

/*
 * A veil behind the transparent header.
 *
 * The hero scrim is a bottom-up gradient, so it is at its WEAKEST exactly
 * where the header sits — 12% at the very top. Light navigation text over an
 * unknown photograph at 12% is a contrast failure waiting for the first bright
 * image somebody uploads. This guarantees a dark backdrop regardless of what
 * the photograph does: even over pure white it composites to ~5.9:1 for the
 * navigation and brand.
 */
html.js .pahal-header--overlay::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: calc(var(--pahal-header-height) * 1.9);
	background: linear-gradient(to bottom, rgb(6 29 26 / 74%) 0%, rgb(6 29 26 / 46%) 45%, transparent 100%);
	pointer-events: none;
	transition: opacity var(--pahal-duration-menu) var(--pahal-ease-out);
}

html.js .pahal-header--overlay.is-stuck::before,
html.js .pahal-header--overlay.is-panel-open::before { opacity: 0; }

html.js .pahal-header--overlay > * { position: relative; }

html.js .pahal-header--overlay:not(.is-stuck):not(.is-panel-open) {
	--pahal-text: var(--pahal-sand);
	--pahal-text-heading: var(--pahal-white);
	--pahal-accent-text: var(--pahal-terracotta-light);
	--pahal-rule: rgb(244 239 229 / 22%);
	--pahal-rule-strong: rgb(244 239 229 / 38%);
	--pahal-focus-color: var(--pahal-terracotta-light);
}

html.js .pahal-header--overlay.is-stuck,
html.js .pahal-header--overlay.is-panel-open {
	background-color: var(--pahal-white);
	border-bottom-color: var(--pahal-rule);
}

/* ---- Brand ------------------------------------------------------- */

/*
 * The brand is an <a>, so base.css's generic `a:hover { color: pine }` used to
 * apply to it. Over the hero — where the lockup is deliberately sand — hovering
 * turned the wordmark dark green against a dark photograph, which is a contrast
 * failure rather than a hover state. The brand states its own colour in every
 * state and never inherits the link hover.
 */
.pahal-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	flex: none;
	color: var(--pahal-text-heading);
}

.pahal-brand:hover,
.pahal-brand:focus-visible { color: var(--pahal-text-heading); }

.pahal-brand__mark {
	width: 2.5rem;
	height: 2.5rem;
	flex: none;
	color: var(--pahal-pine);
	transition: transform var(--pahal-duration-slow) var(--pahal-ease);
}

html.js .pahal-header--overlay:not(.is-stuck):not(.is-panel-open) .pahal-brand__mark,
html.js .pahal-header--overlay:not(.is-stuck):not(.is-panel-open) .pahal-brand:hover .pahal-brand__mark { color: var(--pahal-sand); }

/*
 * The mark rotates; it does not change colour. A colour change here fought the
 * wordmark beside it, and on the overlay header it was the thing that made the
 * lockup disappear into the photograph.
 */
.pahal-brand:hover .pahal-brand__mark { transform: rotate(-8deg); }

.pahal-brand__dot { fill: var(--pahal-terracotta); }
html.js .pahal-header--overlay:not(.is-stuck):not(.is-panel-open) .pahal-brand__dot { fill: var(--pahal-terracotta-light); }

.pahal-brand__text { display: flex; flex-direction: column; line-height: 1; }

.pahal-brand__name {
	font-family: var(--pahal-font-display);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: inherit;
}

.pahal-brand__tagline {
	margin-top: 0.25rem;
	font-family: var(--pahal-font-sans);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--pahal-accent-text);
}

/*
 * Over the hero the tagline drops its terracotta and goes sand. Even behind
 * the veil, terracotta-light on a bright photograph only reaches ~3.9:1, and
 * this is 10px text that needs 4.5:1. The warmth returns the moment the header
 * solidifies, where terracotta-deep on canvas is 6.4:1.
 */
html.js .pahal-header--overlay:not(.is-stuck):not(.is-panel-open) .pahal-brand__tagline {
	color: var(--pahal-sand);
}

/* ---- Actions ----------------------------------------------------- */

.pahal-header__actions { display: flex; align-items: center; gap: var(--pahal-space-xs); flex: none; }

.pahal-header__donate { min-height: 2.875rem; padding: 0.75rem 1.5rem; }

@media (max-width: 30em) { .pahal-header__donate { display: none; } }

.pahal-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.875rem;
	height: 2.875rem;
	background: none;
	border: 1px solid var(--pahal-rule-strong);
	border-radius: var(--pahal-radius);
	color: var(--pahal-text-heading);
	cursor: pointer;
	transition: background-color var(--pahal-duration-fast) var(--pahal-ease-out), color var(--pahal-duration-fast) var(--pahal-ease-out);
}

.pahal-burger:hover { background-color: var(--pahal-pine-deep); border-color: var(--pahal-pine-deep); color: var(--pahal-sand); }

html:not(.js) .pahal-burger { display: none; }

.pahal-burger__close { display: none; }
.pahal-burger[aria-expanded="true"] .pahal-burger__open { display: none; }
.pahal-burger[aria-expanded="true"] .pahal-burger__close { display: inline-flex; }

/* ---- Navigation, mobile-first ------------------------------------ */

.pahal-nav__list { list-style: none; margin: 0; padding: 0; }
.pahal-nav__list li { margin: 0; }

.pahal-nav__trigger,
.pahal-nav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.4rem;
	width: 100%;
	min-height: 3rem;
	padding: var(--pahal-space-2xs) 0;
	background: none;
	border: 0;
	font-family: var(--pahal-font-sans);
	font-size: var(--pahal-text-body);
	font-weight: 500;
	color: var(--pahal-text);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: color var(--pahal-duration-fast) var(--pahal-ease-out);
}

.pahal-nav__trigger:hover,
.pahal-nav__link:hover,
.pahal-nav__item--current > .pahal-nav__link,
.pahal-nav__item--current > .pahal-nav__trigger { color: var(--pahal-accent-text); }

.pahal-nav__chevron { flex: none; transition: transform var(--pahal-duration-menu) var(--pahal-ease); }

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

@media (max-width: 63.999em) {
	.pahal-nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(26rem, 100%);
		z-index: var(--pahal-z-drawer);
		background-color: var(--pahal-white);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: var(--pahal-space-l) var(--pahal-gutter) var(--pahal-space-2xl);
	}

	html.js .pahal-nav {
		transform: translateX(100%);
		visibility: hidden;
		transition: transform var(--pahal-duration-menu) var(--pahal-ease), visibility var(--pahal-duration-menu);
	}

	html.js .pahal-nav.is-open { transform: none; visibility: visible; }

	html:not(.js) .pahal-nav {
		position: static;
		width: auto;
		border-top: 1px solid var(--pahal-rule);
		padding: var(--pahal-space-xs) 0;
	}

	.pahal-header__bar { flex-wrap: wrap; }

	.pahal-nav__item { border-bottom: 1px solid var(--pahal-rule); }
	.pahal-nav__trigger, .pahal-nav__link { font-size: var(--pahal-text-heading-m); font-family: var(--pahal-font-display); font-weight: 500; }
	.pahal-nav__trigger[aria-expanded="true"] .pahal-nav__chevron { transform: rotate(180deg); }

	html.js .pahal-mega { display: none; }
	html.js .pahal-mega.is-open { display: block; }

	.pahal-mega__inner { padding: 0 0 var(--pahal-space-s); max-width: none; }
	.pahal-mega__intro { margin-bottom: var(--pahal-space-s); }
	.pahal-mega__featured { margin-top: var(--pahal-space-s); }
	.pahal-nav__secondary { margin-top: var(--pahal-space-l); }
}

.pahal-nav-scrim {
	position: fixed;
	inset: 0;
	z-index: calc(var(--pahal-z-drawer) - 1);
	background-color: rgb(6 29 26 / 55%);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--pahal-duration-menu) var(--pahal-ease-out), visibility var(--pahal-duration-menu);
	border: 0; padding: 0; cursor: pointer;
}

.pahal-nav-scrim.is-open { opacity: 1; visibility: visible; }

@media (min-width: 64em) { .pahal-nav-scrim { display: none; } }

body.pahal-drawer-open { overflow: hidden; }

/* ---- Desktop ------------------------------------------------------ */

@media (min-width: 64em) {
	.pahal-burger, .pahal-nav__secondary, .pahal-nav__drawer-cta { display: none; }

	.pahal-nav { flex: 1 1 auto; display: flex; justify-content: flex-end; }

	.pahal-nav__list { display: flex; align-items: center; gap: clamp(1.25rem, 2.6vw, 2.75rem); }
	.pahal-nav__item { position: static; }

	.pahal-nav__trigger,
	.pahal-nav__link {
		position: relative;
		width: auto;
		min-height: var(--pahal-header-height);
		padding: 0;
		font-size: var(--pahal-text-s);
		font-weight: 500;
		letter-spacing: 0.01em;
		white-space: nowrap;
	}

	/* A rule that grows from the left — intent, not decoration. */
	.pahal-nav__trigger::after,
	.pahal-nav__link::after {
		content: "";
		position: absolute;
		bottom: calc(50% - 1.1rem);
		left: 0;
		width: 100%;
		height: 1px;
		background-color: currentColor;
		transform: scaleX(0);
		transform-origin: left;
		transition: transform var(--pahal-duration-menu) var(--pahal-ease);
	}

	.pahal-nav__item:hover > .pahal-nav__trigger::after,
	.pahal-nav__item:hover > .pahal-nav__link::after,
	.pahal-nav__trigger[aria-expanded="true"]::after,
	.pahal-nav__item--current > .pahal-nav__link::after { transform: scaleX(1); }

	.pahal-nav__item:hover > .pahal-nav__trigger .pahal-nav__chevron,
	.pahal-nav__trigger[aria-expanded="true"] .pahal-nav__chevron { transform: rotate(180deg); }

	/* ---- Mega panel ---------------------------------------------- */

	.pahal-mega {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: var(--pahal-z-panel);
		background-color: var(--pahal-white);
		border-top: 1px solid var(--pahal-rule);
		box-shadow: var(--pahal-shadow-panel);

		/* visibility keeps closed panels out of the tab order AND the a11y tree. */
		visibility: hidden;
		opacity: 0;
		transform: translateY(-0.75rem);
		pointer-events: none;
		transition:
			opacity var(--pahal-duration-menu) var(--pahal-ease-out),
			transform var(--pahal-duration-menu) var(--pahal-ease),
			visibility var(--pahal-duration-menu);
	}

	/* No-JS interaction model — hover and focus-within, and that is enough. */
	.pahal-nav__item:hover > .pahal-mega,
	.pahal-nav__item:focus-within > .pahal-mega,
	.pahal-mega.is-open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; }

	/* Once JS is driving, only .is-open opens a panel. */
	html.js .pahal-nav__item:focus-within > .pahal-mega:not(.is-open),
	html.js .pahal-nav__item:hover > .pahal-mega:not(.is-open) {
		visibility: hidden; opacity: 0; transform: translateY(-0.75rem); pointer-events: none;
	}

	.pahal-mega__inner {
		display: grid;
		grid-template-columns: 22fr 46fr 32fr;
		padding-block: var(--pahal-space-l) var(--pahal-space-xl);
		align-items: start;
	}

	/*
	 * A single hairline between the link column and the featured card. The
	 * earlier version boxed the links on both sides, which turned an editorial
	 * spread into a table — and with tight padding the text sat right on the
	 * rules. One rule, and generous room around it.
	 */
	.pahal-mega__links { padding-inline-end: var(--pahal-space-l); }
	.pahal-mega__featured-wrap { padding-inline-start: var(--pahal-space-l); border-inline-start: 1px solid var(--pahal-rule); }

	.pahal-mega--no-featured .pahal-mega__inner { grid-template-columns: 22fr 78fr; }
}

/* ---- Mega panel contents ------------------------------------------ */

/*
 * The panel declares its own surface, unconditionally.
 *
 * It lives inside <header>, and in overlay mode the header overrides the text
 * tokens to light values so the navigation reads over the hero photograph. A
 * panel that merely inherits those would render white type on its own canvas
 * background — an invisible menu. Today the is-panel-open class happens to
 * revert the tokens in the same frame the panel opens, but relying on two
 * classes staying in lockstep is not a contrast guarantee. This is.
 */
.pahal-mega {
	--pahal-text:         var(--pahal-ink);
	--pahal-text-soft:    var(--pahal-ink-soft);
	--pahal-text-heading: var(--pahal-pine-deep);
	--pahal-accent:       var(--pahal-terracotta);
	--pahal-accent-text:  var(--pahal-terracotta-deep);
	--pahal-rule:         var(--pahal-ink-faint);
	--pahal-rule-strong:  color-mix(in srgb, var(--pahal-ink) 22%, transparent);
	--pahal-focus-color:  var(--pahal-terracotta);

	color: var(--pahal-text);
}

.pahal-mega__heading {
	margin: 0 0 var(--pahal-space-xs);
	font-family: var(--pahal-font-sans);
	font-size: var(--pahal-text-eyebrow);
	font-weight: 500;
	letter-spacing: var(--pahal-track-eyebrow);
	text-transform: uppercase;
	color: var(--pahal-accent-text);
}

.pahal-mega__lede {
	margin: 0 0 var(--pahal-space-s);
	max-width: 30ch;
	font-family: var(--pahal-font-display);
	font-size: var(--pahal-text-heading-m);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: var(--pahal-track-heading);
	color: var(--pahal-text-heading);
}

.pahal-mega__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }

@media (min-width: 64em) {
	.pahal-mega__links--two-col { grid-template-columns: 1fr 1fr; column-gap: var(--pahal-space-l); }
}

/*
 * Breathing room. Each item is a title plus a description, so it needs the
 * vertical space of a paragraph, not of a list row — at 0.7rem the text was
 * touching the rules above and below it.
 *
 * The separator is drawn on the item rather than as a border on every row, so
 * the last item in each column has no dangling rule under it.
 */
/*
 * Motion note. The shift on hover used to animate padding-inline-start, which
 * is a layout property: every frame re-ran layout on the panel and re-wrapped
 * the description underneath, so the movement arrived in visible steps. The
 * shift is now a transform on the two text lines — composited, sub-pixel, and
 * it cannot re-wrap the text because the box never changes size.
 *
 * The accent rule that grows in the vacated space is what the movement is FOR;
 * without it the text just slides for no reason.
 */
.pahal-mega__link {
	position: relative;
	display: block;
	padding-block: var(--pahal-space-s);
	text-decoration: none;
	box-shadow: inset 0 -1px 0 var(--pahal-rule);
}

/* The rule hangs into the gutter so the separator below it never moves. */
.pahal-mega__link::before {
	content: "";
	position: absolute;
	inset-block: calc(var(--pahal-space-s) - 0.1rem);
	inset-inline-start: -0.7rem;
	width: 2px;
	background-color: var(--pahal-accent);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform var(--pahal-duration-menu) var(--pahal-ease);
}

.pahal-mega__link:hover::before,
.pahal-mega__link:focus-visible::before { transform: scaleY(1); }

.pahal-mega__links > li:last-child .pahal-mega__link { box-shadow: none; }

@media (min-width: 64em) {
	.pahal-mega__links--two-col > li:nth-last-child(2):nth-child(odd) .pahal-mega__link { box-shadow: none; }
}

.pahal-mega__link-title,
.pahal-mega__link-desc {
	transition: transform var(--pahal-duration-menu) var(--pahal-ease),
	            color var(--pahal-duration-fast) var(--pahal-ease-out);
}

.pahal-mega__link:hover .pahal-mega__link-title,
.pahal-mega__link:hover .pahal-mega__link-desc,
.pahal-mega__link:focus-visible .pahal-mega__link-title,
.pahal-mega__link:focus-visible .pahal-mega__link-desc { transform: translateX(0.55rem); }

.pahal-mega__link-title {
	display: block;
	font-family: var(--pahal-font-sans);
	font-size: var(--pahal-text-body);
	font-weight: 500;
	color: var(--pahal-text-heading);
}

.pahal-mega__link:hover .pahal-mega__link-title { color: var(--pahal-accent-text); }

.pahal-mega__link-desc {
	display: block;
	margin-top: 0.15rem;
	font-size: var(--pahal-text-s);
	line-height: 1.45;
	color: var(--pahal-text-soft);
}

/* ---- Featured card ------------------------------------------------- */

.pahal-mega__featured { display: block; text-decoration: none; }

.pahal-mega__featured-media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background-color: var(--pahal-sand-deep);
	margin-bottom: var(--pahal-space-xs);
}

.pahal-mega__featured-media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform var(--pahal-duration-slow) var(--pahal-ease);
}

.pahal-mega__featured:hover .pahal-mega__featured-media img { transform: scale(1.05); }

.pahal-mega__featured-eyebrow {
	display: block;
	margin-bottom: 0.4rem;
	font-size: var(--pahal-text-eyebrow);
	font-weight: 500;
	letter-spacing: var(--pahal-track-eyebrow);
	text-transform: uppercase;
	color: var(--pahal-accent-text);
}

.pahal-mega__featured-title {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--pahal-font-display);
	font-size: var(--pahal-text-heading-l);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: var(--pahal-track-heading);
	color: var(--pahal-text-heading);
}

.pahal-mega__featured-text { display: block; font-size: var(--pahal-text-s); line-height: 1.55; color: var(--pahal-text-soft); }

.pahal-mega__cta { margin-top: var(--pahal-space-xs); }

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

.pahal-nav__secondary { list-style: none; margin: 0; padding: 0; }
.pahal-nav__secondary li { margin: 0; }

/* Drawer links are a touch surface: 44px minimum, not the 24px WCAG floor. */
.pahal-nav__secondary a {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	padding: var(--pahal-space-2xs) 0;
	font-size: var(--pahal-text-s);
	color: var(--pahal-text-soft);
	text-decoration: none;
}

.pahal-nav__secondary a:hover { color: var(--pahal-accent-text); }

.pahal-nav__drawer-cta { margin: var(--pahal-space-m) 0; }
.pahal-nav__drawer-cta .pahal-btn { width: 100%; }