/* ---------------------------------------------------------------
   De Kaartenbak — opmaak

   Lettertype: Faustina, net als op de website Zó werkt toezicht. Taz is het
   huisstijllettertype van De Argumentenfabriek, maar de licentie geldt alleen
   voor de eigen computer, niet voor een website. Daarom staat Taz hier niet.
   --------------------------------------------------------------- */

@font-face {
  font-family: "Faustina";
  src: url("/fonts/Faustina.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Faustina";
  src: url("/fonts/Faustina-Italic.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}

:root {
  --letter: "Faustina", Georgia, "Times New Roman", serif;

  --inkt: #17202a;
  --inkt-zacht: #5b6673;
  --rand: #e3e7ec;
  --rand-zacht: #eef1f5;
  --vlak: #ffffff;
  --vlak-zacht: #f7f9fb;

  --blauw: #009fe3;
  --blauw-donker: #0079ab;
  --oranje: #ee7203;

  --etiket-sector: #e6f6fd;
  --etiket-sector-inkt: #05688f;
  --etiket-type: #eaf5ec;
  --etiket-type-inkt: #2b6b3c;

  --marge: clamp(1rem, 3vw, 2.5rem);
  --ronding: 10px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Een element met het hidden-attribuut hoort weg te zijn. Zonder deze regel
   wint een `display: flex` verderop, en blijft het toch staan — dat gebeurde
   met de zoomknoppen bij een kaart die niet bestaat. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: var(--letter);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--inkt);
  background: var(--vlak-zacht);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  line-height: 1.25;
  margin: 0;
  font-weight: 700;
}

svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Balk bovenaan ---------------------------------------------- */

.balk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.85rem var(--marge);
  background: var(--vlak);
  border-bottom: 1px solid var(--rand);
  position: sticky;
  top: 0;
  z-index: 10;
}

.merk {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.25rem;
}

.merk img {
  display: block;
  width: 72px;
  height: auto;
}

.balk-uitleg {
  margin: 0;
  color: var(--inkt-zacht);
  font-size: 0.9rem;
}

/* --- Zoekbalk ---------------------------------------------------- */

.zoekpagina {
  padding: var(--marge);
  max-width: 1500px;
  margin: 0 auto;
}

.zoekbalk {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.zoekveld {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1 1 22rem;
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--ronding);
  padding: 0.55rem 0.9rem;
}

.zoekveld:focus-within {
  border-color: var(--blauw);
  box-shadow: 0 0 0 3px rgb(0 159 227 / 0.15);
}

.zoekveld svg {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--inkt-zacht);
  flex: none;
}

.zoekveld input {
  flex: 1;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  color: inherit;
  min-width: 0;
}

.zoekgebied {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  border: 0;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
}

.zoekgebied legend {
  float: left;
  padding: 0 0.75rem 0 0;
  color: var(--inkt-zacht);
}

.zoekgebied label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}

input[type="checkbox"] {
  accent-color: var(--blauw);
  width: 1rem;
  height: 1rem;
  margin: 0;
  cursor: pointer;
}

/* --- Indeling ---------------------------------------------------- */

.kolommen {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
}

@media (max-width: 60rem) {
  .kolommen {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Filters ----------------------------------------------------- */

/* Zonder kaarten valt er niets te filteren. Het kader weg, en de melding krijgt
   de volle breedte in plaats van de smalle filterkolom. */
.filters:empty,
.filters.leeg {
  display: none;
}

.kolommen:has(.filters.leeg),
.kolommen:has(.filters:empty) {
  grid-template-columns: minmax(0, 1fr);
}

.filters {
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--ronding);
  padding: 1rem;
  position: sticky;
  top: 5.5rem;
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
}

@media (max-width: 60rem) {
  .filters {
    position: static;
    max-height: none;
  }
}

.filters-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.filters-kop h2 {
  font-size: 1.05rem;
}

#wis-filters {
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.85rem;
  color: var(--blauw-donker);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.filtergroep {
  border-top: 1px solid var(--rand-zacht);
  padding: 0.75rem 0 0.25rem;
}

.filtergroep summary {
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.filtergroep summary::-webkit-details-marker {
  display: none;
}

.filtergroep summary::after {
  content: "+";
  color: var(--inkt-zacht);
  font-weight: 400;
}

.filtergroep[open] summary::after {
  content: "−";
}

.keuzes {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.6rem 0 0.4rem;
  font-size: 0.9rem;
}

.keuzes.lang {
  max-height: 16rem;
  overflow-y: auto;
}

.keuzes label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  color: var(--inkt-zacht);
}

.keuzes label:hover {
  color: var(--inkt);
}

.keuzes label.weg {
  display: none;
}

.keuzes .aantal {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--inkt-zacht);
  font-variant-numeric: tabular-nums;
}

.filterzoek {
  width: 100%;
  margin-top: 0.6rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--rand);
  border-radius: 6px;
  font: inherit;
  font-size: 0.85rem;
}

