/* ============================================================
   Bestand: public_html/assets/themes/_local_portal/css/dorpsgeraamte.css
   ============================================================

   Het geraamte van de dorpsthema's (v014.11.472): de drie kolommen (linkerrail, midden, rechterrail),
   de rails en hoe ze op elke breedte en in elke letterstand schuiven. Alleen structuur: geen kleur,
   geen letter, geen versiering; de enige kleur is de scheidingslijn, uit --fr-rand van het thema. Theo,
   13 september 2026: "thema is ieder individueel maar de marges en paddingen graag het zelfde".
   DorpsthemaVolledigTest rekent na dat de vier op elke breedte op dezelfde maten uitkomen.

   Deze regels stonden in fr-gedeeld.css (de basis) en, letterlijk gelijk, in theme.css van julianadorp,
   kolhorn en wieringerwerf (de breekpunten). Nu één keer, hier. Het blad laadt vóór fr-gedeeld.css (het
   staat eerder in de sharedCss van theme_shell.php), zodat de volgorde dezelfde is als toen: eerst de
   basis, dan de breekpunten, dan de rest. Franeker laadt fr-gedeeld.css bewust niet (eigen kleuren en
   letters) en kan dit neutrale blad wel laden; zijn eigen kopie van deze regels gaat dan uit zijn theme.css.

   Twee assen, niet één: een regel hangt aan de schermbreedte én aan de lettergrootte
   (html[data-schaal="klein|normaal|groot"], letterschaal_vroeg.php). De letterschaal zoomt de pagina,
   en een mediaquery ziet die zoom niet; vandaar de koppeling aan de schaalstand bij 1280-1599 px.

   Alleen geraamte hier: kolommen, rails, #fr-main en .fr-rail-inhoud. Wat een thema zelf wil, hoort in
   zijn eigen theme.css.
   ============================================================ */

/* De drie kolommen: linkerrail, midden, rechterrail. De rails tekenen zelf hun
   scheidingslijn over de volle hoogte (align stretch); wat erin staat kleeft (sticky)
   via .fr-rail-inhoud, zie de rails hieronder. */
[data-fr-body] {
    display: grid;
    grid-template-columns: var(--fr-rail-links) minmax(0, 1fr) var(--fr-rail-rechts);
    gap: var(--fr-gap);
    align-items: stretch;
    max-width: var(--fr-max);
    margin: 0 auto;
    width: 100%;
    flex: 1 0 auto;
}

[data-fr-rail] {
    min-width: 0;
    padding: 1.25rem 0.9rem 1.5rem;
}

[data-fr-rail]:first-child { border-right: 1px solid var(--fr-rand); }

/* Hier stond een eigen `padding` met 1rem aan de zijkanten, terwijl de linkerrail en `#fr-main` op
   0,9rem staan: aan de rechterkant was de ruimte tot de scheidingslijn daardoor 16 pixels tegen 14,4
   links en in het midden (Theo, 17 september 2026: "van streep tot midden gedeelte is niet hetzelfde
   als sidebar tot streep, dat zou wel mooi zijn al dat gelijk is"). Klein verschil, maar de lijn
   loopt over de volle hoogte, dus je ziet het de hele pagina door.
   De regel is nu helemaal weg in plaats van gelijkgetrokken: de basisregel hierboven zet dezelfde
   maat al, en dezelfde maat op vier plekken is precies hoe de twee bladen weer uit elkaar lopen. */
[data-fr-rail]:last-child { border-left: 1px solid var(--fr-rand); }

