/**
 * @file
 * Selectievakjes op de bagagelijst, op het scherm en op papier.
 */

.ozk-bagage-lijst input.ozk-bagage-vinkje {
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.5em;
  vertical-align: -0.15em;
  cursor: pointer;
  accent-color: #2f6f4e;
}

/* Afgevinkt items blijven leesbaar maar zakken naar de achtergrond, zodat je
   ziet wat er nog moet gebeuren. Geen doorhaling: die leest slecht op papier. */
.ozk-bagage-lijst .ozk-bagage-af {
  color: #6c757d;
}

/* De printknop gebruikt de stijl van het OZK-printpatroon (.ozk-print-knop).
   Hier alleen de marge onder de knop. */
.ozk-bagage-lijst .ozk-bagage-printknop {
  margin-bottom: 1rem;
}
.ozk-bagage-lijst .ozk-bagage-printknop + .ozk-bagage-printknop {
  margin-left: .5rem;
}

@media print {
  /* De paginaverberging (header, footer, nav, etc.) wordt afgehandeld door
     het OZK-printpatroon (ozk_print). */
  .ozk-bagage-weekknoppen {
    display: none !important;
  }

  /* De header (printkop, introductie, eventuele persoonlijke info) staat op
     papier altijd over de volle breedte. */
  .ozk-bagage-header,
  .ozk-bagage-header *,
  .ozk-bagage-lijst .ozk-print-kop {
    column-span: all;
  }

  .ozk-bagage-header {
    margin-bottom: 12pt;
    font-size: 11pt;
    line-height: 1.45;
  }

  .ozk-bagage-header p {
    margin-bottom: 6pt;
  }

  .ozk-bagage-lijst .ozk-print-kop {
    margin-bottom: 12pt;
  }

  /* Alleen de checklist zelf (categorieën met afvinkvakjes) staat in twee
     kolommen op papier. */
  .ozk-bagage-checklist {
    font-size: 11pt;
    line-height: 1.45;
    columns: 2;
    column-gap: 18pt;
  }

  .ozk-bagage-checklist > div,
  .ozk-bagage-checklist ul {
    break-inside: avoid;
  }

  .ozk-bagage-lijst > div,
  .ozk-bagage-lijst ul {
    break-inside: avoid;
  }

  /* Een leeg vakje om met de pen af te vinken; wat op het scherm al
     aangevinkt stond komt met een kruisje mee. */
  .ozk-bagage-lijst input.ozk-bagage-vinkje {
    -webkit-appearance: none;
    appearance: none;
    width: 10pt;
    height: 10pt;
    border: 1pt solid #000;
    border-radius: 1pt;
    position: relative;
  }

  .ozk-bagage-lijst input.ozk-bagage-vinkje:checked::after {
    content: "✕";
    position: absolute;
    top: -3pt;
    left: 1pt;
    font-size: 10pt;
    line-height: 1;
  }

  .ozk-bagage-lijst .ozk-bagage-af {
    color: #000;
  }

  /* Een kop hoort niet onderaan een pagina te eindigen zonder zijn lijst. */
  .ozk-bagage-lijst h2,
  .ozk-bagage-lijst h3,
  .ozk-bagage-lijst strong {
    break-after: avoid;
    page-break-after: avoid;
  }

  .ozk-bagage-lijst li,
  .ozk-bagage-lijst ul {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* De links achter "Meer over ..." en de playlist hebben op papier geen nut
     zonder hun adres. */
  .ozk-bagage-lijst a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }
}

/* Elk item is een label, zodat je ook op de tekst kunt tikken.
   Flex en niet inline-block: op een smal scherm breken de langere items over
   twee regels, en met inline-block liep die tweede regel onder het vakje door.
   Nu staat het vakje links vast en lijnt doorlopende tekst uit met de regel
   erboven. */
.ozk-bagage-lijst .ozk-bagage-item {
  display: flex;
  align-items: flex-start;
  gap: 0.45em;
  cursor: pointer;
  font-weight: inherit;
  margin: 0 0 0.1em;
}

.ozk-bagage-lijst .ozk-bagage-item input.ozk-bagage-vinkje {
  flex: 0 0 auto;
  margin-right: 0;
  /* Meeschuiven met de eerste tekstregel in plaats van met het midden. */
  margin-top: 0.3em;
}

/* De <br> tussen twee items mag weg.
   In de bron staan de items als losse regels met <br> ertussen. Nu elk item een
   eigen regel is (flex), zou die <br> er een lege regel bovenop leggen - op een
   telefoon werd de lijst daardoor twee keer zo lang. */
