/* ============================================
   GLASSMORPHISM NAVBAR STYLES
   Modern navigation with frosted glass effect,
   scroll-based transformations, and slide-in
   mobile drawer menu.
   
   This file overrides the old navbar styles
   from style.css
   ============================================ */

/* ============================================
   CSS CUSTOM PROPERTIES (Variables)
   Centralized design tokens for easy theming
   ============================================ */
:root {
    /* Navbar dimensions - default (expanded) state */
    --navbar-height: 80px;
    --navbar-height-scrolled: 64px;
    --navbar-padding: 1.25rem;
    --navbar-padding-scrolled: 0.6rem;
    
    /* Logo sizes for smooth scaling */
    --logo-height: 48px;
    --logo-height-scrolled: 38px;
    
    /* CTA button sizes for proportional scaling */
    --cta-padding-y: 0.7rem;
    --cta-padding-x: 1.6rem;
    --cta-padding-y-scrolled: 0.5rem;
    --cta-padding-x-scrolled: 1.25rem;
    --cta-font-size: 0.95rem;
    --cta-font-size-scrolled: 0.85rem;
    
    /* Background values
       Using solid white (#FFFFFF) for consistent appearance
       across all states (scrolled and non-scrolled) */
    --glass-bg: #FFFFFF;
    --glass-bg-scrolled: #FFFFFF;
    --glass-blur: 12px;
    --glass-border: rgba(91, 58, 255, 0.08);
    --glass-shadow: 0 2px 16px rgba(91, 58, 255, 0.06);
    
    /* Brand colors */
    --color-primary: #5B3AFF;
    --color-primary-hover: #491CFF;
    --color-text: #121212;
    --color-text-muted: #555;
    
    /* 
       TRANSITION TIMING
       Using a single, consistent duration and easing for all navbar elements
       to ensure they animate together smoothly without jarring breakpoints
    */
    --navbar-transition-duration: 0.35s;
    --navbar-transition-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
    
    /* Mobile drawer */
    --drawer-width: 320px;
    --drawer-bg: rgba(255, 255, 255, 0.98);
    --overlay-bg: rgba(0, 0, 0, 0.5);
}


/* ============================================
   RESET OLD HEADER STYLES
   Override any conflicting styles from style.css
   ============================================ */
header.navbar {
    /* Reset all old header styles */
    /* Always use white background to match page */
    background-color: #FFFFFF;
    box-shadow: none;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
}


/* ============================================
   BODY PADDING FOR FIXED NAVBAR
   Adds space at top of page so content doesn't
   hide behind the fixed navbar
   ============================================ */
body {
    /* Add padding to account for fixed navbar height */
    padding-top: var(--navbar-height);
}

/* Responsive padding adjustments */
@media (max-width: 768px) {
    body {
        /* Slightly less padding on mobile due to smaller navbar */
        padding-top: 72px;
    }
}

@media (max-width: 480px) {
    body {
        padding-top: 64px;
    }
}


/* ============================================
   MAIN NAVBAR STYLES
   Fixed position with smooth scroll transitions
   
   SOLUTION FOR SMOOTH TRANSITIONS:
   - Use a solid white pseudo-element background layer
   - This ensures consistent #FFFFFF background regardless
     of page content behind the navbar
   - Backdrop-filter doesn't animate well, so we snap it
   - Only padding transitions smoothly (size change)
   ============================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    /* Top and bottom padding - extra bottom padding to extend white space below nav items */
    padding: var(--navbar-padding) 0 calc(var(--navbar-padding) + 0.5rem) 0;
    /* Always use white background to match page background */
    background: #FFFFFF;
    border-bottom: 1px solid transparent;
    box-shadow: none;
    /* 
       Only transition properties that animate smoothly:
       - padding (size change)
       - border-color (subtle)
       - box-shadow (subtle)
       
       NOTE: We do NOT transition background or backdrop-filter
       as these cause visual "breaks" in most browsers
    */
    transition: 
        padding var(--navbar-transition-duration) var(--navbar-transition-easing),
        border-color var(--navbar-transition-duration) var(--navbar-transition-easing),
        box-shadow var(--navbar-transition-duration) var(--navbar-transition-easing);
    /* Safari fix for fixed positioning and smooth rendering */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* 
   SOLID WHITE BACKGROUND LAYER
   This pseudo-element provides a guaranteed #FFFFFF white background.
   Always visible to ensure consistent white navbar at all times.
*/
.navbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Pure white background - no transparency issues */
    background: #FFFFFF;
    /* Always visible for consistent white background */
    opacity: 1;
    /* Behind navbar content */
    z-index: -1;
    /* Prevent pointer events on pseudo-element */
    pointer-events: none;
}

