/* ########################################################################
   Hamburgermenu in secties: "Bestuur" en "Website" (06-10-2026)

   Templates: block--bario-sub-bestuur-mobiel.html.twig (sectie Bestuur,
   core-menublok met menu--menu-kampstaf.html.twig) en
   block--bario-sub-mobielmenu-superfish.html.twig (sectie Website rond het
   bestaande publieke mobiele menu).

   Onder 992px is het hamburgermenu ingeklapt (ozk-d7-parity-extra.css zet de
   navbar vanaf 992px open, ook al is hij navbar-expand-xl). Daaronder toont het
   superfish-blok van het bestuursmenu niets meer; de uitklaplijst neemt het
   over. Daarboven is het andersom.

   De sectie Bestuursmenu staat sinds 06-10-2026 op elke pagina voor de
   bestuursrollen; welke sectie bij het openen openstaat volgt het pad
   (_bario_sub_op_intranetpad() in bario_sub.theme). Zonder sectie Bestuur
   (bezoekers, andere rollen) is er geen kop "Website" en staat het publieke
   menu gewoon open, zoals voorheen.
   ######################################################################## */

@media (max-width: 991.98px) {
    /* Het open hamburgermenu scrollt binnen zichzelf. Het zit in de plakkende
       header (#header, sticky); zonder maximale hoogte werd het met een
       uitgeklapte kop langer dan het scherm en schoof bij het swipen de pagina
       eronder mee (melding Richard 06-10-2026). 5rem = de logobalk erboven;
       dvh houdt rekening met de adresbalk van de mobiele browser. */
    #CollapsingNavbar.show,
    #CollapsingNavbar.collapsing {
        max-height           : calc(100vh - 5rem);
        max-height           : calc(100dvh - 5rem);
        overflow-y           : auto;
        overscroll-behavior  : contain;
        -webkit-overflow-scrolling: touch;
    }

    #block-bario-sub-sf-bestuur {
        display          : none !important;
    }

    .ozk-menusectie {
        width            : 100%;
        margin           : 0 0 .5rem;
    }

    /* Sectiekop: paars, want navigatie is paars (ozk-blokken.css). */
    .ozk-menusectie__kop {
        display          : flex;
        align-items      : center;
        justify-content  : space-between;
        width            : 100%;
        min-height       : 48px;
        padding          : .5rem 1rem;
        border           : 0;
        border-radius    : 0;
        background       : var(--ozk-paars, #663399);
        color            : #fff;
        font-size        : 1rem;
        font-weight      : 700;
        letter-spacing   : .04em;
        text-align       : left;
        text-transform   : uppercase;
    }

    .ozk-menusectie__kop:hover,
    .ozk-menusectie__kop:focus-visible {
        background       : var(--ozk-paars-donker, #522980);
        color            : #fff;
    }

    .ozk-menusectie__kop:focus-visible,
    .ozk-bm__kop:focus-visible,
    .ozk-bm__link:focus-visible {
        outline          : 3px solid var(--ozk-paars-focus-donker, #c3a1e8);
        outline-offset   : -3px;
    }

    /* Pijltje: wijst naar beneden als de sectie dicht is, omhoog als hij open
       is. Een rand in plaats van een icoonfont, zodat het er altijd is. */
    .ozk-menusectie__kop::after,
    .ozk-bm__kop::after {
        content          : "";
        flex             : 0 0 auto;
        width            : .55rem;
        height           : .55rem;
        margin-left      : 1rem;
        border-right     : 2px solid currentColor;
        border-bottom    : 2px solid currentColor;
        transform        : translateY(-25%) rotate(45deg);
        transition       : transform .15s ease;
    }

    .ozk-menusectie__kop[aria-expanded="true"]::after,
    .ozk-bm__kop[aria-expanded="true"]::after {
        transform        : translateY(25%) rotate(-135deg);
    }

    /* Zonder sectie Bestuur: geen kop Website, menu altijd open. */
    #CollapsingNavbar:not(:has(.ozk-menusectie--bestuur)) .ozk-menusectie--website > .ozk-menusectie__kop {
        display          : none;
    }

    #CollapsingNavbar:not(:has(.ozk-menusectie--bestuur)) .ozk-menusectie--website > .ozk-menusectie__inhoud {
        display          : block;
        height           : auto;
    }

    /* ---- De uitklaplijst van het bestuursmenu ---- */
    .ozk-bm {
        margin           : 0;
        padding          : 0;
        list-style       : none;
    }

    .ozk-bm__item {
        margin           : 0;
        border-bottom    : 1px solid #e6e1ec;
    }

    .ozk-bm__item:last-child {
        border-bottom    : 0;
    }

    .ozk-bm__kop,
    .ozk-bm__link {
        display          : flex;
        align-items      : center;
        justify-content  : space-between;
        width            : 100%;
        min-height       : 48px;
        padding          : .55rem 1rem;
        border           : 0;
        border-radius    : 0;
        background       : #fff;
        color            : var(--ozk-grijs, #3c3c3b);
        font-size        : 1rem;
        line-height      : 1.3;
        text-align       : left;
        text-decoration  : none;
    }

    .ozk-bm--niveau-0 > .ozk-bm__item > .ozk-bm__kop,
    .ozk-bm--niveau-0 > .ozk-bm__item > .ozk-bm__link {
        font-weight      : 700;
        letter-spacing   : .03em;
        text-transform   : uppercase;
    }

    .ozk-bm__kop:hover,
    .ozk-bm__link:hover {
        background       : #f4eff9;
        color            : var(--ozk-paars, #663399);
    }

    .ozk-bm__kop[aria-expanded="true"] {
        color            : var(--ozk-paars, #663399);
    }

    /* Ingesprongen per niveau, met een zachte achtergrond zodat zichtbaar
       blijft bij welke kop een item hoort. */
    .ozk-bm--niveau-1 {
        border-top       : 1px solid #e6e1ec;
        border-left      : 4px solid var(--ozk-paars, #663399);
    }

    .ozk-bm--niveau-1 > .ozk-bm__item > .ozk-bm__kop,
    .ozk-bm--niveau-1 > .ozk-bm__item > .ozk-bm__link {
        padding-left     : 1.25rem;
        background       : #faf8fc;
    }

    .ozk-bm--niveau-2 {
        border-top       : 1px solid #e6e1ec;
    }

    .ozk-bm--niveau-2 > .ozk-bm__item > .ozk-bm__link {
        padding-left     : 2.25rem;
        background       : #f4eff9;
    }

    .ozk-bm__item--overzicht > .ozk-bm__link {
        font-style       : italic;
    }

    .ozk-bm__link.is-active {
        color            : var(--ozk-paars, #663399);
        font-weight      : 700;
    }
}

@media (min-width: 992px) {
    .ozk-menusectie--bestuur {
        display          : none !important;
    }

    .ozk-menusectie--website > .ozk-menusectie__kop {
        display          : none;
    }
}