/* Kockelbergh & Gibson — Wortelkanaalbehandeling
   Global styles. Component styling is inline in index.html (faithful to the design);
   this file holds resets, keyframes and the responsive-nav breakpoint. */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#ffffff;
  color:#363636;
  font-family:-apple-system,"system-ui","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.7;
}
img{display:block;max-width:100%}

/* reveal-on-scroll (activated by script.js) */
@keyframes kgReveal{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
/* floating WhatsApp button */
@keyframes kgFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
/* pulsing status dot */
@keyframes kgPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 12px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* FAQ accordion (native <details>) */
details.kg-faq>summary{list-style:none;cursor:pointer}
details.kg-faq>summary::-webkit-details-marker{display:none}
details.kg-faq>summary .kg-chev{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
details.kg-faq[open]>summary .kg-chev{transform:rotate(180deg)}

/* Responsive navigation: full nav on desktop, hamburger on mobile */
.kg-mobile-btn{display:none}
@media (max-width:900px){
  .kg-desktop-nav{display:none !important}
  .kg-mobile-btn{display:inline-flex !important}
}

/* ---- ACF-driven rich text (WYSIWYG output from the template) ---- */
/* Intro lead: first paragraph large (Josefin), following paragraphs body-size. */
.kg-intro>p{margin:0}
.kg-intro>p:first-child{font-family:"Josefin Sans",sans-serif;font-weight:400;color:#2F4157;font-size:clamp(21px,2.3vw,30px);line-height:1.5;letter-spacing:-.2px}
.kg-intro>p:first-child~p{font-size:clamp(15px,1.1vw,17px);line-height:1.75;color:#363636;margin-top:22px;max-width:74ch}
/* Generic body copy blocks. Inherit colour from the wrapper's inline style when set. */
.kg-rte>p:first-child{margin-top:0}
.kg-rte p{font-size:clamp(15px,1.1vw,17px);line-height:1.75;color:inherit;margin:16px 0 0}
.kg-rte>p:first-child{color:inherit}
.kg-rte ul{margin:16px 0 0;padding-left:1.15em}
.kg-rte li{font-size:clamp(15px,1.1vw,17px);line-height:1.6;color:inherit;margin:6px 0}
.kg-rte h3{font-family:"Afacad",sans-serif;font-weight:600;font-size:20px;color:#2F4157;margin:26px 0 8px}
.kg-rte a{color:var(--accent,#E77935)}