/*
 * De Bijlesgroep Vacatures (1.1.0). Binnen de kop en de voet van Neve.
 * Huisstijl: Inter, primair #0366D6, navy #0A1F44. De banden lopen van rand
 * tot rand, de inhoud staat in een brede kolom van hoogstens 1200 pixels, en
 * op een telefoon staat alles onder elkaar.
 */

/* ---- Inter, uit de plugin zelf ----
   Vier gewichten in de latin-subset (SIL Open Font License, zie
   assets/fonts/OFL.txt), dezelfde bestanden als dbg-platform. Geen externe
   fontdienst. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/inter-latin-400.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/inter-latin-500.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/inter-latin-600.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/inter-latin-700.woff2") format("woff2");
}

.dbgwb {
    --dbgwb-blauw: #0366D6;
    --dbgwb-blauw-donker: #0250A6;
    --dbgwb-navy: #0A1F44;
    --dbgwb-tint: #EAF2FC;
    --dbgwb-band: #F5F8FC;
    --dbgwb-rand: #DCE5F1;
    --dbgwb-tekst: #33415C;
    --dbgwb-zacht: #4A5873;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--dbgwb-tekst);
    font-size: 17px;
    line-height: 1.6;
}

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

.dbgwb h1,
.dbgwb h2,
.dbgwb h3 {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--dbgwb-navy);
    letter-spacing: -0.01em;
}

.dbgwb h1 {
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    line-height: 1.12;
    font-weight: 700;
    margin: 0 0 18px;
}

.dbgwb h2 {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 24px;
}

.dbgwb h3 {
    font-size: 1.1rem;
    line-height: 1.3;
    font-weight: 600;
    margin: 0 0 6px;
}

.dbgwb p {
    margin: 0 0 12px;
}

.dbgwb a {
    color: var(--dbgwb-blauw);
}

.dbgwb a:focus-visible,
.dbgwb summary:focus-visible,
.dbgwb-zoekveld:focus-visible,
.dbgwb-beheer button:focus-visible,
.dbgwb-beheer a:focus-visible {
    outline: 3px solid var(--dbgwb-navy);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---- De brede kolom en de banden ---- */

.dbgwb-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* 1.1.1: uitvoer in een pagina van het thema (een shortcode of [jobs]) staat
   altijd in een container, ook in een sjabloon over de volle breedte. */
.dbgwb-omhulsel {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 24px 40px;
    box-sizing: border-box;
}

.dbgwb-wrap--ruim {
    padding-top: 40px;
    padding-bottom: 56px;
}

.dbgwb-sectie {
    padding: 64px 0;
}

.dbgwb-band {
    background: var(--dbgwb-band);
    border-top: 1px solid var(--dbgwb-rand);
    border-bottom: 1px solid var(--dbgwb-rand);
}

.dbgwb-lead {
    font-size: 1.05rem;
    max-width: 70ch;
    margin: -12px 0 24px;
}

.dbgwb .dbgwb-subkop {
    margin: 44px 0 16px;
}

/* ---- De hero ---- */

.dbgwb-hero {
    background: linear-gradient(180deg, var(--dbgwb-tint) 0%, #F7FAFE 100%);
    border-bottom: 1px solid var(--dbgwb-rand);
    padding: 40px 0 56px;
}

.dbgwb-hero--klein {
    padding: 48px 0;
}

.dbgwb-hero--klein .dbgwb-pillen {
    margin-top: 18px;
}

/* De pagina vacatures: zoeken en extra gezocht naast elkaar, en weinig ruimte
   tussen de twee witte blokken met provincies. */
.dbgwb-duo--zoek {
    align-items: start;
    gap: 32px;
}

.dbgwb-extrablok {
    background: var(--dbgwb-band);
    border: 1px solid var(--dbgwb-rand);
    border-radius: 18px;
    padding: 24px;
}

.dbgwb-extrablok p {
    color: var(--dbgwb-zacht);
}

.dbgwb-extrablok .dbgwb-kaarten {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.dbgwb-sectie--zoek + .dbgwb-sectie--regio,
.dbgwb-sectie--regio + .dbgwb-sectie--plaatsen {
    padding-top: 8px;
}

.dbgwb-hero__raster {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}

.dbgwb-kruimel {
    font-size: 0.9rem;
    margin-bottom: 20px;
    color: var(--dbgwb-zacht);
}

.dbgwb-label {
    display: inline-block;
    margin: 0 0 14px;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--dbgwb-navy);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.dbgwb-intro {
    font-size: 1.2rem;
    line-height: 1.55;
    color: var(--dbgwb-navy);
    max-width: 58ch;
}

.dbgwb-hero__kaart {
    background: #ffffff;
    border: 1px solid var(--dbgwb-rand);
    border-radius: 18px;
    padding: 26px 28px;
    box-shadow: 0 18px 40px rgba(10, 31, 68, 0.08);
}

.dbgwb-kenmerken {
    margin: 0 0 18px;
    padding: 0;
}

.dbgwb-kenmerken div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--dbgwb-rand);
}

