/* ============================================================
   Letterschaal: de drie A's, voor elk thema hetzelfde
   ============================================================

   WAAROM DIT BESTAAT. Elke site had zijn eigen drie A's, en ze deden alle vier iets anders:
   lodewijk kende klein/normaal/groot en schaalde alleen de schil, franeker en wieringerwerf
   schaalden de hele pagina maar met verschillende percentages, en kolhorn en julianadorp draaiden
   aan de wortelgrootte met standen die "normaal", "groter" en "grootst" heetten -- waarbij
   "normaal" de KLEINSTE was en "groter" de standaard. Drie sites hadden helemaal geen knoppen.
   Wie tussen de sites wisselde kreeg dus elke keer iets anders.

   Hier staat het nu één keer: dezelfde drie standen, dezelfde percentages, dezelfde standaard.

   WAAROM ZOOM EN NIET DE WORTELGROOTTE. De thema's zijn in twee families geschreven. Franeker en
   lodewijk zetten hun maten in pixels (143 en 184 stuks), kolhorn, julianadorp en wieringerwerf in
   rem (rond de 200 elk). Aan de wortelgrootte draaien werkt alleen bij die tweede familie; bij de
   eerste gebeurt er dan niets. Zoom schaalt allebei, dus is dit de enige manier om hetzelfde gedrag
   te krijgen zonder ruim driehonderd maten te herschrijven.

   HET THEMA BEPAALT WÁT ER SCHAALT, niet hoevéél. De factor staat hier; welk element hem krijgt
   staat in het thema zelf (`--letterschaal` toepassen op de schil of op de body). Lodewijk schaalt
   bewust alleen zijn schil en niet de body: op de body zou de plakkende kopbalk zijn houvast
   kwijtraken.
   ============================================================ */

:root {
    /* De middelste stand is de standaard en blijft 1. Een bezoeker die nooit iets aanraakt hoort
       de site te zien zoals hij ontworpen is. */
    --letterschaal: 1;
}

html[data-schaal="klein"]   { --letterschaal: .93; }
html[data-schaal="normaal"] { --letterschaal: 1; }
html[data-schaal="groot"]   { --letterschaal: 1.14; }

/* De drie knoppen zelf. Ook die zagen er per site anders uit; dit is de gedeelde vorm.
   Een thema mag de kleuren overschrijven, de MATEN horen gelijk te blijven. */
.letterschaal {
    display: inline-flex;
    gap: 1px;
    background: var(--letterschaal-lijn, rgba(128, 128, 128, .35));
    border: 1px solid var(--letterschaal-lijn, rgba(128, 128, 128, .35));
    border-radius: 5px;
}

.letterschaal button {
    border: 0;
    background: var(--letterschaal-vlak, transparent);
    color: var(--letterschaal-inkt, inherit);
    min-width: 34px;
    height: 32px;
    padding: 0 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    line-height: 1;
}

.letterschaal button:first-child { border-radius: 4px 0 0 4px; }
.letterschaal button:last-child  { border-radius: 0 4px 4px 0; }

/* ELK FIGUUR IN EEN EVEN GROOT VAKJE. De drie A's verschillen in lettergrootte -- daar herken je
   een tekstgrootte-knop aan -- maar het gekozen vlak eronder moet bij alle drie even groot ogen.
   Zonder dit droeg de kleine A een vlak van 11 pixels hoog en de grote een van 17, en dan lijken de
   knoppen niet even groot. Dezelfde 21 bij 21 als de weergaveknoppen ernaast. */
.letterschaal button > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    line-height: 1;
}

.letterschaal button[data-letterschaal="klein"]   > span { font-size: 11px; }
.letterschaal button[data-letterschaal="normaal"] > span { font-size: 14px; }
.letterschaal button[data-letterschaal="groot"]   > span { font-size: 17px; }

.letterschaal button[aria-pressed="true"] {
    background: var(--letterschaal-aan, #2c6ab0);
    color: var(--letterschaal-aan-inkt, #fff);
}

.letterschaal button:hover:not([aria-pressed="true"]) {
    background: var(--letterschaal-hover, rgba(128, 128, 128, .18));
}

/* Wie liever niet met bewegende maten werkt, krijgt geen sprongetje te zien: het schalen zelf is
   een directe wissel, niet iets wat animeert. Hier staat alleen de belofte dat we niets toevoegen. */
@media (prefers-reduced-motion: reduce) {
    .letterschaal button { transition: none; }
}

/* Het plekje in de portalkop. De knoppen staan daar tussen het menu en het accountblok; zonder
   deze regel plakken ze tegen hun buren aan. Alleen zichtbaar vanaf de brede schermen -- op een
   telefoon zit de kop al vol en knijp je gewoon met het toestel zelf. */
.letterschaal-in-kop {
    align-items: center;
    margin-left: .75rem;
}