/* Luw — pagina-opbouw voor de website en het cliëntensysteem.
   Gebruikt alleen de tokens en componenten uit luw.css. Geen schaduwen, verlopen of overgangen. */

.luw-overslaan { position: absolute; left: var(--ruimte-4); top: -200px; z-index: 10; padding: var(--ruimte-3) var(--ruimte-4); background: var(--grond); color: var(--inkt); border: var(--lijndikte) solid var(--lijn-sterk); border-radius: var(--rond-m); font-weight: 600; }
.luw-overslaan:focus { top: var(--ruimte-2); }

.luw-pagina { width: 100%; max-width: calc(var(--paginabreedte) + 2 * var(--ruimte-4)); margin-inline: auto; padding-inline: var(--ruimte-4); }
@media (min-width: 768px) { .luw-pagina { max-width: calc(var(--paginabreedte) + 2 * var(--ruimte-6)); padding-inline: var(--ruimte-6); } }

/* Kop: de stijlboek-kop, uitgelijnd op de paginabreedte; onder 768px een menuknop. */
.luw-kop { position: relative; flex-wrap: nowrap; padding-inline: var(--ruimte-4); }
.luw-kop__nav a { white-space: nowrap; }
.luw-kop__rechts { display: none; }
/* Het stijlboek wisselt het woordmerk alleen bij data-theme; hier ook bij een donker systeem zonder keuze. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="licht"]) .luw-kop__logo .licht { display: none; }
  :root:not([data-theme="licht"]) .luw-kop__logo .donker { display: block; }
}
.luw-menu { margin-left: auto; }
.luw-menu summary { list-style: none; cursor: pointer; }
.luw-menu summary::-webkit-details-marker { display: none; }
.luw-menu__lijst { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; padding: var(--ruimte-4); background: var(--grond); border-bottom: var(--lijndikte) solid var(--lijn); display: grid; gap: var(--ruimte-4); }
.luw-menu__lijst ul { list-style: none; margin: 0; padding: 0; display: grid; }
.luw-menu__lijst a { display: flex; align-items: center; min-height: var(--raakvlak); padding: 0 var(--ruimte-3); font-weight: 600; font-size: 16px; color: var(--inkt); text-decoration: none; border-radius: var(--rond-s); }
.luw-menu__lijst a:hover { text-decoration: underline; text-underline-offset: 3px; }
.luw-menu__lijst a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--zon); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.luw-menu__lijst a:focus-visible, .luw-menu summary:focus-visible { outline: none; box-shadow: 0 0 0 var(--focusdikte) var(--grond), 0 0 0 calc(var(--focusdikte) * 2) var(--focus); }
.luw-menu__lijst .luw-thema { justify-self: start; }
@media (min-width: 768px) {
  .luw-kop { padding-inline: max(var(--ruimte-6), calc((100% - var(--paginabreedte)) / 2)); }
}
/* Menu en schakelaar staan op één regel, de schakelaar uiterst rechts. Past dat niet (onder 920px), dan de menuknop. */
@media (min-width: 920px) {
  .luw-kop__rechts { display: flex; flex-wrap: nowrap; justify-content: flex-end; margin-left: auto; gap: var(--ruimte-5); }
  .luw-menu { display: none; }
}
@media (min-width: 920px) and (max-width: 1119px) {
  .luw-kop__nav a { padding: 0 var(--ruimte-2); }
  .luw-kop__rechts { gap: var(--ruimte-3); }
}

/* Secties */
.luw-sectie { padding-block: var(--ruimte-8); }
@media (min-width: 768px) { .luw-sectie { padding-block: var(--ruimte-9); } }
.luw-sectie--dauw { background: var(--dauw); }
.luw-sectie--titel { padding-bottom: var(--ruimte-7); }
.luw-sectie--titel > .luw-pagina > * + * { margin-top: var(--ruimte-5); }
.luw-sectie--inhoud { padding-top: 0; }
.luw-sectie--afsluiting { border-top: var(--lijndikte) solid var(--lijn); }

/* Lopende tekst */
.luw-tekst > * { margin: 0; }
.luw-tekst > * + * { margin-top: var(--ruimte-5); }
.luw-tekst > h2 { margin-top: var(--ruimte-7); }
.luw-tekst > h2 + * { margin-top: var(--ruimte-4); }
.luw-tekst > h3 { margin-top: var(--ruimte-6); }
.luw-tekst > :first-child { margin-top: 0; }
.luw-tekst p, .luw-tekst ul, .luw-tekst ol { max-width: var(--tekstbreedte); }
.luw-tekst ul, .luw-tekst ol { padding-left: var(--ruimte-5); }
.luw-tekst li + li { margin-top: var(--ruimte-2); }
.luw-tekst .luw-verdieping { margin-top: var(--ruimte-4); }
.luw-tekst .luw-verdieping + .luw-verdieping { margin-top: var(--ruimte-3); }
.luw-tekst .luw-citaat { margin-top: var(--ruimte-7); }
.luw-citaat blockquote p { margin: 0; }
.luw-meta { color: var(--inkt-zacht); margin: 0; }
.luw-pagina h1, .luw-pagina h2, .luw-pagina h3 { text-wrap: balance; }