.ozk-bagage-lijst .ozk-bagage-item + br {
  display: none;
}

/* Gelijke regelafstand door de hele lijst.
   De bodies zijn opgeschoond (elke kop een <h3> boven zijn eigen blok), maar de
   marges van de divs en p's wisselen nog per tekstformaat-filter. De koppen
   houden hun eigen ruimte erboven; alles daartussen loopt gelijk op. */
.ozk-bagage-lijst div,
.ozk-bagage-lijst p {
  margin-bottom: 0;
}

.ozk-bagage-lijst h2,
.ozk-bagage-lijst h3,
.ozk-bagage-lijst h4 {
  display: inline-block;
  margin-top: 0.9em;
  margin-bottom: 0.15em;
}

/* De blokken die wel lucht om zich heen horen te houden. */
.ozk-bagage-lijst .ozk-bagage-praktisch,
.ozk-bagage-lijst .alert {
  margin-bottom: 1rem;
}

/* Zijkolommen bovenaan laten beginnen.
   De kampenlayout (ozk-layout-breed.css in het thema) maakt een grid van drie
   kolommen en twee rijen: de brede regio in rij 1, de twee zijkolommen in rij
   2, en de contentkolom over beide rijen heen. Op deze pagina's is de brede
   regio leeg - hij bevat een views-blok dat niets rendert, dus de themaregel
   die een lege regio verbergt (:not(:has(*))) grijpt niet. De lange
   bagagelijst rekt dan beide rijen op, en het kampweken-blok in rij 2 begint
   pas halverwege de pagina.

   Hier staat alles in rij 1, met de lege brede regio eronder. Let op de vier
   klassen in de selector: met minder wint de themaregel, want die komt met
   dezelfde specificiteit en wordt later geladen. */
@media (min-width: 992px) {
  .ozk-layout-breed.layout.row.layout-builder__layout:has(.ozk-bagage-lijst) > .ozk-region-content,
  .ozk-layout-breed.layout.row.layout-builder__layout:has(.ozk-bagage-lijst) > .ozk-region-zij-1,
  .ozk-layout-breed.layout.row.layout-builder__layout:has(.ozk-bagage-lijst) > .ozk-region-zij-2 {
    grid-row: 1;
    align-self: start;
  }

  .ozk-layout-breed.layout.row.layout-builder__layout:has(.ozk-bagage-lijst) > .ozk-region-breed {
    grid-row: 2;
  }
}

/* Eén lettergrootte in de hele lijst.
   Er liepen er drie door elkaar: de items werden 14px omdat het <label>'s zijn
   en het thema formulierlabels verkleint, losse regels in een div 16px, en de
   alinea's 17,1px (de gewone bodytekst van de site). Met inherit propageert de
   maat van de lijstcontainer naar beneden, zodat alles de bodytekstgrootte
   krijgt zonder dat hier een vast aantal pixels staat.

   Koppen houden hun eigen maat, en de printknop, printkop en colofon de hunne. */
.ozk-bagage-lijst *:not(h1, h2, h3, h4, h5, h6, .ozk-bagage-printknop, .ozk-print-knop, .ozk-print-kop, .ozk-print-kop *, .ozk-print-colofon, .ozk-print-colofon *) {
  font-size: inherit;
}

/* De knop naar de eigen kampweek, in het persoonlijke blok bovenaan de
   gedeelde lijst. Dezelfde vorm als de printknop, zodat de twee knoppen op de
   pagina bij elkaar horen. */
.ozk-bagage-lijst .ozk-bagage-eigenknop,
.ozk-bagage-lijst .ozk-bagage-eigenknop:link,
.ozk-bagage-lijst .ozk-bagage-eigenknop:visited {
  display: inline-block;
  padding: 0.4em 0.9em;
  border: 1px solid #006E83;
  border-radius: 0.3rem;
  background: #006E83;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.ozk-bagage-lijst .ozk-bagage-eigenknop:hover,
.ozk-bagage-lijst .ozk-bagage-eigenknop:focus {
  background: #fff;
  color: #006E83;
}

/* De box met de vaste praktische punten (laatste maaltijd, fiets). Geen
   vinkjes: dit zijn geen dingen om in te pakken maar om te weten. */
.ozk-bagage-lijst .ozk-bagage-praktisch ul {
  margin-bottom: 0;
  padding-left: 1.2em;
}

.ozk-bagage-lijst .ozk-bagage-praktisch li {
  margin-bottom: 0.2em;
}