/*
Theme Name: PlayWhen
Theme URI: https://playwhen.be
Author: Fly Media
Author URI: https://flymedia.be
Description: De salessite van PlayWhen. Bootstrap 5, lokaal, met de huisstijl van het platform erover.
Version: 4.3.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: playwhen
*/

/* ==========================================================================
   1. Dezelfde tokens als de tool

   Deze namen en waarden komen letterlijk uit de stijl van het platform
   (resources/views/layouts/partials/stijl.blade.php). Ze staan hier met
   dezelfde namen, zodat je in een oogopslag ziet dat het hetzelfde stelsel is
   en je een kleur op twee plaatsen op dezelfde manier terugvindt.

   Verandert er iets aan de huisstijl van de tool, dan pas je hier dezelfde
   regel aan en niets anders.
   ========================================================================== */

:root {
    --brand:  #1A6E56;
    --accent: #D2F366;

    /* De neutrale schaal uit het merkblad: een bijna zwarte tekstkleur en
       een achtergrond die een tikje warmer is dan wit. Die twee staan vast;
       de tussenliggende grijzen lopen er naartoe, want een koele grijze
       schaal onder een warme achtergrond valt op als vuil. */
    --ink:    #1F1F1F;
    --ink-2:  #4A4F52;
    --ink-3:  #6B7175;
    --ink-4:  #9AA0A4;

    --bg:     #FAFAF8;
    --card:   #FFFFFF;
    --zacht:  #F2F3F1;
    --line:   #E9ECEF;
    --line-2: #D5D9DC;

    --ok:     #067647;
    --ok-bg:  #ECFDF3;
    --let:    #B54708;
    --let-bg: #FFFAEB;
    --bad:    #B42318;
    --bad-bg: #FEF3F2;
    --info:   #175CD3;
    --info-bg:#EFF8FF;

    /* Schaduwen in lagen: een haarscherpe rand plus een zachte val. */
    --schaduw-1: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --schaduw-2: 0 2px 4px rgba(16, 24, 40, .04), 0 4px 12px rgba(16, 24, 40, .06);
    --schaduw-3: 0 4px 8px rgba(16, 24, 40, .04), 0 12px 28px rgba(16, 24, 40, .08);

    --rond:   14px;
    --rond-s: 10px;

    /* Alleen de salessite kent deze twee: een landingspagina mag ruimer zijn
       dan een beheerscherm. */
    /* De terreinlijnen van bovenaf. Staan hier omdat twee plekken ze
       gebruiken: de slotoproep vult ze wit op, de hero in het merkgroen. */
    --mp-terrein: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 380' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='square'><rect x='12' y='12' width='216' height='356'/><path d='M12 190h216M48 12v356M192 12v356M48 118h144M120 118v144M48 262h144'/></svg>");

    /* Een zacht vlak in de merkkleur, voor een uitgelichte rij of een
       legendevakje. Vier sjablonen gebruiken hem; zonder deze regel zijn die
       vlakken doorzichtig. */
    --mp-brand-soft: color-mix(in srgb, var(--brand) 10%, #fff);

    --rond-groot: 22px;
    /* Een tint lichter dan het merkgroen, voor zweven en indrukken. Zou dit
       gelijk zijn aan --brand, dan gebeurt er zichtbaar niets bij een klik. */
    --brand-2: #238A6B;
}

/* ==========================================================================
   2. Die tokens in Bootstrap gieten

   Bootstrap tekent alles met eigen variabelen. Overschrijf je die, dan volgt
   elke kaart, knop en badge vanzelf. Dat is de reden dat dit bestand kort
   blijft: we schrijven bijna geen eigen componenten.
   ========================================================================== */

:root {
    /* De rgb-vorm moet dezelfde kleur zijn als --brand (#1A6E56). Loopt ze uit
       elkaar, dan geeft elke bg-primary met een doorzichtigheid een ander groen
       dan de knop ernaast. */
    --bs-primary: var(--brand);
    --bs-primary-rgb: 26, 110, 86;
    --bs-link-color: var(--brand);
    --bs-link-color-rgb: 26, 110, 86;
    --bs-link-hover-color: var(--brand-2);

    --bs-body-bg: var(--bg);
    --bs-body-color: var(--ink-2);
    --bs-emphasis-color: var(--ink);
    --bs-secondary-color: var(--ink-3);
    --bs-tertiary-bg: var(--zacht);
    /* .bg-body-tertiary tekent met de rgb-variant, niet met de regel
       hierboven. Vergeet je die, dan houdt elke grijze balk het grijs van
       Bootstrap in plaats van dat van de tool. */
    --bs-tertiary-bg-rgb: 242, 244, 247;
    --bs-border-color: var(--line);

    --bs-font-sans-serif: Inter, -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, sans-serif;
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.6;

    /* Dezelfde ronding als de tool: rond-s voor kleine dingen, rond voor
       kaarten, en een ruimere maat voor de grote vlakken op de landingspagina. */
    --bs-border-radius-sm: var(--rond-s);
    --bs-border-radius: var(--rond);
    --bs-border-radius-lg: var(--rond-groot);
    --bs-border-radius-xl: 28px;

    /* De ring rond een element dat de focus heeft. Staat standaard op het
       blauw van Bootstrap en verschijnt pas bij navigeren met het
       toetsenbord, dus je ziet hem makkelijk over het hoofd. */
    --bs-focus-ring-color: rgba(26, 110, 86, .25);

    --bs-box-shadow-sm: var(--schaduw-1);
    --bs-box-shadow: var(--schaduw-2);
    --bs-box-shadow-lg: var(--schaduw-3);
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   3. Typografie

   Dezelfde behandeling als de tool: gewicht 700, strak gespatieerd, korte
   regelafstand. De maten zijn wel groter, want een landingspagina moet van
   een meter afstand leesbaar zijn en een beheerscherm van dertig centimeter.
   ========================================================================== */

/* De klassen erbij: Bootstrap zet op .h1 tot .h4 zijn eigen gewicht 500,
   en een klasse wint van een elementselector. Zonder die vier namen blijft
   elke sectiekop dun terwijl de echte h1 wel dik is. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--ink);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.028em;
}

.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-weight: 800;
    letter-spacing: -.028em;
    line-height: 1.15;
}

/* De koppen van de landingspagina, zoals ze voor Bootstrap waren. */
.display-5 { font-size: clamp(38px, 5vw, 60px); }
.display-6 { font-size: clamp(28px, 3.6vw, 42px); }
h2.h1 { font-size: clamp(28px, 3.4vw, 40px); }

.lead, .fs-5 { font-size: 17px !important; color: var(--ink-2); line-height: 1.6; }

.eyebrow {
    font-size: 18px;
    line-height: 1.5;
    font-weight: 700;
    color: var(--brand-2);
}

/* ==========================================================================
   4. Componenten die de tool ook heeft
   ========================================================================== */

/* Een kaart heeft bij ons geen rand maar een schaduw. */
.card {
    border: none;
    box-shadow: var(--schaduw-1);
    background: var(--card);
}
/* Een nagemaakt scherm krijgt een getinte titelbalk en verder niets.
   Twee grijze banden onder elkaar, kop en voet, maken het rommelig: dan
   lijkt de inhoud ertussen geklemd in plaats van erin te staan. */
.card-header { background: var(--zacht); border-color: var(--line); }
.card-footer { background: var(--card); border-color: var(--line); }

/* Een tabel in zo'n kaart laat het wit van de kaart door. Zonder deze
   regel pakt de koprij de achtergrondkleur van de pagina op, en dat is
   een derde grijstint in een venstertje dat er al twee heeft. */
.card .table > :not(caption) > * > * { background-color: transparent; }

/* Knoppen: de vorm van de salessite (pil, ruim) met het gewicht van de tool. */
.btn {
    --bs-btn-padding-y: .8rem;
    --bs-btn-padding-x: 1.4rem;
    --bs-btn-font-size: 15px;
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: 999px;
    transition: background .12s, color .12s, box-shadow .12s, transform .06s;
}
.btn:active { transform: translateY(1px); }
.btn-sm { --bs-btn-padding-y: .45rem; --bs-btn-padding-x: .9rem; --bs-btn-font-size: 12.5px;
          --bs-btn-border-radius: var(--rond-s); }

/*
   De valkuil van Bootstrap zonder Sass.

   --bs-primary hierboven kleurt alles wat met --bs-primary-rgb tekent:
   text-primary, bg-primary, border-primary. Maar knoppen, pillen en de
   accordeon gebruiken hun eigen componentvariabelen, en die staan in de
   gebouwde CSS al op het blauw van Bootstrap. Zet je enkel --bs-primary, dan
   blijft de helft van je pagina blauw en zoek je je rot naar waarom.
*/
.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-2);
    --bs-btn-hover-border-color: var(--brand-2);
    --bs-btn-active-bg: var(--brand-2);
    --bs-btn-active-border-color: var(--brand-2);
    --bs-btn-disabled-bg: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-bg: var(--brand);
    --bs-btn-active-border-color: var(--brand);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

/* De lichte knop is bij ons wit met een schaduw, niet grijs met een rand. */
.btn-light {
    --bs-btn-bg: var(--card);
    --bs-btn-border-color: transparent;
    --bs-btn-color: var(--ink-2);
    --bs-btn-hover-bg: var(--card);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-hover-color: var(--ink);
    --bs-btn-active-bg: var(--card);
    box-shadow: var(--schaduw-1);
}
.btn-light:hover { box-shadow: var(--schaduw-2); }

/* Limoen op donker. Bootstrap heeft geen kleur die hierop lijkt. */
.btn-accent {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-color: var(--ink);
    --bs-btn-hover-bg: #d7f66e;
    --bs-btn-hover-border-color: #d7f66e;
    --bs-btn-hover-color: var(--ink);
    --bs-btn-focus-shadow-rgb: 203, 242, 76;
}

/* Badges: dezelfde maat en tinten als de badges in de tool. */
.badge {
    padding: 4px 11px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
    background: var(--zacht);
    color: var(--ink-2);
}
.badge.tekst-zacht  { background: var(--zacht);      color: var(--ink-3); }
.badge.tekst-merk   { background: var(--ok-bg);      color: var(--ok); }
.badge.tekst-limoen { background: #F1FBD2;           color: #4E6B0B; }
.badge.tekst-amber  { background: var(--let-bg);     color: var(--let); }

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--brand);
    --bs-nav-pills-border-radius: 999px;
}
.nav-pills .nav-link { font-weight: 600; font-size: 13.5px; color: var(--ink-2); }
/* De rusttoestand hangt aan :not(.active) en niet aan een klasse in de HTML.
   Bootstrap voegt bij het wisselen alleen .active toe; een bg-white die in
   het sjabloon stond, bleef staan en won daarna van de actieve achtergrond.
   Resultaat: witte tekst op een wit vlak. */