/* Scrolled state - add subtle border and shadow for visual separation */
.navbar[data-scrolled="true"] {
    /* 
       EQUAL top and bottom padding in scrolled state so that all items
       (logo, nav links, CTA button) are vertically centered within
       the compact navbar. The extra bottom padding from the default
       state is intentionally removed here because the smaller bar
       makes asymmetric padding very noticeable.
    */
    padding: var(--navbar-padding-scrolled) 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
}


/* ============================================
   NAVBAR CONTAINER
   Three-column grid layout for logo/nav/cta
   ============================================ */
.navbar__container {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}


/* ============================================
   LOGO STYLES
   Uses same transition timing as navbar for
   synchronized shrinking animation
   ============================================ */
.navbar__logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.navbar__logo img {
    height: var(--logo-height);
    width: auto;
    /* Match navbar transition for synchronized animation */
    transition: height var(--navbar-transition-duration) var(--navbar-transition-easing);
    will-change: height;
}

/* Smaller logo when scrolled - proportional to navbar shrink */
.navbar[data-scrolled="true"] .navbar__logo img {
    height: var(--logo-height-scrolled);
}

.navbar__logo:hover {
    opacity: 0.85;
}


/* ============================================
   NAVIGATION LINKS
   Centered with subtle hover effects
   Font size transitions with navbar for cohesion
   ============================================ */
.navbar__nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
}

.navbar__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    border-radius: 8px;
    /* Synchronized transition with navbar */
    transition: 
        padding var(--navbar-transition-duration) var(--navbar-transition-easing),
        font-size var(--navbar-transition-duration) var(--navbar-transition-easing),
        color 0.2s ease,
        background-color 0.2s ease;
}

/* Slightly smaller nav links when scrolled */
.navbar[data-scrolled="true"] .navbar__link {
    padding: 0.4rem 0.85rem;
    font-size: 0.9rem;
}

/* Hover state - subtle background */
.navbar__link:hover {
    color: var(--color-primary);
    background-color: rgba(91, 58, 255, 0.06);
}

/* Active state - current page indicator */
.navbar__link--active {
    color: var(--color-primary);
    font-weight: 600;
}

/* Animated underline for active link */
.navbar__link--active::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background-color: var(--color-primary);
    border-radius: 1px;
    transition: width var(--navbar-transition-duration) var(--navbar-transition-easing);
}

/* Slightly shorter underline when scrolled */
.navbar[data-scrolled="true"] .navbar__link--active::after {
    width: 16px;
}


/* ============================================
   CTA BUTTON
   Primary action button on the right
   Shrinks proportionally with navbar on scroll
   ============================================ */
.navbar__actions {
    display: flex;
    align-items: center;
}

.navbar__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--cta-padding-y) var(--cta-padding-x);
    font-family: 'DM Sans', sans-serif;
    font-size: var(--cta-font-size);
    font-weight: 600;
    color: #ffffff;
    background-color: var(--color-primary);
    border: none;
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(91, 58, 255, 0.25);
    white-space: nowrap;
    /* 
       Match navbar transition timing for synchronized shrinking
       Padding and font-size animate together with logo and navbar
    */
    transition: 
        padding var(--navbar-transition-duration) var(--navbar-transition-easing),
        font-size var(--navbar-transition-duration) var(--navbar-transition-easing),
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
    will-change: padding, font-size;
}

/* Smaller CTA button when scrolled - proportional to navbar shrink */
.navbar[data-scrolled="true"] .navbar__cta {
    padding: var(--cta-padding-y-scrolled) var(--cta-padding-x-scrolled);
    font-size: var(--cta-font-size-scrolled);
}

.navbar__cta:hover {
    background-color: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(91, 58, 255, 0.35);
    color: #ffffff;
}

.navbar__cta:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(91, 58, 255, 0.25);
}

/* Full-width variant for mobile drawer - doesn't shrink */
.navbar__cta--full {
    width: 100%;
    padding: 1rem 1.5rem !important;
    font-size: 1rem !important;
}


/* ============================================
   MOBILE TOGGLE BUTTON (Hamburger)
   Hidden on desktop, visible on mobile
   ============================================ */
.navbar__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.navbar__toggle:hover {
    background-color: rgba(91, 58, 255, 0.06);
}

.navbar__toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Hamburger lines */
.navbar__toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--color-text);
    border-radius: 2px;
    transition: var(--transition-smooth);
    margin: 3px 0;
}

/* Animated X when active */
.navbar__toggle--active span:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
}

.navbar__toggle--active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.navbar__toggle--active span:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
}


/* ============================================
   MOBILE DRAWER OVERLAY
   Semi-transparent backdrop when drawer is open
   ============================================ */
.navbar__overlay {
    position: fixed;
    inset: 0;
    background-color: var(--overlay-bg);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-smooth);
    z-index: 999;
    /* Prevent scroll when overlay is visible */
    pointer-events: none;
}

.navbar__overlay--visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* ============================================
   MOBILE SLIDE-IN DRAWER
   Slides in from the right side
   ============================================ */
