/*
 * blog.fraservalley.nl — de statistiekenpagina
 *
 * Eén pagina die bewust afwijkt van de rest. De artikelen zijn ingetogen:
 * zwarte tekst op papier, één kolom, geen kleurvlak. Juist daardoor mag hier
 * een groot vlak in de hoofdkleur staan met cijfers erop die van de andere
 * kant van de kamer leesbaar zijn.
 *
 * Dat dit één extra bestand is en niet een tweede huisstijl, is de winst van
 * de tweelagenopzet: alles hieronder gaat via de Bootstrap-variabelen die de
 * merklaag zet. `--bs-primary` is in het lichte thema de salie en in het
 * donkere de omgekeerde salie, en `--hs-op-primary` is de tekstkleur die
 * daarop hoort. Het vlak klapt dus vanzelf om met het apparaat, zonder dat
 * hier één hexwaarde staat.
 *
 * Wordt na /huisstijl/thema-fraservalley.css en /assets/stijl.css geladen.
 */

/* --- Het vlak met de kengetallen ---------------------------------------- */

.kengetallen {
  margin: 0 0 2.5rem;
  padding: 2rem 1.75rem 1.5rem;
  background: var(--bs-primary);
  color: var(--hs-op-primary);
  border-radius: var(--bs-border-radius);
}

.kengetallen-kop {
  margin: 0 0 1.5rem;
  font-family: var(--hs-font-label);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: var(--hs-label-spatie);
  text-transform: uppercase;
  opacity: 0.8;
}

.kengetal {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}

