/* =============================================================================
   style.css – Fleurke Installatie
   Mobile-first. Breakpoints: 768px (tablet), 1024px (desktop/container max)
   Design tokens afgeleid uit de live Elementor CSS (bevestigd).
   ============================================================================= */

/* ── 1. Custom properties ───────────────────────────────────────────────────── */
:root {
    /* Kleuren */
    --clr-primary:    #2C3E50;   /* donker blauw-grijs – tekst & headings */
    --clr-secondary:  #34495E;   /* iets lichter – secundaire tekst */
    --clr-accent:     #1ABC9C;   /* teal – knoppen & accenten */
    --clr-dominant:   #051D4B;   /* donker navy – hero-achtergronden */
    --clr-bg:         #F4F6F7;   /* licht achtergrond */
    --clr-bg-accent:  #ECF0F1;   /* licht grijs – alternatieve secties */
    --clr-white:      #FFFFFF;
    --clr-text:       #2C3E50;
    --clr-text-light: #FFFFFF;
    --clr-wa:         #25D366;   /* WhatsApp groen */

    /* Typografie */
    --font-heading: 'Poppins', sans-serif;
    --font-body:    'Figtree', sans-serif;

    /* Schaalgrootten (desktop) – responsive via clamp */
    --text-xl:   clamp(40px, 5.5vw, 56px);  /* H1 */
    --text-l:    clamp(32px, 4vw,   48px);  /* H1 alt / grote H2 */
    --text-m:    clamp(28px, 3.5vw, 40px);  /* H2 */
    --text-s:    clamp(20px, 2.5vw, 24px);  /* H3 / intro */
    --text-base: 16px;
    --text-sm:   14px;

    /* Gewichten */
    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semi:    600;
    --fw-bold:    700;

    /* Layout */
    --container-max: 1024px;
    --gap:           1.5rem;
    --gap-lg:        3rem;
    --radius:        5px;
    --radius-full:   9999px;

    /* Schaduwen */
    --shadow-sm: 0 2px 6px rgba(0,0,0,.08);
    --shadow-md: 0 4px 16px rgba(0,0,0,.12);

    /* Transities */
    --transition: .3s ease;
}

/* ── 2. Reset & base ────────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family:        var(--font-body);
    font-size:          var(--text-base);
    font-weight:        var(--fw-regular);
    line-height:        1.6;
    color:              var(--clr-text);
    background-color:   var(--clr-white);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

a {
    color:           var(--clr-accent);
    text-decoration: none;
    transition:      color var(--transition);
}

a:hover, a:focus-visible {
    color: var(--clr-primary);
}

ul[role="list"] {
    list-style: none;
}

/* Focus-stijl voor toegankelijkheid */
:focus-visible {
    outline:        3px solid var(--clr-accent);
    outline-offset: 3px;
}

/* ── 3. Skip-link ───────────────────────────────────────────────────────────── */
.skip-link {
    position:   absolute;
    top:        -100%;
    left:       1rem;
    background: var(--clr-accent);
    color:      var(--clr-white);
    padding:    .5rem 1rem;
    border-radius: var(--radius);
    z-index:    9999;
    font-weight: var(--fw-semi);
    transition: top .2s;
}

.skip-link:focus {
    top: 1rem;
}

/* ── 4. Container ───────────────────────────────────────────────────────────── */
.container {
    width:     100%;
    max-width: var(--container-max);
    margin:    0 auto;
    padding:   0 1.25rem;
}

@media (min-width: 768px) {
    .container { padding: 0 2rem; }
}

/* ── 5. Typografie ──────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family:    var(--font-heading);
    font-weight:    var(--fw-semi);
    line-height:    1.2;
    color:          var(--clr-primary);
}

h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-m);  }
h3 { font-size: var(--text-s);  }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; font-weight: var(--fw-medium); }

p {
    margin-bottom: .9rem;
    max-width: 70ch;
}

p:last-child { margin-bottom: 0; }

/* ── 6. Knoppen ─────────────────────────────────────────────────────────────── */
.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             .5rem;
    padding:         .75rem 1.5rem;
    border-radius:   var(--radius);
    font-family:     var(--font-body);
    font-size:       var(--text-base);
    font-weight:     var(--fw-medium);
    line-height:     1;
    text-align:      center;
    border:          none;
    cursor:          pointer;
    transition:      background-color var(--transition),
                     color var(--transition),
                     transform var(--transition);
    white-space:     nowrap;
    text-decoration: none;
}

.btn:focus-visible {
    outline:        3px solid var(--clr-accent);
    outline-offset: 3px;
}

.btn-sm {
    padding:   .5rem 1.25rem;
    font-size: var(--text-sm);
}

.btn-accent {
    background-color: var(--clr-accent);
    color:            var(--clr-white);
}

.btn-accent:hover,
.btn-accent:focus-visible {
    background-color: #17a589; /* iets donkerder teal */
    color:            var(--clr-white);
    transform:        translateY(-1px);
}

