/*
Theme Name: Leflite child
Theme URI: https://lefcreative.nl/
Author: Lef Creative
Author URI: https://lefcreative.nl/
Description: Child thema van het thema Leflite
Version: 1.0.0
License: /
License URI: /
Template: leflite
*/

/* =========================================================================
   COÖPERATIE DRAAD
   General layer only — no per-section / per-page rules.
   Tokens live in custom-leftheme.json; theme options beat CSS where possible.
   Values below are measured from example/Landingspagina.pdf at 1512px.
   ========================================================================= */

:root {
    /* The hero band in the design is #fcfbed — a hair lighter than the Geel
       swatch (#fbf9dd) used by the footer and the vacancy rows. Reproduced
       verbatim; see the handover note. */
    --draad-hero-bg: #fcfbed;

    /* Let op: dit is de CONTENT-breedte (1192). De token `container-width`
       staat op 1222 omdat de bootstrap-container 15px padding per zijde heeft.
       Deze var wordt gebruikt in de calc()'s voor de full-bleed secties. */
    --draad-container: 1192px;
    --draad-container-narrow: 988px;

    --draad-label-tracking: 1.6px;   /* 10% van 16px */

    /* Knopstatussen uit de stijlsheet. Staan hier bij elkaar in plaats van
       verspreid als losse hexes; ze zijn geen palet-kleur, maar een
       interactietoestand ervan. */
    --draad-lime-klik: #cce565;
    --draad-primary-klik: #ded0d8;
    --draad-outline-klik: #742251;

    --draad-btn-gap: 38.5px;

    /* split sections: copy column padding measured from the design
       (photo edge -> copy text = 129px; copy block is ~132px off top/bottom) */
    --draad-split-pad-y: 145px;
    --draad-split-pad-inner: 141px;
}

/* ---------------------------------------------------------------- basis */

/* De pagina is een one-pager met veel ankerlinks. */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    font-family: var(--body-font);
    font-size: var(--p-size);
    line-height: var(--p-line-height);
    color: var(--black);
}

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
    font-family: var(--heading-font);
    font-weight: var(--h-font-weight);
    line-height: var(--h-line-height);
    color: var(--primary);
    margin-bottom: 33px;
}

.lef-section p {
    margin-bottom: 28px;
}

.lef-section p:last-child {
    margin-bottom: 0;
}

/* h6 is the theme's subtitle element — the design's "Label" style:
   Bricolage Grotesque Medium 16px, CAPS, 10% letterspacing. */
h6, .h6 {
    font-family: var(--subtitle-font);
    font-size: var(--h6-size);
    font-weight: 500;
    line-height: 1.2em;
    text-transform: uppercase;
    letter-spacing: var(--draad-label-tracking);
    color: var(--tertiary);
    margin-bottom: 6px;
}

/* Intro / lead paragraph. The style sheet calls this "Lato Medium", but the
   PDF renders it ~1.5x the body stroke weight (i.e. Bold) and Google Fonts
   has no Lato 500 — so 700 is the faithful match. */
.lef-section p.has-large-font-size,
.lef-section .intro p,
.lef-section p strong {
    font-weight: 700;
}

a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Links volgen de tekstkleur van hun sectie. Zonder dit werden ze op de
   aubergine secties aubergine-op-aubergine, dus onzichtbaar.
   Overal :not(.btn), anders winnen deze regels van de knopkleuren. */
.lef-section p a:not(.btn) {
    color: var(--primary);
}

section.lef-section.bg-primary a:not(.btn),
section.lef-section.bg-black a:not(.btn) {
    color: var(--white);
}

section.lef-section.bg-tertiary a:not(.btn),
section.lef-section.bg-yellow a:not(.btn),
section.lef-section.bg-gray a:not(.btn) {
    color: var(--primary);
}

/* Opsomming: Lato 20px, aubergine, chevron bullets instead of discs. */
.lef-section ul {
    list-style: none;
    padding-left: 0;
}

.lef-section ul li {
    position: relative;
    padding-left: 30px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6em;
    margin-bottom: 14px;
    color: var(--primary);
}

.lef-section ul li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.5em;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}

/* --------------------------------------------------------------- layout */

/* De containerbreedte komt uit de token `container-width` (1222) in
   custom-leftheme.json; het thema genereert daar zelf de .container-regel uit.
   Hier alleen de smallere variant: het ontwerp kent twee breedtes — 1192 voor
   hero, quote en footer, en 988 voor de tekstsecties (Wat we doen, Vacatures,
   Onze partners). +30 omdat de bootstrap-container 15px padding per zijde heeft.
   Deze selector is specifieker dan de gegenereerde `.container`, dus hij wint
   zonder extra media query. */
section.lef-section.draad-narrow > .container {
    max-width: calc(var(--draad-container-narrow) + 30px);
}

/* Text colour follows the section background token. */
section.lef-section.bg-primary,
section.lef-section.bg-primary p,
section.lef-section.bg-primary li {
    color: var(--white);
}

section.lef-section.bg-primary h1,
section.lef-section.bg-primary h2,
section.lef-section.bg-primary h3,
section.lef-section.bg-primary h4,
section.lef-section.bg-primary h5 {
    color: var(--tertiary);
}

