/*
 * sitemapIndex + sitemapGroup — de sitemap van /sitemap/ (CLAUDE.md §35).
 *
 * Dit is de ene pagina die niet 1-op-1 van samdesign.nl komt: daar staan
 * honderdvijftig links onder vijf koppen op één kolom, en de gebruiker heeft
 * expliciet om een mooiere, overzichtelijkere versie gevraagd
 * (docs/beslissingen.md). Alle maten, kleuren en vormen komen wél uit de
 * bestaande taal van de site — de kopmaten uit main.css, het grijs van het
 * FAQ-vlak, het roze streepje van de footer en de inhoudsopgave, en het raster
 * van een berichtpagina.
 *
 * Twee kolommen: de groepen links, de index rechts. Anders dan de inhoudsopgave
 * van een bericht schuift deze index wél mee — daar staat in pages/post.css
 * uitgelegd waarom hij dat op samdesign.nl niet doet (de bibliotheek die het
 * moest uitvoeren staat niet in de bundel), en die reden geldt hier niet. Dat
 * hij niet achter de vastgezette header verdwijnt komt van de top hieronder.
 */

.sitemapIndex {
  /*
   * Het schuine streepje van de site, twee keer: vol en roze voor de regel waar
   * de muis op staat, klein en doorzichtig voor de rest. Dezelfde twee als in de
   * inhoudsopgave van een bericht; de doorzichtigheid zit in de SVG en niet in
   * opacity, zodat alleen de background-image wisselt.
   */
  --sitemapMark: 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");
  --sitemapMarkFaint: 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");

  /* Het grijs van het FAQ-vlak voor de index, en de dunne lijn van de topbar
     onder een groepskop. */
  --sitemapPanel: #f3f3f5;
  --sitemapRule: var(--colorTopbarBorder);

  padding-top: var(--sectionSpaceTop, 100px);
  padding-bottom: var(--sectionSpaceBottom, 150px);
}

/* De inleiding staat boven de twee kolommen en houdt de breedte van de
   linkerkolom, anders leest een regel van 1280px te lang. */
.sitemapIndexIntro {
  max-width: 855px;
  margin-bottom: 60px;
}

/*
 * Hetzelfde raster als een berichtpagina: wat er overblijft naast een kolom van
 * 350, met 75px ertussen. De index staat als eerste in de bron — dat is de
 * leesvolgorde van een inhoudsopgave, en onder 1025px staat hij daardoor zonder
 * omzetten boven de groepen.
 */
.sitemapIndexLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  column-gap: 75px;
}

.sitemapIndexGroups {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  row-gap: 80px;
}

/* ==================================================================
   De index rechts
   ================================================================== */

.sitemapNav {
  grid-column: 2;
  grid-row: 1;

  /*
   * align-self: start, anders rekt het vak zich over de hele rij uit en heeft
   * sticky niets om binnen te schuiven.
   *
   * De header is 134px hoog en staat vanaf 500px scrollen vast, dus parkeert het
   * vak daar 30px onder. max-height plus overflow houdt een lange index binnen
   * het scherm: met tien groepen past hij anders niet meer.
   */
  align-self: start;
  position: sticky;
  top: calc(var(--headerStickyHeight) + 30px);
  max-height: calc(100vh - var(--headerStickyHeight) - 60px);
  overflow-y: auto;
  padding: 30px 30px 30px 35px;
  background: var(--sitemapPanel);
}

/* Dezelfde maat als de kop van de inhoudsopgave van een bericht. */
.sitemapNavTitle {
  margin: 0 0 23px;
  font-size: 22px;
  font-weight: 500;
  line-height: 25px;
  letter-spacing: -0.05em;
}

.sitemapNavList {
  display: flex;
  flex-direction: column;
  row-gap: 6px;
}