/* Homepage */
.luw-hero { display: grid; gap: var(--ruimte-7); align-items: end; }
.luw-hero__tekst > * + * { margin-top: var(--ruimte-5); }
.luw-zon { width: 100%; max-width: 360px; aspect-ratio: 2 / 1; background: var(--zon); border-radius: 999px 999px 0 0; justify-self: start; }
@media (min-width: 768px) {
  .luw-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: var(--ruimte-8); }
  .luw-hero--home { padding-top: var(--ruimte-8); }
  .luw-zon { justify-self: end; }
}
@media (min-width: 768px) and (max-width: 1119px) {
  .luw-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 260px); gap: var(--ruimte-6); }
}
.luw-blokken { display: grid; gap: var(--ruimte-5); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.luw-blok { background: var(--grond-verhoogd); border: var(--lijndikte) solid var(--lijn); border-radius: var(--rond-m); padding: var(--ruimte-6); display: grid; gap: var(--ruimte-4); align-content: start; }
.luw-blok p { margin: 0; }
.luw-blok .luw-knop { justify-self: start; }

/* Verhalen */
.luw-verhalen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ruimte-6); max-width: var(--tekstbreedte); }
.luw-verhalen li { display: grid; gap: var(--ruimte-2); padding-top: var(--ruimte-5); border-top: var(--lijndikte) solid var(--lijn); }
.luw-verhalen p { margin: 0; }
.luw-verhalen h2 a { color: var(--inkt); text-decoration-color: var(--lijn-sterk); }

/* Formulieren en meldingen */
.luw-formulier { display: grid; gap: var(--ruimte-5); max-width: 32rem; }
.luw-formulier .luw-knop { justify-self: start; }
.luw-val { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.luw-melding + * { margin-top: var(--ruimte-5); }

/* Voet */
.luw-voet { background: var(--dauw); padding-block: var(--ruimte-8); }
.luw-voet__rooster { display: grid; gap: var(--ruimte-6); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.luw-voet p { margin: 0; }
.luw-voet__kop { margin-bottom: var(--ruimte-2) !important; }

/* Rijen met knoppen */
.luw-rij { display: flex; flex-wrap: wrap; gap: var(--ruimte-4); align-items: center; }

.luw-na-knop { margin: var(--ruimte-4) 0 0; }

/* Afspraken kiezen */
.luw-dag { margin-top: var(--ruimte-6); }
.luw-dag + .luw-dag { margin-top: var(--ruimte-5); }
.luw-dag h2 { margin-bottom: var(--ruimte-3); }
.luw-tijden { display: flex; flex-wrap: wrap; gap: var(--ruimte-3); }
.luw-tijdenlijst > * + * { margin-top: var(--ruimte-5); }
.luw-keuze { display: flex; align-items: flex-start; gap: var(--ruimte-3); min-height: var(--raakvlak); cursor: pointer; }
.luw-keuze input { flex: none; width: 24px; height: 24px; margin: 12px 0 0; accent-color: var(--lucht); }
.luw-keuze span { padding-block: var(--ruimte-3); }
.luw-keuze input:focus-visible { outline: none; box-shadow: 0 0 0 var(--focusdikte) var(--grond), 0 0 0 calc(var(--focusdikte) * 2) var(--focus); }

/* Beheer: lijsten, tabellen, notities */
.luw-lijst { list-style: none; margin: 0; padding: 0; max-width: var(--tekstbreedte); }
.luw-lijstrij { display: grid; grid-template-columns: minmax(6.5rem, max-content) 1fr; gap: var(--ruimte-4); padding: var(--ruimte-3) 0; border-top: var(--lijndikte) solid var(--lijn); align-items: baseline; }
.luw-lijstrij:last-child { border-bottom: var(--lijndikte) solid var(--lijn); }
.luw-inline { display: inline; margin-left: var(--ruimte-3); }
.luw-tabelkader { overflow-x: auto; }
.luw-tabel { width: 100%; max-width: var(--paginabreedte); border-collapse: collapse; }
.luw-tabel th, .luw-tabel td { text-align: left; padding: var(--ruimte-3) var(--ruimte-4) var(--ruimte-3) 0; border-bottom: var(--lijndikte) solid var(--lijn); vertical-align: top; }
.luw-tabel th { font-size: 16px; line-height: 22px; font-weight: 600; }
.luw-notitie { padding-top: var(--ruimte-5); border-top: var(--lijndikte) solid var(--lijn); display: grid; gap: var(--ruimte-3); max-width: var(--tekstbreedte); }
.luw-notitie > * { margin: 0; }
.luw-notitie .luw-verdieping { margin-top: var(--ruimte-2); }

/* Lijsten zonder opsommingsinspringing; tekstknoppen op de linkerrand uitlijnen. */
.luw-tekst ul.luw-lijst, .luw-tekst ul.luw-verhalen { padding-left: 0; }
/* Tekstknoppen in een rij zonder zijwaartse binnenruimte, zodat ze ook na het afbreken op de linkerrand staan. */
.luw-rij > .luw-knop--tekst { padding-inline: 0; }

.luw-url { overflow-wrap: anywhere; font-size: 15px; line-height: 24px; padding: var(--ruimte-3) var(--ruimte-4); background: var(--dauw); border-radius: var(--rond-s); max-width: var(--tekstbreedte); }

/* Zonder menu staat de licht/donker-schakelaar op elk scherm rechts in de kop. */
.luw-kop__rechts--altijd { display: flex; margin-left: auto; }

.luw-code { font-size: 24px; line-height: 32px; letter-spacing: 0.2em; max-width: 12rem; }