section.lef-section.bg-primary h6 {
    color: var(--darkgray);
}

section.lef-section.bg-tertiary h6 {
    color: var(--white);
}

section.lef-section.bg-yellow,
section.lef-section.bg-yellow p,
section.lef-section.bg-yellow li {
    color: var(--primary);
}

/* Full-bleed split section: one column is a photo that runs to the viewport
   edge, the other keeps the container gutter. Used by Waarom Draad, Werken
   bij and Contact. */
section.lef-section.draad-split {
    padding: 0;
    overflow: hidden;
}

section.lef-section.draad-split > .container {
    max-width: 100%;
    padding: 0;
}

section.lef-section.draad-split > .container > .row {
    --bs-gutter-x: 0;
    margin: 0;
    align-items: stretch;
}

/* The media column is whichever side holds the photo:
   .draad-split-right = photo left / copy right
   .draad-split-left  = copy left / photo right */
section.lef-section.draad-split-right > .container > .row > *:first-child,
section.lef-section.draad-split-left > .container > .row > *:last-child {
    padding: 0;
    min-height: 400px;
    position: relative;
}

section.lef-section.draad-split-right > .container > .row > *:first-child img,
section.lef-section.draad-split-left > .container > .row > *:last-child img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

section.lef-section.draad-split-right > .container > .row > *:first-child figure,
section.lef-section.draad-split-left > .container > .row > *:last-child figure,
section.lef-section.draad-split-right > .container > .row > *:first-child .image-block,
section.lef-section.draad-split-left > .container > .row > *:last-child .image-block {
    margin: 0;
    height: 100%;
}

/* Copy column keeps the container rhythm: half of a 1192 container inside a
   1512 viewport leaves a 160px outer gutter. */
