/* ============================================================
   Visitech — Base (reset + base typography)
   The slim foundation every page stands on. Stands on tokens.css.
   New pages link this directly: tokens → base → components → chrome → page.
   The legacy DS-showcase sheet (styles.css) @imports this so older
   prototypes keep one source of truth for the reset. (split 2026-06-12)
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--space-9) + var(--wp-admin--admin-bar--height, 0px)); }   /* clears the fixed header on anchor jumps, and the toolbar above it when logged in */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }

/* Harmonized line icons — consistent round caps + joins on every stroke icon, across all pages.
   stroke-width stays size-scaled per icon (~1.6 @ 10px, 1.8 @ 26px, 2 @ 16–20px); filled icons
   (fill="currentColor") are untouched. (Petter 2026-06-18) */
svg[fill="none"][stroke] { stroke-linecap: round; stroke-linejoin: round; }

sup { font-size: 0.55em; vertical-align: 0.55em; line-height: 0; }
sub { font-size: 0.55em; vertical-align: -0.2em; line-height: 0; } /* the pair of sup: editors can set both from 2026-09-24 */
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
/* strip native field chrome (e.g. WebKit's search-field frame) so our own border/bg is the only frame;
   checkboxes/radios keep their native look. (Petter 2026-06-18) */
input:not([type="checkbox"]):not([type="radio"]), textarea { -webkit-appearance: none; appearance: none; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
a { color: var(--color-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--color-link-hover); text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
hr { border: none; height: 1px; background: var(--color-divider); margin: var(--space-6) 0; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  color: var(--color-text-brand);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
}
/* x --vt-title-scale: 1 by default, below 1 for ja/zh (tokens.css, CJK). */
h1 { font-size: calc(var(--fs-4xl) * var(--vt-title-scale, 1)); }
h2 { font-size: calc(var(--fs-3xl) * var(--vt-title-scale, 1)); }
h3 { font-size: calc(var(--fs-xl) * var(--vt-title-scale, 1)); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-base); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--color-text-muted); }

p { margin: 0 0 var(--space-4); }
.lead { font-size: var(--fs-lg); font-weight: var(--fw-light); color: var(--color-text-muted); line-height: var(--lh-snug); }
.small { font-size: var(--fs-sm); }
.caption {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-subtle);
  font-weight: var(--fw-bold);
}

code, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
code {
  background: var(--color-bg-muted);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--color-text-brand);
}
pre {
  background: var(--color-purple-black);
  color: #e8e0ee;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}
pre code { background: transparent; padding: 0; color: inherit; }

/* The micro sign survives an uppercase transform.

   `text-transform: uppercase` is a Unicode case mapping, not a font trick, and
   U+00B5 MICRO SIGN maps to U+039C GREEK CAPITAL LETTER MU — a character every
   Latin font draws as a plain "M". So an eyebrow reading "LUXBEAM® LRS-µSLA"
   renders "LRS-MSLA", and the author who typed the µ is told, wrongly, that the
   editor corrected it (Kurt, 2026-09-22). U+03BC GREEK SMALL LETTER MU maps to
   the same capital, so it is no escape.

   CSS cannot exempt one character from the transform, so the character is
   wrapped instead — at render, never in the content, the same call
   space_line_breaks() makes: the same names exist in ja and zh through
   Polylang, and a pass over post_content would hold only until the next
   translation lands. Kept here rather than in a block, because every uppercase
   label in the system has this hole — a spec label reading "Pitch (µm)" would
   lose it just as readily. */
.vt-nocase { text-transform: none; }

/* Document pages (templates/page-titled.html): legal text and other plain
   pages with no hero. The header is fixed, so the top padding carries its
   height plus air, as the article and event heads do; the template's old flat
   3rem put the title under the header (2026-09-30). */
.vt-doc { padding-top: calc(var(--vt-header-height, 104px) + clamp(20px, 3vw, 40px)); }