/*
Theme Name: Wespenverdelger Purmerend
Theme URI: https://wespenverdelgerpurmerend.nl
Author: Wespenverdelger Purmerend
Description: Eigen thema voor Wespenverdelger Purmerend - eenpagina website met bel-, WhatsApp- en sms-knop, navigatiebalk, en structured data voor lokale SEO. Werkt samen met SEO-, formulier- en cookieplugins.
Version: 2.5.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
Text Domain: wespenverdelger-purmerend
*/


  :root{
    --cream:#F7F5F0;
    --cream-2:#EFEBE2;
    --white:#FFFFFF;
    --ink:#1A1A18;
    --ink-2:#5F5E5A;
    --line:#E3DED2;
    --line-2:#D2CBBB;
    --yellow:#F2B90C;
    --yellow-2:#FFD23F;
    --amber-dark:#8A6205;
    --black:#0a0a0a;
    --green:#1D9E75;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{
    scroll-behavior:smooth;
    background:var(--cream);
    /*
     * clip in plaats van hidden. overflow-x:hidden maakt van dit element een
     * scrollcontainer, en daarbinnen werkt position:sticky niet meer: de
     * navigatiebalk scrolt dan gewoon mee omhoog. clip voorkomt horizontaal
     * scrollen zonder die bijwerking.
     */
    overflow-x:clip;
  }
  html,body{background-color:var(--cream);min-height:100%;}
  body{
    background:var(--cream);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  header,section,footer{background-color:var(--cream);}
  h1,h2,h3,.display{
    font-family:'Archivo Black',sans-serif;
    text-transform:uppercase;
    letter-spacing:0.5px;
    line-height:1.05;
    /*
     * Nederlandse samenstellingen zijn lang. Zonder deze twee regels steekt
     * een woord als WESPENBESTRIJDING op een smal scherm buiten de kolom,
     * en kun je de pagina zijwaarts wegslepen.
     */
    overflow-wrap:break-word;
    hyphens:auto;
  }
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}

  /* hazard stripe divider - signature element */
  .stripes{
    height:14px;
    width:100%;
    background:repeating-linear-gradient(
      -45deg,
      var(--yellow),
      var(--yellow) 22px,
      var(--black) 22px,
      var(--black) 44px
    );
  }
  .stripes.thin{height:8px;}

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

  /* HEADER + NAVIGATIEBALK */
  /*
   * De balk staat vast bovenaan het scherm, altijd in beeld. Bewust fixed en
   * niet sticky: sticky werkt niet zodra een bovenliggend element een
   * overflow heeft, en dat kan een plugin of childthema zomaar toevoegen.
   * Met fixed is de balk daar niet gevoelig voor.
   */
  .site-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    width:100%;
    z-index:120;
    background:var(--cream);
    transition:box-shadow 0.2s ease;
  }
  /*
   * Een vaste balk staat buiten de pagina-flow, dus de inhoud moet er ruimte
   * voor krijgen. De standaardwaarden hieronder kloppen met de echte hoogte,
   * zodat het ook goed staat voordat nav.js de hoogte precies opmeet.
   */
  body{
    padding-top:var(--wespenverdelger-header-height,77px);
  }
  @media(max-width:900px){
    body{padding-top:var(--wespenverdelger-header-height,69px);}
  }
  .site-header.is-scrolled{
    box-shadow:0 6px 24px rgba(26,26,24,0.10);
  }
  /*
   * Afsluiting van de balk: een strakke gele rand. Bewust geen gestreepte
   * band: de scheidingen tussen de secties zijn al gestreept, en die
   * schuiven tijdens het scrollen onder de vaste balk door. Twee
   * streepbanden vlak boven elkaar, met een stukje achtergrond ertussen en
   * een patroon dat niet uitlijnt, ziet er rommelig uit.
   */
  .site-header{
    border-bottom:3px solid var(--yellow);
  }
  /* alleen in beeld als je het filter wespenverdelger_header_stripes aanzet */
  .header-stripes{height:6px;}
  .site-header.has-header-stripes{border-bottom:0;}

  /* ruimte maken voor de WordPress-adminbalk */
  .admin-bar .site-header{top:32px;}
  @media(max-width:782px){
    .admin-bar .site-header{top:46px;}
  }

  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    min-height:74px;
    padding-top:10px;
    padding-bottom:10px;
  }

  .brand{
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
  }
  /*
   * Het logo wordt begrensd op hoogte én breedte. Zo blijft de balk netjes,
   * ongeacht welk formaat je in de Customizer uploadt. Een staand (portret)
   * logo wordt hierdoor wel erg smal — gebruik voor de balk liever een
   * vierkante of liggende versie.
   */
  .brand-logo,
  .brand img,
  .site-header .custom-logo{
    width:auto;
    height:auto;
    max-height:52px;
    max-width:150px;
    object-fit:contain;
  }
  /* vangnet voor het geval een plugin toch de gelinkte variant plaatst */
  .site-header .custom-logo-link{
    display:inline-flex;
    align-items:center;
    flex-shrink:0;
  }
  .site-header .custom-logo-link img{
    width:auto;
    height:auto;
    max-height:52px;
    max-width:150px;
  }
  .brand-text{
    font-family:'Archivo Black',sans-serif;
    font-size:15px;
    text-transform:uppercase;
    line-height:1.15;
    letter-spacing:0.3px;
  }
  .brand-text span{color:var(--amber-dark);}

  /* de navigatie zelf */
  .site-nav{
    display:flex;
    align-items:center;
    gap:22px;
    margin-left:auto;
  }
  .nav-list{
    display:flex;
    align-items:center;
    gap:4px;
    list-style:none;
    margin:0;
    padding:0;
  }
  .nav-list li{position:relative;}
  .nav-list a{
    display:block;
    padding:9px 12px;
    font-size:14px;
    font-weight:600;
    color:var(--ink);
    border-radius:8px;
    white-space:nowrap;
    transition:background 0.15s ease,color 0.15s ease;
  }
  .nav-list a:hover,
  .nav-list a:focus-visible{
    background:var(--cream-2);
    color:var(--amber-dark);
  }
  /* de sectie waar je nu bent, met een streep in de huisstijl */
  .nav-list a.is-current,
  .nav-list .current-menu-item > a,
  .nav-list .current_page_item > a{
    color:var(--amber-dark);
  }
  .nav-list a.is-current::after,
  .nav-list .current-menu-item > a::after,
  .nav-list .current_page_item > a::after{
    content:"";
    display:block;
    height:3px;
    margin:5px 12px -6px;
    background:var(--yellow);
    border-radius:3px;
  }

  /* submenu's, voor als je in WordPress een menu met subitems maakt */
  .submenu-caret{
    display:inline-block;
    width:6px;
    height:6px;
    margin-left:6px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:translateY(-2px) rotate(45deg);
    opacity:0.6;
  }
  .nav-list .sub-menu{
    position:absolute;
    top:100%;
    left:0;
    min-width:210px;
    list-style:none;
    margin:0;
    padding:8px;
    background:var(--white);
    border:1px solid var(--line);
    border-top:3px solid var(--yellow);
    border-radius:12px;
    box-shadow:0 14px 30px rgba(26,26,24,0.12);
    opacity:0;
    visibility:hidden;
    transform:translateY(6px);
    transition:opacity 0.15s ease,transform 0.15s ease;
  }
  .nav-list li:hover > .sub-menu,
  .nav-list li:focus-within > .sub-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  .nav-list .sub-menu a{white-space:normal;}

  /* telefoonknop in de balk */
  .nav-phone{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight:800;
    font-size:14px;
    color:var(--black);
    white-space:nowrap;
    background:var(--yellow);
    padding:11px 18px;
    border-radius:100px;
    transition:filter 0.15s ease,transform 0.1s ease;
  }
  .nav-phone:hover{filter:brightness(1.06);}
  .nav-phone:active{transform:scale(0.97);}
  .nav-phone svg{width:16px;height:16px;flex-shrink:0;}

  /* hamburgerknop */
  .nav-toggle{
    display:none;
    align-items:center;
    gap:9px;
    background:var(--white);
    border:1px solid var(--line-2);
    border-radius:10px;
    padding:9px 14px;
    font-family:inherit;
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--ink);
    cursor:pointer;
  }
  .nav-toggle-bars{
    display:block;
    width:18px;
    height:12px;
    position:relative;
  }
  .nav-toggle-bars span{
    position:absolute;
    left:0;
    width:100%;
    height:2px;
    background:var(--ink);
    border-radius:2px;
    transition:transform 0.2s ease,opacity 0.2s ease;
  }
  .nav-toggle-bars span:nth-child(1){top:0;}
  .nav-toggle-bars span:nth-child(2){top:5px;}
  .nav-toggle-bars span:nth-child(3){top:10px;}
  .nav-open .nav-toggle-bars span:nth-child(1){transform:translateY(5px) rotate(45deg);}
  .nav-open .nav-toggle-bars span:nth-child(2){opacity:0;}
  .nav-open .nav-toggle-bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}

  /* mobiel: menu uitklappen */
  @media(max-width:900px){
    .header-inner{
      flex-wrap:wrap;
      min-height:66px;
      gap:12px;
    }
    .nav-toggle{display:inline-flex;order:2;}
    .site-nav{
      order:3;
      display:none;
      width:100%;
      flex-direction:column;
      align-items:stretch;
      gap:10px;
      margin:0;
      padding:6px 0 16px;
      border-top:1px solid var(--line);
    }
    .nav-open .site-nav{display:flex;}
    /* past het menu niet op het scherm, dan scrolt het binnen de balk */
    .nav-open .site-header{
      max-height:100vh;
      max-height:100dvh;
      overflow-y:auto;
    }
    .nav-list{
      flex-direction:column;
      align-items:stretch;
      gap:2px;
    }
    .nav-list a{
      padding:12px 4px;
      font-size:16px;
      border-bottom:1px solid var(--line);
      border-radius:0;
    }
    .nav-list a.is-current::after,
    .nav-list .current-menu-item > a::after,
    .nav-list .current_page_item > a::after{
      margin:6px 0 -8px;
      width:34px;
    }
    .nav-list .sub-menu{
      position:static;
      opacity:1;
      visibility:visible;
      transform:none;
      box-shadow:none;
      border:0;
      border-left:3px solid var(--yellow);
      border-radius:0;
      padding:0 0 0 12px;
      margin:0 0 6px;
    }
    .nav-phone{justify-content:center;padding:14px 18px;font-size:16px;}
    .submenu-caret{display:none;}
  }
  @media(max-width:400px){
    .brand-text{font-size:13px;}
    .brand-logo,.brand img{max-height:42px;max-width:110px;}
    .nav-toggle-label{display:none;}
  }

  /* HERO */
  .hero{
    padding:56px 0 44px;
    text-align:center;
  }
  .eyebrow{
    display:inline-block;
    color:var(--amber-dark);
    font-weight:700;
    font-size:13px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:14px;
  }
  h1{
    font-size:clamp(28px,7vw,58px);
    margin-bottom:16px;
  }
  h1 .accent{color:var(--amber-dark);}
  .subhead{
    color:var(--ink-2);
    font-size:17px;
    max-width:540px;
    margin:0 auto 8px;
  }
  .badges{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    margin:22px 0 30px;
  }
  .badge{
    border:1px solid var(--line-2);
    background:var(--white);
    padding:8px 14px;
    border-radius:100px;
    font-size:13px;
    font-weight:600;
    color:var(--ink);
    display:flex;
    align-items:center;
    gap:6px;
  }
  .badge b{color:var(--amber-dark);}

  /* CTA BUTTONS */
  .cta-group{
    display:flex;
    flex-direction:column;
    gap:12px;
    max-width:420px;
    margin:0 auto;
  }
  .btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:17px 20px;
    border-radius:10px;
    font-weight:800;
    font-size:16px;
    text-transform:uppercase;
    letter-spacing:0.3px;
    transition:transform .15s ease, filter .15s ease;
    border:2px solid transparent;
  }
  .btn:active{transform:scale(0.97);}
  .btn svg{width:22px;height:22px;flex-shrink:0;}
  .btn-call{
    background:var(--yellow);
    color:var(--black);
  }
  .btn-call:hover{filter:brightness(1.06);}
  .btn-whatsapp{
    background:#25D366;
    color:#04140a;
  }
  .btn-whatsapp:hover{filter:brightness(1.06);}
  .btn-sms{
    background:var(--white);
    color:var(--ink);
    border:2px solid var(--line-2);
  }
  .btn-sms:hover{border-color:var(--yellow);}

  /* SECTION GENERIC */
  section{padding:52px 0;}
  .section-title{
    font-size:clamp(24px,4vw,32px);
    margin-bottom:8px;
  }
  .section-title .accent{color:var(--amber-dark);}
  .section-sub{
    color:var(--ink-2);
    margin-bottom:28px;
    font-size:15px;
  }
  .band{background:var(--cream-2);}

  /* URGENCY / PRICING */
  .price-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
  }
  @media(max-width:560px){
    .price-grid{grid-template-columns:1fr;}
  }
  .price-card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:14px;
    padding:26px 22px;
    position:relative;
    overflow:hidden;
  }
  .price-card.urgent{
    border-color:var(--yellow);
    box-shadow:0 0 0 1px var(--yellow);
  }
  .price-card .tag{
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1.5px;
    color:var(--ink-2);
    margin-bottom:10px;
    display:block;
  }
  .price-card.urgent .tag{color:var(--amber-dark);}
  .price-amount{
    font-family:'Archivo Black',sans-serif;
    font-size:44px;
    color:var(--ink);
    margin-bottom:6px;
  }
  .price-amount span{
    font-size:16px;
    font-family:'Inter',sans-serif;
    color:var(--ink-2);
    font-weight:600;
    text-transform:none;
  }
  .price-desc{color:var(--ink-2);font-size:14px;}

  /* STAP-KAARTEN (zo werkt het / onze aanpak) */
  .step-cards{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
  }
  .step-cards.three{grid-template-columns:repeat(3,1fr);}
  @media(max-width:820px){
    .step-cards,.step-cards.three{grid-template-columns:repeat(2,1fr);}
  }
  @media(max-width:460px){
    .step-cards,.step-cards.three{grid-template-columns:1fr;}
  }
  .step-card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:14px;
    padding:26px 20px;
    text-align:center;
  }
  .step-badge{
    width:44px;height:44px;
    border-radius:50%;
    background:var(--yellow);
    color:var(--black);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Archivo Black',sans-serif;
    font-size:18px;
    margin:0 auto 14px;
  }
  .step-card h3{
    font-family:'Inter',sans-serif;
    text-transform:none;
    letter-spacing:0;
    font-size:15px;
    font-weight:700;
    margin-bottom:6px;
  }
  .step-card p{color:var(--ink-2);font-size:14px;}

  /* GARANTIE */
  .guarantee{
    margin-top:28px;
    padding:20px 22px;
    background:var(--white);
    border:1px solid var(--line);
    border-left:4px solid var(--yellow);
    color:var(--ink);
    font-size:15px;
    line-height:1.7;
  }
  .guarantee b{color:var(--amber-dark);}
  .guarantee-badges{
    justify-content:flex-start;
    margin:18px 0 0;
  }

  /* SERVICE AREA */
  .area-story{
    color:var(--ink);
    font-size:15.5px;
    line-height:1.7;
    max-width:660px;
    margin-bottom:28px;
  }
  .area-story b{color:var(--amber-dark);font-weight:700;}
  .area-card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:16px;
    padding:26px 24px;
  }
  .area-group{margin-bottom:20px;}
  .area-group:last-child{margin-bottom:0;}
  .area-group-label{
    display:block;
    font-size:12px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--amber-dark);
    margin-bottom:10px;
  }
  .area-chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .chip{
    background:var(--cream);
    border:1px solid var(--line-2);
    color:var(--ink);
    font-size:13px;
    font-weight:600;
    padding:7px 13px;
    border-radius:100px;
  }
  .chip.hq{
    background:var(--yellow);
    color:var(--black);
    border-color:var(--yellow);
  }

  /* WHY US */
  .why-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
  }
  @media(max-width:700px){
    .why-grid{grid-template-columns:1fr;}
  }
  .why-item{
    background:var(--white);
    border-radius:14px;
    padding:22px;
    border:1px solid var(--line);
  }
  .why-item .icon{
    width:38px;height:38px;
    margin-bottom:14px;
    color:var(--amber-dark);
  }
  .why-item h3{
    font-family:'Inter',sans-serif;
    text-transform:none;
    letter-spacing:0;
    font-size:16px;
    font-weight:700;
    margin-bottom:6px;
  }
  .why-item p{color:var(--ink-2);font-size:14px;}

  /* WESP / BIJ / HOMMEL */
  .insect-intro{
    color:var(--ink);
    font-size:15.5px;
    line-height:1.7;
    max-width:660px;
    margin-bottom:28px;
  }
  .insect-intro b{color:var(--amber-dark);font-weight:700;}
  .insect-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
  }
  @media(max-width:820px){
    .insect-grid{grid-template-columns:1fr;}
  }
  .insect-card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:16px;
    padding:24px 22px;
    display:flex;
    flex-direction:column;
  }
  .insect-card.warn{border-color:#F0CFA0;}
  .insect-card.safe{border-color:#B8E0CF;}
  .insect-card img{
    width:132px;
    height:132px;
    object-fit:contain;
    background:var(--cream);
    border-radius:50%;
    padding:10px;
    margin:0 auto 16px;
  }
  .insect-card h3{
    font-family:'Inter',sans-serif;
    text-transform:none;
    letter-spacing:0;
    font-size:19px;
    font-weight:700;
    text-align:center;
    margin-bottom:14px;
  }
  .insect-features{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:7px;
    margin-bottom:16px;
  }
  .insect-features li{
    font-size:14px;
    color:var(--ink-2);
    padding-left:16px;
    position:relative;
  }
  .insect-features li::before{
    content:"\2022";
    position:absolute;
    left:0;
    color:var(--line-2);
    font-size:16px;
  }
  .insect-status{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:15px;
    font-weight:700;
    padding-top:14px;
    border-top:1px solid var(--line);
    margin-bottom:8px;
  }
  .insect-card.warn .insect-status{color:#A3552D;}
  .insect-card.safe .insect-status{color:#0F6E56;}
  .insect-status svg{width:19px;height:19px;flex-shrink:0;}
  .insect-note{font-size:14px;color:var(--ink-2);margin-top:auto;}

  .insect-cta-text{
    color:var(--ink);
    font-size:15px;
    line-height:1.7;
    max-width:560px;
    margin:28px 0 18px;
  }
  .insect-cta .btn{max-width:340px;}

  /* FINAL CTA */
  .final-cta{
    text-align:center;
    padding:56px 0 44px;
  }
  .final-cta h2{
    font-size:clamp(26px,5vw,38px);
    margin-bottom:12px;
  }
  .final-cta p{
    color:var(--ink-2);
    margin-bottom:28px;
    max-width:460px;
    margin-left:auto;
    margin-right:auto;
  }

  /* FOOTER */
  footer{
    background:var(--ink);
    color:#C9C6BE;
    padding:52px 0 28px;
    font-size:14px;
  }
  .foot-grid{
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr;
    gap:40px;
  }
  @media(max-width:820px){
    .foot-grid{grid-template-columns:1fr 1fr;gap:32px;}
  }
  @media(max-width:560px){
    .foot-grid{grid-template-columns:1fr;gap:30px;}
  }
  .foot-col{min-width:0;}
  .foot-logo{
    width:64px;height:64px;
    object-fit:contain;
    border-radius:10px;
    background:var(--white);
    padding:6px;
    margin-bottom:16px;
  }
  .foot-about{
    color:#A9A69E;
    line-height:1.7;
    max-width:340px;
  }
  .foot-head{
    font-family:'Inter',sans-serif;
    text-transform:none;
    letter-spacing:0;
    font-size:16px;
    font-weight:700;
    color:var(--white);
    margin-bottom:16px;
  }
  .foot-list{list-style:none;display:flex;flex-direction:column;gap:13px;}
  .foot-list li{display:flex;align-items:center;gap:10px;}
  .foot-list svg{width:18px;height:18px;flex-shrink:0;color:var(--yellow);}
  .foot-list a:hover{color:var(--yellow-2);}
  .foot-social{display:flex;flex-direction:column;gap:11px;margin-bottom:20px;}
  .foot-social a{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#C9C6BE;
    font-weight:600;
    transition:color .15s ease;
  }
  .foot-social a svg{width:22px;height:22px;flex-shrink:0;color:var(--yellow);}
  .foot-social a:hover{color:var(--yellow-2);}
  .foot-cta{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#25D366;
    color:#04140a;
    font-weight:800;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.3px;
    padding:11px 16px;
    border-radius:9px;
  }
  .foot-cta svg{width:18px;height:18px;}
  .foot-cta:hover{filter:brightness(1.06);}
  .foot-bottom{
    margin-top:40px;
    padding-top:22px;
    border-top:1px solid #33322E;
    color:#8C8A83;
    font-size:12.5px;
  }
  .foot-area{margin-top:7px;line-height:1.8;}

  /* sticky mobile bar */
  .sticky-bar{
    position:fixed;
    bottom:0;left:0;right:0;
    display:flex;
    z-index:50;
    box-shadow:0 -4px 18px rgba(0,0,0,0.18);
  }
  .sticky-bar a{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:14px 6px;
    font-weight:800;
    font-size:12.5px;
    text-transform:uppercase;
  }
  .sticky-bar a svg{width:18px;height:18px;}
  .sticky-bar .s-call{background:var(--yellow);color:var(--black);}
  .sticky-bar .s-wa{background:#25D366;color:#04140a;}
  .sticky-bar .s-sms{background:var(--ink);color:var(--white);}

  body{padding-bottom:64px;}
  @media(min-width:640px){
    .sticky-bar{display:none;}
    body{padding-bottom:0;}
  }

  /*
   * skip-link: alleen zichtbaar bij tabben met het toetsenbord.
   * Bewust niet met left:-9999px verstopt. Zo'n element staat buiten het
   * scherm en zorgt op smalle schermen voor een paar pixels die je
   * zijwaarts kunt wegslepen. De klasse screen-reader-text verstopt het
   * zonder het te verplaatsen.
   */
  .skip-link:focus{
    z-index:999;
    background:var(--yellow);
    color:var(--black);
    padding:12px 18px;
    font-weight:800;
    font-size:14px;
    border-radius:0 0 10px 0;
  }

  /* zichtbare focus voor toetsenbordgebruik */
  a:focus-visible,button:focus-visible{
    outline:3px solid var(--amber-dark);
    outline-offset:3px;
  }

  /* veelgestelde vragen */
  .faq-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin-top:28px;
  }
  @media(max-width:820px){
    .faq-list{grid-template-columns:1fr;}
  }
  .faq-item{
    background:var(--white);
    border:1px solid var(--line);
    border-left:4px solid var(--yellow);
    border-radius:14px;
    padding:22px 24px;
  }
  .faq-q{
    font-size:16px;
    margin-bottom:9px;
    letter-spacing:0.3px;
  }
  .faq-a{
    color:var(--ink-2);
    font-size:14px;
    line-height:1.65;
  }

  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.01ms !important;transition-duration:0.01ms !important;}
  }

  /* ===================================================================
     WORDPRESS-KERNSTIJLEN
     Nodig zodat inhoud van de blokeditor en van plugins (formulieren,
     cookiemeldingen, reviews, WooCommerce) er meteen goed uitziet in
     plaats van ongestyled.
     =================================================================== */

  /* verplichte WordPress-klassen */
  .screen-reader-text{
    border:0;
    clip:rect(1px,1px,1px,1px);
    clip-path:inset(50%);
    height:1px;
    width:1px;
    margin:-1px;
    overflow:hidden;
    padding:0;
    position:absolute !important;
    word-wrap:normal !important;
  }
  .screen-reader-text:focus{
    background:var(--yellow);
    color:var(--black);
    clip:auto !important;
    clip-path:none;
    display:block;
    height:auto;
    width:auto;
    left:5px;
    top:5px;
    padding:14px 20px;
    font-size:14px;
    font-weight:800;
    line-height:normal;
    text-decoration:none;
    z-index:100000;
  }
  .alignleft{float:left;margin:0.4em 1.6em 1em 0;}
  .alignright{float:right;margin:0.4em 0 1em 1.6em;}
  .aligncenter{margin-left:auto;margin-right:auto;}
  .alignwide{
    max-width:1040px;
    margin-left:calc(50% - min(520px,45vw));
    margin-right:auto;
    width:min(1040px,90vw);
  }
  .alignfull{
    max-width:100vw;
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
  }
  .wp-caption{max-width:100%;}
  .wp-caption-text,
  .wp-block-image figcaption{
    font-size:13px;
    color:var(--ink-2);
    text-align:center;
    margin-top:8px;
  }
  .sticky .post-card-title::before{
    content:"📌 ";
  }
  .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
  .gallery-item{margin:0;}
  .bypostauthor > .comment-body{border-left:3px solid var(--yellow);}

  /* ===================================================================
     PAGINA'S, BERICHTEN EN PLUGIN-INHOUD
     =================================================================== */
  .page-wrap{
    padding:44px 24px 64px;
  }
  .page-head{
    max-width:760px;
    margin:0 auto 28px;
  }
  .page-title{
    font-size:clamp(28px,5vw,44px);
    margin-bottom:10px;
  }
  .page-title .accent{color:var(--amber-dark);}
  .page-sub,
  .entry-meta{
    color:var(--ink-2);
    font-size:15px;
  }
  .entry-meta a{text-decoration:underline;text-underline-offset:3px;}
  .entry-thumb{
    max-width:760px;
    margin:0 auto 28px;
  }
  .entry-thumb img{
    width:100%;
    border-radius:16px;
    border:1px solid var(--line);
  }

  .entry-content{
    max-width:760px;
    margin:0 auto;
    font-size:17px;
    line-height:1.7;
    color:var(--ink);
  }
  .entry-content > * + *{margin-top:1.1em;}
  .entry-content h2{font-size:clamp(22px,3.4vw,30px);margin-top:1.8em;}
  .entry-content h3{font-size:clamp(18px,2.6vw,22px);margin-top:1.5em;}
  .entry-content h4,
  .entry-content h5,
  .entry-content h6{
    font-family:'Inter',sans-serif;
    font-weight:800;
    margin-top:1.4em;
  }
  .entry-content a{
    color:var(--amber-dark);
    text-decoration:underline;
    text-underline-offset:3px;
    text-decoration-thickness:2px;
  }
  .entry-content a:hover{background:rgba(242,185,12,0.18);}
  .entry-content ul,
  .entry-content ol{padding-left:1.3em;}
  .entry-content li + li{margin-top:0.4em;}
  .entry-content img,
  .entry-content iframe,
  .entry-content video{max-width:100%;height:auto;border-radius:14px;}
  .entry-content blockquote{
    border-left:4px solid var(--yellow);
    background:var(--white);
    border-radius:0 14px 14px 0;
    padding:18px 22px;
    font-size:18px;
  }
  .entry-content blockquote cite{
    display:block;
    margin-top:8px;
    font-size:14px;
    font-style:normal;
    color:var(--ink-2);
  }
  .entry-content code,
  .entry-content kbd{
    background:var(--cream-2);
    border:1px solid var(--line);
    border-radius:6px;
    padding:2px 6px;
    font-size:0.9em;
  }
  .entry-content pre{
    background:var(--ink);
    color:var(--cream);
    border-radius:14px;
    padding:18px 20px;
    overflow-x:auto;
  }
  .entry-content pre code{background:none;border:0;color:inherit;}
  .entry-content hr,
  .wp-block-separator{
    border:0;
    height:6px;
    background:repeating-linear-gradient(-45deg,var(--yellow),var(--yellow) 12px,var(--black) 12px,var(--black) 24px);
    border-radius:3px;
    margin:2em 0;
  }
  .entry-content table,
  .wp-block-table table{
    width:100%;
    border-collapse:collapse;
    font-size:15px;
  }
  .entry-content th,
  .entry-content td{
    border:1px solid var(--line);
    padding:10px 12px;
    text-align:left;
  }
  .entry-content th{background:var(--cream-2);font-weight:800;}
  .entry-tags{
    max-width:760px;
    margin:26px auto 0;
    font-size:14px;
    color:var(--ink-2);
  }
  .entry-tags a{
    display:inline-block;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:100px;
    padding:5px 12px;
    margin:0 6px 6px 0;
  }
  .page-links{margin-top:1.4em;font-weight:700;}

  /* knop zonder vulling, gebruikt op de 404-pagina */
  .btn-ghost{
    background:var(--white);
    border:2px solid var(--ink);
    color:var(--ink);
  }
  .btn-ghost:hover{border-color:var(--yellow);}

  /* berichtenlijst */
  .post-list{
    display:grid;
    gap:20px;
    max-width:760px;
    margin:0 auto;
  }
  .post-card{
    display:flex;
    gap:20px;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:16px;
    padding:20px;
  }
  .post-card-thumb{flex:0 0 150px;}
  .post-card-thumb img{border-radius:12px;height:100%;object-fit:cover;}
  .post-card-title{
    font-size:20px;
    margin-bottom:6px;
  }
  .post-card-title a:hover{color:var(--amber-dark);}
  .post-card-excerpt{
    color:var(--ink-2);
    font-size:15px;
    line-height:1.65;
    margin:8px 0 10px;
  }
  .post-card-more{
    font-weight:800;
    font-size:14px;
    color:var(--amber-dark);
  }
  @media(max-width:640px){
    .post-card{flex-direction:column;}
    .post-card-thumb{flex:none;}
    .gallery{grid-template-columns:repeat(2,1fr);}
  }

  /* paginering en bericht-navigatie */
  .navigation.pagination,
  .post-navigation{
    max-width:760px;
    margin:36px auto 0;
  }
  .nav-links{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .page-numbers{
    display:inline-block;
    min-width:42px;
    text-align:center;
    padding:9px 12px;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:10px;
    font-weight:700;
    font-size:14px;
  }
  .page-numbers.current{
    background:var(--yellow);
    border-color:var(--yellow);
    color:var(--black);
  }
  .page-numbers:hover{border-color:var(--line-2);}
  .post-navigation .nav-links{justify-content:space-between;}
  .post-navigation a{
    display:block;
    max-width:48%;
    font-weight:700;
    font-size:15px;
  }
  .nav-sub{
    display:block;
    font-size:12px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--amber-dark);
  }

  /* zoekformulier */
  .search-form{
    display:flex;
    gap:8px;
    max-width:460px;
    margin-top:14px;
  }
  .search-field{
    flex:1;
    font-family:inherit;
    font-size:15px;
    padding:12px 14px;
    background:var(--white);
    border:1px solid var(--line-2);
    border-radius:10px;
    color:var(--ink);
  }
  .search-field:focus{outline:3px solid var(--amber-dark);outline-offset:1px;}
  .search-submit{
    font-family:inherit;
    font-weight:800;
    font-size:14px;
    padding:12px 20px;
    background:var(--yellow);
    color:var(--black);
    border:0;
    border-radius:10px;
    cursor:pointer;
  }
  .search-submit:hover{filter:brightness(1.06);}

  /* widgets: zijbalk en footer */
  .site-sidebar{
    background:var(--cream-2);
    border-top:1px solid var(--line);
    padding:40px 0;
  }
  .site-sidebar .wrap{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:26px;
  }
  .widget{font-size:15px;color:var(--ink-2);}
  .widget-title{
    font-family:'Archivo Black',sans-serif;
    text-transform:uppercase;
    font-size:14px;
    letter-spacing:1px;
    color:var(--ink);
    margin-bottom:12px;
  }
  .widget ul{list-style:none;padding:0;}
  .widget li + li{margin-top:8px;border-top:1px solid var(--line);padding-top:8px;}
  .widget a:hover{color:var(--amber-dark);}
  .foot-widgets .widget{color:inherit;}

  /* footermenu */
  .foot-nav{margin-top:24px;}
  .foot-nav-list{
    display:flex;
    flex-wrap:wrap;
    gap:6px 20px;
    list-style:none;
    padding:0;
    font-size:14px;
    font-weight:600;
  }
  .foot-nav-list a:hover{color:var(--yellow);}

  /* reacties */
  .comments-area{
    max-width:760px;
    margin:48px auto 0;
    padding-top:32px;
    border-top:1px solid var(--line);
  }
  .comments-title{
    font-size:20px;
    margin-bottom:20px;
  }
  .comment-list{list-style:none;padding:0;}
  .comment-list ol.children{list-style:none;padding-left:24px;}
  .comment-body{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:14px;
    padding:18px 20px;
    margin-bottom:14px;
    font-size:15px;
  }
  .comment-meta{font-size:13px;color:var(--ink-2);margin-bottom:8px;}
  .comment-form{display:grid;gap:12px;max-width:560px;}
  .comment-form input[type="text"],
  .comment-form input[type="email"],
  .comment-form input[type="url"],
  .comment-form textarea{
    width:100%;
    font-family:inherit;
    font-size:15px;
    padding:12px 14px;
    background:var(--white);
    border:1px solid var(--line-2);
    border-radius:10px;
    color:var(--ink);
  }
  .comment-form .submit{
    font-family:inherit;
    font-weight:800;
    font-size:15px;
    padding:13px 24px;
    background:var(--yellow);
    color:var(--black);
    border:0;
    border-radius:100px;
    cursor:pointer;
    justify-self:start;
  }

  /* zijbalk naast de tekst op brede schermen */
  @media(min-width:1100px){
    .has-sidebar .site-sidebar .wrap{max-width:1040px;}
  }

  /* voorkomt dat de pagina meescrollt terwijl het mobiele menu open staat */
  body.nav-is-open{overflow:hidden;}
  @media(min-width:901px){
    body.nav-is-open{overflow:visible;}
  }

  /* ===================================================================
     HOMEPAGE-INHOUD DIE UIT DE EDITOR KOMT
     Zodra de brochure als echte pagina-inhoud is opgeslagen, moeten de
     volle secties nog steeds over de hele breedte lopen, terwijl gewone
     tekst netjes op leesbreedte blijft.
     =================================================================== */
  .front-page-content{
    max-width:none;
    padding:0;
    /* de brochure heeft haar eigen typografie; niet die van een tekstpagina */
    font-size:inherit;
    line-height:inherit;
  }
  .front-page-content > section,
  .front-page-content > .stripes{
    max-width:none;
    margin-top:0;
    margin-bottom:0;
  }
  /*
   * Losse tekst die je zelf in de editor toevoegt blijft op leesbreedte en
   * krijgt de leesbare typografie. Bewust alleen op de directe kinderen:
   * anders zou deze opmaak ook de koppen binnen de brochure-secties
   * overnemen en wordt de hele pagina hoger.
   */
  .front-page-content > *:not(section):not(.stripes){
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
    padding-left:24px;
    padding-right:24px;
    font-size:17px;
    line-height:1.7;
  }
  .front-page-content > *:not(section):not(.stripes) + *:not(section):not(.stripes){
    margin-top:1.1em;
  }
  .front-page-content > *:not(section):not(.stripes) a{
    color:var(--amber-dark);
    text-decoration:underline;
    text-underline-offset:3px;
    text-decoration-thickness:2px;
  }
  .front-page-content > h2:not(section){font-size:clamp(22px,3.4vw,30px);margin-top:1.8em;}
  .front-page-content > h3:not(section){font-size:clamp(18px,2.6vw,22px);margin-top:1.5em;}

  /* ===================================================================
     ANIMATIES
     Alles draait op transform en opacity: dat rekent de browser af op de
     grafische kaart, dus het blijft soepel ook op een telefoon. De klasse
     wv-anim wordt in de <head> gezet en alleen als de bezoeker bewegende
     beelden wil; staat 'verminder beweging' aan, dan gebeurt hier niets.
     De h1 van de hero doet bewust niet mee, zie js/anim.js.
     =================================================================== */

  .wv-anim .section-title,
  .wv-anim .section-sub,
  .wv-anim .price-card,
  .wv-anim .step-card,
  .wv-anim .why-item,
  .wv-anim .insect-card,
  .wv-anim .faq-item,
  .wv-anim .area-story,
  .wv-anim .area-card,
  .wv-anim .guarantee,
  .wv-anim .guarantee-badges,
  .wv-anim .insect-intro,
  .wv-anim .insect-cta-text,
  .wv-anim .insect-cta,
  .wv-anim .hero .eyebrow,
  .wv-anim .hero .subhead,
  .wv-anim .hero .badges,
  .wv-anim .hero .cta-group{
    opacity:0;
    transform:translateY(14px);
    transition:opacity 0.5s ease-out,transform 0.5s cubic-bezier(0.22,1,0.36,1);
  }

  .wv-anim .section-title.is-revealed,
  .wv-anim .section-sub.is-revealed,
  .wv-anim .price-card.is-revealed,
  .wv-anim .step-card.is-revealed,
  .wv-anim .why-item.is-revealed,
  .wv-anim .insect-card.is-revealed,
  .wv-anim .faq-item.is-revealed,
  .wv-anim .area-story.is-revealed,
  .wv-anim .area-card.is-revealed,
  .wv-anim .guarantee.is-revealed,
  .wv-anim .guarantee-badges.is-revealed,
  .wv-anim .insect-intro.is-revealed,
  .wv-anim .insect-cta-text.is-revealed,
  .wv-anim .insect-cta.is-revealed,
  .wv-anim .hero .eyebrow.is-revealed,
  .wv-anim .hero .subhead.is-revealed,
  .wv-anim .hero .badges.is-revealed,
  .wv-anim .hero .cta-group.is-revealed{
    opacity:1;
    transform:none;
  }

  /*
   * De gestreepte scheidingen vegen open vanaf links. Dit is het enige
   * opvallende effect op de pagina: het is het herkenbare element van het
   * merk, dus daar mag de aandacht heen. De rest blijft rustig.
   */
  .wv-anim #content .stripes{
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform 0.55s cubic-bezier(0.22,1,0.36,1);
  }
  .wv-anim #content .stripes.is-revealed{
    transform:scaleX(1);
  }

  /* kaarten reageren op de muis */
  .price-card,
  .step-card,
  .insect-card,
  .why-item,
  .faq-item{
    transition:transform 0.2s ease,box-shadow 0.2s ease;
  }
  @media(hover:hover){
    .price-card:hover,
    .step-card:hover,
    .insect-card:hover,
    .faq-item:hover{
      transform:translateY(-4px);
      box-shadow:0 12px 28px rgba(26,26,24,0.10);
    }
    .why-item:hover .icon{
      transform:translateY(-3px) rotate(-4deg);
    }
    .why-item .icon{
      transition:transform 0.25s cubic-bezier(0.22,1,0.36,1);
    }
    .chip{transition:transform 0.15s ease,border-color 0.15s ease;}
    .chip:hover{transform:translateY(-2px);border-color:var(--yellow);}
  }

  /*
   * Verminder beweging: alles meteen zichtbaar en niets dat beweegt.
   * Deze regels staan bewust achteraan zodat ze het van het bovenstaande
   * winnen.
   */
  @media(prefers-reduced-motion:reduce){
    .wv-anim .section-title,
    .wv-anim .section-sub,
    .wv-anim .price-card,
    .wv-anim .step-card,
    .wv-anim .why-item,
    .wv-anim .insect-card,
    .wv-anim .faq-item,
    .wv-anim .area-story,
    .wv-anim .area-card,
    .wv-anim .guarantee,
    .wv-anim .guarantee-badges,
    .wv-anim .insect-intro,
    .wv-anim .insect-cta-text,
    .wv-anim .insect-cta,
    .wv-anim .hero .eyebrow,
    .wv-anim .hero .subhead,
    .wv-anim .hero .badges,
    .wv-anim .hero .cta-group,
    .wv-anim #content .stripes{
      opacity:1;
      transform:none;
      transition:none;
    }
    .price-card:hover,
    .step-card:hover,
    .insect-card:hover,
    .faq-item:hover{transform:none;}
  }