/**
 * Foundry base chrome — the Signature Masthead's structural CSS.
 *
 * Brand-NEUTRAL: every color/size is a `--foundry-chrome-*` token with a sane
 * fallback, so a child's brand.css remaps the tokens (and per-section colors)
 * without touching this file — exactly the Editorial-module token precedent.
 * Loaded by the Foundry plugin's Chrome module, so it only reaches sites that
 * have opted in; Simple-Header brochure sites never load it.
 *
 * Class contract (a Signature Masthead pattern applies these):
 *   .foundry-util      Tier 1 — dark utility strip (dateline + utility links)
 *   .foundry-mast      Tier 2 — masthead (logo + strapline + CTA); the scroll
 *                      reference the condense JS watches
 *   .foundry-secnav    Tier 3 — sticky section nav (a core Navigation block +
 *                      Search + Subscribe); condenses to a compact bar on scroll
 *
 * Per-section color: the Chrome render_block filter stamps data-sec + (optional)
 * an inline `--foundry-chrome-sec` on each section link; a child maps color per
 * slug by setting `--foundry-chrome-sec` in a `[data-sec="…"]` rule.
 */

:root {
	--foundry-chrome-util-bg: #141414;
	--foundry-chrome-util-fg: #c7c7c7;
	--foundry-chrome-util-fg-strong: #ededed;
	--foundry-chrome-util-sep: #3a3a3a;

	--foundry-chrome-mast-bg: #ffffff;
	--foundry-chrome-mast-border: #ececec;
	--foundry-chrome-strap: #8a8a8a;

	--foundry-chrome-secnav-bg: #ffffff;
	--foundry-chrome-secnav-border: #e6e6e6;
	--foundry-chrome-secnav-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);

	--foundry-chrome-link: #1a1a1a;
	--foundry-chrome-muted: #8a8a8a;
	--foundry-chrome-accent: #b3122b; /* hover/active fallback when no per-section color */

	--foundry-chrome-cta-bg: var(--foundry-chrome-accent);
	--foundry-chrome-cta-fg: #ffffff;
	--foundry-chrome-cta-bg-hover: #8f0f22;
}

/* ---------------------------------------------------------------- Tier 1 */

.foundry-util {
	background: var(--foundry-chrome-util-bg);
	color: var(--foundry-chrome-util-fg);
	font-size: 0.8rem;
}

.foundry-util a,
.foundry-util .wp-block-navigation-item__content {
	color: var(--foundry-chrome-util-fg);
	text-decoration: none;
}

.foundry-util a:hover,
.foundry-util a:focus-visible,
.foundry-util .wp-block-navigation-item__content:hover {
	color: #ffffff;
}

/* The dateline is the bright element in an otherwise muted strip — the WHOLE
   line, not an emphasized fragment inside it. This originally targeted
   `b`/`strong` descendants, which the block can never emit: the dateline's
   render.php passes its wp_date() string through esc_html(), so the strong
   token was unreachable and the dateline sat at the muted `--…-util-fg`. Not
   fixed by emitting the markup, because `format` is an editor-chosen attribute
   that need not contain a day name at all (`F j, Y`, `j F Y`) — there is no
   fragment to reliably emphasize. The block supports color.text + fontWeight
   and those land as inline styles, so an editor override still wins. */
.foundry-dateline {
	color: var(--foundry-chrome-util-fg-strong);
	font-weight: 600;
}

/* ---------------------------------------------------------------- Tier 2 */

.foundry-mast {
	background: var(--foundry-chrome-mast-bg);
	border-bottom: 1px solid var(--foundry-chrome-mast-border);
}

.foundry-mast__strap {
	color: var(--foundry-chrome-strap);
}

/* ---------------------------------------------------------------- Tier 3 */

/* Sticky needs room: position:sticky is constrained to the containing block,
   and the secnav is the LAST child of the masthead — its stick range inside
   the header wrappers is zero, so it would scroll away with the page. Promote
   the wrappers to display:contents so the secnav's containing block becomes
   the page root (.wp-site-blocks) and it can stick for the whole scroll. The
   wrappers carry no box styling of their own (tiers do), and :has() scopes
   the template-part rule to masthead headers only. Browsers without :has()
   degrade to a non-sticky header — progressive enhancement, nothing breaks. */
.wp-block-template-part:has(> .foundry-masthead),
.foundry-masthead {
	display: contents;
}

