/*
 * reset.css
 * Purpose: low-specificity structural reset with accessibility-safe defaults.
 * Scope: keep only UA normalization. Put theme/branding in style.css or components.css.
 */

/* 1) Global box model */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2) Document-level safety */
:root {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
}

/* 3) Text blocks: remove UA margins only */
:where(h1, h2, h3, h4, h5, h6, p, blockquote, figure, pre, address, dl, dd) {
  margin: 0;
}

/* Preserve semantic list markers by default.
   If you need an unstyled list, explicitly set role="list". */
:where(ul[role="list"], ol[role="list"]) {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 4) Media and embedded content */
:where(img, picture, svg, video, canvas, iframe, embed, object) {
  max-inline-size: 100%;
  block-size: auto;
}

:where(iframe) {
  border: 0;
}

/* 5) Tables */
:where(table) {
  border-collapse: collapse;
  border-spacing: 0;
}

:where(caption, th) {
  text-align: inherit;
}

/* 6) Forms: inherit typography, keep native affordances */
:where(button, input, select, textarea),
::file-selector-button {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

:where(button, select) {
  text-transform: none;
}

:where(textarea) {
  margin: 0;
}

:where(input[type="search" i]) {
  -webkit-appearance: textfield;
}

:where(input:is([type="radio" i], [type="checkbox" i])) {
  margin: 0;
}

:where(fieldset) {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
}

:where(legend) {
  padding: 0;
}

::placeholder {
  opacity: 1;
}

/* 7) Interaction */

/* Do not remove outlines. Only adjust offset for visibility. */
:where(:focus-visible) {
  outline-offset: 2px;
}

[tabindex="-1"]:focus {
  outline: none !important;
}

/* 8) State and utility */
:where([hidden]:not([hidden="until-found" i])) {
  display: none !important;
}

/* 9) Accessibility: respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/*
 * Recommended to keep OUT of reset.css (move to style.css/components.css etc):
 * - font-family, font-size scale, line-height tokens
 * - brand colors, surface/background colors
 * - button/input border, radius, and fill design
 * - layout spacing rules and component-level typography
 * - page-height layout rules (100vh / 100dvh / 100dvb)
 * - link decoration thickness/offset and cursor styling
 */