/* Grondslag: reset, typografie en toegankelijkheid. */

*,
*::before,
*::after { box-sizing: border-box; }

/* De kop plakt bovenaan. Zonder deze marge landt een sprong naar een anker
   (het kruimelpad, "naar de beoordelingen", de overslaglink) eronder. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--bsv-header-h) + var(--bsv-space-3));
}

body {
  margin: 0;
  background: var(--bsv-bg);
  color: var(--bsv-body);
  font-family: var(--bsv-font);
  font-size: var(--bsv-fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video { display: block; max-width: 100%; }

/*
 * Het hidden-attribuut moet altijd winnen. Een component met een eigen
 * display-waarde overschrijft anders de regel van de browser, en dan staat een
 * blok dat verborgen heet gewoon in beeld. Dat gebeurde met de lege staat van
 * de verlanglijst, en eerder al met het mobiele menu.
 */
[hidden] { display: none !important; }

/*
 * Geen inzoomen bij het tikken in een veld. Safari op iOS vergroot de pagina
 * zodra een veld met minder dan 16 px tekst focus krijgt. Dat raakte de
 * zoekbalk op elke pagina (15 px), het sorteermenu (14 px), de zoekfilters,
 * het aantal in de winkelwagen, de nieuwsbrief en de 404-zoekbalk.
 *
 * `!important` omdat die velden elk hun eigen, soms zeer specifieke regel
 * hebben (de winkelwagen van WooCommerce heeft er een met zes klassen), en dit
 * een ondergrens is die voor allemaal geldt. Alleen op aanraakschermen: met een
 * muis zoomt niets in en blijft het ontwerp zoals het was. Nooit oplossen met
 * maximum-scale=1: dat verbiedt zoomen helemaal en is zelf een WCAG-fout.
 */
@media (pointer: coarse) {
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"]),
  select,
  textarea {
    font-size: max(var(--bsv-fs-input), 1em) !important;
  }
}

img { height: auto; }

a { color: inherit; text-decoration: none; }

a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
  overflow-wrap: anywhere;
  margin: 0;
  color: var(--bsv-ink);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

p { margin: 0 0 var(--bsv-space-3); }

ul, ol { margin: 0; padding: 0; }

button { font: inherit; }

/* --- Toegankelijkheid ---------------------------------------------------- */

:focus { outline: none; }

:focus-visible {
  outline: 3px solid var(--bsv-focus);
  outline-offset: 2px;
}

.topbar :focus-visible,
.mast :focus-visible,
.sticky-atc :focus-visible,
.bsv-toast :focus-visible {
  outline-color: var(--bsv-focus-dark);
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  position: static !important;
  width: auto;
  height: auto;
  clip: auto;
  margin: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--bsv-yellow);
  color: var(--bsv-black);
  padding: 12px 20px;
  font-weight: 700;
  border-radius: 0 0 var(--bsv-radius) 0;
}

.skip-link:focus { left: 0; }

@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;
  }
}

/* Zorgt dat losse tekstlinks herkenbaar blijven zonder kleur alleen. */
.entry-content a,
:is(.entry, .static-page) :is(p, li, dd, td, th) a:not(.button, .btn, .wp-element-button),
.archive-intro a,
.archive-seo a,
.brandintro a,
.woocommerce-product-details__short-description a,
.accordion__body a { text-decoration: underline; text-underline-offset: 2px; }

/* Vrije WordPress-inhoud zonder eigen componentopmaak. */
.entry > :is(p, ul, ol, blockquote),
.entry-content {
  font-size: var(--bsv-fs-copy);
  line-height: var(--bsv-lh-copy);
}

/* Echte tekstlijsten; navigatie, USP's en productrasters zijn componenten. */
:is(.entry-content, .static-page, .product-section__body, .woocommerce-product-details__short-description, .archive-intro, .archive-seo, .brandintro, .accordion__body, .kcal-uitleg) :is(ul, ol),
.entry > :is(ul, ol) {
  margin: 0 0 var(--bsv-space-3);
  padding-inline-start: 1.5em;
  font-size: var(--bsv-fs-copy);
  line-height: var(--bsv-lh-copy);
}

:is(.entry-content, .static-page, .product-section__body, .woocommerce-product-details__short-description, .archive-intro, .archive-seo, .brandintro, .accordion__body, .kcal-uitleg) li,
.entry > :is(ul, ol) li {
  margin-bottom: var(--bsv-space-2);
}

:is(.entry-content, .static-page, .product-section__body, .woocommerce-product-details__short-description, .archive-intro, .archive-seo, .brandintro, .accordion__body, .kcal-uitleg) li > :is(ul, ol),
.entry > :is(ul, ol) li > :is(ul, ol) {
  margin-block: var(--bsv-space-2) 0;
}