/*
 * Het aantal staat rechts en is geen deel van de link: de toegankelijke naam van
 * de link is de naam van de groep en niet "Blog 33" (§6). Voor wie het voorleest
 * is het getal dus weg — het staat er als aanwijzing hoe groot een groep is, en
 * dat staat achter de kop van de groep zelf nog een keer, mét het woord erbij.
 */
.sitemapNavItem {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 12px;
  font-size: 17px;
  line-height: 28px;

  /*
   * Op een tablet staat de index in twee kolommen, en zonder dit knipt de
   * browser een regel middenin door: de naam blijft dan in de linkerkolom staan
   * en het getal begint bovenaan de rechter. Gemeten op 1024px, waar "Projecten."
   * zijn 30 kwijtraakte.
   */
  break-inside: avoid;
}

.sitemapNavLink {
  position: relative;
  padding-left: 23px;
  color: var(--colorNavy);
  text-decoration: none;
  transition: color 0.3s;
}

/*
 * Het streepje staat 7px vanaf de bovenkant van de letter en niet vanaf die van
 * de regel, net als in de inhoudsopgave: anders schuift het met de halve
 * regelafstand mee zodra de regelhoogte verandert.
 */
.sitemapNavLink::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  width: 11px;
  height: 19px;
  background: var(--sitemapMarkFaint) center / cover no-repeat;
}

.sitemapNavLink:hover,
.sitemapNavLink:focus-visible {
  color: var(--colorPink);
}

.sitemapNavLink:hover::before,
.sitemapNavLink:focus-visible::before {
  background-image: var(--sitemapMark);
}

.sitemapNavCount {
  flex: none;
  color: var(--colorTopbarText);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

/* ==================================================================
   Eén groep
   ================================================================== */

/*
 * De kop met het aantal ernaast op een dunne lijn. baseline en niet center: de
 * kop is 59px en het getal 20, dus zou center het getal midden naast de kop
 * hangen in plaats van op dezelfde regel.
 */
.sitemapGroupHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--sitemapRule);
}

.sitemapGroupTitle {
  margin: 0;
}

.sitemapGroupCount {
  flex: none;
  margin: 0;
  color: var(--colorTopbarText);
  font-size: 20px;
  line-height: 33px;
  font-variant-numeric: tabular-nums;
}

/*
 * De regel onder de kop met de link naar het overzicht ernaast. Dezelfde vorm
 * als .sectionHeader elders op de site: tekst links, "Alles bekijken" rechts, en
 * onder elkaar zodra het niet meer past.
 */
.sitemapGroupMeta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 40px;
  row-gap: 15px;
  margin-top: 25px;
}

.sitemapGroupIntro {
  max-width: 640px;
  margin: 0;
  font-size: var(--textSize);
  line-height: var(--textLine);
}

.sitemapGroupAll {
  flex: none;
}

/* ------------------------------------------------------------------
   De lijst links
   ------------------------------------------------------------------ */

/*
 * Het aantal kolommen komt van de instantie (styles() van het component) en er
 * staan er twee in: de gewone en die van een tablet, waar er ten hoogste twee
 * naast elkaar passen. Beide door PHP uitgerekend en niet met min() in de CSS —
 * een rekenfunctie in een integer-context is nog niet overal betrouwbaar.
 *
 * break-inside houdt een titel over twee regels bij elkaar in plaats van hem
 * over de kolomgrens te knippen.
 */
.sitemapGroupList {
  margin-top: 30px;
  column-count: var(--sitemapGroupColumns, 1);
  column-gap: 40px;
}

.sitemapGroupItem {
  break-inside: avoid;
  padding-block: 4px;
  font-size: 17px;
  line-height: 28px;
}

.sitemapGroupLink {
  position: relative;
  display: inline-block;
  padding-left: 23px;
  color: var(--colorNavy);
  text-decoration: none;
  overflow-wrap: break-word;
  transition: color 0.3s;
}

.sitemapGroupLink::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  width: 11px;
  height: 19px;
  background: var(--sitemapMarkFaint) center / cover no-repeat;
}

