/* ── Cascade-laag ──────────────────────────────────────────────────────────
   Alle site-CSS staat in `@layer site`. De rangorde die het framework declareert is
   `framework, site, theme, type, item`: onze regels winnen dus van het framework en
   verliezen van wat de redacteur in het CMS instelt (thema, per type, per item).

   Buiten een laag zou deze CSS van ÁLLES winnen, ook van de CMS-instellingen — dan
   overrulet de site stilletjes de keuzes van de redacteur.

   Let op bij het uitbreiden: binnen deze laag telt specificiteit gewoon, maar tegenover
   het framework niet meer. Een kale `a { }` verslaat nu een framework-regel als
   `.product-card .button { }`, hoe specifiek die ook is. Houd brede elementselectors dus
   smal, of scope ze op een container. */
@layer site {
/* Reset + typografie. Bewust minimaal — geen normalize.css. */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

*, *::before, *::after { box-sizing: border-box; }
html {
    -webkit-text-size-adjust: 100%;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--color-primary) 30%, transparent) transparent;
    scroll-behavior: smooth;
    scroll-padding-top: var(--site-header-height, 0px);
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-primary) 30%, transparent);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--color-primary) 55%, transparent);
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--line-base);
    color: var(--color-fg);
    background: var(--color-bg);
    /* Sticky footer: body vult minstens de viewport en stapelt header/main/
       footer als kolom; main groeit (flex: 1) zodat de voet ook bij weinig
       content onderaan staat. 100vh = fallback voor browsers zonder dvh. */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

body.is-scroll-locked {
    overflow: hidden;
}

main { display: block; flex: 1 0 auto; }

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

a { color: var(--color-link); text-underline-offset: .2em; }

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    line-height: var(--line-tight);
    font-family: var(--font-display);
}
/* Kale h1 in het 3e thema-font (Cormorant Garamond); de merk-/layer-titels
   (`.general__title` e.d.) worden in custom/site.css gestuurd. Gewone h2–h6
   blijven op --font-display (theme-font-2). */
h1 {
    font-family: var(--theme-font-3, var(--font-display));
}

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

/* Buttons — basis variant primary/secondary */
.button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
    line-height: 1.2;
    transition: transform .12s ease, background .12s ease;
    /* Reset native <button>-chrome (rand + UA-achtergrond/font) zodat een
       <button class="button"> identiek oogt aan een <a class="button">. */
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    -webkit-appearance: none;
    appearance: none;
}
.button--primary {
    background: var(--color-primary);
    color: var(--color-primary-fg);
}
.button--secondary {
    background: transparent;
    color: var(--color-fg);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 35%, transparent);
}
.button--secondary:hover {
    background: color-mix(in srgb, currentColor 8%, transparent);
}
.button:hover { transform: translateY(-1px); }

/* Debug-block onderaan elke pagina — alleen tijdens dev */
.debug {
    margin: var(--space-6) auto;
    max-width: var(--content-max);
    padding: var(--space-3) var(--gutter);
    color: var(--color-fg-muted);
    font-size: .85rem;
}
.debug summary { cursor: pointer; }
.debug table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin-top: var(--space-2); }
.debug th, .debug td { padding: .25rem .5rem; text-align: left; border-bottom: 1px solid var(--color-border); }
.debug code { background: var(--color-bg-soft); padding: .1em .35em; border-radius: var(--radius-sm); }

}