.btn-outline {
    background-color: transparent;
    color:            var(--clr-accent);
    border:           2px solid var(--clr-accent);
}

.btn-outline:hover,
.btn-outline:focus-visible {
    background-color: var(--clr-accent);
    color:            var(--clr-white);
}

/* ── 7. Header ──────────────────────────────────────────────────────────────── */
.site-header {
    background-color: var(--clr-bg);
    border-bottom:    1px solid rgba(44,62,80,.1);
    position:         sticky;
    top:              0;
    z-index:          1000;
}

.header-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    min-height:      80px;
}

.site-logo-link {
    flex-shrink: 0;
    display:     flex;
}

.site-logo {
    height:    64px;
    width:     auto;
    max-width: 200px;
    object-fit: contain;
    border-radius: 6px; /* rondt donkere achtergrond licht af */
}

/* ── 8. Navigatie ───────────────────────────────────────────────────────────── */

/* ── Desktop nav (verborgen op mobiel) ─── */
.site-nav {
    display: none;
}

.nav-list {
    display:    flex;
    flex-wrap:  wrap;
    gap:        .25rem;
    list-style: none;
}

.nav-link {
    display:      block;
    padding:      .5rem .85rem;
    font-family:  var(--font-heading);
    font-size:    .9rem;
    font-weight:  var(--fw-medium);
    color:        var(--clr-primary);
    border-radius: var(--radius);
    transition:   color var(--transition), background-color var(--transition);
    text-decoration: none;
    white-space:  nowrap;
}

.nav-link:hover,
.nav-link:focus-visible {
    color:            var(--clr-accent);
    background-color: rgba(26,188,156,.08);
}

.nav-link.is-active {
    color:            var(--clr-accent);
    border-bottom:    2px solid var(--clr-accent);
}

/* ── Header-acties (telefoon + knop) ─── */
.header-actions {
    display:     none; /* verborgen op mobiel */
    align-items: center;
    gap:         1.25rem;
    flex-shrink: 0;
}

.header-phone {
    display:     flex;
    align-items: center;
    gap:         .4rem;
    font-family: var(--font-heading);
    font-size:   .9rem;
    font-weight: var(--fw-medium);
    color:       var(--clr-primary);
    text-decoration: none;
    transition:  color var(--transition);
}

.header-phone:hover,
.header-phone:focus-visible {
    color: var(--clr-accent);
}

/* ── Hamburger ─── */
.nav-toggle {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    background:       rgba(0,0,0,.05);
    border:           none;
    border-radius:    var(--radius);
    padding:          .5rem;
    cursor:           pointer;
    color:            var(--clr-primary);
    transition:       background-color var(--transition);
    flex-shrink:      0;
}

.nav-toggle:hover {
    background-color: rgba(0,0,0,.1);
}

.hamburger {
    display:        flex;
    flex-direction: column;
    gap:            5px;
    width:          22px;
}

.hamburger span {
    display:          block;
    height:           2px;
    background-color: currentColor;
    border-radius:    var(--radius-full);
    transition:       transform var(--transition), opacity var(--transition);
}

/* Hamburger → kruis animatie */
.nav-toggle[aria-expanded="true"] .hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .hamburger span:nth-child(2) {
    opacity: 0;
}
.nav-toggle[aria-expanded="true"] .hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobiel menu (dropdown) ─── */
.site-nav.is-open {
    display:          block;
    position:         absolute;
    top:              100%;
    left:             0;
    right:            0;
    background-color: var(--clr-white);
    border-top:       1px solid rgba(44,62,80,.1);
    box-shadow:       var(--shadow-md);
    z-index:          999;
    padding:          1rem 1.25rem;
}

.site-nav.is-open .nav-list {
    flex-direction: column;
    gap:            .25rem;
}

.site-nav.is-open .nav-link {
    font-size: 1rem;
    padding:   .75rem 1rem;
}

/* ── Tablet en desktop ─── */
@media (min-width: 768px) {
    .site-nav {
        display:  flex;
        position: static;
        box-shadow: none;
        padding:    0;
        background: none;
    }

    .nav-list {
        flex-direction: row;
    }

    .header-actions {
        display: flex;
    }

    .nav-toggle {
        display: none;
    }
}

