/* NAVBAR CONTAINER */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 25px;
    background: #ffffff;
    border-bottom: 2px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
    gap: 20px;
}

/* LOGO - Left */
.navbar .logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.navbar .logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.navbar .logo-img {
    height: 50px;
    width: auto;
    max-width: 250px;
    object-fit: contain;
}

/* NAV LINKS - Center */
.navbar ul {
    list-style: none;
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
    justify-content: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    flex: 1;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: flex-end;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.navbar ul li a {
    color: #333333;
    text-decoration: none;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    transition: 0.2s;
    padding: 5px 0;
    border-bottom: 2px solid transparent; /* Reserve space for hover border */
}

.navbar ul li a:hover {
    color: #0066cc;
    border-bottom: 2px solid #0066cc;
}

/* Mobile: Hide entire navbar */
@media (max-width: 768px) {
    .navbar {
        display: none !important;
    }
}

/* Desktop navigation - ensure it works correctly */
@media (min-width: 769px) {
    .navbar ul {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 30px !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        overflow: visible !important;
        z-index: 1 !important;
    }
    
    .navbar ul li {
        display: list-item !important;
        width: auto !important;
        padding: 0 !important;
        border-bottom: none !important;
        text-align: left !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
    
    .navbar ul li a {
        font-size: 0.95rem !important;
        font-weight: 500 !important;
        padding: 5px 0 !important;
        display: inline-block !important;
        width: auto !important;
        color: #333333 !important;
        text-align: left !important;
        border-bottom: 2px solid transparent !important; /* Reserve space for hover border */
    }
    
    .navbar ul li a:hover {
        color: #0066cc !important;
        border-bottom: 2px solid #0066cc !important;
        background-color: transparent !important;
    }
    
    /* Hide mobile-specific items on desktop */
    .navbar ul li.mobile-login,
    .navbar ul li.mobile-profile,
    .navbar ul li.logout-mobile {
        display: none !important;
    }
    
    /* Ensure desktop menu doesn't have pseudo-elements */
    .navbar ul::before,
    .navbar ul::after {
        display: none !important;
        content: none !important;
    }
    
    /* Ensure menu is always visible on desktop (not hidden) */
    .navbar ul {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .navbar ul.active {
        display: flex !important;
    }
    
    /* Ensure navbar itself is visible */
    .navbar {
        display: flex !important;
        visibility: visible !important;
    }
}

/* MOBILE MENU BUTTON */
.menu-btn {
    display: none;
    cursor: pointer;
    color: #0066cc;
    width: 50px;
    height: 50px;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 7px;
    padding: 5px;
    box-sizing: border-box;
    font-size: 0;
    line-height: 1;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

/* Show text only if no hamburger lines (fallback for old structure) */
.menu-btn:not(:has(.hamburger-line)) {
    font-size: 2.5rem;
}

/* Modern browsers - hide text when hamburger lines exist */
@supports selector(:has(*)) {
    .menu-btn:has(.hamburger-line) {
        font-size: 0;
    }
}

.hamburger-line {
    display: block;
    width: 100%;
    height: 5px;
    background-color: #0066cc;
    border-radius: 3px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
    will-change: transform, opacity;
}

/* Hamburger to X animation - must be outside media query to work */
.menu-btn.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px) !important;
    opacity: 1 !important;
    display: block !important;
}

.menu-btn.active .hamburger-line:nth-child(2) {
    opacity: 0 !important;
    transform: translateX(-20px) !important;
    width: 0 !important;
    display: block !important; /* Keep it in the flow for animation */
}

.menu-btn.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(8px, -8px) !important;
    opacity: 1 !important;
    display: block !important;
}

/* Ensure lines are visible when not active (X to hamburger) */
.menu-btn:not(.active) .hamburger-line {
    transform: none !important;
    opacity: 1 !important;
    width: 100% !important;
    display: block !important;
}

/* MOBILE MENU BEHAVIOR */
@media (max-width: 768px) {
    .navbar {
        position: sticky;
        top: 0;
        z-index: 1000;
    }
    
    /* Hamburger button in navbar (when menu is closed) */
    .menu-btn {
        position: relative;
        top: auto;
        right: auto;
        pointer-events: auto !important;
        touch-action: manipulation; /* Better touch handling */
        -webkit-tap-highlight-color: transparent; /* Remove tap highlight */
    }
    
    /* Hamburger button fixed at top right (when menu is open) */
    .navbar ul.active ~ .nav-right .menu-btn,
    .menu-btn.active {
        position: fixed !important;
        top: 20px !important;
        right: 20px !important;
        z-index: 1005 !important;
        pointer-events: auto !important;
        touch-action: manipulation;
    }

    /* Full screen mobile menu */
    .navbar ul {
        position: fixed;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        background: #ffffff;
        flex-direction: column;
        gap: 0;
        padding: 0;
        display: none;
        z-index: 1001;
        margin: 0 !important;
        border: none !important;
        box-shadow: none;
        box-sizing: border-box;
        justify-content: flex-start;
        align-items: stretch;
        padding-top: 90px; /* Space for fixed header with logo */
        padding-bottom: 20px;
        overflow-y: auto;
        transform: none !important;
    }
    
    /* Fixed header with centered logo - acts as Home button */
    .navbar ul::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 90px;
        background: #ffffff;
        z-index: 1003;
        display: none;
        pointer-events: none;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    /* Logo centered in the header */
    .navbar ul::after {
        content: '';
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 200px;
        height: 50px;
        background-image: url('CoastToCoastLogo_Blue.png');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        z-index: 1004;
        display: none;
        pointer-events: auto; /* Make logo clickable */
        cursor: pointer;
    }
    
    .navbar ul.active::before,
    .navbar ul.active::after {
        display: block;
    }
    
    /* Make the logo clickable - link to home */
    .navbar ul.active::after {
        pointer-events: auto;
    }
    
    /* No separate X button - use the animated hamburger icon instead */
    
    /* Hide "Home" link in mobile menu - logo acts as home button */
    .navbar ul li:first-child {
        display: none !important;
    }
    
    /* Regular menu items */
    .navbar ul li:not(.mobile-profile):not(.logout-mobile) {
        flex-shrink: 0;
    }

    .navbar ul.active {
        display: flex;
    }

    /* Hamburger button display - positioning handled by rules above */
    .menu-btn {
        display: flex !important;
        pointer-events: auto !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
    }
    
    /* Ensure hamburger lines are always visible and can animate */
    .menu-btn .hamburger-line {
        display: block !important;
        opacity: 1 !important;
    }
    
    /* Ensure nav-right is positioned correctly for dropdown */
    .nav-right {
        position: relative;
    }

    /* Hide nav-auth on mobile - login/profile moved to dropdown */
    .nav-auth {
        display: none !important;
    }
    
    /* Also hide any logout buttons in nav-auth on mobile */
    .nav-auth button,
    .nav-auth a {
        display: none !important;
    }

    /* Show mobile menu items only when menu is active and on mobile */
    /* But respect JavaScript visibility settings - use class-based approach */
    .navbar ul.active .mobile-profile:not(.hidden) {
        display: block !important;
    }
    
    /* Only show mobile-login if it's not hidden */
    .navbar ul.active .mobile-login:not(.hidden) {
        display: block !important;
    }
    
    /* ALWAYS hide logout button - users can log out from profile page */
    .navbar ul.active .logout-mobile,
    .logout-mobile {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Hide items with hidden class */
    .mobile-login.hidden,
    .mobile-profile.hidden,
    .logout-mobile.hidden {
        display: none !important;
    }

    /* Large menu text for full screen menu - only on mobile */
    .navbar ul li {
        width: 100%;
        max-width: 100%;
        text-align: center;
        padding: 20px 0;
        border-bottom: 1px solid #e0e0e0;
        box-sizing: border-box;
        margin: 0;
    }

    .navbar ul li:last-child {
        border-bottom: none;
    }

    .navbar ul li a {
        font-size: 1.8rem;
        font-weight: 600;
        color: #0066cc;
        text-decoration: none;
        display: block;
        padding: 15px 20px;
        transition: background-color 0.2s ease;
        width: 100%;
        box-sizing: border-box;
    }

    .navbar ul li a:hover {
        background-color: #f5f5f5;
        border-bottom: none;
    }
    
    /* Hide mobile-specific items on desktop */
    .navbar ul li.mobile-login,
    .navbar ul li.mobile-profile,
    .navbar ul li.logout-mobile {
        display: none !important;
    }

    /* Style login links in mobile menu */
    .navbar ul li.mobile-login a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        padding: 20px;
        color: #0066cc;
        text-decoration: none;
        font-weight: 600;
        font-size: 1.8rem;
    }

    .navbar ul li.mobile-login a:hover {
        background-color: #f5f5f5;
        border-bottom: none;
    }

    /* Profile icon only - no text, larger size */
    .navbar ul li.mobile-profile a {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        text-decoration: none;
        position: relative; /* Needed for badge positioning */
    }
    
    /* Hide "Profile" text in mobile menu - show icon only */
    .navbar ul li.mobile-profile a span {
        display: none !important;
    }

    .navbar ul li.mobile-profile a:hover {
        background-color: transparent;
        border-bottom: none;
    }

    .navbar ul li.mobile-profile a svg {
        width: 200px;
        height: 200px;
        fill: #0066cc;
        position: relative; /* Needed for badge positioning */
    }

    .navbar ul li.mobile-profile a img.profile-picture-img {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        border: 5px solid #0066cc;
        object-fit: cover;
        display: block;
        position: relative; /* Needed for badge positioning */
    }
    
    /* Notification badge on mobile profile icon - scaled proportionally */
    .navbar ul li.mobile-profile a .profile-icon-badge {
        position: absolute;
        bottom: 5px; /* Adjusted for larger icon */
        right: 5px; /* Adjusted for larger icon */
        width: 50px !important; /* Scaled from 20px to 50px (2.5x for 200px icon) */
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        max-width: 50px !important;
        max-height: 50px !important;
        border-radius: 50%;
        background: #ffffff;
        color: #0066cc;
        border: 3px solid #0066cc !important; /* Scaled border */
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px !important; /* Scaled font size */
        font-weight: 700;
        line-height: 1;
        box-sizing: border-box;
        z-index: 10;
    }

    /* Profile section - positioned right below Leaderboard, no extra spacing */
    .navbar ul li.mobile-profile {
        margin-top: 0; /* No margin - sits directly below Leaderboard */
        padding-top: 10px; /* Minimal padding */
        padding-bottom: 10px;
        border-top: 1px solid #e0e0e0; /* Add border to separate from menu items */
        border-bottom: none;
        text-align: center;
    }

    /* Hide logout button in mobile menu - users can log out from profile page */
    .navbar ul li.logout-mobile {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Also hide any logout buttons that might appear outside the menu */
    .logout-mobile button,
    #navLogoutMobile {
        display: none !important;
        visibility: hidden !important;
    }
}

/* AUTH AREA IN NAVBAR */
.nav-auth {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    min-width: 200px;
    height: 32px;
    opacity: 0;
    transition: opacity 0.1s;
}

/* Show auth area once ready */
.nav-auth.auth-initialized {
    opacity: 1;
}

/* Fallback: show auth area after 2 seconds if not initialized (prevents permanent hiding) */
.nav-auth:not(.auth-initialized) {
    animation: showAuthFallback 0.1s 2s forwards;
}

@keyframes showAuthFallback {
    to {
        opacity: 1;
    }
}

/* Hide all auth elements by default - prevent any flash */
.nav-auth a:not(.profile-icon-btn),
.nav-auth button:not(.nav-logout-link),
.nav-auth .auth-user {
    display: none !important;
}

/* Show login link when ready and logged out */
.nav-auth a.auth-ready.logged-out:not(.profile-icon-btn) {
    display: inline-block !important;
}

/* Show logout button when logged in - but hide on mobile */
.nav-auth button.auth-ready.logged-in.nav-logout-link {
    display: inline-block !important;
}

@media (max-width: 768px) {
    .nav-auth button.auth-ready.logged-in.nav-logout-link {
        display: none !important;
    }
}

/* Log out text link in nav */
.nav-auth button.nav-logout-link {
    background: transparent !important;
    border: none !important;
    color: #0066cc;
    font-size: 0.85rem;
    padding: 4px 8px;
    display: none !important;
}
.nav-auth button.nav-logout-link.auth-ready.logged-in {
    display: inline-block !important;
}

/* Override for mobile - hide logout button */
@media (max-width: 768px) {
    .nav-auth button.nav-logout-link.auth-ready.logged-in {
        display: none !important;
        visibility: hidden !important;
    }
}
.nav-auth button.nav-logout-link:hover {
    background: rgba(0, 102, 204, 0.08) !important;
    text-decoration: underline;
}

/* Profile Icon Button */
.nav-auth .profile-icon-btn {
    background: none !important;
    border: none !important;
    cursor: pointer;
    padding: 0;
    display: none !important;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    max-width: 48px;
    max-height: 48px;
    position: relative;
    transform-origin: center center;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Only show profile icon when user is logged in - higher specificity */
.nav-auth .profile-icon-btn.auth-ready.logged-in {
    display: flex !important;
}

/* Explicitly hide when logged out */
.nav-auth .profile-icon-btn.logged-out {
    display: none !important;
}

.profile-icon-btn:hover {
    opacity: 0.8;
    transform: scale(1.1);
    transform-origin: center center;
    border-radius: 50%;
    background: rgba(0, 102, 204, 0.1) !important;
}

.profile-icon-btn svg {
    width: 32px;
    height: 32px;
    fill: #0066cc;
    position: relative;
    z-index: 1;
}

.profile-icon-btn img.profile-picture-img {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    max-width: 48px;
    max-height: 48px;
    border-radius: 50%;
    border: 2px solid #0066cc;
    object-fit: cover;
    background: #fff;
    position: relative;
    z-index: 1;
    display: block;
    flex-shrink: 0;
}

/* Notification Badge */
.profile-icon-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    max-width: 20px;
    max-height: 20px;
    border-radius: 50%;
    border: 2px solid #0066cc !important;
    background: #ffffff;
    color: #0066cc;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-sizing: border-box;
    line-height: 1;
    padding: 0;
}

/* Never show user email */
.nav-auth .auth-user {
    display: none !important;
}

.nav-auth a {
    padding: 6px 12px;
    font-size: 0.85rem;
    border-radius: 4px;
    background: #0066cc;
    color: #fff;
    border: 1px solid #0066cc;
    cursor: pointer;
    font-family: 'Segoe UI', Arial, sans-serif;
    transition: 0.2s;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
}

.nav-auth a:hover {
    background: #0052a3;
    border-color: #0052a3;
}

.nav-auth button {
    padding: 6px 12px;
    font-size: 0.85rem;
    border-radius: 4px;
    background: #0066cc;
    color: #fff;
    border: 1px solid #0066cc;
    cursor: pointer;
    font-family: 'Segoe UI', Arial, sans-serif;
    transition: 0.2s;
    font-weight: 500;
}

.nav-auth button:hover {
    background: #0052a3;
    border-color: #0052a3;
}

.nav-auth .auth-user {
    color: #0066cc;
    font-size: 0.85rem;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-weight: 500;
}

/* Desktop nav-auth styles - removed mobile styles as nav-auth is hidden on mobile */

/* MOBILE MENU ITEMS - Hidden on desktop by default */
.mobile-login,
.mobile-profile,
.logout-mobile {
    display: none !important;
}

/* On desktop, always hide mobile menu items */
@media (min-width: 769px) {
    .mobile-login,
    .mobile-profile,
    .logout-mobile {
        display: none !important;
    }
}

/* Hide desktop logout on mobile - it's now in the dropdown */
@media (max-width: 768px) {
    #navLogout {
        display: none !important;
    }
}

/* MOBILE FOOTER - Only visible on mobile devices */
.mobile-footer {
    display: none;
}

@media (max-width: 768px) {
    .mobile-footer {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        background: #0066cc;
        padding: 12px 0;
        justify-content: space-around;
        align-items: center;
        z-index: 999;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
    }
    
    .mobile-footer a {
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        flex: 1;
        padding: 8px;
    }
    
    .mobile-footer-icon {
        width: 28px;
        height: 28px;
        object-fit: contain;
        display: block;
    }
    
    .mobile-footer-profile {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 2px solid #ffffff;
        object-fit: cover;
        display: block;
    }
    
    /* Add padding to body to prevent content from being hidden behind footer */
    body {
        padding-bottom: 60px !important;
    }
    
    /* Ensure page-wrap has bottom padding if it exists */
    .page-wrap {
        padding-bottom: 20px !important;
    }
}