/* Dierengein template CSS - full-page gradient */
:root{
  --bg:#fff;--ink:#1f2937;--muted:#5b6573;--brand:#7b39d9;--brand-2:#47c0e0;--brand-3:#ff8bb3;
  --card:#ffffff;--shadow:0 10px 30px rgba(0,0,0,.08);--radius:18px;--ring:0 0 0 3px rgba(123,57,217,.25);
  --pattern:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc2MCcgaGVpZ2h0PSc2MCcgdmlld0JveD0nMCAwIDYwIDYwJz48ZyBmaWxsPSdub25lJyBzdHJva2U9J3JnYmEoMCwwLDAsMC4wNCknIHN0cm9rZS13aWR0aD0nMSc+PGNpcmNsZSBjeD0nMTAnIGN5PScxMCcgcj0nNScvPjxjaXJjbGUgY3g9JzMwJyBjeT0nMzAnIHI9JzUnLz48Y2lyY2xlIGN4PSc1MCcgY3k9JzEwJyByPSc1Jy8+PGNpcmNsZSBjeD0nMTAnIGN5PSc1MCcgcj0nNScvPjxjaXJjbGUgY3g9JzUwJyBjeT0nNTAnIHI9JzUnLz48L2c+PC9zdmc+');
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}

/* ✔ Doorlopende achtergrond over de hele site met jouw gradient (lichtblauw → paars) */
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  /* full-page gradient op de hele pagina */
  background: linear-gradient(to bottom, #47c0e0 0%, #7b39d9 60%, #7b39d9 100%);
  background-repeat: no-repeat;
  background-attachment: scroll; /* stabieler op iOS dan fixed */
  min-height: 100vh;
}

img{max-width:100%;display:block;height:auto}
.container{max-width:1140px;margin:0 auto;padding:0 20px}

/* Toegankelijkheid */
.skip-link{position:absolute;left:-1000px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:10px;top:10px;width:auto;height:auto;padding:.5rem 1rem;background:#000;color:#fff;z-index:9999}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:10px}

/* Header (licht transparant zodat de gradient erdoorheen loopt) */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.65);
  backdrop-filter:saturate(150%) blur(8px);
  border-bottom:1px solid rgba(0,0,0,.06)
}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px;gap:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-text{font-family:Nunito, Inter, sans-serif;font-weight:800;font-size:1.25rem;color:var(--ink);transition:color .2s ease}
.home-active .brand-text{color:var(--brand)}