.dbgwb-kenmerken dt {
    font-weight: 600;
    color: var(--dbgwb-navy);
    margin: 0;
    padding: 0;
}

.dbgwb-kenmerken dd {
    margin: 0;
    padding: 0;
}

.dbgwb-pillen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dbgwb-pillen li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--dbgwb-tint);
    color: var(--dbgwb-navy);
    font-size: 0.9rem;
    font-weight: 500;
}

.dbgwb-pillen .dbgwb-svg {
    width: 16px;
    height: 16px;
    color: var(--dbgwb-blauw);
    flex: none;
}

/* ---- Knoppen ---- */

.dbgwb-acties {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 26px 0 0;
}

/* De regel .dbgwb p hierboven zette de ruimte boven de knoppen op nul (op
   /vacatures/ stonden ze tegen de korte punten aan). Alleen de bovenkant: de
   zijkanten blijven van .dbgwb-slot p, zodat de knop in het slotblok in het
   midden blijft (ronde 0.46.12). */
.dbgwb p.dbgwb-acties {
    margin-top: 26px;
}

.dbgwb a.dbgwb-knop,
.dbgwb a.dbgwb-knop:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 12px 28px;
    border-radius: 12px;
    background: var(--dbgwb-blauw);
    border: 2px solid var(--dbgwb-blauw);
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    line-height: 1.2;
}

.dbgwb a.dbgwb-knop:hover {
    background: var(--dbgwb-blauw-donker);
    border-color: var(--dbgwb-blauw-donker);
    color: #ffffff;
}

.dbgwb a.dbgwb-knop--secundair,
.dbgwb a.dbgwb-knop--secundair:visited {
    background: #ffffff;
    color: var(--dbgwb-blauw);
}

.dbgwb a.dbgwb-knop--secundair:hover {
    background: var(--dbgwb-tint);
    color: var(--dbgwb-blauw-donker);
}

.dbgwb a.dbgwb-knop--licht,
.dbgwb a.dbgwb-knop--licht:visited {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--dbgwb-navy);
}

.dbgwb a.dbgwb-knop--licht:hover {
    background: var(--dbgwb-tint);
    border-color: var(--dbgwb-tint);
    color: var(--dbgwb-navy);
}

/* ---- Wat je bij ons krijgt ---- */

.dbgwb-voordelen {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dbgwb-voordeel {
    background: #ffffff;
    border: 1px solid var(--dbgwb-rand);
    border-radius: 16px;
    padding: 22px 20px;
}

.dbgwb-voordeel p {
    margin: 0;
    font-size: 0.95rem;
}

.dbgwb-icoon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: var(--dbgwb-tint);
    color: var(--dbgwb-blauw);
}

/* ---- Zo werkt het ---- */

.dbgwb-stappen {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.dbgwb-stap {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--dbgwb-rand);
    border-radius: 16px;
    padding: 24px 22px;
}

.dbgwb-stap p {
    margin: 0;
    font-size: 0.95rem;
}

.dbgwb-stap__nr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--dbgwb-navy);
    color: #ffffff;
    font-weight: 700;
}

/* ---- Wie we zoeken en de gegevens in de buurt ---- */

.dbgwb-duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.dbgwb-duo--los {
    grid-template-columns: minmax(0, 1fr);
}

.dbgwb-duo--los .dbgwb-vinkjes {
    columns: 2 320px;
    column-gap: 40px;
}

.dbgwb-blok {
    background: #ffffff;
    border: 1px solid var(--dbgwb-rand);
    border-radius: 18px;
    padding: 28px;
}

.dbgwb-blok--lokaal {
    background: var(--dbgwb-tint);
    border-color: #CFE0F6;
}

.dbgwb-blok h2 {
    font-size: 1.35rem;
    margin-bottom: 16px;
}

.dbgwb-vinkjes {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dbgwb-vinkjes li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 12px;
    break-inside: avoid;
}

.dbgwb-vinkjes li:last-child {
    margin-bottom: 0;
}