.nav-pills .nav-link:not(.active) { background: var(--card); box-shadow: var(--schaduw-1); }
.nav-pills .nav-link:not(.active):hover { color: var(--ink); box-shadow: var(--schaduw-2); }

.accordion {
    --bs-accordion-bg: var(--card);
    --bs-accordion-border-color: transparent;
    --bs-accordion-active-bg: var(--ok-bg);
    --bs-accordion-active-color: var(--brand);
    --bs-accordion-btn-focus-border-color: var(--brand);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .2);
    --bs-accordion-btn-font-size: 16px;
}
.accordion-button { font-weight: 600; color: var(--ink); }
.accordion-item { box-shadow: var(--schaduw-1); }

/* Het pijltje in een open accordeon-knop is een ingebakken blauwe SVG. Met
   een filter kleurt hij mee zonder dat we een eigen afbeelding maken. */
.accordion-button:not(.collapsed)::after {
    filter: hue-rotate(115deg) saturate(1.6) brightness(.55);
}

.navbar {
    background: rgba(247, 248, 250, .82) !important;
    backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 rgba(16, 24, 40, .06);
    border-bottom: none !important;
}

/*
   De kop blijft bovenaan staan (sticky-top van Bootstrap), en dat betekent dat
   hij bij elke ankersprong het begin van het blok afdekt. De browser zet de
   bovenkant van #hoe precies op de bovenkant van het scherm; onze kop staat
   daaroverheen en eet de titel op.

   Op de homepagina valt dat mee, want je ziet de pagina scrollen en snapt waar
   je bent. Kom je van een andere pagina, dan land je meteen in de tekst zonder
   kop erboven, en dan lijkt het alsof de link je op de verkeerde plek zette.

   scroll-padding-top zegt de browser hoeveel ruimte hij bovenaan moet vrijlaten.
   Het staat op html en niet per blok, zodat elk anker het krijgt, ook de blokken
   die er later bij komen.

   Verandert de hoogte van de kop, dan hoort dit getal mee te veranderen.
*/
:root {
    --kop-hoogte: 72px;
}

