/**
 * Beaufort — base layer.
 *
 * Foundational rules only: resets that theme.json cannot express, the
 * architectural rules that define the system (no shadows, no radii), utility
 * classes used by patterns, and the responsive container behaviour.
 */

/* ---------------------------------------------------------------------------
   1. System invariants
   ------------------------------------------------------------------------ */

/*
 * Four of these are editable under Beaufort → Options, which writes them into
 * theme.json's `settings.custom`. Pointing at the generated variables rather
 * than restating the values keeps one source of truth; the literal after each
 * comma is the fallback for the split second before global styles resolve, and
 * for anywhere theme.json is not in play.
 *
 * The generated names are lodash kebab-case, which gives digits their own
 * word: `easing.power3` becomes `--wp--custom--easing--power-3`. Read them off
 * a rendered page rather than deriving them by hand.
 */
:root {
	--bf-hairline: 1px solid var(--wp--preset--color--silver);
	--bf-hairline-inverse: 1px solid rgba( 255, 255, 255, 0.16 );
	--bf-header-h: var( --wp--custom--header-height, 96px );
	--bf-header-h-scrolled: var( --wp--custom--header-height-scrolled, 80px );
	--bf-ease-power3: var( --wp--custom--easing--power-3, cubic-bezier( 0.16, 1, 0.3, 1 ) );
	--bf-ease-weighted: var( --wp--custom--easing--weighted, cubic-bezier( 0.22, 1, 0.36, 1 ) );
	--bf-margin-inline: var( --wp--custom--margin-inline, clamp( 1.25rem, 5vw, 4rem ) );

	/* Diagonal arrow, matching the mitred stroke of the inline icon set. */
	--bf-arrow-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E" );
}

/*
 * The design system forbids shadows and rounded corners outright — depth comes
 * from tonal shifts and hairlines. Core and plugins reintroduce both, so this
 * is enforced rather than merely defaulted.
 */
.wp-site-blocks .wp-block-button__link,
.wp-site-blocks .wp-block-image img,
.wp-site-blocks .wp-block-cover,
.wp-site-blocks .wp-block-group,
.wp-site-blocks .wp-block-column,
.wp-site-blocks input,
.wp-site-blocks select,
.wp-site-blocks textarea {
	box-shadow: none;
}

/*
 * Core spaces a flow-layout group with
 * `:root :where(.is-layout-flow) > * { margin-block-start: 1.5rem }`, skipping
 * the first child. That is right for stacked content, but several sections here
 * take a core group and restyle it as a multi-column grid — and then the margin
 * lands *inside each cell*, dropping every item except the first by the block
 * gap. On the stats band that put "27" a full 24px above the other four figures.
 * The grid's own `gap` is already doing the spacing.
 *
 * The `:root` prefix matches core's own specificity trick, so this wins on
 * (0,2,0) without resorting to !important. Any future CSS-driven grid built on
 * a core group belongs in this list.
 */
:root .bf-stats > *,
:root .bf-contact-grid > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--wp--preset--color--pale-blue);
	color: var(--wp--preset--color--navy);
}

/* Optical sizing keeps EB Garamond hairline-elegant at display scale. */
h1, h2, h3,
.bf-display {
	font-optical-sizing: auto;
	font-variant-ligatures: common-ligatures;
}

