/*
 * The Region popup/burger menu layout helpers.
 *
 * Accordion behavior is in mobile-menu.js.
 *
 * Desktop rules below consolidate the useful styling that previously
 * lived in hidden tagDiv CSS Code elements, while deliberately avoiding
 * vertical auto-centering of the navigation content.
 */

@media (min-width: 768px) {

    /*
     * The hidden desktop template CSS used this background on the popup
     * header. Keep the popup panel visually continuous at the top/bottom.
     */
    #tdm-popup-modal-md_menu1 .tdm-pm-header,
    #tdm-popup-modal-md_menu1 .tdm-pm-body,
    #tdm-popup-modal-md_menu1 .tr-desktop-menu-shell {
        background-color: #f7f7f5 !important;
    }

    /*
     * Stable available popup height. JS sets the custom property from
     * the shell's real screen position to the bottom of the viewport.
     */
    .tr-desktop-menu-shell {
        height: var(--tr-desktop-menu-height, 100dvh) !important;
        min-height: 0 !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;

        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .tr-desktop-menu-shell::before,
    .tr-desktop-menu-shell::after {
        display: none !important;
    }

    .tr-desktop-menu-shell > .vc_column_container {
        height: 100% !important;
        min-height: 0 !important;
    }

    /*
     * Use the actual desktop template structure as a normal vertical
     * flex stack. This is more robust here than assuming a fixed number
     * of direct children/grid rows.
     */
    .tr-desktop-menu-shell
    > .vc_column_container
    > .wpb_wrapper {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;

        justify-content: flex-start !important;
        align-items: stretch !important;
    }

    /*
     * Logo/top row keeps its natural height.
     */
    .tr-desktop-menu-shell
    > .vc_column_container
    > .wpb_wrapper
    > .vc_row_inner:first-of-type {
        flex: 0 0 auto !important;
    }

    /*
     * Search keeps its natural height and position.
     */
    .tr-desktop-menu-shell
    > .vc_column_container
    > .wpb_wrapper
    > .cr-menu-live-search {
        flex: 0 0 auto !important;

        width: 100% !important;
        min-width: 0 !important;

        align-self: stretch !important;
    }

    /*
     * Navigation consumes the remaining middle space.
     * It may scroll internally when an expanded submenu no longer fits.
     */
    .tr-desktop-menu-shell
    > .vc_column_container
    > .wpb_wrapper
    > .tr-desktop-menu-nav {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;

        min-height: 0 !important;

        justify-content: flex-start !important;
        align-items: stretch !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        overscroll-behavior: contain;
        scrollbar-gutter: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /*
     * CRITICAL DIFFERENCE FROM THE OLD HIDDEN CSS:
     *
     * It used margin-top:auto + margin-bottom:auto, vertically centering
     * the menu content. Every submenu height change therefore re-centered
     * the content and made the whole visible menu jump.
     *
     * Keep the inner row pinned to the TOP instead.
     */
    .tr-desktop-menu-nav > .vc_column_inner {
        flex: 0 0 auto !important;
        align-self: stretch !important;

        width: 100% !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;

        top: auto !important;
        bottom: auto !important;

        transform: none !important;
        -webkit-transform: none !important;
    }

    .tr-desktop-menu-nav
    > .vc_column_inner
    > .vc_column-inner {
        width: 100% !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;

        top: auto !important;
        bottom: auto !important;

        transform: none !important;
        -webkit-transform: none !important;
    }

    /*
     * Bottom controls (language + socials when added) stay at the bottom.
     */
    .tr-desktop-menu-shell
    > .vc_column_container
    > .wpb_wrapper
    > .tr-desktop-menu-bottom {
        flex: 0 0 auto !important;

        margin-top: 0 !important;

        align-self: stretch !important;
    }

    /*
     * Main/root menu item rhythm from the previous desktop template CSS.
     */
    .tr-desktop-menu-nav
    .td_block_list_menu
    ul.menu
    > li {
        border-bottom: 2px solid rgba(35, 31, 32, 0.05);

        padding-bottom: 13px;
        margin-bottom: 16px !important;
    }

    .tr-desktop-menu-nav
    .td_block_list_menu
    ul.menu
    > li:last-child {
        border-bottom: none;

        padding-bottom: 0;
        margin-bottom: 0 !important;
    }

    /*
     * Submenu items: no separators, but retain a readable vertical rhythm.
     * This prevents the country links from becoming visually compressed.
     */
    .tr-desktop-menu-nav
    .td_block_list_menu
    ul.menu
    > li
    > ul.list-sub-menu
    > li,
    .tr-desktop-menu-nav
    .td_block_list_menu
    ul.menu
    > li
    > ul.sub-menu
    > li {
        border-bottom: none !important;

        padding-top: 3px !important;
        padding-bottom: 3px !important;
        margin-bottom: 6px !important;
    }

    .tr-desktop-menu-nav
    .td_block_list_menu
    ul.menu
    > li
    > ul.list-sub-menu
    > li:last-child,
    .tr-desktop-menu-nav
    .td_block_list_menu
    ul.menu
    > li
    > ul.sub-menu
    > li:last-child {
        margin-bottom: 0 !important;
    }

    /*
     * TagDiv submenu arrow.
     */
    .tr-desktop-menu-nav .td-icon-down::before {
        content: '\e801';

        font-size: 16px;
        color: rgba(35, 31, 32, 0.8);
    }

    /*
     * Current Issue highlight.
     */
    .tr-desktop-menu-nav li.current_issueMenu > a {
        color: #c74600 !important;
    }

    /*
     * Scrolling remains functional, but the scrollbar itself is hidden.
     * This restores the previous visual treatment.
     */
    #tdm-popup-modal-md_menu1 .tdm-pm-body,
    #tdm-popup-modal-md_menu1 .tr-desktop-menu-nav {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        scrollbar-gutter: auto !important;
    }

    #tdm-popup-modal-md_menu1 .tdm-pm-body::-webkit-scrollbar,
    #tdm-popup-modal-md_menu1 .tr-desktop-menu-nav::-webkit-scrollbar {
        display: none !important;

        width: 0 !important;
        height: 0 !important;
    }


    /*
     * Desktop bottom row:
     * language switcher left, social icons right, always one line.
     *
     * The tagDiv inner row currently has two 50% columns. Without these
     * guards the social element may wrap the last icon onto a second line.
     */
    .tr-desktop-menu-bottom {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;

        min-height: 0 !important;
    }

    .tr-desktop-menu-bottom > .vc_column_inner {
        display: flex !important;
        flex: 1 1 50% !important;
        align-items: center !important;

        width: 50% !important;
        min-width: 0 !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .tr-desktop-menu-bottom > .vc_column_inner:first-child {
        justify-content: flex-start !important;
    }

    .tr-desktop-menu-bottom > .vc_column_inner:last-child {
        justify-content: flex-end !important;
    }

    .tr-desktop-menu-bottom
    > .vc_column_inner
    > .vc_column-inner,
    .tr-desktop-menu-bottom
    > .vc_column_inner
    > .vc_column-inner
    > .wpb_wrapper {
        width: 100% !important;
        min-width: 0 !important;
    }

    .tr-desktop-menu-bottom
    > .vc_column_inner:first-child
    > .vc_column-inner
    > .wpb_wrapper {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }

    .tr-desktop-menu-bottom
    > .vc_column_inner:last-child
    > .vc_column-inner
    > .wpb_wrapper {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
    }

    /*
     * TagDiv Socials must stay on one row.
     */
    .tr-desktop-menu-bottom .tdm-social-wrapper {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;

        width: auto !important;
        max-width: 100% !important;
        white-space: nowrap !important;
    }

    .tr-desktop-menu-bottom .tdm-social-item-wrap {
        flex: 0 0 auto !important;
        float: none !important;
        margin-bottom: 0 !important;
    }

    /*
     * Global Shortcode host for the language switcher keeps its own
     * natural width and cannot force the bottom row to reflow.
     */
    .tr-desktop-menu-bottom .tdb_global_shortcode:has(.trde-language-switcher),
    .tr-desktop-menu-bottom .trde-language-switcher-host {
        display: flex !important;
        flex: 0 0 auto !important;

        width: auto !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

}