/* ── 9. Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
    background-color: var(--clr-dominant);
    color:            var(--clr-text-light);
    padding-top:      3rem;
}

.site-footer a {
    color:           rgba(255,255,255,.8);
    text-decoration: none;
    transition:      color var(--transition);
}

.site-footer a:hover,
.site-footer a:focus-visible {
    color: var(--clr-accent);
}

.footer-top {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   2rem;
    padding-bottom:        2.5rem;
    border-bottom:         1px solid rgba(255,255,255,.1);
}

@media (min-width: 768px) {
    .footer-top {
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 3rem;
    }
}

.footer-logo-wrap {
    display:      inline-block;
    margin-bottom: .75rem;
}

.footer-logo {
    display:    block;
    height:     90px;
    width:      auto;
    max-width:  200px;
    object-fit: contain;
    filter:     none;
    opacity:    1;
    border-radius: 6px;
}

.footer-tagline {
    font-size:  .875rem;
    color:      rgba(255,255,255,.65);
    max-width:  28ch;
    margin:     0;
    line-height: 1.5;
}

.footer-nav-title {
    font-family:   var(--font-heading);
    font-size:     .75rem;
    font-weight:   var(--fw-semi);
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          rgba(255,255,255,.5);
    margin-bottom:  1rem;
}

.footer-nav ul,
.footer-contact ul {
    display:        flex;
    flex-direction: column;
    gap:            .6rem;
    list-style:     none;
}

.footer-contact-cta {
    margin-top: .5rem;
}

.footer-bottom {
    display:         flex;
    flex-direction:  column;
    gap:             .75rem;
    padding:         1.5rem 0;
    font-size:       .8125rem;
    color:           rgba(255,255,255,.5);
    text-align:      center;
}

@media (min-width: 768px) {
    .footer-bottom {
        flex-direction:  row;
        justify-content: space-between;
        align-items:     center;
        text-align:      left;
    }
}

.footer-copy { margin: 0; }

.footer-legal {
    display:    flex;
    flex-wrap:  wrap;
    gap:        .25rem 1rem;
    justify-content: center;
}

@media (min-width: 768px) {
    .footer-legal { justify-content: flex-end; }
}

.footer-legal a {
    color:           rgba(255,255,255,.5);
    font-size:       .8125rem;
    text-decoration: none;
    transition:      color var(--transition);
}

.footer-legal a:hover,
.footer-legal a:focus-visible {
    color: var(--clr-accent);
}

/* ── 10. WhatsApp floating button ───────────────────────────────────────────── */
.whatsapp-btn {
    position:        fixed;
    bottom:          40px;
    right:           20px;
    left:            auto;
    z-index:         999999;
    display:         flex;
    align-items:     center;
    gap:             0;
    text-decoration: none;
}

.whatsapp-btn-icon {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            60px;
    height:           60px;
    flex-shrink:      0;
    border-radius:    50%;
    background-color: var(--clr-wa);
    box-shadow:       0 6px 8px 2px rgba(0,0,0,.15);
    transition:       transform var(--transition);
    position:         relative;
    z-index:          1;
}

.whatsapp-btn-icon svg {
    width:  28px;
    height: 28px;
    color:  var(--clr-white);
}

.whatsapp-btn-label {
    position:         absolute;
    right:            78px;
    left:             auto;
    bottom:           8px;
    background-color: var(--clr-white);
    color:            var(--clr-primary);
    font-family:      var(--font-heading);
    font-size:        .8125rem;
    font-weight:      var(--fw-semi);
    letter-spacing:   -.02em;
    line-height:      1;
    padding:          .375rem .625rem;
    border-radius:    var(--radius);
    box-shadow:       0 6px 8px 2px rgba(0,0,0,.15);
    white-space:      nowrap;
    opacity:          0;
    transform:        translateX(4px);
    transition:       opacity var(--transition), transform var(--transition);
    pointer-events:   none;
}

.whatsapp-btn:hover .whatsapp-btn-label,
.whatsapp-btn:focus-visible .whatsapp-btn-label {
    opacity:   1;
    transform: translateX(0);
}

.whatsapp-btn:hover .whatsapp-btn-icon,
.whatsapp-btn:focus-visible .whatsapp-btn-icon {
    transform: scale(1.06);
}

/* Pulserende ring-animatie */
.whatsapp-btn-icon::before {
    content:       '';
    position:      absolute;
    inset:         0;
    border-radius: 50%;
    animation:     wa-pulse 2.5s 5s ease-out infinite;
    z-index:       -1;
}