/* The masthead wrapper is a FLOW group whose children are the three tier bands,
   and flow layout hands every sibling after the first a `margin-block-start:
   var(--wp--style--block-gap)`. Left alone, tiers 2 and 3 arrive with a band of
   page background between them: the tiers stop being contiguous and .foundry-mast's
   bottom hairline is stranded above the nav.

   `display: contents` above does NOT clear it. It removes the wrappers' boxes,
   but selector matching is DOM-based — the tiers still match core's `> *` — so
   the margins simply resolve in .wp-site-blocks' flow instead, uncollapsed.

   Two classes deliberately: core emits `:root :where(.is-layout-flow) > *`, which
   is (0,1,0), so a single-class reset would tie and win only on source order. */
.foundry-masthead > .foundry-util,
.foundry-masthead > .foundry-mast,
.foundry-masthead > .foundry-secnav {
	margin-block-start: 0;
}

.foundry-secnav {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--foundry-chrome-secnav-bg);
	border-bottom: 1px solid var(--foundry-chrome-secnav-border);
	box-shadow: var(--foundry-chrome-secnav-shadow);
}

/* Sit flush under the WP admin bar when logged in. */
body.admin-bar .foundry-secnav {
	top: var(--wp-admin--admin-bar--height, 0px);
}

/* The section links (a core Navigation block). Push Search + Subscribe right. */
.foundry-secnav .wp-block-navigation {
	flex: 1;
}

.foundry-secnav .wp-block-navigation .wp-block-search,
.foundry-secnav .wp-block-navigation .wp-block-buttons {
	margin-inline-start: auto;
}

.foundry-secnav .wp-block-navigation-item__content {
	color: var(--foundry-chrome-link);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	padding-block: 1rem;
	transition: color 0.12s ease, border-color 0.12s ease;
}

/* Hover + active resolve to the per-section color when a child provides one
   (via --foundry-chrome-sec), else the accent fallback. */
.foundry-secnav .wp-block-navigation-item__content:hover,
.foundry-secnav .wp-block-navigation-item__content:focus-visible {
	color: var(--foundry-chrome-sec, var(--foundry-chrome-accent));
}

.foundry-secnav .wp-block-navigation-item__content.is-active {
	color: var(--foundry-chrome-sec, var(--foundry-chrome-accent));
	border-bottom-color: var(--foundry-chrome-sec, var(--foundry-chrome-accent));
}

/* ---- Condense-on-scroll (JS toggles .is-condensed) --------------------- */

/* The compact wordmark + CTA live in the bar but are hidden until condensed. */
.foundry-secnav__wm,
.foundry-secnav__cta {
	display: none;
}

.foundry-secnav.is-condensed .foundry-secnav__wm {
	display: inline-flex;
	align-items: center;
	flex: none;
}

.foundry-secnav.is-condensed .foundry-secnav__cta {
	display: inline-flex;
}

.foundry-secnav.is-condensed .wp-block-navigation-item__content {
	padding-block: 0.7rem;
}

/* The CTA is a nav ITEM, not a Button block: core puts a navigation-link's
   `className` on the <li>, and the <a> inside always carries the shared
   `wp-block-navigation-item__content`. So the CTA also matches the section-link
   rules above and would wear the links' block padding instead of its own — a
   pill grown to link height, jammed against the condensed bar's bottom rule.

   Given its own padding here rather than a `:not()` on the rule above, so that
   no existing selector's specificity changes and a child skin keeps the same
   override headroom it has today. Both selectors are (0,3,0), matching the
   condensed rule they must beat — placed after it, so they win on order within
   this file while still losing cleanly to any (0,3,0) rule a child sets later.

   `foundry-cta__item` is the always-visible CTA the Signature Masthead pattern
   emits; `foundry-secnav__cta` is the condensed-only reveal slot declared above.
   Declarations are held to the set a child is expected to restyle — add nothing
   here that a skin would not already be overriding. */
.foundry-secnav .foundry-cta__item > .wp-block-navigation-item__content,
.foundry-secnav .foundry-secnav__cta > .wp-block-navigation-item__content {
	background: var(--foundry-chrome-cta-bg);
	color: var(--foundry-chrome-cta-fg);
	font-size: 0.85rem;
	font-weight: 700;
	padding: 0.45rem 0.95rem;
	border-radius: 2px;
	border-bottom: 0;
	margin-bottom: 0;
}

.foundry-secnav .foundry-cta__item > .wp-block-navigation-item__content:hover,
.foundry-secnav .foundry-cta__item > .wp-block-navigation-item__content:focus-visible,
.foundry-secnav .foundry-secnav__cta > .wp-block-navigation-item__content:hover,
.foundry-secnav .foundry-secnav__cta > .wp-block-navigation-item__content:focus-visible {
	background: var(--foundry-chrome-cta-bg-hover);
	color: var(--foundry-chrome-cta-fg);
}

