/* 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%; }
body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #2a2118;
  background: #faf6ef;
}
img { max-width: 100%; }

/* ---------- 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; }

/* ---------- 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 */
header nav:not([data-nav]) { opacity: 0; }
header nav[data-nav] { opacity: 1; transition: opacity .12s ease; }

/* ---------- 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; }

/* ---------- 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; }
}

/* ---------- 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);
}