/* 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; }
}