/* Gedeeld ontwerp voor de juridische pagina's van Stolk Schilders.
   Zelfde tokens als de homepage en de RAL-pagina, zodat de legal pages
   onderdeel van de website zijn en niet een losse tekstbak. */
@import url("./fonts/inter.css");

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --navy: #101827;
  --ink: #141B29;
  --muted: #5E6878;
  --bg: #F7F7F5;
  --warm: #F3F0EA;
  --groen: #2F6B4F;
  --line: rgba(16, 24, 39, 0.10);
  --line-sterk: rgba(16, 24, 39, 0.18);
  --r-xl: 24px;
  --r-md: 18px;
  --schaduw: 0 1px 2px rgba(16,24,39,.04), 0 14px 34px -14px rgba(16,24,39,.16);
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--navy);
}
* { box-sizing: border-box; }
body { font-family: var(--font-sans); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; margin: 0; overflow-x: hidden; }
a { color: inherit; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; }
.muted { color: var(--muted); }

.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; font-size: 15px; font-weight: 500; white-space: nowrap; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color .2s ease, border-color .2s ease; }
.btn-primair { background: var(--navy); color: #fff; }
.btn-primair:hover { background: #1D2637; }
.btn-secundair { background: #fff; color: var(--ink); border-color: var(--line-sterk); }
.btn-secundair:hover { background: var(--warm); border-color: var(--navy); }
.pijl { transition: transform .2s ease; }
.btn:hover .pijl { transform: translateX(4px); }
.ico { width: 22px; height: 22px; }
.ico-sm { width: 17px; height: 17px; }

/* Header: gelijk aan de rest van de site. */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(247,247,245,.86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.site-header .binnen { max-width: 1280px; margin: 0 auto; padding: 0 20px; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
@media (min-width: 1024px) { .site-header .binnen { height: 80px; padding: 0 32px; } }
.logo { display: flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; }
.logo-vlak { width: 36px; height: 36px; border-radius: 12px; background: linear-gradient(135deg, #101827, #2A3444); color: #fff; display: flex; align-items: center; justify-content: center; }
.logo-naam { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }

/* Hoofdnavigatie in de gedeelde header. Zelfde vormtaal als de homepage en de
   RAL-pagina (die hun eigen kopie in de pagina hebben, omdat daar Tailwind de
   layout doet); hier staat de losse variant voor pagina's die alleen deze
   stylesheet laden. Onder 1024px verdwijnt de nav en neemt het uitklapmenu het
   over, zodat de knoppen hun aanraakvlak houden. */
.kop-nav { display: none; }
@media (min-width: 1024px) {
  .kop-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; margin-right: 24px; }
}
.kop-link { position: relative; font-size: 15px; font-weight: 500; white-space: nowrap; color: var(--muted); text-decoration: none; padding: 8px 0; transition: color .2s ease; }
.kop-link:hover { color: var(--ink); }
.kop-link[aria-current="page"] { color: var(--ink); font-weight: 600; }
.kop-link[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--navy); }
.kop-link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--navy); border-radius: 4px; }

/* Uitklapmenu voor smalle schermen. */
/* Onder 1024px is er geen ruimte voor het volledige CTA-label naast de
   menuknop; net als op de RAL-pagina kort hij dan in tot "Offerte". */
.kop-cta-lang { display: inline; }
.kop-cta-kort { display: none; }
@media (max-width: 1023px) {
  .site-header .btn { padding: 0 16px; font-size: 14px; min-height: 44px; }
  .site-header .btn .pijl { display: none; }
  .kop-cta-lang { display: none; }
  .kop-cta-kort { display: inline; }
}
/* Onder ~360px (iPhone SE) passen logo, offerteknop en menuknop niet samen op
   één regel; de knop schuift dan buiten beeld. Op die breedte laten we alleen
   het logo en de menuknop staan. De offerte blijft bereikbaar via het menu,
   dat op de visualisatorpagina een expliciete "Offerte aanvragen" heeft. */
@media (max-width: 360px) {
  .site-header .btn-primair, .site-header .btn-secundair { display: none; }
  .kop-menu-offerte { display: flex; }
}
.kop-menu-offerte { font-weight: 600; }
.logo-naam { white-space: nowrap; }

.kop-menu-knop { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.kop-menu-knop:hover { background: var(--warm); }
.kop-menu-knop:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--navy); }
@media (min-width: 1024px) { .kop-menu-knop { display: none; } }
.kop-menu { display: none; border-top: 1px solid var(--line); background: rgba(247,247,245,.98); }
.kop-menu.open { display: block; }
@media (min-width: 1024px) { .kop-menu.open { display: none; } }
.kop-menu .binnen { max-width: 1280px; margin: 0 auto; padding: 10px 20px 16px; height: auto; display: block; }
.kop-menu-link { display: flex; align-items: center; min-height: 48px; padding: 10px 12px; border-radius: 12px; font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; }
.kop-menu-link:hover { background: rgba(16,24,39,.05); }
.kop-menu-link[aria-current="page"] { font-weight: 600; background: var(--warm); }
.kop-menu-link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--navy); }

