/* ==========================================================================
   reset.css — Perdana Dental
   --------------------------------------------------------------------------
   A modern, minimal reset. Its only job is to remove browser inconsistencies.
   No colours, no fonts, no spacing decisions live here — those belong in
   tokens.css and base.css. Keeping the layers separate is what makes the
   codebase readable six months from now.
   ========================================================================== */

/* 1. Border-box sizing everywhere.
   By default, width: 300px + padding: 20px = a 340px element, which is a
   constant source of layout bugs. border-box makes width mean width.
   The *::before/::after selectors catch pseudo-elements too. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Strip default margins.
   Browsers apply margins to headings, paragraphs, lists and more, and the
   values differ between browsers. We remove them all and add spacing back
   deliberately in base.css. */
* {
  margin: 0;
}

/* 3. Root behaviour.
   - text-size-adjust stops iOS Safari inflating text when you rotate to
     landscape, which silently breaks carefully sized type.
   - scroll-behavior: smooth makes in-page anchor links glide. It is wrapped
     in a motion query below so it does not trigger vestibular discomfort in
     users who have asked their OS for reduced motion. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* 4. Body defaults.
   min-height: 100svh uses the *small* viewport height unit, which accounts
   for mobile browser toolbars appearing and disappearing. 100vh causes the
   well-known "content jumps when the address bar hides" bug on iOS. */
body {
  min-height: 100svh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* 5. Media elements.
   display: block removes the mysterious ~4px gap under images, which is
   actually the descender space of the line box they sit on.
   max-width: 100% stops any image breaking out of its container — this one
   declaration prevents most mobile horizontal-scroll bugs. */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* 6. Form elements do not inherit typography by default. Make them. */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* 7. Long words (URLs, medical terms like "temporomandibular") must not
   force horizontal scrolling on a narrow phone. */
p,
h1,
h2,
h3,
h4,
h5,
h6,
li {
  overflow-wrap: break-word;
}

/* 8. Headings inherit their weight from base.css rather than the browser's
   bold default, so we control the type scale in one place. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/* 9. Lists used for navigation should not announce as lists with bullets.
   We remove list styling only where we explicitly opt in with a class, so
   real content lists (symptoms, aftercare steps) keep their semantics. */
ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

/* 10. Respect a reduced-motion preference globally.
    Note we use 0.01ms rather than 0s: some scripts listen for transitionend
    and would never fire if the duration were exactly zero. */
@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;
  }
}