section.lef-section.draad-split-right > .container > .row > *:last-child,
section.lef-section.draad-split-left > .container > .row > *:first-child {
    padding-top: var(--draad-split-pad-y);
    padding-bottom: var(--draad-split-pad-y);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

section.lef-section.draad-split-right > .container > .row > *:last-child {
    padding-left: var(--draad-split-pad-inner);
    padding-right: max(var(--draad-split-pad-inner), calc((100vw - var(--draad-container)) / 2));
}

section.lef-section.draad-split-left > .container > .row > *:first-child {
    padding-left: max(var(--draad-split-pad-inner), calc((100vw - var(--draad-container)) / 2));
    padding-right: var(--draad-split-pad-inner);
}

/* Het thema geeft elke kolom 10px verticale marge. Op desktop verstoort dat de
   exact opgemeten sectiepadding, maar op mobiel is het juist de enige ruimte
   tussen gestapelde kolommen — daarom alleen weghalen vanaf 992px. */
@media (min-width: 992px) {
    section.lef-section.draad-hero > .container > .row > *,
    section.lef-section.draad-split > .container > .row > * {
        margin-top: 0;
        margin-bottom: 0;
    }
}

/* The hero band and the header share one continuous cream field. */
section.lef-section.draad-hero {
    background-color: var(--draad-hero-bg);
}

/* Hero photo: the design crops it to 585x564 and pins it to the container's
   right edge, so cover-crop rather than letting the 3:2 original dictate. */
section.lef-section.draad-hero .container > .row > *:last-child img {
    display: block;
    width: 585px;
    max-width: 100%;
    height: 564px;
    object-fit: cover;
    border-radius: var(--media-border-radius);
    margin-left: auto;
}

/* --------------------------------------------------------------- header */

header.navigation.bg-yellow {
    background-color: var(--draad-hero-bg);
}

/* Header CTA: the theme styles the <li>, and sets `> a { padding: unset }`,
   so the pill lives on the li and the padding goes back on the a. */
header.navigation li.menu-item-button {
    background-color: var(--secondary);
    border-radius: var(--btn-border-radius);
    /* the theme already pads the li like a button — padding on both li and a
       would double it, so keep the padding on the anchor only */
    padding: 0;
    margin: 0;
}

/* De header-CTA is een menu-item, geen .btn; de chevron zelf komt uit de
   gedeelde masker- en reveal-regels verderop. */
header.navigation li.menu-item-button > a {
    display: flex;
    align-items: center;
    /* opgemeten uit het ontwerp: pil van 141x44.5 met een label van ~16px.
       !important alleen op padding: het thema zet zelf
       `.menu-item-button > a { padding: unset !important }`. */
    padding: 12px 40px !important;
    line-height: 20px;
    color: var(--primary);
    font-family: var(--btn-font);
    font-size: 16px;
    font-weight: var(--btn-font-weight);
    text-decoration: none;
}

header.navigation li.menu-item-button:hover {
    background-color: var(--secondary-darkened);
}

/* .main-nav-menu carries negative side margins, which pushes a trailing button
   item past the container edge — give it that margin back. */
header.navigation li.menu-item-button:last-child {
    margin-right: var(--menu-items-padding-horizontal);
}

header.navigation {
    border: 0;
    box-shadow: none;
    /* only animate colour, never `top` — the theme's transition on top makes a
       visible jump at the absolute -> fixed switch */
    transition-property: background-color, border-color;
}

header.navigation .navigation-inner {
    align-items: center;
}

header.navigation .logo img,
header.navigation .logo svg {
    height: var(--logo-height);
    width: auto;
}

/* --------------------------------------------------------------- iconen */
/* De chevron en de diagonale pijl zijn overgenomen uit de vectoren van het
   ontwerp (twee balken met afgeronde buitenhoek die in één punt samenkomen —
   dezelfde vormtaal als het logo). Als CSS-mask, zodat ze currentColor volgen. */

.btn::before,
header.navigation li.menu-item-button > a::before,
body .accordions .accordion .accordion-title .accordion-toggle::before {
    content: "";
    display: inline-block;
    background-color: currentColor;
    -webkit-mask: url("images/chevron.svg") no-repeat center / contain;
    mask: url("images/chevron.svg") no-repeat center / contain;
}

/* Inline SVG-iconen (kaarten-block) volgen currentColor via fill. */
.draad-icon {
    display: block;
    fill: currentColor;
}

/* -------------------------------------------------------------- buttons */
/* Statussen exact uit Stijlsheet.pdf:
   primair lime      standaard #d9f36a (geen chevron) · actief chevron · klik #cce565
   primair aubergine standaard #5a183e · actief wit + rand · klik #ded0d8
   secundair         standaard rand (chevron altijd) · actief #5a183e · klik #742251 */

.btn {
    display: inline-flex;
    align-items: center;
    /* geen flex-gap: die zou ook ruimte innemen als de chevron verborgen is.
       De ruimte zit op de chevron zelf (margin-right), zodat een knop zonder
       chevron exact de breedte uit het ontwerp houdt. */
    gap: 0;
    border-radius: var(--btn-border-radius);
    font-family: var(--btn-font);
    font-weight: var(--btn-font-weight);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* De maat-classes van het thema komen niet consequent door (btn-big kreeg de
   medium-waarden), dus zetten we ze hier expliciet vanuit de tokens. */
.btn.btn-big {
    font-size: var(--btn-big-font-size);
    padding: var(--btn-big-padding);
    line-height: 19.5px;
}

.btn.btn-medium {
    font-size: var(--btn-medium-font-size);
    padding: var(--btn-medium-padding);
    line-height: 19.5px;
}

.btn.btn-small {
    font-size: var(--btn-small-font-size);
    padding: var(--btn-small-padding);
    line-height: 18px;
}

/* Basismaten en verborgen staat — ook voor de header-CTA, die verder dezelfde
   masker- en reveal-regels gebruikt. Zonder deze regel had zijn ::before geen
   hoogte en bleef de chevron onzichtbaar, ook bij hover. */
.btn::before,
header.navigation li.menu-item-button > a::before {
    width: 0;
    height: 19px;
    margin-right: 0;
    opacity: 0;
    flex: 0 0 auto;
    transition: width 0.2s ease, opacity 0.2s ease, margin-right 0.2s ease;
}

.btn:hover::before,
.btn:focus-visible::before,
.btn:active::before,
header.navigation li.menu-item-button:hover > a::before,
header.navigation li.menu-item-button > a:focus-visible::before {
    width: 9px;
    margin-right: 12px;
    opacity: 1;
}

/* Op een touchscreen bestaat hover niet, dus een chevron die alleen bij hover
   verschijnt is daar simpelweg nooit te zien. Daar staat hij dus vast aan. */
@media (hover: none) {
    .btn::before,
    header.navigation li.menu-item-button > a::before {
        width: 9px;
        margin-right: 12px;
        opacity: 1;
    }
}

/* het thema kan zelf ook een icoon renderen — die onderdrukken we */
.btn > i.icon {
    display: none;
}

.buttons-holder {
    display: flex;
    flex-wrap: wrap;
    gap: var(--draad-btn-gap);
    margin-top: 54px;
}

.buttons-holder:first-child {
    margin-top: 0;
}

/* --- primair, lime --- */
.btn.bg-secondary {
    background-color: var(--secondary);
    color: var(--primary);
    border-color: var(--secondary);
}

.btn.bg-secondary:hover,
.btn.bg-secondary:focus-visible {
    background-color: var(--secondary);
    border-color: var(--secondary);
    color: var(--primary);
}

.btn.bg-secondary:active {
    background-color: var(--draad-lime-klik);
    border-color: var(--draad-lime-klik);
}

/* --- primair, aubergine --- */
.btn.bg-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.btn.bg-primary:hover,
.btn.bg-primary:focus-visible {
    background-color: var(--white);
    border-color: var(--primary);
    color: var(--primary);
}

.btn.bg-primary:active {
    background-color: var(--draad-primary-klik);
    border-color: var(--draad-primary-klik);
    color: var(--primary);
}

/* --- secundair, outline (chevron altijd zichtbaar) --- */
.btn.bg-transparent {
    background-color: transparent;
    border-color: currentColor;
    color: inherit;
}

.btn.bg-transparent::before {
    width: 9px;
    margin-right: 12px;
    opacity: 1;
}

.btn.bg-transparent:hover,
.btn.bg-transparent:focus-visible {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.btn.bg-transparent:active {
    background-color: var(--draad-outline-klik);
    border-color: var(--draad-outline-klik);
    color: var(--white);
}

/* op een aubergine vlak keert de secundaire knop om naar wit */
section.lef-section.bg-primary .btn.bg-transparent:hover,
section.lef-section.bg-primary .btn.bg-transparent:focus-visible {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--primary);
}

section.lef-section.bg-primary .btn.bg-transparent:active {
    background-color: var(--draad-primary-klik);
    border-color: var(--draad-primary-klik);
    color: var(--primary);
}

/* --------------------------------------------------- kaarten slider block */
/* Eigen child-block (acf/draad-cards).
   Maten uit het ontwerp: kaart 378x488, tussenruimte 26, spoor start op 364,
   navigatieknoppen 50px links onderaan, uitgelijnd op de containerrand.

   Tot en met 2600 breekt het spoor rechts uit de container en loopt het door
   tot de vensterrand. Daardoor kan de kaartbreedte daar niet vast zijn: die
   wordt uit de spoorbreedte berekend zodat er precies 2,5 kaart in beeld
   staat en de halve kaart exact op de vensterrand eindigt. Op de
   ontwerpbreedte (1512) komt de kaart zo op ~438px uit in plaats van de 378
   uit het ontwerp — vaste kaartbreedte, 2,5 kaart in beeld en een vlakke
   rechterrand kunnen niet alle drie tegelijk waar zijn.

   Boven 2600 valt het blok terug op het oorspronkelijke ontwerp: vaste kaart
   van 378px, geen uitloop, spoor kapt af op de containerrand. */

.draad-cards {
    --draad-card-gap: 26px;
    /* Aantal kaarten in beeld. --gaps is het aantal volledig zichtbare
       tussenruimtes (= per-view naar beneden afgerond); die twee horen bij
       elkaar, dus pas ze samen aan. */
    --draad-cards-per-view: 2.5;
    --draad-cards-gaps: 2;
    /* Inspringing links: containerrand + 204, zoals in het ontwerp. */
    --draad-cards-inset: 204px;
    /* Vloeiende kaartbreedte: precies --draad-cards-per-view kaarten vullen
       het spoor. Boven 2600 wordt deze overruled (zie onderaan dit blok). */
    --draad-card-width: calc(
        (100% - var(--draad-cards-gaps) * var(--draad-card-gap))
        / var(--draad-cards-per-view)
    );
    /* hoever het blok rechts uit de container breekt; 0 = niet */
    --draad-cards-bleed: calc(50% - 50vw);

    position: relative;
    padding-left: var(--draad-cards-inset);

    /* Rechts uit de container breken tot de vensterrand. Het blok vult zijn
       kolom en die ligt precies op de containerrand (bootstrap heft de
       rij-marge en de kolom-padding tegen elkaar weg), dus de buitenmarge is
       (100vw - eigen breedte) / 2 — en 50% is precies de helft van die eigen
       breedte. Zo klopt dit op elke breakpoint zonder de containerbreedte te
       hoeven kennen. */
    margin-right: var(--draad-cards-bleed);
}

/* Boven 2600 terug naar het ontwerp zoals het was: geen uitloop naar de
   vensterrand en een vaste kaart van 378px, dus het spoor kapt af op de
   containerrand.

   De grens ligt op 2600 en niet lager omdat "retina" niets zegt over de
   CSS-breedte: een MacBook Pro 14" is 1512 en een 16" is 1728 CSS-pixels, en
   een Studio Display / 27" iMac 5K staat standaard op 2560. Die vallen dus
   allemaal binnen het vloeiende gedrag. Verhoudingsgewijs klopt dat ook: op
   2560 wordt de kaart 648px = 25,3% van het venster, tegen 378 / 1512 = 25,0%
   in het ontwerp.

   Waar het wél misgaat is ultrawide (21:9, bv. 3440x1440): breed maar laag.
   Daar zou de kaart 824x1064 worden en niet eens meer in de vensterhoogte
   passen. Vandaar deze terugval. */
@media (min-width: 2601px) {
    .draad-cards {
        --draad-card-width: 378px;
        --draad-cards-bleed: 0px;
    }
}

/* 100vw telt de schuifbalk mee, dus het blok steekt ~8px voorbij de
   documentrand. Het thema vangt dat al af met body{overflow-x:hidden}, maar
   hier afkappen houdt het probleem lokaal. */
section.lef-section:has(.draad-cards) {
    overflow-x: clip;
}

.draad-cards__track {
    display: flex;
    gap: var(--draad-card-gap);
    overflow-x: auto;
    /* geen scroll-behavior hier: de knoppen tweenen zelf (zie draad-cards.js) */
    overscroll-behavior-x: contain;
    /* Geen scroll-snap: het vastklikken maakte het schuiven schokkerig. Vrij
       scrollen leest vloeiender; de knoppen schuiven exact één kaart op en de
       laatste kaart komt nog steeds vlak uit doordat het doel wordt afgekapt. */
    /* ruimte voor de schaduwloze focusring en om afkappen te voorkomen */
    padding-block: 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.draad-cards__track::-webkit-scrollbar {
    display: none;
}

.draad-cards__track:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 4px;
}

/* De kaartbreedte volgt uit de spoorbreedte: n kaarten + de tussenruimtes
   ertussen vullen het zichtbare spoor exact op. De 100% in --draad-card-width
   wordt pas hier opgelost, dus tegen de breedte van het spoor. */
.draad-cards__slide {
    flex: 0 0 var(--draad-card-width);
    max-width: 100%;
    /* Zonder dit staat min-width op auto (= min-content) en rekt een lange
       titel als "Energiegemeenschappen" de kaart breder dan zijn buren. Met
       een vaste kaarthoogte viel dat niet op; nu de hoogte uit de breedte
       volgt, gaf het ongelijke kaarten. */
    min-width: 0;
}

/* Onder 1282px is de container smaller, maar de inspringing van 204px niet:
   2,5 kaart knijpt de kaarten dan tot ruim onder de 300px. Minder inspringen
   houdt ze leesbaar; de twee knoppen (2x50 + 12 tussenruimte = 112px) passen
   links nog steeds naast het spoor. */
@media (min-width: 992px) and (max-width: 1281px) {
    .draad-cards {
        --draad-cards-inset: 140px;
    }
}

/* --- de kaart zelf --- */
/* De breedte is vloeiend (zie .draad-cards__slide), dus de hoogte volgt uit de
   verhouding van het ontwerp (378x488) in plaats van uit een vaste 488px.
   Zo blijft de kaart op elke schermbreedte dezelfde vorm houden. */
.draad-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 378 / 488;
    border-radius: var(--media-border-radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

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

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

.draad-card__body {
    position: relative;
    z-index: 2;
    padding: var(--card-content-padding);
    padding-right: 70px;
}

/* De kaart mag niet meer meegroeien met een lang woord, dus moet dat woord
   kunnen breken. hyphens werkt hier: de pagina staat op lang="nl-NL". */
.draad-card__title,
.draad-card__text {
    overflow-wrap: break-word;
    hyphens: auto;
}

.draad-card__title {
    font-size: var(--h4-size);
    line-height: 1.2em;
    margin-bottom: 8px;
}

.draad-card__text {
    font-size: var(--card-excerpt-font-size);
    line-height: var(--card-excerpt-line-height);
    margin: 0;
}

/* --- type: foto --- */
.draad-card--image {
    background-color: var(--primary);
}

.draad-card--image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.75) 100%);
    pointer-events: none;
}

