/* Global header navigation
 *
 * Renders from the WordPress menu assigned to Primary Navigation, via the
 * `ifs-nav` element. This replaces the hand-authored Bricks dropdown and tile
 * elements that used to carry the same styling as per-element local styles and
 * `#brxe-*` overrides, so these rules are the whole visual contract for the
 * shared header's navigation.
 *
 * 767px is the Bricks `mobile_landscape` breakpoint the header was authored
 * against; assets/js/site-nav.js uses the same value.
 */
/* Button label optical centre
 *
 * Every button on the site sets its label in uppercase. Caps stop at cap
 * height, so the line box carries descender space the label never uses and
 * the text sits about 0.12em below the visual centre of the button (measured:
 * 0.13em for Josefin Sans, 0.12em for Lora). Shift the vertical padding by that
 * amount and the label moves up while the button keeps its height. Every
 * button rule in this theme uses this variable, with the value repeated as a
 * fallback because staging receives this header block as its own stylesheet.
 * Bricks page-level buttons still need it applied in the builder.
 *
 * This lives in the header block so the header staging package carries it. */
:root {
	--ifs-button-nudge: 0.12em;
}

/* Canonical primary button and the header's Donate button. Bricks prints its
 * global-class CSS after this stylesheet, so `.bricks-button` is added for
 * specificity only. The Donate values mirror the builder's 8px padding. */
.bricks-button.brxe-button.ifs-c-button {
	padding-top: calc(var(--space-xs) - var(--ifs-button-nudge, 0.12em));
	padding-bottom: calc(var(--space-xs) + var(--ifs-button-nudge, 0.12em));
}

.bricks-button.brxe-button.header__donate {
	padding-top: calc(8px - var(--ifs-button-nudge, 0.12em));
	padding-bottom: calc(8px + var(--ifs-button-nudge, 0.12em));
}

#brx-header .ifs-u-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* The panel spans the full nav bar, edge to edge, so the bar is the positioning
 * context. The inner container is deliberately static — anchoring to it would
 * cap the panel at the content width. */
.ifs-c-site-header__nav-bar {
	position: relative;
}

.ifs-c-site-header__nav-container {
	position: static;
}

.ifs-c-site-header__nav {
	display: flex;
	align-self: center;
}

/* The sheet clip and wrap only become real boxes in the mobile composition.
 * Collapsing them on desktop keeps the list a direct flex child of the nav. */
.ifs-c-site-header__nav-sheet,
.ifs-c-site-header__nav-panel-wrap {
	display: contents;
}

.ifs-c-site-header__nav-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Static, so the panel resolves against #main-nav and spans the full nav bar. */
.ifs-c-site-header__nav-item {
	position: static;
}

.ifs-c-site-header__nav-link {
	display: block;
	padding: 0 var(--space-2xs);
	color: inherit;
	font-family: "josefin-sans", sans-serif;
	font-size: var(--type-body);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	transition: color var(--motion-standard);
}

.ifs-c-site-header__nav-link:hover,
.ifs-c-site-header__nav-item.is-open > .ifs-c-site-header__nav-link {
	color: var(--mugwort);
}

#brx-header .ifs-c-site-header__nav-link:focus-visible,
#brx-header .ifs-c-site-header__nav-disclosure:focus-visible,
#brx-header .ifs-c-site-header__nav-toggle:focus-visible,
#brx-header .ifs-c-site-header__nav-close:focus-visible,
#brx-header .ifs-c-site-header__nav-tile:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 3px;
}

/* Move the existing bar spacing into each link to preserve the composition
 * while making its full height clickable. */
@media (min-width: 768px) {
	#brx-header .ifs-c-site-header__nav-bar { padding-block: 0; }
	.ifs-c-site-header__nav-link { padding-block: var(--space-xs); min-height: 44px; }
}

#brx-header .ifs-c-site-header__nav-tile:focus-visible {
	outline-color: var(--color-text-inverse);
	outline-offset: -3px;
}

/* Disclosures exist for the mobile accordion. On desktop the panel opens from
 * hover and focus-within, so the button would be a redundant tab stop. */
.ifs-c-site-header__nav-disclosure,
.ifs-c-site-header__nav-toggle,
.ifs-c-site-header__nav-close {
	display: none;
}

/* Mega panel */

