/**
 * Taal-eigen typografie.
 *
 * Eén plek die weet hoe een taal eruitziet, in plaats van tien plekken die er
 * elk een stukje van weten. Wat hier staat hangt af van de taal van de tekst en
 * van niets anders: afbreking, aanhalingstekens, en het uitbalanceren van korte
 * regels die per taal langer of korter uitvallen.
 *
 * Wat hier NIET hoort: kleur, ruimte, hoek, lijndikte. Die staan in
 * ontwerpsysteem.css en zijn in elke taal hetzelfde. En geen enkele vertaalde
 * tekst; dit bestand kent geen woorden.
 *
 * Hij laadt na ontwerpsysteem.css en na style.css, want hij corrigeert maten
 * die daar gezet worden.
 *
 * DE HARDE SPATIE IS U+00A0 EN NOOIT U+202F
 * -----------------------------------------
 * Frans zet een spatie vóór een dubbele punt, een vraagteken en binnen zijn
 * guillemets. Typografisch hoort dat een smalle harde spatie te zijn (U+202F).
 * Gemeten op 20 september 2026: geen van onze negen letterbestanden draagt dat
 * teken. Op het scherm valt de browser dan terug op een andere letter en zie je
 * een sprongetje; in het drukbestand, waar de letter wél vastligt, wordt het een
 * leeg vakje midden in de zin. Daarom staat er overal `\00A0` (U+00A0) en mag
 * hier nooit `\202F` komen te staan, ook niet als het er mooier uitziet.
 *
 * @package complimentje-bridge
 */

/* ==========================================================================
 * 1. Aanhalingstekens
 *
 * De browser zet ze zelf, om alles wat in een <q> staat. Dat is de hele reden
 * dat dit werkt: de tekst in de database draagt geen tekens, en het teken past
 * zich aan de taal aan zodra de taal verandert. Wie ze in de tekst zet, zet ze
 * voor altijd Nederlands.
 *
 * `quotes` erft, dus één regel op de taal is genoeg; elke <q> en elk
 * ::before/::after dat `open-quote` gebruikt haalt hem daar op.
 *
 * Let op: assets/css/teams-voordeur.css zet `quotes:none` op
 * `.tv-print__woorden q`. Dat blijft staan en dat hoort ook: dat blok toont het
 * compliment zoals de drukker het zet, en op een tegeltje horen geen
 * aanhalingstekens. Een regel op het element zelf wint altijd van een geërfde
 * waarde, dus daar is geen gevecht; het is een bewuste uitzondering op één plek.
 * ========================================================================== */

:lang(nl){ quotes: '\201C' '\201D' '\2018' '\2019'; }   /* “…” en ‘…’ */
:lang(en){ quotes: '\201C' '\201D' '\2018' '\2019'; }   /* “…” en ‘…’ */
:lang(de){ quotes: '\201E' '\201C' '\201A' '\2018'; }   /* „…“ en ‚…‘ */
:lang(pl){ quotes: '\201E' '\201D' '\00AB' '\00BB'; }   /* „…” en «…» */
:lang(es){ quotes: '\00AB' '\00BB' '\201C' '\201D'; }   /* «…» en “…” */
:lang(it){ quotes: '\00AB' '\00BB' '\201C' '\201D'; }   /* «…» en “…” */

/* Frans, met de harde spatie binnen de guillemets. U+00A0, zie de kop van dit
   bestand. Het teken staat aan de binnenkant van het aanhalingsteken, want daar
   hoort de ruimte: « comme ceci ». */
:lang(fr){ quotes: '\00AB\00A0' '\00A0\00BB' '\2039\00A0' '\00A0\203A'; }

/* ==========================================================================
 * 2. Afbreking
 *
 * Alleen voor talen die woorden aan elkaar plakken. Nederlands, Duits en Pools
 * maken samenstellingen die in een smalle kolom niet passen, en op 320 px duwt
 * één zo'n woord de hele pagina scheef. Engels, Frans, Spaans en Italiaans
 * hebben dat probleem niet en krijgen dus niets; afbreken waar het niet nodig
 * is maakt een tekst alleen maar hakkeliger.
 *
 * `hyphenate-limit-chars: 8 4 4` is de rem: alleen woorden van acht letters of
 * meer, en nooit met minder dan vier letters aan een kant. Daarmee blijft
 * "complimentje" heel en breekt "verjaardagscadeau" wel. Zonder die rem breekt
 * een browser ook korte woorden af en krijg je een rafelrand van streepjes.
 *
 * Niet op koppen en niet op knoppen. Een kop is een beeld en hoort niet
 * doormidden; een knoptekst is een label van twee of drie woorden dat je in één
 * blik moet kunnen lezen. Daar is text-wrap:balance het goede gereedschap, zie
 * punt 3 hieronder.
 * ========================================================================== */

:is(:lang(nl), :lang(de), :lang(pl)){
  hyphens:auto;
  -webkit-hyphens:auto;
  hyphenate-limit-chars:8 4 4;
}

:is(:lang(nl), :lang(de), :lang(pl)) :is(
  h1, h2, h3, h4, h5, h6,
  button, summary, [role="button"],
  .btn, .btn-ghost, .cta, .pbtn, .tl-btn, .btn-icon, .chip,
  header nav a, .foot-groep__kop
){
  hyphens:manual;
  -webkit-hyphens:manual;
}

/* ==========================================================================
 * 3. Uitbalanceren van korte regels
 *
 * `text-wrap:balance` verdeelt een korte tekst gelijkmatig over zijn regels in
 * plaats van de laatste regel met één woord te laten eindigen. De site doet dat
 * al op negen plekken (koppen op de homepage, de stappenregel, de over-pagina),
 * maar niet op de twee plekken waar het per taal het meest scheelt: knoppen en
 * menu-items. Daar is de tekst een label van een paar woorden, en dat label
 * wordt in de ene taal twee keer zo lang als in de andere.
 *
 * Dit is de enige regel in dit bestand die niet aan een taal hangt, en dat is
 * met opzet: balanceren is nodig omdat de lengte per taal verschilt, niet omdat
 * een bepaalde taal het vraagt. Een lijst met alle talen erin zou hetzelfde
 * doen en zou bij elke nieuwe taal vergeten worden.
 *
 * Browsers die het niet kennen negeren de regel; er verandert dan niets.
 * ========================================================================== */

.btn, .btn-ghost, .cta, .pbtn, .tl-btn, .btn-icon,
button, [role="button"],
header nav#cmpl-hoofdmenu a,
.foot-groep__lijst a,
.cmpl-taalkiezer__link, .cmpl-taalkiezer__hier{
  text-wrap:balance;
}