/*
Theme Name: HZNG Base
Description: Webdesign & design systems — base theme (grid + tokens, refactor 2026)
Version: 2.0
Author: P. Huizinga at HZNG - hzng.nl
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
    /* Fonts */
    --font-body:         "Poppins", sans-serif;
    --font-heading:      "Poppins", sans-serif;
    --handwriting:        "Oooh Baby", serif;
    --font-small:        14px;
    --font-medium:        16px;

    /* Kleuren */
    --color-primary:     #1c1c1c;
    --color-secondary:   #1c1c1c;
    --color-cta:         #44B157;
    --color-cta-transparent:  rgba(68, 177, 87,0.15);
    --color-green:       rgba(68, 177, 87,0.15);
    --color-white:       #FFF;
    --color-border:      #DDD;
    --color-grey:        #F5F5F5;
    --color-grey-transparent:        #F5F5F5E6;
    --color-gradient:    linear-gradient(90deg,rgba(68, 177, 87, 1) 0%, rgba(46, 142, 64, 1) 100%);
    --color-primary-transparent: rgba(68 177 87 / 0.6);

    /* Layout */
    --gutter:            20px;    /* schaalt omhoog op desktop — zie onder */
    --container-max:     1300px;
    --container-max-wide: 1300px;

    /* Vormen */
    --radius:            10px;
    --radius-btn:        10px;
    --card-padding:      max(20px, var(--gutter));   /* desktop: 25px, mobiel: 20px */
    --transition:        0.2s ease-out;

    /* Menu */
    --menu-height:          80px;
    --topmenu-height:       50px;
    --menu-bg:              rgb(255 255 255 / 0.92);
    --menu-bg-initial:      rgb(255 255 255 / 0);
    --menu-bg-scrolls:      rgb(255 255 255 / 0.92);
    --menu-link-size:       17px;
    --submenu-width:        300px;
    --color-initial:        #1c1c1c;

    /* Hero */

    --hero-min-height:  80vh;
    --hero-overlay:     rgb(23 15 72 / 0.65);
    --blur:             5px;
}

/* Gutter wordt ruimer zodra er ruimte is */
@media (min-width: 1280px) {
    :root {
        --gutter: 25px;
    }
}

/* ==========================================================================
   2. Reset basics
   ========================================================================== */

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

*:focus {
    outline: none;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-primary);
    overflow-x: hidden;
}
.handwriting,
blockquote {
    font-family: var(--handwriting);
    color: var(--color-secondary);
    font-size: calc(var(--gutter) * 1.4);
}

.handwriting {
    color: var(--color-cta);
}

/* ==========================================================================
   3. Fonts
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 500;
    line-height: 1.2;
    margin: 0 0 0.25em;
    color: var(--color-secondary);
}
h2 {
    margin-bottom: calc(var(--gutter) * 1);
}
    .vind-uw-regio h2 {
        margin-bottom: calc(var(--gutter) / 2);
    }
    .wat-wij-doen h2 {
        margin-bottom: calc(var(--gutter) * 2);
    }
.content h2 {
    margin: 1em 0 0.25em;
}
h1 { font-size: clamp(2rem,   1.2rem  + 3vw,    2.75rem);  }
.hero h1 { font-size: clamp(2rem,   1.2rem  + 3vw,    3rem);  }
h2 { font-size: clamp(1.45rem, 1rem    + 2.3vw,  1.9rem);  }
h3 { font-size: clamp(1.15rem, 0.90rem + 1.45vw,  1.55rem); color: var(--color-secundary);}
h4 { font-size: clamp(1.1rem, 0.95rem + 0.6vw,  1.15rem); color: var(--color-secundary)  }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem;   }
.btn {  }
p.intro, .intro p,
p.hero-text { font-size: 1.2rem; } 

p {margin-bottom: calc(var(--gutter) / 3);}
h1 + .handwriting {
    margin-top: calc(var(--gutter) * -1);
    margin-bottom: calc(var(--gutter) * 2);
}
.hero h1 {
    margin-top: calc(var(--gutter) * -0.25);
}
.hero h1 + .handwriting {
    margin-top: calc(var(--gutter) * -0.75);
    margin-bottom: calc(var(--gutter) * 1);
}
.accordion h3 {
    color: var(--color-cta);
    margin: 0;
}
.content h3 {
    margin-top: var(--gutter);
}

/* ==========================================================================
   3. Secties, rijen en containers
   ========================================================================== */

article,
section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-block: 40px;
    position: relative;
}

@media (min-width: 1280px) {
    .row {
        padding-block: 30px;
    }
}

