/*
 * De berichtpagina (/blog/<slug>/) — CLAUDE.md §12.
 *
 * Alleen hier geladen (R8). Wat erin staat: het raster met de twee kolommen, de
 * kop met de metaregels, de inhoudsopgave, de typografie van de artikeltekst, en
 * de drie afwijkingen van "Gerelateerde artikelen" ten opzichte van diezelfde
 * sectie op de homepage.
 *
 * Alle maten zijn gemeten op samdesign.nl op 1440, 1024, 767 en 390px.
 */

/* ==================================================================
   Tokens
   ================================================================== */

.postArticle {
  /*
   * Het roze schuine streepje voor een h2 en een h3 in het artikel, en als
   * markering in de inhoudsopgave. Dezelfde SVG als op het portfolio-archief;
   * de vulling is #dc0356, nét een andere roze dan --colorPink en
   * --colorPinkDeep — zo staat het in de bron van samdesign.nl.
   */
  --postMark: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29.085' height='28.859' viewBox='0 0 29.085 28.859'%3E%3Cpath d='M2.862-8.921l.251-2.438a.951.951,0,0,1,.311-.974L21.01-29.725c.284-.237.608-.208,1.11-.18l.458.06,1.894.157a.956.956,0,0,1,.217,1.6L4.4-8.428a.956.956,0,0,1-1.541-.493' transform='matrix(0.914,-0.407,0.407,0.914,9.556,37.517)' fill='%23dc0356'/%3E%3C/svg%3E");

  /* Hetzelfde streepje kleiner en doorzichtig, voor een regel in de
     inhoudsopgave waar je niet bent. De doorzichtigheid zit in de SVG zelf en
     niet in opacity: alleen de background-image wisselt straks. */
  --postMarkFaint: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.971' height='14.854' viewBox='0 0 14.971 14.854'%3E%3Cpath d='M2.862-19.113l.129-1.255a.489.489,0,0,1,.16-.5L12.2-29.821c.146-.122.313-.107.571-.092l.236.031.975.081a.492.492,0,0,1,.112.824L3.655-18.859a.492.492,0,0,1-.793-.254' transform='matrix(0.914,-0.407,0.407,0.914,9.556,33.141)' fill='%23dc0356' opacity='0.3'/%3E%3C/svg%3E");

  --postMetaColor: #848fa0;
  --postMetaLine: #848fa033;

  /* De roze koprij van een tabel en de streping eronder. */
  --postTableHead: #dc0556;
  --postTableStripe: #dc05561a;

  margin-block: 50px;
}

/* ==================================================================
   Het raster: artikel links, inhoudsopgave rechts
   ================================================================== */

/*
 * Op samdesign.nl staan hier twee kolommen van 855 en 350 met 75px ertussen,
 * samen precies de 1280 van de container. De linkerkolom is dus geen vaste maat
 * maar wat er overblijft.
 *
 * De inhoudsopgave beslaat alle drie de rijen, zodat hij naast het hele artikel
 * staat en niet alleen naast de kop. Onder 1025px wordt het één kolom en schuift
 * hij tussen de inleiding en de tekst — daar staat hij op de bestaande site ook.
 */
.postLayout {
  display: grid;
  grid-template-areas:
    'head toc'
    'intro toc'
    'body toc';
  grid-template-columns: minmax(0, 1fr) 350px;
  grid-template-rows: auto auto 1fr;
  column-gap: 75px;
}

.postHeader {
  grid-area: head;
}

.postIntro {
  grid-area: intro;
}

/*
 * De inhoudsopgave schuift mee met het artikel. Op samdesign.nl is de kolom wél
 * als sticky ingesteld (`data-jet-settings`, topSpacing 50), maar de bibliotheek
 * die dat uitvoert — StickySidebar — staat op geen enkele pagina in de bundel,
 * dus doet die instelling daar niets en loopt de lijst gewoon met het artikel
 * mee omhoog. Op verzoek van de gebruiker doen wij het wél: bewuste afwijking
 * van R9, zie docs/beslissingen.md.
 *
 * align-self: start moet blijven staan, anders rekt het vak zich over alle drie
 * de rijen uit en heeft sticky niets om binnen te schuiven.
 */
.postToc {
  grid-area: toc;
  align-self: start;
}

/*
 * Onze eigen header is 134px hoog en staat vanaf 500px scrollen vast, dus
 * parkeert het vak daar 30px onder — dezelfde rekensom als de index van de
 * sitemap (§35). max-height plus overflow houdt een lange inhoudsopgave binnen
 * het scherm: bij een artikel met veel koppen valt de onderkant anders buiten
 * beeld zodra het vak vastligt, en dan is die er niet meer bij te scrollen.
 *
 * Alleen boven 1024px: daaronder staat de lijst gewoon in de tekst.
 */
