/* filepath: static/css/navigation.css */

/*
FineRide Navigation Stylesheet

This stylesheet contains comprehensive navigation and header styling for the FineRide PWA.
It provides the main site navigation, brand identity, user authentication UI,
and interactive navigation components with accessibility and responsive design.

Key features:
- Sticky navigation bar with brand logo and text
- Responsive navigation links with hover and active states
- User authentication dropdown menu with profile options
- Enhanced logout button with loading states and accessibility
- Mobile-responsive design with touch-friendly interactions

Architecture notes:
- Uses CSS custom properties for consistent theming and colors
- Implements smooth transitions and hover effects for better UX
- Includes comprehensive accessibility features (focus states, ARIA compliance)
- Progressive enhancement with fallbacks for older browsers
- Loading states for async operations (logout process)

Dependencies:
- style.css (base styles, CSS custom properties, typography, color variables)
- components.css (reusable component styles and utilities)

Browser Support:
- Modern browsers (Chrome 70+, Firefox 65+, Safari 12+, Edge 79+)
- Graceful degradation for older browsers with reduced animations

Last Updated: 2025-12-25
Author: HowToolHelp/Intelligent
*/
.medium-nav {
    background: var(--navbar-bg);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    max-width: 1280px;
    margin: 0 auto;
    height: 70px;
}

.nav-brand {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--medium-blue);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color 0.3s ease;
    display: flex !important;           /* Force flex layout for logo alignment */
    align-items: center !important;     /* Vertically center logo and text */
    gap: 0.5rem !important;             /* Space between logo elements */
    text-decoration: none !important;   /* Remove link underlines */
    transition: all 0.3s ease !important; /* Smooth hover transitions */
}

.nav-brand:hover {
    color: var(--medium-dark-blue); /* Assuming you have or will add --medium-dark-blue */
}

