/* ZoëZo Creatief — gedeelde stijlen voor alle pagina's.
   Extern bestand zodat browsers het cachen tussen pagina's. */
:root{
      /* ZoëZo */
      --zz-pink:#f34488;
      --zz-pink-dark:#e9185c;   /* dark-pink */
      --zz-orange:#fe6402;
      --zz-red-orange:#f32728;  /* red */
      --zz-light-pink:#fb9ab9;
      --zz-salmon:#f34488;
      --zz-white:#FFFFFF;
      --zz-ink:#1f1f1f;
      --zz-soft:#fff5f8;
    }

    html {scroll-behavior:smooth;}

    /* Self-hosted display font (logo-stijl). */
    @font-face{
      font-family:'Action Man';
      src:url('../action_man-font/Action Man.ttf') format('truetype');
      font-weight:400; font-style:normal; font-display:swap;
    }
    @font-face{
      font-family:'Action Man';
      src:url('../action_man-font/Action Man Bold.ttf') format('truetype');
      font-weight:700; font-style:normal; font-display:swap;
    }

    body {
      font-family:'Action Man', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      color:var(--zz-ink);
      background:var(--zz-white);
      overflow-x:hidden;
    }

    h1,h2,h3,.brand-font,.btn-zz,.btn-outline-zz{font-family:'Action Man', sans-serif; font-weight:700;}
    .navbar{background:rgba(255,255,255,.9); backdrop-filter: blur(12px);}
    .navbar-brand img{height:62px; width:auto;}
    .navbar .nav-link{font-weight:700; color:var(--zz-ink);}
    .navbar .nav-link:hover{color:var(--zz-pink-dark);}
    .nav-cta{
      background:var(--zz-pink); color:#fff !important; border-radius:999px;
      padding:.55rem 1rem !important; box-shadow:0 10px 24px rgba(243,68,136,.22);
    }
    .btn-zz{
      background:var(--zz-pink-dark);
      border:0; color:#fff; border-radius:999px; padding:.85rem 1.35rem;
      font-weight:800; box-shadow:0 14px 30px rgba(243,68,136,.22);
    }
    .btn-zz:hover{color:#fff;  background: var(--zz-orange); }
    .btn-outline-zz{
      border:2px solid var(--zz-pink); color:var(--zz-pink); background-color:transparent;
      border-radius:999px; padding:.8rem 1.3rem; font-weight:800;
    }
    /* Zonder deze regel valt de knop terug op Bootstrap's eigen standaard
       hover-kleuren (donkere tekst, transparante rand) — daardoor leek de
       rand op hover te verdwijnen/wit te worden. */
    .btn-outline-zz:hover{
      border-color:var(--zz-orange);
      color:var(--zz-orange);
      background: rgba(254,100,2,.1);
    }
    .hero{
      position:relative;
      padding:8.5rem 0 5rem;
      overflow:hidden;
      background:
        radial-gradient(circle at 10% 16%, rgba(251,154,185,.72), transparent 20%),
        radial-gradient(circle at 84% 12%, rgba(254,100,2,.22), transparent 23%),
        radial-gradient(circle at 75% 86%, rgba(233,24,92,.12), transparent 26%),
        linear-gradient(180deg,#fff 0%,#fff5f8 78%,#fff 100%);
    }
    .hero-card,.soft-card{
      border:0; border-radius:2rem; background:#fff;
      box-shadow:0 20px 60px rgba(233,24,92,.10);
    }
    .hero-img{
      border-radius:2rem; object-fit:cover; width:100%; min-height:420px; max-height:560px;
      box-shadow:0 25px 70px rgba(31,31,31,.16);
    }
    .hero-visual{
      position:relative; border-radius:2.2rem; padding:1rem;
      background:linear-gradient(135deg,rgba(251,154,185,.55),rgba(254,100,2,.14));
      box-shadow:0 25px 70px rgba(31,31,31,.12);
    }
    .hero-sticker{
      position:absolute; left:-10px; bottom:34px; z-index:2;
      background:#fff; border:3px solid var(--zz-light-pink); border-radius:999px;
      padding:.8rem 1.1rem; font-weight:900; color:var(--zz-pink-dark);
      box-shadow:0 14px 35px rgba(31,31,31,.14); transform:rotate(-4deg);
    }
    .hero-sticker.right{left:auto; right:-12px; bottom:auto; top:34px; transform:rotate(5deg); color:var(--zz-orange);}
    .hero-chips{display:flex; flex-wrap:wrap; gap:.65rem; margin:1.2rem 0 1.6rem;}
    .hero-chip{
      background:#fff; border:2px solid rgba(243,68,136,.13); border-radius:999px;
      padding:.55rem .9rem; font-weight:800; box-shadow:0 8px 20px rgba(233,24,92,.06);
    }
    .paint-splash{
      position:absolute; width:18px; height:18px; border-radius:999px; background:var(--zz-pink);
      box-shadow:28px 16px 0 var(--zz-orange), 56px -4px 0 var(--zz-light-pink), 80px 18px 0 var(--zz-red-orange);
      opacity:.75; z-index:0;
    }
    .paint-splash.one{left:7%; top:130px; transform:rotate(-18deg);}
    .paint-splash.two{right:11%; bottom:95px; transform:rotate(15deg);}
    .blob{
      position:absolute; border-radius:45% 55% 60% 40%;
      filter:saturate(1.1); opacity:.9; z-index:0;
    }
    .blob-1{width:230px;height:170px;background:var(--zz-orange);left:-60px;top:210px;}
    .blob-2{width:210px;height:160px;background:var(--zz-pink);right:-70px;top:160px;}
    .blob-3{width:180px;height:140px;background:var(--zz-light-pink);right:8%;bottom:50px;}
    section{padding:5rem 0; position:relative;}
    /* De navbar is fixed (~88px hoog) en overlapt anders het begin van een
       sectie waar je via een #anker naartoe springt — je landt dan zichtbaar
       nog in de vorige sectie totdat je zelf verder scrolt. scroll-margin-top
       compenseert dat voor elk anker-doel (ook header#top). */
    section[id], header[id]{scroll-margin-top:100px;}
    .section-title{font-size:clamp(2.2rem,4vw,4rem); line-height:.95;}
    /* Bootstrap's .display-2 (gebruikt op de hero-h1) iets kleiner dan de
       standaard calc(1.575rem + 3.9vw) — geladen na Bootstrap, dus deze wint. */
    .display-2{font-size:calc(1rem + 3.9vw);}
    .eyebrow{color:var(--zz-pink); text-transform:uppercase; letter-spacing:.18em; font-weight:900; font-size:.78rem;}
    .activity-card{
      border:0; border-radius:1.6rem; padding:1.5rem; height:100%;
      background:#fff; box-shadow:0 14px 40px rgba(31,31,31,.08);
      transition:.2s ease;
    }
    .activity-card:hover{transform:translateY(-5px);}
    .activity-card h3{color:var(--zz-pink-dark); font-size:1.7rem;}
    .activity-card p{font-size:1.05rem;}
    /* Overzichtskaarten met het complete aanbod (sectie #aanbod) */
    .dienst-card{
      display:flex; flex-direction:column; height:100%;
      background:#fff; border-radius:1.6rem; overflow:hidden;
      box-shadow:0 14px 40px rgba(31,31,31,.08);
      text-decoration:none; color:var(--zz-ink);
      transition:transform .2s ease, box-shadow .2s ease;
    }
    .dienst-card:hover{transform:translateY(-6px); box-shadow:0 22px 55px rgba(233,24,92,.18); color:var(--zz-ink);}
    .dienst-card-img{width:100%; height:210px; object-fit:cover;}
    .dienst-card-body{padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; flex:1;}
    .dienst-card-body h3{color:var(--zz-pink-dark); font-size:1.45rem; margin-bottom:.6rem;}
    .dienst-icoon{font-size:1.3rem;}
    .dienst-card-body p{font-size:1rem; margin-bottom:.6rem;}
    .dienst-prijs{font-weight:800; color:var(--zz-orange); font-size:.95rem !important;}
    .dienst-link{margin-top:auto; font-weight:800; color:var(--zz-pink);}
    .dienst-card:hover .dienst-link{color:var(--zz-pink-dark);}

    /* Dropdown in de navigatie */
    .zz-dropdown{
      border:0; border-radius:1.2rem; padding:.6rem;
      box-shadow:0 18px 45px rgba(233,24,92,.16);
    }
    .zz-dropdown .dropdown-item{
      border-radius:.8rem; font-weight:700; padding:.6rem .9rem;
    }
    .zz-dropdown .dropdown-item:hover{background:var(--zz-soft); color:var(--zz-pink-dark);}

    /* Plaatsen in het verzorgingsgebied */
    .regio-tags{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem;}
    .regio-tag{
      background:#fff; border:2px solid rgba(243,68,136,.18); border-radius:999px;
      padding:.4rem .85rem; font-weight:800; font-size:.95rem;
      box-shadow:0 6px 16px rgba(233,24,92,.06);
    }

    /* Veelgestelde vragen */
    .zz-accordion .accordion-item{
      border:0; border-radius:1.3rem !important; margin-bottom:1rem; overflow:hidden;
      box-shadow:0 10px 30px rgba(31,31,31,.07);
    }
    .zz-accordion .accordion-button{
      font-family:'Action Man', sans-serif; font-weight:700; font-size:1.2rem;
      color:var(--zz-ink); background:#fff; padding:1.15rem 1.35rem;
    }
    .zz-accordion .accordion-button:not(.collapsed){
      color:var(--zz-pink-dark); background:#fff; box-shadow:none;
    }
    /* Alleen een focusring bij toetsenbordnavigatie, niet bij een muisklik —
       anders knippert er telkens een roze randje aan/uit bij het open-/dichtklikken. */
    .zz-accordion .accordion-button:focus{border-color:transparent; box-shadow:none;}
    .zz-accordion .accordion-button:focus-visible{box-shadow:0 0 0 .25rem rgba(243,68,136,.2);}
    .zz-accordion .accordion-button::after{
      background-image:none; content:"＋"; font-size:1.4rem; font-weight:900;
      color:var(--zz-pink); transform:none; width:auto; height:auto;
    }
    .zz-accordion .accordion-button:not(.collapsed)::after{content:"−";}
    .zz-accordion .accordion-body{padding:0 1.35rem 1.35rem; font-size:1.05rem;}

    /* FAQ-teaser op de homepage (volledige lijst staat op /veelgestelde-vragen) */
    .faq-teaser-card{
      background:#fff; border-radius:1.4rem; padding:1.6rem 1.5rem; height:100%;
      box-shadow:0 10px 30px rgba(31,31,31,.07);
    }
    .faq-teaser-card h3{font-size:1.15rem; color:var(--zz-pink-dark); margin-bottom:.6rem;}
    .faq-teaser-card p{font-size:1rem; margin-bottom:0; color:var(--zz-ink);}

    /* Foto naast een dienst-sectie */
    .sectie-foto{
      width:100%; border-radius:1.8rem; object-fit:cover;
      box-shadow:0 20px 55px rgba(31,31,31,.14);
    }

    .included-card{
      margin-top:2rem; border-radius:1.8rem; padding:1.4rem 1.6rem;
      background:linear-gradient(135deg,#fff,rgba(251,154,185,.35));
      border:2px dashed rgba(243,68,136,.35); box-shadow:0 14px 40px rgba(31,31,31,.06);
    }
    .icon-badge{
      width:58px;height:58px;border-radius:20px; display:grid; place-items:center;
      background:linear-gradient(135deg,var(--zz-light-pink),rgba(254,100,2,.18));
      font-size:1.8rem;
    }
    .agenda-card{
      border:2px solid rgba(243,68,136,.13); border-radius:1.4rem;
      padding:1.3rem; background:#fff;
    }
    .agenda-image-button{align-self:flex-start;}
    .agenda-image-modal .modal-content{border:0; border-radius:0; background:transparent; box-shadow:none;}
    .agenda-image-modal .modal-body{padding:0; background:transparent;}
    .agenda-popup-image{display:block; width:auto; max-width:100%; max-height:90vh; margin:auto;}
    .info-balloon{
      position:relative;
      margin-top:2rem;
      padding:1.5rem 1.7rem 1.5rem 5rem;
      border-radius:2rem;
      background:#fff;
      border:3px dashed var(--zz-light-pink);
      box-shadow:0 18px 45px rgba(233,24,92,.12);
    }
    .info-balloon::before{
      content:"!";
      position:absolute;
      left:1.4rem;
      top:1.45rem;
      width:2.7rem;
      height:2.7rem;
      display:grid;
      place-items:center;
      border-radius:50%;
      color:#fff;
      font-size:2rem;
      font-weight:900;
      background:linear-gradient(135deg,var(--zz-pink),var(--zz-orange));
      transform:rotate(-8deg);
    }
    .info-balloon h3{color:var(--zz-pink-dark); margin-bottom:.5rem;}
    .info-balloon p{font-size:1.08rem; margin-bottom:.4rem;}
    .date-pill{
      background:var(--zz-light-pink); color:#fff; border-radius:1rem; min-width:72px;
      padding:.55rem .7rem; text-align:center; font-weight:900;
    }
    .gallery-img{
      width:100%; height:270px; object-fit:cover; border-radius:1.6rem;
      box-shadow:0 14px 40px rgba(31,31,31,.10);
    }
    .reel-embed{
      display:flex; justify-content:center;
    }
    .reel-embed .instagram-media{margin:0 auto !important;}
    .pattern{
      background-image:
        linear-gradient(45deg, rgba(243,39,40,.12) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(243,68,136,.12) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(243,39,40,.12) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(243,68,136,.12) 75%);
      background-size:42px 42px;
      background-position:0 0,0 21px,21px -21px,-21px 0;
    }
    .form-control,.form-select{border-radius:1rem; padding:.85rem 1rem; border:1px solid #f1d2dc;}
    footer{background:var(--zz-ink); color:#fff; padding:3rem 0;}
    .logo-small{max-height:90px; width:auto;}

    .section-kicker {
      color: #f34488;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .about-card {
      background: linear-gradient(135deg, #fb9ab9, #FFFFFF);
      border: 2px solid rgba(243,68,136, .15);
      box-shadow: 0 20px 50px rgba(233,24,92, .12);
    }

    .location-section {
      background:
        radial-gradient(circle at top left, rgba(243,68,136, .10), transparent 30%),
        radial-gradient(circle at bottom right, rgba(254,100,2, .12), transparent 30%),
        #fff;
    }

    .map-card {
      border: 8px solid #fff;
      background: #fff;
    }

    .map-card iframe {
      display: block;
    }
    .workshop-strip{
      background:linear-gradient(135deg,var(--zz-pink-dark),var(--zz-orange));
      color:#fff; border-radius:2rem; padding:1.5rem; box-shadow:0 18px 45px rgba(233,24,92,.18);
    }
    .contact-highlight{
      display:inline-flex; gap:.6rem; align-items:center; background:#fff; border-radius:999px;
      padding:.7rem 1rem; box-shadow:0 10px 30px rgba(31,31,31,.08); font-weight:900;
    }

/* Kruimelpad boven aan een dienstpagina (staat onder de vaste navbar).
   De hartjes-sticker verschijnt zo automatisch op elke subpagina — geen
   markup-wijziging per pagina nodig. */
.pagina-top{
  padding-top:7.5rem; padding-bottom:.5rem;
  background:url('../img/zz-hartjes.png') no-repeat right 1rem top 6.3rem/84px auto;
}
.kruimelpad{font-weight:700; font-size:.95rem; color:var(--zz-ink);}
.kruimelpad a{color:var(--zz-pink); text-decoration:none;}
.kruimelpad a:hover{color:var(--zz-pink-dark); text-decoration:underline;}
.kruimelpad span{opacity:.6; margin:0 .35rem;}
.kruimelpad span:last-child{opacity:1; margin:0;}

/* Op een dienstpagina staat de eerste sectie direct onder het kruimelpad */
.pagina-top + section{padding-top:1rem;}

/* Knutselclub-passen (knutselclub.php) */
.pass-card{
  height:100%; border:2px dashed rgba(243,68,136,.32); border-radius:1.6rem;
  padding:1.4rem; background:#fff; box-shadow:0 14px 40px rgba(31,31,31,.06);
}
.pass-price{
  display:inline-block; margin:.5rem 0 .75rem; border-radius:999px;
  background:linear-gradient(135deg,var(--zz-pink),var(--zz-orange));
  color:#fff; padding:.45rem .9rem; font-weight:900;
}

/* Bootstrap-valkuil: .row.g-5 zet -24px marges terwijl .container maar 12px
   padding heeft, waardoor de pagina 12px breder wordt dan het scherm. Op mobiel
   stapelen de kolommen toch, dus daar is een kleinere gutter prima. */
@media (max-width: 991.98px){
  .row.g-5{--bs-gutter-x:1.5rem;}
}