:root{

--nav-icon-size:20px;

}


.site-header{

position:fixed;

top:0;

left:0;

right:0;

width:100%;

z-index:9999;

transition:

all .35s ease;

}


/* ======================

SCROLLED NAVBAR

====================== */

.site-header.scrolled .nav-wrapper{

padding:8px 40px;



background:

rgba(255,255,255,.16);



backdrop-filter:

blur(20px)

saturate(160%)

brightness(112%)

contrast(105%);

-webkit-backdrop-filter:

blur(20px)

saturate(160%)

brightness(112%)

contrast(105%);



border-top:

1px solid rgba(255,255,255,.92);



border-bottom:

1px solid rgba(255,255,255,.28);



box-shadow:

0 8px 32px rgba(0,0,0,.05),

inset 0 1px 0 rgba(255,255,255,.90),

inset 0 -1px 0 rgba(255,255,255,.18);



transform:

translateY(0);

}




.site-header.scrolled .nav-logo img{

height:52px;

}





.site-header.scrolled .desktop-nav a{

padding:

8px 14px;

}


.nav-wrapper{

position:relative;

width:100%;

padding:8px 32px;

display:flex;

align-items:center;

justify-content:space-between;

overflow:hidden;



background:

rgba(255,255,255,.18);



backdrop-filter:

blur(24px)

saturate(180%)

brightness(115%);

-webkit-backdrop-filter:

blur(24px)

saturate(180%)

brightness(115%);



border-top:

1px solid rgba(255,255,255,.90);

border-bottom:

1px solid rgba(255,255,255,.28);



box-shadow:

0 10px 40px rgba(0,0,0,.05),

inset 0 1px rgba(255,255,255,.9),

inset 0 -1px rgba(255,255,255,.15);

}


.nav-wrapper::before{

content:"";

position:absolute;

inset:0;



background:

linear-gradient(

180deg,

rgba(255,255,255,.70),

rgba(255,255,255,.18) 22%,

rgba(255,255,255,.06) 50%,

rgba(255,255,255,.18) 78%,

rgba(255,255,255,.45)

);



mix-blend-mode:screen;

pointer-events:none;

}

.nav-wrapper::after{

content:"";

position:absolute;

top:-220%;

left:-30%;

width:26%;

height:520%;



background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.85),

transparent

);



transform:

rotate(28deg);

filter:blur(10px);

opacity:.65;



animation:

glassSweep 9s ease-in-out infinite;

pointer-events:none;

}



@keyframes glassSweep{

0%{

left:-45%;

}



45%{

left:140%;

}



100%{

left:140%;

}

}

.nav-logo img{

height:52px;

width:auto;

display:block;

object-fit:contain;

transition:

all .35s ease;

}


.site-header{

position:fixed;

top:0;

left:0;

right:0;

width:100%;

z-index:9999;



background:

transparent;



transition:

all .35s ease;

}


.nav-wrapper{

isolation:isolate;

}


/* ======================
DESKTOP MENU
====================== */

.desktop-nav{

flex:1;

display:flex;

justify-content:center;

}

.desktop-nav ul{

display:flex;

flex-direction:row;

align-items:center;

justify-content:center;

gap:14px;

margin:0;

padding:0;

list-style:none;

width:auto;

}

.desktop-nav li{

list-style:none;

margin:0;

padding:0;

display:block;

}

.mobile-nav ul{

list-style:none;

margin:0;

padding:0;

}


.desktop-nav a{

display:flex;

align-items:center;

gap:6px;

padding:10px 16px;

font-weight:800;

color:#000;

border:1px solid transparent;

border-radius:10px;

transition:all .22s ease;

}


.desktop-nav a:hover{

border:1px solid #000;

background:transparent;

transform:scale(1.04);

}


.desktop-nav a img,
.mobile-nav a img,
.nav-login img{

filter:brightness(0);

transition:.22s;

}


.nav-actions{

display:flex;

gap:12px;

}



.nav-login{

display:flex;

align-items:center;

justify-content:center;

gap:6px;

padding:10px 18px;

min-height:44px;

background:transparent;

color:#000;

font-weight:800;

line-height:1;

border:1px solid transparent;

border-radius:10px;

transition:all .22s ease;

}

.nav-icon{

width:var(--nav-icon-size) !important;

height:var(--nav-icon-size) !important;

min-width:var(--nav-icon-size);

max-width:var(--nav-icon-size);

max-height:var(--nav-icon-size);

flex:0 0 var(--nav-icon-size);

display:block;

object-fit:contain;

object-position:center;

filter:brightness(0);

opacity:1;

transition:

all .22s ease;

}


.nav-login img{

display:block;

}


.nav-login .nav-icon{

transform:

translateY(0);

}


