/*
 * Ontdekkers — het gezicht van De Kleine Ontdekkers.
 *
 * ## De richting
 *
 * Uit het aangeleverde concept: twee getekende personages, teal en oranje,
 * op avontuur met een bindelstok, op een crèmekleurige grond. Rond, warm,
 * duidelijk — een ouder die 's avonds op zijn telefoon een opvang zoekt,
 * moet in tien seconden voelen dat het hier veilig is.
 *
 *   Crème, geen wit.        Een zuiver wit voelt klinisch voor een opvang;
 *                           een warme, lichte grond voelt als een kinderkamer.
 *   Teal draagt, oranje wijst aan.  Teal is de kop, de structuur, de rust.
 *                           Oranje staat op de ene knop die telt: de
 *                           rondleiding.
 *   Rond, met een glooiing. Secties lopen in elkaar over als een glooiing in
 *                           een tuin, niet als een harde streep.
 *
 * ## Waarom er geen donkere stand is
 *
 * Zoals bij bende: dit is het uithangbord van de klant, gebouwd op een warme
 * lichte grond. Een donkere stand zou een andere site worden. `color-scheme:
 * light` en dat blijft zo.
 *
 * ## De letters
 *
 * Quicksand, hergebruikt uit assets/letters van het thema bende — zelfde
 * bestand, zelfde OFL-licentie. Geen 'naam' in het manifest, om dezelfde
 * reden als daar: geen tweede laadbeurt bij Google, geen stijlblad van een
 * vreemde host.
 */

@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('letters/quicksand-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('letters/quicksand-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── de grond ───────────────────────────────────────────────────────────── */

:root {
    color-scheme: light;

    --grond: #FFF8EC;
    --grond-diep: #EAF5F1;
    --grond-warm: #FFF0E0;
    --paneel: #FFFFFF;

    --lijn: #EBE2CE;
    --lijn-zacht: #F3ECDC;
    --lijn-sterk: #DCCFAF;

    --schaduw-1: 0 1px 2px rgb(35 50 64 / 0.06);
    --schaduw-2: 0 8px 24px rgb(35 50 64 / 0.08);
    --schaduw-3: 0 20px 50px rgb(35 50 64 / 0.14);

    /*
     * De vier klantkleuren. Teal en oranje komen van de personages; groen en
     * roze bestaan enkel als icoonaccent voor de belofteband — dat is de
     * enige plek waar ze staan, en nooit als vlak of knop.
     */
    --teal: var(--accent);
    --teal-licht: #4FC2BC;
    --oranje: var(--steun);
    --oranje-licht: #FFBE6E;
    --roze: #FF6FA0;
    --groen: #6DBE63;

    --teal-waas: color-mix(in oklab, var(--teal-licht) 24%, transparent);
    --oranje-waas: color-mix(in oklab, var(--oranje-licht) 30%, transparent);

    --golf: 46px;
    --bnd-ruim: clamp(2.75rem, 7vw, 5.5rem);
}

/* De donkere stand van de basis uitschakelen, met dezelfde selectoren. */
@media (prefers-color-scheme: dark) {
    :root:not([data-thema="licht"]),
    :root[data-thema="donker"] {
        color-scheme: light;
        --grond: #FFF8EC;
        --grond-diep: #EAF5F1;
        --grond-warm: #FFF0E0;
        --paneel: #FFFFFF;
        --lijn: #EBE2CE;
        --lijn-zacht: #F3ECDC;
        --inkt: #233240;
        --schaduw-1: 0 1px 2px rgb(35 50 64 / 0.06);
        --schaduw-2: 0 8px 24px rgb(35 50 64 / 0.08);
        --schaduw-3: 0 20px 50px rgb(35 50 64 / 0.14);
    }
}

:root[data-thema="donker"] {
    color-scheme: light;
    --grond: #FFF8EC;
    --grond-diep: #EAF5F1;
    --paneel: #FFFFFF;
    --lijn: #EBE2CE;
    --inkt: #233240;
}

body { background: var(--grond); color: var(--inkt); }

/* ── de letters ─────────────────────────────────────────────────────────── */

h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; }
h1 { line-height: 1.06; }
h2 { line-height: 1.14; }

.prosa p, .rijk p { line-height: 1.75; max-width: 38rem; }