@media (min-width: 1025px) {
  .postToc {
    position: sticky;
    top: calc(var(--headerStickyHeight) + 30px);
    max-height: calc(100vh - var(--headerStickyHeight) - 60px);
    overflow-y: auto;
  }
}

.postBody {
  grid-area: body;
}

/*
 * Het laatste blok van het artikel houdt 2,5px onder zich in plaats van 22,5: op
 * samdesign.nl trekt het inhoudsblok 20px terug om de vaste tussenruimte van
 * Elementor te compenseren, en dat scheelt precies zoveel tot "Gerelateerde
 * artikelen". Op het blok zelf en niet als negatieve marge op .postBody: dat
 * laatste is een rasteritem in een 1fr-rij, en daar rekent de browser een
 * negatieve marge niet altijd mee.
 */
.postBody > :last-child {
  margin-bottom: 2.5px;
}

/* ==================================================================
   De kop en de metaregels
   ================================================================== */

/*
 * De maten komen van .sectionTitleSmall; alleen de regelhoogte is hier 60 in
 * plaats van 66. Onder 1025px is hij gelijk aan die van de secties, dus staat
 * daar niets.
 */
.postTitle {
  margin-bottom: 30px;
  line-height: 60px;
}

/*
 * Drie naam-waardeparen naast elkaar, elk in een eigen div — dat mag in een dl
 * en het maakt het paar één vak in deze flexbox, met het scheidingsstreepje
 * ervoor. Geen display: contents op de dl: browsers laten dan de lijstsemantiek
 * vallen, en dan is de dl zijn enige voordeel kwijt.
 */
.postMetaList {
  display: flex;
  flex-wrap: wrap;
}
/*
 * De maat staat op de tekst en niet op het vak eromheen. Dat is geen detail: het
 * vak houdt zo de regelhoogte van de body (1,5 x 17px = 25,5px) als ondergrens,
 * en dat is precies wat een regel op samdesign.nl 26px hoog maakt zodra de tekst
 * naar 15/25 zakt. Zet je de maat op het vak, dan wordt het daar 25 en loopt alles
 * eronder 1px per regel mis.
 */
.postMeta {
  margin-bottom: 20px;
  color: var(--postMetaColor);
}

.postMetaTerm,
.postMetaValue {
  display: inline;
  margin: 0;
  font-size: 16px;
  line-height: 33px;
  letter-spacing: -0.05em;
}

/* De eerste regel staat 27px naar binnen; dat is geen kader maar zo staat het
   op samdesign.nl. */
.postMetaAuthor {
  margin-left: 27px;
}

.postMetaAuthor,
.postMetaUpdated {
  margin-right: 20px;
}

/* Een dun streepje tussen de regels, niet ervoor: de eerste heeft er geen. */
.postMetaUpdated,
.postMetaReading {
  border-left: 1px solid var(--postMetaLine);
  padding-left: 20px;
}

/* ==================================================================
   De inleiding
   ================================================================== */

/*
 * Lopende tekst, iets zwaarder dan de artikeltekst en zonder het streepje van
 * .sectionIntro — dit is de aanhef van een artikel en niet de inleiding van een
 * sectie.
 */
.postIntro {
  font-size: 15px;
  font-weight: 500;
  line-height: 25px;
}

.postIntro > * {
  margin: 0 0 22.5px;
}

/* ==================================================================
   De inhoudsopgave
   ================================================================== */

.postTocTitle {
  /*
   * 23px eronder. Op samdesign.nl is dat een witte rand van 23px onder de kop
   * van het vak — op een witte pagina dus ruimte en geen lijn.
   */
  margin-bottom: 23px;
  font-size: 22px;
  font-weight: 500;
  line-height: 25px;
  letter-spacing: -0.05em;
}

/*
 * De regel staat 30px naar binnen. Die inspring staat op het lijstitem en niet
 * als marge op de link: op samdesign.nl staat hij op de link, en een link is
 * inline, dus geldt hij daar alleen voor de eerste regel. Een kop die afbreekt
 * begint op zijn tweede regel dan tegen de linkerrand, dwars door de kolom
 * streepjes heen. Op het item geldt hij voor elke regel. Bewuste afwijking van
 * R9, zie docs/beslissingen.md.
 */
.postTocItem {
  padding-left: 30px;
  font-size: 15px;
  line-height: 25px;
}

