/*
Sections — HZNG Base
Sectie-componenten (hero, en later USP, FAQ, CTA, testimonials, …).
Werkt samen met style.css — deelt :root variabelen.
*/

/* ==========================================================================
   .hero — volle-breedte, featured image als achtergrond + overlay
   ========================================================================== */



section {
    padding-top: calc(4 * var(--gutter));
    padding-bottom: calc(4 * var(--gutter));
}
    section.no-padding-top {
        padding-top: 0;
    }

    section.no-padding-bottom {
        padding-bottom: 0;
    }

.hero {
    position: relative;
    display: flex;
    align-items: center;
    isolation: isolate;
    padding-top: calc(4 * var(--gutter));
    padding-bottom: calc(2 * var(--gutter));
    text-align: center;}
    .home .hero {
        padding-top: calc(7 * var(--gutter));
    }



.hero .row {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero-content {
    max-width: 100ch;
    margin: 0 auto;
}

.hero-content h1 {
    margin: 0 auto;
}

.hero-subtitle {
    margin: 18px auto 0;
    max-width: 100ch;
    font-size: 20px;
    font-weight: 400;
    color: var(--color-cta);
    opacity: 0.5;
}

.hero-content .hero-text {
    margin: 20px auto 0;
    max-width: 100ch;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
    justify-content: center;
}

/* ==========================================================================
   Mobiel — hero-content volle breedte
   ========================================================================== */

@media (max-width: 1279px) {
    .hero-buttons {
        justify-content: center;
    }
}

/* ==========================================================================
   .usps — drie pijlers onder de hero
   ========================================================================== */

/* USP's staan gestapeld in de linkerkolom. Elk een zachte kaart met het
   PNG-icoon links en titel + tekst rechts. */
.usps {
    display: flex;
    flex-direction: column;
    gap: var(--gutter);
    margin-top: calc(var(--gutter) * 1.5);
}

.usp {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 24px;
    color: var(--color-secondary);
    border-radius: 16px;
    position: relative;
    border: 0;
    background: var(--color-sand-soft);
    text-align: left;
}

.usp-icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
    margin: 0;
}

.usp-body {
    flex: 1;
}

.usp h4,
.usp .usp-title,
.usp .usp-titel {
    margin: 0 0 4px;
    text-align: left;
    width: 100%;
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.2;
    font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.25rem);
    color: var(--color-heading);
}

.usp p {
    margin: 0;
    color: var(--color-secondary);
}

/* USP-pijlers: op mobiel horizontaal scrollen.
   De .block-wrapper levert al de padding-inline (gutter), dus die hoeft
   hier niet apart toegevoegd te worden. */
@media (max-width: 767px) {

    .hero-usps-row .container {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--gutter);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .hero-usps-row .container::-webkit-scrollbar {
        display: none;
    }

    .hero-usps-row .container > [class*="col-"] {
        flex: 0 0 82%;                 /* smaller dan de viewport: volgende kaart peekt */
        max-width: 82%;
        scroll-snap-align: start;      /* snapt aan de linkerzijde */
    }

    /* Google-review (4,8) als eerste tonen op mobiel. Dat blok staat als
       laatste in de DOM, dus order: -1 haalt 'm naar voren; de overige
       USP-blokken volgen in hun normale volgorde erachter. */
    .hero-usps-row .container > [class*="col-"]:last-child {
        order: -1;
    }
}

/* ==========================================================================
   .cta — opvallend blok in --color-cta
   ========================================================================== */

.cta .cta-inner {
    padding: 50px 30px;
    border-radius: var(--radius);
    background: var(--color-cta);
    border: 1px solid var(--color-cta);
    color: #FFF;
}

.cta-inner h2 {
    margin: 0;
}

.cta-inner .cta-text {
    margin: 16px auto 0;
    max-width: 60ch;
}

.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}

/* ==========================================================================
   .text-image — tekst + title-cards naast het beeld van de parent
   ========================================================================== */

