/*
 * Eén begrip uit de kennisbank (/faq/<categorie>/<begrip>/) — CLAUDE.md §21.
 *
 * Alleen hier geladen (R8). Wat erin staat: het raster met de twee kolommen, de
 * kop met de auteursregel, de inhoudsopgave en de typografie van het artikel.
 * De sectie "Gerelateerde artikelen" eronder heeft zijn eigen bestand
 * (components/faqSlider.css) en de kaart daarin components/faqCard.css.
 *
 * Alle maten zijn gemeten op https://www.samdesign.nl/faq/websites/
 * wat-is-een-plug-in/ en /faq/branding/wat-is-kleurenleer/ (die laatste heeft de
 * enige figure en de enige h4 van de 49) op 1440, 1024, 767 en 390px.
 *
 * De regels ín de inhoudsopgave stonden hier eerst fout: overgenomen uit
 * pages/post.css, omdat de widget van Elementor zijn lijst met JavaScript bouwt
 * en er in headless dus geen lijst was om na te meten. Dat scheelde 8px per
 * regel — een bericht staat op 15/25 en een begrip op 15/33. Meten kan wél, en
 * je hebt de uitgestelde scripts er niet voor nodig: hang zelf een
 * <li class="elementor-toc__list-item"> met een
 * <a class="elementor-toc__list-item-text"> in de widget en lees af wat de
 * pagina ermee doet (/root/samshots/js/faqTocEcht.js). Dat leest de CSS die een
 * echte bezoeker bij het eerste beeld al krijgt, dus is het ook het antwoord op
 * de vraag of die opmaak wel aankomt.
 */

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

.faqArticle {
  /*
   * Het roze schuine streepje voor de kop van de pagina en voor een h2 en h3 in
   * het artikel, en als markering in de inhoudsopgave. Dezelfde SVG als op het
   * portfolio-archief en in een bericht; de vulling is #dc0356, nét een andere
   * roze dan --colorPink en --colorPinkDeep — zo staat het in de bron van
   * samdesign.nl.
   */
  --faqMark: 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. */
  --faqMarkFaint: 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");

  --faqMetaColor: #848fa0;
  --faqMetaLine: #848fa033;

  margin-block: 50px;
}

/* ==================================================================
   Het raster: artikel links, inhoudsopgave rechts
   ------------------------------------------------------------------
   Op samdesign.nl is de linkerkolom 750px breed en de rechter 350, met 75px
   ertussen — samen 1175 van de 1280 die de container biedt. De 105px die
   overblijven staan daar leeg; de linkerkolom is dus een vaste maat en niet wat
   er overblijft, anders dan op een berichtpagina.

   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 auteursregel en de tekst — daar staat hij op de bestaande site
   ook, als tweede widget.
   ================================================================== */

.faqLayout {
  display: grid;
  grid-template-areas:
    'head toc'
    'meta toc'
    'body toc';
  grid-template-columns: minmax(0, 750px) 350px;
  grid-template-rows: auto auto 1fr;
  column-gap: 75px;
}

.faqItemHeader {
  grid-area: head;
}

.faqItemMeta {
  grid-area: meta;
}

/*
 * 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 staat op geen enkele pagina in de bundel, dus doet die
 * instelling daar niets. Op verzoek van de gebruiker doen wij het wél: bewuste
 * afwijking van R9, zie docs/beslissingen.md. align-self blijft staan, anders
 * rekt het vak zich over alle drie de rijen uit en heeft sticky niets om binnen
 * te schuiven.
 */
.faqToc {
  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 op een bericht- en
 * een artikelpagina. max-height plus overflow houdt een lange inhoudsopgave
 * binnen het scherm.
 *
 * Alleen boven 1024px: daaronder staat de lijst in de tekst.
 */
@media (min-width: 1025px) {
  .faqToc {
    position: sticky;
    top: calc(var(--headerStickyHeight) + 30px);
    max-height: calc(100vh - var(--headerStickyHeight) - 60px);
    overflow-y: auto;
  }
}

.faqItemBody {
  grid-area: body;
}

/*
 * Het laatste blok van het artikel houdt niets onder zich. Op samdesign.nl loopt
 * die laatste marge weg in de 150px naar "Gerelateerde artikelen" — marges van
 * op elkaar volgende blokken vallen daar samen. Een rasteritem is geen blok in
 * die stroom, dus zou die 24px hier bovenop de 150 komen.
 */
.faqItemBody > :last-child {
  margin-bottom: 0;
}

/* ==================================================================
   De kop
   ------------------------------------------------------------------
   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.
   ================================================================== */

.faqItemTitle {
  margin-bottom: 30px;
  line-height: 60px;
}

/*
 * Het roze streepje voor de kop. 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. Dezelfde behandeling als een h2 in het artikel,
 * alleen zonder de correctie van 5px: die staat daar op de h2 en niet hier.
 */
.faqItemTitle::before {
  content: '';
  display: inline-block;
  position: relative;
  width: 35px;
  height: 40px;
  margin-left: -7px;
  background: var(--faqMark) center / cover no-repeat;
}

/* ==================================================================
   De auteursregel
   ------------------------------------------------------------------
   De foto, "Auteur: …" en "Laatst geüpdatet: …" op één regel, met de tekst
   verticaal in het midden van de foto. De maat staat op de tekst en niet op het
   vak eromheen: het vak houdt zo de regelhoogte van de body (1,5 × 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.
   ================================================================== */

.faqItemMeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 20px;
  margin-bottom: 20px;
  color: var(--faqMetaColor);
}

