/* ---------------------------------------------------------------------------
 * Header — mobile-first.
 *
 * Below lg (1024px) the header is two rows:
 *   1. .lfbc-apply-banner  full-width Apply for Funding banner
 *   2. logo + Max Mega Menu hamburger toggle
 * The aux row (News/Contact, search, pill Apply button) is hidden.
 *
 * At lg+ the banner hides, the aux row + pill Apply button reappear, and
 * the main nav (mega menu, not the toggle) takes over from the hamburger.
 * Figma: 11037:18849 (mobile), 9163:9002 (desktop).
 * ------------------------------------------------------------------------- */

/* Sticky header that hides on scroll-down and reappears on scroll-up
 * ("smart" / auto-hide sticky).
 *
 * IMPORTANT: Ollie wraps our header template part in an outer
 * <header class="site-header wp-block-template-part">. Sticky positioning and
 * the slide-away transform must live on THAT wrapper — it's the box that's a
 * direct child of .wp-site-blocks and therefore has room to pin as the page
 * scrolls. Putting sticky on our inner .lfbc-site-header fails, because that
 * element is trapped inside the wrapper's own (header-height) box.
 *
 * top uses WP's --wp-admin--admin-bar--height so a logged-in admin's fixed
 * admin bar isn't covered; logged-out visitors fall back to 0. The mega menu
 * (z-index 100 in menus.css) lives inside this header, so a matching z-index
 * keeps panels above page content. transform animates on the compositor and —
 * unlike top/display — doesn't reflow the page. lfbc-header--hidden is toggled
 * by assets/js/header-scroll.js. */
.site-header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	transition: transform 0.3s ease;
}

.site-header.wp-block-template-part.lfbc-header--hidden {
	/* 110% (not 100%) clears any box-shadow drawn below the header edge. */
	transform: translateY(-110%);
}

/* Respect reduced-motion: snap instead of slide. */
@media (prefers-reduced-motion: reduce) {
	.site-header.wp-block-template-part {
		transition: none;
	}
}

/* Anchor-scroll offset for the sticky header.
 *
 * In-page anchor jumps (native #hash links and the Table of Contents block's
 * scrollIntoView) would otherwise land the target flush against the top of the
 * viewport — and because scrolling *up* reveals the sticky header (see
 * header-scroll.js), the header then covers it.
 *
 * We set scroll-padding-top on the scroll container (html) rather than
 * scroll-margin-top on the targets: the TOC block scrolls to an empty *inline*
 * <span class="eb-toc__heading-anchor"> it injects inside each heading, and
 * browsers ignore scroll-margin on inline boxes — so per-target margin did
 * nothing. scroll-padding on the scroll root reserves the space for every
 * scroll-into-view/anchor jump regardless of the target element type.
 *
 * Offset = admin-bar height (0 for logged-out visitors) + reserved header
 * space + .6rem breathing room. The reserved header space is --lfbc-scroll-
 * offset, which header-scroll.js sets per click to the measured header height
 * for *upward* jumps (the header reveals and would cover the target) and to 0
 * for *downward* jumps (the header stays hidden, so no space is needed and the
 * target would otherwise land too far down). Its fallback is the full header
 * height, so no-JS / hash-on-load navigation still clears the header. */
html {
	scroll-padding-top: calc(
		var(--wp-admin--admin-bar--height, 0px) +
		var(--lfbc-scroll-offset, var(--lfbc-header-height, 8rem)) +
		1.5rem
	);
}

/* Apply for Funding banner (mobile only) — full-width Nootka Rose 900 band
 * with centered link + right-arrow icon. Hidden at lg via display:none. */
.lfbc-apply-banner {
	padding: 15px 20px;
}

.lfbc-apply-banner .lfbc-apply-banner__link {
	margin: 0;
	font-family: "Noto Sans", sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
}

.lfbc-apply-banner .lfbc-apply-banner__link a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--wp--preset--color--white, #ffffff);
	text-decoration: none;
}

.lfbc-apply-banner .lfbc-apply-banner__link a::after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7h9m-3.5-3.5L11 7l-3 3.5' stroke='%23000' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7h9m-3.5-3.5L11 7l-3 3.5' stroke='%23000' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The header opts out of WP's global (root) padding — the fluid
 * clamp(12px … 40px) gutter declared in theme.json (styles.spacing.padding) —
 * in favour of a fixed 12px-left / 16px-right gutter at every width
 * (Figma 9163:9533). Overriding the root-padding custom properties (rather
 * than `padding` directly) keeps the full-bleed .lfbc-apply-banner in sync:
 * its negative-margin escape is keyed off these same vars by core's
 * `.has-global-padding > .alignfull` rule, so the banner still reaches both
 * header edges. The vars are scoped to the header subtree, so the rest of the
 * page keeps the global gutter. */
