@import 'Dorpshub.Web.Client.ugs4hyatoi.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
.skip-link[b-870eduez04] {
    position: absolute;
    top: -3rem;
    left: 0.5rem;
    z-index: 2000;
    background-color: var(--kleur-primair);
    color: #fff;
    padding: 0.6rem 1.1rem;
    border-radius: var(--radius-klein);
    text-decoration: none;
    transition: top 0.15s ease;
}
.skip-link:focus[b-870eduez04] {
    top: 0.5rem;
}

.page[b-870eduez04] {
    position: relative;
    display: flex;
    flex-direction: column;
}

.mobiel-appbar[b-870eduez04] {
    position: sticky;
    top: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem clamp(1rem, 4vw, 1.5rem);
    padding-top: calc(0.5rem + env(safe-area-inset-top));
    background-image: linear-gradient(180deg, var(--kleur-primair) 0%, var(--kleur-primair-donker) 100%);
    color: #fff;
}

.mobiel-appbar-merk[b-870eduez04] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobiel-appbar-logo[b-870eduez04] {
    max-height: 1.75rem;
}

/* De drawer-toggle-knop: rendert hier (buiten .sidebar) zodat hij altijd bereikbaar blijft,
   ook terwijl de drawer dichtgeschoven is. menu-drawer.js werkt de aria-expanded bij. */
.navbar-toggler[b-870eduez04] {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-klein, 10px);
    background-color: rgba(255, 255, 255, 0.1);
}
.navbar-toggler span[b-870eduez04] {
    display: block;
    width: 20px;
    height: 2px;
    background-color: #fff;
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.navbar-toggler[aria-expanded="true"] span:nth-child(1)[b-870eduez04] {
    transform: translateY(7px) rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] span:nth-child(2)[b-870eduez04] {
    opacity: 0;
}
.navbar-toggler[aria-expanded="true"] span:nth-child(3)[b-870eduez04] {
    transform: translateY(-7px) rotate(-45deg);
}
@media (prefers-reduced-motion: reduce) {
    .navbar-toggler span[b-870eduez04] {
        transition: none;
    }
}

main[b-870eduez04] {
    flex: 1;
    /* Zonder dit staat main se standaard min-width:auto toe dat brede, niet-krimpende content
       (bv. de dorpsnieuws-carrousel, die zijn kaarten bewust flex-shrink:0 geeft) main — en
       daarmee de hele pagina — breder duwt dan het scherm i.p.v. binnen main zelf te scrollen.
       Alleen zichtbaar vanaf de desktop-breedte hieronder, waar .page flex-direction:row wordt
       (sidebar naast main) — bij de mobiele flex-direction:column is main se beperkte as de
       hoogte, niet de breedte, dus daar speelde dit niet. */
    min-width: 0;
}

/* Mobiel: .sidebar is de off-canvas drawer zelf (vast gepositioneerd, standaard net buiten
   beeld geschoven); body.menu-open schuift hem in. Vanaf 641px (zie media-query onderaan)
   wordt dit weer een gewone, meeschuivende kolom naast de content — zie menu-drawer.js voor
   het open/dicht-gedrag (klik op de hamburger in MenuSidebar, klik op de overlay, Escape, of
   navigeren). */
.sidebar[b-870eduez04] {
    background-image: linear-gradient(180deg, var(--kleur-primair) 0%, var(--kleur-primair-donker) 100%);
    position: fixed;
    inset: 0 auto 0 0;
    width: min(85vw, 320px);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.24s ease;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
}
/* Zonder dit is de kolom een vlak tweekleurenverloop — oogt als een standaard beheerpaneel.
   Subtiele glow + stippenpatroon (zelfde recept als .platform-hero-achtergrond) geven ook de
   standaard OntwerpStijl-preset wat diepte; [data-stijl="luxeelegant"] se eigen rijkere verloop
   in theme.css overschrijft background-image hierboven toch al en komt hier gewoon bovenop. */
.sidebar[b-870eduez04]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        radial-gradient(circle at 15% 10%, rgba(255, 255, 255, 0.14) 0%, transparent 40%),
        radial-gradient(circle at 90% 75%, var(--kleur-accent) 0%, transparent 42%),
        radial-gradient(rgba(255, 255, 255, 0.08) 1.5px, transparent 1.5px);
    background-size: auto, auto, 24px 24px;
    opacity: 0.8;
    pointer-events: none;
}

body.menu-open .sidebar[b-870eduez04] {
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    .sidebar[b-870eduez04] {
        transition: none;
    }
}