@keyframes wa-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.45); }
    70%  { box-shadow: 0 0 0 16px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* ── 11. Secties & hulpklassen ──────────────────────────────────────────────── */
.section {
    padding: 3.5rem 0;
}

@media (min-width: 768px) {
    .section { padding: 5rem 0; }
}

.section-dark {
    background-color: var(--clr-dominant);
    color:            var(--clr-text-light);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark p {
    color: var(--clr-text-light);
}

.section-alt {
    background-color: var(--clr-bg);
}

.section-title {
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size:    var(--text-s);
    font-weight:  var(--fw-medium);
    color:        var(--clr-accent);
    margin-bottom: .5rem;
    font-family:   var(--font-heading);
}

/* Grid helpers */
.grid-2 {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var(--gap);
}

@media (min-width: 768px) {
    .grid-2 {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
}

.grid-3 {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var(--gap);
}

@media (min-width: 768px) {
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Teksthulp */
.text-accent    { color: var(--clr-accent); }
.text-light     { color: rgba(255,255,255,.8); }
.text-center    { text-align: center; }
.visually-hidden {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0,0,0,0);
    border:     0;
}

/* Content-afbeeldingen */
.content-img {
    width:         100%;
    border-radius: var(--radius);
    object-fit:    cover;
    box-shadow:    var(--shadow-sm);
}

/* Divider */
.divider {
    border:        none;
    border-top:    1px solid rgba(44,62,80,.1);
    margin:        2rem 0;
}

/* =============================================================================
   HOMEPAGE – Hero slider & paginasecties
   Toegevoegd: Fase 7
   ============================================================================= */

/* ── Hero ───────────────────────────────────────────────────────────────────── */
.hero { overflow: hidden; }

.hero-slider {
    position:   relative;
    height:     65vh;
    min-height: 420px;
    max-height: 620px;
    overflow:   hidden;
}

.hero-slide {
    position:            absolute;
    inset:               0;
    background-size:     cover;
    background-position: center;
    background-color:    var(--clr-dominant); /* fallback als afbeelding ontbreekt */
    opacity:             0;
    transition:          opacity .6s ease;
    display:             flex;
    align-items:         center;
}

.hero-slide.is-active {
    opacity: 1;
    z-index: 1;
}

.hero-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        135deg,
        rgba(5,29,75,.78) 0%,
        rgba(5,29,75,.42) 100%
    );
}

.hero-content {
    position:    relative;
    z-index:     2;
    padding:     2rem 0;
    max-width:   800px;
    margin:      0 auto;
    text-align:  center;
}

.hero-content h1,
.hero-content h2 {
    color:         var(--clr-white);
    font-size:     var(--text-xl);
    margin-bottom: 1.25rem;
    text-shadow:   0 2px 8px rgba(0,0,0,.3);
}

.hero-content p {
    color:       rgba(255,255,255,.92);
    font-size:   1.125rem;
    line-height: 1.65;
    max-width:   none;
    margin:      0;
    text-shadow: 0 1px 4px rgba(0,0,0,.2);
}

/* Dot-navigatie */
.hero-dots {
    position:  absolute;
    bottom:    24px;
    left:      50%;
    transform: translateX(-50%);
    display:   flex;
    gap:       8px;
    z-index:   10;
}

.hero-dot {
    width:         10px;
    height:        10px;
    padding:       0;
    border-radius: 50%;
    background:    rgba(255,255,255,.45);
    border:        2px solid rgba(255,255,255,.7);
    cursor:        pointer;
    transition:    background var(--transition), transform var(--transition);
}

.hero-dot.is-active {
    background: var(--clr-white);
    transform:  scale(1.35);
}

.hero-dot:hover { background: rgba(255,255,255,.8); }

/* ── Diensten-grid ──────────────────────────────────────────────────────────── */
.dienst-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   2.5rem;
    align-items:           center;
}

@media (min-width: 768px) {
    .dienst-grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
    .dienst-grid--reverse .dienst-img { order: -1; }
}

.dienst-tekst h2    { margin-bottom: 1.25rem; }
.dienst-tekst p     { margin-bottom: 1.75rem; }

.dienst-img img {
    border-radius: var(--radius);
    box-shadow:    var(--shadow-md);
    width:         100%;
    max-width:     450px;
    margin:        0 auto;
    display:       block;
    object-fit:    cover;
}

/* ── Kwaliteit ──────────────────────────────────────────────────────────────── */
.kwaliteit-intro {
    max-width:  680px;
    margin:     0 auto 3rem;
    text-align: center;
}

.kwaliteit-intro .section-subtitle {
    display:       block;
    margin-bottom: .75rem;
    font-size:     1rem;
}

.kwaliteit-intro p { max-width: none; }

.features-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   1.5rem;
}

@media (min-width: 768px) {
    .features-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

.feature-item {
    background:    var(--clr-white);
    border-radius: var(--radius);
    padding:       2rem;
    box-shadow:    var(--shadow-sm);
    border-left:   4px solid var(--clr-accent);
}

.feature-item h5 {
    font-weight:   var(--fw-semi);
    margin-bottom: .75rem;
    font-size:     1.125rem;
    color:         var(--clr-primary);
}

.feature-item h3 {
    font-size:     1.25rem;
    margin-bottom: .75rem;
    color:         var(--clr-primary);
}

.feature-item p { margin: 0; }

/* ── Persoonlijke service ───────────────────────────────────────────────────── */
.over-inner          { max-width: 750px; }
.over-inner h2       { margin-bottom: 1.25rem; }
.over-inner > p      { margin-bottom: 2rem; max-width: 70ch; }

/* =============================================================================
   CONTACT & BEDANKT – Formulier, pagina-hero, bedankt-pagina
   Toegevoegd: Fase 8
   ============================================================================= */

/* ── Pagina-hero (alle binnenste pagina's) ──────────────────────────────────── */
.page-hero {
    padding: 3.5rem 0 3rem;
}

.page-hero h1 {
    font-size:     clamp(28px, 4vw, 44px);
    color:         var(--clr-white);
    margin-bottom: 1rem;
}

.page-hero p {
    color:       rgba(255,255,255,.88);
    font-size:   1.0625rem;
    max-width:   60ch;
    line-height: 1.65;
    margin:      0;
}

@media (min-width: 768px) {
    .page-hero { padding: 4.5rem 0 4rem; }
}

/* ── Formulier ──────────────────────────────────────────────────────────────── */
.contact-form { width: 100%; }

.form-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   2.5rem;
}

