/* ─────────────────────────────────────────────────────────────
   HappiMeds - FAQ, CTA, footer en prose
   De FAQ-accordeon, de navy CTA-kaart, de footer, de subpagina-hero en de
   prose-blokken.
   ───────────────────────────────────────────────────────────── */
/* FAQ accordion */
.faq { margin-top: 52px; max-width: 820px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item button {
  width: 100%; background: none; border: none; font-family: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 4px; font-size: 17.5px; font-weight: 700; color: var(--navy); text-align: left;
  transition: color .2s;
}
.faq-item button:hover { color: var(--blue-text); }
.faq-item button::after {
  content: ""; flex-shrink: 0; width: 9px; height: 9px; margin-right: 3px;
  border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
  border-radius: 0 0 2px 0; transform: rotate(-45deg); transition: transform .25s;
}
.faq-item.open button::after { transform: rotate(45deg); }
.faq-item button .chev { display: none; }
/* Openklappen via grid-template-rows in plaats van max-height. Zo is er geen
   vaste bovengrens meer die de tekst stil afknipt als een antwoord langer wordt,
   en duurt de animatie evenredig met de werkelijke inhoud.
   De padding hoort op de <p> binnen .body-in, niet op het grid-item zelf: een
   grid-item van 0fr houdt zijn padding en zou de dichte staat 24px hoog maken. */
.faq-item .body { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .3s ease, visibility 0s .3s; }
.faq-item.open .body { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .3s ease, visibility 0s; }
.faq-item .body > .body-in { overflow: hidden; min-height: 0; }
/* Bewerkstand (?open=alles): geen animatie, alles direct zichtbaar en aanpasbaar */
.alles-open .faq-item .body { grid-template-rows: 1fr; visibility: visible; transition: none; }
.alles-open .faq-item .body p { opacity: 1; transform: none; transition: none; }
.faq-item .body p { font-size: 16px; color: var(--body-c); line-height: 1.7; padding: 0 4px 24px; max-width: 680px; opacity: 0; transform: translateY(-6px); transition: opacity .25s ease .05s, transform .25s ease .05s; }
.faq-item.open .body p { opacity: 1; transform: none; }

/* CTA card: massief navy, rustige textuur */
.cta-card {
  background: var(--navy);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='300' viewBox='0 0 760 300' fill='none'%3E%3Cpath d='M-10 250 C 190 160 360 265 540 175 C 640 125 710 130 790 100' stroke='white' stroke-opacity='.13' stroke-width='2' stroke-dasharray='1 11' stroke-linecap='round'/%3E%3Ccircle cx='140' cy='213' r='5' fill='%23F7AD19' fill-opacity='.5'/%3E%3Ccircle cx='240' cy='212' r='5' fill='white' fill-opacity='.28'/%3E%3C/svg%3E"),
    var(--dots-dark);
  background-repeat: no-repeat, repeat;
  background-position: right -40px bottom -30px, 0 0;
  background-size: 760px auto, 23px 23px;
  border-radius: var(--radius-lg); padding: 64px 60px; color: white;
  display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center;
  position: relative; overflow: hidden;
  box-shadow: 0 28px 60px -34px rgba(5,63,92,.55);
}
.cta-card::after {
  content: ""; position: absolute; right: -80px; top: -80px; width: 340px; height: 340px;
  border-radius: 50%; border: 60px solid rgba(255,255,255,.05);
}
.cta-card h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; text-wrap: balance; position: relative; z-index: 1; }
.cta-card p { font-size: 17.5px; color: rgba(255,255,255,.85); margin-top: 14px; max-width: 46ch; line-height: 1.6; text-wrap: pretty; position: relative; z-index: 1; }
.cta-actions { display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1; }
.cta-actions .btn { justify-content: center; padding: 15px 32px; font-size: 16px; }