html {
    scroll-padding-top: calc(var(--kop-hoogte) + 12px);
}
.navbar-brand { font-size: 19px; letter-spacing: -.03em; color: var(--ink); }
.navbar-nav .nav-link { font-size: 14.5px; font-weight: 500; color: var(--ink-2); }
.navbar-nav .nav-link:hover { color: var(--brand); }

.form-select, .form-control { border-color: var(--line-2); box-shadow: var(--schaduw-1); }

/* ==========================================================================
   5. Wat Bootstrap niet heeft
   ========================================================================== */

/* De streep onder een woord in de titel. */
.accentwoord {
    font-style: normal;
    color: var(--brand-2);
    position: relative;
    white-space: nowrap;
}
.accentwoord::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: .06em;
    height: .34em;
    background: var(--accent);
    z-index: -1;
    opacity: .85;
}

/*
 * De stippellijn tussen de stappen.
 *
 * Vijf losse bolletjes lezen als vijf losse dingen; met een lijn ertussen
 * lees je een proces dat je doorloopt. Stippen en geen doorlopende lijn,
 * want het is een volgorde en geen verbinding waar iets doorheen stroomt.
 *
 * Alleen vanaf lg, want daar staan de vijf naast elkaar. Daaronder vallen ze
 * in twee kolommen en zou een horizontale lijn naar het niets wijzen.
 */