/*
 * De link heeft de kleur van de lopende tekst en geen streep: op verzoek van de
 * gebruiker is de inhoudsopgave geen rij roze links meer, maar een lijst die
 * leest als de koppen waar hij naar wijst. Bewuste afwijking van R9, zie
 * docs/beslissingen.md. Onder de muis en bij toetsenbordfocus komt de streep
 * terug — dat is dan de enige aanwijzing dat het een link is.
 *
 * Het streepje hangt aan de link en niet aan het lijstitem, ook al is de
 * inspring hierboven verhuisd. Het staat 23px voor de tekst, dus 7px vanaf de
 * rand — en die 7px is gemeten vanaf de bovenkant van de létter, niet vanaf die
 * van de regel. Zet je het streepje op het item, dan schuift het met de halve
 * regelafstand mee en staat het op een tablet (regelhoogte 33) te hoog.
 */
.postTocLink {
  position: relative;
  color: var(--colorNavy);
  text-decoration: none;
}

.postTocLink:hover,
.postTocLink:focus-visible {
  text-decoration: underline;
}

/*
 * Bij een kop over twee regels is het blok waar dit streepje zich naar richt de
 * omhullende van beide regels. Die begint links nu ook op de inspring, dus staat
 * het streepje er nog steeds 23px voor in plaats van 23px voor de linkerrand van
 * de kolom.
 */
.postTocLink::before {
  content: '';
  position: absolute;
  top: 7px;
  left: -23px;
  width: 11px;
  height: 19px;
  background: var(--postMarkFaint) center / cover no-repeat;
}

/* De kop waar je nu bent krijgt het volle streepje. aria-current en geen eigen
   class: er is een attribuut dat precies dit betekent (§6). */
.postTocLink[aria-current]::before {
  background-image: var(--postMark);
}

/* ==================================================================
   Het artikel
   ================================================================== */

.postBody {
  font-size: 15px;
  line-height: 25px;
}

.postBody p {
  margin: 0 0 22.5px;
}

.postBody h2,
.postBody h3,
.postBody h4,
.postBody h5,
.postBody h6 {
  margin: 0 0 20px;
}

/* Springen vanuit de inhoudsopgave mag niet onder de vastgezette header
   eindigen. Die spronghoogte staat als scroll-padding-top op html in main.css
   en dus niet ook nog eens als scroll-margin hier: dat werd bij elkaar
   opgeteld, en dan landde de kop lager dan pages/post.js verwachtte. */
.postBody h2 {
  font-size: 40px;
  font-weight: 500;
  line-height: 60px;
  letter-spacing: -0.05em;
}

.postBody h3 {
  font-size: 30px;
  font-weight: 500;
  line-height: 66px;
  letter-spacing: -0.05em;
}

.postBody h4 {
  font-size: 24px;
  font-weight: 400;
  line-height: 40px;
}

.postBody h5,
.postBody h6 {
  font-size: 20px;
  font-weight: 400;
  line-height: 25px;
}

/*
 * Het roze streepje voor een h2 en een h3. Als inline-block en niet absoluut:
 * de tekst begint erachter en loopt bij een tweede regel wél door tot de
 * linkerrand — zo staat het op samdesign.nl.
 */
.postBody h2::before,
.postBody h3::before {
  content: '';
  display: inline-block;
  position: relative;
  margin-left: -7px;
  background: var(--postMark) center / cover no-repeat;
}

.postBody h2::before {
  width: 35px;
  height: 40px;
  margin-top: 5px;
  margin-bottom: -5px;
}

.postBody h3::before {
  width: 23px;
  height: 22px;
}

/*
 * Opsommingen: de reset haalt de bolletjes van alle lijsten, hier komen ze
 * terug. 20px naar binnen zonder padding, dus het bolletje staat in die marge.
 */
.postBody ul,
.postBody ol {
  margin: 0 0 22.5px 20px;
  padding-left: 0;
}

.postBody ul {
  list-style-type: disc;
}

.postBody ol {
  list-style-type: decimal;
}

.postBody li {
  margin: 0;
}

.postBody a {
  color: var(--colorPink);
  text-decoration: underline;
  transition: color 0.3s;
}

.postBody a:hover {
  color: var(--colorNavy);
}

.postBody strong {
  font-weight: 700;
}

/*
 * Een afbeelding in de tekst staat in een alinea en is daar inline, dus staat er
 * onder de afbeelding de ruimte van de regel. De reset maakt van elke img een
 * blok; hier zetten we dat terug, want die ruimte hoort bij de maatvoering van
 * de bestaande site.
 */
.postBody p > img {
  display: inline;
}

/* ==================================================================
   Tabellen
   ================================================================== */

/*
 * De tabellen komen uit de artikelen zelf en zijn nooit smaller dan 750px, ook
 * niet op een telefoon. Zes van de acht artikelen met een tabel hebben in de
 * inhoud een div.tablediv eromheen die dan schuift; de andere twee niet, en daar
 * schuift de pagina zelf — precies als op samdesign.nl (zie docs/openstaand.md).
 * De class komt uit de inhoud en is daarom niet camelCase (R5 gaat over onze
 * eigen classes).
 */
