/* ==========================================================================
   Teako Minerals — Base: reset, body, typography defaults
   Canon (DESIGN-PRINCIPLES.md): Geologica = display/headings,
   IBM Plex Sans = body/UI, Space Mono = data/mono accents.
   Blocks override deliberately; this layer only catches what they don't,
   so nothing ever falls back to Times/Arial.
   ========================================================================== */

/* Border-box everywhere (2026-08-20, site-wide width pass).
   The theme had no global box-sizing, so every container written as
   `max-width: N; padding: 0 56px` rendered N + 112px. On a 1440 viewport
   that pushed .ph__container to 1512px, .nmf__container to 1512px and the
   About containers to 1552px — `margin: 0 auto` cannot go negative, so the
   sections sat flush left with the right-hand gutter off screen. One reset
   removes the whole class of bug; page containers then declare their own
   max-width as the OUTER measure (see css/layout.css). */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* 10 Sep 2026: explicit reset — WordPress core's global-styles sheet used to
   supply body{margin:0}; it is no longer loaded on ACF-only pages. */
html, body { margin: 0; padding: 0; }
body {
	font-family: 'IBM Plex Sans', system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Form controls don't inherit fonts by default. */
button,
input,
select,
textarea {
	font-family: inherit;
}

/* Unclassed headings land on the display face. */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Geologica', 'IBM Plex Sans', system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   H2 / H3 — one voice site-wide (2026-08-20)
   The hero headline (.hero-scrolly__headline) is Geologica 300; the client
   asked for that same face and weight on every H2 and H3 across the site.
   This is the authoritative declaration. Per-block rules only carry SIZE,
   line-height, tracking and colour — any block that re-declares
   font-family/font-weight on an H2 or H3 is a bug, not a variant.
   Geologica 300 is served: see the Google Fonts enqueue in functions.php
   (`Geologica:wght@300;400;500;600`), so this is a real light, not a faux one.
   -------------------------------------------------------------------------- */
h2,
h3 {
	font-family: 'Geologica', 'IBM Plex Sans', system-ui, sans-serif;
	font-weight: 300;
}

/* --------------------------------------------------------------------------
   Focus ring — one keyboard state for every control (2026-08-20)
   Part of the single button system: blocks set the default/hover/active look,
   the focus-visible state is declared once here so nothing ships without one.
   Mouse users never see it (:focus-visible, not :focus).

   Milano red rather than currentColor: currentColor is white inside the
   filled red CTAs, and a white ring sitting 2px outside them on the paper
   background is invisible. #C42800 clears 3:1 against both the paper
   (#F4F5F7) and the dark bands (#0B0F16), so one value covers every surface.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid #C42800;
	outline-offset: 2px;
}

/* Accessibility helper (10 Sep 2026): WordPress core's block-library stylesheet
   used to provide this and is no longer loaded on ACF-only pages, so the
   skip link and any visually-hidden labels are hidden by the theme itself. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: #F4F5F7;
  clip: auto !important;
  clip-path: none;
  color: #141A26;
  display: block;
  font-size: 14px;
  font-weight: 600;
  height: auto;
  left: 8px;
  line-height: normal;
  padding: 14px 22px;
  text-decoration: none;
  top: 8px;
  width: auto;
  z-index: 100000;
}