/* ==========================================================================
   Websem.studio — legal.css · voorwaarden.html (Figma 937:1046 "Juridische page algemeem")
   Lichte pagina: achtergrond #f5f5f5, tekst zwart. Header + footer blijven de site-versie,
   alleen de navigatie wordt donker op licht (logo, links, knop omgekeerd).
   ========================================================================== */

/* ---------- Lichte pagina ---------- */
body.page-light{ background:#f5f5f5; color:#151515; }

/* Navigatie op licht: zelfde gedrag als elders, kleuren omgekeerd */
.page-light .nav{ background:linear-gradient(180deg, #f5f5f5 0%, rgba(245,245,245,0) 100%); }
.page-light .nav__logo img{ filter:invert(1); }
.page-light .nav__cta{ filter:invert(1); } /* witte MASK3-knop wordt zwart, effect blijft hetzelfde */
.page-light .nav__burger{ background:rgba(0,0,0,.08); }
.page-light .nav__burger span{ background:#000; }
/* mobiel menu: licht (#f5f5f5) met zwarte links; header blijft donker-op-licht */
.page-light .mobile-menu{ background:#f5f5f5; color:#000; }
.page-light:has(.nav__burger[aria-expanded="true"]) .nav{ background:none; }
@media (min-width: 1024px){
  .page-light .nav__links a{ color:#000; }
}

/* ---------- Opbouw ---------- */
.legal{
  max-width:calc(1200px + 2 * var(--gutter)); margin:0 auto;
  padding:20px var(--gutter) 72px; /* balk (12px onderruimte) + 20 = 32px tot de eerste lijn */
  display:flex; flex-direction:column; gap:56px;
}

/* ---------- Onderwerpen-balk: sticky mini-navigatie (Figma 937:1126) ----------
   Plakt onder de hoofdnavigatie. Volgt de header: bovenaan = onder topbalk + nav,
   gescrold = onder alleen de nav, header weg (naar beneden scrollen) = helemaal bovenaan. */
.legal-bar{
  --bar-top:106px; /* 41 topbalk + 65 nav (mobiel) */
  position:sticky; top:var(--bar-top); z-index:80;
  margin-top:106px; padding:12px 0;
  background:linear-gradient(180deg, #f5f5f5 0%, rgba(245,245,245,0) 100%); /* zelfde als de navigatie */
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  transition:top var(--dur-base) var(--ease-out); /* zelfde tempo als de header */
}
.page-light:has(.site-header.is-scrolled) .legal-bar{ --bar-top:65px; }
.page-light:has(.site-header.is-hidden) .legal-bar{ --bar-top:0px; }
.legal-tabs{
  max-width:calc(1200px + 2 * var(--gutter)); margin:0 auto; padding:0 var(--gutter);
  display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; scroll-behavior:smooth;
}
.legal-tabs::-webkit-scrollbar{ display:none; }
.legal-tab{
  flex:none; display:inline-flex; align-items:center; padding:11px 19px; border-radius:var(--radius-pill);
  background:#fff; color:#000; font-family:var(--font-text); font-weight:500; font-size:15px; line-height:1; white-space:nowrap;
  transition:background-color .35s var(--ease-out), color .35s var(--ease-out);
}
@media (hover:hover){ .legal-tab:hover{ background:#e6e6e6; } }
.legal-tab:active{ background:#222; color:#fff; transition-duration:.1s; }
/* actieve sectie: knop wordt zwart + klein "tikje" ter bevestiging */
.legal-tab.is-active{ background:#000; color:#fff; animation:legal-tab-pop .45s var(--ease-spring); }
@keyframes legal-tab-pop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.06); } 100%{ transform:scale(1); } }

/* ---------- Secties (Figma 937:1131) ---------- */
.legal-sec{ border-top:2px solid #ddd; padding-top:18px; display:flex; flex-direction:column; gap:32px; scroll-margin-top:90px; }
.legal-block{ display:flex; flex-direction:column; }
.legal-block--1{ gap:16px; }
.legal-block--2{ gap:12px; }
.legal-block--3{ gap:9px; }
.legal-h1,.legal-h2,.legal-h3{ font-weight:500; line-height:1; letter-spacing:-.04em; color:#000; }
.legal-h1{ font-size:clamp(2rem, 1.694rem + 1.255vw, 2.75rem); }    /* 32 → 44 */
.legal-h2{ font-size:clamp(1.375rem, 1.2794rem + .3922vw, 1.75rem); } /* 22 → 28 (Figma) */
.legal-h3{ font-size:clamp(1.125rem, 1.0931rem + .1307vw, 1.25rem); } /* 18 → 20 (Figma) */
/* kop 3 direct na kop 2 hoort erbij: 16px i.p.v. 32px */
.legal-block--2 + .legal-block--3{ margin-top:-16px; }
.legal-sec p{ font-size:var(--fs-body); line-height:1.6; color:#151515; max-width:1000px; }
.legal-sec a.u-line{ color:#000; }

/* Bedrijfsgegevens-lijst */
.legal-data{ margin:0; display:grid; grid-template-columns:120px 1fr; gap:6px 16px; font-size:var(--fs-body); line-height:1.6; }
.legal-data dt{ color:#7d7d7d; }
.legal-data dd{ margin:0; color:#151515; }

/* Nog in te vullen door Fabian (vóór livegang weghalen) */
.todo{ background:#fff1a6; color:#000; padding:0 6px; border-radius:4px; }

.legal-cookie-btn{ align-self:flex-start; margin-top:12px; border:0; cursor:pointer; }

/* ---------- FAQ (Figma 937:1267) ---------- */
.legal-faq{ gap:24px; }
.legal-filter{ display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; padding-bottom:6px;
  margin-left:calc(-1 * var(--gutter)); margin-right:calc(-1 * var(--gutter)); padding-left:var(--gutter); padding-right:var(--gutter); }
.legal-filter::-webkit-scrollbar{ display:none; }
.legal-filter__all,.legal-chip{
  flex:none; height:38px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-pill);
  background:#fff; color:#000; transition:background-color .35s var(--ease-out), color .35s var(--ease-out);
}
.legal-filter__all{ width:38px; padding:9px; }
.legal-filter__all img{ width:20px; height:20px; transition:filter .35s var(--ease-out); }
.legal-chip{ padding:0 19px; font-size:14px; line-height:1; white-space:nowrap; }
@media (hover:hover){
  .legal-chip:hover,.legal-filter__all:hover{ background:#e6e6e6; }
}
.legal-chip.is-active,.legal-filter__all.is-active{ background:#000; color:#fff; }
.legal-filter__all.is-active img{ filter:invert(1); }

.legal-faq__grid{ display:grid; grid-template-columns:1fr; gap:12px; align-items:start; }
.legal-faq .faq__item{ background:#fff; border:0; border-radius:12px; padding:0 16px; }
.legal-faq .faq__item[hidden]{ display:none; }
.legal-faq .faq__q{ padding:16px 0; gap:24px; font-size:16px; line-height:1.8; color:#000; }
.legal-faq .faq__q img{ flex:none; width:15px; height:15px; transition:transform var(--dur-base) var(--ease-out); }
.legal-faq .faq__item:hover .faq__q, .legal-faq .faq__item[open] .faq__q{ color:#000; }
.legal-faq .faq__item[open] .faq__q img{ transform:rotate(180deg); }
.legal-faq .faq__a p{ padding:0 0 20px; font-size:var(--fs-body); color:#555; max-width:none; }

/* ---------- Desktop ---------- */
@media (min-width: 768px){
  .legal{ padding:16px var(--gutter) 120px; gap:80px; }
  .legal-bar{ --bar-top:178px; margin-top:202px; padding:16px 0; } /* 53 topbalk + 125 nav; knoppen op 218px zoals Figma */
  .page-light:has(.site-header.is-scrolled) .legal-bar{ --bar-top:125px; }
  .page-light:has(.site-header.is-hidden) .legal-bar{ --bar-top:0px; }
  .legal-tabs{ gap:24px; flex-wrap:wrap; overflow:visible; }
  .legal-tab{ font-size:16px; }
  .legal-data{ grid-template-columns:160px 1fr; }
  .legal-filter{ gap:18px; padding:0 0 18px; margin:0; overflow:visible; flex-wrap:wrap; }
  .legal-faq__grid{ grid-template-columns:1fr 1fr; gap:24px; }
  .legal-faq .faq__q{ padding:24px 0; font-size:18px; }
}

/* ---------- Witte footer (alleen op deze pagina, zonder iPhone-CTA) ---------- */
.footer--light{ background:#fff; color:#151515; }
.footer--light .f-main{ background:#fff; }
.footer--light .f-cols{ background:#f5f5f5; border-color:rgba(0,0,0,.08); -webkit-backdrop-filter:none; backdrop-filter:none; }
.footer--light .f-col{ border-top-color:rgba(0,0,0,.1); }
.footer--light .f-col__title{ color:#000; }
.footer--light .f-col a, .footer--light .f-col .f-place{ color:#151515; }
.footer--light .f-col a:hover{ color:#000; }
.footer--light .f-socials a{ background:#f5f5f5; }
.footer--light .f-socials a:hover{ background:#e6e6e6; }
.footer--light .f-socials img{ filter:invert(1); }
.footer--light .f-bottom__made strong{ color:#000; }
@media (min-width: 768px){
  .footer--light .f-cols{ background:none; }
  .footer--light .f-card{ background:#f5f5f5; border-color:rgba(0,0,0,.08); -webkit-backdrop-filter:none; backdrop-filter:none; }
  .footer--light .f-card:hover{ border-color:rgba(0,0,0,.25); }
  .footer--light .f-card__num{ color:#000; }
  .footer--light .f-card__counter{ border-bottom-color:rgba(0,0,0,.1); }
  .footer--light .f-card__counter span{ color:#000; }
  .footer--light .f-card__quote{ background:#fff; }
  .footer--light .f-card__mark path{ fill:#000; }
  .footer--light .f-card__text{ color:#555; }
  .footer--light .f-card__text .f-more, .footer--light .f-card__who strong{ color:#000; }
}
.legal-data__sep{ margin:0 10px; color:#7d7d7d; }

/* Kopiëren toegestaan, alleen op de inhoud van deze pagina (rest van de site blijft geblokkeerd, zie main.js isField) */
[data-allow-copy]{ -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; }
[data-allow-copy] button, [data-allow-copy] summary{ -webkit-user-select:none; user-select:none; } /* knoppen en FAQ-vragen niet per ongeluk selecteren */