/* Gedeelde mobiele bediening. Thema's blijven eigenaar van kleuren, lettertypen en inhoud. */
html.cms-panel-open, html.cms-panel-open body { overscroll-behavior: none; }

@media (max-width: 991.98px) {
    body:has(.portal-bottom-nav-v20), body:has(lh-bottom-nav) { padding-bottom: calc(var(--cms-nav-height, 70px) + 12px); }
    body .we-balk:not(.we-balk--kop) { bottom: calc(var(--cms-nav-height, 0px) + 10px); }
    html.cms-panel-open .we-balk { visibility: hidden; pointer-events: none; }
    body .letterschaal button, body .theme-switch button, body theme-toggle button { min-width: 44px; min-height: 44px; }
    body .portal-bottom-nav-v20, body .lh-bottom-nav {
        padding-left: max(4px, env(safe-area-inset-left));
        padding-right: max(4px, env(safe-area-inset-right));
        padding-bottom: max(5px, env(safe-area-inset-bottom));
    }
    body .portal-bottom-nav-item-v20, body .lh-bn-item { min-height: 60px; }
    body .portal-slide-panel-v20 {
        bottom: var(--cms-nav-height, 0px);
        transition: visibility 0s .3s;
    }
    body .portal-slide-panel-v20.is-open { transition-delay: 0s; }
    body .portal-slide-panel-v20 .portal-slide-body-v20 {
        box-sizing: border-box;
        height: var(--cms-panel-height, calc(100dvh - var(--cms-nav-height, 0px)));
        max-height: var(--cms-panel-height, calc(100dvh - var(--cms-nav-height, 0px)));
        border-radius: 0;
        padding-top: env(safe-area-inset-top);
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
        opacity: 0;
        transform: translateY(100%);
        transition: transform .3s cubic-bezier(.22,.61,.36,1), opacity .24s ease;
    }
    body .portal-slide-panel-v20 .lh-menu-body {
        padding-left: max(24px, env(safe-area-inset-left));
        padding-right: max(24px, env(safe-area-inset-right));
    }
    body .portal-slide-panel-v20.is-open .portal-slide-body-v20 { opacity: 1; transform: translateY(0); }
    body .portal-slide-content-v20 { min-height: 0; scrollbar-width: none; }
    body .portal-slide-content-v20::-webkit-scrollbar { display: none; }
    body .portal-slide-link-v20, body .lh-menu-link { min-height: 48px; }
    body .portal-slide-header-v20 { touch-action: pan-x; }
    body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not([type="file"]),
    body select, body textarea { font-size: max(16px, 1em); min-height: 44px; }
}


