/* =============================================================================
   HFSE Blocks — foundations
   Design tokens that theme.json cannot express (the mesh page background, the
   scroll-reveal primitive, shared frame/paper treatments) plus small base
   corrections. Everything colour- and type-related still comes from theme.json
   presets so it stays editable in the Site Editor.
   ========================================================================== */

:root {
	--hfse-frame-paper: #fff;
	--hfse-frame-shadow: 0 18px 34px rgba(8, 35, 55, 0.22);
	--hfse-card-shadow: 0 16px 30px rgba(8, 35, 55, 0.16);
	--hfse-card-shadow-hover: 0 20px 36px rgba(8, 35, 55, 0.22);
	--hfse-pill-shadow: 0 10px 20px rgba(8, 35, 55, 0.18);
	--hfse-hairline: rgba(8, 35, 55, 0.14);

	/* Static design token: the minimum height of the masthead bar. */
	--hfse-header-min: 72px;

	/* Measured at runtime by anchors.js — the height of the masthead only when
	   it is actually sticky, otherwise 0. Consumed by scroll-margin-top on
	   in-page anchor targets so header-link jumps land on the section top
	   rather than underneath the header (OPI-2867).
	   Never size the masthead from this value: it is an output, not an input. */
	--hfse-header-height: 0px;
	--hfse-anchor-offset: calc(var(--hfse-header-height) + 1.5rem);
}

@media (max-width: 781px) {
	:root {
		--hfse-header-min: 56px;
	}
}

/* -----------------------------------------------------------------------------
   Page canvas — the layered radial "island mesh" from the classic theme.
   -------------------------------------------------------------------------- */

html {
	background:
		radial-gradient(ellipse at 82% 24%, rgba(252, 175, 63, 0.36) 0 12%, rgba(252, 175, 63, 0.14) 30%, transparent 54%),
		radial-gradient(ellipse at 94% 58%, rgba(246, 139, 20, 0.22) 0 10%, transparent 38%),
		radial-gradient(ellipse at 18% 16%, rgba(42, 172, 226, 0.20) 0 12%, transparent 42%),
		radial-gradient(ellipse at 28% 52%, rgba(141, 198, 63, 0.12) 0 10%, transparent 36%),
		radial-gradient(ellipse at 50% 72%, rgba(8, 35, 55, 0.08) 0 7%, transparent 38%),
		linear-gradient(145deg, #e8f4f8 0%, #f7f2ec 54%, #fff1df 100%);
	background-color: #f7f2ec;
	background-attachment: fixed;
	scroll-behavior: smooth;

	/* A transformed reveal (or a rotated frame) can paint wider than the
	   viewport and summon a horizontal scrollbar. `clip` suppresses that
	   without creating a scroll container, so position:sticky still works —
	   which `overflow: hidden` would break. */
	overflow-x: clip;
}

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

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* -----------------------------------------------------------------------------
   Anchor targets
   Every element that can be a jump target keeps clear of the sticky header.
   -------------------------------------------------------------------------- */

:target,
[id].hfse-anchor,
.wp-site-blocks [id]:not(body) {
	scroll-margin-top: var(--hfse-anchor-offset);
}

/* -----------------------------------------------------------------------------
   Scroll reveal — the in-theme replacement for the AOS library.
   Add "hfse-reveal" (plus an optional direction/delay class) to any block via
   Advanced → Additional CSS class. Falls back to fully visible with no JS.
   -------------------------------------------------------------------------- */

.hfse-reveal {
	opacity: 1;
}

.js-hfse-reveal .hfse-reveal {
	opacity: 0;
	transform: translate3d(0, 24px, 0);
	transition:
		opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

.js-hfse-reveal .hfse-reveal--right { transform: translate3d(-32px, 0, 0); }
.js-hfse-reveal .hfse-reveal--left  { transform: translate3d(32px, 0, 0); }
.js-hfse-reveal .hfse-reveal--zoom  { transform: scale(0.94); }
.js-hfse-reveal .hfse-reveal--flip  { transform: perspective(900px) rotateX(14deg) scale(0.97); transform-origin: top center; }

.js-hfse-reveal .hfse-reveal.is-visible {
	opacity: 1;
	transform: none;
}

.hfse-reveal--delay-1 { transition-delay: 90ms; }
.hfse-reveal--delay-2 { transition-delay: 180ms; }
.hfse-reveal--delay-3 { transition-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
	.js-hfse-reveal .hfse-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* -----------------------------------------------------------------------------
   Shared paper / frame treatments used by several patterns and blocks.
   -------------------------------------------------------------------------- */

.hfse-paper {
	background: var(--hfse-frame-paper);
	border: clamp(7px, 0.9vw, 12px) solid var(--hfse-frame-paper);
	box-shadow: var(--hfse-frame-shadow);
}

.hfse-eyebrow {
	align-items: center;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 999px;
	box-shadow: var(--hfse-pill-shadow);
	color: var(--wp--preset--color--navy);
	display: inline-flex;
	font-family: var(--wp--preset--font-family--gotham);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1.2;
	margin-inline: auto;
	padding: 0.35rem 1rem;
	text-transform: uppercase;
	width: fit-content;
}

.hfse-eyebrow--plain {
	background: none;
	box-shadow: none;
	padding-inline: 0;
}

.hfse-eyebrow--orange {
	background: var(--wp--preset--color--orange);
	color: #fff;
}

/* Blocks with a text-align:left parent still need the pill left aligned. */
.hfse-align-start .hfse-eyebrow {
	margin-inline: 0;
}

/* Balance long display headings. */
.hfse-balance {
	text-wrap: balance;
}

.hfse-pretty {
	text-wrap: pretty;
}