.nav-login:hover{

border:1px solid #000;

background:rgba(255,255,255,.12);

transform:scale(1.04);

}



.nav-login:hover img{

transform:scale(1.08);

}


.mobile-toggle{
    display:none;
}

.mobile-nav{
    display:none;
}

@media(max-width:992px){

.desktop-nav{
    display:none;
}

.mobile-toggle{

    display:flex;

    align-items:center;
    justify-content:center;

    width:46px;
    height:46px;

    font-size:28px;

    background:#fff;
    border:1px solid #ddd;
    border-radius:10px;

    cursor:pointer;

}

.mobile-nav{

    position:fixed;

    top:70px;
    left:0;
    right:0;

    display:none;

    flex-direction:column;

    background:#fff;

    padding:15px;

    box-shadow:0 10px 30px rgba(0,0,0,.15);

    z-index:9998;

}

.mobile-nav.active{

    display:flex;

}

.mobile-nav a{

    padding:15px;

    border-bottom:1px solid #eee;

    color:#000;

    font-weight:700;

}

.mobile-nav a:last-child{

    border-bottom:none;

}

}
.mobile-nav a:hover{

border:

2px solid #000;

transform:

scale(1.03);

}

/* ==========================================================================
   DATACORB NAVBAR — LOGIN / MY ACCOUNT / LOG OUT BUTTON
   ========================================================================== */