.dbgwb-vinkjes .dbgwb-svg {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 3px;
    color: var(--dbgwb-blauw);
}

/* ---- Kaarten met vacatures ---- */

.dbgwb-kaarten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dbgwb-kaart a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    padding: 18px 20px;
    border: 1px solid var(--dbgwb-rand);
    border-radius: 14px;
    background: #ffffff;
    color: var(--dbgwb-navy);
    text-decoration: none;
}

.dbgwb-kaart a:hover {
    border-color: var(--dbgwb-blauw);
}

.dbgwb-kaart strong {
    color: var(--dbgwb-blauw);
    font-size: 1.05rem;
    line-height: 1.35;
}

.dbgwb-kaart span {
    font-size: 0.92rem;
    color: var(--dbgwb-zacht);
}

.dbgwb-kaarten--klein {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.dbgwb-kaarten--klein .dbgwb-kaart a {
    padding: 12px 16px;
}

.dbgwb-kaart--extra a {
    border-left: 5px solid var(--dbgwb-blauw);
}

/* ---- Veelgestelde vragen ---- */

.dbgwb-vragen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
    align-items: start;
}

.dbgwb-vraag {
    background: #ffffff;
    border: 1px solid var(--dbgwb-rand);
    border-radius: 14px;
    padding: 0;
}

.dbgwb-vraag summary {
    cursor: pointer;
    list-style: none;
    padding: 18px 48px 18px 20px;
    position: relative;
    font-weight: 600;
    color: var(--dbgwb-navy);
}

.dbgwb-vraag summary::-webkit-details-marker {
    display: none;
}

.dbgwb-vraag summary::after {
    content: "+";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--dbgwb-blauw);
}

.dbgwb-vraag[open] summary::after {
    content: "\2212";
}

.dbgwb-vraag p {
    margin: 0;
    padding: 0 20px 18px;
}

.dbgwb p.dbgwb-meer-link {
    margin-top: 16px;
    font-weight: 600;
}

/* Een tikvak van minstens 44 pixels hoog. */
.dbgwb-meer-link a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.dbgwb-antwoorden {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 40px;
}

.dbgwb-antwoord h2 {
    font-size: 1.2rem;
    margin-bottom: 8px;
}

/* ---- Het slotblok ---- */

.dbgwb-slot {
    background: var(--dbgwb-navy);
    color: #E6ECF7;
    text-align: center;
}

.dbgwb-slot h2 {
    color: #ffffff;
    margin-bottom: 10px;
}

.dbgwb-slot p {
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
}

.dbgwb-slot .dbgwb-acties {
    justify-content: center;
}

/* ---- Vacatures in de buurt en meer vacatures (ronde 0.46.12: kaarten in
   plaats van losse links) ---- */

.dbgwb-sectie--meer {
    padding: 48px 0 64px;
}

/* Een tussenkop direct onder de kop van een blok krijgt geen extra ruimte. */
.dbgwb h2 + .dbgwb-subkop {
    margin-top: 0;
}

/* ---- Zoek je plaats ---- */

.dbgwb-zoek label {
    display: block;
    font-weight: 600;
    color: var(--dbgwb-navy);
    margin-bottom: 8px;
}

.dbgwb-zoekveld {
    width: 100%;
    max-width: 520px;
    min-height: 50px;
    padding: 10px 14px;
    border: 2px solid #8FA6C8;
    border-radius: 10px;
    font-size: 1rem;
    font-family: inherit;
    background: #ffffff;
    color: var(--dbgwb-navy);
}

.dbgwb-uitleg {
    font-size: 0.92rem;
    color: var(--dbgwb-zacht);
}

.dbgwb-treffers {
    columns: 3 240px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.dbgwb-treffers li {
    margin-bottom: 8px;
    break-inside: avoid;
}

/* Elke treffer is een tikvak van minstens 44 pixels (ronde 0.46.12). */
.dbgwb-treffers a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--dbgwb-rand);
    border-radius: 10px;
    background: #ffffff;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

.dbgwb-treffers a:hover {
    border-color: var(--dbgwb-blauw);
}

.dbgwb-provincies {
    border-bottom: 1px solid var(--dbgwb-rand);
}

.dbgwb-provincie {
    border-top: 1px solid var(--dbgwb-rand);
    padding: 12px 0;
}

.dbgwb-provincie summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--dbgwb-navy);
    padding: 6px 0;
}

.dbgwb-aantal {
    font-weight: 400;
    color: var(--dbgwb-zacht);
}

