/* ============================================================================
   Manifest Tier 1 — Design System
   reset.css
   ----------------------------------------------------------------------------
   Modern minimal CSS reset. Synthesis of Andy Bell (modern-css-reset) +
   Josh Comeau (custom CSS reset) + Manifest-specific defaults.

   Load order: reset.css → fonts.css → base.css → components.css → utilities.css

   Rules of engagement:
   - This file MUST NOT contain hex color literals except where a CSS var
     is unavailable at reset time. The ::selection rule uses var(--color-primary)
     which is defined in base.css — safe because reset.css is always loaded
     BEFORE base.css and ::selection only applies once a selection exists
     (post-paint).
   - No component-specific styling here. That belongs in components.css.
   - Keep this file under ~80 lines so the cascade origin is easy to debug.
   ============================================================================ */

/* 1. Use a more-intuitive box-sizing model on all elements + pseudos. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Remove default margin from all elements. Reintroduced selectively
      in base.css element-defaults section (p, headings, lists, etc). */
* {
  margin: 0;
}

/* 3. Allow percentage-based heights in the application + sane defaults
      on the root. text-size-adjust prevents iOS Safari rotating-to-landscape
      from inflating body font-size unpredictably. tab-size for <pre>. */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
}

/* 4. Smooth scroll only for users who haven't opted out of motion.
      (CSS-only guard — no JS needed.) */
@media (prefers-reduced-motion: no-preference) {
  html:focus-within {
    scroll-behavior: smooth;
  }
}

/* 5. Body baseline: full-viewport min-height, better text rendering on macOS
      + iOS, optimized legibility (kerning + ligatures). Font-family + color
      are set in base.css using design tokens. */
body {
  min-height: 100vh;
  min-height: 100dvh; /* dynamic viewport unit for mobile browsers w/ chrome */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 6. Make media elements behave like block-level content by default.
      max-width: 100% prevents overflow; height: auto preserves aspect
      ratio when one dimension is constrained. */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 7. Inherit fonts on form controls (browsers refuse to by default). */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* 8. Strip default button chrome — every <button> styled by component
      classes in components.css or raw-element styling in base.css. */
button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* 9. Anchors inherit color; component classes (.site-nav-link, .btn) and
      base.css element rule re-style links contextually. */
a {
  color: inherit;
  text-decoration: none;
}

/* 10. List reset that PRESERVES a11y — only remove markers when the author
       explicitly opts out via list-style: none AND role="list".
       (Andy Bell pattern: VoiceOver stops announcing lists when list-style
       is removed; role="list" forces it back.) */
ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

/* 11. Avoid orphan text-overflow on small viewports for long titles/heads. */
h1, h2, h3, h4, h5, h6, p {
  overflow-wrap: break-word;
}

/* 12. Table baseline. Spacing handled in base.css. */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 13. Drop ugly default focus ring — :focus-visible ring is set globally
       in base.css using --color-primary token. Never strip focus from
       :focus-visible. */
:focus {
  outline: 0;
}

/* 14. Honor reduced-motion preference site-wide. Caps animation + transition
       to near-zero so devs never have to remember the override per-component.
       Components can still opt back into motion via prefers-reduced-motion:
       no-preference media query. */
@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;
  }
}

/* 15. ::selection uses brand primary so per-template theme.css swap reflows
       selection color for free. var(--color-primary) is defined in base.css. */
::selection {
  background: var(--color-primary);
  color: #fff;
}

/* 16. [hidden] sometimes loses against display utilities; force it. */
[hidden] {
  display: none !important;
}

/* 17. Root stacking context predictability — prevents transformed ancestors
       from breaking position: fixed on modals/drawers. */
#root,
#__next,
#main {
  isolation: isolate;
}