/* --- Resultaten -------------------------------------------------- */

.telling {
  margin: 0 0 0.9rem;
  color: var(--inkt-zacht);
  font-size: 0.9rem;
}

.raster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.25rem;
}

.tegel img.weg {
  visibility: hidden;
}

.tegel a {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--ronding);
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.tegel a:hover,
.tegel a:focus-visible {
  border-color: var(--blauw);
  box-shadow: 0 6px 20px rgb(23 32 42 / 0.1);
  transform: translateY(-2px);
}

.tegel img {
  display: block;
  width: 100%;
  /* De kaarten lopen sterk uiteen: staand A4, liggend A4, en heel brede
     kaarten. Bijsnijden maakt de staande onherkenbaar, dus past de hele kaart
     altijd in het vak. */
  aspect-ratio: 4 / 3;
  object-fit: contain;
  object-position: center;
  background: var(--vlak-zacht);
  padding: 0.4rem;
  min-height: 0;
  border-bottom: 1px solid var(--rand-zacht);
}

.tegel-tekst {
  padding: 0.85rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.tegel-tekst h3 {
  font-size: 1.02rem;
  font-weight: 700;
}

.etiketten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
}

.etiket {
  font-size: 0.75rem;
  line-height: 1.4;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}

.etiket.sector {
  background: var(--etiket-sector);
  color: var(--etiket-sector-inkt);
}

.etiket.type {
  background: var(--etiket-type);
  color: var(--etiket-type-inkt);
}

.regels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.9rem;
  margin: auto 0 0;
  font-size: 0.82rem;
  color: var(--inkt-zacht);
}

.niets {
  padding: 3rem 0;
  text-align: center;
  color: var(--inkt-zacht);
}

/* --- Kaartpagina ------------------------------------------------- */

.kaartpagina {
  padding: var(--marge);
  max-width: 1500px;
  margin: 0 auto;
}

.terug {
  display: inline-block;
  margin-bottom: 1.25rem;
  text-decoration: none;
  color: var(--inkt-zacht);
  font-size: 0.95rem;
}

.terug:hover {
  color: var(--inkt);
}

.kaart-kolommen {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

@media (max-width: 60rem) {
  .kaart-kolommen {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
}

/* Het beeld blijft staan terwijl je de tekst ernaast leest. Zo is er maar één
   schuifbalk op de pagina, en zie je de kaart nog terwijl je leest. */
.kaartbeeld {
  margin: 0;
  position: sticky;
  top: 5.5rem;
}

@media (max-width: 60rem) {
  .kaartbeeld {
    position: static;
  }
}

.beeldraam {
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--ronding);
  overflow: auto;
  overscroll-behavior: contain;
  /* Ruimte voor de balk erboven en de zoomknoppen eronder, zodat het raam met
     zijn omhulsel binnen het scherm past en er niets afgesneden wordt. */
  max-height: min(72vh, 56rem);
  min-height: 20rem;
  cursor: grab;
  /* Knijpen en slepen doen we zelf; laat de browser er niet ook aan trekken. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.beeldraam.sleept {
  cursor: grabbing;
}

.beeldraam img {
  display: block;
  width: 100%;
  /* Bij de beginstand past de hele kaart in het raam; een staande kaart staat
     dan gecentreerd in plaats van tegen de linkerrand. */
  margin: 0 auto;
  /* Zonder dit houdt de algemene regel `img { max-width: 100% }` het
     inzoomen tegen: de breedte gaat wel omhoog, het beeld niet. */
  max-width: none;
}

.beeld-melding {
  margin: 0;
  padding: 4rem 1.5rem;
  text-align: center;
  color: var(--inkt-zacht);
  font-size: 0.9rem;
}

/* Bestaat de kaart niet, dan blijft er anders een leeg kader met een minimale
   hoogte staan waar niets in komt. De melding krijgt dan de volle breedte,
   anders staat hij in de rechterkolom terwijl links niets is. */
.kaartbeeld.leeg {
  display: none;
}

.kaart-kolommen:has(.kaartbeeld.leeg) {
  grid-template-columns: minmax(0, 1fr);
}

.kaart-kolommen:has(.kaartbeeld.leeg) .niets {
  padding: 3rem 0;
}

.zoomknoppen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-top: 0.85rem;
}

.zoomknoppen button {
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--rand);
  background: var(--vlak);
  border-radius: 50%;
  font: inherit;
  font-size: 1rem;
  color: var(--inkt);
  cursor: pointer;
}

.zoomknoppen button:hover {
  border-color: var(--blauw);
  color: var(--blauw-donker);
}

.zoomknoppen output {
  min-width: 3.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--inkt-zacht);
  font-variant-numeric: tabular-nums;
}

.zoomhint {
  margin: 0.35rem 0 0;
  text-align: center;
  font-size: 0.8rem;
  color: var(--inkt-zacht);
}

