/* ============================================================
   EasyAutoVerkoop — 04-components.css — typografie, knoppen, cards,
   chips, formulier, kentekenplaat, media
   Versie 1.4.0 · 2026-09-14
   ============================================================ */

/* === Typografie === */

.Eav-display {
  font-size: clamp(2.4rem, 1.5rem + 4vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.Eav-lead {
  font-size: var(--eav-fs-500);
  line-height: var(--eav-lh-snug);
  max-inline-size: 60ch;
}
.Eav-text-muted { color: var(--eav-clr-text-muted); }
.Eav-text-small { font-size: var(--eav-fs-300); }

/* Highlight in een kop: achtergrond-highlight met ink-tekst.
   Groene tékst op wit haalt 1.75:1 en is verboden. In de editor is dit
   gewoon 'cursief' (<em>) op het woord; de class staat op de kop. */
.Eav-highlight em,
.Eav-mark {
  background-image: linear-gradient(transparent 0 55%, var(--eav-raw-accent) 55% 92%, transparent 92%);
  color: inherit;
  padding-inline: 0.08em;
  font-style: normal;
}

/* === Buttons — tag+class wint van GP's a-styling === */

a.Eav-button,
button.Eav-button,
.Eav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--eav-space-2xs);
  min-block-size: 48px;
  padding-block: var(--eav-space-xs);
  padding-inline: var(--eav-space-m);
  border: var(--eav-border-width) solid transparent;
  border-radius: var(--eav-radius-pill);
  font-family: var(--eav-ff-body);
  font-size: var(--eav-fs-400);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.Eav-button svg { inline-size: 1.15em; block-size: 1.15em; }
.Eav-button:active { translate: 0 1px; }
@media (prefers-reduced-motion: no-preference) {
  .Eav-button {
    transition:
      background-color var(--eav-transition-base),
      color var(--eav-transition-base),
      border-color var(--eav-transition-base),
      box-shadow var(--eav-transition-base),
      translate var(--eav-transition-base);
  }
}

a.Eav-button-primary,
.Eav-button-primary {
  background-color: var(--eav-clr-primary);
  color: var(--eav-clr-text-on-primary);
  box-shadow: var(--eav-shadow-md);
}
a.Eav-button-primary:is(:hover, :focus-visible),
.Eav-button-primary:is(:hover, :focus-visible) {
  background-color: var(--eav-clr-primary-hover);
  color: var(--eav-clr-text-on-primary);
  translate: 0 -1px;
}

/* Accent: groen met ink-tekst. Nooit witte tekst op groen (1.75:1). */
a.Eav-button-accent,
.Eav-button-accent {
  background-color: var(--eav-clr-accent);
  background-image: var(--eav-grad-accent);
  color: var(--eav-clr-text-on-accent);
  box-shadow: var(--eav-shadow-md);
}
a.Eav-button-accent:is(:hover, :focus-visible),
.Eav-button-accent:is(:hover, :focus-visible) {
  background-image: none;
  background-color: var(--eav-clr-accent-hover);
  color: var(--eav-clr-text-on-accent);
  translate: 0 -1px;
}

a.Eav-button-secondary,
.Eav-button-secondary {
  background-color: transparent;
  color: var(--eav-clr-primary);
  border-color: var(--eav-clr-primary);
}
a.Eav-button-secondary:is(:hover, :focus-visible),
.Eav-button-secondary:is(:hover, :focus-visible) {
  background-color: var(--eav-clr-primary);
  color: var(--eav-clr-text-on-primary);
}

a.Eav-button-ghost,
.Eav-button-ghost {
  background-color: transparent;
  color: var(--eav-clr-text);
}
a.Eav-button-ghost:is(:hover, :focus-visible),
.Eav-button-ghost:is(:hover, :focus-visible) {
  background-color: var(--eav-clr-bg-alt);
  color: var(--eav-clr-text);
}

/* Invert: raw-tokens, blijft zichtbaar op elke band */
a.Eav-button-invert,
.Eav-button-invert {
  background-color: var(--eav-raw-paper);
  color: var(--eav-raw-ink);
}
a.Eav-button-invert:is(:hover, :focus-visible),
.Eav-button-invert:is(:hover, :focus-visible) {
  background-color: color-mix(in oklch, var(--eav-raw-paper) 88%, var(--eav-raw-ink));
  color: var(--eav-raw-ink);
}

.Eav-button-lg    { min-block-size: 56px; padding-inline: var(--eav-space-l); font-size: var(--eav-fs-500); }
.Eav-button-block { inline-size: 100%; }

/* === Chips (zekerheden) — vinkje via ::before, geen SVG in de markup === */

.Eav-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--eav-space-2xs);
  padding: var(--eav-space-3xs) var(--eav-space-xs);
  border-radius: var(--eav-radius-pill);
  border: var(--eav-border-width) solid var(--eav-clr-border);
  background-color: color-mix(in oklch, var(--eav-clr-bg) 70%, transparent);
  font-size: var(--eav-fs-300);
  font-weight: 600;
  color: var(--eav-clr-text);
  backdrop-filter: blur(8px);
}
.Eav-chip::before {
  content: "";
  inline-size: 0.55em;
  block-size: 0.3em;
  margin-block-start: -0.15em;
  border-inline-start: 2px solid var(--eav-raw-accent);
  border-block-end: 2px solid var(--eav-raw-accent);
  rotate: -45deg;
}