.navbar__drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 80%;
    max-width: var(--drawer-width);
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile browsers */
    background: var(--drawer-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.navbar__drawer--open {
    transform: translateX(0);
}

/* Drawer header with logo and close button */
.navbar__drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.navbar__drawer-logo img {
    height: 40px;
    width: auto;
}

/* Close button */
.navbar__drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--color-text);
    cursor: pointer;
    transition: var(--transition-fast);
}

.navbar__drawer-close:hover {
    background-color: rgba(91, 58, 255, 0.06);
    color: var(--color-primary);
}

.navbar__drawer-close:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Drawer navigation links */
.navbar__drawer-nav {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    gap: 0.5rem;
    flex-grow: 1;
}

.navbar__drawer-link {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    border-radius: 12px;
    transition: var(--transition-fast);
}

.navbar__drawer-link:hover {
    background-color: rgba(91, 58, 255, 0.06);
    color: var(--color-primary);
}

.navbar__drawer-link--active {
    color: var(--color-primary);
    font-weight: 600;
    background-color: rgba(91, 58, 255, 0.08);
}

/* Drawer CTA button container */
.navbar__drawer-cta {
    padding: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    margin-top: auto;
}


/* ============================================
   BODY SCROLL LOCK
   Prevents background scrolling when drawer is open
   ============================================ */
body.navbar-drawer-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    /* Store scroll position to restore later */
}

/* ============================================
   HIDE NAVBAR LOGO WHEN DRAWER IS OPEN
   Prevents the navbar logo from showing through
   or alongside the drawer's logo, avoiding the
   visual duplication issue on mobile.
   ============================================ */
body.navbar-drawer-open .navbar__logo {
    /* Make the navbar logo invisible when drawer is open */
    opacity: 0;
    visibility: hidden;
    /* Quick transition for smooth hide/show */
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* Ensure navbar logo is visible when drawer is closed */
.navbar__logo {
    /* Default visible state with transition for smooth effect */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}


/* ============================================
   RESPONSIVE BREAKPOINTS
   Uses CSS variable overrides to maintain
   smooth transitions at all screen sizes
   ============================================ */

/* Tablet - slightly compact nav */
@media (max-width: 1024px) {
    :root {
        /* Slightly smaller sizes for tablet */
        --logo-height: 44px;
        --logo-height-scrolled: 36px;
        --cta-padding-y: 0.6rem;
        --cta-padding-x: 1.4rem;
        --cta-padding-y-scrolled: 0.45rem;
        --cta-padding-x-scrolled: 1.1rem;
    }
    
    .navbar__container {
        padding: 0 1.5rem;
        gap: 1.5rem;
    }
    
    .navbar__link {
        padding: 0.45rem 0.8rem;
        font-size: 0.9rem;
    }
    
    .navbar[data-scrolled="true"] .navbar__link {
        padding: 0.35rem 0.7rem;
        font-size: 0.85rem;
    }
}

/* Mobile - show hamburger, hide desktop nav */
@media (max-width: 768px) {
    :root {
        /* Mobile-specific sizes */
        --navbar-padding: 1rem;
        --navbar-padding-scrolled: 0.65rem;
        --logo-height: 40px;
        --logo-height-scrolled: 34px;
    }
    
    .navbar__container {
        grid-template-columns: 1fr auto;
        padding: 0 1rem;
    }
    
    /* Hide desktop navigation on mobile */
    .navbar__nav {
        display: none;
    }
    
    /* Hide desktop CTA on mobile */
    .navbar__actions {
        display: none;
    }
    
    /* Show hamburger toggle on mobile */
    .navbar__toggle {
        display: flex;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    :root {
        --logo-height: 36px;
        --logo-height-scrolled: 30px;
    }
    
    .navbar__container {
        padding: 0 0.75rem;
    }
    
    .navbar__drawer {
        width: 85%;
    }
    
    .navbar__drawer-link {
        font-size: 1rem;
        padding: 0.875rem 1rem;
    }
}


/* ============================================
   ACCESSIBILITY - REDUCED MOTION
   Respects user preference for less motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    :root {
        --navbar-transition-duration: 0s;
    }
    
    .navbar,
    .navbar__logo img,
    .navbar__link,
    .navbar__cta,
    .navbar__toggle,
    .navbar__toggle span,
    .navbar__overlay,
    .navbar__drawer,
    .navbar__drawer-link,
    .navbar__drawer-close {
        transition: none !important;
    }
}


/* ============================================
   FOCUS STYLES FOR KEYBOARD NAVIGATION
   ============================================ */
.navbar__link:focus-visible,
.navbar__cta:focus-visible,
.navbar__logo:focus-visible,
.navbar__drawer-link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}


/* ============================================
   PRINT STYLES
   Hide navbar when printing
   ============================================ */
@media print {
    .navbar,
    .navbar__overlay,
    .navbar__drawer {
        display: none !important;
    }
}