/* =====================================================================
   Shared studio header / navigation.
   Loaded by base.html so every page renders an identical header.
   Any change here affects all pages.
   ===================================================================== */

/* Navbar: transparent so the page background shows through (lbox.es look) */
nav.bg-light {
    background: transparent !important;
    border-bottom: none;
}
/* Frosted + darkened layer behind the header content.
   Placed on ::before (not the nav itself) so it doesn't become a
   backdrop-filter root that would disable the submenu blur. */
nav.bg-light::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Fixed at the top of every page while scrolling */
nav.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    padding-left: 0;
    padding-right: 0;
}

/* Offset page content so it isn't hidden behind the fixed header */
body { padding-top: 82px; }
nav > .container { max-width: 100%; padding-left: 16px; padding-right: 16px; }
nav a.logo { padding: 0; }
nav a.logo img#logo {
    height: 50px;
    width: auto;
    margin: 0;
    filter: brightness(1.3);
}

/* Center the menu horizontally on the page */
nav .main-menu {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Open submenus on hover instead of click */
nav .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
}

/* Menu labels — lbox.es style */
nav .navbar-nav .nav-link {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: normal;
    color: rgba(143, 174, 224, 0.5) !important;
    padding: 8px 0;
    margin: 0 22px;
    transition: color 0.25s ease;
}
nav .navbar-nav .nav-link:hover,
nav .navbar-nav .show > .nav-link {
    color: #ffffff !important;
}

/* Username is informational, not a link — no hover highlight, no pointer */
nav .navbar-nav .username {
    cursor: default;
}
nav .navbar-nav .username:hover {
    color: rgba(143, 174, 224, 0.5) !important;
}

/* Remove Bootstrap's default dropdown caret for a cleaner lbox look */
nav .dropdown-toggle::after { display: none; }

/* Dropdown panels */
nav .dropdown-menu {
    background-color: rgba(16, 22, 37, 0.92);
    backdrop-filter: blur(6px);
    border: none;
    border-radius: 0;
    margin-top: 0;
    padding: 6px 0;
    min-width: 210px;
}
nav .dropdown-item {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 500;
    color: rgba(143, 174, 224, 0.5);
    padding: 9px 20px;
    transition: color 0.2s ease;
}
nav .dropdown-item:hover,
nav .dropdown-item:focus {
    background-color: transparent;
    color: #ffffff;
}
nav .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
nav .dropdown-item .material-icons {
    font-size: 18px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}
nav .dropdown-item:hover .material-icons,
nav .dropdown-item:focus .material-icons {
    opacity: 1;
}
nav .dropdown-item img {
    height: 18px;
    width: 18px;
    object-fit: contain;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}
nav .dropdown-item:hover img,
nav .dropdown-item:focus img {
    opacity: 1;
}
nav .dropdown-item .icon-external {
    font-size: 14px;
    margin-left: auto;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}
nav .dropdown-item:hover .icon-external,
nav .dropdown-item:focus .icon-external {
    opacity: 1;
}

/* Login / Logout buttons use the logo blue at 50% opacity */
nav .btn-primary {
    background-color: rgba(70, 107, 184, 0.5);
    border: none;
    color: #ffffff;
}
nav .btn-primary:hover {
    background-color: rgba(255, 255, 255, 0.85);
    color: #466BB8;
}