/*
 * Dingous public navigation — final responsive contract.
 * Loaded after legacy/front theme CSS so menu behavior has one deterministic
 * responsive layer instead of accumulating breakpoint overrides.
 */

:root {
    --ct-nav-topbar-height: 76px;
    --ct-nav-sidebar-width: 270px;
    --ct-nav-sidebar-compact-width: 78px;
}

/* Shared stability */
.ct-front-topbar,
.ct-front-brand-row,
.ct-front-actions,
.ct-front-account,
.ct-front-nav,
.ct-company-search {
    min-width: 0 !important;
}

.ct-front-brand-row {
    grid-area: brand !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.ct-front-actions {
    grid-area: actions !important;
}

.ct-front-nav {
    grid-area: nav !important;
}

.ct-front-brand-logo {
    max-width: min(190px, 22vw) !important;
}

.ct-front-nav-link,
#frontSidebar .menu-item {
    text-wrap: nowrap;
}

.ct-top-nav-toggle {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
    cursor: pointer !important;
    touch-action: manipulation;
}

.ct-top-nav-toggle:focus-visible,
.ct-front-nav-link:focus-visible,
#frontSidebar .menu-item:focus-visible {
    outline: 2px solid rgba(56,189,248,.9) !important;
    outline-offset: 2px !important;
}

/* Wide desktop: everything can remain on one line. */
@media (min-width: 1751px) {
    .ct-front-topbar {
        position: fixed !important;
        inset: 0 0 auto 0 !important;
        min-height: var(--ct-nav-topbar-height) !important;
        display: grid !important;
        grid-template-columns: minmax(180px, 210px) minmax(0, 1fr) minmax(500px, 620px) !important;
        grid-template-areas: "brand nav actions" !important;
        align-items: center !important;
        gap: clamp(8px, .75vw, 16px) !important;
        padding: 9px clamp(14px, 1.2vw, 24px) !important;
    }

    .ct-top-nav-toggle {
        display: none !important;
    }

    .ct-front-nav {
        position: static !important;
        display: flex !important;
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        gap: clamp(2px, .3vw, 7px) !important;
        overflow: hidden !important;
    }

    .ct-front-nav-link {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        padding: 9px clamp(5px, .42vw, 10px) !important;
        font-size: clamp(11px, .7vw, 13px) !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .ct-front-actions {
        display: grid !important;
        grid-template-columns: minmax(240px, 1fr) auto !important;
        align-items: center !important;
        justify-content: end !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .ct-company-search {
        width: 100% !important;
        max-width: 410px !important;
    }

    .ct-front-account {
        width: auto !important;
        min-width: max-content !important;
        justify-content: flex-end !important;
    }

    #frontSidebar.sidebar.front-sidebar {
        top: var(--ct-nav-topbar-height) !important;
        height: calc(100dvh - var(--ct-nav-topbar-height)) !important;
        max-height: calc(100dvh - var(--ct-nav-topbar-height)) !important;
    }

    .content {
        padding-top: calc(var(--ct-nav-topbar-height) + var(--ct-front-page-gutter, 24px)) !important;
    }
}

/*
 * Normal desktop/laptop: before links collide, convert the top menu into a
 * dropdown. Search/login remain visible, so primary actions never disappear.
 */
@media (min-width: 1201px) and (max-width: 1750px) {
    .ct-front-topbar {
        position: fixed !important;
        inset: 0 0 auto 0 !important;
        min-height: var(--ct-nav-topbar-height) !important;
        display: grid !important;
        grid-template-columns: minmax(190px, auto) minmax(0, 1fr) !important;
        grid-template-areas: "brand actions" !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 9px 16px !important;
        overflow: visible !important;
    }

    .ct-front-brand-row {
        justify-content: flex-start !important;
    }

    .ct-top-nav-toggle {
        display: inline-flex !important;
        margin-left: 4px !important;
        order: 2;
    }

    .ct-front-actions {
        display: grid !important;
        grid-template-columns: minmax(220px, 420px) auto !important;
        align-items: center !important;
        justify-content: end !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .ct-company-search {
        width: 100% !important;
        max-width: 420px !important;
        justify-self: end !important;
    }

    .ct-front-account {
        width: auto !important;
        min-width: max-content !important;
        justify-content: flex-end !important;
    }

    .ct-front-nav {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        right: 16px !important;
        left: auto !important;
        width: min(700px, calc(100vw - 32px)) !important;
        max-height: calc(100dvh - 100px) !important;
        display: none !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 12px !important;
        overflow: auto !important;
        border: 1px solid rgba(148,163,184,.20) !important;
        border-radius: 18px !important;
        background: rgba(7,16,31,.98) !important;
        box-shadow: 0 22px 60px rgba(0,0,0,.42) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
    }

    body.ct-top-nav-open .ct-front-nav {
        display: grid !important;
    }

    .ct-front-nav-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 44px !important;
        padding: 10px 12px !important;
        border: 1px solid rgba(255,255,255,.08) !important;
        border-radius: 13px !important;
        background: rgba(255,255,255,.045) !important;
        font-size: 13px !important;
        text-align: center !important;
    }

    #frontSidebar.sidebar.front-sidebar {
        top: var(--ct-nav-topbar-height) !important;
        height: calc(100dvh - var(--ct-nav-topbar-height)) !important;
        max-height: calc(100dvh - var(--ct-nav-topbar-height)) !important;
    }

    .content {
        padding-top: calc(var(--ct-nav-topbar-height) + var(--ct-front-page-gutter, 24px)) !important;
    }
}

