/* ============================================================
   24-7 Zorg  |  legal.css
   Shared styling for all legal / info pages and the 404 page.
   Reuses the site's design tokens, nav and footer, plus a
   clean prose layout for long-form legal text.
   ============================================================ */

:root{
  --paper:#F4FAFB; --paper-2:#E7F3F5; --ink:#123039; --ink-soft:#4B6773;
  --pine:#1B8FB8; --pine-deep:#146F92; --sage:#D7E8EA; --sage-2:#C3DFE4;
  --sun:#28AAD2; --sun-soft:#BFE4EE; --night:#0F5A75; --star:#EAF4F5;
  --sky:#39A2C4; --sky-soft:#CDEAF2;
  --radius-lg:28px; --radius-md:18px;
  --shadow-soft:0 18px 50px -18px rgba(34,48,42,.22);
  --shadow-card:0 10px 30px -12px rgba(34,48,42,.18);
  --ease-spring:cubic-bezier(.34,1.4,.4,1);
  --wrap:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Figtree',system-ui,sans-serif;background:var(--paper);color:var(--ink);line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4,.serif{font-family:'Fraunces',serif;font-weight:600;line-height:1.14;letter-spacing:-.01em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--pine)}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--sun);border-radius:2px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--pine);color:#fff;padding:12px 20px;border-radius:0 0 12px 0;font-weight:700;text-decoration:none}
.skip-link:focus{left:0}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .3s ease,box-shadow .3s ease}
.nav.scrolled{background:rgba(244,250,251,.9);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(34,48,42,.08)}
.nav-inner{max-width:var(--wrap);margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{height:46px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:22px;list-style:none}
.nav-links a{text-decoration:none;font-weight:600;font-size:.93rem;color:var(--ink);position:relative;padding:4px 0}
.nav-tel{display:inline-flex;align-items:center;gap:8px;color:var(--pine-deep) !important;font-variant-numeric:tabular-nums}
.nav-tel svg{width:17px;height:17px;flex:none}
.nav-links a.active{color:var(--pine)}
.nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:var(--sun);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-spring)}
.nav-links a:not(.nav-cta):hover::after,.nav-links a.active:not(.nav-cta)::after{transform:scaleX(1)}
.nav-cta{background:var(--pine);color:#fff !important;padding:11px 22px;border-radius:999px;transition:transform .25s var(--ease-spring),background .25s ease}
.nav-cta:hover{background:var(--pine-deep);transform:translateY(-2px)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;z-index:70}
.burger span{display:block;width:24px;height:2px;background:var(--ink);margin:6px 0;border-radius:2px;transition:.3s var(--ease-spring)}
.burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer;font-weight:700;font-size:1rem;padding:15px 28px;border-radius:999px;border:0;transition:transform .28s var(--ease-spring),box-shadow .28s ease,background .25s ease}
.btn svg{transition:transform .28s var(--ease-spring)}
.btn:hover svg{transform:translateX(4px)}
.btn-primary{background:var(--pine);color:#fff;box-shadow:0 14px 30px -12px rgba(30,77,62,.55)}
.btn-primary:hover{background:var(--pine-deep);transform:translateY(-3px)}
.btn-ghost{background:transparent;color:var(--pine);border:2px solid rgba(30,77,62,.28)}
.btn-ghost:hover{border-color:var(--pine);transform:translateY(-3px);background:rgba(30,77,62,.04)}

a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:6px}

