/* ARAH R10 — Refined Glass Navigation Bar */

.header {
    background: rgba(5, 25, 30, 0.68) !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid rgba(103, 198, 184, 0.20) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    position: sticky;
    top: 0;
    z-index: 50;
}

.nav-bar {
    height: 88px;
}

/* Main menu links */
.navigation {
    gap: 16px;
}

.navigation > a:not(.button) {
    color: rgba(232, 245, 243, 0.88) !important;
    padding: 10px 12px;
    border-radius: 9px;
    transition: all 0.2s ease;
}

.navigation > a:not(.button):hover,
.navigation > a:not(.button):focus-visible {
    color: #f8b34b !important;
    background: rgba(255, 255, 255, 0.06);
}

/* Divider */
.nav-divider {
    background: rgba(139, 213, 201, 0.28) !important;
    height: 28px;
}

/* Sign in button */
.navigation .button-gold {
    background: #f8b34b;
    border-color: #f8b34b;
    color: #09272c;
    border-radius: 12px;
    box-shadow: 0 6px 22px rgba(248, 179, 75, 0.18);
}

.navigation .button-gold:hover {
    background: #ffca70;
    border-color: #ffca70;
    color: #09272c;
    transform: translateY(-2px);
}

/* Mobile navigation */
@media (max-width: 920px) {
    .nav-bar {
        height: 76px;
    }

    .navigation {
        background: rgba(6, 29, 34, 0.97) !important;
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-bottom: 1px solid rgba(103, 198, 184, 0.22);
        padding: 18px 25px 25px;
        gap: 0;
    }

    .navigation > a:not(.button) {
        padding: 13px 10px;
    }

    .nav-toggle {
        background: rgba(17, 56, 61, 0.75);
        border-color: rgba(139, 213, 201, 0.28);
        border-radius: 10px;
    }
}