.nav-account-action {
    min-width: max-content;
    min-height: 42px;
    padding: 9px 14px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    box-sizing: border-box;
    border: 1px solid #070b12;
    border-radius: 999px;

    color: #ffffff !important;
    background: #070b12 !important;

    font-size: 14px;
    font-weight: 800 !important;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none !important;

    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.nav-account-action:hover,
.nav-account-action:focus-visible {
    color: #ffffff !important;
    background: #070b12 !important;
    border-color: #070b12 !important;

    font-weight: 800 !important;
    text-decoration: none !important;

    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(7, 11, 18, 0.18);
}

.nav-account-action:focus-visible {
    outline: 3px solid rgba(42, 112, 196, 0.28);
    outline-offset: 3px;
}

/* Account-button icon */
.nav-account-action .nav-account-icon {
    display: block;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    flex: 0 0 18px;

    object-fit: contain;
    opacity: 1;

    /* White icon on the black light-mode button */
    filter: grayscale(1) brightness(0) invert(1) !important;
}

/* Dark mode: white button with black text and icon */
html[data-theme="dark"] .nav-account-action {
    color: #07101b !important;
    background: #ffffff !important;
    border-color: #ffffff !important;
}

html[data-theme="dark"] .nav-account-action:hover,
html[data-theme="dark"] .nav-account-action:focus-visible {
    color: #07101b !important;
    background: #ffffff !important;
    border-color: #ffffff !important;

    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
}

html[data-theme="dark"] .nav-account-action .nav-account-icon {
    /* Black icon on the white dark-mode button */
    filter: grayscale(1) brightness(0) !important;
}

/* Mobile navigation account action */
.mobile-nav .mobile-account-action {
    margin-top: 7px;
    min-height: 46px;

    display: flex !important;
    align-items: center;
    justify-content: center;

    color: #ffffff !important;
    background: #070b12 !important;
    border: 1px solid #070b12 !important;
    border-radius: 999px !important;

    font-weight: 800 !important;
    text-align: center;
}

.mobile-nav .mobile-account-action:hover,
.mobile-nav .mobile-account-action:focus-visible {
    color: #ffffff !important;
    background: #070b12 !important;
    transform: none !important;
}

html[data-theme="dark"] .mobile-nav .mobile-account-action {
    color: #07101b !important;
    background: #ffffff !important;
    border-color: #ffffff !important;
}

/*
 * Keep the dashboard account action visible on tablet.
 * On very small mobile screens it remains hidden to prevent navbar overflow;
 * logout remains available through the dashboard/sidebar navigation.
 */
@media (max-width: 700px) {
    body:not(.dashboard-page)
    .site-header
    .nav-actions
    .nav-account-action {
        display: none !important;
    }
}

/* ==================================================
   NAV ACCOUNT BUTTON — FINAL HOVER EFFECT
================================================== */

/* Light mode:
   normal = black fill / white content
   hover  = white fill / black content
*/
html[data-theme="light"] .nav-account-action:hover,
html[data-theme="light"] .nav-account-action:focus-visible {
    color: #070b12 !important;
    background: #ffffff !important;
    border-color: #070b12 !important;

    font-weight: 800 !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 10px 22px rgba(7, 11, 18, 0.18) !important;
}

/* Light-mode hover icon becomes black */
html[data-theme="light"] .nav-account-action:hover .nav-account-icon,
html[data-theme="light"] .nav-account-action:focus-visible .nav-account-icon {
    filter: grayscale(1) brightness(0) !important;
}

/* Keep nested text black and bold */
html[data-theme="light"] .nav-account-action:hover span,
html[data-theme="light"] .nav-account-action:focus-visible span {
    color: #070b12 !important;
    font-weight: 800 !important;
}


/* Dark mode:
   normal = white fill / black content
   hover  = black fill / white content
*/
html[data-theme="dark"] .nav-account-action:hover,
html[data-theme="dark"] .nav-account-action:focus-visible {
    color: #ffffff !important;
    background: #070b12 !important;
    border-color: #ffffff !important;

    font-weight: 800 !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

/* Dark-mode hover icon becomes white */
html[data-theme="dark"] .nav-account-action:hover .nav-account-icon,
html[data-theme="dark"] .nav-account-action:focus-visible .nav-account-icon {
    filter: grayscale(1) brightness(0) invert(1) !important;
}

/* Keep nested text white and bold */
html[data-theme="dark"] .nav-account-action:hover span,
html[data-theme="dark"] .nav-account-action:focus-visible span {
    color: #ffffff !important;
    font-weight: 800 !important;
}

html[data-theme="light"] .mobile-nav .mobile-account-action:hover,
html[data-theme="light"] .mobile-nav .mobile-account-action:focus-visible {
    color: #070b12 !important;
    background: #ffffff !important;
    border-color: #070b12 !important;
    font-weight: 800 !important;
}

html[data-theme="dark"] .mobile-nav .mobile-account-action:hover,
html[data-theme="dark"] .mobile-nav .mobile-account-action:focus-visible {
    color: #ffffff !important;
    background: #070b12 !important;
    border-color: #ffffff !important;
    font-weight: 800 !important;
}

/* ==================================================
   MOBILE NAVIGATION — SELECTED PAGE COLORS
================================================== */

/*
 * Light mode:
 * selected item = black fill with bold white text
 */
html[data-theme="light"] .mobile-nav a.active:not(.mobile-account-action),
html[data-theme="light"] .mobile-nav a.is-active:not(.mobile-account-action),
html[data-theme="light"] .mobile-nav a[aria-current="page"]:not(.mobile-account-action),
html[data-theme="light"] .mobile-nav a.active:not(.mobile-account-action):hover,
html[data-theme="light"] .mobile-nav a.is-active:not(.mobile-account-action):hover,
html[data-theme="light"] .mobile-nav a[aria-current="page"]:not(.mobile-account-action):hover,
html[data-theme="light"] .mobile-nav a.active:not(.mobile-account-action):focus-visible,
html[data-theme="light"] .mobile-nav a.is-active:not(.mobile-account-action):focus-visible,
html[data-theme="light"] .mobile-nav a[aria-current="page"]:not(.mobile-account-action):focus-visible {
    color: #ffffff !important;
    background: #070b12 !important;
    border-color: #070b12 !important;

    font-weight: 900 !important;
    text-shadow: none !important;
}

/* Ensure any nested text inherits white */
html[data-theme="light"] .mobile-nav a.active:not(.mobile-account-action) *,
html[data-theme="light"] .mobile-nav a.is-active:not(.mobile-account-action) *,
html[data-theme="light"] .mobile-nav a[aria-current="page"]:not(.mobile-account-action) * {
    color: inherit !important;
}


/*
 * Dark mode:
 * selected item = white fill with bold black text
 */
html[data-theme="dark"] .mobile-nav a.active:not(.mobile-account-action),
html[data-theme="dark"] .mobile-nav a.is-active:not(.mobile-account-action),
html[data-theme="dark"] .mobile-nav a[aria-current="page"]:not(.mobile-account-action),
html[data-theme="dark"] .mobile-nav a.active:not(.mobile-account-action):hover,
html[data-theme="dark"] .mobile-nav a.is-active:not(.mobile-account-action):hover,
html[data-theme="dark"] .mobile-nav a[aria-current="page"]:not(.mobile-account-action):hover,
html[data-theme="dark"] .mobile-nav a.active:not(.mobile-account-action):focus-visible,
html[data-theme="dark"] .mobile-nav a.is-active:not(.mobile-account-action):focus-visible,
html[data-theme="dark"] .mobile-nav a[aria-current="page"]:not(.mobile-account-action):focus-visible {
    color: #070b12 !important;
    background: #ffffff !important;
    border-color: #ffffff !important;

    font-weight: 900 !important;
    text-shadow: none !important;
}

/* Ensure any nested text inherits black */
html[data-theme="dark"] .mobile-nav a.active:not(.mobile-account-action) *,
html[data-theme="dark"] .mobile-nav a.is-active:not(.mobile-account-action) *,
html[data-theme="dark"] .mobile-nav a[aria-current="page"]:not(.mobile-account-action) * {
    color: inherit !important;
}