/* =============================================================================
   _toolkit/css/base.css - INVISIBLE PLUMBING ONLY.

   THE RULE FOR THIS FILE: if a rule here would make two sites look alike, it
   does not belong here. No colours. No font families. No spacing scale. No
   radii, shadows, borders, or component styling. Everything below is either a
   browser-normalisation fix, an accessibility affordance, or a named hook with
   no visual opinion attached.

   The two fluid-type/space custom properties blocks are DECLARED AND NEVER
   APPLIED - nothing in this file sets a font-size or a padding. They exist so a
   builder can start from the clamp() maths both proof builds derived by hand
   instead of re-deriving it, then move the endpoints to suit the prospect.

   Load order: base.css FIRST, then the prospect's own style.css, which is where
   all of the design lives.
   ========================================================================== */

/* ---------- reset ---------------------------------------------------------
   Deliberately minimal. It removes browser defaults that fight any design; it
   does not install one. */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;   /* iOS auto-inflates text in landscape */
  scroll-behavior: smooth;          /* anchor nav; overridden below for RM users */
}

body {
  margin: 0;
  overflow-x: hidden;               /* guard only: fix real overflow at its source */
}

/* Media behaves like a block and never bursts its column. */
img, svg, video, canvas, picture, iframe { display: block; max-width: 100%; }
img, video { height: auto; }

/* Form controls inherit the page's typography instead of the OS's. This is a
   normalisation, not a choice: whatever font the builder sets is what shows. */
input, select, textarea, button { font: inherit; color: inherit; }
textarea { resize: vertical; }

figure, blockquote { margin: 0; }

/* [hidden] must win over any display the builder gives an element. */
[hidden] { display: none !important; }

/* ---------- fluid type + space helpers (declared, never applied) ----------
   Two-point clamp: clamp(MIN, MIN + SLOPE*vw, MAX). Both proof builds landed on
   the same shape; the numbers below are their midpoint, i.e. a STARTING POINT.
   Override the endpoints in your stylesheet - identical type scales across two
   prospects is exactly the sameness this toolkit must not cause. */
:root {
  --tk-step-body:  clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  --tk-step-lead:  clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --tk-step-h3:    clamp(1.125rem, 1rem + 0.45vw, 1.4rem);
  --tk-step-h2:    clamp(1.75rem, 1.1rem + 2.4vw, 2.9rem);
  --tk-step-h1:    clamp(1.95rem, 1.05rem + 3.7vw, 4rem);

  /* Page gutter and section rhythm. Same warning applies. */
  --tk-gutter:     clamp(1.25rem, 4vw, 3.5rem);
  --tk-section-y:  clamp(3.5rem, 7vw, 6.5rem);

  /* Content width. A number, not a look - still yours to change. */
  --tk-wrap: 1240px;
}

/* ---------- accessibility affordances ------------------------------------- */

/* Focus ring. currentColor on purpose: it inherits whatever the element's text
   colour is, so it is legible everywhere and matches nothing in particular.
   Override with your accent in style.css. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

/* Skip link. Off-screen until focused; give it a background/padding in your own
   stylesheet or it will land as unstyled text over the page. */
.tk-skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; }
.tk-skip-link:focus { left: 0; top: 0; }

/* Screen-reader-only text that stays readable to AT. */
.tk-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Same, but revealed on focus (skip links, "jump to results"). */
.tk-visually-hidden.tk-focusable:focus,
.tk-visually-hidden.tk-focusable:focus-within {
  position: static;
  width: auto; height: auto;
  margin: 0; overflow: visible;
  clip: auto; clip-path: none;
  white-space: normal;
}

/* Motion. Honour the OS setting globally so no later animation can override it. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- mobile-nav / overlay behaviour hooks --------------------------
   BEHAVIOUR CONTRACT, NOT A NAVIGATION DESIGN. Both proof builds wrote their
   own nav look; only the state plumbing was identical, so only that is here.

   Markup:
     <header class="tk-nav" data-tk-nav data-tk-nav-open="false">
       <button class="tk-nav-toggle" type="button"
               aria-expanded="false" aria-controls="nav-panel">…</button>
       <nav class="tk-nav-panel" id="nav-panel">…</nav>
     </header>

   Script (yours - a dozen lines, and the a11y details differ per build):
     toggle click  -> flip data-tk-nav-open + aria-expanded
     link click    -> set both back to false
     Escape        -> close and return focus to the toggle

   Collapse rule: WHERE the panel collapses is a design decision, so it is not
   here. Put this in your own stylesheet, at your own breakpoint:
     @media (max-width: 60em) {
       [data-tk-nav][data-tk-nav-open="false"] .tk-nav-panel { display: none; }
     }
   Below is only the part with no visual opinion. */

/* Scroll lock for an open nav/modal. Toggle this class on <body> from your
   script. Padding compensation prevents the layout jump when the scrollbar
   disappears on desktop. */
.tk-scroll-lock { overflow: hidden; padding-right: var(--tk-scrollbar-w, 0px); }

/* A toggle that is only meaningful with JS: hide it when JS did not run, so a
   no-JS visitor is never shown a dead control. Add class "tk-js" to <html>
   from an inline script at the top of <body>. */
html:not(.tk-js) .tk-nav-toggle { display: none; }