/*
Theme: GWN (DRY)
Template: twentytwentyfour
*/

/* ========== Basis ========== */
:root {
  --gwn-trans-fast: .3s;
  --gwn-trans: .6s;
  --gwn-trans-slow: .8s;
  --gwn-radius: .5rem;
}

body { background: var(--wp--preset--color--sand) !important; }

html.has-modal-open header {
  inset: 0;
  z-index: 9999;
}

/* Header (blur-in on scroll) */
header {
  position: fixed; top:0; inset-inline: 0; z-index: 1000;
}

/* Content offset onder fixed header */
/* Landing page: style the first container *after* the hero */
.entry-content > .hero-carousel + :is(.wp-block-columns, .wp-block-group) {
  padding-top: 3.333em;
}

/* Other pages (no hero): style the first child if it's a container */
/* This has an adjustment for mobile, located down */
.entry-content > :is(.wp-block-columns, .wp-block-group):first-child {
  padding-top: 7em;
}

/* Performance hints */
.hero-text, .hero-characters, .cloud-layer .cloud { will-change: transform, opacity; }

/* ========== Utilities ========== */
.highlight-yellow { color: var(--wp--preset--color--yellow); }

button.is-style-outline {
    border: 1px solid;
    padding: .667em 1.333em;
}

.no-wrap {
  position: relative;
  /* white-space: nowrap; */
  z-index: 3000;    
}

.rotated-img {
  transform: rotate(45deg);
}
.rotated-img-65 {
  transform: rotate(65deg);
}

.profile-img img {
  width: 120px;          /* of een vaste maat naar wens */
  height: 120px;         /* gelijk aan width */
  border-radius: 50%;    /* maakt de vorm rond */
  object-fit: cover;     /* zorgt dat de foto netjes bijsnijdt */
  border: 2px solid var(--wp--preset--color--black); /* optioneel randje */
}

.hide {
  display:none;
}

/* ========== Auto contrast voor donkere secties (DRY, buttons uitgesloten) ========== */
:is(.has-blue-background-color, .has-black-background-color) {
  color: var(--wp--preset--color--white);
}

/* Gewone links in donkere secties (buttons expliciet uitsluiten) */
:is(.has-blue-background-color, .has-black-background-color)
  a:not(.has-text-color):not(.wp-block-button__link):not(.wp-element-button) {
  color: var(--wp--preset--color--yellow);
  text-decoration: underline;
}

/* Hover voor gewone links */
:is(.has-blue-background-color, .has-black-background-color)
  a:not(.has-text-color):not(.wp-block-button__link):not(.wp-element-button):hover {
  color: var(--wp--preset--color--white);
  text-decoration: none;
}

/* Iconen meeverven met tekstkleur */
:is(.has-blue-background-color, .has-black-background-color) svg {
  fill: currentColor;
  stroke: currentColor;
}

/* Footer headings */
footer :where(h1,h2,h3,h4,h5,h6) { color: var(--wp--preset--color--yellow); }

/* ========== Breathe (ademen) ========== */
.breathe { animation: breathe 30s ease-in-out infinite; display: inline-block; }
@keyframes breathe {
  0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); }
}

/* Verberg raster-logo-img tot SVG klaar is */
:where(.animate-logo-start,.animate-logo-end) .custom-logo { opacity: 0; transition: opacity var(--gwn-trans-fast) ease; }
:where(.animate-logo-start,.animate-logo-end) :where(.gwn-logo,svg) { opacity: 1; }

/* ========== Separator (lijn met bolletjes) ========== */
.is-style-circle-ends {
  position: relative;
  height: 1px;
  border: 0;
  background-color: currentColor; /* vaste lijn in tekstkleur */
  width: 40vw !important;
}
.is-style-circle-ends::before, .is-style-circle-ends::after {
  content:""; position: absolute; top:50%; transform:translateY(-50%);
  width:7px; height:7px; background: currentColor; border-radius: 50%;
}
.is-style-circle-ends::before { left:0; } .is-style-circle-ends::after { right:0; }

/* ========== Wolken parallax-achtergrond ========== */
.cloud-layer { position: fixed; inset: 0; z-index: -10; pointer-events: none; overflow: hidden; }
.cloud-layer .cloud {
  position: absolute; transform-origin: left; filter: drop-shadow(0 2px 6px rgba(0,0,0,.08));
}