.text-image .image {
    width: 100%;
    aspect-ratio: 3 / 4;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.text-image-body h2 {
    margin: 0;
}

.text-image-excerpt {
    margin: 16px 0 24px;
}

.text-image-cards {
    display: flex;
    flex-direction: column;
}

/* Beeld links i.p.v. rechts: kolomvolgorde omdraaien.
   Media staat eerst in de DOM; default schuift 'm naar rechts. */
.text-image .text-image-media {
    order: 2;
}

.text-image .text-image-body {
    order: 1;
}

.text-image.image-left .text-image-media {
    order: 1;
}

.text-image.image-left .text-image-body {
    order: 2;
}

.text-image.werkwijze {
    background: var(--color-grey);
    padding-bottom: calc(4 * var(--gutter));
}


/* Mobiel: altijd beeld boven, tekst eronder */
@media (max-width: 1279px) {
    .text-image .text-image-media,
    .text-image.image-left .text-image-media {
        order: 1;
    }

    .text-image .text-image-body,
    .text-image.image-left .text-image-body {
        order: 2;
    }

    .text-image-media {
        margin-bottom: 24px;
    }
}

/* ==========================================================================
   Content — lijsten
   ========================================================================== */

.content ul {
    margin: 20px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.content ul li {
    position: relative;
    padding-left: 22px;
    list-style: none;
}

.content ul li:before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.7em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-cta);
}

/* Accordions ============================================================== */

.accordion {
    border-bottom: 1px solid var(--color-border);
}

    .accordion:last-of-type {
        border-bottom: 0;
    }

.accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 0;
    background: none;
    border: 0;
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    color: var(--color-cta);
}

.accordion-trigger::after {
    content: "+";
    margin-left: 16px;
    font-size: 1.4em;
    line-height: 1;
    transition: transform 0.2s ease;
}

.accordion-trigger[aria-expanded="true"]::after {
    content: "\2212"; /* minteken */
}

.accordion-panel {
    padding: 0 0 24px;
}

.accordion-panel > *:first-child {
    margin-top: 0;
}

.accordion-panel > *:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   CF7-formulier — floating labels
   --------------------------------------------------------------------------
   Werkt samen met de filter hzng_cf7_floating_labels (functions.php sectie
   12) die placeholder=" " toevoegt en label-tekst in een .floating-label
   span wrapt. Gebruikt :has() voor de focus/filled-state — alle moderne
   browsers (Chrome 105+, Safari 15.4+, Firefox 121+).

   Werkt op elk CF7-formulier op de site.
   ========================================================================== */

.wpcf7-form p {
    margin: 0 0 12px;
}

.wpcf7-form label {
    position: relative;
    display: block;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;

}

/* De <br> uit CF7's markup is hier overbodig */
.wpcf7-form label + br,
.wpcf7-form label br {
    display: none;
}