.ifs-c-site-header__nav-panel {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(var(--ifs-nav-panel-columns, 3), 1fr);
	gap: 0;
	height: 260px;
	margin: 0;
	padding: 0;
	list-style: none;
	visibility: hidden;
	opacity: 0;
	/* Delay visibility to the end of the fade on close, and flip it immediately
	 * on open. Transitioning visibility as a discrete property instead would
	 * make the panel appear only halfway through the fade. */
	transition: opacity 0.2s ease-in-out, visibility 0s linear 0.2s;
}

.ifs-c-site-header__nav-item.is-open > .ifs-c-site-header__nav-panel {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.2s ease-in-out, visibility 0s;
}

.ifs-c-site-header__nav-tile {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	height: 100%;
	padding: var(--space-2xs) var(--space-xs);
	overflow: hidden;
	/* --ifs-nav-accent is set per dropdown from the top-level menu item's
	 * "Dropdown accent colour" field. Mugwort is the site default. */
	border-bottom: 6px solid var(--ifs-nav-accent, var(--mugwort));
	background-color: var(--lakebed);
	background-image: var(--ifs-nav-tile-image, none);
	background-position: var(--ifs-nav-tile-position, 50% 50%);
	background-size: cover;
	text-decoration: none;
}

/* Permanent bottom darkening, so the label stays readable over the photograph.
 * Replaces the former `header__overlay-darken` child element. */
.ifs-c-site-header__nav-tile::before {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(0, 0, 0, 0.66) 100%);
	content: "";
	pointer-events: none;
}

/* Hover wipe: the dropdown's accent gradient rising from the bottom edge. */
.ifs-c-site-header__nav-tile::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	height: 0;
	background: linear-gradient(
		180deg,
		var(--ifs-nav-accent-soft, var(--mugwort-80)),
		var(--ifs-nav-accent, var(--mugwort))
	);
	opacity: 0;
	transition: height 0.3s ease-out, opacity 0.3s ease-in-out;
	content: "";
	pointer-events: none;
}

.ifs-c-site-header__nav-tile:hover::after,
.ifs-c-site-header__nav-tile:focus-visible::after {
	height: 100%;
	opacity: 1;
}

.ifs-c-site-header__nav-tile-label {
	position: relative;
	z-index: 2;
	color: var(--alpine-snow);
	font-family: "josefin-sans", sans-serif;
	font-weight: 600;
	line-height: 1.2;
	text-align: right;
	text-transform: uppercase;
	transition: color var(--motion-standard);
}

.ifs-c-site-header__nav-tile:hover .ifs-c-site-header__nav-tile-label {
	color: var(--alpine-snow-80);
}

/* Mobile composition
 *
 * The two header sections collapse into one compact row: logo left, hamburger
 * right. The header is sticky, so keeping it near 64px is what lets it cleanly
 * take over from the announcement bar as that scrolls away — stacked, the two
 * bars came to 239px and swallowed a quarter of the viewport.
 *
 * The menu is a sheet dropping from under that row. Rows are left-aligned and
 * separated, sub-items carry the tile thumbnail, and the label and the expand
 * control are separate targets so tapping a parent still navigates.
 *
 * `--ifs-nav-offset` is set by site-nav.js to the header's bottom edge, so the
 * sheet meets it whether or not it is stuck.
 */

.ifs-c-site-header__nav-tile-thumb,
.ifs-c-site-header__nav-cta,
.ifs-c-site-header__nav-social {
	display: none;
}