@media (min-width: 768px) {
    .form-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

.form-section-title {
    font-size:     1.125rem;
    font-weight:   var(--fw-semi);
    color:         var(--clr-primary);
    margin-bottom: .35rem;
}

.form-section-desc {
    font-size:     .9rem;
    color:         var(--clr-secondary);
    margin-bottom: 1.5rem;
}

.form-group {
    display:        flex;
    flex-direction: column;
    gap:            .35rem;
    margin-bottom:  1.25rem;
}

.form-group:last-child { margin-bottom: 0; }

.form-label {
    font-family:  var(--font-heading);
    font-size:    .875rem;
    font-weight:  var(--fw-medium);
    color:        var(--clr-primary);
}

.required { color: var(--clr-accent); margin-left: .1rem; }

.form-control {
    width:         100%;
    padding:       .7rem 1rem;
    font-family:   var(--font-body);
    font-size:     var(--text-base);
    color:         var(--clr-primary);
    background:    var(--clr-white);
    border:        1.5px solid #d1d9e0;
    border-radius: var(--radius);
    transition:    border-color var(--transition), box-shadow var(--transition);
    appearance:    none;
    -webkit-appearance: none;
}

.form-control:focus {
    outline:      none;
    border-color: var(--clr-accent);
    box-shadow:   0 0 0 3px rgba(26,188,156,.15);
}

.form-control::placeholder { color: #a0aab4; }

textarea.form-control {
    resize:      vertical;
    min-height:  160px;
    line-height: 1.55;
}

.form-group.has-error .form-control {
    border-color: #e74c3c;
    box-shadow:   0 0 0 3px rgba(231,76,60,.12);
}

.form-group--textarea { flex: 1; }

/* Foutmelding blok bovenaan formulier */
.form-alert {
    border-radius: var(--radius);
    padding:       1rem 1.25rem;
    margin-bottom: 2rem;
    font-size:     .9375rem;
}

.form-alert--error {
    background: #fdf2f2;
    border:     1.5px solid #e74c3c;
    color:      #c0392b;
}

.form-alert--error ul {
    margin:     .5rem 0 0 1.25rem;
    list-style: disc;
}

.form-alert--error li { margin-bottom: .2rem; }

/* Verzendknop + verplichtvelden-noot */
.form-submit {
    display:     flex;
    align-items: center;
    gap:         1.25rem;
    flex-wrap:   wrap;
    margin-top:  1.5rem;
}

.form-required-note {
    font-size: .8125rem;
    color:     var(--clr-secondary);
    margin:    0;
}

/* Honeypot: volledig verbergen van spambots én screen readers */
.form-honeypot {
    position:   absolute;
    left:       -9999px;
    width:      1px;
    height:     1px;
    overflow:   hidden;
    opacity:    0;
    pointer-events: none;
}

/* ── Bedankt-pagina ─────────────────────────────────────────────────────────── */
.bedankt-inner {
    max-width: 620px;
}

.bedankt-icon {
    color:         var(--clr-accent);
    margin-bottom: 1.5rem;
}

.bedankt-inner p {
    font-size:     1.0625rem;
    margin-bottom: 1rem;
}

.bedankt-actions {
    display:   flex;
    flex-wrap: wrap;
    gap:       .75rem;
    margin-top: 2rem;
}

/* =============================================================================
   CONTENTPAGINA'S – diensten, features, FAQ, tips, subsidie, 404
   Toegevoegd: Fase 10
   ============================================================================= */

/* ── Pagina-hero ondertitel ─────────────────────────────────────────────────── */
.page-hero-sub {
    font-family:  var(--font-heading);
    font-size:    .875rem;
    font-weight:  var(--fw-semi);
    letter-spacing: .08em;
    text-transform: uppercase;
    color:        var(--clr-accent);
    margin-bottom: .5rem;
}

.page-hero .btn { margin-top: 1.5rem; }

/* ── Diensten-blokken (3-koloms) ────────────────────────────────────────────── */
.diensten-blokken {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   1.5rem;
}

@media (min-width: 768px) {
    .diensten-blokken { grid-template-columns: repeat(3, 1fr); }
}

.dienst-blok {
    background:    var(--clr-white);
    border-radius: var(--radius);
    padding:       2rem;
    box-shadow:    var(--shadow-sm);
    border-top:    3px solid var(--clr-accent);
    display:       flex;
    flex-direction: column;
    gap:           1rem;
}

.dienst-blok h2 {
    font-size:   1.25rem;
    margin:      0;
}

.dienst-blok p  { margin: 0; flex: 1; }
.dienst-blok .btn { align-self: flex-start; }

/* ── Genummerde features (01/02/03) ─────────────────────────────────────────── */
.features-numbered {
    display:        flex;
    flex-direction: column;
    gap:            1.5rem;
    margin-top:     1.75rem;
}

.feature-num-item {
    display:     flex;
    gap:         1.25rem;
    align-items: flex-start;
}

.feature-num {
    font-family:   var(--font-heading);
    font-size:     1.75rem;
    font-weight:   var(--fw-bold);
    color:         var(--clr-accent);
    line-height:   1;
    flex-shrink:   0;
    min-width:     2.5rem;
}

.feature-num-item h4 {
    font-size:     1rem;
    font-weight:   var(--fw-semi);
    color:         var(--clr-primary);
    margin-bottom: .35rem;
}

.feature-num-item p { margin: 0; font-size: .9375rem; }

/* ── FAQ accordion (details/summary) ───────────────────────────────────────── */
.faq-intro {
    color:         var(--clr-secondary);
    margin-bottom: 2rem;
    font-size:     1rem;
}

.faq-lijst {
    display:        flex;
    flex-direction: column;
    gap:            .75rem;
    max-width:      820px;
}

.faq-item {
    background:    var(--clr-white);
    border:        1.5px solid rgba(44,62,80,.12);
    border-radius: var(--radius);
    overflow:      hidden;
    transition:    border-color var(--transition);
}

.faq-item[open] {
    border-color: var(--clr-accent);
}

.faq-item summary {
    cursor:      pointer;
    padding:     1.1rem 1.5rem;
    font-family: var(--font-heading);
    font-size:   1rem;
    font-weight: var(--fw-medium);
    color:       var(--clr-primary);
    list-style:  none;
    display:     flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    transition:  background var(--transition);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content:     '+';
    font-size:   1.4rem;
    font-weight: var(--fw-regular);
    color:       var(--clr-accent);
    flex-shrink: 0;
    margin-left: 1rem;
    transition:  transform var(--transition);
}

.faq-item[open] summary::after {
    transform: rotate(45deg);
}

.faq-item summary:hover {
    background: var(--clr-bg);
}

.faq-item > p,
.faq-item > div {
    padding:    0 1.5rem 1.25rem;
    color:      var(--clr-secondary);
    font-size:  .9375rem;
    line-height: 1.65;
    margin:     0;
}

/* ── Tips-grid (onderhoud) ──────────────────────────────────────────────────── */
.tips-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   1.5rem;
    margin-top:            2rem;
}

@media (min-width: 768px) {
    .tips-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .tips-grid { grid-template-columns: repeat(3, 1fr); }
}

.tip-blok {
    background:    var(--clr-white);
    border-radius: var(--radius);
    padding:       1.5rem;
    box-shadow:    var(--shadow-sm);
}

.tip-blok h3 {
    font-size:     1rem;
    font-weight:   var(--fw-semi);
    color:         var(--clr-primary);
    margin-bottom: .75rem;
}

.tip-lijst {
    padding-left: 1.25rem;
    display:      flex;
    flex-direction: column;
    gap:          .4rem;
}

.tip-lijst li {
    font-size:   .9rem;
    color:       var(--clr-secondary);
    line-height: 1.5;
}

/* ── Stappen-grid (subsidies) ───────────────────────────────────────────────── */
.stappen-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   1.5rem;
    margin-top:            2rem;
}

