/* =============================================================================
   Nachtburgemeester Oldenzaal — responsieve laag
   -----------------------------------------------------------------------------
   Alle pagina's komen uit de Claude Design canvas-runtime (support.js): die zet
   de volledige opmaak INLINE op ieder element. Een inline style wint van elke
   normale CSS-regel, dus overrides hier hebben !important nodig en de ladder
   loopt van breed naar smal (max-width). De inline stijl IS met andere woorden
   de desktoplaag, en die blijft ongemoeid.

   Vloeiend waar het kan, breekpunt waar het moet:
   de maatvoering (padding, gap, min-height) is in de HTML zelf al omgezet naar
   clamp() die zijn maximum bereikt op 1100px. Alles boven 1100px is daardoor
   identiek aan het oorspronkelijke ontwerp; daaronder schaalt het continu mee.
   Dit bestand doet alleen wat clamp() niet kan: van kolommen naar stapels, de
   navigatie omklappen, en de onderdelen die op telefoonmaat een eigen vorm
   verdienen.

   Ladder
     > 1100px   ongewijzigd — het desktopontwerp
     <= 1100px  navigatie krijgt lucht (logo en links iets kleiner)
     <=  920px  navigatie klapt om naar het volledige-schermmenu + sticky gedrag
     <=  860px  twee-koloms secties stapelen, beeld altijd boven de tekst
     <=  640px  telefoonmaat: typografie, kaarten, agendarijen, footer
     <=  400px  kleine telefoon
   ============================================================================ */

:root {
  --nb-accent: #F2B90D;
  --nb-navy: #10233F;
  --nb-line: rgba(255, 255, 255, 0.14);

  /* zelfde waarde als de horizontale sectie-padding in de HTML */
  --nb-gutter: clamp(20px, 2.91vw, 32px);

  /* Door scroll-reveal.js gemeten en gezet zodra de balk vast komt te staan:
     --nb-navsh = hoogte van de vaste balk, --nb-heroh = hoogte die de hero had
     op het moment van vastzetten. */
}

/* Voorkomt dat iOS in liggende stand de tekst opblaast. */
html {
  -webkit-text-size-adjust: 100%;
}

/* Zichtbare focus voor toetsenbordgebruik — de inline stijlen zetten
   `outline: none` op de formuliervelden. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--nb-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* =============================================================================
   1. Volledige-schermmenu (telefoon en tablet)
   Stond eerder als string in scroll-reveal.js; hier is het gewoon CSS, dus het
   staat er al vóór de eerste paint in plaats van erna.
   ============================================================================ */

nav[data-mainnav] details[data-mobilemenu] svg[data-close] { display: none; }
nav[data-mainnav] details[data-mobilemenu][open] svg[data-ham] { display: none; }
nav[data-mainnav] details[data-mobilemenu][open] svg[data-close] { display: block; }