/* === Borders / radius === */

.Eav-border      { border: var(--eav-border-width) solid var(--eav-clr-border); }
.Eav-radius-sm   { border-radius: var(--eav-radius-sm); }
.Eav-radius-md   { border-radius: var(--eav-radius-md); }
.Eav-radius-lg   { border-radius: var(--eav-radius-lg); }
.Eav-radius-xl   { border-radius: var(--eav-radius-xl); }
.Eav-radius-pill { border-radius: var(--eav-radius-pill); }

/* === Card === */

.Eav-card {
  container-type: inline-size;
  position: relative;
  padding: var(--eav-space-l);
  background-color: var(--eav-clr-surface);
  color: var(--eav-clr-text);
  border: var(--eav-border-width) solid var(--eav-clr-border);
  border-radius: var(--eav-radius-xl);
}
.Eav-card .Eav-card-title {
  font-size: var(--eav-fs-600);
  line-height: var(--eav-lh-tight);
}
.Eav-card .Eav-card-title a { color: inherit; text-decoration: none; }
.Eav-card-elevated { box-shadow: var(--eav-shadow-lg); border-color: transparent; }

/* Hele card klikbaar via de ene link in de titel */
.Eav-card-link .Eav-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.Eav-card-link:has(a:focus-visible) {
  outline: 2px solid var(--eav-clr-focus);
  outline-offset: 2px;
}
.Eav-card-link .Eav-card-title a:focus-visible { outline: none; }
.Eav-card-link:has(a:hover) { border-color: var(--eav-clr-primary); }
@media (prefers-reduced-motion: no-preference) {
  .Eav-card-link { transition: border-color var(--eav-transition-base), translate var(--eav-transition-base); }
  .Eav-card-link:has(a:hover) { translate: 0 -2px; }
}

/* Glass — op foto's/gradients. Raw-tokens: leesbaar op elke band.
   Echt doorschijnend (70% wit + blur), niet dekkend wit. Contrast getest
   tegen de donkerste foto-pixel (ink): tekst ≥ 7:1, muted ≥ 4.5:1. */