.wpcf7-form-control-wrap {
    display: block;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form textarea {
    width: 100%;
    padding: 12px 14px 12px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: var(--color-field);
    color: var(--color-secondary);
    font-size: 16px;
    line-height: calc(var(--gutter)*1);
    outline: none;
    transition: border-color var(--transition), background var(--transition);
    opacity: 0.75;
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="url"]:focus,
.wpcf7-form input[type="number"]:focus,
.wpcf7-form textarea:focus {
    border-color: var(--color-field);
}

/* Readonly-velden iets gedempter zodat duidelijk is dat ze niet
   bewerkbaar zijn */
.wpcf7-form input[readonly],
.wpcf7-form textarea[readonly] {
    background: var(--color-oat, #F5F1EA);
    cursor: default;
}

/* De floating label: standaard in het midden van het input */
.wpcf7-form .floating-label {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-secondary);
    pointer-events: none;
    padding: 0 4px;
    font-size: 16px;
    transition: 0.2s ease-out;
    z-index: 1;
    text-transform: none;
}

/* Verschoven naar linksboven bij focus of als het veld gevuld is */
.wpcf7-form label:has(input:focus) .floating-label,
.wpcf7-form label:has(input:not(:placeholder-shown)) .floating-label,
.wpcf7-form label:has(textarea:focus) .floating-label,
.wpcf7-form label:has(textarea:not(:placeholder-shown)) .floating-label {
    top: 15px;
    transform: translateY(-50%) scale(0.85);
    transform-origin: left center;
}

/* Submit-knop — net zo hoog als de inputs, oranje achtergrond */
.wpcf7-submit {
    display: block;
    width: 100%;
    margin-top: var(--gutter);
    padding: 15px 24px;
    background: var(--color-cta);
    color: #FFF;
    border: 0;
    border-radius: var(--radius);
    font: inherit;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    font-family: var(--font-heading);
    transition: opacity var(--transition);
}
.wpcf7-spinner {
    display: none;
}

@media (hover: hover) {
    .wpcf7-submit:hover {
        opacity: 0.85;
    }
}
 




/* ==========================================================================
   FAQ — accordion-lijst (knop + panel, zoals Sonon)
   --------------------------------------------------------------------------
   Werkt met de accordion-JS in js/jquery.js: klik op .accordion-trigger
   togglet aria-expanded en verbergt/toont .accordion-panel via het
   hidden-attribuut. Witte lijst met afronding en rand, items gescheiden door
   lijntjes; de vraag is vet met rechts een +/- teken. Onder .faq-list
   gescoped zodat het de generieke .accordion-regels netjes overschrijft.
   ========================================================================== */

.faq {
    background: transparent;
}
    .faq h2 {
        color: var(--color-heading);
    }
    .faq p.text {
        color: var(--color-secondary);
    }
.faq-list {
    overflow: hidden;
    gap: var(--gutter);
    display: flex;
    flex-direction: column;
    margin-top: var(--gutter);
}

.faq-list .accordion {
    padding: 4px 24px;
    background: var(--color-sand-soft);
    border-radius: 16px;
    border: 0;
    position: relative;
}

.faq-list .toggle-faq {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 8px;
    top:8px;
    display: block;
}

.faq-list .toggle-faq::before,
.faq-list .toggle-faq::after {
    width: 16px;
    height: 1px;
    position: absolute;
    right: 50%;
    top: 50%;
    transform: rotate(90deg);
    transition: all var(--transition);
    transform-origin: center;
}
.faq-list .toggle-faq::before {
    transform: rotate(0deg);
    transition: all var(--transition);

}

/* Openen: de + roteert 45° naar een kruisje (zachte overgang) */
.faq-list .accordion-trigger[aria-expanded="true"]::after {
    transform: rotate(0deg);
}

.faq-list .accordion-trigger[aria-expanded="true"]::before {
    transform: rotate(-0deg);
}


.faq-list .accordion-panel {
    padding: 0 0 24px;
}

    .faq-list .accordion-panel > *:first-child { margin-top: 0; }
    .faq-list .accordion-panel > *:last-child  { margin-bottom: 0; }


/* ==========================================================================
   Mobiele fixes — 1-koloms tekst
   ========================================================================== */

@media (max-width: 767px) {



    /* Tweekoloms tekst is te smal op mobiel */
    .columns {
        columns: 1;
    }
}

/* ==========================================================================
   .eyebrow — kort label boven een sectiekop
   ========================================================================== */

.eyebrow {
    display: block;
    margin-bottom: 8px;
    font-size: var(--font-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-cta);
}

.faq .eyebrow {
    color: var(--color-cta);
}

/* ==========================================================================
   .contact-blok — conversie-afsluiter met CF7-formulier
   --------------------------------------------------------------------------
   Titel + intro + bel-/mailknoppen links, het formulier rechts in een
   witte kaart. Lichtblauwe achtergrond (cta-transparent) zodat het blok
   zich onderscheidt van de content erboven. #contact is het anker voor
   de menu-CTA.
   ========================================================================== */

.contact-blok {
    background: var(--color-white);
    scroll-margin-top: calc(var(--menu-height) + var(--gutter));
}

.contact-blok-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: var(--gutter);
}

.contact-blok-form {
    background: var(--color-sand-soft);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: calc(var(--gutter) * 1.5);
}

@media (max-width: 1279px) {
    .contact-blok-form {
        margin-top: var(--gutter);
    }
}

/* ==========================================================================
   .gebruiksmeldingen — overzichtsgrid van de landingspagina's
   ========================================================================== */

.gebruiksmeldingen {
    background: var(--color-white);
}


/* ==========================================================================
   REDESIGN — tweekoloms body, sticky formulier, parallax-beeld
   --------------------------------------------------------------------------
   De hele pagina is één row met space-between: links col-7 met alle
   content, rechts col-4 met het sticky formulier over de featured image.
   De volle-breedte hero vervalt.
   ========================================================================== */

/* Container stretcht, zodat de aside even hoog wordt als de content en de
   sticky kaart ruimte heeft om mee te scrollen. */