/* Alleen de vier dorpsschillen gebruiken deze bediening. */
.dorps-instellingen-knop {
    box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; min-width: 44px; padding: 0;
    border: 1px solid var(--fr-rand, #aaa); border-radius: 12px;
    background: var(--fr-kaart); color: var(--fr-tekst); cursor: pointer;
}
.dorps-instellingen-knop svg { width: 22px; height: 22px; }
.cms-compacte-voorkeuren { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 8px; }
.cms-compacte-voorkeuren .letterschaal, .cms-compacte-voorkeuren .theme-switch { display: flex; width: 100%; min-width: 0; margin: 0; box-sizing: border-box; }
.cms-compacte-voorkeuren .letterschaal button, .cms-compacte-voorkeuren .theme-switch button { flex: 1; min-width: 44px; min-height: 44px; padding: 0; }
@media (max-width: 1024px) {
    .dorps-linkerrail { display: none; }
    .dorps-instellingen .portal-slide-close-v20 { display: none; }
    .dorps-instellingen .dorps-menugroep { margin-bottom: 12px; }
}
@media (max-width: 991.98px) {
    .lodewijk-pwa-weergave .portal-slide-close-v20 { display: none; }
}
.dorps-instellingen .dorps-plaatskop { font: 600 15px/1.4 var(--fr-sans, sans-serif); margin: 20px 4px 10px; }
.dorps-instellingen .dorps-menugroep > span { display: block; padding: 14px; }
.dorps-instellingen .portal-slide-content-v20 { scrollbar-width: none; }
.dorps-instellingen .portal-slide-close-v20 { flex: 0 0 44px; width: 44px; height: 44px; font-size: 22px; }
@media (min-width: 1025px) {
    body .dorps-instellingen .portal-slide-body-v20 {
        left: auto; width: min(420px, 100%); height: var(--cms-panel-height, 100dvh);
        max-height: var(--cms-panel-height, 100dvh); padding-bottom: 16px; border-radius: 0;
    }
}
.dorps-meer .portal-slide-header-v20 strong { font: 700 26px/1.3 var(--fr-sans, sans-serif); text-transform: none; letter-spacing: 0; color: var(--fr-tekst); }
.dorps-meer .portal-slide-content-v20 { padding: 14px 16px 24px; }
.dorps-meer h2 { font: 600 16px/1.4 var(--fr-sans, sans-serif); color: var(--fr-tekst); margin: 24px 4px 10px; }
.dorps-meer .dorps-menugroep { border: 1px solid var(--fr-rand, #aaa); border-radius: 16px; overflow: hidden; background: var(--fr-bg); }
.dorps-meer .dorps-menugroep a { min-height: 54px; box-sizing: border-box; padding: 14px; gap: 12px; font: 400 16px/1.4 var(--fr-sans, sans-serif); }
.dorps-meer .dorps-menugroep a:last-child { border-bottom: 0; }
.dorps-meer .dorps-menugroep a > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dorps-meer .dorps-menugroep small { display: block; font-size: 13px; margin-top: 3px; }
.dorps-meer .dorps-menugroep .bi-chevron-right { font-size: 12px; }
.dorps-meer .fr-zoek-paneel { width: 100%; box-sizing: border-box; margin: 24px 0 0; padding: 0; }
/* Het gekoppelde zoeklabel blijft beschikbaar voor schermlezers. */
.dorps-meer .portal-zoek__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.dorps-meer .portal-zoek__uitleg { display: none; }
@media (max-width: 1024px) {
    body:has(.dorps-onderbalk) .fr-header [data-fr-head] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
    body:has(.dorps-onderbalk) .fr-merk { flex: 1 1 150px; min-width: 0; }
    body:has(.dorps-onderbalk) .fr-merk-naam { padding-right: 0; min-height: 0; white-space: normal; overflow: visible; display: block; overflow-wrap: anywhere; }
    body:has(.dorps-onderbalk) [data-fr-acties] { position: static; margin: 0 0 0 auto; flex: 0 0 auto; }
    body:has(.dorps-onderbalk) .fr-merk-sub { white-space: normal; }
    body:has(.dorps-onderbalk) .fr-bezoek-tekst { min-width: 0; overflow-wrap: anywhere; }
    body:has(.dorps-onderbalk) .pbm-kaart {
        box-sizing: border-box; width: auto; left: 12px; right: 12px; margin-left: auto;
        bottom: calc(var(--cms-nav-height, 70px) + 12px);
        max-height: calc(var(--cms-panel-height, 100dvh) - 24px); overflow-y: auto;
    }
    body .dorps-onderbalk { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    body .dorps-onderbalk .portal-bottom-nav-item-v20 {
        min-width: 0; min-height: 64px; padding: 8px 1px; gap: 6px;
        font: 500 11px/1.2 var(--fr-sans, sans-serif); letter-spacing: 0; text-transform: none;
    }
    body .dorps-onderbalk .portal-bottom-nav-item-v20 > span { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-overflow: clip; overflow: visible; }
    .dorps-onderbalk .portal-bottom-nav-item-v20 i { width: 36px; padding: 3px 0; border-radius: 16px; text-align: center; }
    .dorps-onderbalk .is-active i, .dorps-onderbalk [aria-expanded="true"] i { background: #ffffff20; }
}
/* De dorpsschillen houden hun mobiele balk tot en met 1024px. */
@media (min-width: 992px) and (max-width: 1024px) {
    body:has(.dorps-onderbalk) { padding-bottom: calc(var(--cms-nav-height, 70px) + 12px); }
    body .dorps-meer { bottom: var(--cms-nav-height, 0px); }
    body .dorps-meer .portal-slide-body-v20 {
        box-sizing: border-box; height: var(--cms-panel-height, calc(100dvh - var(--cms-nav-height, 0px)));
        max-height: var(--cms-panel-height, calc(100dvh - var(--cms-nav-height, 0px))); border-radius: 0;
        padding-top: env(safe-area-inset-top); padding-bottom: 12px;
        opacity: 0; transition: transform .3s cubic-bezier(.22,.61,.36,1), opacity .24s ease;
    }
    body .dorps-meer.is-open .portal-slide-body-v20 { opacity: 1; transform: translateY(0); }
    body .dorps-meer .portal-slide-content-v20 { min-height: 0; scrollbar-width: none; }
    html.cms-panel-open body:has(.dorps-onderbalk) .we-balk { visibility: hidden; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
    body .portal-slide-panel-v20,
    body .portal-slide-panel-v20 .portal-slide-body-v20,
    body .portal-slide-panel-v20 .portal-slide-backdrop-v20 { transition: none; }
}

/* De desktoprails blijven binnen het venster en scrollen onafhankelijk van het dorpsplein. */
@media (min-width: 1025px) {
    html[data-schaal] body [data-fr-body]:has(> .dorps-linkerrail):has(> main + aside) {
        grid-template-columns: clamp(12rem, 19vw, 18rem) minmax(0, 1fr) clamp(13rem, 21vw, 20rem);
    }
    html[data-schaal] body [data-fr-body] > aside[data-fr-rail]:last-child {
        grid-column: auto; border-top: 0; border-left: 1px solid var(--fr-rand);
    }
    html[data-schaal] body [data-fr-body] > aside[data-fr-rail]:is(:first-child, :last-child) .fr-rail-inhoud {
        position: sticky; top: 1rem;
    }
    html[data-schaal] body [data-fr-body] > aside[data-fr-rail]:last-child .fr-clubs-lijst { column-count: 1; grid-template-columns: minmax(0, 1fr); }
    [data-fr-rail] > .fr-rail-inhoud:not(.dorps-rail-onder) {
        max-height: max(5rem, calc(100dvh - var(--dorps-rail-top, 10rem) - 1rem));
        overflow-y: auto;
        overscroll-behavior-y: contain;
        scrollbar-width: none;
    }
    [data-fr-rail] > .fr-rail-inhoud::-webkit-scrollbar { display: none; }
    [data-fr-rail] > .fr-rail-inhoud > * { flex-shrink: 0; }
}

.fr-agenda-lijst .fr-agenda-regel { display: block; padding: 0; }
.fr-agenda-activiteit {
    display: grid; grid-template-columns: minmax(4.5rem, max-content) minmax(0, 1fr);
    gap: 1rem; padding: 1rem 0; color: var(--fr-tekst); text-decoration: none;
}
a.fr-agenda-activiteit:hover { background: var(--fr-kaart); }
a.fr-agenda-activiteit:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.fr-agenda-activiteit .fr-agenda-datum { width: auto; min-width: 4.5rem; padding: .5rem; align-self: start; }
.fr-agenda-datum strong { white-space: nowrap; }
.fr-agenda-activiteit .fr-agenda-tekst { display: flex; flex-direction: column; min-width: 0; gap: .3rem; }
.fr-agenda-activiteit .fr-agenda-titel { font-size: 1.125rem; font-weight: 700; }
.fr-agenda-wanneer { font-size: .8125rem; color: var(--fr-stil); }
.fr-agenda-tijd { font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.fr-agenda-bron { font-size: .75rem; text-decoration: underline; text-underline-offset: .2em; }
.fr-agenda-blok > h2 { padding: .75rem 0; border-bottom: 2px solid var(--fr-rand); }

.fr-agenda-inhoud { white-space: pre-line; font-size: .9375rem; line-height: 1.6; }