/* Slightly narrower desktop: make the sidebar more economical as well. */
@media (min-width: 1201px) and (max-width: 1450px) {
    :root {
        --ct-front-sidebar-width: 224px;
        --ct-front-sidebar-collapsed-width: 72px;
    }

    #frontSidebar.sidebar.front-sidebar {
        width: var(--ct-front-sidebar-width) !important;
        min-width: var(--ct-front-sidebar-width) !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    #frontSidebar .menu-item {
        min-height: 50px !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
        gap: 10px !important;
    }

    body:not(.front-sidebar-collapsed) .content {
        width: calc(100vw - var(--ct-front-sidebar-width) - var(--ct-front-page-gutter, 20px)) !important;
        margin-left: var(--ct-front-sidebar-width) !important;
        margin-right: 0 !important;
    }
}

/*
 * Tablet and smaller laptops: one navigation system is enough. The sidebar is
 * removed from layout, topbar becomes sticky (not fixed), and the hamburger
 * owns all primary navigation.
 */
@media (max-width: 1200px) {
    :root {
        --ct-front-sidebar-width: 0px;
        --ct-front-sidebar-collapsed-width: 0px;
    }

    .ct-front-topbar {
        position: sticky !important;
        inset: auto !important;
        top: 0 !important;
        min-height: auto !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "brand"
            "actions" !important;
        align-items: center !important;
        gap: 9px !important;
        padding: 9px 12px !important;
        overflow: visible !important;
    }

    .ct-front-brand-row {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .ct-front-brand {
        max-width: calc(100% - 56px) !important;
    }

    .ct-top-nav-toggle {
        display: inline-flex !important;
        margin-left: auto !important;
    }

    .ct-front-actions {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(180px, 1fr) auto !important;
        align-items: center !important;
        gap: 9px !important;
    }

    .ct-company-search {
        width: 100% !important;
        max-width: none !important;
    }

    .ct-front-account {
        width: auto !important;
        min-width: max-content !important;
        justify-content: flex-end !important;
    }

    .ct-front-nav {
        position: absolute !important;
        top: calc(100% + 6px) !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-height: min(70dvh, 520px) !important;
        display: none !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 10px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        border: 1px solid rgba(148,163,184,.20) !important;
        border-radius: 16px !important;
        background: rgba(7,16,31,.985) !important;
        box-shadow: 0 22px 60px rgba(0,0,0,.46) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
    }

    body.ct-top-nav-open .ct-front-nav {
        display: grid !important;
    }

    .ct-front-nav-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        padding: 10px !important;
        border: 1px solid rgba(255,255,255,.08) !important;
        border-radius: 12px !important;
        background: rgba(255,255,255,.05) !important;
        font-size: 13px !important;
        text-align: center !important;
    }

    #frontSidebar.sidebar.front-sidebar {
        display: none !important;
    }

    body:not(.front-sidebar-collapsed) .content,
    body.front-sidebar-collapsed .content,
    .content {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-top: var(--ct-front-page-gutter, 16px) !important;
        padding-left: var(--ct-front-page-gutter, 16px) !important;
        padding-right: var(--ct-front-page-gutter, 16px) !important;
    }
}

/* Phones: search, account and navigation stack without horizontal squeezing. */
@media (max-width: 700px) {
    .ct-front-topbar {
        padding: 8px !important;
        gap: 8px !important;
    }

    .ct-front-brand-logo {
        height: 36px !important;
        max-width: min(158px, calc(100vw - 86px)) !important;
    }

    .ct-front-actions {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    .ct-company-search {
        min-height: 44px !important;
    }

    .ct-front-account {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: stretch !important;
    }

    .ct-auth-guest {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .ct-auth-login,
    .ct-auth-register,
    .ct-auth-logout {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .ct-auth-register {
        display: inline-flex !important;
    }

    .ct-auth-user {
        width: 100% !important;
        max-width: 100% !important;
    }

    .ct-front-nav {
        left: 8px !important;
        right: 8px !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 460px) {
    .ct-front-nav {
        grid-template-columns: 1fr !important;
        max-height: 64dvh !important;
    }

    .ct-auth-guest {
        grid-template-columns: 1fr 1fr !important;
    }

    .ct-auth-login .material-symbols-outlined {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ct-front-nav,
    .ct-top-nav-toggle,
    #frontSidebar,
    #frontSidebar * {
        transition: none !important;
    }
}