.lfbc-site-header.has-global-padding {
	--wp--style--root--padding-left: 12px;
	--wp--style--root--padding-right: 16px;
}

/* Override WP's `:root :where(.is-layout-constrained) > * { margin-block-start:
 * var(--wp--preset--spacing--medium) }` from global-styling-inline.css, which
 * adds unwanted top space above the inner header on both mobile (below the
 * banner) and desktop. The header controls its own top spacing via the outer
 * <header>'s padding-top. */
.lfbc-header-inner {
	margin-block-start: 0;
}

/* Cap the header content at 1412px (the Figma design width: 1440px viewport
 * minus the 12px/16px gutter) instead of core's 1360px wide-size, then center
 * it within the padded area. The extra width vs. 1360 is what opens up the gap
 * between the logo and the nav below. The inner carries no side padding of its
 * own — the 12px/16px gutter comes entirely from the outer <header>'s global
 * padding above. Specificity 0,0,3,0 beats core's
 * `.is-layout-constrained > .alignwide { max-width: … }` (0,0,2,0). */
.lfbc-site-header .lfbc-header-inner.alignwide {
	max-width: 1412px;
	padding-left: 0;
	padding-right: 0;
}

/* News ↔ Contact Us spacing. The aux-nav <ul> (which carries the
 * .lfbc-aux-nav class) inherits a 12px item gap from the aux row's block-gap
 * via core's `.wp-block-navigation__container { gap: inherit }`. Override it
 * for a roomier split between the two links (Figma 9163:9042). */
.lfbc-aux-nav.wp-block-navigation__container {
	gap: 32px;
}

/* Aux-nav link hover — Poppy with no underline (Figma). */
.lfbc-aux-nav a:hover,
.lfbc-aux-nav a:focus {
	color: var(--wp--preset--color--poppy-500) !important;
	text-decoration: none;
}

/* Header logo — fluid between Figma reference sizes: 285px at the 1360px
 * design width, 221px at the 390px mobile width. Linear interpolation
 * (height: auto preserves the aspect ratio from the SVG). */
.wp-block-site-logo .custom-logo {
	width: clamp(221px, 195.27px + 6.6vw, 285px);
	height: auto;
}

/* Right column inside the header — vertical stack: aux row on top, main
 * nav below (Figma 9163:9037). align-items: flex-end (cross-axis in a
 * column) right-aligns the aux row. On mobile the aux row is hidden so
 * the column contains only the mega-menu toggle. */
.lfbc-header-right {
	flex: 1 1 auto;
	flex-grow: 1;
	min-width: 0;
	align-items: flex-end;
}

/* Mobile: hide the aux row (News/Contact, search, pill Apply button).
 * The right column still contains main-nav (the MMM hamburger toggle).
 * Chained .wp-block-group bumps specificity to 0,0,2,0 so this beats WP's
 * `.wp-block-group-is-layout-flex { display: flex }` (0,0,1,0) which is
 * emitted after our stylesheet in <head>. */
.wp-block-group.lfbc-aux-row {
	display: none;
}

/* Mobile: bottom-align the logo and right column so the mega-menu toggle
 * (only visible child of the column on mobile) sits at the logo's bottom
 * edge (Figma items-end). Overrides the block's verticalAlignment:"top". */
@media (max-width: 1023.98px) {
	.lfbc-header-row {
		align-items: flex-end;
	}
}

@media (min-width: 1024px) {
	/* Hide the mobile-only Apply for Funding banner. */
	.lfbc-apply-banner {
		display: none;
	}

	/* Open up horizontal breathing room between the logo and the nav now that
	 * the header spans the full padded width. column-gap on the space-between
	 * row pushes the right column's left edge (where the nav starts) inward,
	 * while the aux row stays pinned to the right edge. Scales with the
	 * viewport and caps at the Figma reference gap (~104px at 1440px). */
	.lfbc-header-row {
		column-gap: clamp(40px, 7vw, 104px);
	}

	/* Show the aux row — matched specificity (0,0,2,0) to the hide rule. */
	.wp-block-group.lfbc-aux-row {
		display: flex;
	}

	/* Main nav fills the full width of the right column so the menu row
	 * spans the column under the right-aligned aux row (Figma 9163:9048).
	 * On mobile, main-nav stays auto-width and gets right-aligned by the
	 * parent column's align-items: flex-end. */
	.lfbc-header-right > .lfbc-main-nav {
		align-self: stretch;
		width: 100%;
	}
}