@media (min-width: 992px) {
    .stap { position: relative; }
    .stap::after {
        content: "";
        position: absolute;
        top: 19px;
        left: 50px;
        right: -22px;
        border-top: 2px dotted var(--line-2);
    }
    .stap:last-child::after { display: none; }
}

/*
 * De hero: terreinlijnen die links wegvallen.
 *
 * Op een lichte achtergrond werkt hetzelfde wit niet, dus dit figuur krijgt
 * zijn kleur uit background-color en zijn vorm uit een masker. Zo is er een
 * tekening voor beide kanten van de site: op donker vullen we hem wit op, hier
 * in het merkgroen.
 *
 * Links en niet rechts, want daar staat het nagemaakte scherm en dat is al het
 * drukste deel van de hero. Half over de rand, zodat het een doorlopend
 * terrein suggereert in plaats van een plaatje dat ergens ophoudt.
 */
.heroblok { position: relative; overflow: hidden; }
.heroblok > * { position: relative; z-index: 1; }

.heroblok::before {
    content: "";
    position: absolute;
    left: -120px;
    top: 50%;
    width: 340px;
    height: 540px;
    transform: translateY(-50%) rotate(-8deg);
    background-color: var(--brand);
    -webkit-mask: var(--mp-terrein) no-repeat center / contain;
    mask: var(--mp-terrein) no-repeat center / contain;
    opacity: .05;
    pointer-events: none;
}

