/* ─────────────────────────────────────────────────────────────
   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; position: relative;
  background: var(--dots), white;
  background-size: 24px 24px, auto;
}
/* De stippellijn met knooppunten staat op een eigen laag onder het merkblok
   links. Hij houdt exact de oude vorm (de svg wordt op de volle footerbreedte
   geschaald en op 60% afgekapt) en dooft vanaf 62% van die laag uit, zodat hij
   nooit door de kolommen Pagina's en Contact loopt. */
footer::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 61px; width: 60%; pointer-events: none;
  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") 0 0 / calc(100% / .6) 100% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 62%, transparent 100%);
}
footer .wrap { position: relative; z-index: 1; }
/* Op een telefoon staan merkblok en kolommen onder elkaar over de volle breedte;
   dan loopt de lijn alsnog door tekst. Daar dus geen lijn. */
@media (max-width: 640px) { footer::before { display: none; } }
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; }
/* Let op: het inline <style>-blok van over-ons.html staat ná deze stylesheet en
   zet padding en .lede + .lede zelf. Deze padding-regel wordt daar overschreven;
   wil je de hero-ruimte wijzigen, doe dat in dat blok. Zie backlog A-punt over
   de meetfout van 28-07, dezelfde val. */
body[data-page="over"] .hero.sub { padding: 128px 0 64px; }
body[data-page="over"] .hero.sub h1 { margin: 16px 0 24px; }
/* Eén tekstmaat voor alle drie de alinea's. De eerste twee stonden op 16px en de
   derde op 20px, bedoeld als rangorde: alleen de derde is de inleiding. In beeld
   las dat niet als rangorde maar als drie verschillende maten, met de grootste
   uitgerekend onderaan. Het einde van het verhaal wordt nu gemarkeerd door de
   afsluitende regel eronder, niet door een sprong in korpsgrootte. */
body[data-page="over"] .hero .lede,
body[data-page="over"] .hero .hero-body { font-size: 17px; line-height: 1.75; color: var(--body-c); }
body[data-page="over"] .stamp-note { text-align: center; font-size: 13.5px; color: var(--muted); }
/* De rechterkolom heeft twee blokken: badge met bijschrift, en de kernpunten.
   Die stonden 8px uit elkaar en lazen als één blok; 44px zet ze los. De
   kernpunten staan alleen op deze pagina, dus de maat mag hier van 16 naar 15,5
   zodat de kolom één tekstmaat aanhoudt. */
body[data-page="over"] .hero .qlist { margin-top: 44px; }
body[data-page="over"] .hero .qlist div { padding: 16px 4px; font-size: 15.5px; }
/* Bovenaan uitlijnen was de juiste keuze zolang het prijzenblok in deze kolom
   stond: het hoogteverschil met de tekst was toen 126px en gecentreerd viel dat
   als twee gaten uiteen. Nu het prijzenblok terug in de lopende tekst staat is
   het verschil 319px, en laat "start" één gat van 319px onder de kernpunten
   vallen. Gecentreerd staat de badge weer tegenover het midden van het verhaal,
   zoals in het oorspronkelijke ontwerp. */
body[data-page="over"] .hero-side { align-self: center; }
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; }