/* ==========================
   SHARED NAVBAR
   Scoped to .tb-nav-header / #mainNav so this file is safe to include
   on any page (e.g. Support) without clashing with that page's own CSS.
   Visuals are copied 1:1 from the original Home page navbar.
========================== */

.tb-nav-header{
    width:100%;
    max-width:100%;
    height: 70px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding: 12px var(--container-px);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    position:fixed;
    top:0;
    z-index: var(--z-sticky, 1000);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
    font-family:'Poppins',sans-serif;
    transition: all 0.4s var(--tb-transition, cubic-bezier(0.2, 0.8, 0.2, 1));
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.tb-nav-header.is-scrolled{
    background: rgba(255, 255, 255, 0.75);
    padding: 8px var(--container-px);
    box-shadow: 0 10px 30px rgba(18, 32, 58, 0.1);
    border-bottom: 1px solid rgba(13, 110, 253, 0.1);
}

.tb-nav-header .logo{
    display:flex;
    align-items:center;
    min-width:0;
    transition: transform 0.3s ease;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap:12px;
    font-size:18px;
    font-weight:700;
    color: var(--tb-primary, #0d6efd);
}

.logo-link img {
    width: auto;
    max-width: 180px;
    height: auto;
    object-fit: contain;
}

.tb-nav-header .logo:hover {
    transform: scale(1.02);
}

.tb-nav-header .logonav img{
    width:34px;
    height:auto;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.15);
}

.tb-nav-header .namenav img{
    width:140px;
    height:auto;
}

#mainNav{
    display:flex;
    align-items:center;
    gap:40px;
    min-width:0;
}

#mainNav a{
    position:relative;
    text-decoration:none;
    color: var(--tb-ink-soft, #33415c);
    font-weight:600;
    font-size: 15px;
    transition: all .3s ease;
    min-height:44px;
    display:inline-flex;
    align-items:center;
}

#mainNav a::after{
    content:'';
    position:absolute;
    left: 50%;
    bottom: 4px;
    width: 0;
    height: 3px;
    background: var(--tb-primary, #0d6efd);
    border-radius: 4px;
    transition: all .3s var(--tb-transition, cubic-bezier(0.2, 0.8, 0.2, 1));
    transform: translateX(-50%);
}

#mainNav a:hover{
    color: var(--tb-primary, #0d6efd);
    transform: translateY(-1px);
}

#mainNav a:hover::after{
    width: 20px;
}

#mainNav a.active{
    color: var(--tb-primary, #0d6efd);
}

#mainNav a.active::after{
    width: 100%;
    max-width: 24px;
    height: 2px;
}

.auth-btn,
.login-btn,
.register-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    padding: 10px 22px;
    border-radius: var(--radius-pill, 999px);
    cursor:pointer;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    min-height:44px;
    white-space: nowrap;
}

.auth-btn {
    background: linear-gradient(135deg, var(--tb-primary, #0d6efd), var(--tb-accent, #3d8bff));
    color: #ffffff !important;
    border: 1px solid transparent;
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.22);
    letter-spacing: 0.2px;
}

.auth-btn:hover {
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(13, 110, 253, 0.32);
    background: linear-gradient(135deg, var(--tb-primary-dark, #0b5ed7), var(--tb-primary, #0d6efd));
}

.auth-btn:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.2);
}

.auth-btn:focus-visible {
    outline: 2px solid var(--tb-primary, #0d6efd);
    outline-offset: 3px;
}

#mainNav .auth-btn::after,
#mainNav .login-btn::after,
#mainNav .register-btn::after {
    display: none !important;
    content: none !important;
}

.login-btn {
    background: transparent;
    color: var(--tb-primary);
    border: 1px solid var(--border-color);
    margin-right: 8px;
}

.login-btn:hover{
    background: var(--tb-primary-light);
    border-color: var(--tb-primary);
    transform: translateY(-2px);
}

.register-btn {
    background: linear-gradient(135deg, var(--tb-primary), var(--tb-accent));
    color: #fff;
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.2);
}

.register-btn:hover{
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 25px rgba(13, 110, 253, 0.3);
}

/* Mobile hamburger button */
.menu-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:flex-end;
    gap:5px;
    width:32px;
    height:26px;
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
    z-index:1101;
}

.menu-toggle span{
    display:block;
    width:100%;
    height:3px;
    border-radius:2px;
    background:#0d6efd;
    transition:.3s ease;
}