@media (hover: none) {
  .zoomhint {
    display: none;
  }
}

/* De tekst scrollt met de pagina mee. Gaf je hem een eigen schuifbalk, dan
   stonden er twee naast elkaar op het scherm en wist je niet welke van welke
   was. Het beeld blijft wel staan terwijl je leest: zie .kaartbeeld. */

.kaart-tekst h1 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  margin: 0.6rem 0 0.5rem;
}

.kaart-tekst .vraag {
  font-style: italic;
  font-size: 1.1rem;
  color: var(--inkt-zacht);
  margin: 0 0 0.9rem;
}

.kaart-tekst .over {
  margin: 0 0 1rem;
}

.knop {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  background: var(--blauw);
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
}

.knop:hover {
  background: var(--blauw-donker);
}

.knop svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* --- Inlogpagina ------------------------------------------------- */

.inlogpagina {
  max-width: 24rem;
  margin: 0 auto;
  padding: clamp(3rem, 12vh, 7rem) 1.5rem;
  text-align: center;
}

.inlogpagina img {
  width: 96px;
  height: auto;
}

.inlogpagina h1 {
  font-size: 1.75rem;
  margin: 1rem 0 0.5rem;
}

.inlogpagina p {
  color: var(--inkt-zacht);
  margin: 0 0 1.75rem;
}

.inlogpagina form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  text-align: left;
}

.inlogpagina label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: var(--inkt-zacht);
}

.inlogpagina input {
  font: inherit;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--rand);
  border-radius: var(--ronding);
  background: var(--vlak);
  color: var(--inkt);
}

.inlogpagina input:focus {
  outline: 0;
  border-color: var(--blauw);
  box-shadow: 0 0 0 3px rgb(0 159 227 / 0.15);
}

.inlogpagina button {
  font: inherit;
  font-weight: 700;
  padding: 0.6rem 1.1rem;
  border: 0;
  border-radius: 8px;
  background: var(--blauw);
  color: #fff;
  cursor: pointer;
}

.inlogpagina button:hover {
  background: var(--blauw-donker);
}

.inlogfout {
  margin: 0;
  color: #b3261e;
  font-size: 0.9rem;
}

/* Een filterkeuze die niets meer oplevert bij de huidige zoekopdracht. Gedimd
   in plaats van weggehaald: een lijst die van plek springt zoekt lastiger. */
.keuzes label.leeg {
  opacity: 0.4;
}

/* --- De reeksbalk op de kaartpagina ------------------------------ */

/* Op één regel met 'Terug naar zoeken', zonder eigen kader: de balk hoort bij
   de kaart en mag hem niet van het scherm duwen. */
.kop-regel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.kop-regel .terug {
  margin: 0;
}

.reeksbalk {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: var(--inkt-zacht);
}

.reeks-naam {
  color: var(--inkt);
  text-decoration: none;
  border-bottom: 1px solid var(--rand);
}

.reeks-naam:hover {
  border-bottom-color: var(--blauw);
  color: var(--blauw-donker);
}

.reeks-plek {
  font-size: 0.85rem;
}

.reeks-pijlen {
  display: inline-flex;
  gap: 0.35rem;
  align-self: center;
}

.reeks-pijl {
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--rand);
  border-radius: 6px;
  text-decoration: none;
  color: var(--inkt-zacht);
  background: var(--vlak);
}

a.reeks-pijl:hover {
  border-color: var(--blauw);
  color: var(--blauw-donker);
}

/* De eerste of laatste kaart: de pijl blijft staan zodat de regel niet
   verspringt, maar hij is duidelijk uit. */
.reeks-pijl.leeg {
  opacity: 0.35;
}

/* De knoppen onder de kaarttekst: de PDF en de twee kopieën. */
.knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* De tweede knop is even groot maar minder nadrukkelijk. */
.knop.tweede {
  background: var(--vlak);
  color: var(--inkt);
  border: 1px solid var(--rand);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.knop.tweede:disabled {
  cursor: progress;
  opacity: 0.7;
}

.knop.tweede:hover {
  background: var(--vlak-zacht);
  border-color: var(--blauw);
  color: var(--blauw-donker);
}

/* Het venster met de tekst, voor als de browser kopiëren niet toestaat. */
.kopieervenster {
  border: 1px solid var(--rand);
  border-radius: var(--ronding);
  padding: 1.25rem;
  max-width: min(46rem, 92vw);
  width: 100%;
  background: var(--vlak);
  color: var(--inkt);
}

.kopieervenster::backdrop {
  background: rgb(23 32 42 / 0.4);
}

.kopieervenster p {
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
  color: var(--inkt-zacht);
}

.kopieervenster textarea {
  width: 100%;
  height: 50vh;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 0.75rem;
  border: 1px solid var(--rand);
  border-radius: 8px;
  background: var(--vlak-zacht);
  color: var(--inkt);
  resize: vertical;
}

.kopieervenster button {
  margin-top: 0.85rem;
}