:root .oog, .hero .oog, .sectiekop .oog {
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--oranje);
}

/* ── de kop ─────────────────────────────────────────────────────────────── */

.siteKop {
    background: rgb(255 248 236 / 0.88);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--lijn-zacht);
}

.siteKop__balk { padding-block: 0.6rem; gap: 1rem; }

.merk {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.9rem;
    font-family: var(--letter-kop);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
    color: var(--inkt);
}

.merk__teken { width: 2.4rem; height: 2.4rem; border-radius: 999px; display: block; }

.hoofdnav__link {
    color: var(--inkt);
    font-weight: 600;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
}

.hoofdnav__link[aria-current] { color: var(--teal); }

.siteKop .knop--stil { color: color-mix(in oklab, var(--inkt) 74%, transparent); }
.siteKop .knop--stil:hover { color: var(--teal); }

.enkel-breed { display: none; }
.enkel-mobiel { display: inline-flex; }

@media (min-width: 900px) {
    .enkel-breed { display: inline-flex; }
    .enkel-mobiel { display: none; }
}

/* ── knoppen: rond en met glans ─────────────────────────────────────────── */

.knop {
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: -0.01em;
    padding-inline: 1.5em;
    min-height: 3rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}

.knop--vol {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, color-mix(in oklab, var(--oranje) 88%, white), var(--oranje));
    color: #fff;
    border: 0;
    box-shadow:
        0 8px 20px color-mix(in oklab, var(--oranje) 34%, transparent),
        inset 0 -2px 0 color-mix(in oklab, var(--oranje) 70%, black);
}

.knop--vol::before {
    content: '';
    position: absolute;
    inset: 2px 2px auto;
    height: 42%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgb(255 255 255 / 0.35), transparent);
    pointer-events: none;
}

.knop--vol:hover { filter: brightness(1.04); }

.knop--rondleiding { padding-inline: 1.2em; min-height: 2.75rem; font-size: 0.92rem; }

.knop--rand {
    border: 2px solid color-mix(in oklab, var(--teal) 32%, transparent);
    color: var(--teal);
    background: var(--paneel);
}

.knop--rand:hover { border-color: var(--teal); }

.knop--klein { padding: 0.4rem 0.9rem; min-height: 2.5rem; font-size: 0.85rem; }
.knop--groot { padding-inline: 2em; min-height: 3.4rem; font-size: 1.05rem; }

@media (prefers-reduced-motion: reduce) {
    .knop--vol:hover { filter: none; }
}

/* ── de hero ────────────────────────────────────────────────────────────── */

.hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(60% 70% at 10% 15%, var(--teal-waas), transparent 62%),
        radial-gradient(66% 72% at 92% 10%, var(--oranje-waas), transparent 64%),
        var(--grond);
}

.hero::after {
    content: '';
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: calc(var(--golf) * -1.2);
    height: calc(var(--golf) * 2.4);
    background: var(--grond-diep);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    pointer-events: none;
}

.hero--duo .hero__lijf {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    align-items: end;
    padding-block: clamp(2rem, 6vw, 3.5rem) calc(var(--golf) + 2.5rem);
}

.hero h1 {
    color: var(--inkt);
    font-size: clamp(2.3rem, 8.5vw, 4rem);
    text-wrap: balance;
}

.hero__woord--oranje { font-style: normal; color: var(--oranje); }
.hero__woord--teal { font-style: normal; color: var(--teal); }

.hero__tekst {
    color: color-mix(in oklab, var(--inkt) 78%, transparent);
    font-size: clamp(1.05rem, 3.6vw, 1.2rem);
    line-height: 1.65;
    max-width: 32rem;
    margin-top: 1rem;
}

.hero__knoppen { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.75rem; }

.hero__figuren { justify-self: center; max-width: 26rem; margin-bottom: calc(var(--golf) * -0.3); }

/* Het beeld is een rechthoekige snede uit het aangeleverde concept, geen
   transparante uitknip. Een zachte, oneven uitvaging aan alle randen laat de
   rand oplossen in de grond van de hero in plaats van als een kaart te
   staan. Oneven omdat een cirkel op een liggend beeld de zijkanten te vroeg
   afsnijdt; deze vorm raakt de hoeken het eerst en het midden het laatst. */