nav[data-mainnav] details[data-mobilemenu][open] > summary {
  position: fixed;
  top: max(18px, env(safe-area-inset-top, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  z-index: 1210;
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.28);
}

nav[data-mainnav] details[data-mobilemenu][open] > div[data-menupanel] {
  position: fixed;
  inset: 0;
  z-index: 1200;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center; /* houdt de bovenkant bereikbaar als het toch niet past */
  align-items: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(64px + env(safe-area-inset-top, 0px))
           max(26px, env(safe-area-inset-right, 0px))
           calc(28px + env(safe-area-inset-bottom, 0px))
           max(26px, env(safe-area-inset-left, 0px));
  background: radial-gradient(125% 85% at 82% -5%, #1A3765 0%, #0A1830 58%, #060F20 100%);
  animation: nb-menu-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

[data-menupanel] > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 420px;
  min-height: 48px; /* tikdoel */
  text-align: center;
  color: #FFFFFF;
  font-family: 'Bricolage Grotesque', 'Archivo', sans-serif;
  font-size: min(7.2vw, 3.2vh, 34px);
  font-size: clamp(17px, min(7.2vw, 3.2dvh), 34px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  padding: min(1.7vh, 15px) 4px;
  padding: min(1.7dvh, 15px) 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  animation: nb-menu-item 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
[data-menupanel] > a:active { color: var(--nb-accent); }

[data-menupanel] > a[data-mmcta] {
  width: auto;
  min-width: 240px;
  margin: min(3.4vh, 28px) auto 0;
  margin: min(3.4dvh, 28px) auto 0;
  border-bottom: none;
  background: var(--nb-accent);
  color: var(--nb-navy);
  font-size: min(4.6vw, 2.3vh, 18px);
  font-size: clamp(15px, min(4.6vw, 2.3dvh), 18px);
  font-weight: 700;
  letter-spacing: 0;
  padding: min(2vh, 16px) 36px;
  padding: min(2dvh, 16px) 36px;
  border-radius: 3px;
  animation-delay: 0.38s;
}

[data-menupanel] > img[data-mmlogo] {
  align-self: center;
  flex: 0 1 auto;
  min-height: 0;
  height: min(30vh, 260px);
  height: min(30dvh, 260px);
  width: auto;
  max-width: 76vw;
  object-fit: contain;
  margin: 0 auto min(3vh, 24px);
  margin: 0 auto min(3dvh, 24px);
  filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.5));
  animation: nb-menu-item 0.55s both;
}

[data-menupanel] > a:nth-of-type(1) { animation-delay: 0.095s; }
[data-menupanel] > a:nth-of-type(2) { animation-delay: 0.140s; }
[data-menupanel] > a:nth-of-type(3) { animation-delay: 0.185s; }
[data-menupanel] > a:nth-of-type(4) { animation-delay: 0.230s; }
[data-menupanel] > a:nth-of-type(5) { animation-delay: 0.275s; }
[data-menupanel] > a:nth-of-type(6) { animation-delay: 0.320s; }
[data-menupanel] > a:nth-of-type(7) { animation-delay: 0.365s; }

/* Zes menu-items plus knop plus logo passen niet zomaar op een scherm van
   568px hoog: het logo is het enige dat mag krimpen en verschrompelde daardoor
   tot een streepje. Op kortere schermen wordt de hele lijst compacter, en onder
   de 560px vervalt het logo helemaal in plaats van half. */
@media (max-height: 780px) {
  [data-menupanel] > a {
    min-height: 44px;
    font-size: clamp(16px, min(6.4vw, 2.9vh), 26px);
    font-size: clamp(16px, min(6.4vw, 2.9dvh), 26px);
    padding-top: 6px;
    padding-bottom: 6px;
  }
  [data-menupanel] > a[data-mmcta] {
    margin-top: 18px;
    padding-top: 13px;
    padding-bottom: 13px;
  }
  [data-menupanel] > img[data-mmlogo] {
    height: min(17vh, 130px);
    height: min(17dvh, 130px);
    margin-bottom: 14px;
  }
}
@media (max-height: 620px) {
  [data-menupanel] > a {
    min-height: 40px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  [data-menupanel] > a[data-mmcta] { margin-top: 14px; }
  [data-menupanel] > img[data-mmlogo] {
    height: min(13vh, 88px);
    height: min(13dvh, 88px);
    margin-bottom: 10px;
  }
}
@media (max-height: 520px) {
  [data-menupanel] > img[data-mmlogo] { display: none; }
}

@keyframes nb-menu-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes nb-menu-item {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* Liggende telefoon: onder één kolom past de lijst nooit binnen ~390px hoogte,
   dus gaan de links in twee kolommen en vervalt het logo. Dan staat alles in
   beeld zonder te scrollen. Dit blok staat bewust ná de max-height-blokken
   hierboven, zodat het die overschrijft. */
@media (max-height: 470px) and (orientation: landscape) {
  /* zelfde selector-specificiteit als de basisregel hierboven, anders wint
     `flex-direction: column` daarvan */
  nav[data-mainnav] details[data-mobilemenu][open] > div[data-menupanel] {
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 4px 18px;
    padding-top: calc(18px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }
  [data-menupanel] > img[data-mmlogo] { display: none; }
  [data-menupanel] > a {
    width: calc(50% - 9px);
    max-width: 270px;
    min-height: 42px;
    font-size: 18px;
    padding: 5px 4px;
    margin: 0;
  }
  [data-menupanel] > a[data-mmcta] {
    flex: 0 0 100%;
    width: auto;
    min-width: 220px;
    max-width: 280px;
    font-size: 16px;
    padding: 12px 28px;
    margin: 10px auto 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-menupanel],
  [data-menupanel] > * { animation: none !important; }
}

/* =============================================================================
   2. <= 1100px — navigatie krijgt lucht
   De balk heeft van nature ~870px nodig (logo 104 + links 670 + gaps). Precies
   op dat punt omklappen geeft een geknelde balk, dus schalen we hier eerst het
   logo en de tussenruimte terug en klappen we pas op 920px om.
   ============================================================================ */

@media (max-width: 1100px) {
  nav[data-mainnav] {
    gap: 20px !important;
    padding-left: max(var(--nb-gutter), env(safe-area-inset-left, 0px)) !important;
    padding-right: max(var(--nb-gutter), env(safe-area-inset-right, 0px)) !important;
  }
  nav[data-mainnav] > a > img { height: 88px !important; }
  nav[data-mainnav] > div { gap: 22px !important; }
  nav[data-mainnav] > div > a { font-size: 14.5px !important; }
  nav[data-mainnav] > div > a:last-child { padding: 9px 18px !important; }
}

/* =============================================================================
   3. <= 920px — hamburger + meescrollende balk
   De balk wordt vast zodra je voorbij de hero bent, verdwijnt bij naar beneden
   scrollen en komt terug zodra je omhoog scrollt. De verschuiving gaat via
   `top` en niet via `transform`: een transform op de <nav> zou een containing
   block maken en daarmee het position:fixed volledige-schermmenu erbinnen
   opsluiten.
   ============================================================================ */

@media (max-width: 920px) {
  nav[data-mainnav] > div { display: none !important; }
  nav[data-mainnav] details[data-mobilemenu] { display: block !important; }

  nav[data-mainnav] {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding-top: max(14px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 14px !important;
  }
  nav[data-mainnav] > a > img { height: 72px !important; }
  nav[data-mainnav] details[data-mobilemenu] > summary {
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 auto;
  }

  /* De hero houdt de hoogte die hij had op het moment dat de balk uit de flow
     ging (scroll-reveal.js meet en zet --nb-heroh), zodat de pagina niet
     verspringt bij het vastzetten. */
  html[data-navmode] section:has(> nav[data-mainnav]) {
    min-height: var(--nb-heroh, 700px) !important;
  }
  /* De inline stijl zet `position: relative` op de balk, dus positie, top en
     z-index moeten hier !important zijn om te winnen. */
  html[data-navmode] nav[data-mainnav] {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1150 !important;
    max-width: none !important;
    background: rgba(10, 24, 48, 0.96);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: top 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  html[data-navmode] nav[data-mainnav] > a > img { height: 56px !important; }
  html[data-navmode="hidden"] nav[data-mainnav] {
    top: calc(-1 * var(--nb-navsh, 90px) - 14px) !important;
  }
  html[data-navmode="shown"] nav[data-mainnav] { top: 0 !important; }

  /* menu open: de balk is altijd zichtbaar, ongeacht de scrollrichting */
  html[data-navmode] nav[data-mainnav]:has(details[data-mobilemenu][open]) {
    top: 0 !important;
  }

  /* Sprongdoelen (zoals #aanmelden) en formuliervelden houden ruimte vrij voor
     de vaste balk, anders landt de kop erachter. */
  [id] { scroll-margin-top: calc(var(--nb-navsh, 90px) + 14px); }

  @media (prefers-reduced-motion: reduce) {
    html[data-navmode] nav[data-mainnav] { transition: none; }
  }
}

/* =============================================================================
   4. <= 920px — hero
   `min-height: 780px` uit het ontwerp is op een telefoon hoger dan het scherm.
   svh rekent met de kleinste zichtbare hoogte, zodat de knoppen niet achter de
   browserbalk verdwijnen; vh blijft als terugval staan.
   ============================================================================ */

@media (max-width: 920px) {
  section:has(> nav[data-mainnav]) {
    min-height: min(700px, 96vh) !important;
    min-height: min(700px, 96svh) !important;
    border-radius: 0 0 50% 50% / 0 0 58px 58px !important;
  }
  section:has(> nav[data-mainnav]) > div:last-of-type {
    padding-left: max(var(--nb-gutter), env(safe-area-inset-left, 0px)) !important;
    padding-right: max(var(--nb-gutter), env(safe-area-inset-right, 0px)) !important;
  }
}

/* =============================================================================
   5. <= 860px — stapelen
   ============================================================================ */

@media (max-width: 860px) {
  /* De hero valt hier bewust buiten: die heeft zelf geen zijpadding — zijn
     navigatie en tekstblok zorgen daar al voor. Anders staat alles dubbel
     ingesprongen. */
  section[data-screen-label]:not(:has(> nav[data-mainnav])),
  footer[data-screen-label] {
    padding-left: max(var(--nb-gutter), env(safe-area-inset-left, 0px)) !important;
    padding-right: max(var(--nb-gutter), env(safe-area-inset-right, 0px)) !important;
  }

  [data-stack] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-stack] > * { min-width: 0; max-width: 100%; }

  /* Kaartrasters herschikken intrinsiek in plaats van hard te stapelen:
     drie of vier kolommen worden er twee en pas daarna één. */
  [data-stack][data-cards] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
  }

  /* Twee formuliervelden naast elkaar blijft prima tot echte telefoonmaat. */
  [data-stack][data-fields] { grid-template-columns: 1fr 1fr !important; }

  /* Beeld hoort boven de tekst zodra een verhaalrij stapelt. Zonder dit belandt
     bij de om-en-om opgemaakte rijen de foto ónder het bijbehorende verhaal en
     leest hij als illustratie bij het volgende. */
  [data-storyrow] > div:has(> img) { order: -1 !important; }

  /* De overlappende beelden houden hun overlap alleen als ze bovenaan staan;
     staan ze onder de tekst, dan zouden ze eroverheen schuiven. */
  [data-noverlap]:first-child { margin-top: max(-110px, -9vw) !important; }
  [data-stack] > [data-noverlap]:not(:first-child) { margin-top: 0 !important; }

  /* Kolomtekst die op desktop naast een beeld is uitgelijnd, hoeft gestapeld
     geen inspringing meer. */
  section[data-screen-label="Peter Seiger"] [data-stack] > div:last-child,
  section[data-screen-label="Over ons"] [data-stack] > div:last-child {
    padding-top: 0 !important;
    min-height: 0 !important;
  }

  /* Beeldpanelen met een vaste desktophoogte krijgen een verhouding. */
  section[data-screen-label="Ons cultuurhart"] [data-stack] > img,
  section[data-screen-label="Vorig jaar"] [data-stack] > div:first-child {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 3 / 2 !important;
  }

  [data-cgrid] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-card] > div { flex-wrap: wrap; }

  /* Uitklapbare categorieën: royaler tikdoel. Het hamburgermenu is óók een
     <details> en moet hier buiten blijven. */
  section[data-screen-label] details:not([data-mobilemenu]) > summary { min-height: 56px; }

  /* De beeldstrook loopt door tot de schermrand — dat leest als "er is meer". */
  [data-track] {
    margin-left: calc(-1 * var(--nb-gutter)) !important;
    margin-right: calc(-1 * var(--nb-gutter)) !important;
    padding-left: var(--nb-gutter) !important;
    padding-right: var(--nb-gutter) !important;
    scroll-padding-left: var(--nb-gutter);
    gap: 14px !important;
  }
  [data-track] > img {
    width: min(76vw, 320px) !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    margin-top: 0 !important; /* de versprongen opmaak werkt alleen naast elkaar */
    border-radius: 10px !important;
  }
}

/* Op een aanraakscherm schuif je de strook met je duim; de pijlknoppen zijn
   dan alleen ruis. */
@media (max-width: 860px) and (pointer: coarse) {
  section:has([data-track]) button { display: none !important; }
}

/* =============================================================================
   6. <= 640px — telefoonmaat
   ============================================================================ */

@media (max-width: 640px) {

  /* --- typografie ------------------------------------------------------- */
  h1 {
    width: auto !important;
    max-width: 100% !important;
    font-size: clamp(31px, 8.6vw, 44px) !important;
    line-height: 1.06 !important;
    /* `balance` verdeelt de regellengtes gelijk en kiest daardoor het vroegste
       zachte afbreekpunt: "De Nacht-/burgermeester." in plaats van
       "De Nachtburger-/meester.". `pretty` houdt het gulzige afbreken aan en
       voorkomt alleen losse woorden op de laatste regel. */
    text-wrap: pretty;
    hyphens: manual;
  }
  section h2 {
    font-size: clamp(25px, 6.6vw, 33px) !important;
    line-height: 1.14 !important;
    text-wrap: balance;
  }
  section h3 { font-size: 18px !important; line-height: 1.25 !important; }
  section p,
  footer p { font-size: 16.5px !important; line-height: 1.62 !important; }
  section:has(> nav[data-mainnav]) p { font-size: 17px !important; line-height: 1.58 !important; }
  blockquote { font-size: clamp(21px, 5.6vw, 27px) !important; line-height: 1.24 !important; }

  /* Het e-mailadres is feitelijk één lang woord van 34 tekens. De maat schaalt
     mee met de schermbreedte zodat het van 320px tot 640px op één regel blijft
     staan; anders breekt het midden in "nachtburgemeester". */
  a[href^="mailto:"] { overflow-wrap: anywhere; }
  section[data-screen-label] a[href^="mailto:"] {
    font-size: clamp(12px, 3.95vw, 19px) !important;
    letter-spacing: -0.01em !important;
  }

  /* --- knoppen ---------------------------------------------------------- */
  /* Volle breedte leest rustiger dan twee half-passende knoppen naast elkaar. */
  section:has(> nav[data-mainnav]) > div:last-of-type > div > div:last-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  section:has(> nav[data-mainnav]) > div:last-of-type > div > div:last-child > a {
    text-align: center;
    padding: 16px 24px !important;
  }

  /* --- donkere actiekaarten --------------------------------------------- */
  [data-card] { border-radius: 16px !important; }
  [data-card] > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }
  [data-card] > div:first-child > img {
    width: 76px !important;
    height: 76px !important;
  }
  [data-card] > a,
  [data-card] > div:last-child > a {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }

  /* --- agenda- en lesrijen ---------------------------------------------- */
  /* Het datumblok wordt smaller en de → vervalt: de hele rij is al tikbaar.
     Dat levert de titel ~90px extra breedte op. */
  [data-agrow] {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    /* smalle rijruimte: het pijltje staat op een eigen rij en mag niet los
       van zijn tekst komen te hangen */
    column-gap: 14px !important;
    row-gap: 4px !important;
    align-items: start !important;
    padding: 18px 12px !important;
  }
  /* De hele rij is tikbaar, dus op de homepage vervalt het pijltje. */
  [data-agrow] > span:last-child { display: none !important; }
  [data-agrow] > div:first-child { padding: 7px 0 !important; align-self: start; }
  [data-agrow] > div:first-child > span:first-child { font-size: 20px !important; }
  [data-agrow] > div:first-child > span:last-child { font-size: 11.5px !important; }
  [data-agrow] h3 { font-size: 17px !important; }
  [data-agrow] span { font-size: 14.5px !important; }

  /* Op de evenementenpagina blijft het pijltje wél staan, maar dan ónder de
     rij in plaats van in een eigen kolom ernaast — dat scheelt de titel ~35px
     breedte en houdt de "ga verder"-hint zichtbaar. */
  [data-agendapagina] [data-agrow] > span:last-child {
    display: block !important;
    grid-column: 2;
    justify-self: end;
    margin-top: 2px;
    font-size: 20px !important;
    line-height: 1;
  }

  /* "Uitgelicht" hoort bóven de titel, niet ernaast: naast de titel knijpt het
     de kop op een telefoon tot twee of drie regels. Alleen de rij mét badge —
     vandaar de expliciete markering en niet :has(> h3 + span): dat raakt ook
     de gewone rijen, waar titel en ondertitel dan omdraaien. */
  [data-agrow] [data-badgerij] {
    flex-direction: column-reverse !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  [data-agrow] [data-badgerij] > span { font-size: 11.5px !important; }

  /* De onderrand hoort bij de laatste rij, niet bij de laatste van kolom 1. */
  section[data-screen-label="De avonden"] [data-stack] > [data-agrow] {
    border-bottom: 0 !important;
  }
  section[data-screen-label="De avonden"] [data-stack] > [data-agrow]:last-child {
    border-bottom: 1px solid var(--nb-line) !important;
  }

  /* --- formulier -------------------------------------------------------- */
  [data-stack][data-fields] { grid-template-columns: minmax(0, 1fr) !important; }
  input, textarea, select { font-size: max(16px, 1rem) !important; } /* geen iOS-zoom */
  button[type="submit"],
  form button { width: 100%; }

  /* --- uitklappers ------------------------------------------------------ */
  section[data-screen-label] details:not([data-mobilemenu]) > summary {
    padding: 20px 18px !important;
  }
  [data-cgrid] { padding-left: 14px !important; padding-right: 14px !important; }

  /* --- losse details ---------------------------------------------------- */
  /* Streepje + naam: uitlijnen op de eerste regel, niet op het midden van een
     naam die naar twee regels loopt. */
  blockquote + div { align-items: flex-start !important; }
  blockquote + div > span:first-child { margin-top: 10px; }

  /* --- verhaalpagina's -------------------------------------------------- */
  /* De witte kaart schuift 80px over de kop heen. Op een telefoon is de kop
     veel korter, waardoor de datum tot op 4px tegen de kaart aan kwam te
     staan. Minder overlap: de datum krijgt lucht, het effect blijft. */
  [data-story] { margin-top: -40px !important; }

  /* --- footer ----------------------------------------------------------- */
  /* Alles gecentreerd op telefoon. */
  footer[data-screen-label] { text-align: center; }
  footer[data-screen-label] [data-stack] > div { align-items: center !important; }
  footer[data-screen-label] p { max-width: 34ch; margin-inline: auto !important; }

  footer[data-screen-label] img[data-footer-logo] {
    height: clamp(112px, 31vw, 170px) !important;
    margin-top: 0 !important;
  }
  footer[data-screen-label] > div > a:first-child {
    margin-top: calc(-0.5 * clamp(112px, 31vw, 170px)) !important;
  }
  footer[data-screen-label] [data-stack] > div:first-child { display: contents !important; }
  /* De twee uitklappers horen als één lijstje te lezen, dus dicht op elkaar
     met een scheidingslijntje ertussen in plaats van de ontwerpruimte. */
  footer[data-screen-label] [data-stack] { gap: 0 !important; }
  footer[data-screen-label] [data-stack] > p { margin-bottom: 10px !important; }
  footer[data-screen-label] [data-vouw] {
    border-top: 1px solid rgba(255, 255, 255, 0.10);
  }
  footer[data-screen-label] [data-vouw]:last-of-type {
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  }
  footer[data-screen-label] [data-vouw][data-open] { padding-bottom: 12px; }
  footer[data-screen-label] [data-socials] {
    order: 10 !important;
    justify-content: center !important;
    margin-top: 22px !important;
  }
  footer[data-screen-label] > div > div:last-child {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
  }
  /* Ruimere tikdoelen in de footerlijsten. De rijhoogte komt nu van de links
     zelf, dus de kolomruimte gaat eruit — anders staan de links 54px uit
     elkaar en valt de lijst uit elkaar. */
  footer[data-screen-label] [data-stack] > div { gap: 2px !important; }
  footer[data-screen-label] [data-stack] > div > :first-child { margin-bottom: 6px; }
  footer[data-screen-label] [data-stack] > div > a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
  }

  /* De linklijsten worden uitklappers: ingeklapt scheelt dat een half scherm
     scrollen voordat je bij het slot van de pagina bent. scroll-reveal.js zet
     data-vouw alleen op telefoonmaat; daarbuiten staat alles gewoon open. */
  footer[data-screen-label] [data-vouw] > :first-child {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    margin: 0 auto !important;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
  }
  footer[data-screen-label] [data-vouw] > :first-child::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 0.7;
  }
  footer[data-screen-label] [data-vouw][data-open] > :first-child::after {
    transform: translateY(1px) rotate(-135deg);
  }
  footer[data-screen-label] [data-vouw] > :not(:first-child) { display: none !important; }
  footer[data-screen-label] [data-vouw][data-open] > :not(:first-child) { display: flex !important; }
  footer[data-screen-label] [data-vouw][data-open] > span:not(:first-child) {
    justify-content: center;
    min-height: 34px;
  }

  @media (prefers-reduced-motion: reduce) {
    footer[data-screen-label] [data-vouw] > :first-child::after { transition: none; }
  }
  footer[data-screen-label] [data-socials] > a { min-height: 44px; }
  footer[data-screen-label] {
    padding-bottom: calc(clamp(28px, 3.64vw, 40px) + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* --- pop-up ----------------------------------------------------------- */
  /* Midden in beeld in plaats van tegen de onderrand geplakt. */
  [data-modal] { padding: 16px !important; align-items: center !important; }
  [data-modalcard] {
    max-height: 84vh !important;
    max-height: 84dvh !important;
    border-radius: 16px !important;
  }
  [data-modalcard] h3 { font-size: 22px !important; }
  [data-modalcard] > button {
    top: 12px !important;
    right: 12px !important;
    width: 44px !important;
    height: 44px !important;
  }
  [data-modalcard] > div:last-child > a { width: 100%; text-align: center; box-sizing: border-box; }
}

/* =============================================================================
   7. <= 380px — kleine telefoon (iPhone SE, oudere Android)
   ============================================================================ */

@media (max-width: 380px) {
  nav[data-mainnav] > a > img { height: 64px !important; }
  html[data-navmode] nav[data-mainnav] > a > img { height: 48px !important; }
  section h2 { font-size: clamp(23px, 6.8vw, 27px) !important; }
  [data-agrow] { grid-template-columns: 50px minmax(0, 1fr) !important; padding-inline: 6px !important; }
  [data-agrow] > div:first-child > span:first-child { font-size: 18px !important; }
  [data-card] > div:first-child > img { width: 64px !important; height: 64px !important; }
}