/* Onder lg schuift het nagemaakte scherm onder de tekst en wordt de hero
   smaller. Dan loopt de tekening onder de woorden door, dus weg ermee. */
@media (max-width: 991.98px) {
    .heroblok::before { display: none; }
}
/* De donkere band met de cijfers over de planner. */
.band { background: var(--ink); }
.band .eyebrow { color: var(--accent); }
.band .cijfer { color: var(--accent); font-weight: 800; letter-spacing: -.03em; }
.band-vak { border: 1px solid #253A31; }

/*
 * Tennis in de achtergrond, en verder niets.
 *
 * Twee plekken, meer niet: de donkere band en de slotoproep. Zet je dit op elke
 * sectie, dan is het geen accent meer maar behang, en dan leest de tekst
 * erboven slechter.
 *
 * De figuren staan als data-URI in de CSS en niet als bestand: twee vormen van
 * samen nog geen kilobyte, dus dat zijn twee verzoeken minder. Ze zijn getekend
 * in wit en krijgen hun tint van de opacity, zodat ze op elke achtergrondkleur
 * werken zonder dat we ze opnieuw moeten kleuren.
 *
 * overflow: hidden op het vlak, want de bal steekt bewust over de rand.
 * aria komt er niet aan te pas: het is een pseudo-element, dus een schermlezer
 * ziet het sowieso niet.
 */
.band, .ctavlak { position: relative; overflow: hidden; }
.band > *, .ctavlak > * { position: relative; z-index: 1; }

/* De bal, half over de rand rechtsonder in de donkere band. */
.band::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -90px;
    width: 320px;
    height: 320px;
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='.9' stroke-linecap='round'><circle cx='12' cy='12' r='10.5'/><path d='M4.2 4.8c4 2.8 4 11.6 0 14.4M19.8 4.8c-4 2.8-4 11.6 0 14.4'/></svg>") no-repeat center / contain;
    opacity: .07;
    pointer-events: none;
}

/* De terreinlijnen in de slotoproep, links en rechts, licht gekanteld zodat
   het een achtergrond blijft en geen plattegrond wordt. */
.ctavlak::before,
.ctavlak::after {
    content: "";
    position: absolute;
    top: -40px;
    width: 200px;
    height: 320px;
    background: var(--mp-terrein) no-repeat center / contain;
    opacity: .09;
    pointer-events: none;
}
.ctavlak::before { left: -60px; transform: rotate(-12deg); }
.ctavlak::after { right: -60px; transform: rotate(12deg); }

/* Op een smal scherm valt de tekst over de figuren heen. Dan liever weg. */
@media (max-width: 767.98px) {
    .ctavlak::before, .ctavlak::after { display: none; }
    .band::after { right: -110px; bottom: -130px; opacity: .05; }
}

/* ==========================================================================
   Foto's

   Een foto krijgt hier nooit een eigen plek in de tekst. Ze ligt altijd
   onder iets dat al iets te zeggen heeft: de slotoproep, de contactband, en
   met de schakelaar aan ook de hero.

   Dat vraagt maar een vorm. Ze moet leesbaar blijven zonder dat je per foto
   aan de kleuren gaat sleutelen, dus de verdonkering staat in de regel en
   niet in de foto.
   ========================================================================== */

.ctavlak { background: var(--brand); }

/* De foto onder een gekleurde band. */
.vlakfotohouder {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.vlakfotohouder .vlakfoto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Eerst de foto temperen, dan pas het groen erover. Andersom zou het
       groen zo dekkend moeten worden dat er van de foto niets overblijft. */
    filter: brightness(.68);
}

.vlakfotohouder::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(26, 110, 86, .82), rgba(12, 48, 38, .88));
}

