/* ==========================================================================
   02-RESET.CSS
   A minimal, modern reset — not a full "zero-out everything" reset like
   normalize.css. The goal is to remove browser inconsistencies that get in
   the way (box-sizing, default margins, image sizing) while leaving useful
   defaults (like list semantics for screen readers) alone unless a
   component explicitly needs to opt out.
   ========================================================================== */

/* Border-box sizing everywhere — makes width/padding math predictable. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margins that vary by browser and element. Spacing is
   handled deliberately via component CSS, not inherited browser defaults. */
html,
body,
h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote,
dl, dd {
  margin: 0;
}

/* Core body defaults. */
html {
  /* Prevents iOS text auto-inflation on rotate; also sets rem baseline. */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Media defaults — images/video never overflow their container. */
img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Form elements inherit typography instead of using browser UI fonts. */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Buttons reset to look intentional, not like default browser chrome. */
button {
  background: none;
  border: none;
  cursor: pointer;
}

/* Remove list styling only where a component explicitly marks a list as
   "unstyled" — default list semantics (bullets/numbers) are preserved for
   any list in body content that doesn't opt out, since that matters for
   both usability and accessibility (screen readers announce list role
   more reliably when default styling is intact in some browsers). */
ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

/* Links: no automatic color/underline assumptions — component CSS decides. */
a {
  color: inherit;
  text-decoration: none;
}

/* Prevent long words/URLs from breaking layout. */
p,
li {
  overflow-wrap: break-word;
}

/* Tables (used minimally, if at all) — collapse borders by default. */
table {
  border-collapse: collapse;
  border-spacing: 0;
}