/* ============================================================================
   wf-document.css - de losse juridische documenten op www.webfix.nl:
   /privacy/, /av/ en /disclaimer/ (zie "juridische documenten" in build.mjs).

   Sober met opzet: een kop met het logo en de drie documenten, de leestekst
   (.wf-juridisch uit wf-sales.css) en een smalle voet. Geen hoofdmenu, want op
   www staan de overige pagina's van de verkoopsite nog niet.
   ========================================================================== */

html[data-wf-document] {
   /* wf-sales.css zet overflow-x: hidden op html; daarmee plakt een sticky kop niet. clip knipt
      net zo goed af, maar maakt er geen scrollcontainer van. */
   overflow-x: clip;
   /* Een sprong naar #koppeling-verwijderen belandt onder de plakkende kop, niet erachter. */
   scroll-padding-top: 96px;
   background: var(--wfs-surface, #fff);
}
html[data-wf-document] body { overflow-x: clip; overflow-y: visible; }

/* -- kop ------------------------------------------------------------------ */
.wf-doc-kop {
   position: sticky;
   top: 0;
   z-index: 20;
   background: rgba(255, 255, 255, .94);
   -webkit-backdrop-filter: saturate(1.4) blur(10px);
   backdrop-filter: saturate(1.4) blur(10px);
   border-bottom: 1px solid var(--wfs-line, #edf5fa);
}
.wf-doc-balk {
   max-width: 1200px;
   margin: 0 auto;
   padding: 14px 20px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
}
.wf-doc-logo { display: inline-flex; flex: none; }
.wf-doc-logo img { display: block; height: 34px; width: auto; }
.wf-doc-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.wf-doc-nav a {
   padding: 8px 15px;
   border-radius: 999px;
   font-size: 14px;
   font-weight: 600;
   line-height: 1.2;
   color: var(--wfs-ink-soft, #5f6368);
   transition: background-color .2s, color .2s;
}
.wf-doc-nav a:hover { background: var(--wfs-surface-alt, #f7f8fc); color: var(--wfs-ink, #000229); }
.wf-doc-nav a[aria-current="page"] { background: rgba(218, 23, 108, .08); color: var(--wfs-accent, #da176c); }

/* -- titel ------------------------------------------------------------------ */
.wf-doc-titel {
   padding: 68px 20px 46px;
   background: linear-gradient(180deg, var(--wfs-surface-alt, #f7f8fc), #fff);
   border-bottom: 1px solid var(--wfs-line, #edf5fa);
}
.wf-doc-titel-in { max-width: 760px; margin: 0 auto; }
.wf-doc-label {
   display: inline-block;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: .08em;
   text-transform: uppercase;
   background: linear-gradient(90deg, #b0d136 0%, #da176c 50%, #32bcee 100%);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
}
.wf-doc-titel h1 {
   margin: 10px 0 12px;
   font-size: clamp(34px, 5vw, 50px);
   line-height: 1.1;
   font-weight: 800;
   letter-spacing: -.02em;
   color: var(--wfs-ink, #000229);
}
.wf-doc-titel p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--wfs-ink-soft, #5f6368); }

/* De leestekst begint direct onder de titel; de ruime sectiemarge van de verkoopsite is hier te veel. */
.wf-doc-main .wf-sectie { padding-top: 44px; padding-bottom: 72px; }

/* -- voet ------------------------------------------------------------------- */
.wf-doc-voet {
   background: var(--wfs-surface-alt, #f7f8fc);
   border-top: 1px solid var(--wfs-line, #edf5fa);
}
.wf-doc-voet-in {
   max-width: 1200px;
   margin: 0 auto;
   padding: 26px 20px;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 10px 24px;
   font-size: 14px;
   line-height: 1.6;
   color: var(--wfs-ink-soft, #5f6368);
}
.wf-doc-voet-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.wf-doc-voet a { font-weight: 600; color: var(--wfs-ink-soft, #5f6368); transition: color .2s; }
.wf-doc-voet a:hover { color: var(--wfs-accent, #da176c); }

@media (max-width: 575.98px) {
   html[data-wf-document] { scroll-padding-top: 16px; }
   .wf-doc-kop { position: static; }
   .wf-doc-balk { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 16px; }
   .wf-doc-nav a { padding: 7px 12px; }
   .wf-doc-titel { padding: 40px 16px 30px; }
   .wf-doc-main .wf-sectie { padding-top: 30px; padding-bottom: 48px; }
   .wf-doc-voet-in { flex-direction: column; align-items: flex-start; padding: 22px 16px; }
}