.vlakinhoud { position: relative; z-index: 1; }

/* De terreinlijnen zijn er voor een leeg vlak. Ligt er een foto onder, dan
   zijn het twee tekeningen door elkaar. */
.ctavlak-foto::before, .ctavlak-foto::after { display: none; }

/* De donkere band met een foto eronder (het bewijsblok onder de hero).

   Dezelfde houder als hierboven, met een andere sluier: die van de slotoproep
   is groen omdat dat vlak merkkleur is, en dit vlak is inkt. */
.band-foto .vlakfotohouder::after {
    background: linear-gradient(160deg, rgba(31, 31, 31, .84), rgba(10, 26, 21, .92));
}

/* De bal is er voor een leeg vlak. Ligt er een foto onder, dan zijn het twee
   tekeningen door elkaar. */
.band-foto::after { display: none; }

/* --------------------------------------------------------------------------
   Foto's in en naast kaarten

   Hier ligt de foto niet onder tekst maar ernaast of erboven, dus is er geen
   sluier nodig. Wat wel nodig is: een vaste verhouding. Zonder aspect-ratio
   bepaalt elke foto zelf hoe hoog haar kaart wordt, en dan staan drie kaarten
   naast elkaar met drie verschillende koppen op drie verschillende hoogtes.
   -------------------------------------------------------------------------- */

.kaartfoto {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    /* Een rustige achtergrond voor het moment tussen laden en getoond. */
    background: var(--zacht);
}

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

/* Het icoontje van de kaart, als chip op de foto. Het staat op de foto en niet
   erboven, want anders krijgt de kaart twee dingen boven haar titel en wordt
   ze een verzameling in plaats van een kaart. */
.kaartfoto-icoon {
    position: absolute;
    left: 14px;
    bottom: 14px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--rond-s);
    background: var(--card);
    color: var(--bad);
    box-shadow: var(--schaduw-2);
}

/* De staande foto naast de functielijst. Ze vult de hoogte van de kolom
   ernaast; de min-height is er voor het geval die kolom ooit korter wordt dan
   een foto verdraagt. */
.staandefoto {
    min-height: 420px;
    background: var(--zacht);
}

.staandefoto .staandefoto-beeld {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   De hero, met de schakelaar aan

   Hier ligt de foto niet onder een kleur maar onder de achtergrond van de
   pagina zelf. Dat is een ander probleem: de tekst is bijna zwart op bijna
   wit, dus de foto moet zo goed als verdwijnen. Wat overblijft is textuur.

   De sluier loopt schuin: het dichtst waar de titel staat, het dunst rechts
   voorbij het venstertje. Zo zie je iets van de foto zonder dat er ooit iets
   achter een woord komt te liggen.
   -------------------------------------------------------------------------- */

/* De terreinlijnen links zijn er voor een lege hero. Ligt er een foto onder,
   dan zijn het twee tekeningen door elkaar. */
.heroblok-foto::before { display: none; }

.herofoto {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.herofoto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.herofoto::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        rgba(250, 250, 248, .97) 0%,
        rgba(250, 250, 248, .95) 38%,
        rgba(250, 250, 248, .84) 72%,
        rgba(250, 250, 248, .74) 100%);
}

/* --------------------------------------------------------------------------
   De meelopende oproep op een gsm
   -------------------------------------------------------------------------- */

.mobielecta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1030;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px rgba(16, 24, 40, .06);
}

/* Het hidden-attribuut wint niet vanzelf van een display uit een andere
   regel. Zonder deze regel staat de balk er meteen. */
.mobielecta[hidden] { display: none; }

.mobielecta-gerust {
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.35;
    text-align: center;
    color: var(--ink-3);
}

.mobielecta-gerust strong { color: var(--ink); }

/* Op een gsm staat de tekst over de volle breedte, dus daar mag er geen
   dunne hoek meer overblijven. */