.menu-overlay[b-870eduez04] {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 1040;
}

body.menu-open .menu-overlay[b-870eduez04] {
    display: block;
}

.top-row[b-870eduez04] {
    background-color: var(--kleur-oppervlak);
    border-bottom: 1px solid var(--kleur-rand);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row .tagline[b-870eduez04] {
        color: var(--kleur-tekst-zacht);
        font-style: italic;
    }

    .top-row-logo[b-870eduez04] {
        max-height: 2.25rem;
    }

    .top-row[b-870eduez04]  a, .top-row[b-870eduez04]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-870eduez04]  a:hover, .top-row[b-870eduez04]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-870eduez04]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-870eduez04] {
        justify-content: space-between;
    }

    .top-row[b-870eduez04]  a, .top-row[b-870eduez04]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-870eduez04] {
        flex-direction: row;
    }

    .mobiel-appbar[b-870eduez04] {
        display: none;
    }

    /* Vanaf hier is de sidebar geen off-canvas drawer meer maar een permanent zichtbare kolom.
       position:fixed i.p.v. sticky: sticky breekt zodra er ergens een voorouder met een eigen
       overflow/transform/scrollcontext tussen zit (lastig uit te sluiten op een pagina met zo
       veel bloktypes), fixed niet — maar neemt de sidebar wel uit de flex-flow, dus main krijgt
       hieronder een eigen margin-left ter compensatie. */
    .sidebar[b-870eduez04] {
        width: 250px;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        inset: 0 auto auto 0;
        display: flex;
        flex-direction: column;
        transform: none;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 0;
    }

    main[b-870eduez04] {
        margin-left: 250px;
    }

    .menu-overlay[b-870eduez04] {
        display: none !important;
    }

    .top-row[b-870eduez04] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-870eduez04]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-870eduez04], article[b-870eduez04] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

.pwa-balk[b-870eduez04] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background-color: var(--kleur-primair);
    color: #fff;
    padding: 0.65rem 1rem;
}
.pwa-balk-tekst[b-870eduez04] {
    font-size: 0.9rem;
}
.pwa-balk-knoppen[b-870eduez04] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.pwa-balk-voorkeuren[b-870eduez04] {
    color: #fff;
    font-size: 0.85rem;
    text-decoration: underline;
    white-space: nowrap;
}
.pwa-balk-sluiten[b-870eduez04] {
    background: none;
    border: none;
    color: #fff;
    opacity: 0.8;
    font-size: 1rem;
    line-height: 1;
    padding: 0.25rem;
}
.pwa-balk-sluiten:hover[b-870eduez04] {
    opacity: 1;
}

.site-footer[b-870eduez04] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1.25rem;
    padding-bottom: 1.5rem;
    border-top: 1px solid var(--kleur-rand);
    color: var(--kleur-tekst-zacht);
    font-size: 0.9rem;
}

    .site-footer-links[b-870eduez04] {
        display: flex;
        gap: 1rem;
    }

#blazor-error-ui[b-870eduez04] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-870eduez04] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/MenuSidebar.razor.rz.scp.css */
/* Mobiel navigatiemenu: een echte off-canvas drawer (zie menu-drawer.js voor het open/dicht-
   gedrag via een "menu-open"-klasse op <body>, en MainLayout.razor.css voor de .sidebar/
   .menu-overlay-transform-regels zelf) — vervangt de vorige checkbox-hack-inline-uitklap, die
   de pagina-inhoud gewoon omlaag duwde i.p.v. er overheen te schuiven. Puur CSS/JS, geen
   Blazor-interactiviteit nodig: deze layout rendert statisch (server-SSR). */

.mobiel-topbalk[b-7y1pg42h3o] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 1rem 0.6rem;
}

/* .sidebar is op zowel mobiel (vaste drawer) als desktop (vaste kolom) een vast-gepositioneerd,
   vaste-hoogte blok (zie MainLayout.razor.css) — zonder eigen scroll hier vielen de onderste
   menu-items gewoon buiten beeld zodra de lijst groeide, en op mobiel greep een vinger-sleep
   binnen de drawer daardoor niets vast om te scrollen (de pagina erachter bewoog dan i.p.v.
   het menu zelf). flex:1 + min-height:0 laat dit blok de resterende hoogte onder de
   merk-/zoekbalk vullen en zelf scrollen — op elke schermbreedte, niet alleen desktop.*/
.nav-scrollable[b-7y1pg42h3o] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}