@media (max-width: 767px) {
	/* One row.
	 *
	 * The nav bar is lifted out of flow and pinned to the right of the header,
	 * so the header's height is the logo bar's alone. #brx-header is already
	 * `position: sticky`, which makes it the containing block. */
	/* Hidden on scroll down, revealed on scroll up. Transform rather than a
	 * position change so the sticky header does not reflow the page. */
	#brx-header {
		transition: transform 0.28s ease;
		will-change: transform;
	}

	#brx-header.is-nav-hidden {
		transform: translateY(-100%);
	}

	#brx-header .ifs-c-site-header__logo-bar {
		position: relative;
		min-height: 64px;
		padding: var(--space-3xs) var(--space-s);
	}

	/* #brx-header prefix throughout this block: Bricks emits the global-class and
	 * per-element rules for these nodes after this stylesheet, some of them
	 * ID-scoped, so a class selector alone loses the cascade. The prefix is the
	 * cheapest selector that reliably wins without !important. */
	#brx-header .ifs-c-site-header__logo-container {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
	}

	#brx-header .nav-logo img {
		max-height: 48px;
	}

	#brx-header .ifs-c-site-header__nav-bar {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 11;
		display: flex;
		/* The section is a column flex, so the vertical axis is justify-content;
		 * align-items alone left the hamburger 8px high in the row. */
		justify-content: center;
		align-items: center;
		width: auto;
		min-height: 0;
		height: 100%;
		padding: 0 var(--space-2xs);
		background: none;
		box-shadow: none;
	}

	#brx-header .ifs-c-site-header__nav-container {
		width: auto;
		align-items: center;
		padding: 0;
	}

	#brx-header .ifs-c-site-header__nav {
		width: auto;
		align-items: center;
		justify-content: flex-end;
	}

	.ifs-c-site-header__nav-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		padding: 0;
		border: 0;
		background: none;
		color: inherit;
		cursor: pointer;
	}

	.ifs-c-site-header__nav-toggle-bars,
	.ifs-c-site-header__nav-toggle-bars::before,
	.ifs-c-site-header__nav-toggle-bars::after {
		display: block;
		width: 24px;
		height: 2px;
		border-radius: 2px;
		background: currentcolor;
	}

	.ifs-c-site-header__nav-toggle-bars {
		position: relative;
	}

	.ifs-c-site-header__nav-toggle-bars::before,
	.ifs-c-site-header__nav-toggle-bars::after {
		position: absolute;
		left: 0;
		transition: transform var(--motion-standard);
		content: "";
	}

	.ifs-c-site-header__nav-toggle-bars::before {
		top: -7px;
	}

	.ifs-c-site-header__nav-toggle-bars::after {
		top: 7px;
	}

	/* The hamburger becomes the close control while the sheet is open, so the
	 * same 48px target both opens and dismisses it. */
	.ifs-c-site-header__nav.is-menu-open .ifs-c-site-header__nav-toggle-bars {
		background: transparent;
	}

	.ifs-c-site-header__nav.is-menu-open .ifs-c-site-header__nav-toggle-bars::before {
		transform: translateY(7px) rotate(45deg);
	}

	.ifs-c-site-header__nav.is-menu-open .ifs-c-site-header__nav-toggle-bars::after {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* The sheet */

	/* The sheet.
	 *
	 * The clip container is absolutely anchored to the header's bottom edge
	 * (its containing block is the nav bar, which spans the header's height),
	 * so the sheet is attached by geometry: whatever the header does - stick,
	 * hide, slide back in over 0.4s - the sheet's top edge is its bottom edge.
	 * The previous approach measured that edge with JS at open time, and any
	 * measurement taken mid-transition produced the reported gap or overlap.
	 *
	 * Opening is a pure slide: the wrap starts translated fully above the clip
	 * and comes down from under the bar. The clip's overflow keeps it invisible
	 * until it crosses the header's edge - no fade, and it can never paint over
	 * the header. --ifs-nav-offset (set by site-nav.js) only trims max-height
	 * so the sheet bottom stays reachable; if it is momentarily stale, the
	 * worst case is a slightly short scroll area, not a misplaced sheet. */
	.ifs-c-site-header__nav-sheet {
		position: absolute;
		top: 100%;
		right: 0;
		display: block;
		width: 100vw;
		height: 100vh;
		height: 100dvh;
		overflow: hidden;
		visibility: hidden;
		pointer-events: none;
		transition: visibility 0s linear 0.32s;
	}

	.ifs-c-site-header__nav.is-menu-open .ifs-c-site-header__nav-sheet {
		visibility: visible;
		pointer-events: auto;
		transition: visibility 0s;
	}

	.ifs-c-site-header__nav-panel-wrap {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		max-height: calc(100vh - var(--ifs-nav-offset, 64px));
		max-height: calc(100dvh - var(--ifs-nav-offset, 64px));
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 0 0 var(--space-s);
		background: var(--color-surface-strong);
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
		transform: translateY(-102%);
		transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
	}

	.ifs-c-site-header__nav.is-menu-open .ifs-c-site-header__nav-panel-wrap {
		transform: none;
	}

	/* The nav bar keeps its own close affordance, so the in-sheet close button is
	 * redundant. It stays in the DOM as the focus-trap anchor. */
	.ifs-c-site-header__nav-close {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		border: 0;
		background: none;
	}

	/* Rows */

	.ifs-c-site-header__nav-list {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		row-gap: 0;
	}

	.ifs-c-site-header__nav-item {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		width: 100%;
		border-bottom: 1px solid var(--alpine-snow-10);
	}

	.ifs-c-site-header__nav-link {
		display: flex;
		align-items: center;
		min-height: 48px;
		padding: var(--space-3xs) var(--space-s);
		color: var(--color-text-inverse);
		font-size: var(--text-s);
		text-align: left;
	}

	.ifs-c-site-header__nav-link:hover,
	.ifs-c-site-header__nav-item.is-open > .ifs-c-site-header__nav-link {
		color: var(--mugwort);
	}

	/* Current page: an accent rule down the left edge of the row. */
	.ifs-c-site-header__nav-item.is-current > .ifs-c-site-header__nav-link {
		box-shadow: inset 3px 0 0 var(--ifs-nav-accent, var(--mugwort));
	}

	/* Separate target from the label, and signalled as one by the divider. */
	.ifs-c-site-header__nav-disclosure {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		padding: 0;
		border: 0;
		border-left: 1px solid var(--alpine-snow-10);
		background: none;
		color: var(--color-text-inverse);
		cursor: pointer;
	}

	.ifs-c-site-header__nav-disclosure::before {
		width: 9px;
		height: 9px;
		border-right: 2px solid currentcolor;
		border-bottom: 2px solid currentcolor;
		transform: translateY(-3px) rotate(45deg);
		transition: transform var(--motion-standard);
		content: "";
	}

	.ifs-c-site-header__nav-item.is-open > .ifs-c-site-header__nav-disclosure {
		color: var(--ifs-nav-accent, var(--mugwort));
	}

	.ifs-c-site-header__nav-item.is-open > .ifs-c-site-header__nav-disclosure::before {
		transform: translateY(2px) rotate(-135deg);
	}

	/* Submenu: a thumbnail list, tucked under its parent behind an accent rule. */
	.ifs-c-site-header__nav-panel {
		grid-column: 1 / -1;
		position: static;
		display: none;
		grid-template-columns: none;
		height: auto;
		margin: 0;
		visibility: visible;
		opacity: 1;
		background: var(--lakebed-90);
		box-shadow: inset 3px 0 0 var(--ifs-nav-accent, var(--mugwort));
		transition: none;
	}

	.ifs-c-site-header__nav-item.is-open > .ifs-c-site-header__nav-panel {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.ifs-c-site-header__nav-panel-item + .ifs-c-site-header__nav-panel-item {
		border-top: 1px solid var(--alpine-snow-10);
	}

	.ifs-c-site-header__nav-tile {
		gap: var(--space-2xs);
		align-items: center;
		justify-content: flex-start;
		min-height: 52px;
		padding: var(--space-4xs) var(--space-s) var(--space-4xs) var(--space-m);
		border-bottom: 0;
		background-color: transparent;
		background-image: none;
	}

	.ifs-c-site-header__nav-tile::before,
	.ifs-c-site-header__nav-tile::after {
		display: none;
	}

	.ifs-c-site-header__nav-tile-thumb {
		display: block;
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		border-radius: var(--radius-s);
		background-color: var(--lakebed);
		background-image: var(--ifs-nav-tile-thumb, none);
		background-position: var(--ifs-nav-tile-position, 50% 50%);
		background-size: cover;
	}

	.ifs-c-site-header__nav-tile--no-image .ifs-c-site-header__nav-tile-thumb {
		background-color: var(--ifs-nav-accent, var(--mugwort));
	}

	.ifs-c-site-header__nav-tile-label {
		color: var(--color-text-inverse);
		font-size: var(--text-xs);
		text-align: left;
	}

	/* Pinned call to action */

	/* Restates the canonical primary button, because Bricks scopes those global
	 * classes to its own button element and this is a plain anchor. Same tokens,
	 * same shape - keep the two in step. */
	.ifs-c-site-header__nav-cta {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-3xs);
		min-height: 48px;
		margin: var(--space-s) var(--space-s) 0;
		padding: calc(var(--space-2xs) - var(--ifs-button-nudge, 0.12em)) var(--space-s) calc(var(--space-2xs) + var(--ifs-button-nudge, 0.12em));
		border-radius: var(--radius-xl) 0 var(--radius-xl) 0;
		background: var(--color-action);
		color: var(--color-text-inverse);
		font-family: "josefin-sans", sans-serif;
		font-size: var(--type-body-s);
		font-weight: 700;
		line-height: 1.2;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		transition: background-color var(--motion-standard), color var(--motion-standard);
	}

	.ifs-c-site-header__nav-cta:hover {
		background: var(--color-action-hover);
		color: var(--color-text-inverse);
	}

	#brx-header .ifs-c-site-header__nav-cta:focus-visible {
		outline: 3px solid var(--color-focus);
		outline-offset: 3px;
	}

	/* Social row */

	.ifs-c-site-header__nav-social {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: var(--space-2xs);
		margin: var(--space-s) 0 0;
		padding: var(--space-s) var(--space-s) 0;
		border-top: 1px solid var(--alpine-snow-10);
		list-style: none;
	}

	.ifs-c-site-header__nav-social-link {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border-radius: var(--radius-full);
		color: var(--color-text-inverse);
		transition: background-color var(--motion-standard), color var(--motion-standard);
	}

	.ifs-c-site-header__nav-social-link svg {
		width: 22px;
		height: 22px;
		fill: currentcolor;
	}

	.ifs-c-site-header__nav-social-link:hover {
		background: var(--alpine-snow-10);
		color: var(--mugwort);
	}

	#brx-header .ifs-c-site-header__nav-social-link:focus-visible {
		outline: 3px solid var(--color-focus);
		outline-offset: 2px;
	}

	#brx-header .ifs-c-site-header__nav-panel-wrap :focus-visible {
		outline-color: var(--color-text-inverse);
		outline-offset: -3px;
	}

	/* The sheet carries these now, so the announcement bar does not need them and
	 * the bar can stay a single line of text on a phone. */
	#notif-bar .ifs-c-notification-bar__social {
		display: none;
	}
}

