/* ==========================================================================
   WST — global styles shared by every template.
   Load order: Google Fonts → tokens/*.css → site.css → pages/<slug>.css
   Page CSS keeps each design page's <helmet> CSS verbatim (minus the html/body
   white background, which lives here so body can match the footer).
   ========================================================================== */

/* Body = footer colour so iOS Safari overscroll below the footer never shows white.
   The page container (.wst-page) stays white. */
html, body { margin: 0; background: #273449; }
.wst-page { background: #ffffff; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Admin bar: the header is sticky at the viewport top. */
html { margin-top: 0 !important; }
body.admin-bar .wst-page > header { top: var(--wp-admin--admin-bar--height, 0px); }

/* ---------------------------------------------------------------- header + footer responsive (header.php / footer.php)
   Same rules as each page stylesheet's copy of the design CSS. They live here too because templates that load
   no page stylesheet (blog index, posts, category archives, 404 — index.php) would otherwise show the desktop
   nav and the mobile menu button together at every width. */
:where(.wst-page > header, .wst-page > footer) a{text-decoration:none;}
[data-m="burger"]{display:none;}
[data-m="burger"] summary{list-style:none;}
[data-m="burger"] summary::-webkit-details-marker{display:none;}
@media (max-width:820px){
	[data-m="nav"]{display:none !important;}
	[data-m="burger"]{display:block;}
	[data-p="footer"]{padding-top:56px !important;padding-bottom:32px !important;}
}

/* ---------------------------------------------------------------- Button
   Static port of DesignSystem Button.jsx (base style + VARIANTS + SIZES).
   Rendered as <span class="wst-btn"> inside the design's wrapping <a>, or as <button>. */
.wst-btn {
	font-family: var(--font-sans);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tracking-normal);
	line-height: normal;
	text-align: center;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	transition: filter .18s, transform .12s, box-shadow .18s, background .18s;
}
.wst-btn:active { transform: scale(var(--press-scale)); }
.wst-btn--primary { background: var(--fg-gradient); color: #fff; border: 0; }
.wst-btn--dark    { background: var(--fg-ink); color: #fff; border: 0; }
.wst-btn--ghost   { background: transparent; color: var(--fg-text-med); border: 1px solid var(--fg-line); }
.wst-btn--sm { padding: 9px 18px; font-size: 13px; border-radius: var(--radius-sm); }
.wst-btn--md { padding: 13px 24px; font-size: 15px; border-radius: var(--radius-md); }
.wst-btn--lg { padding: 16px 30px; font-size: 16px; border-radius: 13px; }
.wst-btn[disabled] { cursor: not-allowed; opacity: .4; }

/* Dark buttons that flip to the gradient on hover: the design sets --fg-ink on the wrapper
   (style="--fg-ink:#273449;" style-hover="--fg-ink:var(--fg-gradient);"). */
.wst-btnflip { --fg-ink: #273449; }
.wst-btnflip:hover { --fg-ink: var(--fg-gradient); }

/* ---------------------------------------------------------------- IconButton
   Static port of IconButton.jsx (slate fill → gradient on hover/active). Real <button>. */
.wst-iconbtn {
	width: 34px; height: 34px;
	border: 0; border-radius: 50%;
	background: var(--fg-ctrl);
	color: var(--fg-text-hi);
	display: grid; place-items: center;
	cursor: pointer;
	padding: 0;
	transition: background .15s, color .15s;
}
.wst-iconbtn:hover, .wst-iconbtn.is-active { background: var(--fg-gradient); color: #fff; }

/* ---------------------------------------------------------------- shared hover states (style-hover) */
.wst-h-nav:hover  { color: #0f1216 !important; }
.wst-h-foot:hover { color: #ffffff !important; }

/* ---------------------------------------------------------------- rich text (ACF WYSIWYG)
   The wrapper carries the design's paragraph typography inline; paragraphs inside reset to it.
   --rt-gap = the design's gap between consecutive paragraphs. */
.wst-rt > :first-child { margin-top: 0; }
.wst-rt > :last-child { margin-bottom: 0; }
.wst-rt p { margin: 0; }
/* Doubled class: must outrank `.wst-rt p { margin: 0 }` (0,1,1) or the gap never applies. */
.wst-rt.wst-rt > * + * { margin-top: var(--rt-gap, 1em); }
.wst-rt ul, .wst-rt ol { margin-bottom: 0; }
.wst-rt strong, .wst-rt b { font-weight: 700; }

/* "Founded" paragraph: plain text dims after it scrolls into view; <strong> stays highlighted. */
.wst-dim { color: #0f1216; transition: color 1.4s cubic-bezier(.2,.7,.2,1); }
.wst-dim.is-dimmed { color: #a3a9b3; }
.wst-dim strong, .wst-dim b { font-weight: inherit; color: #0f1216; }
@media (prefers-reduced-motion: reduce) { .wst-dim { transition: none; } }

/* Password form on protected pages (template-parts/sections/password-form.php): the form fields' focus ring. */
.wst-pw .wst-field:focus { border-color: #e44125 !important; box-shadow: 0 0 0 3px rgba(228,65,37,.14) !important; }