.container {
    width: 100%;
    max-width: var(--container-max);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    position: relative;
}

.container.wide {
    max-width: var(--container-max-wide);
}


/* ==========================================================================
   4. Kolommen — 12-koloms flex grid, mobile-first
   --cols wordt per breakpoint gezet: default 12 (= 100% breed),
   daarna pas de werkelijke span.
   ========================================================================== */

[class*="col-"] {
    --cols: 12;
    flex: 0 0 calc(var(--cols) / 12 * 100%);
    max-width: calc(var(--cols) / 12 * 100%);
    position: relative;
}

/* Tablet: kleine kolommen (1–6) komen naast elkaar op 50%, 7–12 blijven vol */
@media (min-width: 768px) {
    .col-1, .col-2, .col-3,
    .col-4, .col-5, .col-6 {
        --cols: 6;
    }
}

.block {
    padding-inline: var(--gutter);
}

/* Desktop: echte kolom-spans */
@media (min-width: 1280px) {
    .col-1  { --cols: 1;  }
    .col-2  { --cols: 2;  }
    .col-3  { --cols: 3;  }
    .col-4  { --cols: 4;  }
    .col-5  { --cols: 5;  }
    .col-6  { --cols: 6;  }
    .col-7  { --cols: 7;  }
    .col-8  { --cols: 8;  }
    .col-9  { --cols: 9;  }
    .col-10 { --cols: 10; }
    .col-11 { --cols: 11; }
    .col-12 { --cols: 12; }
}


/* ==========================================================================
   5. Padding-modifiers op kolommen
   ========================================================================== */

.no-padding > [class*="col-"] {
    padding: 0;
}

.extra-padding > [class*="col-"] {
    padding-inline: calc(var(--gutter) * 1.6);
}

.no-self-padding {
    padding: 0 !important;
}

.padding {
    padding: var(--gutter);
}

.border-radius {
    border-radius: var(--radius);
    overflow: hidden;
}


/* ==========================================================================
   6. Flex-helpers
   ========================================================================== */