.menu-toggle.active span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2){
    opacity:0;
}

.menu-toggle.active span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
    width:100%;
}

.nav-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.4);
    opacity:0;
    visibility:hidden;
    transition:opacity .3s ease;
    z-index:990;
}

.nav-overlay.active{
    opacity:1;
    visibility:visible;
}

body.nav-open{
    overflow:hidden;
}

/* Logged-in profile chip */
.guest-nav-actions { display:flex; align-items:center; gap:10px; }
/* [hidden] is only a default UA style, and it loses to display:flex / display:inline-flex.
   Hidden elements must not occupy layout space. */
.guest-nav-actions[hidden],
.home-user-chip[hidden],
#mainNav a[hidden],
#navSupportLink[hidden] {
    display: none !important;
}
.home-user-chip { position:relative; margin-left:8px; }
.home-user-trigger { min-width:0; width:auto; height:auto; min-height:48px; padding:6px 10px 6px 6px; border:1.5px solid #dfe7f3; border-radius:999px; gap:10px; box-shadow:none; display:flex; align-items:center; cursor:pointer; font-family:inherit; color:#142744; }
.home-user-trigger:hover,
.home-user-chip.open .home-user-trigger { border-color:#0d6efd; box-shadow:0 6px 16px -8px rgba(13,110,253,.35); }
.home-avatar { width:34px; height:34px; flex:0 0 34px; border-radius:50%; display:grid; place-items:center; background:#347ff0; color:#fff; font-size:13px; font-weight:700; }
.home-user-meta { min-width:0; flex:1; display:flex; flex-direction:column; align-items:flex-start; line-height:1.25; }
.home-user-meta strong { max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:600; color:#172b4d; }
.home-user-meta small { margin-top:0; font-size:11px; color:#8da0bd; font-weight:400; }
.home-user-chevron { color:#8da0bd; transition:transform .2s ease; font-size:10px; margin-left:2px; }
.home-user-chip.open .home-user-chevron { transform:rotate(180deg); }
.home-user-menu { position:absolute; top:calc(100% + 8px); right:0; width:220px; padding:7px; border:1px solid #e3eaf5; border-radius:16px; background:#fff; box-shadow:0 14px 34px rgba(24,48,82,.16); display:none; z-index:1002; }
.home-user-chip.open .home-user-menu { display:block; animation:homeMenuIn .18s ease-out; }
.home-user-menu a, .home-user-menu button { width:100%; min-height:42px; padding:0 11px; border:0; border-radius:10px; background:transparent; color:#172b4d; display:flex; align-items:center; gap:10px; text-decoration:none; font:500 14px/1 Poppins,sans-serif; cursor:pointer; text-align:left; }
.home-user-menu a:hover, .home-user-menu button:hover { background:#eef4ff; color:#1677ff; }
.home-user-menu a:active, .home-user-menu button:active, .auth-btn:active, .login-btn:active, .register-btn:active { transform:scale(.98); }
.home-user-menu i { width:18px; text-align:center; font-size:14px; }
button[hidden]{ display:none !important; }
@keyframes homeMenuIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }

/* Help Dropdown Menu */
.nav-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.nav-dropdown-trigger {
    position: relative;
    background: none;
    border: none;
    color: var(--tb-ink-soft, #33415c);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    font-family: inherit;
    transition: all 0.3s ease;
}

.nav-dropdown-trigger::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 0;
    height: 3px;
    background: var(--tb-primary, #0d6efd);
    border-radius: 4px;
    transition: all 0.3s var(--tb-transition, cubic-bezier(0.2, 0.8, 0.2, 1));
    transform: translateX(-50%);
}

.nav-dropdown-trigger:hover {
    color: var(--tb-primary, #0d6efd);
    transform: translateY(-1px);
}

.nav-dropdown-trigger:hover::after {
    width: 20px;
}

.nav-dropdown-trigger[aria-expanded="true"]::after {
    width: 100%;
    max-width: 24px;
    height: 2px;
}

.nav-dropdown-trigger i {
    font-size: 10px;
    transition: transform 0.3s ease;
}

.nav-dropdown-trigger[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 200px;
    background: #fff;
    border: 1px solid #e3eaf5;
    border-radius: 12px;
    padding: 8px 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    transform: translateX(-50%) translateY(-8px);
    z-index: 1001;
}

.nav-dropdown-trigger[aria-expanded="true"] ~ .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: var(--tb-ink-soft, #33415c);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-height: 48px;
}

.nav-dropdown-menu a:hover {
    background: #f0f5ff;
    color: var(--tb-primary, #0d6efd);
    padding-left: 20px;
}

.nav-dropdown-menu a i {
    width: 16px;
    text-align: center;
    font-size: 14px;
}

@media(min-width:769px){
    .tb-nav-header{
        display:flex;
        align-items:center;
        justify-content:space-between;
    }
    .tb-nav-header .logo{
        flex:0 0 auto;
        min-width:180px;
    }
    #mainNav{
        flex:1;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:0;
    }
    .nav-links{
        display:flex;
        align-items:center;
        gap:32px;
        margin:0 auto;
    }
    #mainNav a{ font-size:14px; white-space:nowrap; }
    .guest-nav-actions,
    .home-user-chip{
        flex:0 0 auto;
        min-width:180px;
        display:flex;
        justify-content:flex-end;
    }
}

@media(max-width:768px){
    .tb-nav-header{
        flex-direction:row;
        justify-content:space-between;
        align-items:center;
        gap:0;
        min-height: 64px;
    }

    .logo-link img {
        max-width: clamp(120px, 40vw, 160px);
    }

    .menu-toggle{
        display:flex;
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        margin-right: -10px;
    }

    .menu-toggle span {
        width: 24px;
    }

    #mainNav{
        position:fixed;
        top:0;
        right:0;
        width:min(88vw, 320px);
        max-width:320px;
        height:100dvh;
        background:#fff;
        flex-direction:column;
        align-items:flex-start;
        justify-content:flex-start;
        gap:1.5rem;
        padding: 100px var(--container-px) 40px;
        box-shadow:-10px 0 30px rgba(0,0,0,.15);
        transform:none;
        clip-path:inset(0 0 0 100%);
        transition:clip-path .4s cubic-bezier(0.2, 0.8, 0.2, 1);
        z-index:1050;
        overflow-y:auto;
    }

    .nav-dropdown {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }

    .nav-dropdown-trigger {
        width: 100%;
        justify-content: space-between;
        padding: 12px 0;
        font-size: 17px;
        min-height: auto;
    }

    .nav-dropdown-trigger::after {
        display: none;
    }

    .nav-dropdown-menu {
        position: static;
        min-width: auto;
        width: 100%;
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        overflow: hidden;
        background: #f8f9ff;
        border: none;
        box-shadow: none;
        transform: none;
        transition: all 0.3s ease;
        padding: 0;
        margin-top: 0;
        border-radius: 0;
    }

    .nav-dropdown-trigger[aria-expanded="true"] ~ .nav-dropdown-menu {
        opacity: 1;
        visibility: visible;
        max-height: 200px;
        padding: 8px 0;
        transform: none;
    }

    .nav-dropdown-menu a {
        padding-left: 20px;
        padding-right: 0;
        font-size: 15px;
    }

    .nav-dropdown-menu a:hover {
        padding-left: 24px;
        background: #eef4ff;
    }

    .nav-links {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: 1.5rem;
    }

    .home-user-chip { width:100%; margin:8px 0 0; }
    .home-user-trigger { width:100%; min-width:0; }
    .home-user-menu { position:static; width:100%; margin-top:8px; box-shadow:none; border-radius:16px; }
    .guest-nav-actions { width:100%; flex-direction:column; }
    .guest-nav-actions .auth-btn,
    .guest-nav-actions .login-btn,
    .guest-nav-actions .register-btn { width:100%; text-align:center; }

    #mainNav.active{
        clip-path:inset(0);
    }

    #mainNav a{
        width:100%;
        font-size:17px;
    }

    #mainNav .auth-btn,
    #mainNav .login-btn,
    #mainNav .register-btn{
        width:100%;
        margin-top:10px;
    }
}

@media(max-width:600px){
    .tb-nav-header{
        padding:8px 14px;
    }

    .tb-nav-header .namenav img{
        width:min(120px, 42vw);
        height:auto;
    }

    .tb-nav-header .logonav img{
        width:26px;
        height:34px;
    }
}

@media (prefers-reduced-motion: reduce){
    .tb-nav-header{
        animation:none !important;
    }
}