.draad-card--image .draad-card__title,
.draad-card--image .draad-card__text {
    color: var(--white);
}

/* --- type: illustratie --- */
.draad-card--illustration {
    background-color: var(--yellow);
    justify-content: space-between;
}

.draad-card--illustration .draad-card__media {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 0;
    padding: 24px 24px 0;
}

.draad-card--illustration .draad-card__media img {
    width: auto;
    max-width: 100%;
    max-height: 260px;
    height: auto;
    object-fit: contain;
}

.draad-card--illustration .draad-card__title,
.draad-card--illustration .draad-card__text {
    color: var(--primary);
}

/* --- de diagonale pijl: alleen bij een link, alleen bij hover --- */
.draad-card__arrow {
    position: absolute;
    right: var(--card-content-padding);
    bottom: var(--card-content-padding);
    width: 21px;
    height: 21px;
    opacity: 0;
    transform: translate(-4px, 4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.draad-card--linked:hover .draad-card__arrow,
.draad-card--linked:focus-visible .draad-card__arrow {
    opacity: 1;
    transform: translate(0, 0);
}

/* --- navigatieknoppen --- */
.draad-cards__nav {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    gap: 12px;
    z-index: 3;
}

.draad-cards__btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid var(--primary);
    background-color: transparent;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.draad-cards__btn .draad-icon {
    width: 9px;
    height: 19px;
}

.draad-cards__btn--prev .draad-icon {
    transform: rotate(180deg);
}

.draad-cards__btn--next {
    background-color: var(--primary);
    color: var(--white);
}

.draad-cards__btn:hover:not(:disabled) {
    background-color: var(--primary);
    color: var(--white);
}

.draad-cards__btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* ------------------------------------------------------------ accordion */
/* Vacancy rows: Geel pill, chevron on the LEFT of the title, hours/locatie
   pushed to the right edge. Measured from the design: 986px wide block,
   ~94px row height, 23px between rows. */

body .accordions {
    max-width: 986px;
    margin: 0 auto;
}

body .accordions .accordion {
    background-color: var(--yellow);
    border: 0;
    border-radius: var(--media-border-radius);
    margin-bottom: 23px;
    overflow: hidden;
}

body .accordions .accordion .accordion-title {
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 33px 40px 33px 28px;
    cursor: pointer;
}

body .accordions .accordion .accordion-title .title {
    /* the hours/locatie <span> lives inside .title, so .title does the spacing */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex: 1 1 auto;
    order: 2;
    font-family: var(--heading-font);
    font-weight: 500;
    font-size: var(--h4-size);
    line-height: 1.2em;
    color: var(--primary);
}

body .accordions .accordion .accordion-title .draad-vacancy-meta {
    font-family: var(--body-font);
    font-size: var(--p-size);
    font-weight: 400;
    line-height: 1.2em;
    white-space: nowrap;
    color: var(--primary);
}

/* Chevron: the theme ships plus/x glyphs, the design uses a chevron that flips. */
body .accordions .accordion .accordion-title .accordion-toggle {
    order: 1;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    color: var(--primary);
}

body .accordions .accordion .accordion-title .accordion-toggle i {
    /* !important: the component toggles .show/.hide on these from a later sheet */
    display: none !important;
}

/* Dezelfde abstracte chevron als de knoppen, 90 graden gedraaid.
   De rotatie draait om het midden van de ONGEDRAAIDE 9x19-box, dus die box moet
   zelf gecentreerd staan — anders komt de chevron scheef onder de titel te
   hangen. Flex-centreren doet dat exact; absolute plaatsing met een vaste top
   deed dat niet. */
body .accordions .accordion .accordion-title .accordion-toggle::before {
    width: 9px;
    height: 19px;
    transform: rotate(90deg);
    transform-origin: center;
    transition: transform 0.25s ease;
}

body .accordions .accordion.opened .accordion-title .accordion-toggle::before {
    transform: rotate(-90deg);
}

body .accordions .accordion .accordion-content {
    color: var(--primary);
    /* het thema zet hier 15px padding, die bovenop de uitlijning van de
       content-wrapper kwam en de tekst 15px uit de titel liet lopen */
    padding: 0;
}

body .accordions .accordion .accordion-content .content-wrapper {
    padding: 0 40px 33px 72px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

body .accordions .accordion .accordion-content .content-wrapper p {
    margin: 0;
    max-width: 620px;
}

body .accordions .accordion .accordion-content .content-wrapper p:last-child {
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------- quote */

/* Quote = a column rendered as a card on Lila (col opts isCard + cardBg). */
.lef-section .col-card.bg-tertiary {
    background-color: var(--tertiary);
    border-radius: var(--media-border-radius);
    padding: 137px 40px;
    text-align: center;
}

.lef-section .col-card.bg-tertiary p,
.lef-section .col-card.bg-tertiary h2,
.lef-section .col-card.bg-tertiary h3 {
    font-family: var(--heading-font);
    font-weight: 500;
    font-size: var(--h3-size);
    line-height: 1.4em;
    color: var(--primary);
    margin: 0;
}

/* ------------------------------------------------------------- partners */

section.lef-section.draad-partners > .container > .row {
    row-gap: 100px;
    align-items: center;
}

section.lef-section.draad-partners > .container > .row > * {
    display: flex;
    align-items: center;
    justify-content: center;
}

section.lef-section.draad-partners img {
    max-height: 100px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: grayscale(1);
}

/* ----------------------------------------------------------------- form */
/* Uit het ontwerp gemeten: veld 39.5px hoog, RECHTE hoeken (breedte bewust op
   100% i.p.v. de 478px uit het ontwerp — op verzoek),
   rand en placeholder rgba(255,255,255,.3), 12px binnenmarge links.
   Ritme: label -> veld 9px, veld -> volgend label 25px. */

.gform_wrapper .gfield_required {
    display: none;
}

section.lef-section.bg-primary .gform_wrapper .gform_fields {
    display: block;
}

section.lef-section.bg-primary .gform_wrapper .gfield {
    margin-bottom: 25px;
}

section.lef-section.bg-primary .gform_wrapper label,
section.lef-section.bg-primary .gform_wrapper legend {
    display: block;
    color: var(--white);
    font-family: var(--body-font);
    font-size: var(--p-size);
    font-weight: 400;
    line-height: 1.2em;
    margin-bottom: 9px;
}

section.lef-section.bg-primary .gform_wrapper input[type="text"],
section.lef-section.bg-primary .gform_wrapper input[type="email"],
section.lef-section.bg-primary .gform_wrapper input[type="tel"],
section.lef-section.bg-primary .gform_wrapper textarea {
    width: 100%;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0;
    padding: 9px 12px;
    color: var(--white);
    font-family: var(--body-font);
    font-size: var(--p-size);
    line-height: 19.5px;
}

section.lef-section.bg-primary .gform_wrapper textarea {
    height: 126px;
    resize: vertical;
}

section.lef-section.bg-primary .gform_wrapper input::placeholder,
section.lef-section.bg-primary .gform_wrapper textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
    opacity: 1;
}

section.lef-section.bg-primary .gform_wrapper input:focus,
section.lef-section.bg-primary .gform_wrapper textarea:focus {
    outline: none;
    border-color: var(--secondary);
}

/* De verstuurknop is via gform_submit_button een <button class="btn ..."> en
   erft daarmee alle knopstijlen inclusief de chevron bij hover. */
section.lef-section.bg-primary .gform_wrapper .gform_footer {
    padding: 0;
    margin: 46px 0 0;
}

/* De contactgegevens staan in dezelfde tekstblok ná de [gravityform]; in het
   ontwerp zit daar 106px tussen. Alleen alinea's die op een Gravity Form
   volgen, zodat andere aubergine-secties ongemoeid blijven. */
section.lef-section.bg-primary .content-wrapper > [class*="gf_browser"] ~ p,
section.lef-section.bg-primary .content-wrapper > .gform_wrapper ~ p {
    margin-top: 106px;
}

/* --------------------------------------------------------------- footer */

#footer.bg-yellow {
    background-color: var(--yellow);
    color: var(--primary);
}

#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer .widget-title {
    font-family: var(--heading-font);
    font-weight: 500;
    font-size: var(--h4-size);
    color: var(--primary);
    margin-bottom: 20px;
}

#footer p,
#footer li,
#footer a {
    color: var(--primary);
}

