/* Uitvaartverzekeringexpert — gedeelde basis
   De pagina-styling staat grotendeels inline; dit bestand houdt alleen
   wat niet inline kan: resets, het mobiele menu en de footer-responsiviteit. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; overflow-y: scroll; }
body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #2a2118;
  background: #faf6ef;
}
img { max-width: 100%; }

/* ---------- subtiel vlinder-logo als footer-achtergrond ----------
   Via ::before zodat de inline background-color van de footer (#0f4a43)
   het watermerk niet overschrijft. De afbeelding heeft z'n eigen lage
   opacity ingebakken. */
footer { position: relative; overflow: hidden; }
footer::before {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -70px;
  width: 420px;
  height: 420px;
  background-image: url("footer-vlinder.png");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
}
footer > * { position: relative; z-index: 1; }
@media (max-width: 720px) {
  footer::before { right: -70px; bottom: -90px; width: 320px; height: 320px; }
}

/* ---------- mobiel hamburger-menu ---------- */
#mobBurger { display: none; }
@media (max-width: 980px) {
  #mobBurger { display: inline-flex !important; }
  header nav { display: none !important; }
}

/* ---------- gedeeld menu rechts uitlijnen ---------- */
header nav { margin-left: auto; }

/* ---------- logo overal exact even groot (desktop + mobiel) ----------
   Sommige pagina's hadden een afwijkende inline-hoogte (26 vs 28px) of misten
   de mobiele regel. Deze regel met hogere specificiteit forceert één maat overal. */
header .m-hdrlogo { height: 28px !important; width: auto !important; }
@media (max-width: 720px) {
  header .m-hdrlogo { height: 22px !important; }
}

/* header-CTA ("Bekijk opties") verwijderd op verzoek */
.m-hdrcta { display: none !important; }