.menu-toggle{display:none;appearance:none;border:1px solid rgba(0,0,0,.1);background:#fff;padding:.5rem .75rem;border-radius:10px;cursor:pointer}
.menu ul,.menu li{margin:0;padding:0;list-style:none}
.menu ul{display:flex;gap:22px;align-items:center}
.menu a{text-decoration:none;color:var(--ink);font-weight:600;padding:.4rem 0;display:inline-block}
.menu a:hover{color:var(--brand)}
#primary-menu a.active{color:var(--brand);font-weight:700;border-bottom:2px solid var(--brand)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.1rem;border-radius:14px;border:2px solid transparent;text-decoration:none;font-weight:700;transition:transform .08s ease,opacity .2s ease}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:var(--shadow)}
.btn.primary:hover{opacity:.95}
.btn.ghost{background:#fff;border-color:rgba(0,0,0,.1);color:var(--ink)}
.cta{white-space:nowrap}

/* Secties */
.section{padding:70px 0;position:relative}

/* Subtiel patroon voor afwisseling; laat gradient intact */
.section.alt{background:transparent;background-image:var(--pattern)}
.section-header{text-align:center;margin-bottom:24px}
.section-header h2{font-size:2rem;margin:.2rem 0}
.section-header p{color:var(--muted)}

.grid-2{display:grid;grid-template-columns:1.1fr 1fr;gap:32px}
.stack>*+*{margin-top:16px}
.lead{font-size:1.125rem;color:var(--muted);max-width:60ch}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.badges{display:grid;grid-template-columns:repeat(2,auto);gap:10px;margin-top:10px;padding:0;list-style:none}
.badges li{background:#fff;border:1px solid rgba(0,0,0,.06);padding:.5rem .85rem;border-radius:999px;font-weight:700;color:#3a3a3a}
.pill{display:inline-flex;align-items:center;gap:.5rem;background:#fff;border:1px solid rgba(0,0,0,.06);padding:.4rem .8rem;border-radius:999px;color:#3a3a3a;font-weight:700}
.accent{text-decoration:underline;text-decoration-style:wavy;text-decoration-color:var(--brand-2)}

/* Hero: géén eigen achtergrond, gradient blijft doorlopen */
.hero{background:transparent}
.hero-card{position:relative}
.polaroid{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.floating-card{position:absolute;left:-16px;bottom:-18px;background:#fff;padding:12px 16px;border-radius:14px;box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.06)}
.floating-card strong{display:block}
.floating-card span{font-size:.9rem;color:var(--muted)}

/* Kaarten */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
.card{background:var(--card);padding:22px;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.06)}
.card h3{margin-top:0}
.card ul{padding-left:18px;color:var(--muted)}
.accent-sky{border-top:4px solid var(--brand-2)}
.accent-lilac{border-top:4px solid var(--brand)}
.accent-rose{border-top:4px solid var(--brand-3)}

/* Prijzen */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
.price-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;border:1px solid rgba(0,0,0,.06)}
.price-card h3{margin-top:0}
.price-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.price-list li{display:flex;justify-content:space-between;align-items:center;border-bottom:1px dashed rgba(0,0,0,.08);padding-bottom:10px}
.price-list li:last-child{border-bottom:none}
.small.note{color:var(--muted);margin-top:12px}

/* Over ons */
.photo-wrap{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:8px;color:var(--muted)}
.checks li::before{content:'✔';color:var(--brand-2);margin-right:8px}

/* Reviews */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
.reviews blockquote{margin:0;background:#fff;border-left:6px solid var(--brand);padding:18px;border-radius:12px;box-shadow:var(--shadow)}
.reviews footer{margin-top:8px;color:var(--muted)}

/* Contact */
.contact-list{list-style:none;padding:0;margin:0;display:grid;gap:8px;color:var(--muted)}
.map-wrap{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.06)}
.map-wrap iframe{display:block;width:100%;height:300px;border:0}

/* Footer */
.site-footer{border-top:1px solid rgba(0,0,0,.06);background:#fff}
.footer-inner{height:70px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.footer-nav a{color:var(--muted);text-decoration:none;margin-left:16px}
.footer-nav a:hover{color:var(--brand)}

/* Floating WhatsApp knop */
.whatsapp-float{
  position:fixed;bottom:24px;right:24px;width:60px;height:60px;background:#25D366;border-radius:50%;
  box-shadow:0 4px 12px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;text-decoration:none;
  z-index:1000;transition:transform .2s ease,box-shadow .2s ease
}
.whatsapp-float img{width:32px;height:32px;filter:invert(1)}
.whatsapp-float:hover{transform:scale(1.05);box-shadow:0 6px 16px rgba(0,0,0,.3)}

/* Menu override voor Joomla mod_menu output */
ul#primary-menu{display:flex;gap:22px;align-items:center;list-style:none;margin:0;padding:0}
#primary-menu li{margin:0;padding:0}
#primary-menu a{text-decoration:none;color:var(--ink);font-weight:600;padding:.4rem 0;display:inline-block}
#primary-menu a:hover{color:var(--brand)}
#primary-menu a.active{color:var(--brand);font-weight:700;border-bottom:2px solid var(--brand)}

/* Responsive */
@media (max-width: 1024px){.grid-2{grid-template-columns:1fr}}
@media (max-width: 920px){
  .cards,.price-grid,.reviews{grid-template-columns:1fr}
  .menu-toggle{display:inline-block}
  .menu ul{display:none;position:absolute;right:20px;top:70px;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:12px;box-shadow:var(--shadow);padding:12px;flex-direction:column;gap:12px}
  .menu[aria-expanded="true"] ul{display:flex}
  .cta{display:none}
}

/* Minder animatie bij voorkeur */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
}

/* ===== FORCE: full-page gradient + transparant wrappers ===== */
:root { --site-gradient: linear-gradient(to bottom, #47c0e0 0%, #7b39d9 60%, #7b39d9 100%); }

/* zet de gradient op html zodat niets er 'bovenop' kan komen */
html {
  min-height: 100%;
  background: var(--site-gradient) !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important; /* stabieler op iOS */
}

/* body zelf transparant laten (gradient zit op html) */
body { background: transparent !important; }

/* Joomla wrappers en secties transparant maken */
main, #main,
.wrapper, .page-wrapper, .site, .site-grid, .site-container,
.container-component, .content, .com-content, .item-page, .blog,
.section, .section.alt, .hero,
.moduletable, .module, .t4-content {
  background: transparent !important;
}

/* header licht transparant zodat gradient zichtbaar blijft */
.site-header {
  background: rgba(255,255,255,.65) !important;
  backdrop-filter: saturate(150%) blur(8px);
}

/* sommige hero-modules geven een eigen achtergrond aan de directe container */
#home .container, #home .grid-2 { background: transparent !important; }

/* Glass-paneel achter hero-tekst (alleen 1e kolom) */
.hero .grid-2 > :first-child {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
}

/* Glass-paneel achter hero-tekst (alleen 1e kolom) */
.hero .grid-2 > :first-child {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
}

/* Verhoog contrast tekst op glass */
.hero .grid-2 > :first-child h1 { color: #0f172a; }         /* bijna-zwart */
.hero .grid-2 > :first-child .lead { color: #334155; }      /* donkerder grijs */
.hero .grid-2 > :first-child .pill,
.hero .grid-2 > :first-child .badges li {
  background: #fff; border-color: rgba(0,0,0,.06);
}

/* Kleinere padding op mobiel */
@media (max-width: 920px){
  .hero .grid-2 > :first-child { padding: 16px; }
}

/* 🔷 Glass-paneel voor content secties */
.section.glass,
.section.alt.glass {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 18px;
  padding: 40px 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
}

/* Tekst donkerder en beter leesbaar */
.section.glass h2,
.section.glass h3,
.section.glass p,
.section.glass li {
  color: #1f2937; /* Donkerblauw/zwart */
}

.section.glass .checks li::before {
  color: #47c0e0; /* Pastelblauwe vinkjes */
}

/* Voor kleinere schermen iets minder padding */
@media (max-width: 920px) {
  .section.glass,
  .section.alt.glass {
    padding: 24px 18px;
  }
}


/* Mobile tuning (hero-knoppen + badges) */
@media (max-width: 640px){

  /* 1) Hoofdknoppen naast elkaar (50/50) */
  .hero .actions{
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;         /* naast elkaar houden */
    margin-top: 12px;
  }
  .hero .actions .btn{
    flex: 1 1 0;               /* beide even breed */
    padding: 12px 10px;
    text-align: center;
    min-height: 44px;          /* fijne tap-target */
    white-space: nowrap;       /* tekst op 1 regel */
  }

  /* 2) Badges (pills) in 2 kolommen, gelijke breedte */
  .hero .badges{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
  }
  .hero .badges li{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .6rem .8rem;
    font-weight: 700;
    border-radius: 999px;      /* pill look */
  }

  /* 3) Iets compacter kop/lead op mobiel */
  .hero h1{
    font-size: clamp(1.6rem, 4.5vw, 2rem);
    line-height: 1.15;
    margin-bottom: 8px;
  }
  .hero .lead{ 
    font-size: 0.98rem;
    line-height: 1.45;
  }

  /* 4) Glass-paneel padding iets kleiner op mobiel */
  .hero .grid-2 > :first-child{
    padding: 16px;
  }
}

/* Extra: heel smalle telefoons → knoppen mogen stapelen */
@media (max-width: 360px){
  .hero .actions{
    flex-wrap: wrap;           /* mag onder elkaar als het écht smal is */
  }
  .hero .actions .btn{
    flex: 1 1 100%;
  }
}

/* Verberg foutief weergegeven JSON bovenaan de pagina */
html > pre:first-of-type,
html > div:first-of-type,
body > pre:first-of-type,
body > div:first-of-type {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}