/* Shared Dev: tokens, page colour, reset and typography.
   Every page has its own colour version of the logo. Page content is wrapped in
   <div class="sd-page sd-tone-<colour>">; that sets --sd-tone on <body>, so the header logo,
   the current menu item and the accents follow it. Blue applies when there is no wrapper.
   A .sd-tone-<colour> class on any other element sets the tone locally.
   Light tones (geel, mint, grijs) are never used for text: text uses --sd-tone-deep. */

:root {
    --sd-ink: #353535;
    --sd-graphite: #585857;
    --sd-paper: #ffffff;
    --sd-stone: #f2f3f3;
    --sd-line: #cfcfcf;

    --sd-blauw: #4c99c8;
    --sd-blauw-deep: #30739d;
    --sd-geel: #e7bc29;
    --sd-geel-deep: #876b0f;
    --sd-groen: #499f35;
    --sd-groen-deep: #397d2a;
    --sd-mint: #84c7ad;
    --sd-mint-deep: #387a60;
    --sd-paars: #886faf;
    --sd-paars-deep: #7d62a8;
    --sd-grijs: #cdcccc;
    --sd-grijs-deep: #585857;

    --sd-tone: var(--sd-blauw);
    --sd-tone-deep: var(--sd-blauw-deep);
    /* Logo parts: frame --sd-tone, the three blocks --sd-b1/--sd-b2/--sd-b3 (default --sd-block), word --sd-word. */
    --sd-block: var(--sd-ink);
    --sd-word: var(--sd-graphite);

    --sd-font: "Recursive", system-ui, -apple-system, "Segoe UI", sans-serif;
    --sd-measure: 34rem;
    --sd-container: 76rem;
    --sd-gutter: 1.5rem;
    --sd-radius: 0.6rem;
    --sd-radius-lg: 1.25rem;
}

.sd-tone-blauw,
body:has(.sd-page.sd-tone-blauw) { --sd-tone: var(--sd-blauw); --sd-tone-deep: var(--sd-blauw-deep); }
.sd-tone-geel,
body:has(.sd-page.sd-tone-geel) { --sd-tone: var(--sd-geel); --sd-tone-deep: var(--sd-geel-deep); }
.sd-tone-groen,
body:has(.sd-page.sd-tone-groen) { --sd-tone: var(--sd-groen); --sd-tone-deep: var(--sd-groen-deep); }
.sd-tone-mint,
body:has(.sd-page.sd-tone-mint) { --sd-tone: var(--sd-mint); --sd-tone-deep: var(--sd-mint-deep); }
.sd-tone-paars,
body:has(.sd-page.sd-tone-paars) { --sd-tone: var(--sd-paars); --sd-tone-deep: var(--sd-paars-deep); }
.sd-tone-grijs,
body:has(.sd-page.sd-tone-grijs) { --sd-tone: var(--sd-grijs); --sd-tone-deep: var(--sd-grijs-deep); }

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

html {
    -webkit-text-size-adjust: 100%;
    font-family: var(--sd-font);
    font-variation-settings: "CASL" 0;
    color: var(--sd-ink);
    background: var(--sd-paper);
    -webkit-font-smoothing: antialiased;
}

body {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.6;
}

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

h1,
h2,
h3 {
    margin: 0;
    font-variation-settings: "CASL" 1;
    line-height: 1.08;
    letter-spacing: -0.01em;
    overflow-wrap: break-word;
}

h1 { font-size: clamp(2.25rem, 6vw, 4.5rem); font-weight: 850; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); font-weight: 800; }
h3 { font-size: 1.5rem; font-weight: 750; }

p { margin: 0; }

a { color: inherit; }

:focus-visible {
    outline: 3px solid var(--sd-tone-deep);
    outline-offset: 3px;
    border-radius: 4px;
}

/* The logo sprite that every mark and logo on the page refers to. */
.sd-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* One logo mark, <svg class="sd-mark"><use href="#sd-mark"/></svg>, in the tone of the nearest sd-tone-* class. */
.sd-mark {
    display: block;
    width: 4rem;
    height: auto;
    aspect-ratio: 218 / 220;
}

.sd-wrap {
    width: min(var(--sd-container), 100% - 2 * var(--sd-gutter));
    margin-inline: auto;
}

.sd-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1.5rem;
    border: 0;
    border-radius: var(--sd-radius);
    background: var(--sd-ink);
    color: #fff;
    font: inherit;
    font-variation-settings: "CASL" 1;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
}

.sd-btn:hover { background: #000; }

.sd-btn .sd-mark { width: 1.3rem; }

.sd-link {
    font-weight: 650;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
    text-decoration-color: var(--sd-tone);
}

.sd-link:hover { text-decoration-color: var(--sd-tone-deep); }

.sd-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    margin-top: 2.25rem;
}