.flex {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.flex-row               { flex-direction: row; }
.flex-column            { flex-direction: column; }
.flex-column-reverse    { flex-direction: column-reverse; }

.flex-wrap              { flex-wrap: wrap; }
.flex-no-wrap           { flex-wrap: nowrap; }

/* Horizontaal (justify-content) */
.center,
.flex-center,
.flex-h-align-center    { justify-content: center; }
.flex-h-align-left      { justify-content: flex-start; }
.flex-h-align-right,
.flex-end               { justify-content: flex-end; }
.space-between,
.flex-space-between     { justify-content: space-between; }
.flex-space-around      { justify-content: space-around; }
.flex-space-evenly      { justify-content: space-evenly; }

/* Verticaal (align-items) */
.flex-v-align-top       { align-items: flex-start; }
.flex-v-align-center    { align-items: center; }
.flex-v-align-bottom    { align-items: flex-end; }
.flex-stretch           { align-items: stretch; }

/* Zelf-uitlijning */
.flex-self-end          { align-self: flex-end; }

/* Grow */
.flex-grow-1 { flex-grow: 1; }
.flex-grow-2 { flex-grow: 2; }
.flex-grow-3 { flex-grow: 3; }
.flex-grow-4 { flex-grow: 4; }
.flex-grow-5 { flex-grow: 5; }
.flex-grow-6 { flex-grow: 6; }


/* ==========================================================================
   7. Layout-helpers
   ========================================================================== */

.vh-100     { height: 100vh; }
.vh-75      { height: 75vh; }
.vh-50      { height: 50vh; }
.vw-100     { width: 100vw; }
.min-height { min-height: 400px; }

.sticky {
    position: sticky !important;
    top: 120px;
    z-index: 900;
}

.order-1          { order: -1; }
.overflow-visible { overflow: visible !important; }

.text-center,
.text-center *    { text-align: center; }
.text-right,
.text-right *     { text-align: right; }


/* ==========================================================================
   8. Zichtbaarheid per breakpoint
   ========================================================================== */

.desktop-only { display: none  !important; }
.mobile-only  { display: flex  !important; }

@media (min-width: 1280px) {
    .desktop-only { display: block !important; }
    .mobile-only  { display: none  !important; }
    .order-1          { order: 1; }
}


/* ==========================================================================
   9. Knoppen
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: var(--radius-btn);
    background: var(--color-gradient);
    color: #FFF;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
    font-size: 0.9em;
    margin-top: var(--gutter);
}
    .hero .btn {
        margin-top: 0;
        margin-bottom: var(--gutter);
    }
        .hero .right .btn {
    margin-top: var(--gutter);

        }
    .wat-wij-doen .btn {
        margin: 0;
    }
.btn:hover {
    opacity: 0.85;
}

.btn.ghost {
    background: var(--color-white);
    color: var(--color-cta);
    border: 1px solid currentColor;
}
.btn.ghost.white:hover,
.btn.ghost.white {
    background: none;
    color: var(--color-white);
    border: 1px solid currentColor;
}
.btn.plain {
    background: none;
    color: var(--color-cta);
    border: 1px solid transparent;
    margin-top: 0;
}
    .btn.more:after {
        content: "+";
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        font-weight: 400;
        font-size: 1.25em;
        line-height: 24px;
        color: var(--color-cta);
        border-radius: 50%;
        border: 1.5px solid var(--color-cta);
        line-height: 1;
        margin-left: calc(var(--gutter) /2);
    }
        .btn.more {
            padding-right: 10px;
        }
        .btn.more:hover:after {
            border: 1.5px solid var(--color-white);
            color: var(--color-white);
        }
        .btn.plain.more:hover:after {
            border: 1.5px solid var(--color-cta);
            color: var(--color-cta);
        }


.btn.ghost:hover {
    background: var(--color-ctat);
    background: var(--color-gradient);
    color: #FFF;
    opacity: 1;
    border: 1px solid var(--color-cta);
}
    .btn.large {
        background: var(--color-ctat);
        background: var(--color-gradient);
        color: #FFF;
        opacity: 1;
        border: 0;
        padding: 19px 25px;
        font-size: 20px;
        font-weight: 500;
    }


/* ==========================================================================
   10. Scroll-reveal — subtiele fade-in van rijen wanneer ze in beeld komen
   --------------------------------------------------------------------------
   Werkt samen met de IntersectionObserver in jquery.js. Alle .row-elementen
   krijgen automatisch de animatie. Eenmalig, niet-blocking. Elementen die
   al in viewport zitten bij paginalad krijgen onmiddellijk hun eindstaat.

   Uitsluiten van animatie: voeg .no-reveal toe aan een specifieke row.

   Respecteert prefers-reduced-motion (OS-instelling).
   ========================================================================== */

.row[data-reveal] {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

.row[data-reveal="visible"] {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .row[data-reveal],
    .row[data-reveal="visible"] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}



.inschrijfform {
    background: var(--color-oat);
    border-radius: var(--radius);
    margin-top: 60px;
    padding: 30px;
}

/* ==========================================================================
   CF7-formulier — custom checkboxes (en acceptance-velden)
   --------------------------------------------------------------------------
   Verbergt de native input voor het oog maar houdt 'em focusable voor
   keyboard- en screenreader-gebruikers. Tekent een eigen box via ::before
   op de .wpcf7-list-item-label, met een vinkje via ::after dat zichtbaar
   wordt bij :checked. Werkt op zowel [checkbox] als [acceptance] omdat
   beide intern een input[type="checkbox"] zijn.

   Volgt dezelfde visuele taal als de tekstvelden hierboven: oat-border
   in rust, oranje (--color-cta) accent bij checked / hover / focus.
   ========================================================================== */

/* Meerdere checkboxes — vertikaal stapelen voor leesbaarheid */
.wpcf7-form .wpcf7-form-control.wpcf7-checkbox,
.wpcf7-form .wpcf7-form-control.wpcf7-acceptance {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* CF7 zet hier standaard 0 0 0 1em — die marge willen we niet */
.wpcf7-form .wpcf7-list-item {
    margin: 0;
    display: block;
}

/* Hele label-blok klikbaar */
.wpcf7-form .wpcf7-list-item label {
    cursor: pointer;
}

/* Native input visually hidden — wel focusable voor toetsenbord-nav */
.wpcf7-form input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
    white-space: nowrap;
}

/* De label-tekst krijgt links ruimte voor de custom box */
.wpcf7-form input[type="checkbox"] + .wpcf7-list-item-label {
    position: relative;
    display: inline-block;
    padding-left: 32px;
    min-height: 22px;
    color: var(--color-secondary);
    cursor: pointer;
    line-height: 1.4;
}

/* De box zelf — links naast de tekst */
.wpcf7-form input[type="checkbox"] + .wpcf7-list-item-label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-grey);
    transition: border-color var(--transition), background var(--transition);
}

/* Vinkje — twee randen van een rotated rechthoek, niets meer nodig */
.wpcf7-form input[type="checkbox"] + .wpcf7-list-item-label::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 5px;
    width: 6px;
    height: 11px;
    border: solid var(--color-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity var(--transition);
}

