.menu_more_panel[hidden],
.menu_more_backdrop[hidden]{
    display: none;
    opacity: 0;
    pointer-events: none;
}

.menu_more_panel,
.menu_more_backdrop{
    opacity: 1;
    transition: opacity 0.3s, display 0.3s allow-discrete;
}

@starting-style{
    .menu_more_panel:not([hidden]),
    .menu_more_backdrop:not([hidden]){
        opacity: 0;
    }
}

.menu_more_backdrop{
    position: fixed;
    inset: 0;
    /* Match the original Webton Slideout overlay; sit below Bootstrap's fixed navbar. */
    z-index: 1029;
    background: rgb(0 0 0 / 40%);
}

body.menu_more_open{
    overflow: hidden;
}

.menu_more_panel{
    position: absolute;
    inset: 100% 0 auto;
    max-height: var(--menu_more_available_height);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--beige);
    color: var(--zwart);
    padding-block: var(--spacing_8);
}

.menu_more_row{
    --bs-gutter-x: var(--column-width);
    row-gap: var(--spacing_6);
}

.menu_more_links .sub-menu,
.menu_branch_groups .sub-menu{
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu_more_links > .sub-menu > .menu-item + .menu-item{
    margin-top: var(--spacing_3);
    padding-top: var(--spacing_3);
    background: url('../images/menu_more/link_divider.svg') left top / 100% 0.1rem no-repeat;
}

.menu_more_links a,
.menu_branch_groups a{
    display: block;
    color: var(--zwart);
    text-decoration: none;
    hyphens: auto;
    transition: color 0.3s;
}

.menu_more_links a:hover,
.menu_branch_groups a:hover{
    color: var(--bruin);
}

.menu_more_links > .sub-menu > li > a{
    font-weight: 400;
    text-wrap: auto;
}

.menu_more_links .sub-menu .sub-menu{
    padding: var(--spacing_3) 0 0 var(--spacing_3);
}

.menu_more_panel .submenu-back-button{
    display: none;
}

.menu_branch_group + .menu_branch_group{
    margin-top: var(--spacing_6);
}

.menu_branch_title{
    padding-bottom: 2rem;
    background: url('../images/menu_branch/intro_divider.svg') left bottom / 100% 0.1rem no-repeat;
}

.menu_branch_title:after{
    color: var(--bruin);
    font-weight: 100;
    /* The design's 50px arrow follows its 60px heading. */
    font-size: calc(5em / 6);
    margin-left: 2rem;
}

.menu_item_description{
    display: block;
}

.menu_branch_intro > .menu_item_description,
.menu_branch_overview{
    margin-top: 2rem;
}

.menu_branch_groups .menu_branch_overview{
    color: color-mix(in srgb, var(--zwart) 75%, var(--wit));
    text-decoration: underline;
}

.menu_branch_details .menu-item + .menu-item{
    margin-top: 2rem;
    padding-top: 2rem;
    background: url('../images/menu_branch/item_divider.svg') left top / 100% 0.1rem no-repeat;
}

.menu_branch_details .menu_item_description{
    /* Figma's 5px gap connects each title to its description. */
    margin-top: 0.5rem;
}

.menu_more_languages{
    margin-top: var(--spacing_8);
}

.menu_more_languages .talen{
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

#hoofdmenu li.menu_more .menu_more_languages .talen{
    display: flex;
    position: static;
    transform: none;
    height: auto;
    background: none;
    border: 0;
}

.menu_more_languages .talen li,
#hoofdmenu .menu_more_languages .talen li{
    float: none;
    width: auto;
    clear: none;
    margin: 0;
}

.menu_more_languages .talen a,
#hoofdmenu .menu_more_languages .talen a{
    display: block;
    /* Trimmed capitals plus 5px above/below retain the design's compact height. */
    padding: 0.5rem 1rem;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    border: 0.1rem solid var(--bruin);
    color: var(--zwart);
    font-size: 1.4rem;
    text-decoration: none;
}

.menu_more_languages .talen li + li a{
    border-left: 0;
}

/* Figma's 8px outside corners and 22px intrinsic control height. */
.menu_more_languages .talen li:first-child a{
    border-radius: 0.8rem 0 0 0.8rem;
}

.menu_more_languages .talen li:last-child a{
    border-radius: 0 0.8rem 0.8rem 0;
}

.menu_more_languages .talen li:only-child a{
    border-radius: 0.8rem;
}

.menu_more_languages .talen .taal_active a,
#hoofdmenu .menu_more_languages .talen .taal_active a{
    background: var(--bruin);
    color: var(--wit);
}

.menu_more_content > :last-child{
    margin-bottom: 0;
}

.menu_more_content .openingstijden_regel{
    column-gap: var(--spacing_3);
}

.menu_more_content .openingstijden > hr{
    height: 0.1rem;
    border: 0;
    opacity: 1;
    background: url('../images/menu_more/content_divider.svg') left center / 100% 0.1rem no-repeat;
}

.menu_more_panel a:focus-visible,
.menu_more_mobile_extra a:focus-visible{
    outline: 0.2rem solid currentColor;
    outline-offset: 0.2em;
}

@media (max-width:767px){
    #hoofdmenu .menu_item_description{
        clear: both;
        padding: 0 var(--spacing_3) var(--spacing_3);
    }

    #hoofdmenu li.menu_more_mobile_extra{
        padding: var(--spacing_3);
        background: var(--beige);
        color: var(--zwart);
    }

    .menu_more_mobile_extra .menu_more_languages{
        margin-top: 0;
    }

    .menu_more_mobile_extra .menu_more_languages + .menu_more_content{
        margin-top: var(--spacing_3);
    }

    #hoofdmenu .menu_more_languages .talen a{
        border: 0.1rem solid var(--bruin) !important;
    }
}

/* Compact tablet typography; desktop retains the shared heading sizes. */
@media (min-width:768px) and (max-width:991px){
    .menu_more_panel{
        font-size: 1.6rem;
    }

    .menu_branch_title,
    .menu_more_links > .sub-menu > li > a{
        font-size: 3rem;
    }

    .menu_branch_intro > .menu_item_description{
        font-size: 1.8rem;
    }

    .menu_branch_details .menu-item > a{
        font-size: 2.2rem;
    }
}

@media (min-width:992px) and (max-width:1199px),
       (min-width:1200px) and (max-width:1399px){
    .menu_more_panel{
        font-size: 1.6rem;
    }

    .menu_branch_title,
    .menu_more_links > .sub-menu > li > a{
        font-size: 4rem;
    }

    .menu_branch_intro > .menu_item_description{
        font-size: 1.8rem;
    }

    .menu_branch_details .menu-item > a{
        font-size: 2.6rem;
    }
}

body.menu_more_open nav.navbar{
    transform: none;
}

body.menu_more_open #hoofdmenu > li:not(.menu_more_active) > a{
    opacity: 0.5;
}

body.menu_more_open #hoofdmenu > li.menu_more_active > a{
    opacity: 1;
}

.menu_more_active .menu_more_icon{
    position: relative;
}

.menu_more_active .menu_more_icon span{
    position: absolute;
    inset-inline: 0.64rem;
    height: 0.1rem;
    transform: rotate(45deg);
}

.menu_more_active .menu_more_icon span:nth-child(2){
    display: none;
}

.menu_more_active .menu_more_icon span:last-child{
    transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce){
    .menu_more_panel,
    .menu_more_backdrop,
    .menu_more_links a,
    .menu_branch_groups a{
        transition: none;
    }
}