@media (min-width: 768px) {
    .stappen-grid { grid-template-columns: repeat(3, 1fr); }
}

.stap-item {
    background:    var(--clr-white);
    border-radius: var(--radius);
    padding:       2rem;
    box-shadow:    var(--shadow-sm);
    position:      relative;
}

.stap-num {
    display:       block;
    font-family:   var(--font-heading);
    font-size:     2.5rem;
    font-weight:   var(--fw-bold);
    color:         var(--clr-accent);
    opacity:       .3;
    line-height:   1;
    margin-bottom: .75rem;
}

.stap-item h3 {
    font-size:     1.0625rem;
    font-weight:   var(--fw-semi);
    margin-bottom: .5rem;
    color:         var(--clr-primary);
}

.stap-item p { margin: 0; font-size: .9375rem; }

/* ── CTA-sectie (donkere afsluitende balk) ──────────────────────────────────── */
.cta-sectie { text-align: center; }
.cta-sectie h2 { color: var(--clr-white); margin-bottom: 1rem; }
.cta-sectie p  { color: rgba(255,255,255,.8); max-width: none; margin: 0 auto 1.75rem; }

.cta-knoppen {
    display:         flex;
    flex-wrap:       wrap;
    gap:             1rem;
    justify-content: center;
}

/* Outline-knop op donkere achtergrond */
.section-dark .btn-outline {
    color:        var(--clr-white);
    border-color: rgba(255,255,255,.6);
}
.section-dark .btn-outline:hover {
    background:   rgba(255,255,255,.1);
    border-color: var(--clr-white);
    color:        var(--clr-white);
}

/* ── 404-pagina ─────────────────────────────────────────────────────────────── */
.fout-inner { max-width: 600px; }
.fout-inner > p { margin-bottom: 1.25rem; }

.fout-links {
    list-style:  none;
    padding:     0;
    margin:      0 0 2rem;
    display:     flex;
    flex-direction: column;
    gap:         .5rem;
}