.faqArticle .faqItemMeta .faqItemPhoto {
  flex: none;
  width: 64px;
  height: 64px;
  object-fit: cover;
}

/*
 * Twee naam-waardeparen, dus een dl en geen rij losse alinea's. Elk paar zit 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.
 */
.faqItemMetaList {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 20px;

  /*
   * Basis nul en niet auto: met auto is de basis van de dl zijn max-content —
   * de twee regels naast elkaar — en dan past hij niet meer naast de foto en
   * wijkt hij in zijn geheel naar de volgende regel. Op samdesign.nl blijft de
   * eerste regel naast de foto staan en zakt alleen de tweede.
   */
  flex: 1 1 0;
  min-width: 0;
}


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

/* De eerste regel staat 27px na de foto; dat is geen kader maar zo staat het op
   samdesign.nl. */
.faqItemMetaAuthor {
  margin-left: 27px;
}

.faqItemMetaAuthor,
.faqItemMetaUpdated {
  margin-right: 20px;
}

/*
 * Een dun streepje tussen de twee regels, niet ervoor: de eerste heeft er geen.
 * Het staat op het naamdeel en dat is inline, dus is de streep zo hoog als de
 * letters — op samdesign.nl staat hij daar ook op de span en niet op het vak.
 */
.faqItemMetaUpdated .faqItemMetaTerm {
  border-left: 1px solid var(--faqMetaLine);
  padding-left: 20px;
}

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

