/* base.css — neutraal: reset, toegankelijkheid, formulier-basis. Stijlen staan in stijl-a.css / stijl-b.css. */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
main:focus { outline: none; }

/* Toegankelijkheid */
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
    position: fixed; top: 12px; left: 12px; z-index: 1000; padding: 12px 20px;
    background: #fff; color: #111; font-weight: 600; text-decoration: none; border-radius: 999px;
    transform: translateY(-160%); transition: transform .2s;
}
.skip-link:focus { transform: none; outline: 3px solid #111; outline-offset: 2px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Formulier-basis */
.form { display: grid; gap: 20px; }
.form__row { display: grid; gap: 20px; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 8px; align-content: start; }
.field label { font-weight: 500; }
.field__hint { font-weight: 400; opacity: .75; }
.field input:not([type="checkbox"]), .field select, .field textarea { width: 100%; min-height: 48px; padding: 12px 16px; }
.field textarea { resize: vertical; min-height: 160px; }
.field--check { grid-template-columns: auto 1fr; align-items: start; column-gap: 12px; }
.field--check input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: currentColor; }
.field--check .field__error { grid-column: 1 / -1; }
.field__error { font-size: .9375rem; font-weight: 500; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-alert { padding: 20px 24px; margin-bottom: 24px; }
.form-alert ul { margin: 12px 0 0; padding-left: 20px; }
.form-alert:focus { outline-offset: 4px; }

/* Reveal-basis (alleen met JS en zonder reduced motion) */
.js [data-reveal] { opacity: 0; }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Menu-paneel basis */
.menu-panel { position: fixed; inset: 0; z-index: 90; overflow-y: auto; }
body.menu-open { overflow: hidden; }

/* Interne stijlwissel */
.theme-switch {
    position: fixed; right: 16px; bottom: 16px; z-index: 80; padding: 10px 16px;
    background: #111; color: #fff; font: 600 13px/1 system-ui, sans-serif; text-decoration: none; border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
    .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}