/* Statische GIF overlay (debug/preview) */
.static { position:absolute; background: var(--wp--preset--color--sand); }
.static:hover { opacity:0; }

/* ========== Tabellen (specs) ========== */
figure.specs { position: relative; margin: 2em 0; }
figure.specs table { width: 100%; border-collapse: collapse; table-layout: fixed; }
figure.specs :where(th,td) { vertical-align: middle; word-break: break-word; }
figure.specs td[rowspan] { font-weight: 700; }

/* centreren kolommen compact */
figure.specs thead th,
figure.specs tr:has(td[rowspan]) td:nth-child(n+3),
figure.specs tr:not(:has(td[rowspan])) td:nth-child(n+2) { text-align: center; }

/* Headerstijl */
figure.specs thead th { background: #F7D449; color: #333; font-weight: 700; }

/* Uitklap animatie */
figure.specs:not(.open) tbody tr:nth-child(n+3) { opacity:.5; transition: opacity .4s ease, filter .4s ease; }
figure.specs:not(.open) tbody tr:nth-child(n+4) { opacity:.25; }
figure.specs tbody tr:nth-child(n+5) { display:none; }
figure.specs.open tbody tr:nth-child(n+3) { display: table-row; opacity:1; }
figure.specs tbody tr.animate { animation: fadeIn .3s ease-in-out; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* ========== HERO CAROUSEL (clean & DRY) ========== */
:root{
  --hc-arrow-size: 44px;
  --hc-bottom-gap: clamp(14px, 3vh, 40px);
  --hc-edge-gap: 12px;
}

/* Container als positionerings-anker */
.hero-carousel{
  position: relative;
  overflow: hidden;
}

/* Slides: één actief, rest verborgen */
.hero-slide{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}
.hero-slide.is-active{
  opacity: 1;
  pointer-events: auto;
}

/* Breathe-beeld toont alleen op actieve slide */
.hero-slide .breathe{ opacity: 0; transition: opacity .6s ease; }
.hero-slide.is-active .breathe{ opacity: 1; }

/* --------------------------------------------- */
/* NAV: full overlay met pijlen links/rechts en bullets onderin */
/* --------------------------------------------- */
.hero-carousel > .hero-nav{
  position: relative;
  z-index: 5;
  margin: 0;
  pointer-events: none; /* overlay zelf niet klikbaar */
}

/* Pijlen */
.hero-carousel > .hero-nav .prev,
.hero-carousel > .hero-nav .next{
  pointer-events: auto;            /* knoppen wél klikbaar */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inline-size: var(--hc-arrow-size);
  block-size: var(--hc-arrow-size);
  display: grid;
  place-items: center;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.08);
  color: var(--wp--preset--color--white);
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.hero-carousel > .hero-nav .prev{
  left: max(var(--hc-edge-gap), env(safe-area-inset-left, 0px));
}
.hero-carousel > .hero-nav .next{
  right: max(var(--hc-edge-gap), env(safe-area-inset-right, 0px));
}
.hero-carousel > .hero-nav .prev:hover,
.hero-carousel > .hero-nav .next:hover{
  background: rgba(255,255,255,.18);
  transform: translateY(-50%) scale(1.05);
}
.hero-carousel > .hero-nav .prev:focus-visible,
.hero-carousel > .hero-nav .next:focus-visible{
  outline: 2px solid var(--wp--preset--color--yellow);
  outline-offset: 2px;
}

/* Bullets onderin, gecentreerd */
.hero-carousel > .hero-nav .bullets{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--hc-bottom-gap);
  display: flex;
  gap: 10px;
  pointer-events: auto;
}
.hero-carousel > .hero-nav .bullets button{
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.35);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.hero-carousel > .hero-nav .bullets button.is-active{
  background: var(--wp--preset--color--yellow);
}
.hero-carousel > .hero-nav .bullets button:focus-visible{
  outline: 2px solid var(--wp--preset--color--yellow);
  outline-offset: 2px;
}

/* --------------------------------------------- */
/* HERO-LOGO: gebruik de bestaande .animate-logo-start als “master” */
/* Startpositie (slide 1) wordt inline (top/left) door JS gezet.    */
/* Vanaf slide 2 zet JS alleen .logo--corner.                       */
/* --------------------------------------------- */
.hero-carousel .animate-logo-start{
  position: absolute !important;   /* boven de slides */
  inset: auto;
  z-index: 2001;                   /* altijd vooraan */
  pointer-events: none;
  margin: 0 !important;            /* neutraliseer WP align */
  transform: none;                 /* baseline; JS bepaalt beginpositie */
  transition: top .8s ease, left .8s ease, bottom .8s ease, transform .8s ease;
}
.hero-carousel .animate-logo-start :where(.gwn-logo, svg){
  display: block;
  width: min(300px, 44vw);         /* respecteert inline width uit JS (niet !important) */
  height: auto;
}

/* Doelpositie voor alle slides ná de eerste */
.hero-carousel .animate-logo-start.logo--corner{
  top: auto;                        /* laat bottom gelden */
  bottom: 4rem;
  left: 4rem;
  /* transform: none;        /* eventueel: scale(.92) + origin left bottom */
  /* transform: translateZ(0) scale(.92); transform-origin: left bottom; */
}

/* --------------------------------------------- */
/* Reduced motion */
/* --------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .hero-slide,
  .hero-slide .breathe,
  .hero-carousel > .hero-nav .prev,
  .hero-carousel > .hero-nav .next,
  .hero-carousel .animate-logo-start{
    transition: none !important;
  }
}

/* ===== Dienstpagina pop-up afbeelding ===== */
.diensten-popup {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2000;
  max-width: 250px;
  background: transparent;
  animation: popup-in 0.8s ease-out;
}

.diensten-popup img {
  display: block;
  width: 100%;
  height: auto;
  /* border-radius: .5rem; */
  /* box-shadow: 0 4px 12px rgba(0,0,0,.25); */
}

.diensten-popup .close-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  background: var(--wp--preset--color--blue);
  color: var(--wp--preset--color--white);
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  transition: background .3s;
}

