/* ══ DE VOETTEKST VAN DE PUBLIEKE PAGINA'S ═══════════════════════════════════
 *
 * Eén bestand voor vier pagina's: de homepage, het inlogscherm, de
 * privacyverklaring en de 404. De ARENA doet hier niet aan mee — dat is een
 * applicatie en geen pagina met een voettekst.
 *
 * ⚠️ WAAROM DIT EEN GEDEELD BESTAND IS EN GEEN VIER KOPIEËN. Ze wáren vier
 * kopieën, en dat was aan alles te zien (gemeld 2026-09-02): op de ene stond
 * "SumoVolley.io" bovenaan en op de andere niet, de ene zei "© 2026
 * SumoVolley.io · v1.2" en de andere "© 2026 SumoVolley.io", de ene had een vlak
 * eromheen en de andere niet, de letters waren net niet even groot en de voet
 * zat net niet even laag. Geen van die verschillen was ooit besloten; ze zijn
 * ontstaan doordat elke pagina zijn eigen voet kreeg op het moment dat hij
 * gebouwd werd. Dat is `docs/valkuilen.md` §1 in zijn traagste vorm.
 *
 * ⚠️ DE MATEN STAAN IN px EN NIET IN em/rem, EN DAT IS HIER JUIST GOED. De vier
 * pagina's hebben verschillende basis-lettergroottes (het inlogscherm zet
 * `html { font-size: 18px }` op een smal scherm), dus dezelfde `em` levert daar
 * andere letters op. Een voettekst hoort op alle vier identiek te zijn; dat is
 * precies het geval waarin een absolute maat het antwoord is.
 *
 * ⚠️ DE KLEUREN KOMEN VAN DE PAGINA, VIA VIJF VARIABELEN. Elke pagina heeft zijn
 * eigen tokennamen (`--surface`/`--ink`/`--dim`/`--line` op de homepage,
 * `--panel`/`--text`/`--text-dim`/`--border` op het inlogscherm), en die zijn
 * niet gelijk te trekken zonder overal iets te breken. Elke pagina zet daarom
 * één blokje op `.foot` dat zijn eigen tokens hierop afbeeldt. Zonder dat blok
 * valt de voet terug op de waarden hieronder en blijft hij leesbaar — hij ziet er
 * dan alleen niet uit alsof hij bij die pagina hoort.
 *
 *   --foot-bg      het vlak van de voet
 *   --foot-line    de streep erboven
 *   --foot-ink     de merknaam
 *   --foot-dim     de tekst en de links
 *   --foot-accent  de link bij hover
 *
 * ⚠️ VOEG JE EEN VIJFDE PAGINA TOE, neem dan de HTML letterlijk over — de
 * volgorde is merk, tagline, links, copyright — en zet er dat ene tokenblokje
 * bij. Bouw hier geen eigen voet naast.
 */

.foot {
    padding: 40px 24px 46px;
    background: var(--foot-bg, transparent);
    border-top: 1px solid var(--foot-line, rgba(128, 128, 128, .28));
    text-align: center;
}

.foot-brand {
    margin: 0;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: .5px;
    color: var(--foot-ink, inherit);
}

.foot-tag {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--foot-dim, inherit);
}

/* `flex-wrap` omdat de links in het Duits en het Turks langer zijn dan in het
   Engels; op een smalle telefoon zakken ze dan netjes door in plaats van de rij
   het scherm uit te duwen. */
.foot-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 18px;
}
.foot-links a {
    font-size: 13px;
    color: var(--foot-dim, inherit);
    text-decoration: none;
    /* Raakbaar met een duim zonder de rij op te rekken. */
    padding: 4px 2px;
}
.foot-links a:hover { color: var(--foot-accent, inherit); text-decoration: underline; }

/* ⚠️ HIER STOND OP HET INLOGSCHERM "· v1.2" EN OP DE HOMEPAGE NIET. Dat nummer is
   met de hand gezet en werd al lang niet meer bijgewerkt terwijl er dagelijks
   gedeployd wordt — een verouderd versienummer is misleidender dan geen. Wil je
   het ooit terug, laat het dan bij de deploy invullen in plaats van met de hand. */
.foot-copy {
    margin: 20px 0 0;
    font-size: 12px;
    letter-spacing: .5px;
    color: var(--foot-dim, inherit);
    opacity: .8;
}