.faqTocTitle {
  /*
   * 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;
  color: var(--colorNavy);
  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 de link zou hij alleen voor de eerste regel gelden,
 * en dan begint een kop die afbreekt tegen de linkerrand.
 */
.faqTocItem {
  padding-left: 30px;
  font-size: 15px;
  line-height: 33px;
  margin-bottom:.5em;
}

/*
 * De link heeft de kleur van de lopende tekst en geen streep: de inhoudsopgave
 * leest als de koppen waar hij naar wijst. Onder de muis en bij toetsenbordfocus
 * komt de streep terug — dat is dan de enige aanwijzing dat het een link is.
 */
.faqTocLink {
  position: relative;
  color: var(--colorNavy);
  text-decoration: none;
}

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

.faqTocLink::before {
  content: '';
  position: absolute;
  top: 1px;
  left: -23px;
  width: 11px;
  height: 19px;
  background: var(--faqMarkFaint) 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). */
.faqTocLink[aria-current]::before {
  background-image: var(--faqMark);
}

/* ==================================================================
   Het artikel
   ------------------------------------------------------------------
   De lopende tekst is hier 16/27 en niet de 15/25 van een bericht. Onder 768px
   zakt hij wél naar 15/25.
   ================================================================== */

.faqItemBody {
  color: var(--colorNavy);
  font-size: 16px;
  line-height: 27px;
}

.faqItemBody p,
.faqItemBody figure {
  margin: 0 0 24px;
}

.faqItemBody h2,
.faqItemBody h3,
.faqItemBody h4,
.faqItemBody h5,
.faqItemBody h6 {
  margin: 0 0 20px;
  color: var(--colorNavy);
}

/* Springen vanuit de inhoudsopgave mag niet onder de vastgezette header
   eindigen. Die spronghoogte staat als scroll-padding-top op html in main.css. */
.faqItemBody h2 {
  font-size: 40px;
  font-weight: 500;
  line-height: 59px;
  letter-spacing: -0.05em;
}

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

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

.faqItemBody h5,
.faqItemBody 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.
 */
.faqItemBody h2::before,
.faqItemBody h3::before {
  content: '';
  display: inline-block;
  position: relative;
  margin-left: -7px;
  background: var(--faqMark) center / cover no-repeat;
}

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

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

/*
 * Opsommingen: de reset haalt de bolletjes van alle lijsten, hier komen ze
 * terug. Naar binnen zonder padding, dus het teken staat in die marge. Een
 * genummerde lijst staat verder naar binnen dan een lijst met bolletjes — 48
 * tegen 20 — en dat is wat samdesign.nl doet.
 */
.faqItemBody ul,
.faqItemBody ol {
  margin: 0 0 24px 20px;
  padding-left: 0;
}

.faqItemBody ol {
  margin-left: 48px;
  list-style-type: decimal;
}

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

.faqItemBody li {
  margin: 0;
}

/*
 * Een link in de tekst is roze en zonder streep — anders dan in een bericht,
 * waar hij wél onderstreept is. Zo staat het op samdesign.nl: daar verandert er
 * bij hover niets aan zo'n link, ook de kleur niet (gemeten met een muis erop).
 *
 * De streep bij hover en focus is er wél bij ons. In rust ziet de link er
 * daardoor uit als op de bestaande site, maar kleur alleen is een zwakke
 * aanwijzing dat er iets aanklikbaar is; zie docs/beslissingen.md.
 */
.faqItemBody a {
  color: var(--colorPink);
  text-decoration: none;
}

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

.faqItemBody strong,
.faqItemBody b {
  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.
 */
.faqItemBody p > img {
  display: inline;
}

/*
 * Eén artikel heeft afbeeldingen met een bijschrift ("Wat is kleurenleer?"). De
 * breedte staat als inline stijl in de inhoud zelf — dat is de uitvoer van
 * WordPress en geen markup van ons (§6). Wat hier staat is alleen het bijschrift.
 */
.faqItemBody figcaption {
  padding-top: 5px;
  font-size: 0.75em;
}

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

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

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

  .faqItemTitle {
    line-height: 55px;
  }

  /*
   * De kop van de inhoudsopgave loopt 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.
   */
  .faqTocTitle {
    font-size: 50px;
    line-height: 55px;
  }

  /*
   * De regel wordt hier 20px groot en houdt zijn regelhoogte van 33. Dat is
   * geen vergissing: onder 1025px staat op samdesign.nl een tweede widget met
   * zijn eigen typografie, en die staat op 20/33.
   */
  .faqTocItem {
    font-size: 20px;
  }

  .faqItemBody h2 {
    font-size: 30px;
    line-height: 40px;
  }

  .faqItemBody h2::before {
    width: 23px;
    height: 22px;
  }
}

/* ==================================================================
   Onder 768px
   ================================================================== */

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

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

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

  .faqItemMetaTerm,
  .faqItemMetaValue {
    font-size: 15px;
    line-height: 25px;
  }

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

  .faqItemBody p,
  .faqItemBody figure,
  .faqItemBody ul,
  .faqItemBody ol {
    margin-bottom: 22.5px;
  }

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

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

/*
 * Onder 691px passen de foto en de twee regels niet meer naast elkaar. De
 * eerste regel blijft naast de foto staan; de tweede neemt een hele regel en
 * laat zijn streepje vallen. Die 691 is een eigen grens van samdesign.nl en geen
 * van de twee gebruikelijke — precies dezelfde als op een berichtpagina.
 *
 * De negatieve marge haalt de breedte van de foto terug: de dl begint erachter,
 * en de regel die eronder zakt hoort op de rooilijn van de pagina te beginnen.
 */
@media (max-width: 690px) {
  /*
   * De foto staat nu naast één regel in plaats van tussen twee, dus hangt hij
   * aan de bovenkant en niet in het midden van het hele blok. De eerste regel
   * krijgt de hoogte van de foto en zet zijn tekst zelf in het midden — dat is
   * wat de drie vakken op samdesign.nl op élke breedte doen.
   *
   * Een vak dat flex wordt, verliest de spatie tussen "Auteur:" en de naam: die
   * komt in de HTML uit het regeleinde tussen de twee elementen, en flexbox
   * gooit witruimte tussen vakken weg. Vandaar de column-gap — een spatie is in
   * dit lettertype 0,25em breed (gemeten: 3,7px op 16px).
   */
  .faqItemMeta {
    align-items: flex-start;
  }

  .faqItemMetaAuthor {
    display: flex;
    align-items: center;
    column-gap: 0.25em;
    min-height: 64px;
  }

  .faqItemMetaUpdated {
    flex-basis: calc(100% + 64px);
    margin-left: -64px;
    margin-right: 0;
  }

  .faqItemMetaUpdated .faqItemMetaTerm {
    border-left: 0;
    padding-left: 0;
  }
}