.diensten-popup .close-btn:hover {
  background: var(--wp--preset--color--yellow);
  color: var(--wp--preset--color--black);
}

/* animatie */
@keyframes popup-in {
  from { transform: translateY(60px) scale(.8); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* --------------------------------------------- */
/* Chat  */
/* --------------------------------------------- */
.abo-chat{min-height:70vh;max-width:760px;margin:2rem auto;padding:1rem;scroll-behavior:smooth;}
.abo-chat__log{display:flex;flex-direction:column;gap:.8rem}

/* Bubbles */
.bubble{
  max-width:80%;
  padding:.8rem 1rem;
  border-radius:1rem;
  line-height:1.5;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  scroll-margin-bottom: 5rem;
}
.bubble--bot{
  align-self:flex-start;              /* links */
  background:var(--wp--preset--color--white);
  border:1px solid rgba(0,0,0,.08);
}
.bubble--user{
  align-self:flex-end;                /* rechts */
  background:var(--wp--preset--color--blue);
  color:var(--wp--preset--color--white);
}

/* Vraag + keuzes */
.ask{display:flex;flex-direction:column;gap:.6rem}
.choices{display:flex;flex-wrap:wrap;gap:.5rem}

/* Result */
.hr{height:1px;background:rgba(0,0,0,.08);margin:.75rem 0}
.result-card{border:1px solid rgba(0,0,0,.08);background:var(--wp--preset--color--grey);border-radius:.8rem;padding:1rem}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem;margin:.5rem 0}
.kpi{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:.6rem;padding:.6rem .8rem}
.kpi strong{display:block;font-size:1.15rem}
.small{font-size:.9rem;color:rgba(0,0,0,.65)}
.fade-in{animation:fade .28s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}


/* --------------------------------------------- */
/* (Optioneel) Safety net: verberg eventuele extra logo’s in slides */
/* --------------------------------------------- */
/* .hero-slide :where(.wp-block-site-logo, .gwn-logo):not(.animate-logo-start .gwn-logo){ display:none !important; } */

header svg {
  display: block;
  height: auto;
  width: auto;
}
@media (max-width: 768px) {
  header svg {
    max-height: 48px;
  }
  .logo--corner {
    opacity: 0;
  }
  .hero-carousel .breathe {
    max-width: 70%;
  }
  .entry-content > :is(.wp-block-columns, .wp-block-group):first-child {
    padding-top: 4em;
  }
}