/* The Donate button is absolutely positioned in the logo bar and overlaps the
 * logo on phones. Bricks sets `display: none` below 767px, but core-framework's
 * unlayered `.btn { display: flex }` wins the delivered cascade, so restate it
 * at a specificity that holds. The mobile call to action replaces it. */
@media (max-width: 767px) {
	.ifs-c-site-header__logo-container .header__donate.brxe-button {
		display: none;
	}
}

/* Logged-in admin bar, small screens.
 *
 * Below 600px WordPress makes #wpadminbar position:absolute, so it scrolls away
 * with the page — but Bricks keeps the sticky header offset by the bar's height
 * (`.admin-bar #brx-header.brx-sticky { top: var(--wp-admin--admin-bar--height) }`).
 * The header then pins 46px below the viewport with page content showing
 * through the gap, and the hide-on-scroll leaves 46px of header behind.
 * Logged-out visitors never see this, which is exactly why it survives casual
 * testing: verify header changes logged in as well.
 *
 * Between 601px and 782px the bar is fixed, so the Bricks offset is correct and
 * must be left alone. */
@media screen and (max-width: 600px) {
	body.admin-bar #brx-header.brx-sticky {
		top: 0;
	}
}

/* The offcanvas owns the viewport while it is open. */
body.ifs-nav-is-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.ifs-c-site-header__nav-link,
	.ifs-c-site-header__nav-panel,
	.ifs-c-site-header__nav-panel-wrap,
	.ifs-c-site-header__nav-sheet,
	.ifs-c-site-header__nav-tile::after,
	.ifs-c-site-header__nav-tile-label,
	.ifs-c-site-header__nav-disclosure::before,
	.ifs-c-site-header__nav-toggle-bars::before,
	.ifs-c-site-header__nav-toggle-bars::after,
	#brx-header {
		transition-duration: 0.01ms;
	}
}


/* Existing DDEV semantic tokens, scoped to this header. */
#brx-header {
 --type-body: var(--text-m);
 --motion-standard: 240ms ease;
 --color-focus: var(--glacier);
 --color-surface-strong: var(--lakebed);
 --color-text-inverse: var(--alpine-snow);
 --color-action: var(--pinyon);
 --type-body-s: var(--text-s);
 --color-action-hover: var(--lakebed);
 --color-surface: var(--alpine-snow);
}
#brx-header .header__donate { font-family: "josefin-sans", sans-serif; }