/* ---------------------------------------------------------------------------
   Devnox Advisory — document-level styles.
   Reset, page defaults, and the handful of things that belong to the document
   rather than to any one component.
--------------------------------------------------------------------------- */

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html { scroll-behavior: smooth; }

/* The old `body { overflow-x: hidden }` is deliberately gone. It was hiding a
   781px-wide nav on a 375px screen rather than fixing it — the language
   toggle and the primary CTA were simply off-screen and unreachable. Without
   it, any future overflow shows up as a scrollbar instead of silently
   swallowing content. */

::selection { background: var(--ink); color: var(--bone); }

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

/* Fixed nav — leave room above anchor targets. */
section[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }

/* Focus: visible, on-brand, and only for keyboard users. */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- visually hidden -----------------------------------------------------
   Text that is read aloud but never seen. Used to append "(opens in a new
   tab)" to links that do, which is the WCAG G201 technique: it extends the
   link's accessible name instead of replacing it, so voice-control users can
   still say the visible label to activate it — which aria-label would break.

   Not `display: none` or `visibility: hidden`, since both remove the text
   from the accessibility tree along with the display. */
.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;
}

/* --- skip link ----------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--r-pill);
  transition: top 0.15s;
}
.skip-link:focus { top: 12px; }

/* --- reduced motion ------------------------------------------------------
   Covers the smooth scroll, the 0.65s translation-card flip, and every
   hover/state transition in one place. */
@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;
  }
}