/* ---------- legal hero ---------- */
.lhero{position:relative;padding:150px 0 60px;overflow:hidden;background:linear-gradient(180deg,#EAF4F5 0%,#F4FAFB 100%)}
.lhero-blob{position:absolute;border-radius:50%;z-index:0;filter:blur(2px);width:420px;height:420px;background:radial-gradient(circle,#BFE4EE,transparent 66%);top:-90px;right:-70px;opacity:.5}
.lhero .wrap{position:relative;z-index:2}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:.86rem;font-weight:600;color:var(--ink-soft);margin-bottom:20px}
.crumbs a{text-decoration:none;color:var(--ink-soft);transition:color .2s}
.crumbs a:hover{color:var(--pine)}
.crumbs svg{width:14px;height:14px;opacity:.6}
.crumbs .here{color:var(--pine)}
.lhero h1{font-size:clamp(2.1rem,4.6vw,3.2rem);max-width:20ch}
.lhero-sub{margin:18px 0 0;font-size:clamp(1.02rem,1.5vw,1.15rem);color:var(--ink-soft);max-width:60ch}
.lhero-meta{margin-top:22px;display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.7);border:1px solid rgba(30,77,62,.14);padding:8px 16px;border-radius:999px;font-size:.84rem;font-weight:600;color:var(--pine-deep)}
.lhero-meta svg{width:16px;height:16px;flex:none}

/* ---------- legal body / prose ---------- */
.legal{padding:56px 0 90px}
.legal .wrap{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:54px;align-items:start}
.prose{max-width:760px;font-size:1.03rem;color:var(--ink)}
.prose h2{font-size:clamp(1.4rem,2.6vw,1.85rem);margin:44px 0 14px;color:var(--ink);scroll-margin-top:100px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.14rem;margin:26px 0 8px;color:var(--pine-deep)}
.prose p{margin:0 0 15px;color:var(--ink-soft)}
.prose strong{color:var(--ink);font-weight:700}
.prose a{color:var(--pine-deep);font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.prose a:hover{color:var(--pine)}
.prose ul,.prose ol{margin:0 0 16px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.prose ul li{position:relative;padding-left:30px;color:var(--ink-soft)}
.prose ul li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--sage-2);box-shadow:0 0 0 4px var(--star)}
.prose ol{counter-reset:step}
.prose ol li{position:relative;padding-left:44px;color:var(--ink-soft);counter-increment:step}
.prose ol li::before{content:counter(step);position:absolute;left:0;top:-2px;width:28px;height:28px;border-radius:9px;background:var(--sage);color:var(--pine-deep);font-family:'Fraunces',serif;font-weight:700;font-size:.92rem;display:grid;place-items:center}
.prose li strong{color:var(--ink)}
.prose hr{border:0;height:1px;background:repeating-linear-gradient(90deg,var(--sage-2) 0 8px,transparent 8px 16px);margin:34px 0}

/* callout + fill-in + definition card */
.legal-note{background:var(--sage);border-radius:var(--radius-md);padding:20px 24px;margin:22px 0;display:flex;gap:14px;align-items:flex-start}
.legal-note svg{width:24px;height:24px;flex:none;margin-top:2px;stroke:var(--pine-deep)}
.legal-note p{color:var(--ink);margin:0}
.legal-note a{color:var(--pine-deep);font-weight:700}
.todo{background:#FFF3D6;border:1px dashed #E4B94A;color:#8A6100;font-weight:700;padding:1px 8px;border-radius:6px;font-size:.92em}
.contact-card{background:#fff;border-radius:var(--radius-md);padding:24px 26px;box-shadow:var(--shadow-card);border:1px solid rgba(30,77,62,.06);margin:22px 0}
.contact-card h3{margin:0 0 8px;color:var(--ink)}
.contact-card p{margin:0 0 4px;color:var(--ink-soft)}
.contact-card a{color:var(--pine-deep);font-weight:700;text-decoration:none}
.contact-card a:hover{text-decoration:underline}
.gc-card{display:flex;gap:26px;align-items:flex-start}
.gc-logo{width:170px;height:auto;flex:none;margin-top:2px}
.gc-body{min-width:0}
@media(max-width:620px){.gc-card{flex-direction:column;gap:16px}.gc-logo{width:150px}}

/* ---------- side rail: other legal pages ---------- */
.legal-rail{position:sticky;top:96px}
.legal-rail h4{font-family:'Figtree',sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--pine);margin-bottom:14px}
.legal-rail ul{list-style:none;display:flex;flex-direction:column;gap:4px}
.legal-rail a{display:block;text-decoration:none;color:var(--ink-soft);font-weight:600;font-size:.94rem;padding:9px 14px;border-radius:12px;transition:background .2s ease,color .2s ease}
.legal-rail a:hover{background:var(--paper-2);color:var(--pine-deep)}
.legal-rail a.active{background:var(--pine);color:#fff}
.legal-rail .rail-call{margin-top:18px;background:var(--paper-2);border-radius:var(--radius-md);padding:18px 18px;font-size:.9rem;color:var(--ink-soft)}
.legal-rail .rail-call b{display:block;font-family:'Fraunces',serif;color:var(--ink);margin-bottom:4px}
.legal-rail .rail-call a{display:inline;padding:0;color:var(--pine-deep);font-weight:700;text-decoration:none}

/* ---------- 404 ---------- */
.nf{min-height:100vh;display:grid;place-items:center;padding:130px 24px 90px;text-align:center;background:linear-gradient(180deg,#EAF4F5 0%,#F4FAFB 60%)}
.nf-inner{max-width:560px}
.nf-badge{font-family:'Fraunces',serif;font-weight:700;font-size:clamp(4.5rem,16vw,8rem);color:var(--pine);line-height:1;letter-spacing:-.03em}
.nf h1{font-size:clamp(1.6rem,4vw,2.4rem);margin:6px 0 14px}
.nf p{color:var(--ink-soft);font-size:1.08rem;margin-bottom:28px}
.nf-ctas{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.nf-links{margin-top:34px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;font-size:.94rem}
.nf-links a{color:var(--pine-deep);font-weight:600;text-decoration:none}
.nf-links a:hover{text-decoration:underline}

/* ---------- mobile call bar ---------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(244,250,251,.92);backdrop-filter:blur(14px);box-shadow:0 -8px 30px -12px rgba(18,48,57,.25)}
.cb-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;border-radius:999px;text-decoration:none;font-weight:700;font-size:1rem}
.cb-btn svg{width:19px;height:19px}
.cb-call{background:var(--pine);color:#fff}
.cb-call svg{stroke:#fff}
.cb-back{background:#fff;color:var(--pine-deep);border:2px solid rgba(30,77,62,.24)}

/* ---------- footer ---------- */
footer{background:var(--pine-deep);color:#D7E8EA}
.footer-scene{width:100%;height:auto;display:block;background:var(--paper)}
.footer-inner{max-width:var(--wrap);margin:0 auto;padding:60px 24px 30px}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:36px;padding-bottom:40px;border-bottom:1px solid rgba(220,232,218,.16)}
.footer-brand img{height:56px;width:auto;filter:brightness(0) invert(1);opacity:.95}
.footer-brand p{max-width:32ch;color:#9FD4E4;font-size:.92rem;margin-top:16px}
.footer-brand a{color:#fff}
.footer-col h4{font-family:'Figtree',sans-serif;font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sun);margin-bottom:16px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-col a{color:#D7E8EA;text-decoration:none;font-size:.94rem;transition:color .2s}
.footer-col a:hover{color:var(--sun)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;padding-top:26px;font-size:.84rem;color:#7FA9BC}
.footer-bottom a{color:inherit;text-decoration:none}
.footer-bottom a:hover{color:var(--sun)}
.legal-links{max-width:70ch;line-height:2}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .legal .wrap{grid-template-columns:1fr;gap:36px}
  .legal-rail{position:static;order:-1}
  .legal-rail ul{flex-direction:row;flex-wrap:wrap;gap:8px}
  .legal-rail a{padding:8px 14px;border:1px solid rgba(30,77,62,.12)}
  .legal-rail .rail-call{display:none}
}
@media (max-width:760px){
  .nav-links{position:fixed;inset:0;background:var(--paper);z-index:60;flex-direction:column;justify-content:center;gap:26px;transform:translateX(100%);transition:transform .4s var(--ease-spring)}
  .nav-links.open{transform:none}
  .nav-links::before{
    content:"";position:absolute;right:-90px;top:44%;width:300px;height:300px;
    border:34px solid rgba(27,143,184,.07);border-radius:50%;
    border-right-color:rgba(27,143,184,0);border-top-color:rgba(27,143,184,0);
    transform:rotate(-18deg);pointer-events:none;
  }
  .nav-links a{font-size:1.3rem}
  .burger{display:block}
  .lhero{padding-top:120px}
  .callbar{display:flex}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

/* ================= mobiel menu + mobiele layout (v2) ================= */
/* Let op: geen backdrop-filter op de vaste header. Een filter maakt van
   de header het containing block voor het fixed menupaneel, waardoor het
   paneel tot de hoogte van de balk kromp en de links dwars over de
   pagina heen vielen. */
@media (max-width:860px){
  .nav{z-index:90;backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav.scrolled{background:rgba(244,250,251,.97);backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav-inner{position:relative;gap:12px}
  .brand{position:relative;z-index:92}

  .burger{
    display:grid;place-items:center;position:relative;z-index:92;
    width:46px;height:46px;padding:0;border-radius:15px;
    background:rgba(255,255,255,.66);border:1px solid rgba(18,48,57,.10);
    transition:background .25s ease,border-color .25s ease;
  }
  .burger span{
    position:absolute;left:11px;width:24px;height:2px;margin:0;
    background:var(--ink);border-radius:2px;
    transition:transform .38s var(--ease-spring),opacity .18s ease;
  }
  .burger span:nth-child(1){top:16px}
  .burger span:nth-child(2){top:23px}
  .burger span:nth-child(3){top:30px}
  .burger.open{background:#fff;border-color:rgba(18,48,57,.14)}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0;transform:scaleX(.3)}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .nav-links{
    position:fixed;inset:0;z-index:88;
    display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:0;margin:0;list-style:none;
    padding:98px 20px calc(24px + env(safe-area-inset-bottom));
    background:
      radial-gradient(130% 55% at 100% 0%,#E2F0F4 0%,rgba(226,240,244,0) 62%),
      radial-gradient(115% 45% at 0% 100%,#DAECF1 0%,rgba(218,236,241,0) 60%),
      #FAFDFD;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    transform:translateX(100%);visibility:hidden;
    transition:transform .44s var(--ease-spring),visibility 0s .44s;
  }
  .nav-links.open{transform:none;visibility:visible;transition:transform .44s var(--ease-spring),visibility 0s 0s}
  .nav-links li{
    opacity:0;transform:translateY(12px);
    transition:opacity .34s ease,transform .44s var(--ease-spring);
  }
  .nav-links:not(.open) li{transition-delay:0s}
  .nav-links.open li{opacity:1;transform:none}
  .nav-links.open li:nth-child(1){transition-delay:.10s}
  .nav-links.open li:nth-child(2){transition-delay:.15s}
  .nav-links.open li:nth-child(3){transition-delay:.20s}
  .nav-links.open li:nth-child(4){transition-delay:.25s}
  .nav-links.open li:nth-child(5){transition-delay:.30s}
  .nav-links.open li:nth-child(6){transition-delay:.35s}
  .nav-links.open li:nth-child(7){transition-delay:.40s}
  .nav-links.open li:nth-child(8){transition-delay:.45s}

  .nav-links a{font-size:1rem}
  .nav-links a:not(.nav-cta):not(.nav-tel){
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    font-family:'Fraunces',serif;font-size:1.36rem;font-weight:600;letter-spacing:-.015em;
    color:var(--ink);padding:18px 2px;
    background-image:repeating-linear-gradient(90deg,var(--sage-2) 0 5px,rgba(0,0,0,0) 5px 11px);
    background-size:100% 1px;background-repeat:no-repeat;background-position:left bottom;
  }
  .nav-links a:not(.nav-cta):not(.nav-tel)::after,
  .nav-links a:not(.nav-cta):not(.nav-tel):hover::after{
    content:"";position:static;flex:none;width:9px;height:9px;
    background:none;border:0;border-top:2px solid var(--sun);border-right:2px solid var(--sun);
    border-radius:1px;transform:rotate(45deg);opacity:.85;
  }
  .nav-links a.active:not(.nav-cta):not(.nav-tel){color:var(--pine)}

  .nav-links li:nth-last-child(2){margin-top:auto;padding-top:28px}
  .nav-links li:nth-last-child(1){margin-top:10px}
  .nav-links .nav-tel{
    display:flex;align-items:center;justify-content:center;gap:11px;
    min-height:58px;padding:0 18px;border-radius:999px;
    background:#fff;border:2px solid var(--sage-2);
    font-size:1.16rem;font-weight:700;color:var(--pine-deep) !important;
  }
  .nav-links .nav-tel svg{width:20px;height:20px}
  .nav-links .nav-tel::after{display:none}
  .nav-links .nav-cta{
    display:flex;align-items:center;justify-content:center;text-align:center;
    min-height:58px;padding:0 20px;border-radius:999px;
    background:var(--pine);color:#fff !important;font-size:1.06rem;font-weight:700;
    box-shadow:0 16px 34px -16px rgba(20,111,146,.85);
  }
  .nav-links .nav-cta::after{display:none}
}
@media (min-width:620px) and (max-width:860px){
  .nav-links{padding-left:max(20px,calc((100vw - 560px)/2));padding-right:max(20px,calc((100vw - 560px)/2))}
}
/* scrollvergrendeling terwijl het menu open staat (ook op iOS Safari) */
html.menu-open{overflow:hidden}
html.menu-open body{position:fixed;left:0;right:0;width:100%;overflow:hidden}

/* ---- ankerlinks niet meer onder de vaste balk ---- */
html{scroll-padding-top:104px}
@media (max-width:860px){html{scroll-padding-top:92px}}

/* ---- footer: ruimere raakvlakken op telefoon ---- */
@media (max-width:760px){
  .footer-inner{padding:48px 22px 26px}
  .footer-top{gap:30px;padding-bottom:30px}
  .footer-col ul{gap:2px}
  .footer-col a{display:inline-block;padding:9px 0}
  .footer-bottom{gap:8px}
  .footer-bottom a{display:inline-block;padding:5px 0}
}