/* Het social-icoon komt uit het icoonfont van het thema; in het ontwerp is het
   ~27px breed. */
#footer .social-link .icon {
    font-size: 27px;
}

#footer a {
    text-decoration: none;
}

#footer a:hover {
    text-decoration: underline;
}

/* Decorative "draad" line band above the socket. Drawn with ::after so the
   footer needs no extra markup. */
#footer .footer-inner {
    position: relative;
    /* Het ontwerp laat maar ~38px over tussen het patroon en de socket; de
       standaard section-padding van 100px maakte de onderkant veel te ruim. */
    padding-bottom: 38px;
}

#footer .footer-inner::after {
    content: "";
    display: block;
    width: 100%;
    max-width: var(--draad-container);
    margin: 182px auto 0;
    /* het ontwerp laat maar ~38px ruimte tussen patroon en socket */
    aspect-ratio: 1194.5 / 274.8;
    background: url("images/draad-pattern.png") no-repeat center bottom;
    background-size: 100% auto;
}

/* Socket: theme renders it as a plain bulleted list. */
.socket {
    background-color: var(--yellow);
    color: var(--primary);
    padding: 0 0 24px;
}

/* Het thema wikkelt de twee socket-helften in .socket-inner (binnen .container >
   .row > .col-md-12), dus de flex-rij hoort daar en niet op .container.
   position/padding-bottom maken ruimte voor de creditsregel eronder. */