/* ---- CTA (a core Button composed as the house Subscribe/Get-listed pill) -- */

/* Kept deliberately, though nothing the theme itself emits matches: the
   Signature Masthead ships its CTA as a navigation-link, handled above. These
   are the affordance for a tenant who composes the masthead CTA out of a core
   Button instead — either wrapping it in a `foundry-cta` group or putting the
   class on the Button block, hence both selectors.

   Scoped to `.foundry-masthead` because `foundry-cta` is NOT ours alone: the
   plugin's Marketing CTA block renders `<section class="foundry-cta ...">`, and
   six child skins style that section. Unscoped, any core Button a tenant drops
   into a Marketing CTA on a chrome-module site would silently wear the masthead
   pill. The block has no InnerBlocks today, so the live reach is a Button inside
   a `foundry-cta`-classed wrapper rather than inside the block itself — but the
   class is shared either way, and the masthead prefix costs nothing.

   `.foundry-masthead` rather than `.foundry-secnav` so a Button CTA still works
   in any of the three tiers. (0,3,0), the same tier as the nav-link rules above,
   so a child skin keeps the override headroom those already assume. */
.foundry-masthead .foundry-cta .wp-block-button__link,
.foundry-masthead .wp-block-button.foundry-cta .wp-block-button__link {
	background: var(--foundry-chrome-cta-bg);
	color: var(--foundry-chrome-cta-fg);
	border-radius: 2px;
}

.foundry-masthead .foundry-cta .wp-block-button__link:hover,
.foundry-masthead .foundry-cta .wp-block-button__link:focus-visible {
	background: var(--foundry-chrome-cta-bg-hover);
}

/* ------------------------------------------------- Mobile overlay styling */

/* The hamburger + overlay come free from core wp:navigation overlayMenu:"mobile";
   Search + Subscribe are inner blocks of that nav, so they appear in the overlay
   (restoring the parity the old overflow-scroll strip hid). Match the preset. */
.foundry-secnav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--foundry-chrome-secnav-bg);
}

.foundry-secnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--foundry-chrome-link);
	border-bottom: 0;
}

.foundry-secnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-search,
.foundry-secnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-buttons {
	margin-inline-start: 0;
	margin-block-start: 1rem;
}

/* Standard 3-line hamburger: core's Navigation open-button ships a 2-line
   glyph — swap it for the conventional three bars (currentColor, so it takes
   the skin's ink) wherever the masthead shows a burger. */
.foundry-secnav .wp-block-navigation__responsive-container-open svg {
	display: none;
}

.foundry-secnav .wp-block-navigation__responsive-container-open::before {
	content: "";
	display: block;
	width: 24px;
	height: 18px;
	background:
		linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) 0 50% / 100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
}

/* ------------------------- Mobile: merged masthead row ------------------- */

/* Core's Navigation block switches from hamburger to the horizontal nav at
   600px, but a masthead section nav (links + search) doesn't fit until
   ~760px — so extend the hamburger range to the classic mobile breakpoint.
   And rather than leaving the section-nav band as an orphan strip holding a
   lone burger below the masthead, collapse it and absolutely position the
   burger INTO the masthead row, beside the logo and CTA. The masthead
   regains a box here (display:block, the burger's anchor), which forfeits
   the sticky nav on mobile — matching the pre-block design, which disabled
   its condensed treatment on mobile too. A child skin tunes the burger
   offsets via --foundry-chrome-burger-top / --foundry-chrome-burger-right. */
@media (max-width: 759.98px) {
	.foundry-masthead {
		display: block;
		position: relative;
	}

	/* keep the hamburger through 600–760 (out-rank core's min-width switch) */
	.foundry-masthead .foundry-secnav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.foundry-masthead .foundry-secnav .wp-block-navigation__responsive-container-open {
		display: flex;
		position: absolute;
		top: var(--foundry-chrome-burger-top, 3.6rem);
		right: var(--foundry-chrome-burger-right, 1.25rem);
	}

	/* the burger must anchor to the MASTHEAD box, not the nav — core gives
	   .wp-block-navigation position:relative, which would swallow the
	   absolute and strand the burger in the collapsed band */
	.foundry-masthead .foundry-secnav .wp-block-navigation {
		position: static;
	}

	/* the band itself collapses — zero height in flow; the absolutely
	   positioned burger still paints via overflow */
	.foundry-secnav {
		position: static;
		border-bottom: none;
		box-shadow: none;
		height: 0;
		overflow: visible;
	}
}

@media (max-width: 781px) {
	/* Strapline is the first thing to go on narrow masthead layouts. */
	.foundry-mast__strap {
		display: none;
	}
}