.postBody .tablediv {
  width: 100%;
  /* Dicht op de y-as, anders vangt de rij het scrollen van de pagina op (§7). */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.postBody table {
  min-width: 750px;
  margin: 0 0 22.5px;
}

.postBody th,
.postBody td {
  min-width: 150px;
  padding: 8px;
  border: 0;
  vertical-align: middle;
}

.postBody th {
  background: var(--postTableHead);
  color: var(--colorWhite);
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
}

.postBody tr:nth-of-type(even) td {
  background: var(--postTableStripe);
}

/* ==================================================================
   Gerelateerde artikelen
   ================================================================== */

/*
 * Dezelfde sectie als "Tips & trends" op de homepage, met drie verschillen op
 * samdesign.nl: de kop is 70px in plaats van 100px, de sectie houdt op tablet
 * 100px lucht in plaats van 150, en de stempel is daar weg in plaats van
 * zichtbaar. Onder 768px is alles weer gelijk.
 *
 * Onopgesmukt .blogSlider en niet iets met een eigen class erbij: dit bestand
 * laadt alleen op een berichtpagina, en daar is die sectie er maar één. Dat het
 * ná components/blogSlider.css staat regelt inc/assets.php met een dependency.
 */
@media (min-width: 1025px) {
  .blogSlider .sectionTitle {
    font-size: 70px;
    line-height: 90px;
    letter-spacing: -0.05em;
  }

  /* De link staat hier op de onderrand van de inleiding; bij "Tips & trends" op
     de bovenrand. */
  .blogSliderHeader > .textLink {
    align-self: flex-end;
  }
}

/* Tussen 768 en 1024 houdt de sectie 100px lucht; onder 768 is dat weer de 40px
   van het component zelf. Vandaar de ondergrens in deze query. */
@media (min-width: 768px) and (max-width: 1024px) {
  .blogSlider {
    margin-block: 100px;
  }
}

@media (max-width: 1024px) {
  /* De stempel is hier weg; op de homepage staat hij op deze breedte nog wel. */
  .blogSliderStamp {
    display: none;
  }

  /*
   * En de link zakt hier al onder de kaarten, terwijl dat op de homepage pas
   * onder 768px gebeurt. Zelfde aanpak als daar: de header wordt display:
   * contents, zodat de link zelf vak in de kolom van de sectie wordt.
   */
  .blogSlider > .container {
    display: flex;
    flex-direction: column;
  }

  .blogSliderHeader {
    display: contents;
  }

  /* margin-inline en niet align-self: het component zet hierboven margin-left op
     auto, en een auto-marge weegt zwaarder dan align-self. */
  .blogSliderHeader > .textLink {
    order: 1;
    margin-block-start: 50px;
    margin-inline: auto;
  }
}

/* ==================================================================
   Onder 1025px: één kolom
   ================================================================== */

@media (max-width: 1024px) {
  .postLayout {
    grid-template-areas:
      'head'
      'intro'
      'toc'
      'body';
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
  }

  /* Hij staat nu in de tekst, met 20px eronder. */
  .postToc {
    margin-bottom: 20px;
  }

  .postTitle {
    line-height: 55px;
  }

  /*
   * De kop van de inhoudsopgave loopt hieronder mee met .sectionTitleSmall en is
   * op tablet dus veel groter dan op desktop. Dat is geen vergissing in onze
   * CSS: op samdesign.nl hangt hij aan dezelfde typografie-instelling als de
   * paginakop, en die staat op 50/55.
   */
  .postTocTitle {
    font-size: 50px;
    line-height: 55px;
    letter-spacing: -0.05em;
  }

  .postTocItem {
    line-height: 33px;
  }
}

@media (max-width: 767px) {
  .postTitle {
    line-height: 35px;
  }

  .postTocTitle {
    font-size: 35px;
    line-height: 35px;
  }

  .postTocItem {
    line-height: 25px;
  }

  .postMetaTerm,
  .postMetaValue {
    font-size: 15px;
    line-height: 25px;
  }

  .postBody h2 {
    font-size: 32px;
    line-height: 34px;
  }

  .postBody h4 {
    font-size: 22px;
  }

  .postBody h5,
  .postBody h6 {
    font-size: 19px;
  }
}

/*
 * Onder 691px passen de drie metaregels niet meer naast elkaar. De eerste houdt
 * zijn eigen breedte; de andere twee nemen een hele regel en laten hun streepje
 * vallen. Die 691 is een eigen grens van samdesign.nl en geen van de twee
 * gebruikelijke.
 */
@media (max-width: 690px) {
  .postMetaUpdated,
  .postMetaReading {
    flex-basis: 100%;
    border-left: 0;
    padding-left: 0;
  }

  .postMetaUpdated {
    margin-right: 0;
  }
}