img {
	max-width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------------
   2. Focus & accessibility
   ------------------------------------------------------------------------ */

:where( a, button, input, select, textarea, summary, [tabindex] ):focus-visible {
	outline: 2px solid var(--wp--preset--color--navy);
	outline-offset: 3px;
}

/* On navy surfaces the ring has to invert to stay visible. */
.has-navy-background-color :focus-visible,
.has-navy-mid-background-color :focus-visible,
.bf-inverse :focus-visible {
	outline-color: var(--wp--preset--color--white);
}

.screen-reader-text {
	border: 0;
	clip-path: inset( 50% );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

.skip-link:focus {
	background: var(--wp--preset--color--navy);
	clip-path: none;
	color: var(--wp--preset--color--white);
	height: auto;
	left: 1rem;
	padding: 1rem 1.5rem;
	top: 1rem;
	width: auto;
	z-index: 1000;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   3. Typographic utilities used by patterns
   ------------------------------------------------------------------------ */

/*
 * The eyebrow label. Appears above nearly every section heading in the
 * reference designs — 12px, 700, 0.1em tracking, uppercase.
 */
.bf-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--label-caps);
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
	margin: 0 0 1rem;
}

.bf-eyebrow--wide {
	letter-spacing: 0.2em;
}

.bf-inverse .bf-eyebrow,
.has-navy-background-color .bf-eyebrow,
.has-navy-mid-background-color .bf-eyebrow {
	color: var(--wp--preset--color--navy-soft);
}

/* Micro-label for data pairs (VALUATION / UNITS / STATUS). */
.bf-microlabel {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
	margin: 0 0 0.5rem;
}

/*
 * Core's constrained layout puts `margin-inline: auto` on every child, so any
 * element that narrows its own max-width ends up centred in the column whether
 * or not that was wanted. These reset the start margin so a left-aligned
 * measure stays left, and restore auto centring only when the text is centred.
 */
.bf-measure {
	max-width: 62ch;
}

.bf-measure-narrow {
	max-width: 46ch;
}

/*
 * Core's constrained-layout rule sets `margin-left: auto !important` on every
 * child, so an element that narrows its own max-width gets centred whether or
 * not that was intended. Overriding it needs `!important` in turn — there is no
 * specificity that beats it. The `:not()` exempts genuinely centred text.
 */
.bf-measure:not( .has-text-align-center ),
.bf-measure-narrow:not( .has-text-align-center ) {
	margin-inline-start: 0 !important;
}

/*
 * Core gives every root-level block a top margin from the global block gap,
 * which put a 24px strip of page background between the header and the content
 * on every page — visible as a stray light band above a navy page head, and
 * above the hero where the header is transparent. The header and main are meant
 * to sit flush.
 */
.wp-site-blocks > main,
.wp-site-blocks > .wp-block-template-part:first-of-type + main {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------------------
   4. Structural utilities
   ------------------------------------------------------------------------ */

.bf-hairline-top {
	border-top: var(--bf-hairline);
}

.bf-hairline-bottom {
	border-bottom: var(--bf-hairline);
}

.bf-inverse .bf-hairline-top,
.has-navy-background-color .bf-hairline-top,
.has-navy-mid-background-color .bf-hairline-top {
	border-top-color: rgba( 255, 255, 255, 0.16 );
}

.bf-inverse .bf-hairline-bottom,
.has-navy-background-color .bf-hairline-bottom,
.has-navy-mid-background-color .bf-hairline-bottom {
	border-bottom-color: rgba( 255, 255, 255, 0.16 );
}

/* A 1px grid built from the gap itself — the "grid-paper" aesthetic. */
.bf-grid-hairline {
	background-color: var(--wp--preset--color--silver);
	gap: 1px !important;
}

.bf-inverse.bf-grid-hairline {
	background-color: rgba( 255, 255, 255, 0.16 );
}

/* Inverted logo for navy surfaces. The mark is greyscale, so this is exact. */
.bf-logo-invert img {
	filter: brightness( 0 ) invert( 1 );
}

/* ---------------------------------------------------------------------------
   5. Layout
   ------------------------------------------------------------------------ */

/*
 * Sections that must bleed to the viewport edge while their content stays on
 * the 1280px grid. Used by the market split, sector grid and marquee.
 */
.bf-bleed {
	margin-left: calc( -1 * var(--bf-margin-inline) );
	margin-right: calc( -1 * var(--bf-margin-inline) );
	width: calc( 100% + 2 * var(--bf-margin-inline) );
	max-width: none;
}

/*
 * Full-bleed sections nested inside post content.
 *
 * Core's `alignfull` cancels exactly one level of root padding, so a section
 * sitting inside a constrained post-content — itself inside a constrained main —
 * stops short of the viewport edge by half the leftover gutter. Measuring the
 * breakout against the viewport instead works at any nesting depth. The
 * horizontal overflow this can introduce is already contained by the
 * `overflow-x: hidden` on body.
 */
.bf-sections > .alignfull {
	margin-inline: calc( 50% - 50vw ) !important;
	width: 100vw;
	max-width: 100vw;
}

.bf-section {
	padding-block: var(--wp--preset--spacing--80);
}

.bf-section--tight {
	padding-block: var(--wp--preset--spacing--70);
}

@media ( max-width: 781px ) {
	.bf-stack-mobile {
		flex-direction: column !important;
	}

	.bf-hide-mobile {
		display: none !important;
	}
}

@media ( min-width: 782px ) {
	.bf-hide-desktop {
		display: none !important;
	}
}