.nav-brand i {
    font-size: 1.7rem;
    background: linear-gradient(135deg, var(--medium-blue), var(--medium-light-blue));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Logo image styling */
.nav-brand__logo {
    width: 58px !important;             /* Fixed width for consistency */
    height: 58px !important;            /* Fixed height for consistency */
    object-fit: contain !important;     /* Maintain aspect ratio */
    border-radius: 4px !important;      /* Subtle rounded corners */
    transition: transform 0.3s ease !important; /* Smooth hover animation */
}

/* Icon styling (can be hidden if logo is sufficient) */
.nav-brand__icon {
    font-size: 1.5rem !important;       /* Appropriate icon size */
    color: var(--primary-blue, #0066cc) !important; /* Brand color */
    transition: transform 0.3s ease !important; /* Smooth hover animation */
}

/* Brand text styling */
.nav-brand__text {
    font-size: 1.5rem !important;      /* Readable text size */
    font-weight: 700 !important;        /* Semi-bold for emphasis */
    color: var(--primary-blue, #0066cc) !important; /* Text color change on hover */
    white-space: nowrap !important;     /* Prevent text wrapping */
}

/* Hover effects for brand section */
.nav-brand:hover .nav-brand__logo {
    transform: scale(1.1) !important;   /* Slight logo enlargement on hover */
}

.nav-brand:hover .nav-brand__icon {
    transform: rotate(5deg) !important; /* Slight icon rotation on hover */
    color: var(--primary-teal, #3abbae) !important; /* Color change on hover */
}

.nav-brand:hover .nav-brand__text {
    color: var(--text-dark, #333) !important; /* Dark text for contrast */
}

.nav-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Keep .nav-links as a div, not ul, to match original HTML structure */
.nav-links {
    display: flex; /* Ensures links are in a row */
    gap: 5px; /* Spacing between link items */
}

.nav-links a {
    color: var(--medium-dark-gray);
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
}

.nav-links a i {
    font-size: 1.1rem;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.nav-links a:hover {
    background: rgba(0, 102, 204, 0.08); /* var(--medium-blue-08) if defined */
    color: var(--medium-blue);
    transform: translateY(-2px);
}

.nav-links a:hover i {
    opacity: 1;
}

.nav-links a.active {
    background: rgba(0, 102, 204, 0.1); /* var(--medium-blue-10) if defined */
    color: var(--medium-blue);
    font-weight: 600;
}

.nav-links a.active i {
    opacity: 1;
}

/* Styles for .auth-nav and its children from main.css.backup */
.auth-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-profile-menu {
    position: relative;
}

.user-menu-toggle {
    background: none;
    border: none;
    padding: 8px 15px; /* Adjust as needed */
    border-radius: 6px;
    font-weight: 500;
    color: var(--medium-dark-gray); /* Example color */
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-menu-toggle:hover {
    background: rgba(0, 0, 0, 0.05); /* Subtle hover */
    color: var(--medium-black);
}

.user-menu-toggle i.fa-user-circle {
    font-size: 1.4rem; /* Adjust as needed */
}

.user-menu-toggle i.fa-chevron-down {
    font-size: 0.8rem; /* Adjust as needed */
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--card-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    min-width: 200px;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.user-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    text-decoration: none;
    color: var(--medium-dark-gray);
    font-size: 0.95rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.user-dropdown button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    text-decoration: none;
    color: var(--medium-dark-gray);
    font-size: 0.95rem;
    background: none;
    border: none;
    /* transition: background-color 0.2s ease, color 0.2s ease; */
}

.user-dropdown a:hover {
    background-color: rgba(0, 102, 204, 0.08); /* var(--medium-blue-08) */
    color: var(--medium-blue);
}
.user-dropdown button:hover {
    background-color: rgba(0, 102, 204, 0.08); /* var(--medium-blue-08) */
    color: var(--medium-blue);
}

.dropdown-divider {
    height: 1px;
    margin: 8px 0;
    overflow: hidden;
    background-color: #e9ecef;
}


.auth-btn {
    padding: 8px 18px;
    border-radius: 20px; /* Pill shape */
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
}

.login-btn {
    background-color: transparent;
    color: var(--medium-blue);
    border-color: var(--medium-blue);
}

.login-btn:hover {
    background-color: var(--medium-blue);
    color: white;
}

.register-btn {
    background-color: var(--medium-blue);
    color: white;
}

.register-btn:hover {
    background-color: var(--medium-dark-blue); /* Assuming --medium-dark-blue */
    border-color: var(--medium-dark-blue);
}

/* =============================================================================
   LOGOUT BUTTON ENHANCED STYLES
   ============================================================================= */

/*------------------------------------*\
  #LOGOUT-BUTTON-LOADING-STATES
\*------------------------------------*/

/* Enhanced logout button with comprehensive loading state support
   
   This component provides visual feedback during the logout process with:
   - Loading spinner animation
   - Disabled state styling
   - Accessibility compliance
   - Responsive design support
   
   Structure:
   .user-dropdown__item (button)
   ├── .logout-icon (FontAwesome sign-out icon)
   ├── .logout-text (button text content)
   └── .logout-spinner (loading indicator)
   
   States:
   - Default: Ready for interaction
   - Loading: Disabled with spinner animation  
   - Success: Brief success state before redirect
   - Error: Reset to default with error feedback
*/

/* Base logout button styling */
.user-dropdown__item {
    /* Layout and positioning */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--space-sm, 0.5rem) !important;
    
    /* Sizing and spacing */
    width: 100% !important;
    min-height: 44px !important;              /* Accessible touch target */
    padding: var(--space-sm, 0.5rem) var(--space-md, 1rem) !important;
    
    /* Visual styling */
    border: none !important;
    background: transparent !important;
    border-radius: var(--border-radius-sm, 4px) !important;
    
    /* Typography */
    font-family: inherit !important;
    font-size: var(--font-size-sm, 0.875rem) !important;
    font-weight: 500 !important;
    text-align: left !important;
    color: var(--text-medium, #6b7280) !important;
    
    /* Interactive behavior */
    cursor: pointer !important;
    user-select: none !important;
    
    /* Smooth transitions for all state changes */
    transition: 
        background-color 0.2s ease,
        color 0.2s ease,
        opacity 0.2s ease,
        transform 0.1s ease !important;
    
    /* Performance optimization */
    will-change: background-color, opacity !important;
}

/* Hover state - Enhanced feedback */
.user-dropdown__item:hover:not(:disabled) {
    background-color: var(--hover-bg, rgba(59, 130, 246, 0.08)) !important;
    color: var(--primary-blue, #3b82f6) !important;
    transform: translateX(2px) !important;     /* Subtle movement feedback */
}

/* Focus state - Accessibility compliance */
.user-dropdown__item:focus {
    outline: 2px solid var(--primary-blue, #3b82f6) !important;
    outline-offset: 2px !important;
    background-color: var(--focus-bg, rgba(59, 130, 246, 0.1)) !important;
}

/* Disabled state - Loading and error states */
.user-dropdown__item:disabled {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    transform: none !important;               /* Disable hover effects */
    background-color: var(--disabled-bg, rgba(0, 0, 0, 0.02)) !important;
}

/* Icon styling - Sign out icon */
.logout-icon {
    /* Sizing and alignment */
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;               /* Prevent icon compression */
    
    /* Visual styling */
    color: inherit !important;
    opacity: 0.8 !important;
    
    /* Smooth transitions */
    transition: opacity 0.2s ease !important;
}

/* Text styling - Button label */
.logout-text {
    /* Layout */
    flex: 1 !important;                      /* Take remaining space */
    
    /* Typography */
    color: inherit !important;
    font-weight: inherit !important;
    
    /* Prevent text wrapping */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Loading spinner styling */
.logout-spinner {
    /* Sizing to match icon */
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    
    /* Visual styling */
    color: var(--primary-blue, #3b82f6) !important;
    opacity: 1 !important;
    
    /* Rotation animation */
    animation: logout-spin 1s linear infinite !important;
    
    /* Hidden by default */
    display: none !important;
}

/* Spinner rotation keyframes */
@keyframes logout-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .user-dropdown__item {
        border: 1px solid var(--text-light, #9ca3af) !important;
    }
    
    .user-dropdown__item:hover:not(:disabled) {
        border-color: var(--primary-blue, #3b82f6) !important;
    }
    
    .user-dropdown__item:disabled {
        opacity: 0.5 !important;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .logout-spinner {
        animation: none !important;
    }
    
    .user-dropdown__item,
    .logout-icon,
    .logout-text {
        transition: none !important;
    }
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .user-dropdown__item {
        min-height: 48px !important;           /* Larger touch targets */
        padding: var(--space-md, 1rem) !important;
        font-size: var(--font-size-base, 1rem) !important;
    }
    
    .logout-icon,
    .logout-spinner {
        width: 20px !important;
        height: 20px !important;
    }
}

/* Mobile specific adjustments for user dropdown */
@media (max-width: 576px) {
  .user-dropdown {
    min-width: 90vw !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, 10px);
    font-size: 1.05rem;
    padding: 8px 0;
  }
  .user-dropdown a,
  .user-dropdown button {
    padding: 14px 24px;
    font-size: 1.08rem;
    word-break: break-all;
  }
  .user-menu-toggle {
    min-width: 48px;
    min-height: 48px;
    padding: 6px 10px;
    font-size: 1.1rem;
  }
}

/* Dark mode support (if implemented) */
@media (prefers-color-scheme: dark) {
    .user-dropdown__item {
        color: var(--text-light-dark, #d1d5db) !important;
    }
    
    .user-dropdown__item:hover:not(:disabled) {
        background-color: var(--hover-bg-dark, rgba(59, 130, 246, 0.15)) !important;
        color: var(--primary-blue-light, #60a5fa) !important;
    }
}

/* Show/hide based on authentication state */
#nav-user {
    display: none;
}

#nav-user[data-authenticated="true"] {
    display: block;
}

#nav-login {
    display: flex;
}

#nav-login[data-authenticated="true"] {
    display: none;
}