/* =====================================================================
   EvoTechnik — BASE
   Layer 2 of 3 · Sprint 2 · 14 August 2026

   Reset, element defaults, the fluid type scale, layout primitives and
   a small set of utilities.

   Depends on tokens.css. Every value here is a var() — no literal
   colours, sizes or spacing. The only literals permitted are media
   query breakpoints, because custom properties cannot be used in
   @media (see the note at the foot of tokens.css).

   Load order: tokens.css -> base.css -> components.css
   ===================================================================== */


/* =====================================================================
   1. RESET / NORMALISE
   ===================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Must be on html, NOT only on body. When body sets overflow-x and
     html leaves it visible, the value PROPAGATES to the viewport and
     body itself computes back to visible — so body-only clipping does
     not clip. That is why a 22px header overflow was still widening the
     document at 320px despite the rule on body. Keep both.
     Verified with getComputedStyle: html=visible, body=hidden. */
  overflow-x: hidden;
}

/* Respect a user's reduced-motion preference — brand.md §9 leans on
   visible motion for focus and hover, so it must be switchable off. */
@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;
  }
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol {
  margin: 0;
}

ul, ol {
  padding: 0;
}

/* Only strip list markers where a list is being used for layout.
   Prose lists keep their markers. */
ul[class],
ol[class] {
  list-style: none;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

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

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

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Never let a long unbroken string force the page sideways.
   brand.md §7: no horizontal page scroll at any width. */
h1, h2, h3, h4, h5, h6, p, li, td, th, dd, dt, figcaption {
  overflow-wrap: break-word;
}


/* =====================================================================
   2. BODY DEFAULTS — brand.md §4 (light-dominant), §5 (typography)
   ===================================================================== */

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Belt and braces against a stray wide child. */
  overflow-x: hidden;
}


/* =====================================================================
   3. TYPE SCALE — brand.md §5
   Headings are Archivo with tight tracking; body is Barlow.
   ===================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  letter-spacing: var(--ls-heading);
  line-height: 1.2;
  color: var(--black);
}

h1 { font-size: var(--fs-h1); font-weight: var(--fw-h-bolder); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-h-bolder); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-h-bold);   }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-h-bold);   }
h5 { font-size: var(--fs-h5); font-weight: var(--fw-h-bold);   }

/* h6 is the only uppercase heading — a section eyebrow, not structure.
   Used for footer column titles and small sub-group labels. */
h6 {
  font-size: var(--fs-h6);
  font-weight: var(--fw-h-bold);
  letter-spacing: var(--ls-h6);
  text-transform: uppercase;
}

p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* Secondary body copy. */
.text-muted { color: var(--grey); }
.text-ink-2 { color: var(--ink-2); }

small,
.text-small {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: 1.5;
}

/* Uppercase field label / eyebrow — brand.md §5, §8 (Forms). */
.label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--grey);
}

strong, b { font-weight: var(--fw-bold); }


/* =====================================================================
   4. LINKS
   ===================================================================== */

a {
  color: var(--blue);
  text-decoration: none;
  transition: color var(--t-fast);
}

a:hover {
  color: var(--blue-hover);
  text-decoration: underline;
}

/* Prose links stay underlined at rest — colour alone must not be the only
   signal that something is a link (brand.md §9).

   SCOPED TO PARAGRAPHS ONLY, deliberately. This rule used to include
   `li > a`, which silently underlined every navigation item on the site:
   the main nav, the mobile drawer, the category menu, the footer columns
   and pagination are all <li><a> lists. Because those component classes
   set colour but not text-decoration, the element selector won and the
   underline came back no matter what the nav rules said.

   If a genuine prose list ever needs underlined links, add the underline
   to that block's own class — do not widen this selector again. */
p > a {
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* =====================================================================
   5. FOCUS — brand.md §9: visible keyboard focus EVERYWHERE.

   :focus-visible only, so a mouse click does not leave a ring, but a
   keyboard user always sees one. Never remove this without a
   replacement of equal or better visibility.
   ===================================================================== */

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Form controls get the softer ring instead of a hard outline. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: var(--focus-ring);
}


/* =====================================================================
   6. LAYOUT PRIMITIVES — brand.md §6

   .container   caps content at 1240px with fluid side padding
   .section     fluid vertical rhythm between page bands
   ===================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--section-pad-y);
}

/* Alternating band background — brand.md §4. */
.section--soft { background: var(--bg-soft); }
.section--dark {
  background: var(--bg-dark);
  color: var(--white);
}

/* Headings invert inside a dark band. */
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6 {
  color: var(--white);
}

.section--dark .text-muted { color: var(--grey-light); }

/* Remove the doubled gap when two bands of the same colour meet. */
.section--soft + .section--soft,
.section--dark + .section--dark {
  padding-block-start: 0;
}


/* =====================================================================
   7. UTILITIES
   ===================================================================== */

/* Visually hidden but available to screen readers. Use for the label of
   an icon-only control when aria-label is not appropriate. */
.visually-hidden {
  position: absolute !important;
  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;
}

/* Vertical rhythm between siblings. Set --stack-gap to any spacing
   token; defaults to 16px.
     <div class="stack" style="--stack-gap: var(--sp-24)"> */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--sp-16));
}

/* Horizontal group that wraps rather than overflowing. */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--sp-12));
}

/* Wraps a wide child (table, code block, diagram) so IT scrolls instead
   of the page — brand.md §7. */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Skip link — first focusable element on every page. */
.skip-link {
  position: absolute;
  top: var(--sp-8);
  left: var(--sp-8);
  z-index: var(--z-toast);
  padding: var(--sp-8) var(--sp-16);
  background: var(--blue);
  color: var(--white);
  font-weight: var(--fw-bold);
  border-radius: var(--r-sm);
  transform: translateY(-200%);
  transition: transform var(--t-fast);
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--white);
  text-decoration: none;
}

/* Text alignment. */
.text-center { text-align: center; }

/* Spacing escape hatches, on the scale only. */
.mt-0  { margin-top: 0; }
.mb-0  { margin-bottom: 0; }
.mb-8  { margin-bottom: var(--sp-8); }
.mb-16 { margin-bottom: var(--sp-16); }
.mb-24 { margin-bottom: var(--sp-24); }
.mb-32 { margin-bottom: var(--sp-32); }


/* =====================================================================
   8. RESPONSIVE GRID HELPER — brand.md §7

   Reflows without media queries. Set --col-min per grid:
     Product grid  1 / 2 / 4  ->  --col-min: 250px
     Category grid 2 / 3 / 6  ->  --col-min: 150px
   ===================================================================== */

.grid-auto {
  display: grid;
  gap: var(--grid-gap, var(--sp-20));
  grid-template-columns: repeat(auto-fill, minmax(var(--col-min, 250px), 1fr));
}


/* =====================================================================
   9. PRINT
   ===================================================================== */

@media print {
  body { background: var(--white); color: var(--black); }
  .skip-link { display: none; }
  a { color: var(--black); text-decoration: underline; }
}