.socket .socket-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 34px;
}

.socket ul {
    list-style: none;
    display: flex;
    gap: 40px;
    margin: 0;
    padding: 0;
}

/* De credits hangen aan het einde van de tweede socket-helft, maar horen als
   eigen gecentreerde regel onder beide helften te staan. */
.socket-credits {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    font-size: var(--small-font-size);
}

.socket-credits__sep {
    margin: 0 6px;
    opacity: 0.5;
}

.socket a {
    color: var(--primary);
    text-decoration: none;
}

.socket a:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------- mobile */

@media (max-width: 991px) {
    section.lef-section.draad-split > .container > .row {
        flex-direction: column;
    }

    section.lef-section.draad-split-right > .container > .row > *:first-child,
    section.lef-section.draad-split-left > .container > .row > *:last-child {
        min-height: 320px;
    }

    section.lef-section.draad-split-right > .container > .row > *:last-child,
    section.lef-section.draad-split-left > .container > .row > *:first-child {
        padding: 60px var(--general-padding);
    }

    /* photo above copy on mobile, whichever side it sits on desktop */
    section.lef-section.draad-split-left > .container > .row {
        flex-direction: column-reverse;
    }

    /* the hero photo is pinned to 585x564 on desktop; let it scale on mobile */
    section.lef-section.draad-hero .container > .row > *:last-child img {
        width: 100%;
        height: auto;
        aspect-ratio: 585 / 564;
        margin-left: 0;
    }

    body .accordions .accordion .accordion-title {
        align-items: flex-start;
        gap: 12px;
        padding: 20px;
    }

    /* the meta <span> lives inside .title, so stack them there */
    body .accordions .accordion .accordion-title .title {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 6px;
        min-width: 0;
    }

    body .accordions .accordion .accordion-title .draad-vacancy-meta {
        white-space: normal;
    }

    body .accordions .accordion .accordion-content .content-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 0 20px 24px 52px;
    }

    .lef-section .col-card.bg-tertiary {
        padding: 50px 24px;
    }

    .socket .socket-inner {
        flex-direction: column;
        text-align: center;
    }
}


