/* =============================================================================
   QuickCare Design System — RESET   (@layer qc.reset — lowest priority)
   -----------------------------------------------------------------------------
   A small, modern, accessible reset. Wrapped in the qc.reset layer AND using
   :where() (zero specificity) for anything that could alter legacy layout, so
   the existing unlayered Bootstrap Reboot + base.css always win while pages are
   still on the legacy stack. On migrated / design-system-only pages it provides
   a sane baseline. Tokens come from tokens.css.
   ========================================================================== */
@layer qc.reset {

  /* Predictable sizing everywhere (matches Bootstrap's value → no legacy change). */
  *, *::before, *::after { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
  }

  /* Zero-spec resets: overridden by ANY existing rule, including bare-element
     legacy selectors, so they cannot regress current pages. */
  :where(body) { margin: 0; }
  :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) { margin: 0; }
  :where(ul, ol) { margin: 0; }

  /* Media: keep inside its box. height:auto only when constrained, to avoid
     squashing elements that set an explicit width. */
  :where(img, picture, svg, video, canvas) { max-width: 100%; }
  :where(img, picture, svg, video) { height: auto; }
  :where(svg) { vertical-align: middle; }

  /* Forms inherit typography by default (overridable). */
  :where(input, button, textarea, select) { font: inherit; color: inherit; }

  /* Avoid text overflow on long words/URLs. */
  :where(h1, h2, h3, h4, h5, h6) { overflow-wrap: break-word; }

  /* Anchored sections clear the sticky header when jumped to. */
  :where(:target) { scroll-margin-top: calc(var(--qc-header-height, 64px) + 1rem); }

  /* Accessible focus baseline (layered → legacy focus styles win where set). */
  :where(:focus-visible) {
    outline: var(--qc-focus-outline-width, 2px) solid var(--qc-color-primary, #6a3de8);
    outline-offset: 2px;
  }

  /* Programmatic focus targets (e.g. a skip-link's <main id="main" tabindex="-1">)
     receive focus but are not interactive, so suppress their focus ring. */
  :where([tabindex="-1"]):focus { outline: none; }

  /* Respect reduced-motion globally (intentional !important — accessibility). */
  @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;
    }
  }
}