/* ==========================================================
   EXCEPTIONS — afwijkingen op smalle schermen
   ========================================================== */
/* Naast de matrix/roadmap heeft het bord de ruimte harder nodig dan de lade: die levert
   hier 60px in. De lade zelf is altijd precies --lade breed (de minmax-ondergrens van 260px
   in compositions.css komt nooit aan bod: de bordkolom is minmax(0, 1fr) en geeft alle
   ruimte weg), dus dit token ís de breedte. --matrix-aftrek rekent met --lade, dus de matrix
   wordt vanzelf net zoveel breder. Zelfde grens als waar de kop begint uit te dunnen. */
@media (max-width: 1239px) {
  :root { --lade: 320px; }
}
/* Verzamel is de enige weergave met twéé knoppen in de kop (Opties naast Exporteren) en
   loopt daardoor als eerste klem tegen de tabbalk. Vanaf hier dus alleen het icoon voor
   Opties; Exporteren houdt zijn label nog even (zie hieronder). De knop houdt zijn naam
   via aria-label — zie index.html. */
@media (max-width: 1259px) {
  #opties-menu summary .knop-label { display: none; }
  #opties-menu summary { padding: 11px 12px; }
}

/* Hier wordt de kop echt te krap: de H1 uit beeld, en ook Exporteren nog maar als icoon.
   De H1 zat klem tussen het merk en de tabbalk (samen één 1fr-kolom) en werd tot een paar
   pixels smal geperst — de tekst liep dan over de tabs heen. Uit beeld, maar níét uit de
   toegankelijkheidsboom (zelfde truc als .sr-only in utilities.css): de pagina houdt zo
   zijn kop, en welke stap actief is zegt de tabbalk toch al.
   Alleen de titels van de tool (data-kop, drie stuks, zie index.html); op over.html en
   changelog.html is de H1 de kop van de pagina zelf en blijft die gewoon staan. Het hele
   blok eromheen gaat mee: anders blijft er een lege regel (mobiel) of een gat naast het
   merk (breder) achter. */
@media (max-width: 1239px) {
  .kop-titels:has(.view-titel[data-kop]) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* De subtitel lijnde uit op de H1 (vandaar de inspringing ter grootte van de merk-kolom);
     die is hier weg, dus lijnt hij nu uit op de tabbalk: in kolom 2 beginnen i.p.v. in
     kolom 1 met een inspringing. Doorlopen tot de rechterrand (2 / -1) houdt de regel breed
     én zorgt dat de subtitel kolom 2 niet oprekt: een item dat óók over een flexibele
     (1fr-)kolom loopt, telt niet mee voor de breedte van de auto-kolom eronder — anders zou
     de tabbalk zo breed worden als deze zin. */
  .kop-subs { grid-column: 2 / -1; padding-left: 0; }
  .kop-acties .export summary .knop-label { display: none; }
  .kop-acties .export summary { padding: 11px 12px; }
  /* Zonder label zegt het menu zelf waar het over gaat. */
  .kop-acties .export-menu-kop { display: block; }
}