/* Document. */
.doc { max-width: 1280px; margin: 0 auto; padding: 112px 20px 64px; }
@media (min-width: 1024px) { .doc { padding: 128px 32px 80px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; } }
.doc-kop { max-width: 820px; margin-bottom: 40px; }
.doc-titel { font-size: clamp(32px, 4vw, 46px); line-height: 1.1; letter-spacing: -.035em; font-weight: 300; margin: 12px 0 16px; }
.doc-intro { font-size: 17px; line-height: 1.7; color: var(--muted); margin: 0 0 18px; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--muted); }
.chip-concept { background: rgba(212,150,20,.1); border-color: rgba(212,150,20,.4); color: #7A5400; font-weight: 600; }

/* Inhoudsopgave: plakt mee op desktop. */
.toc { display: none; }
@media (min-width: 1024px) { .toc { display: block; position: sticky; top: 104px; } }
.toc-kop { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 7px 0 7px 14px; margin-left: -1px; border-left: 1px solid transparent; font-size: 13.5px; line-height: 1.45; color: var(--muted); text-decoration: none; transition: color .2s ease, border-color .2s ease; }
.toc a:hover { color: var(--ink); }
.toc a.actief { color: var(--ink); font-weight: 600; border-left-color: var(--navy); }
.toc-mobiel { display: block; margin-bottom: 32px; }
@media (min-width: 1024px) { .toc-mobiel { display: none; } }
.toc-mobiel summary { cursor: pointer; font-size: 14px; font-weight: 600; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); list-style: none; min-height: 48px; display: flex; align-items: center; }
.toc-mobiel summary::-webkit-details-marker { display: none; }
.toc-mobiel[open] summary { border-radius: var(--r-md) var(--r-md) 0 0; }
.toc-mobiel ol { list-style: none; margin: 0; padding: 6px 8px 10px; background: #fff; border: 1px solid var(--line); border-top: none; border-radius: 0 0 var(--r-md) var(--r-md); }
.toc-mobiel a { display: block; padding: 11px 10px; font-size: 14px; color: var(--muted); text-decoration: none; min-height: 44px; }

/* Tekst: rustige maat, geen tekstmuur. */
.tekst { max-width: 820px; }
.tekst section { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--line); scroll-margin-top: 100px; }
.tekst section:last-child { border-bottom: none; }
.tekst h2 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; letter-spacing: -.025em; font-weight: 650; margin: 0 0 18px; }
.tekst h3 { font-size: 17px; font-weight: 600; margin: 26px 0 10px; }
.tekst p { font-size: 16px; line-height: 1.75; color: #384252; margin: 0 0 14px; max-width: 68ch; }
.tekst a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.tekst ul { margin: 0 0 16px; padding: 0; list-style: none; max-width: 68ch; }
.tekst ul li { position: relative; padding-left: 22px; margin-bottom: 9px; font-size: 16px; line-height: 1.7; color: #384252; }
.tekst ul li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 5px; height: 5px; border-radius: 999px; background: var(--line-sterk); }
.tabel-wrap { overflow-x: auto; margin: 0 0 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 420px; }
th { text-align: left; font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--warm); }
td { padding: 12px 14px; border-bottom: 1px solid var(--line); color: #384252; line-height: 1.6; vertical-align: top; }
tr:last-child td { border-bottom: none; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: var(--warm); padding: 2px 6px; border-radius: 5px; }

/* Twee opvallende blokken: een aandachtspunt en een openstaand punt. */
.blok { display: flex; gap: 12px; padding: 16px 18px; border-radius: var(--r-md); margin: 0 0 18px; max-width: 68ch; }
.blok p { margin: 0; font-size: 15px; }
.blok-let-op { background: #fff; border: 1px solid var(--line-sterk); }
.blok-todo { background: rgba(212,150,20,.07); border: 1px dashed rgba(212,150,20,.55); }
.blok-todo .blok-label { color: #7A5400; }
.blok-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 5px; color: var(--muted); }

/* Voet van het document. */
.doc-voet { max-width: 820px; margin-top: 8px; display: grid; gap: 20px; }
@media (min-width: 640px) { .doc-voet { grid-template-columns: 1fr 1fr; } }
.doc-kaart { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 22px; }
.doc-kaart h2 { font-size: 16px; font-weight: 600; margin: 0 0 10px; }
.doc-kaart p, .doc-kaart li { font-size: 14px; line-height: 1.7; color: var(--muted); margin: 0 0 6px; }
.doc-kaart ul { list-style: none; margin: 0; padding: 0; }
.doc-kaart a { color: var(--ink); }

/* Footer: gelijk aan de rest van de site. */
.voet { background: var(--navy); color: #fff; }
.voet-binnen { max-width: 1280px; margin: 0 auto; padding: 48px 20px; }
@media (min-width: 1024px) { .voet-binnen { padding: 56px 32px; } }
.voet-rijen { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-start; margin-bottom: 32px; }
.voet-link, .voet-knop { color: rgba(255,255,255,.6); text-decoration: none; font-size: 14px; background: none; border: none; padding: 0; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; transition: color .2s ease; }
.voet-link:hover, .voet-knop:hover { color: #fff; }
.voet-link:focus-visible, .voet-knop:focus-visible { box-shadow: 0 0 0 2px var(--navy), 0 0 0 4px #fff; }
.voet-onder { border-top: 1px solid rgba(255,255,255,.12); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; align-items: center; }
.voet-onder p { font-size: 12px; color: rgba(255,255,255,.5); margin: 0; }
.voet-legal { display: flex; flex-wrap: wrap; gap: 4px 18px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }