/* =====================================================================
 * LV site-runtime — base.css (MECHANISM ONLY)
 * =====================================================================
 *
 * THE ONE RULE FOR THIS FILE:
 *   If a property is an AESTHETIC CHOICE, it does not belong here.
 *
 * Forbidden in this file, permanently: colors, background-color, font-family,
 * font-size, font-weight, letter-spacing, line-height (beyond the reset's
 * inherit), spacing/padding/margin scales, breakpoints, media queries for
 * layout, borders, border-radius, box-shadow, gradients, transition durations,
 * easing curves, translate distances, opacity values that read as "the look".
 *
 * Allowed, and only because correctness depends on it:
 *   - a minimal reset (box-sizing, media defaults)
 *   - :focus-visible plumbing (NOT the ring's appearance)
 *   - prefers-reduced-motion neutralisation
 *   - the drawer's closed-state hit-testing removal
 *   - the language toggle's single hide mechanism
 *   - the reveal's armed initial state
 *   - scroll-padding tied to the measured header height
 *
 * Every site loads this FIRST, then its own bespoke stylesheet, which is where
 * 100% of the visual identity lives. Nothing here should ever make two sites
 * look alike.
 * ===================================================================== */

/* ---- 1. minimal reset ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
/* Defensive backstop: a fixed/off-canvas element must never create a
   horizontal scroll track. Not a layout decision. */
html, body { overflow-x: hidden; }

/* ---- 2. focus visibility -------------------------------------------- */
/* Mechanism only: suppress the mouse-click focus ring, guarantee a keyboard one.
   `outline: auto` hands the ring's appearance back to the user agent — no width,
   no color, no offset is asserted here. The RING'S APPEARANCE is the designer's
   job: override :focus-visible in the site stylesheet. */
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: auto; }

/* ---- 3. reduced motion ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- 4. sticky-header ↔ anchor scroll -------------------------------- */
/* The runtime measures [data-lv-header] and writes --lv-header-h. This makes
   in-page #anchor jumps land below the header instead of under it. */
html { scroll-padding-top: var(--lv-header-h, 0px); }

/* ---- 5. scroll lock (set by the runtime while a drawer is open) ------ */
html.lv-scroll-locked, html.lv-scroll-locked body { overflow: hidden; }

/* ---- 6. drawer closed state ----------------------------------------- */
/* A panel moved off-screen with transform alone is still a full-size,
   hit-testable box — the documented cause of phantom scroll capture on mobile
   Safari. Closed => not visible, not hit-testable, not tabbable.
   The designer supplies position/size/transform/transition themselves. */
[data-lv-drawer][data-lv-open="false"] {
  visibility: hidden;
  pointer-events: none;
}
[data-lv-drawer][data-lv-open="true"] {
  visibility: visible;
  pointer-events: auto;
}
/* If the designer transitions the panel, `visibility` must be in the
   transition list or the panel vanishes before the slide-out finishes. This
   line only guarantees the property is animatable; duration/easing stay the
   designer's. */
[data-lv-drawer] { transition-property: transform, opacity, visibility; }
[data-lv-drawer-backdrop][data-lv-open="false"] { visibility: hidden; pointer-events: none; }
[inert] { pointer-events: none; }

/* ---- 7. language toggle — ONE mechanism, hide-only ------------------- */
/* The runtime marks the inactive language element with [data-lv-hidden].
   There is deliberately NO matching `display: block` rule for the active one:
   writing one is what used to override `.btn { display: inline-flex }` and
   break flex-centred buttons. The shown element keeps whatever display its own
   stylesheet gives it.
   NEVER also put a native `hidden` attribute on a [data-lang-content] element —
   two mechanisms on one element is a documented permanent-invisibility bug.
   The runtime strips a stray `hidden` at boot as a safety net. */
[data-lv-hidden] { display: none !important; }

/* ---- 8. reveal-on-scroll initial state ------------------------------- */
/* `lv-reveal-armed` is added by the runtime only after JS is confirmed
   running, and is removed when everything is force-revealed. So: no JS, or
   reduced motion, or a capture tool passing ?lvreveal=off / setting
   html[data-lv-reveal-mode="off"] => content is fully visible, never blank.
   Only opacity is claimed here; the movement, duration and easing of the
   reveal are the designer's, hung off [data-lv-reveal-in] / .is-visible. */
html.lv-reveal-armed [data-lv-reveal]:not([data-lv-reveal-in]) { opacity: 0; }