/* ======================================================================
   assets/style.css — CENTRALE STYLESHEET
   ----------------------------------------------------------------------
   Eigen CSS-regels van de site, los van Tailwind. Dit is de enige plek
   voor handgeschreven CSS. De design-tokens (kleuren, lettertypes,
   formaten) staan in assets/theme.js; de opmaakklassen in de HTML zelf
   komen van Tailwind.

   Wordt ingeladen in partials/head.php.
   ====================================================================== */


/* --- Material Symbols (de icoontjes) -----------------------------------
   Standaardinstellingen voor de pictogrammen, en netjes uitlijnen met de
   tekst ernaast. */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
}


/* --- Basis -------------------------------------------------------------
   Achtergrond- en tekstkleur van de hele pagina. Komt overeen met de
   tokens 'surface' (#fbf9f8) en 'on-surface' (#1b1c1c) uit theme.js. */
body {
    background-color: #fbf9f8;
    color: #1b1c1c;
}


/* --- Responsieve koppen op mobiel --------------------------------------
   De Tailwind-tokens 'text-headline-xl' en 'text-headline-lg' zijn vast
   ingesteld op 48px resp. 32px. Op smalle schermen passen lange Nederlandse
   woorden als 'DOELSTELLING' of 'GELDMIDDELEN' dan niet en lopen ze buiten
   beeld. Hieronder schalen we de koppen op kleinere schermen.

   Tailwind-CDN injecteert zijn stijlen na het laden; de !important is nodig
   om de gegenereerde regels te overschrijven. */
@media (max-width: 768px) {
    .text-headline-xl {
        font-size: 32px !important;
        line-height: 1.1 !important;
    }
    .text-headline-lg {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }
    .text-headline-md {
        font-size: 20px !important;
    }
}

@media (max-width: 400px) {
    .text-headline-xl {
        font-size: 26px !important;
    }
    .text-headline-lg {
        font-size: 22px !important;
    }
}

/* Vangnet: laat lange woorden afbreken in plaats van buiten beeld lopen.
   Hyphens werkt alleen als de pagina-taal is ingesteld (lang="nl"). */
h1, h2, h3 {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}