.body-grid {
    align-items: stretch;
    position: relative;
}

.body-main {
    position: relative;
    z-index: 1;
}

/* --- Rechterkolom: sticky formulierkaart ---------------------------------- */
.body-aside {
    position: relative;
    z-index: 2;
    align-self: stretch;
}

.form-card {
    position: sticky;
    top: 32px;
    align-self: flex-start;
    background: var(--color-white);
    border-radius: var(--radius);
    padding: calc(var(--gutter) * 1.4);
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15);
}

.form-card-title {
    margin: 0 0 var(--gutter);
    font-size: clamp(1.3rem, 1rem + 1vw, 1.6rem);
    color: var(--color-heading);
}

/* --- Featured image, absoluut t.o.v. de container, full-bleed rechts ------ */
.body-media {
    position: absolute;
    top: -150px;
    /* Start bij de kolomgrens (7/12) en loop door tot de rechter viewport-rand */
    left: calc(58.3333% + var(--gutter));
    right: calc(50% - 50vw);
    height: calc(88vh + 140px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top-left-radius: 24px;
    border-bottom-left-radius: 24px;
    z-index: 0;
    will-change: transform;
}

/* --- Scheidingslijn tussen secties (hairline, zoals in het ontwerp) ------- */
.section-divider {
    width: 100%;
    height: 0;
    border: 0;
    border-top: 1px solid var(--color-border);
    margin-block: 60px;
}

/* --- Pills: links naar de landingspagina's -------------------------------- */
.pills {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: var(--gutter);
}

.pill {
    display: inline-flex;
    align-items: center;
    padding: 18px 22px;
    border-radius: var(--radius-btn);
    background: var(--color-field);
    color: var(--color-cta);
    font-weight: 500;
    font-size: 18px;
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}

@media (hover: hover) {
    .pill:hover {
        background: var(--color-cta);
        color: var(--color-white);
    }
}

/* ==========================================================================
   MOBIEL (<1280px) — formulier verdwijnt uit de flow en gaat in een modal
   ========================================================================== */

@media (max-width: 1279px) {
    .body-aside,
    .body-media {
        display: none;
    }
    /* Ruimte onder de content zodat de fixed balk niets afdekt */
    body {
        padding-bottom: 88px;
    }
}

/* --- CTA-blok onderaan de pagina (alleen mobiel) -------------------------- */
.mobile-cta {
    background: var(--color-sand-soft);
    border-radius: var(--radius);
    margin-top: calc(var(--gutter) * 2);
}

.mobile-cta-inner {
    text-align: center;
}

.mobile-cta-inner h2 {
    margin: 0 0 var(--gutter);
}

/* --- Vaste openknop-balk onderaan de viewport (alleen mobiel) ------------- */
.form-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    padding: 12px var(--gutter);
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -8px 24px rgba(0, 0, 51, 0.08);
}

.form-bar .btn {
    width: 100%;
    margin: 0;
}

.mobile-cta .btn {
    margin: 0;
}

/* Balk verbergen zodra de modal open is */
body.modal-open .form-bar {
    display: none !important;
}

/* ==========================================================================
   Modal — formulier op mobiel
   --------------------------------------------------------------------------
   Overlay + paneel. Sluiten via kruisje, overlay-klik en Escape (JS).
   Fade + lichte inschuif; respecteert prefers-reduced-motion.
   ========================================================================== */

.form-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gutter);
}

.form-modal[hidden] {
    display: none;
}

.form-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 51, 0.45);
    opacity: 0;
    transition: opacity 0.25s ease-out;
}

.form-modal-panel {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--color-white);
    border-radius: var(--radius);
    padding: calc(var(--gutter) * 1.6);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

.form-modal.is-open .form-modal-overlay {
    opacity: 1;
}

.form-modal.is-open .form-modal-panel {
    opacity: 1;
    transform: none;
}

.form-modal-title {
    margin: 0 var(--gutter) var(--gutter) 0;
    color: var(--color-heading);
}

.form-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-field);
    border: 0;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    color: var(--color-heading);
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .form-modal-overlay,
    .form-modal-panel {
        transition: none;
    }
    .form-modal-panel {
        transform: none;
    }
}

/* Scroll-lock op de achtergrond zolang de modal open is */
body.modal-open {
    overflow: hidden;
}