/* hamburger alleen op mobiel (≤980px), nooit op desktop */
#mobBurger { display: none !important; }
@media (max-width: 980px) { #mobBurger { display: inline-flex !important; } }

/* ---------- range-sliders (premie-indicatie op verzekeraarspagina's) ---------- */
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; outline: none; cursor: pointer; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; cursor: pointer; box-shadow: 0 2px 6px rgba(15,107,95,.35); border: 2px solid #0f8073; }
input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; cursor: pointer; box-shadow: 0 2px 6px rgba(15,107,95,.35); border: 2px solid #0f8073; }

/* ---------- uniforme horizontale marge in de header (gelijk aan homepage) ---------- */
@media (max-width: 720px) {
  header > div { padding-left: 18px !important; padding-right: 18px !important; }
}

/* voorkom 'verspringen': verberg het menu tot main.js de juiste items heeft gezet (geen fade) */
header nav:not([data-nav]) { opacity: 0; }
header nav[data-nav] { opacity: 1; }

/* ---------- verzekeraars-dropdown in de header ---------- */
.nav-drop { position: relative; }
.nav-drop > a::after { content: "⌄"; margin-left: 5px; font-size: 12px; position: relative; top: -1px; }
.nav-dropmenu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 12px; z-index: 60; }
.nav-drop:hover .nav-dropmenu, .nav-drop:focus-within .nav-dropmenu { display: block; }
.nav-dropmenu > span { display: flex; flex-direction: column; background: #fff; border: 1px solid #ece2d2; border-radius: 12px; box-shadow: 0 14px 34px rgba(31,24,16,.14); padding: 8px; min-width: 196px; }
.nav-dropmenu a { padding: 10px 14px; border-radius: 8px; font-size: 14px; font-weight: 600; color: #4a4338; text-decoration: none; white-space: nowrap; }
.nav-dropmenu a:hover { background: #f3ece0; color: #16a596; }

/* ---------- FAQ-accordions (native <details>, server-side & crawlbaar) ---------- */
details.faq > summary { list-style: none; }
details.faq > summary::-webkit-details-marker { display: none; }
details.faq .faq-ico { transition: transform .2s ease; }
details.faq[open] .faq-ico { transform: rotate(45deg); }
details.faq[open] > summary .faq-q { color: #0f6b5f; }

/* ---------- gedeelde footer ---------- */
@media (max-width: 860px) {
  footer > div { padding-left: 6% !important; padding-right: 6% !important; }
  footer > div > div:first-child {
    grid-template-columns: 1fr 1fr !important;
    gap: 30px !important;
  }
}
@media (max-width: 540px) {
  footer > div > div:first-child { grid-template-columns: 1fr !important; }
}

/* ---------- uniforme horizontale paginamarge op mobiel (18px, gelijk aan homepage) ----------
   Veel pagina's zetten de 56px zij-padding op de BINNENSTE container terwijl de
   sectie-klasse óók padding toevoegt; dat stapelde op tot ~74px. Deze regels brengen
   elke content-container terug naar exact 18px, net als op de homepage. */
@media (max-width: 720px) {
  [style*="max-width: 1320px"][style*="56px"],
  [style*="max-width: 980px"][style*="56px"],
  [style*="max-width: 940px"][style*="56px"],
  [style*="max-width: 880px"][style*="56px"],
  [style*="max-width: 820px"][style*="56px"],
  [style*="max-width: 800px"][style*="56px"],
  [style*="max-width: 760px"][style*="56px"],
  [style*="max-width: 720px"][style*="56px"],
  [style*="max-width: 700px"][style*="56px"],
  [style*="max-width: 680px"][style*="56px"],
  [style*="max-width: 640px"][style*="56px"] { padding-left: 18px !important; padding-right: 18px !important; }
  /* CTA-/knop-secties met 56px zij-padding */
  [style*="padding: 0 56px"] { padding-left: 18px !important; padding-right: 18px !important; }
  /* gekleurde CTA-kaarten (border-radius 30px) net iets ruimer */
  [style*="border-radius: 30px"] { padding-left: 26px !important; padding-right: 26px !important; }
}

/* ---------- mobiele koptekst-cap ----------
   De hero-titels op de money-/landingspagina's staan inline op 50–52px en de grote
   sectiekoppen op 38px. Zonder cap lopen die op smalle schermen over de rand. Deze
   regels verkleinen alléén die grote maten op mobiel; kleinere koppen blijven intact. */
@media (max-width: 720px) {
  h1[style*="font-size: 52px"],
  h1[style*="font-size: 50px"],
  h1[style*="font-size: 48px"],
  h1[style*="font-size: 46px"],
  h1[style*="font-size: 44px"] { font-size: 31px !important; line-height: 1.12 !important; }
  h2[style*="font-size: 44px"],
  h2[style*="font-size: 42px"],
  h2[style*="font-size: 40px"],
  h2[style*="font-size: 38px"],
  h2[style*="font-size: 36px"] { font-size: 26px !important; line-height: 1.18 !important; }
  [style*="font-size: 38px"] { font-size: 26px !important; line-height: 1.18 !important; }
}
@media (max-width: 420px) {
  h1[style*="font-size: 52px"],
  h1[style*="font-size: 50px"],
  h1[style*="font-size: 48px"],
  h1[style*="font-size: 46px"],
  h1[style*="font-size: 44px"] { font-size: 27px !important; }
  h2[style*="font-size: 44px"],
  h2[style*="font-size: 42px"],
  h2[style*="font-size: 40px"],
  h2[style*="font-size: 38px"],
  h2[style*="font-size: 36px"] { font-size: 24px !important; }
}

/* ---------- onderste CTA-koppen (wit op gekleurde kaart) extra klein op mobiel ----------
   De afsluit-CTA's onderaan de pagina's staan inline op 40–42px in het wit. De generieke
   cap brengt die naar 26px, maar op een smal scherm oogt dat nog groot. Deze specifiekere
   selector (twee attributen → wint qua specificiteit) verkleint alléén die CTA-koppen. */
@media (max-width: 720px) {
  h2[style*="color: #fff"][style*="font-size: 40px"],
  h2[style*="color: #fff"][style*="font-size: 42px"] { font-size: 23px !important; line-height: 1.22 !important; }
}
@media (max-width: 420px) {
  h2[style*="color: #fff"][style*="font-size: 40px"],
  h2[style*="color: #fff"][style*="font-size: 42px"] { font-size: 20px !important; }
}

/* ---------- tabellen leesbaar op mobiel ----------
   De kennisartikel-tabellen staan op 14.5px met ruime padding; op smalle schermen
   wordt dat krap. Kleinere tekst + padding, en de bedrag-kolom (cost) mag op mobiel
   afbreken zodat een tabel nooit horizontaal over de rand loopt. */
@media (max-width: 720px) {
  .kb-body table { font-size: 13px; }
  .kb-body thead th { font-size: 11px; padding: 9px 10px; }
  .kb-body tbody td, .kb-body tbody th { padding: 9px 10px; }
  .kb-body table.cost thead th:last-child,
  .kb-body table.cost tbody td:last-child { white-space: normal; }
}

/* ---------- kaart-contrast ----------
   Door de wit-crème-alternatie staan sommige witte kaarten op een witte sectie
   (en crème op crème). Een zachte schaduw laat elke rand-kaart op élke achtergrond
   loskomen. Kaarten met een eigen inline box-shadow houden die (inline wint). */
[style*="1px solid #f0e6d6"][style*="border-radius"],
[style*="1px solid rgb(240, 230, 214)"][style*="border-radius"],
[style*="1px solid #efe6d6"][style*="border-radius"],
[style*="1px solid rgb(239, 230, 214)"][style*="border-radius"] {
  box-shadow: 0 10px 30px -22px rgba(80, 60, 30, .32);
}

/* ---------- footer responsive ----------
   De footer-kolommen (1.4fr 1fr 1fr 1fr) stackten niet op mobiel en liepen over
   de rechterrand. Stapelen naar 2 kolommen (≤860px) en 1 kolom (≤520px).
   Dekt zowel de via main.js geïnjecteerde footer als de statische footers. */
@media (max-width: 860px) {
  footer [style*="1.4fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}
@media (max-width: 520px) {
  footer [style*="1.4fr 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 28px !important; }
}