@media (max-width: 991.98px) {
    .herofoto::after { background: rgba(250, 250, 248, .95); }
}
/* Het venstertje waarin een schermdeel staat: drie bolletjes en een titelbalk. */
.mock-bolletjes span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #DCDAD1;
    display: inline-block;
}

/* Een rij in een nagemaakt scherm. Een list-group-item van Bootstrap staat te
   strak tegen elkaar voor dit soort overzicht. */
.mock-rij {
    border-radius: 11px;
    box-shadow: var(--schaduw-1);
}

/* Het beschikbaarheidsraster: vakjes in drie toestanden. Dit is het enige
   stuk waar Bootstrap echt niets voor heeft. */
.raster-rij { display: grid; grid-template-columns: 3.4rem repeat(4, 1fr); gap: .375rem; }
.vak {
    height: 2rem;
    border-radius: .5rem;
    background: var(--zacht);
    display: grid;
    place-items: center;
    font-size: .8rem;
    color: var(--ink-4);
}
.vak.ja    { background: var(--ok-bg); color: var(--brand); font-weight: 700; }
.vak.samen { background: var(--brand); color: #fff; font-weight: 700; }
.vak.nee   { background: #FAFAFA; color: #D8DCE2; }
.legendevakje { width: 11px; height: 11px; border-radius: 4px; display: inline-block; }

@media (max-width: 575.98px) {
    .raster-rij { grid-template-columns: 2.6rem repeat(4, 1fr); gap: .25rem; }
    .vak { height: 1.75rem; font-size: .75rem; }
}

/* De stippellijn waar een uitslag komt te staan. */
.stippel { letter-spacing: .2em; color: var(--ink-4); }


/* ==========================================================================
   Het contactblok

   Een gekleurde band met de stappen links en het formulier op een witte kaart
   rechts. De band loopt door tot onder de kaart, zodat de pagina daar een
   duidelijk einde krijgt in plaats van uit te doven.
   ========================================================================== */

.contactband {
    background: var(--brand);
    padding: clamp(3rem, 7vw, 5.5rem) 0;
}

/* Ligt er een foto onder, dan moet de band die kunnen bijsnijden. */
.contactband-foto { position: relative; overflow: hidden; }

.stappenlijst { display: grid; gap: 12px; }

.stapkaart {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    border-radius: var(--rond);
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.stapkaart .stapnummer {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--brand);
    font-weight: 800;
    font-size: .85rem;
}

.stapkaart .stapuitleg {
    display: block;
    margin-top: 3px;
    font-size: .95rem;
    color: rgba(255, 255, 255, .78);
}

.contactkaart {
    background: var(--card);
    border-radius: var(--rond-groot);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .18);
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

/* ==========================================================================
   Het contactformulier

   WPForms tekent zijn formulier met eigen CSS-variabelen. We voeden die onze
   tokens in plaats van zijn stijl te overschrijven met !important: zo blijft
   de plugin de baas over hoe een veld werkt, en wij over hoe het eruitziet.

   De waarden staan op .wpforms-container en niet op :root, want WPForms zet
   ze daar ook, en per formulier.

   WAAROM DE MATEN !important DRAGEN EN DE KLEUREN NIET

   WPForms schrijft bij elk formulier een blok in de pagina met de maten die in
   de formulierbouwer gekozen zijn:

       #wpforms-16 { --wpforms-label-size-font-size: 16px; ... }

   Dat is een id-selector, en die wint van onze twee klassen, hoe specifiek we
   die ook maken. In dat blok staan uitsluitend de maten: veldhoogte,
   letterhoogte van het label, knophoogte. De kleuren staan er niet in, en die
   komen dus wel gewoon door.

   Vandaar deze verdeling: !important op wat in dat blok staat, en niets op de
   rest. Het staat op de variabele en niet op de opmaak zelf, dus de plugin
   blijft de baas over hoe een veld werkt.

   Wil je de maten liever zonder !important: zet ze dan in de formulierbouwer
   onder Stijl. Dan verdwijnt de strijd, maar ben je wel gebonden aan de maten
   die die keuzelijst aanbiedt.
   ========================================================================== */

.wpforms-container.wpforms-container-full {
    --wpforms-field-border-radius: var(--rond-s);
    --wpforms-field-border-color: var(--line-2);
    --wpforms-field-border-size: 1px;
    --wpforms-field-background-color: var(--card);
    --wpforms-field-text-color: var(--ink);
    --wpforms-field-size-input-height: 46px !important;
    --wpforms-field-size-font-size: 1rem !important;
    --wpforms-field-size-padding-h: 14px !important;

    --wpforms-label-size-font-size: .78rem !important;
    --wpforms-label-size-line-height: 1.4 !important;
    --wpforms-label-color: var(--ink);
    --wpforms-label-sublabel-color: var(--ink-3);
    --wpforms-label-error-color: var(--bad);

    /* Bij WPForms is -alt de kleur in rust en niet die bij het zweven:
       hun regel leest --alt met --background-color enkel als terugval.
       Allebei dus op het merkgroen; het zweven regelen we hieronder. */
    --wpforms-button-background-color: var(--brand);
    --wpforms-button-background-color-alt: var(--brand);
    --wpforms-button-text-color: #fff;
    --wpforms-button-text-color-alt: #fff;
    --wpforms-button-border-radius: 999px;
    --wpforms-button-border-size: 0;
    --wpforms-button-size-height: 46px !important;
    --wpforms-button-size-padding-h: 26px !important;
    --wpforms-button-size-font-size: 1rem !important;

    /* Het vak eromheen tekent onze kaart al. */
    --wpforms-container-padding: 0;
    --wpforms-container-border-width: 0;
}

/* Elk veld over de volle breedte. WPForms zet "medium" op zestig procent,
   en dan staat een smal naamveld naast een breed tekstvak.

   Met div ervoor, want hun regel noemt het element mee (input.wpforms-...)
   en is daardoor specifieker dan een losse klasse. */
div.wpforms-container input.wpforms-field-medium,
div.wpforms-container select.wpforms-field-medium,
div.wpforms-container textarea.wpforms-field-medium,
div.wpforms-container .wpforms-field-row.wpforms-field-medium {
    max-width: 100%;
}

/* De knop krijgt dezelfde lift als de andere knoppen op deze pagina. */
div.wpforms-container button[type="submit"] {
    font-weight: 600;
    box-shadow: var(--schaduw-1);
    transition: background-color .12s, box-shadow .12s;
}

div.wpforms-container button[type="submit"]:hover:not(:disabled) {
    background-color: var(--brand-2);
    box-shadow: var(--schaduw-2);
}

/* De bevestiging na het versturen, in dezelfde vorm als een melding elders. */
.wpforms-confirmation-container-full {
    background: color-mix(in srgb, var(--ok) 10%, #fff);
    border: 0;
    border-radius: var(--rond-s);
    color: var(--ink);
    padding: 18px 20px;
}


/* Labels als kleine kapitalen, zoals de eyebrow-tekst elders op deze pagina. */
div.wpforms-container .wpforms-field-label {
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* Een sterretje zegt niets tegen wie het niet kent. */
div.wpforms-container .wpforms-required-label {
    /* Nul, zodat het sterretje zelf niets meer inneemt. Het woord
       hieronder krijgt zijn eigen grootte terug. */
    font-size: 0;
}

div.wpforms-container .wpforms-required-label::after {
    content: 'verplicht';
    color: var(--bad);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
}

/* Het vinkje voor de toestemming leest als een zin, niet als een veld. */
div.wpforms-container .wpforms-field-checkbox .wpforms-field-label-inline {
    text-transform: none;
    letter-spacing: 0;
    font-size: .95rem;
    font-weight: 400;
    color: var(--ink-2);
}