/**
 * Raakvlakken en leesbreedte, sitebreed.
 *
 * Twee dingen die overal spelen en daarom niet in tien pagina-stylesheets thuis
 * horen, want dan gaan ze uit elkaar lopen.
 *
 * 1. Een raakvlak van minstens 44 px. Gemeten in de doorloop van 6 september
 *    2026 op 390 px: toonknoppen 38 hoog, "of laat de tekening weg" 18, "of
 *    blader zelf door de woorden" 19, de soortknoppen op de klaar-pagina 36, de
 *    kleine knoppen daaronder 39, en de vergrootknop op de productpagina 38 bij
 *    38. Dat is de maat waaronder een duim mist, en het thema schrijft zelf al
 *    op dat 44 de ondergrens is (zie `.btn-icon` in style.css).
 *
 *    Twee technieken, en het verschil is met opzet. Wat al een knopvorm heeft
 *    wordt gewoon hoger: dat verandert niets aan de tekst en niets aan de rij.
 *    Wat klein hóórt te lezen (een onderstreepte schakelaar, een samenvouwer)
 *    krijgt een onzichtbaar vlak eroverheen via een pseudo-element: het
 *    raakvlak groeit, het beeld niet, en de regels eromheen blijven staan waar
 *    ze stonden.
 *
 * 2. Een leesregel van hoogstens ongeveer 65 tekens. Gemeten op 1440 px stonden
 *    de service- en landingspagina's op 83 tot 108 tekens. De bron is een oude
 *    bekende: `.art-body > *` staat op `max-width:58ch`, en `ch` is de breedte
 *    van het cijfer nul. In Figtree is dat ruim anderhalf keer een gemiddelde
 *    kleine letter, dus 58ch levert ongeveer 96 tekens op. Gemeten en
 *    teruggerekend: 65 tekens is hier 42ch.
 *
 * Deze laag laadt ná systeem.css en de pagina-stylesheets, want hij corrigeert
 * wat daar staat.
 *
 * @package complimentje-bridge
 */

/* ==========================================================================
 * 1. Raakvlakken
 * ========================================================================== */

/* --- wat al een knop is, wordt hoger ------------------------------------- */

.choice-tile,
.cmpl-kiezer__soort,
.cmpl-kiezer__maat,
.cmpl-kiezer__chip,
.cmpl-kiezer__meer,
.klaar__kleinknop,
.pdp-vergroot {
  min-height: 44px;
}

/* Een knop met een kort label ("A6", "Mok") wordt vanzelf smal. Een duim is
   ongeveer even breed als hij hoog is, dus die maat geldt beide kanten op. */
.cmpl-kiezer__maat,
.pdp-vergroot {
  min-width: 44px;
}

/* --- wat als tekst leest, maar wel een knop is ---------------------------
   Een onderstreepte schakelaar, een samenvouwer, een losse link onder een knop:
   die horen klein te lezen maar zijn wel degelijk iets waar je op tikt. Ze
   krijgen daarom een echte hoogte van 44 px en centreren hun tekst daarin. Dat
   is bewust geen onzichtbaar vlak via een pseudo-element: zo'n vlak vergroot
   het raakvlak wel, maar het element blijft in elke meting 18 px, en dan kun je
   niet nameten of het klopt. De letters blijven even groot en de rijen zijn
   flex of grid, dus een hoger element centreert zichzelf. */

.maak-tekenknop__weg,
.maak-tekenknop__terug,
.maak-keuze__blader,
.cmpl-jouwtekst__edit,
.cmpl-maak-link,
.pbtn,
/* `.link` is de klasse voor een link die als bediening dient (onder een knop,
   naast een keuze). Een link midden in een alinea draagt hem niet, dus die
   blijft een woord in lopende tekst en wordt hier niet opgerekt. */
.link,
main details > summary,
/* De titel van een artikel in een lijst is de manier waarop je hem opent, dus
   ook een raakvlak. Op een telefoon gaf de regelhoogte van een h3 precies 38 px:
   zes pixels te weinig, zes keer op een rij. */
main h3 > a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

main h3 > a {
  justify-content: flex-start;
}

/* Een samenvouwer vult de breedte en lijnt links uit; centreren zou zijn label
   van de rand halen. */
main details > summary {
  display: flex;
  justify-content: flex-start;
}

/* --- het filterpaneel laat niets achter -----------------------------------
   `.cmpl-fmenu` staat op `position:absolute` met `display:flex`. Een dichte
   `<details>` verbergt zijn inhoud in moderne browsers met
   `content-visibility`, maar dat is een gedrag waar je op vertrouwt en geen
   regel die je opschrijft: in de doorloop van 6 september 2026 telden de
   achttien filterlinks op elke categoriepagina mee voor toetsenbord en
   schermlezer, als achttien naamloze links. Dit zegt het gewoon. */
.cmpl-fselect:not([open]) .cmpl-fmenu {
  display: none;
}

/* ==========================================================================
 * 2. Leesbreedte op de tekstpagina's
 *
 * Alleen op breed: mobiel klopt het al, daar is het scherm de grens.
 * ========================================================================== */

