/* =============================================================================
   nav.css — Mobile Navigation System
   
   Components:
   1. Hamburger Toggle Button
   2. Mobile Nav Backdrop
   3. Mobile Nav Drawer
   4. Nav Links
   5. Responsive Breakpoints
   
   Follows design token system from tokens.css
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Component Tokens — Scoped custom properties for mobile nav
   ----------------------------------------------------------------------------- */
:root {
    /* Hamburger */
    --nav-hamburger-size: 48px;
    --nav-hamburger-bar-height: 2px;
    --nav-hamburger-bar-gap: 5px;
    --nav-hamburger-bar-width: 22px;
    
    /* Drawer */
    --nav-drawer-width: min(300px, 80vw);
    --nav-drawer-z: 9000;
    --nav-backdrop-z: 8999;
    --nav-drawer-border: 2px solid var(--charcoal);
    
    /* Links */
    --nav-link-height: 52px;
    --nav-link-padding-y: var(--space-5);
    --nav-link-font-size: var(--text-2xl);
    --nav-link-indicator-width: 16px;
    --nav-link-indicator-height: 2px;
    
    /* Animation */
    --nav-transition-duration: 320ms;
    --nav-transition-easing: cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* -----------------------------------------------------------------------------
   1. HAMBURGER TOGGLE BUTTON
   ----------------------------------------------------------------------------- */
.header-hamburger {
    /* Hidden by default, shown at mobile breakpoint */
    display: none;
    align-items: center;
    justify-content: center;
    
    /* Touch-friendly tap target (44x44 minimum) */
    width: var(--nav-hamburger-size);
    height: var(--nav-hamburger-size);
    flex-shrink: 0;
    
    /* Reset button styles */
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.header-hamburger:focus-visible {
    outline: 2px solid var(--persimmon);
    outline-offset: 2px;
    border-radius: var(--space-1);
}

/* Hamburger icon — 3 bars */
.header-hamburger-icon {
    display: flex;
    flex-direction: column;
    gap: var(--nav-hamburger-bar-gap);
    width: var(--nav-hamburger-bar-width);
}

.header-hamburger-icon span {
    display: block;
    height: var(--nav-hamburger-bar-height);
    width: 100%;
    background: var(--charcoal);
    border-radius: 1px;
    transition: transform var(--nav-transition-duration) var(--nav-transition-easing),
                opacity 180ms ease;
}

/* Hamburger → X transformation */
.header-hamburger.is-open .header-hamburger-icon span:nth-child(1) {
    /* Move down to center, rotate 45° */
    transform: translateY(calc(var(--nav-hamburger-bar-gap) + var(--nav-hamburger-bar-height))) rotate(45deg);
}

.header-hamburger.is-open .header-hamburger-icon span:nth-child(2) {
    opacity: 0;
}

.header-hamburger.is-open .header-hamburger-icon span:nth-child(3) {
    /* Move up to center, rotate -45° */
    transform: translateY(calc(-1 * (var(--nav-hamburger-bar-gap) + var(--nav-hamburger-bar-height)))) rotate(-45deg);
}


/* -----------------------------------------------------------------------------
   2. MOBILE NAV BACKDROP
   ----------------------------------------------------------------------------- */
.mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--nav-backdrop-z);
    
    /* Dim overlay */
    background: rgba(47, 53, 59, 0.5);
    
    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    
    transition: opacity var(--nav-transition-duration) ease,
                visibility var(--nav-transition-duration) ease;
}

.mobile-nav-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    cursor: pointer;
}


/* -----------------------------------------------------------------------------
   3. MOBILE NAV DRAWER
   ----------------------------------------------------------------------------- */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--nav-drawer-width);
    z-index: var(--nav-drawer-z);
    
    /* Visual style */
    background: var(--bone);
    color: var(--charcoal);
    border-left: var(--nav-drawer-border);
    
    /* Layout */
    display: flex;
    flex-direction: column;
    padding: var(--space-8) var(--space-7) var(--space-8) var(--space-8);
    box-sizing: border-box;
    
    /* Hidden state — slide off-screen right */
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    
    transition: transform var(--nav-transition-duration) var(--nav-transition-easing),
                visibility var(--nav-transition-duration) ease;
}

.mobile-nav-overlay.is-open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
}