@media (max-width: 860px) {
  header, main, footer { padding-left: 20px; padding-right: 20px; }

  /* Waarschuwingsbalk bovenaan: roadmappin.net is voor grote schermen, niet voor mobiel. */
  .mobiel-balk { display: block; }

  /* De kop wordt een stapel: het (kleine, liggende) merk met de export-knop op dezelfde
     regel, daaronder de tabbalk, dan de H1 en de subtitel. */
  header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
  /* .kop-merk-titel lost op in losse flex-items (merk + H1), zodat merk en H1 apart
     geordend kunnen worden: merk bovenaan, H1 lager. */
  .kop-merk-titel { display: contents; }
  /* Oude logo-opzet: kleine bloem naast het wordmark (i.p.v. groot met wordmark eronder),
     gecentreerd op de kopregel. margin: 0 auto en niet justify-content op de kop: het merk
     is zelf de link, dus die moet om het logo heen blijven zitten en niet de hele regel
     beslaan. Het merk staat alleen op die regel (de knoppenrij ernaast is absoluut, zie
     .kop-acties hieronder), dus auto-marges zetten het precies in het midden van de pagina.
     min-height: de regel moet de (hogere) Exporteren-knop ernaast kunnen herbergen. */
  header { position: relative; }
  .merk { order: 1; flex-direction: row; align-items: center; gap: 6px; width: auto; min-width: 0; margin: 0 auto; min-height: 40px; }
  .merk img { width: 30px; height: 30px; }
  .merk .wm { font-size: 19px; }
  /* De verticale verschuiving van de tool-kop (bloem-bovenkant op H1) hoort hier niet. */
  .kop-merk-titel .merk { transform: none; }
  /* Export-knop op dezelfde hoogte als het logo, rechts ernaast — absoluut, zodat hij geen
     ruimte op de regel inneemt en het merk dus écht in het midden van de pagina staat (en
     niet in het midden van wat er naast de knop overblijft). top/right = de padding van de
     kop; die staat hierboven. Opties verbergen. */
  .kop-acties { position: absolute; top: 26px; right: 20px; margin: 0; justify-content: flex-end; }
  #opties-menu { display: none; }
  /* Tabbalk boven de H1, over de volle breedte; schuift horizontaal als hij niet past
     (min-width:0 + overflow houdt de scroll binnen de kolom i.p.v. de hele pagina). */
  header nav { order: 3; flex: 0 0 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  header nav::-webkit-scrollbar { display: none; }
  header [role="tablist"] { flex-wrap: nowrap; padding-bottom: 2px; }
  header [role="tab"] { white-space: nowrap; }
  /* H1 onder de tabbalk, subtitel daaronder. In de tool is de H1 hier weggeklapt (zie de
     @media hierboven) en blijft alleen de subtitel over; op over.html en changelog.html
     staat de H1 er nog gewoon — deze twee regels zijn dus vooral voor die pagina's. */
  .kop-titels { order: 4; flex: 0 0 100%; }
  .view-titel { font-size: 32px; }
  .kop-subs { order: 5; flex: 0 0 100%; padding-left: 0; }
  #paneel-wensen { margin-left: 0; }

  /* Collect: het beschrijvingsveld verbergen op mobiel (alleen de titel invoeren). */
  #invoer-wensen-beschr { display: none; }
  .toevoegen { grid-template-columns: 1fr; }
  .toevoegen.met-thema { grid-template-columns: 1fr; }
  /* Thema's indelen is werk voor een groot scherm: op mobiel gaat de hele thema-kant van
     Verzamel weg — de kiezer in het formulier, de link naar het themabeheer én de
     Thema-kolom in de lijst. Die kolom verbergt meteen de kiezer tijdens het bewerken: die
     vervangt de inhoud van de cel (zie bewerkWens() in wensenlijst.js) en zit dus in
     dezelfde kolom.
     .invoer-thema en niet #invoer-wensen-thema: een id zou .thema-keuze[hidden] overrulen
     en de kiezer tonen wanneer thema's uit staan — zie blocks.css. */
  .invoer-thema { display: none; }
  .beheer-themas-link { display: none; }
  .wenstabel th.k-thema,
  .wenstabel td.thema-kolom { display: none; }
  .knop, .terug-knop { min-height: 48px; }
  .roadmap { grid-template-columns: 1fr; }
  .kolom { min-height: 140px; }

  /* Wensenlijst: alleen het icoon in de Bewerken-knop (label verbergen — alleen die knop
     heeft een .knop-label), en geen vaste knopbreedte meer nodig. */
  .wenstabel td.acties .knop-label { display: none; }
  .wenstabel td.acties .knop-stil { min-width: auto; }

  /* Modals: alleen het kruisje, geen "Sluiten" ernaast — dat scheelt breedte op de smalste
     regel van een modal. De knop houdt zijn naam via aria-label (zie index.html). */
  .modal-sluit .knop-label { display: none; }

  /* Voettekst: elke desktop-kolom op één regel (horizontaal wikkelend) én gecentreerd,
     met wat lucht tussen de regels. */
  footer { grid-template-columns: 1fr; justify-items: center; gap: 30px; }
  .voet-kolom-links, .voet-midden, .voet-usps, footer > .voet-links {
    grid-column: 1; grid-row: auto; justify-self: center;
    flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; text-align: center;
  }
  /* De links-nav zit op index.html genest in .voet-kolom-links: ook die horizontaal. */
  .voet-links { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
  .voet-wissen { margin-top: 0; }
}

/* Geen aparte stand, maar een vangnet op de kleinste telefoons (iPhone SE en dergelijke):
   daar loopt het gecentreerde merk tegen de Exporteren-knop aan. Die knop eist geen ruimte
   op (hij staat absoluut, zie hierboven), dus flexbox lost dat niet vanzelf op — links
   uitlijnen dan maar. De grens volgt uit de maten: merk (~181px) + knop (~61px) + de
   padding en wat lucht passen samen pas vanaf ~367px naast elkaar. */
@media (max-width: 359px) {
  .merk { margin-left: 0; }
}