/* ==========================================================================
   Viola — Base reset & typography
   ========================================================================== */

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

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-fa);
  font-size: var(--fs-base);
  line-height: 1.9;
  color: var(--color-text);
  background: var(--color-surface-page);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Scroll locked while the cookie loader is chomping (loader.js toggles it) */
body.is-loading {
  overflow: hidden;
}

img,
svg {
  max-width: 100%;
  display: block;
}

/* 2026-09-08: every <img> now ships width/height attributes so the browser can
   reserve its box before the file arrives (Lighthouse "Image elements do not
   have explicit width and height" → CLS). Those attributes map to CSS
   width/height presentational hints, and most image rules here set only the
   inline size — which left the attribute height stretching the image (the
   parachutist went 164x176 → 203x622). This restores auto height at the
   lowest possible specificity: the ten class-based rules that DO set an
   explicit image height (.category-tab img, .site-header__logo img, …) still
   win. NOT merged into the rule above on purpose — inline <svg> elements
   (loader, hero cookie) must keep their own sizing. */
img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  line-height: 1.45;
  /* DS: headings carry brand purple; body copy stays ink. Components on
     dark/purple surfaces re-declare their own color (footer, CTA banner). */
  color: var(--color-brand-primary);
  /* no lonely last word on multi-line headings (client 2026-07-15) —
     lines get evened out; older browsers simply ignore this */
  text-wrap: balance;
}

/* same orphan fix for body copy: "pretty" only nudges the last line so a
   single word never sits alone (no visual change otherwise) */
p,
figcaption,
li {
  text-wrap: pretty;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

::selection {
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
}

:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 3px;
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Copy still awaiting final client text keeps this class purely as a grep
   marker ("placeholder-copy") — no visual badge, the site must read finished. */
.placeholder-copy {
  position: relative;
}

/* ==========================================================================
   Pattern decor utilities — the brand VA-pattern as a full-bleed band.
   2026-07-08 (client): patterns must run edge-to-edge (right to left), keep
   their old height, and drift slowly like the marquee — no half-page corners.
   Usage: <div class="pattern-band pattern-band--top" aria-hidden="true">
   inside any position:relative + overflow:hidden section. Pure decoration:
   ink at DS texture opacity (4–8%), masked so it melts into the page
   vertically instead of ending on a hard edge.
   ========================================================================== */
.pattern-band {
  position: absolute;
  inset-inline: 0;
  block-size: min(300px, 40vw);
  background-image: var(--pattern-url);
  background-size: 340px auto;
  opacity: 0.07;
  pointer-events: none;
  /* the slow, marquee-like drift (keyframes in css/animations.css) */
  animation: pattern-drift 60s linear infinite;
  -webkit-mask-image: linear-gradient(var(--fade, to bottom), #000 0%, #000 30%, transparent 100%);
  mask-image: linear-gradient(var(--fade, to bottom), #000 0%, #000 30%, transparent 100%);
}

.pattern-band--top { inset-block-start: 0; }
.pattern-band--bottom { inset-block-end: 0; --fade: to top; }

.pattern-band--strong {
  opacity: 0.1;
}

/* Light variant for dark surfaces (footer, CTA banner) */
.pattern-band--inverse {
  filter: brightness(0) invert(1);
  opacity: 0.08;
}