.Eav-glass {
  --eav-clr-bg: var(--eav-raw-paper);
  --eav-clr-text: var(--eav-raw-ink);
  --eav-clr-text-muted: color-mix(in oklch, var(--eav-raw-ink) 85%, var(--eav-raw-paper));
  --eav-clr-border: color-mix(in oklch, var(--eav-raw-ink) 14%, var(--eav-raw-paper));
  --eav-clr-border-strong: color-mix(in oklch, var(--eav-raw-ink) 55%, var(--eav-raw-paper));
  --eav-clr-primary: var(--eav-raw-primary);
  --eav-clr-primary-hover: color-mix(in oklch, var(--eav-raw-primary) 88%, black);
  --eav-clr-text-on-primary: var(--eav-raw-paper);
  --eav-clr-focus: var(--eav-raw-primary);
  color-scheme: light;
  color: var(--eav-clr-text);
  background-color: color-mix(in oklch, var(--eav-raw-paper) 70%, transparent);
  background-image: linear-gradient(160deg,
    color-mix(in oklch, var(--eav-raw-paper) 55%, transparent) 0%,
    color-mix(in oklch, var(--eav-raw-paper) 10%, transparent) 100%);
  border: 1px solid color-mix(in oklch, var(--eav-raw-paper) 65%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--eav-raw-paper) 80%, transparent),
    var(--eav-shadow-lg);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
}
/* Zonder backdrop-filter (oude browsers): dekkender, anders onleesbaar op foto */
@supports not (backdrop-filter: blur(1px)) {
  .Eav-glass { background-color: color-mix(in oklch, var(--eav-raw-paper) 94%, transparent); }
}
/* Velden in glass: wit, niet doorschijnend — invoer moet rustig lezen.
   Uitzondering: het kentekenveld, dat leent zijn geel van de plaat. */
.Eav-glass input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"]),
.Eav-glass select,
.Eav-glass textarea {
  background-color: var(--eav-raw-paper);
}
.Eav-glass .Eav-plate input,
.Eav-glass #field_1_1 .ginput_container input {
  background-color: transparent;
}

/* === FAQ op core Details-block (<details>/<summary>) ===
   Native open/dicht, geen JS. Alleen kleur, spacing, icoon; de
   open-state is van de browser ([open]). Groeperen via name="faq"
   in het block zodat er één tegelijk open is. */

.Eav-faq {
  display: grid;
  gap: var(--eav-space-s);
}
.Eav-faq-item {
  border: var(--eav-border-width) solid var(--eav-clr-border);
  border-radius: var(--eav-radius-lg);
  background-color: var(--eav-clr-surface);
  overflow: clip;
}
.Eav-faq-item:hover { border-color: var(--eav-clr-border-strong); }
.Eav-faq-item[open]  { border-color: var(--eav-clr-primary); }
.Eav-faq-item > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--eav-space-s);
  min-block-size: 44px;
  padding: var(--eav-space-m);
  font-size: var(--eav-fs-500);
  font-weight: 700;
  line-height: var(--eav-lh-snug);
  color: var(--eav-clr-text);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.Eav-faq-item > summary::-webkit-details-marker { display: none; }
.Eav-faq-item > summary::after {
  content: "+";
  flex: none;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: var(--eav-radius-pill);
  background-color: var(--eav-clr-surface-accent);
  color: var(--eav-clr-text);
  font-size: var(--eav-fs-500);
  font-weight: 700;
  line-height: 1;
}
.Eav-faq-item[open] > summary::after {
  rotate: 45deg;
  background-color: var(--eav-clr-accent);
  color: var(--eav-clr-text-on-accent);
}
.Eav-faq-item > summary:focus-visible {
  outline: 2px solid var(--eav-clr-focus);
  outline-offset: -2px;
}
.Eav-faq-item > :not(summary) {
  padding-inline: var(--eav-space-m);
  color: var(--eav-clr-text);
}
.Eav-faq-item > :not(summary):last-child { padding-block-end: var(--eav-space-m); }
.Eav-faq-item > :not(summary) + :not(summary) { margin-block-start: var(--eav-space-s); }
.Eav-faq-item > :not(summary) a { color: var(--eav-clr-primary); }
@media (prefers-reduced-motion: no-preference) {
  .Eav-faq-item { transition: border-color var(--eav-transition-base); }
  .Eav-faq-item > summary::after { transition: rotate var(--eav-transition-base), background-color var(--eav-transition-base); }
}