/* Close button */
.mobile-nav-close {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    
    /* Touch-friendly size */
    width: var(--nav-hamburger-size);
    height: var(--nav-hamburger-size);
    
    /* Visual style */
    border: 2px solid var(--charcoal);
    border-radius: var(--space-2);
    background: transparent;
    color: var(--charcoal);
    
    /* Typography */
    font-size: var(--text-lg);
    font-weight: 300;
    line-height: 1;
    
    /* Layout */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    
    transition: background-color 180ms ease,
                border-color 180ms ease,
                color 180ms ease;
}

.mobile-nav-close:hover,
.mobile-nav-close:focus-visible {
    background: var(--persimmon);
    border-color: var(--persimmon);
    color: var(--bone);
    outline: none;
}

/* Hidden brand (already visible in header) */
.mobile-nav-brand,
.mobile-nav-brand img,
.mobile-nav-brand-name {
    display: none;
}


/* -----------------------------------------------------------------------------
   4. NAV LINKS
   ----------------------------------------------------------------------------- */
.mobile-nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    
    /* Space for close button */
    margin-top: var(--space-16);
}

.mobile-nav-link {
    /* Typography */
    font-family: var(--font-title);
    font-size: var(--nav-link-font-size);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--charcoal);
    
    /* Layout */
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--nav-link-height);
    padding: var(--nav-link-padding-y) 0;
    
    /* Visual */
    border-bottom: 1px solid rgba(47, 53, 59, 0.15);
    
    /* Interaction */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    
    transition: color 180ms ease;
}

.mobile-nav-link:last-child {
    border-bottom: none;
}

/* Animated indicator bar */
.mobile-nav-link::before {
    content: '';
    width: 0;
    height: var(--nav-link-indicator-height);
    background: var(--persimmon);
    margin-right: 0;
    flex-shrink: 0;
    transition: width 200ms ease, margin-right 200ms ease;
}

/* Hover — only for devices with hover capability */
@media (hover: hover) {
    .mobile-nav-link:hover {
        color: var(--persimmon);
    }
    .mobile-nav-link:hover::before {
        width: var(--nav-link-indicator-width);
        margin-right: var(--space-3);
    }
}

/* Focus visible — keyboard navigation */
.mobile-nav-link:focus-visible {
    color: var(--persimmon);
    outline: none;
}
.mobile-nav-link:focus-visible::before {
    width: var(--nav-link-indicator-width);
    margin-right: var(--space-3);
}

/* Active — touch feedback */
.mobile-nav-link:active {
    color: var(--persimmon);
}
.mobile-nav-link:active::before {
    width: var(--nav-link-indicator-width);
    margin-right: var(--space-3);
}

/* Footer */
/* -----------------------------------------------------------------------------
   5. REDUCED MOTION
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .header-hamburger-icon span,
    .mobile-nav-overlay,
    .mobile-nav-backdrop,
    .mobile-nav-close,
    .mobile-nav-link,
    .mobile-nav-link::before {
        transition: none;
    }
    
    /* Instant state changes instead of animations */
    .mobile-nav-overlay.is-open {
        transform: translateX(0);
    }
}


/* -----------------------------------------------------------------------------
   6. SAFE AREA INSETS (notched devices)
   ----------------------------------------------------------------------------- */
@supports (padding: env(safe-area-inset-top)) {
    .mobile-nav-overlay {
        padding: max(var(--space-8), env(safe-area-inset-top))
                 max(var(--space-7), env(safe-area-inset-right))
                 max(var(--space-8), env(safe-area-inset-bottom))
                 max(var(--space-8), env(safe-area-inset-left));
    }
    
    .mobile-nav-close {
        top: max(var(--space-5), env(safe-area-inset-top));
        right: max(var(--space-5), env(safe-area-inset-right));
    }
    
    .header-a {
        padding-left: max(var(--section-pad-x), env(safe-area-inset-left));
        padding-right: max(var(--section-pad-x), env(safe-area-inset-right));
    }
    
    .contact-overlay {
        padding: max(var(--space-5), env(safe-area-inset-top))
                 max(var(--space-5), env(safe-area-inset-right))
                 max(var(--space-5), env(safe-area-inset-bottom))
                 max(var(--space-5), env(safe-area-inset-left));
    }
}


/* -----------------------------------------------------------------------------
   7. RESPONSIVE BREAKPOINTS
   ----------------------------------------------------------------------------- */
/* --- TABLET ≤1024px — hamburger nav, compact header --- */
@media (max-width: 1024px) {
    /* Show hamburger, hide desktop nav */
    .header-a nav {
        display: none;
    }
    
    .header-hamburger {
        display: flex;
        margin-left: auto;
    }
    
    /* Tighter header padding */
    .header-a {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
}