/* ============================================================
   reset.css — Flex Europa · finaldesign  (Engineered Motion)
   LOADS FIRST, before tokens and everything else.
   Canada HiTech reset + the seven EtqanShop Hard-Won Fixes
   + the prefers-reduced-motion block. Reset only — no project
   styling lives here.
   ============================================================ */

/* Box-sizing inheritance — prevents width/padding calc bugs */
*, *::before, *::after { box-sizing: border-box; }

/* Remove default margin and padding */
* { margin: 0; padding: 0; }

/* Body baseline */
body {
  min-block-size: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Media — responsive by default */
img, picture, video, canvas, svg {
  display: block;
  max-inline-size: 100%;
}

/* Lists with classes — keep semantics, drop bullets */
ul[class], ol[class] { list-style: none; }

/* Links — project controls underline */
a { text-decoration: none; color: inherit; }

/* Headings — reset weight/size, project sets explicitly */
h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: inherit; }

/* Paragraphs — wrap long words */
p { overflow-wrap: break-word; }

/* Buttons — most commonly missed reset */
button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;   /* browser does NOT inherit font on buttons */
  color: inherit;
}

/* ETQANSHOP LESSON — Wave A
   Form elements do NOT inherit font-family; without this they render
   in the browser UI font once a framework's normalize is removed. */
input, select, textarea, optgroup { font: inherit; color: inherit; }

/* ETQANSHOP LESSON — Wave A
   <input type="search"> shows un-styleable WebKit/Blink decorations
   and extra padding without this. */
input[type="search"] { -webkit-appearance: none; appearance: none; }

/* ETQANSHOP LESSON — Wave A — <address> renders italic by default. */
address { font-style: normal; }

/* ETQANSHOP LESSON — Wave B
   [hidden] is overridden by display:flex/grid without !important.
   This is an HTML contract; nothing should override it. */
[hidden] { display: none !important; }

/* ETQANSHOP LESSON — Wave D — <legend> ignores the normal box model. */
legend { display: table; max-inline-size: 100%; padding: 0; white-space: normal; }

/* Fieldset — kill default border and padding */
fieldset { border: none; padding: 0; }

/* Tables — collapse borders */
table { border-collapse: collapse; border-spacing: 0; }

/* Textarea — vertical resize only */
textarea { resize: vertical; }

/* Remove outline on non-keyboard focus — replaced by :focus-visible in base.css */
:focus:not(:focus-visible) { outline: none; }

/* HR — consistent across browsers */
hr {
  border: none;
  border-block-start: 1px solid var(--color-border);
  margin-block: var(--space-lg);
}

/* Details/Summary — pointer + remove default marker */
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }

/* Reduced motion — kill animations for users who opt out */
@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;
  }
}