/* ============================================================
   EasyAutoVerkoop — 03-base.css — element-defaults, a11y, motion opt-in
   Versie 1.0.1 · 2026-09-14
   Laadt ná GP's eigen element-styling; element-selectors winnen
   op volgorde, niet op specificiteit.
   ============================================================ */

html {
  scroll-padding-block-start: var(--eav-header-h, 5rem);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--eav-ff-body);
  font-size: var(--eav-fs-400);
  line-height: var(--eav-lh-base);
  color: var(--eav-clr-text);
  background-color: var(--eav-clr-bg);
  -webkit-font-smoothing: antialiased;
}

/* Koppen: fluid schaal uit tokens. GP's Customizer-typografie wordt hier
   bewust overschreven; koppen-groottes beheren we in 01-tokens.css. */
h1, h2, h3, h4 {
  margin-block: 0;
  font-family: var(--eav-ff-heading);
  line-height: var(--eav-lh-tight);
  letter-spacing: -0.02em;
  color: var(--eav-clr-text);
}
h1 { font-size: var(--eav-fs-800); font-weight: 800; }
h2 { font-size: var(--eav-fs-700); font-weight: 800; }
h3 { font-size: var(--eav-fs-600); font-weight: 700; }
h4 { font-size: var(--eav-fs-500); font-weight: 700; }

/* Tekstzetting */
:where(h1, h2, h3, h4) { text-wrap: balance; }
:where(p, li, dd, figcaption) { text-wrap: pretty; }

/* Ritme komt uit Eav-flow / Eav-stack, niet uit element-margins.
   :where() = specificiteit 0, zodat .Eav-flow > * + * altijd wint. */
:where(.entry-content, .site-content) :where(p, ul[class], ol[class]) { margin-block: 0; }
ul[class], ol[class] { padding-inline-start: 0; list-style: none; }

/* Geen automatische afbreking in korte teksten (cards, chips); alleen Eav-prose hyphenateert */
p, li, dd { hyphens: manual; }

img, svg { display: block; max-inline-size: 100%; block-size: auto; }

a { color: var(--eav-clr-primary); text-underline-offset: 0.15em; }
a:hover { color: var(--eav-clr-primary-hover); }

::selection { background-color: var(--eav-clr-selection); }

/* Focus — globaal, lage specificiteit zodat componenten kunnen verfijnen */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--eav-clr-focus);
  outline-offset: 2px;
}
main:focus { outline: none; }

.Eav-prose { max-inline-size: 65ch; }
:lang(nl) .Eav-prose { hyphens: auto; }

/* === Skip-link === */
.Eav-skip-link {
  position: absolute;
  inset-block-start: var(--eav-space-s);
  inset-inline-start: var(--eav-space-s);
  z-index: var(--eav-z-tooltip);
  padding: var(--eav-space-xs) var(--eav-space-s);
  background-color: var(--eav-raw-ink);
  color: var(--eav-raw-paper);
  border-radius: var(--eav-radius-sm);
  text-decoration: none;
  transform: translateY(-200%);
}
.Eav-skip-link:focus { transform: translateY(0); }
@media (prefers-reduced-motion: no-preference) {
  .Eav-skip-link { transition: transform var(--eav-transition-fast); }
}

/* === Visually hidden === */
.Eav-visually-hidden:not(:focus):not(:active) {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* === Performance: lange below-the-fold secties === */
.Eav-section-lazy {
  content-visibility: auto;
  contain-intrinsic-block-size: auto 40rem;
}

/* === Runtime-props (prop-for-that) — geregistreerd zodat ze traag
   kunnen interpoleren. Zonder de library blijven de initial-values
   staan en gebeurt er niets. === */
@property --live-local-pointer-x-ratio { syntax: "<number>"; inherits: true; initial-value: 0.5; }
@property --live-local-pointer-y-ratio { syntax: "<number>"; inherits: true; initial-value: 0.5; }