.fout-links li::before {
    content: '→ ';
    color:   var(--clr-accent);
}

.fout-links a {
    color:       var(--clr-primary);
    font-weight: var(--fw-medium);
}

.fout-links a:hover { color: var(--clr-accent); }

/* =============================================================================
   JURIDISCHE PAGINA'S – legal-content typografie
   Toegevoegd: Fase 11
   ============================================================================= */

.legal-content {
    max-width: 820px;
}

.legal-content h2 {
    font-size:     1.25rem;
    font-weight:   var(--fw-semi);
    color:         var(--clr-primary);
    margin-top:    2.25rem;
    margin-bottom: .65rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid rgba(44,62,80,.1);
}

.legal-content h3 {
    font-size:     1.0625rem;
    font-weight:   var(--fw-semi);
    margin-top:    1.5rem;
    margin-bottom: .5rem;
    color:         var(--clr-primary);
}

.legal-content h5 {
    font-size:     .875rem;
    font-weight:   var(--fw-medium);
    color:         var(--clr-secondary);
    margin-bottom: .5rem;
}

.legal-content p {
    margin-bottom: .85rem;
    line-height:   1.7;
    max-width:     none;
    color:         var(--clr-secondary);
}

.legal-content ul,
.legal-content ol {
    padding-left:  1.5rem;
    margin-bottom: 1rem;
}

.legal-content li {
    margin-bottom:  .35rem;
    line-height:    1.65;
    color:          var(--clr-secondary);
    font-size:      .9375rem;
}

.legal-content ol li { list-style-type: decimal; }
.legal-content ul li { list-style-type: disc; }

/* Geneste lijsten */
.legal-content li > ul,
.legal-content li > ol {
    margin-top:    .4rem;
    margin-bottom: .4rem;
}

.legal-content strong { color: var(--clr-primary); }

.legal-content a {
    color:           var(--clr-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-content a:hover { color: var(--clr-primary); }

/* =============================================================================
   FOOTER — certificeringen + social media
   Toegevoegd: testfase
   ============================================================================= */

.footer-certs {
    margin-top: 1.25rem;
}

.footer-cert-logo {
    max-width:  160px;
    max-height: 80px;
    width:      auto;
    height:     auto;
    object-fit: contain;
    /* Geen filter: certlogo's hebben eigen kleuren */
    filter:     none;
    opacity:    1;
}

.footer-social {
    margin-top: 1rem;
    display:    flex;
    gap:        .75rem;
}

.footer-social-link {
    display:      flex;
    align-items:  center;
    gap:          .4rem;
    color:        rgba(255,255,255,.7);
    font-size:    .875rem;
    font-weight:  var(--fw-medium);
    transition:   color var(--transition);
    text-decoration: none;
}

.footer-social-link:hover,
.footer-social-link:focus-visible {
    color: var(--clr-accent);
}

/* =============================================================================
   ONDERHOUD — tips met foto + accordion, intro sectie
   Toegevoegd: testfase
   ============================================================================= */

.onderhoud-intro {
    max-width:     680px;
    margin-bottom: 2.5rem;
}

.onderhoud-intro h2 { margin-bottom: .75rem; }

.tips-met-foto {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   2.5rem;
    align-items:           start;
    margin-top:            2rem;
}

@media (min-width: 768px) {
    .tips-met-foto {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
}

.tips-foto img {
    width:         100%;
    border-radius: var(--radius);
    box-shadow:    var(--shadow-md);
    object-fit:    cover;
}

.tips-accordion { display: flex; flex-direction: column; gap: .75rem; }

/* Bullets in FAQ/accordion items */
.faq-item ul {
    padding:        .25rem 1.5rem 1rem;
    display:        flex;
    flex-direction: column;
    gap:            .35rem;
    list-style:     disc;
}

.faq-item li {
    font-size:   .9375rem;
    color:       var(--clr-secondary);
    line-height: 1.55;
}
/* Footer bottom: copyright links, juridische links midden, Pepping Digital rechts */
.footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
}

.footer-copy {
  justify-self: start;
  margin: 0;
}

.footer-legal {
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
}

.footer-legal-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}

.footer-credit {
  justify-self: end;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  text-align: left;
}

.footer-credit-logo {
  display: block;
  width: 145px;
  max-width: 100%;
  height: auto;
  flex: 0 0 auto;
  border-radius: 8px;
}

.footer-credit-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.78rem;
  line-height: 1.35;
  white-space: nowrap;
}

.footer-credit-text span:first-child {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}

@media (max-width: 900px) {
  .footer-bottom {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 1rem;
  }

  .footer-copy,
  .footer-legal,
  .footer-credit {
    justify-self: center;
  }

  .footer-credit {
    flex-direction: column;
    text-align: center;
    gap: 0.4rem;
  }

  .footer-credit-text {
    white-space: normal;
  }
}

/* =============================================================================
   OPGELEVERD — portfolio en projectgalerijen
   ============================================================================= */
.werk-hero p { max-width: 760px; }