/* ------------------------------------------------ mobiel: correcties ---- */
/* Er is geen mobiel ontwerp; dit zijn correcties op punten die op smalle
   schermen aantoonbaar misgingen. */

@media (max-width: 991px) {
    /* Gestapelde kolommen: de 10px kolommarge van het thema alleen geeft maar
       20px lucht tussen tekst en foto — te krap voor een hero. */
    section.lef-section.draad-hero > .container > .row,
    section.lef-section.draad-split > .container > .row {
        row-gap: 20px;
    }

    /* De kaarten slider hield zijn desktop-inspringing van 204px vast,
       waardoor de kaarten tot 141px werden samengeknepen. Op mobiel staat de
       navigatie onder het spoor in plaats van ernaast. */
    .draad-cards {
        /* Geen 2,5 kaart hier: dat zou de kaart tot ~130px knijpen. Vaste
           breedte met een kijkrandje; het spoor loopt wel rechts door tot de
           vensterrand (de negatieve rechtermarge geldt ook hier). */
        --draad-card-width: min(320px, 82vw);

        display: flex;
        flex-direction: column;
        padding-left: 0;
    }

    .draad-cards__track {
        order: 1;
    }

    .draad-cards__nav {
        position: static;
        order: 2;
        margin-top: 24px;
    }

    /* 70px vrijhouden voor de pijl is op een kaart van ~320px te veel: dat
       laat maar 220px over voor de tekst. De pijl verschijnt toch alleen bij
       hover, en dat bestaat op touch niet. */
    .draad-card__body {
        padding-right: var(--card-content-padding);
    }

    /* 38.5px tussen gestapelde knoppen is op mobiel te veel lucht */
    .buttons-holder {
        gap: 16px;
        margin-top: 32px;
    }

    /* Partnerlogo's stapelden tot acht rijen diep; twee per rij leest beter. */
    section.lef-section.draad-partners > .container > .row {
        row-gap: 48px;
    }

    section.lef-section.draad-partners > .container > .row > * {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* De credits stonden absoluut onderaan terwijl de socket op mobiel een
       kolom wordt — dan overlappen ze de links. */
    .socket .socket-inner {
        padding-bottom: 0;
        align-items: center;
    }

    .socket-credits {
        position: static;
        margin-top: 12px;
    }

    /* Het patroon schaalt mee naar ~86px hoog; 182px lucht erboven is dan te
       veel. */
    #footer .footer-inner::after {
        margin-top: 60px;
    }

    /* Contactgegevens onder het formulier: 106px is desktop-ritme. */
    section.lef-section.bg-primary .content-wrapper > [class*="gf_browser"] ~ p,
    section.lef-section.bg-primary .content-wrapper > .gform_wrapper ~ p {
        margin-top: 48px;
    }
}