/* Hover — alleen op echte hover-devices (niet touch) */
@media (hover: hover) {
    .wpcf7-form .wpcf7-list-item label:hover input[type="checkbox"] + .wpcf7-list-item-label::before {
        border-color: var(--color-cta);
    }
}

/* Checked — oranje vulling, vinkje tonen */
.wpcf7-form input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
    background: var(--color-cta);
    border-color: var(--color-cta);
}

.wpcf7-form input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
    opacity: 1;
}

/* Focus-ring voor keyboard-gebruikers */
.wpcf7-form input[type="checkbox"]:focus-visible + .wpcf7-list-item-label::before {
    outline: 2px solid var(--color-cta);
    outline-offset: 2px;
}

/* Disabled-state — gedempt, niet klikbaar */
.wpcf7-form input[type="checkbox"]:disabled + .wpcf7-list-item-label {
    opacity: 0.5;
    cursor: not-allowed;
}

.wpcf7-form input[type="checkbox"]:disabled + .wpcf7-list-item-label::before {
    background: var(--color-oat, #F5F1EA);
}
/* ==========================================================================
   CF7-formulier — custom radio buttons
   --------------------------------------------------------------------------
   Volgt dezelfde aanpak als de checkboxes hierboven: native input visueel
   verborgen maar focusable, eigen vorm via ::before en gevulde indicator
   via ::after. Verschil met checkboxes: ronde vorm (50% radius) en een
   wit puntje in plaats van een vinkje.

   Plak dit blok direct ONDER de checkbox-styling in sections.css.
   ========================================================================== */

/* Meerdere radio-opties — vertikaal stapelen voor leesbaarheid */
.wpcf7-form .wpcf7-form-control.wpcf7-radio {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Native radio visually hidden — wel focusable voor toetsenbord-nav */
.wpcf7-form input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
    white-space: nowrap;
}

/* Label-tekst krijgt links ruimte voor de custom button */
.wpcf7-form input[type="radio"] + .wpcf7-list-item-label {
    position: relative;
    display: inline-block;
    padding-left: 32px;
    min-height: 22px;
    color: var(--color-secondary);
    cursor: pointer;
    line-height: 1.4;
}

/* De ronde button — links naast de tekst */
.wpcf7-form input[type="radio"] + .wpcf7-list-item-label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    border: 1px solid var(--color-oat-border);
    border-radius: 50%;
    background: var(--color-grey);
    transition: border-color var(--transition), background var(--transition);
}

/* Wit puntje binnenin — verschijnt bij :checked */
.wpcf7-form input[type="radio"] + .wpcf7-list-item-label::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-white);
    opacity: 0;
    transition: opacity var(--transition);
}

/* Hover — alleen op echte hover-devices (niet touch) */
@media (hover: hover) {
    .wpcf7-form .wpcf7-list-item label:hover input[type="radio"] + .wpcf7-list-item-label::before {
        border-color: var(--color-cta);
    }
}

/* Checked — oranje vulling, wit puntje */
.wpcf7-form input[type="radio"]:checked + .wpcf7-list-item-label::before {
    background: var(--color-cta);
    border-color: var(--color-cta);
}

.wpcf7-form input[type="radio"]:checked + .wpcf7-list-item-label::after {
    opacity: 1;
}

/* Focus-ring voor keyboard-gebruikers */
.wpcf7-form input[type="radio"]:focus-visible + .wpcf7-list-item-label::before {
    outline: 2px solid var(--color-cta);
    outline-offset: 2px;
}

/* Disabled-state — gedempt, niet klikbaar */
.wpcf7-form input[type="radio"]:disabled + .wpcf7-list-item-label {
    opacity: 0.5;
    cursor: not-allowed;
}

.wpcf7-form input[type="radio"]:disabled + .wpcf7-list-item-label::before {
    background: var(--color-oat, #F5F1EA);
}
/* De lijnen tussen de rijen: dit is de border die je ziet */
.wp-block-table {
    margin: var(--gutter) 0;
}
.wp-block-table .has-fixed-layout{

    table-layout: unset;
}
.wp-block-table td,
.wp-block-table th {
    border: 1px solid var(--color-border);   /* jouw borderkleur hier */
    padding: 12px 16px;
}

/* Optioneel: rand rondom de hele tabel */
.wp-block-table table {
    border: 1px solid var(--color-border); 
}
.service-header {
    margin-top: calc(var(--gutter)*2);
}

.grecaptcha-badge {
    visibility: hidden;
}