/* === Stap-nummer: groot, licht cijfer === */

.Eav-step-number {
  font-size: var(--eav-fs-700);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: color-mix(in oklch, var(--eav-clr-text) 22%, var(--eav-clr-surface));
}

/* === Formulier-basis (eigen velden; Gravity Forms-skin staat in 07) === */

.Eav-field { display: grid; gap: var(--eav-space-2xs); }
.Eav-label { font-weight: 700; font-size: var(--eav-fs-300); color: var(--eav-clr-text); }
.Eav-input {
  inline-size: 100%;
  min-block-size: 56px;
  padding-block: var(--eav-space-xs);
  padding-inline: var(--eav-space-s);
  font: inherit;
  font-size: var(--eav-fs-500);
  color: var(--eav-clr-text);
  background-color: var(--eav-clr-bg);
  border: 2px solid var(--eav-clr-border-strong);
  border-radius: var(--eav-radius-md);
}
.Eav-input::placeholder { color: var(--eav-clr-text-muted); }
.Eav-input:user-invalid { border-color: color-mix(in oklch, red 70%, var(--eav-clr-text)); }

/* === Kentekenplaat ===
   Overgenomen recept: strip links met landcode onderaan, tekst rechts.
   Twee maten: .Eav-plate (weergave, 36px) en .Eav-plate-lg (invoer, 60px).
   Structuur: .Eav-plate > .Eav-plate-strip > .Eav-plate-country
                         > .Eav-plate-text (span óf input) */

.Eav-plate {
  display: inline-flex;
  overflow: clip;
  border: 3px solid var(--eav-raw-ink);
  border-radius: 6px;
  background-color: var(--eav-plate-yellow);
  block-size: 36px;
  inline-size: fit-content;
  min-inline-size: 100px;
  max-inline-size: 150px;
  vertical-align: middle;
  flex-shrink: 0;
}
.Eav-plate-strip {
  inline-size: 26px;
  min-inline-size: 26px;
  block-size: 100%;
  background-color: var(--eav-plate-blue);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-block-end: 3px;
  flex-shrink: 0;
}
.Eav-plate-country {
  color: var(--eav-raw-paper);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1px;
  line-height: 1;
}
.Eav-plate-text {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--eav-raw-ink);
  letter-spacing: -0.5px;
  text-transform: uppercase;
  padding-inline: 4px;
}

/* Invoervariant: zelfde plaat, groter, met een <input> als tekstdeel */
.Eav-plate-lg {
  block-size: 60px;
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: none;
  border-radius: var(--eav-radius-md);
  box-shadow: var(--eav-shadow-sm);
}
.Eav-plate-lg .Eav-plate-strip { inline-size: 40px; min-inline-size: 40px; padding-block-end: 6px; }
.Eav-plate-lg .Eav-plate-country { font-size: 12px; }
.Eav-plate-lg .Eav-plate-text,
.Eav-plate-lg input {
  min-block-size: 100%;
  inline-size: 100%;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--eav-raw-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  padding-inline: var(--eav-space-xs);
}
.Eav-plate-lg input::placeholder { color: color-mix(in oklch, var(--eav-raw-ink) 45%, var(--eav-plate-yellow)); }
.Eav-plate-lg:has(input:focus-visible) { outline: 3px solid var(--eav-clr-focus); outline-offset: 3px; }
.Eav-plate-lg input:focus-visible { outline: none; }

/* === Media === */

.Eav-image-cover {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--eav-radius-lg);
}
.Eav-image-square { aspect-ratio: 1; }
.Eav-image-lcp    { border-radius: 0; }
/* Schuin afgesneden foto (USP-secties); vervangt .img-shape */
.Eav-image-skew,
.img-shape {
  clip-path: polygon(10% 0, 100% 0%, 89% 100%, 0% 100%);
  border-radius: 0;
}