/* Footer */
footer {
  border-top: 1px solid var(--line); padding: 48px 0 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='260' viewBox='0 0 1400 260' fill='none'%3E%3Cpath d='M-10 235 C 280 225 520 190 720 130 C 850 91 920 55 970 12' stroke='%23429EBD' stroke-opacity='.28' stroke-width='2' stroke-dasharray='1 11' stroke-linecap='round'/%3E%3Ccircle cx='170' cy='232' r='5' fill='%23F7AD19' fill-opacity='.6'/%3E%3Ccircle cx='450' cy='202' r='5' fill='%23429EBD' fill-opacity='.45'/%3E%3Ccircle cx='720' cy='130' r='7' stroke='%23429EBD' stroke-opacity='.5' stroke-width='2'/%3E%3Ccircle cx='880' cy='73' r='5' fill='%23F7AD19' fill-opacity='.6'/%3E%3Ccircle cx='962' cy='19' r='7' stroke='%23429EBD' stroke-opacity='.5' stroke-width='2'/%3E%3C/svg%3E") no-repeat left top,
    var(--dots),
    white;
  background-size: 100% calc(100% - 61px), 24px 24px, auto;
}
footer .wrap { display: grid; grid-template-columns: 1fr auto auto; gap: 72px; align-items: start; padding: 8px 40px 48px; }
footer .fbrand { align-self: center; }
footer .fbrand .logo { font-size: 32px; gap: 14px; }
footer .fbrand .logo img { width: 64px; height: 64px; border-radius: 50%; }
footer h3 { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
footer ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
footer a { font-size: 15.5px; color: var(--body-c); text-decoration: none; transition: color .15s; }
footer a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
footer .fbottom { border-top: 1px solid var(--line); padding: 20px 0; background: white; }
footer .fbottom .wrap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 24px; flex-wrap: wrap; padding-bottom: 0; }
footer .fbottom span { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* Subpage hero */
.hero.sub { padding: 146px 0 64px; }
body[data-page="levering"] .hero.sub { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 128px 0 48px; }
body[data-page="levering"] .hero.sub .wrap { width: 100%; }
#keten, #maatwerk, #resultaat, #evalueren { scroll-margin-top: 72px; }
body[data-page="over"] .hero.sub { padding: 128px 0 64px; }
body[data-page="over"] .hero.sub h1 { margin: 14px 0 18px; }
body[data-page="over"] .hero.sub .split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; }
.hero.sub h1 { font-size: clamp(34px, 4vw, 51px); }
.breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 18px; display: flex; gap: 8px; align-items: center; }
.breadcrumb a { color: var(--blue-text); text-decoration: none; font-weight: 600; }
.breadcrumb a:hover { color: var(--navy); }

/* Prose blokken */
.prose h2, .prose h3 { font-size: 26px; font-weight: 800; letter-spacing: -.015em; margin: 14px 0 12px; color: var(--navy); }
.prose p { font-size: 16px; color: var(--body-c); line-height: 1.75; max-width: 640px; }
.prose p.prose-lead { font-size: 17.5px; font-weight: 700; color: var(--navy); line-height: 1.55; margin-top: -2px; max-width: 480px; }
.prose ul { margin-top: 14px; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.prose ul li { font-size: 16px; color: var(--ink); padding-left: 24px; position: relative; }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: .52em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.prose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 48px; margin-top: 52px; }
.prose-grid .prose { padding: 0; }

/* Kader bij WhatsApp. Meta verwerkt alles wat een bezoeker in dat kanaal
   typt, dus staat er een regel bij dat het niet voor gezondheids- of
   medicatiegegevens bedoeld is. In het CTA-blok staat hij gecentreerd onder
   de drie knoppen en gaat hij daarom over alle drie de kanalen; gewone
   e-mail is hiervoor net zo min geschikt. In de footer staat hij onderaan
   de contactkolom, los van de WhatsApp-link, en noemt hij WhatsApp dus
   zelf. */
.cta-actions .wa-note { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.65); margin-top: 4px; text-align: center; }
footer li.wa-note { font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 26ch; margin-top: 5px; }