/* ===========================================================================
   hsb-breedte.css — één breedte voor de hele site
   ===========================================================================

   WAT DIT DOET

   Bootstrap geeft .container een andere maximale breedte per schermformaat:
   1140 px vanaf 1200, en 1320 px vanaf 1400. Op een breed scherm sprong de
   site dus van maat, en op een heel breed scherm bleef er veel wit over aan
   weerszijden.

   Hier staat één breedte voor alles. Die komt uit Instellingen in het CMS,
   als `site_breedte`, en wordt door includes/head-base.php als
   --hsb-breedte op :root gezet. Staat er niets, dan is het 1440.

   WAAROM DIT EEN VARIABELE IS EN GEEN GETAL

   Een breedte verander je niet vaak, maar als je hem verandert moet het op
   één plek kunnen. Er staan 93 bestanden met .container in de opmaak; die
   wil je niet allemaal langs.

   Laad dit NA bootstrap.css en NA site.css.
   =========================================================================== */

:root {
    /* De terugval. head-base.php zet hier de waarde uit het CMS overheen;
       deze regel is wat er geldt als dat om wat voor reden niet lukt. */
    --hsb-breedte: 1440px;
}


/* ---------------------------------------------------------------------------
   De container
   ---------------------------------------------------------------------------
   Alleen de maximale breedte. De zijkantjes (padding) blijven van Bootstrap,
   want die zorgen dat de tekst op een telefoon niet tegen de rand plakt.

   `.container-fluid` blijft met opzet buiten schot: die is bedoeld om wél de
   volle breedte te pakken.
   --------------------------------------------------------------------------- */

@media (min-width: 1200px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: var(--hsb-breedte);
    }
}


/* ---------------------------------------------------------------------------
   Waar de site zelf een breedte noemt
   ---------------------------------------------------------------------------
   In site.css staat --container-max-width als token. Die zetten we op
   dezelfde waarde, zodat er geen twee breedtes naast elkaar bestaan.
   --------------------------------------------------------------------------- */

:root {
    --container-max-width: var(--hsb-breedte);
}