.kengetal-waarde {
  font-family: var(--hs-font-label);
  font-weight: 500;
  /* Groot, en met een strakke spatiëring: dit is het getal waar de pagina om
     draait. clamp zodat het op een telefoon niet over de rand loopt. */
  font-size: clamp(2.25rem, 9vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.kengetal-naam {
  font-family: var(--hs-font-label);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: var(--hs-label-spatie);
  text-transform: uppercase;
  opacity: 0.85;
}

/* Het getal van de harde eis — hoeveel artikelen zijn er bezocht — staat
   groter dan de rest. Er is één hoofdvraag op deze pagina en die hoort er ook
   als hoofdvraag uit te zien. */
.kengetal-groot .kengetal-waarde {
  font-size: clamp(3.5rem, 16vw, 6.5rem);
}

.kengetal-groot .kengetal-naam {
  font-size: 1rem;
}

.kengetallen-uitleg {
  margin: 1.25rem 0 0;
  max-width: 30rem;
  font-size: 0.9375rem;
  opacity: 0.85;
}

.kengetallen-leeg {
  /* Zonder metingen geen vals vlak vol nullen: hetzelfde vlak, maar rustiger,
     zodat 'er is nog niets' er niet uitziet als een storing. */
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}

.kengetallen-leeg .kengetal-waarde,
.kengetallen-leeg .kengetal-naam {
  color: var(--bs-secondary-color);
}

/* --- De grafiek ---------------------------------------------------------- */

.grafiekvak {
  margin: 1.5rem 0 0;
}

.grafiek {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.grafiek-vlak {
  fill: var(--hs-op-primary);
  fill-opacity: 0.22;
}

.grafiek-lijn {
  fill: none;
  stroke: var(--hs-op-primary);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  /* De SVG schaalt mee met zijn kader; zonder dit wordt de lijn op een breed
     scherm dikker dan op een smal. */
  vector-effect: non-scaling-stroke;
}

.grafiek-as,
.grafiek-top {
  stroke: var(--hs-op-primary);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.grafiek-as {
  opacity: 0.45;
}

.grafiek-top {
  opacity: 0.25;
  stroke-dasharray: 3 4;
}

.grafiek-schaal,
.grafiek-datum {
  fill: var(--hs-op-primary);
  font-family: var(--hs-font-label);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  opacity: 0.75;
}

.grafiek-datum-rechts {
  text-anchor: end;
}

/* De dagen waarop er een artikel verscheen. Dit is wat de grafiek van een lijn
   in een verhaal verandert: zonder de merktekens is elke piek even
   onverklaarbaar. Bewust ingetogen — ze horen achter de lijn te blijven en
   niet ervoor. */
.grafiek-publicatie {
  stroke: var(--hs-op-primary);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  opacity: 0.4;
  vector-effect: non-scaling-stroke;
}

.grafiek-vlag {
  fill: var(--hs-op-primary);
  opacity: 0.7;
}

.grafiekvak figcaption {
  margin-top: 0.75rem;
  max-width: 32rem;
  font-size: 0.8125rem;
  opacity: 0.8;
}

/* --- De regel over versheid ---------------------------------------------- */

.gemeten-tot {
  margin: 1.5rem 0 0;
  max-width: 34rem;
  font-size: 0.8125rem;
  opacity: 0.8;
}

.gemeten-tot time {
  font-weight: 500;
  opacity: 1;
}

/* --- Wat er gelezen wordt ------------------------------------------------
   Per artikel een rij van drie kolommen: titel, lijntje, getallen. Onder de
   950px klapt dat naar twee regels — het lijntje mag dan de volle breedte
   pakken, dat leest juist beter. */

.ranglijst,
.schrijfkant,
.twee-vragen {
  margin-bottom: 3rem;
}

.ranglijst h2,
.schrijfkant h2,
.verantwoording h2,
.vraag h2 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}

.sectie-bij {
  margin: 0 0 1.5rem;
  max-width: 34rem;
  color: var(--bs-secondary-color);
  font-size: 0.9375rem;
}

.ranglijst-lijst {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ranglijst-lijst li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10rem auto;
  align-items: center;
  gap: 0.5rem 1.25rem;
  padding: 0.85rem 0 1rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.ranglijst-titel a {
  text-decoration: none;
  word-break: break-word;
}

.ranglijst-titel a:hover,
.ranglijst-titel a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.ranglijst-sinds {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--hs-font-label);
  font-size: 0.6875rem;
  letter-spacing: var(--hs-label-spatie);
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

/* Een slug uit het telbestand waar geen artikel meer bij hoort. Het
   telbestand bewaart langer dan de site: een verwijderd stuk verdwijnt van de
   pagina maar niet uit de geschiedenis. */
.ranglijst-weg {
  color: var(--bs-secondary-color);
  font-style: italic;
}

.minilijn {
  display: block;
  width: 100%;
  height: 28px;
  overflow: visible;
}

.minilijn polyline {
  fill: none;
  stroke: var(--bs-primary);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  /* De SVG wordt niet-uniform geschaald zodat het lijntje de volle kolom pakt;
     zonder dit zou de lijn horizontaal uitgerekt en verticaal geplet worden. */
  vector-effect: non-scaling-stroke;
}

.ranglijst-getallen {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
}

.ranglijst-venster {
  font-family: var(--hs-font-label);
  font-weight: 500;
  font-size: 1.25rem;
}

.ranglijst-totaal {
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}

/* De balk hangt aan de onderrand van de rij en is een verhouding, geen tweede
   getal. De breedte komt uit een klasse en niet uit een style-attribuut: de
   Content-Security-Policy staat `style-src 'self'` en blokkeert ook
   attributen, waardoor een inline breedte stil op nul zou uitkomen. */
.ranglijst-balk {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  background: var(--bs-primary);
}

.balk-5   { width: 5%; }
.balk-10  { width: 10%; }
.balk-15  { width: 15%; }
.balk-20  { width: 20%; }
.balk-25  { width: 25%; }
.balk-30  { width: 30%; }
.balk-35  { width: 35%; }
.balk-40  { width: 40%; }
.balk-45  { width: 45%; }
.balk-50  { width: 50%; }
.balk-55  { width: 55%; }
.balk-60  { width: 60%; }
.balk-65  { width: 65%; }
.balk-70  { width: 70%; }
.balk-75  { width: 75%; }
.balk-80  { width: 80%; }
.balk-85  { width: 85%; }
.balk-90  { width: 90%; }
.balk-95  { width: 95%; }
.balk-100 { width: 100%; }

@media (max-width: 46rem) {
  .ranglijst-lijst li {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ranglijst-lijn {
    grid-column: 1 / -1;
    order: 3;
  }
}

/* --- Wanneer, en de staart -----------------------------------------------
   Twee vragen naast elkaar die allebei uit dezelfde drie kolommen komen en
   allebei iets anders vertellen dan een aantal. */

.twee-vragen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2.5rem;
  align-items: start;
}

.vraag-uitleg {
  margin: 0.75rem 0 0;
  color: var(--bs-secondary-color);
  font-size: 0.9375rem;
}

.vraag-waarde {
  margin: 0.5rem 0 0;
  font-family: var(--hs-font-label);
  font-weight: 500;
  font-size: clamp(3rem, 12vw, 5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--bs-primary);
  font-variant-numeric: tabular-nums;
}

.vraag-waarde span {
  font-size: 0.4em;
  letter-spacing: 0;
}

.grafiekvak figcaption {
  margin-top: 0.75rem;
  max-width: 32rem;
  font-size: 0.8125rem;
  opacity: 0.8;
}

/* --- Wanneer er gelezen wordt -------------------------------------------
   Zeven dagen maal vier dagdelen. Een echte tabel, want dit ís een tabel:
   twee assen met een getal in elk vakje. Daarmee blijft hij leesbaar met een
   schermlezer en schaalt de tekst gewoon mee. */

.rooster-sectie {
  margin-bottom: 3rem;
}

.rooster {
  width: 100%;
  border-collapse: separate;
  border-spacing: 3px;
  font-variant-numeric: tabular-nums;
}

.rooster th {
  font-family: var(--hs-font-label);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: var(--hs-label-spatie);
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

.rooster thead th {
  padding-bottom: 0.35rem;
  text-align: center;
}

.rooster tbody th {
  width: 1%;
  padding-right: 0.75rem;
  text-align: right;
  white-space: nowrap;
}

.rooster td {
  padding: 0.5rem 0.25rem;
  text-align: center;
  border-radius: var(--bs-border-radius);
  font-size: 0.9375rem;
}

/* Vijf stappen plus de lege stand. De kleur komt uit de hoofdkleur met
   oplopende dekking, zodat het rooster in beide thema's klopt zonder dat hier
   één hexwaarde staat. De tekstkleur klapt om op de donkerste twee stappen,
   want daar wordt de achtergrond te vol voor gewone tekst. */
.rooster .vak-0 {
  background: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
}

.rooster .vak-1 { background: rgba(var(--bs-primary-rgb), 0.16); }
.rooster .vak-2 { background: rgba(var(--bs-primary-rgb), 0.34); }
.rooster .vak-3 { background: rgba(var(--bs-primary-rgb), 0.55); }

.rooster .vak-4 {
  background: rgba(var(--bs-primary-rgb), 0.78);
  color: var(--hs-op-primary);
}

.rooster .vak-5 {
  background: var(--bs-primary);
  color: var(--hs-op-primary);
  font-weight: 500;
}

.rooster .rooster-totaal {
  background: none;
  color: var(--bs-secondary-color);
  font-family: var(--hs-font-label);
  font-weight: 500;
}

/* Voluit op een ruim scherm, afgekort op een smal. Beide staan in de HTML;
   welke er zichtbaar is, is opmaak. */
.rooster-kort { display: none; }

@media (max-width: 34rem) {
  .rooster-lang { display: none; }
  .rooster-kort { display: inline; }

  .rooster thead th { font-size: 0.5625rem; }
  .rooster td { padding: 0.45rem 0.15rem; font-size: 0.8125rem; }
}

/* Alleen voor een schermlezer: het rooster leest zonder deze regels als een
   reeks losse getallen. */
.verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- De vier dagdelen naast elkaar --------------------------------------- */

.dagdeellijst {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.dagdeellijst li {
  display: grid;
  grid-template-columns: 5rem 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0;
}

.dagdeelnaam {
  font-family: var(--hs-font-label);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: var(--hs-label-spatie);
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

.dagdeelbalk {
  height: 8px;
  border-radius: var(--bs-border-radius);
  background: var(--bs-primary);
}

.dagdeelgetal {
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
}

/* --- De schrijfkant ------------------------------------------------------ */

.feiten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
}

.feit dt {
  font-family: var(--hs-font-label);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: var(--hs-label-spatie);
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

.feit dd {
  margin: 0.25rem 0 0;
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
}

/* Wat er klaarstaat maar nog geen pagina heeft. Het enige plekje op de site
   waar de geplande artikelen zichtbaar zijn. */
.klaarstaand {
  margin: 1.75rem 0 0;
  padding: 0.9rem 1.15rem;
  border: 1px solid var(--bs-border-color);
  border-left: 2px solid var(--bs-primary);
  border-radius: var(--bs-border-radius);
  background: var(--bs-secondary-bg);
  font-size: 0.9375rem;
}

/* --- De verantwoording --------------------------------------------------- */

.verantwoording {
  max-width: 34rem;
  color: var(--bs-secondary-color);
  font-size: 0.9375rem;
}

.verantwoording p {
  margin: 0 0 1rem;
}