.werk-intro .container > p:last-child {
    max-width: 760px;
}

.project-section {
    scroll-margin-top: 96px;
}

.project-detail {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.project-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(44, 62, 80, .14);
}

.project-meta {
    margin-bottom: .4rem;
    color: var(--clr-accent);
    font-family: var(--font-heading);
    font-size: .875rem;
    font-weight: var(--fw-semi);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.project-label {
    display: inline-flex;
    padding: .45rem .8rem;
    border-radius: var(--radius-full);
    background: rgba(26, 188, 156, .12);
    color: var(--clr-primary);
    font-size: .875rem;
    font-weight: var(--fw-semi);
    white-space: nowrap;
}

.project-copy {
    max-width: 820px;
}

.project-copy-wide {
    max-width: 900px;
}

.project-points {
    display: grid;
    gap: .55rem;
    margin: 1.25rem 0 0;
    padding-left: 1.25rem;
}

.project-points li {
    padding-left: .2rem;
    color: var(--clr-secondary);
}

.project-points li::marker {
    color: var(--clr-accent);
}

.project-note {
    margin-top: 1.25rem;
    padding: 1rem 1.1rem;
    border-left: 4px solid var(--clr-accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--clr-white);
    box-shadow: var(--shadow-sm);
}

.project-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.project-photo {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 260px;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: var(--clr-bg-accent);
    box-shadow: var(--shadow-sm);
    cursor: zoom-in;
}

.project-photo::after {
    content: 'Vergroten';
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    padding: .35rem .65rem;
    border-radius: var(--radius-full);
    background: rgba(5, 29, 75, .82);
    color: var(--clr-white);
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: var(--fw-medium);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--transition), transform var(--transition);
}

.project-photo:hover::after,
.project-photo:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.project-photo img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    max-height: 430px;
    object-fit: cover;
    transition: transform var(--transition);
}

.project-photo:hover img,
.project-photo:focus-visible img {
    transform: scale(1.02);
}

.project-photo-wide img {
    max-height: 680px;
    object-fit: contain;
    background: var(--clr-bg-accent);
}

.image-lightbox {
    width: min(94vw, 1200px);
    max-height: 92vh;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: #111;
    box-shadow: 0 20px 70px rgba(0, 0, 0, .45);
}

.image-lightbox::backdrop {
    background: rgba(5, 15, 30, .86);
}

.image-lightbox img {
    width: 100%;
    max-height: 92vh;
    object-fit: contain;
}

.image-lightbox-close {
    position: absolute;
    top: .65rem;
    right: .65rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: rgba(5, 29, 75, .88);
    color: var(--clr-white);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
}

@media (min-width: 700px) {
    .project-heading {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }

    .project-gallery-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .project-gallery-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .project-gallery-5 .project-photo:last-child {
        grid-column: 1 / -1;
    }
}

@media (min-width: 960px) {
    .project-gallery-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .project-gallery-5 .project-photo:nth-child(4),
    .project-gallery-5 .project-photo:nth-child(5) {
        grid-column: auto;
    }

    .project-gallery-5 .project-photo:last-child {
        grid-column: span 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .project-photo img,
    .project-photo::after {
        transition: none;
    }
}

/* Houd het hoofdmenu overzichtelijk op tablets en smallere laptops. */
@media (min-width: 768px) and (max-width: 1023px) {
    .site-nav { display: none; }
    .site-nav.is-open {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 1rem 1.25rem;
        background: var(--clr-white);
        box-shadow: var(--shadow-md);
    }
    .site-nav.is-open .nav-list { flex-direction: column; }
    .header-actions { display: none; }
    .nav-toggle { display: flex; }
}

@media (min-width: 1024px) {
    .site-logo { max-width: 175px; }
    .nav-link { padding-inline: .58rem; }
    .header-actions { gap: .65rem; }
    .header-phone { display: none; }
}

/* =============================================================================
   BINNENPAGINA'S – Hero-slider
   Dezelfde drie afbeeldingen als op de homepage, met paginaspecifieke tekst.
   ============================================================================= */
.hero--page .hero-slider {
    height: 420px;
    min-height: 420px;
    max-height: 500px;
}

.hero-content--page {
    max-width: 820px;
    margin: 0;
    text-align: left;
}

.hero-content--page h1,
.hero-content--page h2 {
    margin-bottom: 1rem;
}

.hero-content--page p:not(.page-hero-sub) {
    max-width: 760px;
}

.hero-content--page .page-hero-sub {
    margin-bottom: .45rem;
    color: rgba(255,255,255,.95);
}

.hero-content--page .btn {
    margin-top: 1.5rem;
}

@media (max-width: 767px) {
    .hero--page .hero-slider {
        height: 500px;
        min-height: 500px;
    }

    .hero-content--page {
        text-align: left;
    }

    .hero-content--page h1,
    .hero-content--page h2 {
        font-size: clamp(2rem, 9vw, 2.7rem);
    }

    .hero-content--page p:not(.page-hero-sub) {
        font-size: 1rem;
        line-height: 1.55;
    }
}