/* ================= ROOT VARIABLES ================= */

:root {
    --nav-bg: rgba(255, 255, 255, 0.4);
    --nav-blur: 15px;
    --nav-border: rgba(255, 255, 255, 0.5);
    --nav-radius: 100px;
    --nav-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);

    --nav-title-color: #000;
    --nav-subtitle-color: #6c757d;

    --nav-title-size: 1.2rem;
    --nav-subtitle-size: 0.65em;

    --nav-logo-height: 75px;

    --nav-btn-font-size: 0.9rem;
    --nav-btn-font-weight: 700;
    --nav-btn-transition: 0.3s;
}


/* ================= NAVBAR ================= */

.custom-navbar {
    background: var(--nav-bg);
    backdrop-filter: blur(var(--nav-blur));
    -webkit-backdrop-filter: blur(var(--nav-blur));
    border: 1px solid var(--nav-border);
    border-radius: var(--nav-radius);
    box-shadow: var(--nav-shadow);
}


/* Logo */
.nav-logo {
    height: var(--nav-logo-height);
    width: auto;
    object-fit: contain;
}


/* Title */
.nav-title {
    font-weight: 900;
    font-size: var(--nav-title-size);
    color: var(--nav-title-color);
    line-height: 1.1;
}


/* Subtitle */
.nav-subtitle {
    font-size: var(--nav-subtitle-size);
    letter-spacing: 0.5px;
    font-weight: 700;
    color: var(--nav-subtitle-color);
}


/* Login Button */
.nav-login-btn {
    font-size: var(--nav-btn-font-size);
    font-weight: var(--nav-btn-font-weight);
    transition: var(--nav-btn-transition);
}

.nav-login-btn:hover {
    transform: translateY(-2px);
}

@media (max-width: 991.98px) {
    
    .custom-navbar {
        /* Reduce border-radius to fit better on narrow mobile screens */
        border-radius: 25px; 
        padding: 5px 10px !important;
    }

    .navbar-collapse {
        /* Semi-transparent white background for the dropdown menu */
        background: rgba(255, 255, 255, 0.95); 
        margin-top: 15px;
        padding: 20px;
        border-radius: 20px;
        box-shadow: var(--nav-shadow);
        
        /* Glass effect for the dropdown menu when opened */
        backdrop-filter: blur(10px);
    }

    .nav-logo {
        /* Shrink logo height slightly for mobile viewports */
        height: 50px !important; 
    }

    /* Hide the subtitle on small screens to prevent layout overflow/clutter */
    .nav-subtitle {
        display: none;
    }
}

/* Custom Login Button within the Nav */
.btn-login-nav {
    border: 1.5px solid #eee;
    background: white;
    transition: all 0.3s ease;
}

.btn-login-nav:hover {
    background: #f8f9fa;
    border-color: var(--primary-green);
    
    /* Slight upward movement for visual feedback (Senior touch) */
    transform: translateY(-2px);
}

/* UI Cleanup: Remove the default Bootstrap focus border from the Toggler button */
.navbar-toggler:focus {
    box-shadow: none !important;
}