/*
 * Susret.app P2-05 responsive interaction layer.
 * Site-owned mobile More/navigation behavior plus the desktop header correction.
 */

@media (min-width: 1024px) {
    /* Keep the desktop toolbar on a single line. The three site-owned utility
     * links remain available through their dedicated surfaces/mobile More and
     * must not compete with search, add, notifications and account controls. */
    #bx-menu-toolbar-2-container .susret-p3-01-utility,
    #bx-menu-toolbar-2-container .susret-p3-03-utility,
    #bx-menu-toolbar-2-container .susret-p3-05-utility {
        display: none !important;
    }

    #bx-toolbar {
        min-height: 4.25rem;
    }

    #bx-toolbar .bx-header-cnt {
        align-items: center !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: clamp(.55rem, 1vw, 1rem);
        min-height: 4.25rem;
        max-width: 90rem;
        padding-left: clamp(.85rem, 1.8vw, 1.5rem);
        padding-right: clamp(.85rem, 1.8vw, 1.5rem);
        width: 100%;
    }

    #bx-logo-container {
        flex: 0 0 auto;
        margin-right: .35rem;
    }

    #bx-toolbar .bx-toolbar-items-group {
        min-width: 0;
    }

    #bx-toolbar .bx-ti-menu,
    #bx-menu-toolbar-1-container,
    #bx-sliding-menu-sys_site,
    #bx-sliding-menu-sys_site .bx-inline-menu-main-cnt,
    #bx-sliding-menu-sys_site .bx-menu-more-auto-wrapper {
        min-width: 0;
        width: 100% !important;
    }

    #bx-toolbar .bx-ti-menu {
        flex: 2 2 auto !important;
    }

    #bx-logo-container > a {
        min-height: 4.25rem;
    }

    #bx-toolbar #bx-logo,
    #bx-toolbar #bx-logo-dark {
        max-height: 2.1rem;
        width: auto;
    }

    #sys-site {
        align-items: stretch !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: .05rem;
        white-space: nowrap;
    }

    #sys-site > li {
        align-items: stretch;
        display: flex;
        margin: 0 !important;
    }

    #sys-site > li > a {
        align-items: center;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: inset 0 -3px 0 transparent !important;
        color: var(--sus-text-muted) !important;
        display: inline-flex;
        font-size: .93rem;
        font-weight: 590 !important;
        gap: .38rem;
        justify-content: center;
        min-height: 4.25rem;
        padding: 0 .62rem;
        transition: color .15s ease, box-shadow .15s ease;
    }

    #sys-site > li > a:hover,
    #sys-site > li > a:focus-visible {
        background: transparent !important;
        border-color: transparent !important;
        color: var(--sus-brand-primary) !important;
    }

    #sys-site > li.bx-menu-tab-active > a,
    #sys-site > li.bx-menu-tab-active > a:hover,
    #sys-site > li.bx-menu-tab-active > a:focus-visible {
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: inset 0 -3px 0 var(--sus-brand-accent) !important;
        color: var(--sus-brand-primary) !important;
        font-weight: 700 !important;
    }

    #sys-site > li > a i {
        color: currentColor !important;
        font-size: 1rem;
        line-height: 1;
        margin: 0 !important;
        opacity: .92;
        width: 1.1rem;
    }

    #bx-menu-toolbar-2-container {
        align-items: center !important;
        display: flex !important;
        flex: 0 0 auto;
        flex-wrap: nowrap !important;
        gap: .22rem;
        justify-content: flex-end;
        margin-left: auto;
        min-width: max-content;
        white-space: nowrap;
    }

    #bx-menu-toolbar-2-container > * {
        flex: 0 0 auto;
        margin: 0 !important;
    }

    #bx-menu-toolbar-item-search > a,
    #bx-menu-toolbar-item-add-content > a,
    #bx-menu-toolbar-item-notifications-preview > a,
    #bx-menu-toolbar-item-account > a {
        align-items: center !important;
        background: transparent !important;
        border: 1px solid transparent !important;
        border-radius: 9999px !important;
        box-shadow: none !important;
        display: inline-flex !important;
        height: 2.45rem;
        justify-content: center !important;
        min-height: 2.45rem !important;
        min-width: 2.45rem !important;
        padding: 0 !important;
        width: 2.45rem;
    }

    #bx-menu-toolbar-item-search > a:hover,
    #bx-menu-toolbar-item-add-content > a:hover,
    #bx-menu-toolbar-item-notifications-preview > a:hover,
    #bx-menu-toolbar-item-account > a:hover,
    #bx-menu-toolbar-item-search > a:focus-visible,
    #bx-menu-toolbar-item-add-content > a:focus-visible,
    #bx-menu-toolbar-item-notifications-preview > a:focus-visible,
    #bx-menu-toolbar-item-account > a:focus-visible {
        background: var(--sus-surface-elevated) !important;
        border-color: var(--sus-border) !important;
    }

    #bx-menu-toolbar-item-search i,
    #bx-menu-toolbar-item-add-content i,
    #bx-menu-toolbar-item-notifications-preview i {
        font-size: 1rem !important;
        margin: 0 !important;
    }

    #bx-menu-toolbar-item-account img {
        height: 2rem !important;
        max-height: 2rem !important;
        max-width: 2rem !important;
        width: 2rem !important;
    }
}

@media (min-width: 1024px) and (max-width: 1180px) {
    #bx-toolbar .bx-header-cnt {
        gap: .35rem;
        padding-left: .65rem;
        padding-right: .65rem;
    }

    #bx-toolbar #bx-logo,
    #bx-toolbar #bx-logo-dark {
        max-height: 1.9rem;
    }

    #sys-site > li > a {
        font-size: .84rem;
        gap: .26rem;
        padding-left: .4rem;
        padding-right: .4rem;
    }

    #sys-site > li > a i {
        font-size: .9rem;
        width: .95rem;
    }

    #bx-menu-toolbar-item-search > a,
    #bx-menu-toolbar-item-add-content > a,
    #bx-menu-toolbar-item-notifications-preview > a,
    #bx-menu-toolbar-item-account > a {
        height: 2.3rem;
        min-height: 2.3rem !important;
        min-width: 2.3rem !important;
        width: 2.3rem;
    }
}

@media (max-width: 1023px) {
    #bx-menu-toolbar-2-container .susret-p3-01-utility,
    #bx-menu-toolbar-2-container .susret-p3-03-utility,
    #bx-menu-toolbar-2-container .susret-p3-05-utility {
        display: none !important;
    }

    body.susret-p2-mobile-more-open {
        overflow: hidden;
    }

    body.bx-artificer {
        padding-bottom: calc(4.75rem + env(safe-area-inset-bottom));
    }

    .susret-mobile-more-panel {
        bottom: calc(4.55rem + env(safe-area-inset-bottom));
        max-height: min(70vh, 32rem);
        max-height: min(70dvh, 32rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .susret-mobile-more-panel,
    .susret-mobile-nav {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}