.fr-rail-inhoud {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* DE ZIJKANTEN ZIJN GELIJK AAN DIE VAN DE RAILS (Theo, 16 september 2026: "de padding is best te
   breed, te veel loze ruimte" en "de middenpagina tot streep moet dezelfde afstand hebben als
   sidebar tot streep").

   Hier stond 2rem links en rechts, terwijl de rail ernaast 0,9rem houdt. Gemeten op
   wieringerwerf.nl: van de scheidingslijn tot de inhoud was het links 14 pixels en in het midden
   70. Dat leest als een gat, zeker omdat de lijn over de volle hoogte doorloopt en het verschil
   dus overal zichtbaar is. Nu staan de drie kolommen even ver van hun lijn af.

   Boven en onder blijft wat het was: dat is ademruimte onder de kop en boven de voet, en die heeft
   niets met de lijn te maken. */
#fr-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    padding: 1.6rem 0.9rem 3.5rem;
}

/* Grotere letters: de pagina zoomt, dus op een gewoon beeldscherm past het drieluik pas
   later. Tot die maat krijgt de rechterrail zijn plek onder de inhoud, net als op een
   kleine laptop; anders zakt de middenkolom onder de 560px. */
@media (min-width: 1280px) and (max-width: 1439px) {
    html[data-schaal="normaal"] [data-fr-body],
    html[data-schaal="groot"] [data-fr-body] { grid-template-columns: var(--fr-rail-links) minmax(0, 1fr); }
    html[data-schaal="normaal"] [data-fr-body] > aside[data-fr-rail]:last-child,
    html[data-schaal="groot"] [data-fr-body] > aside[data-fr-rail]:last-child {
        grid-column: 1 / -1;
        border-left: none;
        border-top: 1px solid var(--fr-rand);
    }
    html[data-schaal="normaal"] [data-fr-body] > aside[data-fr-rail]:last-child .fr-rail-inhoud,
    html[data-schaal="groot"] [data-fr-body] > aside[data-fr-rail]:last-child .fr-rail-inhoud { position: static; }
}

@media (min-width: 1440px) and (max-width: 1599px) {
    html[data-schaal="groot"] [data-fr-body] { grid-template-columns: var(--fr-rail-links) minmax(0, 1fr); }
    html[data-schaal="groot"] [data-fr-body] > aside[data-fr-rail]:last-child {
        grid-column: 1 / -1;
        border-left: none;
        border-top: 1px solid var(--fr-rand);
    }
    html[data-schaal="groot"] [data-fr-body] > aside[data-fr-rail]:last-child .fr-rail-inhoud { position: static; }
}

/* Kleine laptop: linkerrail plus midden; de verenigingen zakken onder de inhoud, in twee
   kolommen. */
@media (max-width: 1279px) {
    [data-fr-body] { grid-template-columns: var(--fr-rail-links) minmax(0, 1fr); }
    [data-fr-body] > aside[data-fr-rail]:last-child {
        grid-column: 1 / -1;
        border-left: none;
        border-top: 1px solid var(--fr-rand);
    }
    [data-fr-body] > aside[data-fr-rail]:last-child .fr-rail-inhoud { position: static; }
}

/* Tablet: één kolom, inhoud eerst, dan de linkerrail, dan de verenigingen. */
@media (max-width: 1024px) {
    [data-fr-body] { display: flex; flex-direction: column; }
    [data-fr-body] > main { order: 1; }
    [data-fr-body] > aside[data-fr-rail]:first-child { order: 2; border-right: none; }
    [data-fr-body] > aside[data-fr-rail]:last-child { order: 3; border-left: none; border-top: 1px solid var(--fr-rand); }
    .fr-rail-inhoud { position: static; }
}

@media (max-width: 719px) {
    /* DE VERENIGINGEN STAAN OP EEN TELEFOON ALLEEN IN DE BALK ONDERAAN. Daar zit de knop
       "Verenigingen" voor, en met de site als app op het toestel is dat de weg die iemand loopt.
       Keuze Theo, 14 september 2026: "ze moeten op mobiel allemaal verborgen zijn, ze hebben een pwa
       optie en daarmee staat hij in het menu footer als zijnde verenigingen." Franeker doet dit al
       sinds zijn ontwerp.

       WAT ER HIERVOOR STOND was geen tweede volledige lijst: het was één regel met een teller, een
       <details> die opende zonder script. Die is dus ook wat er verdwijnt -- inclusief de mogelijkheid
       om de verenigingen te bereiken zónder JavaScript, want het paneel onderaan heeft dat wel nodig.
       Dat is dezelfde stand als franeker altijd al had. */
    [data-fr-body] > aside[data-fr-rail]:last-child { display: none; }
    #fr-main { padding-left: 1.25rem; padding-right: 1.25rem; }
}

@media (max-width: 1024px) {
    /* Ruimte onder de pagina, anders valt de laatste regel achter de balk. De maat onder de
       middenkolom hoort bij het geraamte en is bij de vier dorpen gelijk (DorpsthemaVolledigTest);
       de voet krijgt de hoogte van de balk, en de body geen eigen ruimte eronder: anders stond er een
       strook papier onder de voet. */
    [data-fr-body] { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}