/* ============================================================
   BOLTON Signal — 03 LAYOUT (containers, header, footer, sections)
   ============================================================ */
@layer layout {
	.container {
		width: 100%;
		max-width: var(--bx-wide);
		margin-inline: auto;
		padding-inline: var(--bx-gutter);
	}
	.container--narrow { max-width: var(--bx-content); }

	.site-content { display: block; }

	.section { padding-block: clamp(3rem, 7vw, var(--bx-sp-70)); }
	.section--tight { padding-block: var(--bx-sp-50); }
	.section + .section { padding-top: 0; }

	/* --- Header --- */
	.site-header {
		position: sticky;
		top: 0;
		z-index: 50;
		background: color-mix(in srgb, var(--bx-base) 86%, transparent);
		backdrop-filter: saturate(140%) blur(10px);
		border-bottom: var(--bx-border-hair);
	}
	/* Admin-bar-aware sticky offset: when the WP admin bar is shown (logged-in),
	   offset the sticky header below the FIXED admin bar so it is never clipped.
	   Matches WP's own breakpoints: 32px ≥783px, 46px 601–782px, and at ≤600px
	   the admin bar is position:absolute (scrolls away) so no offset is needed.
	   Public (logged-out) view has no .admin-bar class → top:0 (unaffected). */
	body.admin-bar .site-header { top: 32px; }
	@media screen and (max-width: 782px) {
		body.admin-bar .site-header { top: 46px; }
	}
	@media screen and (max-width: 600px) {
		body.admin-bar .site-header { top: 0; }
	}
	.site-header__inner {
		display: flex;
		align-items: center;
		gap: var(--bx-sp-40);
		/* Fixed min-height — must NOT consume --bx-header-offset (which app.js
		   derives FROM the header height); doing so creates a self-measurement
		   feedback loop that inflates the header. The offset var is for external
		   consumers (scroll-padding / sticky scene tops) only. */
		min-height: 64px;
		padding-block: 0.5rem;
	}
	/* `flex: 0 0 auto` keeps the logo at its intrinsic size in WebKit/Safari (never
	   shrunk by negative free space); `margin-right: auto` pushes nav + actions right. */
	.site-header__brand { flex: 0 0 auto; margin-right: auto; }
	/* If a Customizer custom logo is set, header.php renders the_custom_logo() in
	   place of the text lockup — size it responsively (prominent but controlled) and
	   keep the header height in check. block flex removes inline-baseline slack so
	   the brand cell == the logo height. Mobile 56 / tablet 80 / desktop 100, width
	   auto (aspect preserved, no crop). */
	.site-header__brand .custom-logo-link { display: flex; align-items: center; }
	.site-header__brand .custom-logo {
		display: block;
		height: 56px;            /* mobile (52–60) */
		width: auto;             /* preserve aspect ratio */
		max-width: 62vw;         /* never crowd the RFQ CTA / drawer toggle on small screens */
	}
	@media (min-width: 768px)  { .site-header__brand .custom-logo { height: 80px; } }   /* tablet (72–84) */
	@media (min-width: 1024px) { .site-header__brand .custom-logo { height: 100px; } }  /* desktop (~100) */
	/* trim the header's vertical padding when a (taller) logo is present so the total
	   desktop header stays ~104–116px rather than inflating. Degrades gracefully
	   (slightly taller header) where :has() is unsupported. */
	.site-header__inner:has(.custom-logo) { padding-block: 0.375rem; }
	.site-nav { display: none; }
	.site-header__actions { display: flex; align-items: center; gap: var(--bx-sp-30); }

	/* Primary desktop nav from 992px — the cross-browser breakpoint is UNCHANGED;
	   this is a Safari/WebKit compatibility correction, not a breakpoint move.
	   The nav is a RIGID flex item (`flex: 0 0 auto`) so WebKit/Safari cannot shrink
	   it to min-content and wrap the labels onto two lines the way the default
	   `flex: 0 1 auto` allowed (Chrome held them at preferred width; Safari did not).
	   `min-width: 0` keeps the flex item from forcing overflow via the implicit
	   `min-width: auto`. Below 992px the mobile drawer carries the full nav. */
	@media (min-width: 992px) {
		.site-nav { display: block; flex: 0 0 auto; min-width: 0; margin-right: var(--bx-sp-30); }
	}

	/* Narrow desktop band (992–1140px): the header content area is at its tightest
	   here (capped at ~1136px overall, and below that across this band). Tighten ONLY
	   the header's OWN internal spacing — not the page gutter or any page content — so
	   the full premium cluster (rigid logo + six-item nav + appearance/account/RFQ)
	   fits on one line WITHOUT compressing the RFQ CTA or wrapping any label. Premium
	   spacing is fully restored at ≥1141px, where ≈50px of slack remains so a longer
	   label can never tip the rigid (non-wrapping) row into overflow. This is a
	   spacing correction, not a breakpoint move; the nav still appears at the unchanged
	   992px breakpoint. */
	@media (min-width: 992px) and (max-width: 1140px) {
		.site-header__inner   { gap: var(--bx-sp-20); }
		.site-header__actions { gap: var(--bx-sp-20); }
		.site-nav             { margin-right: 0; }
	}

	/* --- Footer --- */
	.footer-rfq {
		background:
			radial-gradient(120% 140% at 50% -20%, rgba(200,162,76,.12), transparent 60%),
			var(--bx-base-midtone);
		border-top: var(--bx-border-hair);
		text-align: center;
		padding-block: clamp(3rem, 7vw, var(--bx-sp-70));
	}
	.footer-rfq__inner { display: grid; gap: var(--bx-sp-40); justify-items: center; }
	.footer-rfq__title { max-width: 22ch; font-size: var(--bx-fs-2xl); }

	.site-footer { background: var(--bx-navy-deep); border-top: var(--bx-border-hair); padding-block: var(--bx-sp-60) var(--bx-sp-40); }
	.site-footer__grid {
		display: grid;
		gap: var(--bx-sp-50);
		grid-template-columns: 1fr;
	}
	@media (min-width: 768px) {
		.site-footer__grid { grid-template-columns: 1.4fr 1fr; }
	}
	.site-footer__blurb { color: var(--bx-steel); margin-top: var(--bx-sp-30); }
	.site-footer__loc { margin-top: var(--bx-sp-20); }
	.site-footer__list, .site-footer__utility { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--bx-sp-30); }
	.site-footer__nav .site-footer__list { flex-direction: column; gap: 0.6rem; }
	.site-footer__bar {
		display: flex; flex-wrap: wrap; gap: var(--bx-sp-30);
		justify-content: space-between; align-items: center;
		margin-top: var(--bx-sp-50); padding-top: var(--bx-sp-40);
		border-top: var(--bx-border-hair);
	}
	.site-footer__copy { color: var(--bx-steel-dim); font-size: var(--bx-fs-sm); }

	/* --- Breadcrumbs --- */
	.breadcrumbs {
		font-size: var(--bx-fs-sm);
		color: var(--bx-steel);
		padding-block: var(--bx-sp-30);
	}
	.breadcrumbs a { color: var(--bx-steel); }
	.breadcrumbs a:hover { color: var(--bx-accent-strong); }
	.breadcrumbs__sep { margin-inline: 0.4rem; color: var(--bx-steel-dim); }
}