.sitemapGroupLink:hover,
.sitemapGroupLink:focus-visible {
  color: var(--colorPink);
}

.sitemapGroupLink:hover::before,
.sitemapGroupLink:focus-visible::before {
  background-image: var(--sitemapMark);
}

/* ------------------------------------------------------------------
   Een groep die per categorie gesplitst is
   ------------------------------------------------------------------ */

.sitemapGroupTerms {
  display: flex;
  flex-direction: column;
  row-gap: 45px;
  margin-top: 40px;
}

/* De categoriekop met het volle streepje ervoor, net als een footerkop. */
.sitemapGroupTermTitle {
  display: flex;
  align-items: center;
  margin: 0 0 15px;
  font-size: 26px;
  font-weight: 500;
  line-height: 33px;
  letter-spacing: -0.05em;
}

/*
 * De categorienaam is een link naar het archief van die categorie — een echte
 * pagina, dus hoort hij in de sitemap. Hij kleurt roze bij hover, net als de
 * links in de lijst eronder; een streep eronder zou de rij koppen rommelig
 * maken.
 */
.sitemapGroupTermTitle a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s;
}

.sitemapGroupTermTitle a:hover,
.sitemapGroupTermTitle a:focus-visible {
  color: var(--colorPink);
}

.sitemapGroupTermTitle::before {
  content: '';
  flex: none;
  width: 28px;
  height: 28px;
  margin-left: -7px;
  background: var(--sitemapMark) center / cover no-repeat;
}

/* De ruimte staat al op .sitemapGroupTerms en op de kop erboven. */
.sitemapGroupTerm .sitemapGroupList {
  margin-top: 0;
}

/* ==================================================================
   Kleiner dan 1440
   ================================================================== */

@media (max-width: 1024px) {
  /*
   * Eén kolom, en de index staat boven de groepen — dat is de bronvolgorde, dus
   * hoeft er niets omgezet te worden. Niet meer vastgezet: onder 1025px is de
   * header een ander ding en past een vak van 350 breed niet meer naast de
   * inhoud.
   */
  .sitemapIndexLayout {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 60px;
  }

  .sitemapNav {
    grid-column: 1;
    grid-row: 1;
    position: static;
    max-height: none;
    overflow: visible;
  }

  .sitemapIndexGroups {
    grid-column: 1;
    grid-row: 2;
    row-gap: 70px;
  }

  /* De index leest op een tablet als twee kolommen; er staan hoogstens tien
     regels in, dus is het geen lange lijst maar een blok. */
  .sitemapNavList {
    display: block;
    column-count: 2;
    column-gap: 40px;
  }

  .sitemapNavItem {
    padding-block: 3px;
  }

  .sitemapGroupList {
    column-count: var(--sitemapGroupColumnsTablet, 1);
  }
}

@media (max-width: 767px) {
  .sitemapIndex {
    padding-top: var(--sectionSpaceTopMobile, 60px);
    padding-bottom: var(--sectionSpaceBottomMobile, 75px);
  }

  .sitemapIndexIntro {
    margin-bottom: 40px;
  }

  .sitemapIndexLayout {
    row-gap: 45px;
  }

  .sitemapIndexGroups {
    row-gap: 55px;
  }

  .sitemapNav {
    padding: 25px 20px 25px 25px;
  }

  .sitemapNavList {
    column-count: 1;
  }

  /* Eén kolom links: twee naast elkaar op 390px levert regels van vier woorden
     op. */
  .sitemapGroupList {
    column-count: 1;
  }

  .sitemapGroupHeader {
    padding-bottom: 15px;
  }

  .sitemapGroupCount {
    font-size: 17px;
    line-height: 25px;
  }

  .sitemapGroupMeta {
    margin-top: 18px;
  }

  .sitemapGroupTermTitle {
    font-size: 22px;
    line-height: 28px;
  }

  .sitemapGroupTerms {
    row-gap: 35px;
    margin-top: 30px;
  }
}