.hero__figuren img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 14px rgb(35 50 64 / .16));
    -webkit-mask-image: radial-gradient(120% 120% at 50% 55%, #000 62%, transparent 92%);
    mask-image: radial-gradient(120% 120% at 50% 55%, #000 62%, transparent 92%);
}

@media (min-width: 900px) {
    .hero--duo .hero__lijf { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 4vw, 4rem); }
    .hero__figuren { max-width: none; }
}

/* ── de belofteband ────────────────────────────────────────────────────── */

.belofteband { margin-block: clamp(1.5rem, 4vw, 2.5rem); position: relative; z-index: 1; }

.beloften {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 720px) {
    .beloften { grid-template-columns: repeat(4, 1fr); }
}

.belofte {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    border-radius: var(--radius);
    background: var(--paneel);
    border: 1px solid var(--lijn-zacht);
    box-shadow: var(--schaduw-1);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.belofte:hover { transform: translateY(-3px); box-shadow: var(--schaduw-2); }

@media (prefers-reduced-motion: reduce) {
    .belofte:hover { transform: none; }
}

.belofte__icoon {
    width: 3.25rem;
    height: 3.25rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
}

.belofte--roze .belofte__icoon { background: color-mix(in oklab, var(--roze) 16%, #fff); color: var(--roze); }
.belofte--groen .belofte__icoon { background: color-mix(in oklab, var(--groen) 16%, #fff); color: var(--groen); }
.belofte--oranje .belofte__icoon { background: color-mix(in oklab, var(--oranje) 16%, #fff); color: var(--oranje); }
.belofte--teal .belofte__icoon { background: color-mix(in oklab, var(--teal) 16%, #fff); color: var(--teal); }

.belofte strong { font-family: var(--letter-kop); font-size: 1.02rem; }
.belofte span:not(.belofte__icoon) { font-size: 0.86rem; color: color-mix(in oklab, var(--inkt) 62%, transparent); }

/* ── de welkomstsectie ─────────────────────────────────────────────────── */

.welkom { background: linear-gradient(var(--grond-diep), var(--grond)); padding-block: var(--bnd-ruim); }

.welkom__lijf {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3rem);
    align-items: center;
}

.welkom__beeld img {
    width: 100%;
    height: auto;
    border-radius: var(--radius, 24px);
    box-shadow: var(--schaduw-2);
}

.welkom__tekst h2 { font-size: clamp(1.6rem, 5vw, 2.3rem); margin: 0.2rem 0 0.9rem; }
.welkom__tekst p { line-height: 1.7; margin-bottom: 1.25rem; max-width: 38rem; }

@media (min-width: 860px) {
    .welkom__lijf { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

/* ── de drie ingangen ──────────────────────────────────────────────────── */

.ingangen {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 720px) {
    .ingangen { grid-template-columns: repeat(3, 1fr); }
}

.ingang {
    display: grid;
    border-radius: var(--radius, 24px);
    overflow: hidden;
    background: var(--paneel);
    border: 1px solid var(--lijn-zacht);
    box-shadow: var(--schaduw-1);
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ingang:hover { transform: translateY(-3px); box-shadow: var(--schaduw-2); }

@media (prefers-reduced-motion: reduce) {
    .ingang:hover { transform: none; }
}

.ingang__beeld {
    aspect-ratio: 16 / 10;
    background: var(--grond-diep);
    display: block;
    overflow: hidden;
}

.ingang__beeld img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Zolang er nog geen echte foto's staan: een rustig verloop in de
   themakleuren in plaats van een lege grijze doos. Zodra een sfeerbeeld
   ingesteld wordt, hoort dit vervangen te worden door een echte foto via de
   mediabibliotheek. */
.ingang__beeld--1 { background: linear-gradient(135deg, var(--teal-waas), var(--grond-diep)); }
.ingang__beeld--2 { background: linear-gradient(135deg, var(--oranje-waas), var(--grond-diep)); }
.ingang__beeld--3 { background: linear-gradient(135deg, color-mix(in oklab, var(--roze) 24%, transparent), var(--grond-diep)); }

.ingang__woord { display: grid; gap: 0.4rem; padding: 1.4rem 1.5rem 1.6rem; }
.ingang__woord strong { font-family: var(--letter-kop); font-size: 1.15rem; }
.ingang__woord > span:not(.ingang__gaan) { color: color-mix(in oklab, var(--inkt) 64%, transparent); font-size: 0.94rem; }

.ingang__gaan {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
    font-weight: 700;
    color: var(--teal);
}

/* ── de slotband ───────────────────────────────────────────────────────── */

.slotband {
    background: linear-gradient(120deg, color-mix(in oklab, var(--teal) 90%, black), var(--teal));
    color: #fff;
    padding-block: clamp(2.5rem, 6vw, 4rem);
    border-radius: var(--golf) var(--golf) 0 0;
}

.slotband__lijf {
    display: grid;
    gap: 1.25rem;
    justify-items: center;
    text-align: center;
}

.slotband__figuren {
    width: min(14rem, 60%);
    height: auto;
    filter: drop-shadow(0 10px 12px rgb(0 0 0 / .2));
    -webkit-mask-image: radial-gradient(120% 120% at 50% 55%, #000 55%, transparent 90%);
    mask-image: radial-gradient(120% 120% at 50% 55%, #000 55%, transparent 90%);
}

.slotband__woord h2 { font-size: clamp(1.5rem, 4.5vw, 2.1rem); margin: 0 0 0.4rem; }
.slotband__woord p { margin: 0; opacity: 0.92; }

.slotband .knop--vol {
    background: linear-gradient(180deg, color-mix(in oklab, var(--oranje) 88%, white), var(--oranje));
}

@media (min-width: 760px) {
    .slotband__lijf { grid-template-columns: auto 1fr auto; text-align: left; justify-items: start; }
}

.slotband--smal {
    border-radius: calc(var(--golf) * 0.7) calc(var(--golf) * 0.7) 0 0;
    margin-top: clamp(2rem, 5vw, 3.5rem);
}

.slotband__lijf--smal { max-width: 60rem; margin-inline: auto; }

/* ── de binnenpagina-kop ──────────────────────────────────────────────── */

.binnenkop {
    background: linear-gradient(var(--grond-diep), var(--grond));
    padding-block: clamp(1.75rem, 5vw, 3.25rem) clamp(1.5rem, 4vw, 2.5rem);
}

.binnenkop__lijf { max-width: 46rem; }

.binnenkop h1 { font-size: clamp(1.9rem, 5.5vw, 3rem); margin: 0.5rem 0 0.6rem; }
.binnenkop__intro { margin: 0; font-size: 1.06rem; color: color-mix(in oklab, var(--inkt) 74%, transparent); }

/* ── contactpagina ─────────────────────────────────────────────────────── */

.contactRaster {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3rem);
    align-items: start;
}

@media (min-width: 860px) {
    .contactRaster { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

.contactknoppen { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.5rem; }

.contactKaart {
    padding: clamp(1.3rem, 3vw, 1.75rem);
    border-radius: var(--radius, 24px);
    background: var(--paneel);
    border: 1px solid var(--lijn-zacht);
    box-shadow: var(--schaduw-1);
}

.contactKaart__kop { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.contactKaart__kop h2 { font-size: 1.15rem; margin: 0; }

.contactKaart p { margin: 0 0 0.5rem; line-height: 1.6; }
.contactKaart__uren { color: color-mix(in oklab, var(--inkt) 70%, transparent); }

.contactKaart__map {
    margin-top: 1rem;
    border-radius: calc(var(--radius, 24px) * 0.7);
    overflow: hidden;
    border: 1px solid var(--lijn);
    aspect-ratio: 4 / 3;
}

.contactKaart__map iframe { width: 100%; height: 100%; border: 0; display: block; }

.contactKaart__routeknop { margin-top: 0.85rem; }

/* ── raakvlakken van minstens 44 pixels ───────────────────────────────── */

.siteVoet a, .voet a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--inkt);
    text-decoration-color: color-mix(in oklab, var(--teal) 40%, transparent);
}

.siteVoet a:hover, .voet a:hover { color: var(--teal); }

.siteVoet, .siteVoet .klein, .siteVoet .gedempt { color: var(--inkt); }

.ontdVoet__raster { padding-block: clamp(2rem, 5vw, 3.5rem); }
.ontdVoet__slot { padding-top: 1.5rem; border-top: 1px solid var(--lijn-zacht); }