/* ---------------------------------------------------- mobiele navigatie --- */
/* De hamburger van het thema zet de tussenruimte met `span + span`. Er wordt
   een inline <script> tussen de tweede en derde balk gerenderd, waardoor die
   selector de derde balk overslaat: die plakte tegen de tweede en het icoon
   zag eruit als een "=" in plaats van drie streepjes. :not(:first-of-type)
   telt alleen spans en is dus ongevoelig voor wat er tussen staat. */
.hamburger-icon span:not(:first-of-type) {
    margin-top: 8px;
}

.hamburger-icon span {
    background-color: var(--primary);
}

/* Uitgeschoven menupaneel: Geel vlak in de huisstijl, met de items in het
   kopfont zoals de rest van de site. Het thema stijlt de items via
   `nav.mobile-navigation .menu a` (twee klassen), dus die selector moeten we
   evenaren om te winnen — de bovenliggende padding van 120px laten we staan,
   die houdt het menu vrij van de header. */
body nav.mobile-navigation {
    background-color: var(--yellow);
}

body nav.mobile-navigation .menu {
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

body nav.mobile-navigation .menu li {
    margin: 0 0 4px;
}

body nav.mobile-navigation .menu a {
    display: block;
    padding: 12px 0;
    font-family: var(--heading-font);
    font-size: var(--mobile-menu-font-size);
    font-weight: 500;
    line-height: 1.2em;
    color: var(--primary);
    text-decoration: none;
}

body nav.mobile-navigation .menu a:hover,
body nav.mobile-navigation .menu a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Het CTA-item krijgt dezelfde lime pil als in de header. Het thema zet op
   elk menu-item `li { width: 100% }`, waardoor de pil een lime balk over de
   volle schermbreedte werd — vandaar `width: auto`. En net als in de header
   haalt het thema de padding van de link weg met
   `.menu-item-button > a { padding: unset !important }`, dus die moet met
   dezelfde kracht terug. */
body nav.mobile-navigation .menu li.menu-item-button {
    display: inline-flex;
    width: auto;
    /* het thema pádt de li zelf al als knop (8px 25px); samen met de padding op
       de link zou dat dubbel tellen — net als in de header. */
    padding: 0;
    margin-top: 24px;
    background-color: var(--secondary);
    border-radius: var(--btn-border-radius);
}

body nav.mobile-navigation .menu li.menu-item-button:hover,
body nav.mobile-navigation .menu li.menu-item-button:focus-within {
    background-color: var(--secondary-darkened);
}

body nav.mobile-navigation .menu li.menu-item-button a {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 12px 40px !important;
    font-family: var(--btn-font);
    font-size: 16px;
    line-height: 20px;
    color: var(--primary);
}

body nav.mobile-navigation .menu li.menu-item-button a:hover,
body nav.mobile-navigation .menu li.menu-item-button a:focus-visible {
    text-decoration: none;
}

/* Dezelfde chevron als de header-CTA, alleen vast zichtbaar: dit item bestaat
   uitsluitend op touch, waar hover niet bestaat. */
body nav.mobile-navigation .menu li.menu-item-button > a::before {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    width: 9px;
    height: 19px;
    margin-right: 12px;
    background-color: currentColor;
    -webkit-mask: url("images/chevron.svg") no-repeat center / contain;
    mask: url("images/chevron.svg") no-repeat center / contain;
}

/* De sluit-hamburger binnen het paneel staat rechtsboven, uitgelijnd met die
   in de header. */
body nav.mobile-navigation .mobile-menu-toggle-position {
    position: absolute;
    top: 49px;
    right: var(--general-padding);
}