.dbgwb-kolommen {
    columns: 5 180px;
    column-gap: 24px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.dbgwb-kolommen li {
    margin-bottom: 4px;
    break-inside: avoid;
}

/* ---- Het overzicht en de blokjes in een pagina van het thema ---- */

.dbgwb-overzicht h2,
.dbgwb-uitgelicht h2 {
    margin-top: 36px;
}

.dbgwb-uitleg-blok .dbgwb-pillen {
    margin-top: 12px;
}

/* ---- Voor de beheerder ---- */

.dbgwb-voorbeeld {
    margin: 16px 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: #FFF4D6;
    color: #0A1F44;
    font-weight: 600;
}

.dbgwb-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.dbgwb-beheer .dbgwb-tabel {
    max-width: 960px;
}

.dbgwb-beheer .dbgwb-tabel th {
    width: 200px;
}

.dbgwb-beheer .dbgwb-tabel thead th {
    width: auto;
}

.dbgwb-beheer form .dbgwb-tabel {
    max-width: none;
}

.dbgwb-beheer .dbgwb-lijst {
    list-style: disc;
    padding-left: 20px;
}

/* Teksten bijwerken */
.dbgwb-beheer .dbgwb-tekstentabel {
    max-width: 1280px;
}

.dbgwb-beheer .dbgwb-tekstentabel td:first-child {
    width: 62%;
}

.dbgwb-zinnen summary {
    margin-top: 6px;
    color: #0366D6;
    cursor: pointer;
}

.dbgwb-zinnen ol {
    margin: 10px 0 0 22px;
}

.dbgwb-zin {
    margin-bottom: 12px;
    line-height: 1.5;
}

.dbgwb-zin__kop {
    display: inline-block;
    min-width: 52px;
    font-weight: 600;
    color: #4A5873;
}

.dbgwb-zin--gedaan > strong {
    color: #1a7f37;
}

.dbgwb-zin--niet > strong {
    color: #b32d2e;
}

/* Op een telefoon schuift de tabel, niet de pagina. */
.dbgwb-tabelrol {
    position: relative;
    max-width: 100%;
    overflow-x: auto;
}

@media (max-width: 782px) {
    .dbgwb-beheer .dbgwb-tekstentabel {
        min-width: 640px;
    }
}

/* ---- Smallere schermen ---- */

@media (max-width: 1100px) {
    .dbgwb-voordelen {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .dbgwb-stappen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .dbgwb-voordelen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .dbgwb-hero__raster,
    .dbgwb-duo,
    .dbgwb-vragen,
    .dbgwb-antwoorden {
        grid-template-columns: minmax(0, 1fr);
    }

    .dbgwb-hero__raster {
        gap: 28px;
    }
}

@media (max-width: 600px) {
    .dbgwb {
        font-size: 16px;
    }

    .dbgwb-wrap {
        padding: 0 16px;
    }

    .dbgwb-omhulsel {
        padding: 16px 16px 32px;
    }

    .dbgwb-extrablok {
        padding: 18px 16px;
    }

    .dbgwb-sectie {
        padding: 44px 0;
    }

    .dbgwb-hero {
        padding: 24px 0 40px;
    }

    .dbgwb-hero__kaart,
    .dbgwb-blok {
        padding: 20px 18px;
    }

    .dbgwb-kenmerken div {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .dbgwb-stappen,
    .dbgwb-voordelen {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    /* Op een telefoon staan het icoon en het nummer links van de tekst: zo
       blijft de pagina goed te scrollen. */
    .dbgwb-voordeel,
    .dbgwb-stap {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 14px;
        padding: 16px;
    }

    .dbgwb-voordeel .dbgwb-icoon,
    .dbgwb-stap__nr {
        grid-row: span 2;
        margin: 0;
    }

    .dbgwb-voordeel .dbgwb-icoon {
        width: 40px;
        height: 40px;
    }

    .dbgwb-stap__nr {
        width: 34px;
        height: 34px;
    }

    .dbgwb a.dbgwb-knop {
        width: 100%;
    }

    .dbgwb-kolommen {
        columns: 2 130px;
    }

    /* Op een telefoon is elke plaats een tikvak van 44 pixels hoog. */
    .dbgwb-kolommen li {
        margin-bottom: 0;
    }

    .dbgwb-kolommen a {
        display: flex;
        align-items: center;
        min-height: 44px;
        line-height: 1.3;
    }

    /* De provincies in twee kolommen: zo blijft de lijst kort op een telefoon. */
    .dbgwb-kaarten--klein {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .dbgwb-kaarten--klein .dbgwb-kaart a {
        padding: 10px 12px;
    }
}