@media (min-width: 781px) {
  .art-body > p,
  .art-body > ul,
  .art-body > ol,
  .art-body > h2,
  .art-body > h3,
  .cmpl-landing__faq p,
  .cmpl-landing__faq li,
  .cmpl-landing__intro p,
  [class*="cmpl-landing__"] > p {
    max-width: 40ch;
  }

  /*
   * En dan ook in het midden zetten, anders blijft de smalle kolom links
   * plakken met een halve lege pagina ernaast.
   *
   * `style.css` zet op `.art-body > *` netjes `margin-left:auto` en
   * `margin-right:auto`, maar even verderop staan daar ook `.art-body p` en
   * `.art-body h2` met een `margin`-korte schrijfwijze, en die zet de zijkanten
   * terug op nul. Even specifiek, later in het bestand: die wint. Op 58ch viel
   * dat nauwelijks op, want dan is de kolom bijna zo breed als het blok. Op
   * 40ch is het op /inspiratie/ 135 px scheef in een blok van 718.
   *
   * Alleen `.art-body`, en niet de landingsselectors hierboven: die hebben hun
   * eigen indeling en horen te blijven staan waar ze staan.
   *
   * Op de artikelen zelf gebeurt hier niets. Daar wint `.single .art-body > *`
   * uit style.css met twee klassen van deze regel met één, dus die houden 58ch
   * en stonden al gecentreerd.
   */
  .art-body > p,
  .art-body > ul,
  .art-body > ol,
  .art-body > h2,
  .art-body > h3 {
    margin-left: auto;
    margin-right: auto;
  }

  /*
   * De leesregel als kolom, en niet per element.
   *
   * `ch` is de breedte van een nul in de letter van het element zélf. Op een
   * kop van 22 px is 40ch dus veel breder dan op een alinea van 15: gemeten op
   * /inspiratie/ 568 tegen 385. Dan staat de kop over de tekst heen te steken
   * en krijg je een trapje, ook als allebei netjes in het midden staan.
   *
   * Daarom staat de maat hier op het blok. Daar wordt hij één keer uitgerekend,
   * op de tekstgrootte, en de kop kan er niet meer buiten. `.wrap` heeft 32 px
   * ruimte aan weerskanten, dus die telt erbij op.
   *
   * Alleen de afsluitende tekstblokken, die als `.section--soft > .wrap.art-body`
   * op /inspiratie/ en /persoonlijke-cadeaus/ staan. De artikelen blijven zoals
   * ze zijn: daar wint `.single .art-body > *` uit style.css met 58ch, en die
   * stonden al goed.
   */
  .section--soft > .wrap.art-body {
    max-width: calc(40ch + 64px);
  }

  .section--soft > .wrap.art-body > * {
    max-width: 100%;
  }
}


/* ==========================================================================
 * 3. Koppen die van niveau veranderden, maar niet van vorm
 * ========================================================================== */

/* De feiten op de productpagina zijn per 6 september 2026 een h2 in plaats van
   een h3, omdat de koppenreeks daar van h1 naar h3 sprong. De vorm hoort
   hetzelfde te blijven; style.css wordt gegenereerd en kent alleen de h3, dus
   de twee regels van daar staan hier voor de h2. */
.pdp-feiten h2 {
  margin: 0 0 var(--s2);
  font-size: var(--fs-body);
  letter-spacing: .02em;
}


/* ==========================================================================
 * 4. Eén focusring
 *
 * Geteld op 8 september 2026 in de eigen stylesheets: twintig verschillende
 * focusringen (var(--kleur-rood), var(--knop-vol), var(--knop-vol-hover),
 * var(--terra), var(--kleur-grond), diktes van 1 en 2 px, offsets van 0, 3 en
 * 8 px) en negen regels die de ring helemaal weghalen met outline:none. Wie met
 * het toetsenbord door de site loopt ziet dus per onderdeel iets anders, en op
 * de invoervelden van afrekenen, teams en de namen op de kaart helemaal niets:
 * daar is de ring vervangen door een randkleur, en een randkleur die van
 * greige naar terracotta gaat is geen focusring.
 *
 * De afspraak is er één: 2px solid #C9414C, offset 2, op :focus-visible.
 *
 * Waarom hier, en waarom met !important. De meeste van die twintig staan in
 * style.css, en dat bestand komt verbatim uit het design lab en wordt niet met
 * de hand aangepast. De rest staat in checkout.css en teams.css, die ná deze
 * laag worden ingeladen. Een regel die het zonder !important wint, zou elke
 * bestaande selector opnieuw moeten opschrijven met een hogere soortelijkheid:
 * twintig regels om er één af te dwingen, en elke nieuwe knop in style.css valt
 * er weer buiten. Dit is een ondergrens voor toegankelijkheid en geen opmaak,
 * en dan is dit precies waar !important voor is.
 *
 * :focus-visible en niet :focus, zodat een muisklik op een knop of een tik in
 * een veld geen ring geeft. Wat met de muis of programmatisch focus krijgt (de
 * overslaan-doelen .cmpl-bouwer en .cmpl-strook-sectie hebben tabindex="-1")
 * blijft dus zonder ring, en dat is de bedoeling.
 * ========================================================================== */

:focus-visible {
  outline: 2px solid var(--kleur-rood) !important;
  outline-offset: 2px !important;
}