/**
 * Mobile Navigation System
 * Hamburger menu with slide-in navigation for mobile devices
 * WCAG 2.1 AA compliant with keyboard navigation support
 */

/* =============================================================================
   Mobile Menu Toggle Button (Hamburger)
   ============================================================================= */

.mobile-menu-toggle {
    display: none; /* Hidden on desktop */
    background: transparent;
    border: none;
    padding: 8px;
    color: var(--ucb-white);
    cursor: pointer;
    z-index: 1100;
    transition: var(--transition-fast);
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%) translateZ(0);
}

.mobile-menu-toggle:hover {
    opacity: 0.8;
}

.mobile-menu-toggle:focus-visible {
    outline: 3px solid var(--ucb-gold);
    outline-offset: 2px;
}

.mobile-menu-toggle svg {
    vertical-align: middle;
    width: 28px;
    height: 28px;
}

/* Icon swap: show hamburger by default, X when open */
.mobile-menu-toggle .icon-close {
    display: none;
}

.mobile-menu-toggle[aria-expanded="true"] .icon-hamburger {
    display: none;
}

.mobile-menu-toggle[aria-expanded="true"] .icon-close {
    display: block;
}

.mobile-menu-toggle .menu-label {
    vertical-align: middle;
}

/* =============================================================================
   Mobile Menu Backdrop
   ============================================================================= */

.mobile-menu-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--modal-backdrop-bg);
    z-index: 1000;
    opacity: 0;
    transition: var(--transition-base);
}

.mobile-menu-backdrop.active {
    display: block;
    opacity: 1;
}

/* =============================================================================
   Mobile Navigation Styles (< 768px)
   ============================================================================= */

@media (max-width: 767px) {
    /* Hide dark gray navigation bar visual on mobile but keep structure for menu */
    .background-color-dark-gray-dark {
        background-color: transparent !important;
        height: 0;
        overflow: visible; /* Allow fixed-position menu to show */
        padding: 0;
    }

    .background-color-dark-gray-dark .container-lg {
        height: 0;
        padding: 0;
    }

    /* Make navbar flex container on mobile to position hamburger */
    .ucb-navbar {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0;
        height: 0;
    }

    /* Make header container use flexbox to properly contain button */
    .ucb.black .container-lg {
        display: flex;
        align-items: center;
        position: relative;
        gap: 0.5rem;
    }

    /* Header text wrapper - stacks title and affiliation vertically */
    .ucb.black .header-text {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Show hamburger button on mobile */
    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        gap: 4px;
        position: static; /* Override absolute positioning */
        transform: none; /* Remove transform */
        margin-left: auto; /* Push to the right */
        flex-shrink: 0; /* Don't let it shrink */
    }

    /* Hide "Menu" text on mobile - hamburger icon is sufficient */
    .mobile-menu-toggle .menu-label {
        display: none;
    }

    /* Slightly smaller icon in condensed mode */
    body.scrolled .mobile-menu-toggle {
        position: static;
        transform: none;
    }

    body.scrolled .mobile-menu-toggle svg {
        width: 22px;
        height: 22px;
    }

    /* Transform navigation into slide-in menu */
    .ucb-navbar ul {
        position: fixed;
        top: 0;
        right: -100%;
        height: 100vh;
        width: 85%;
        max-width: 400px;
        background: var(--nav-bg);
        flex-direction: column;
        align-items: stretch;
        padding: 80px 0 0 0;
        overflow: visible; /* No overflow on UL - keeps clicks working */
        z-index: 1050;
        box-shadow: -4px 0 12px rgba(0, 0, 0, 0.3);
        transition: right 0.3s ease;
    }

    /* Inner scrollable wrapper - enables scrolling without blocking clicks */
    .mobile-menu-scroll-wrapper {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 80px); /* Full viewport minus top padding */
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        pointer-events: auto; /* Ensure clicks work */
    }

    /* Menu open state */
    .ucb-navbar ul.mobile-menu-open {
        right: 0;
    }

    /* Elevate sticky header stacking context when menu is open so the
       fixed-position nav panel (z-index: 1050) escapes above the Quarto
       mobile TOC dock (z-index: 1040) which lives outside this container */
    .sticky-header-container:has(.mobile-menu-open) {
        z-index: 1050;
    }

    /* Mobile navigation items (use descendant selector - scroll wrapper div sits between ul and li) */
    .ucb-navbar li {
        display: block;
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        position: relative;
        z-index: 1;
    }

    /* Mobile links
       a:link/a:visited variants override bootstrap-overrides.css
       .ucb-navbar a:link (specificity 0,2,1 > 0,1,2) which sets padding: 10px */
    .ucb-navbar li > a,
    .ucb-navbar li > a:link,
    .ucb-navbar li > a:visited,
    .ucb-navbar .dropdown > span,
    .ucb-navbar .dropdown > a {
        display: block !important;
        width: 100% !important;
        padding: 16px 20px;
        font-size: 1rem;
        border-left: 4px solid transparent;
        position: relative !important;
        z-index: 1;
        pointer-events: auto !important;
        cursor: pointer !important;
        /* CRITICAL: Ensure triggers completely fill their space */
        box-sizing: border-box !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    /* Active link indicator on mobile - match desktop gold badge style */
    .ucb-navbar li > a.active,
    .ucb-navbar.ucb-navbar-dark-grey a:link.active,
    .ucb-navbar.ucb-navbar-dark-grey a:visited.active,
    .ucb-navbar .dropdown > span.active,
    .ucb-navbar.ucb-navbar-dark-grey .dropdown > span.active,
    .ucb-navbar .dropdown > a.active,
    .ucb-navbar.ucb-navbar-dark-grey .dropdown > a.active {
        border-left-color: var(--ucb-gold);
        background: var(--nav-active-bg) !important;
        color: var(--nav-active-text) !important;
        font-weight: bold;
    }

    /* Mobile dropdowns */
    .ucb-navbar .dropdown {
        display: block !important;
        width: 100%;
        position: relative;
        /* Ensure dropdown li is in normal flow and visible */
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
    }

    .ucb-navbar .dropdown > span,
    .ucb-navbar .dropdown > a {
        position: relative;
        padding-right: 50px;
        /* Ensure trigger completely fills the container - no gaps */
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        pointer-events: auto !important; /* CRITICAL: Make sure triggers can receive clicks */
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Dropdown chevron indicator */
    .ucb-navbar .dropdown > span::after,
    .ucb-navbar .dropdown > a::after {
        content: '';
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%) rotate(0deg);
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid var(--nav-text);
        transition: transform 0.2s ease;
    }

    /* Chevron rotation when dropdown open */
    .ucb-navbar .dropdown.mobile-dropdown-open > span::after,
    .ucb-navbar .dropdown.mobile-dropdown-open > a::after {
        transform: translateY(-50%) rotate(180deg);
    }

    /* Mobile dropdown content */
    .ucb-navbar .dropdown-content {
        position: static;
        display: none;
        box-shadow: none;
        background: transparent;
        width: 100%;
        min-width: 100%;
        max-height: none; /* Reset desktop 80vh limit that creates a visible line at the boundary */
        overflow: visible; /* No overflow needed - wrapper handles scrolling */
        transform: none; /* Reset GPU compositing from desktop to avoid rendering artifacts */
        pointer-events: auto !important; /* Ensure clicks work properly */
    }

    .ucb-navbar .dropdown.mobile-dropdown-open .dropdown-content {
        display: block;
    }

    /* Ensure dropdown content is accessible when open */
    .ucb-navbar .dropdown.mobile-dropdown-open {
        position: relative;
        z-index: 10;
        pointer-events: auto; /* Re-enable pointer events when dropdown is open */
    }

    .ucb-navbar .dropdown-content a {
        padding-left: 40px !important; /* Override inline padding-left on staff admin sub-items */
        border-left: 4px solid transparent;
        pointer-events: auto !important; /* Ensure links are clickable */
    }

    .ucb-navbar .dropdown-content a.active {
        border-left-color: var(--ucb-gold);
        background-color: var(--nav-active-bg) !important;
        color: var(--nav-active-text) !important;
        font-weight: bold;
    }

    .ucb-navbar .dropdown-content hr {
        margin: 0 !important; /* Override inline margin: 10px 0 */
        border-color: rgba(255, 255, 255, 0.15) !important; /* Override inline border-color: #666 */
    }

    /* Subsection headers in mobile dropdown */
    .ucb-navbar .dropdown-content div[style*="padding"] {
        padding: 12px 40px !important;
        background: transparent; /* No overlay — dropdown bg is already transparent */
        pointer-events: auto; /* Allow these to be rendered but not block clicks if needed */
    }

    /* Right-aligned items (theme toggle, user menu)
       display: contents removes the div from layout so its children become
       direct flex children of the scroll wrapper — identical to other li items */
    .ucb-navbar .right-links {
        display: contents !important;
    }


    /* Ensure dropdown triggers have proper touch targets */
    .ucb-navbar .dropdown > span,
    .ucb-navbar .dropdown > a {
        min-height: 48px !important; /* Ensure touch target */
        z-index: 100 !important; /* Ensure triggers are above other elements */
    }

    /* =============================================================================
       Mobile Utility Row — Home, Search, Dark Mode, Close in one icon row
       ============================================================================= */

    .mobile-utility-row {
        display: flex;
        align-items: center;
        gap: 4px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 80px; /* Matches <ul> padding-top */
        padding: 0 12px;
        z-index: 2;
        background: var(--nav-bg);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Utility row items: compact icon-only square touch targets */
    .mobile-utility-row li {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: auto;
        border-bottom: none; /* Override default mobile li border */
    }

    .mobile-utility-row li > a,
    .mobile-utility-row li > a:link,
    .mobile-utility-row li > a:visited {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 48px !important;
        height: 48px;
        min-height: 44px; /* WCAG 2.1 AA touch target */
        padding: 0 !important;
        border-left: none !important;
        border-radius: var(--radius-sm);
        color: var(--nav-text) !important;
    }

    .mobile-utility-row li > a:hover,
    .mobile-utility-row li > a:focus-visible {
        background: var(--nav-dropdown-hover-bg);
    }

    /* Keep all text labels hidden in utility row */
    .mobile-utility-row .visually-hidden {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border-width: 0 !important;
    }

    /* =============================================================================
       Pull Search and Dark Mode into the utility row area on mobile.
       These items stay in their original DOM positions (scroll wrapper / right-links)
       for correct desktop layout, but are absolutely positioned into the 80px
       top area alongside Home and Close on mobile.
       ============================================================================= */

    .ucb-navbar .search-link-container {
        position: absolute !important;
        top: 16px;
        left: 60px; /* After Home icon (12px padding + 48px width) */
        width: 48px !important;
        height: 48px;
        z-index: 3;
        border-bottom: none !important;
    }

    .ucb-navbar .search-link-container .search-link {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 48px !important;
        height: 48px;
        padding: 0 !important;
        border-radius: var(--radius-sm);
    }

    /* Keep search text hidden — icon only in utility area */
    .ucb-navbar .search-link-container .visually-hidden {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        clip: rect(0, 0, 0, 0) !important;
        overflow: hidden !important;
    }

    .ucb-navbar .dark-mode-toggle-container {
        position: absolute !important;
        top: 16px;
        left: 112px; /* After Search icon (60px + 48px + 4px gap) */
        width: 48px !important;
        height: 48px;
        z-index: 3;
        border-bottom: none !important;
    }

    .ucb-navbar .dark-mode-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 48px !important;
        height: 48px;
        min-height: 44px;
        padding: 0 !important;
        border: none !important;
        border-left: none !important;
        border-radius: var(--radius-sm);
        background: transparent;
        gap: 0;
    }

    .ucb-navbar .dark-mode-toggle:hover,
    .ucb-navbar .dark-mode-toggle:focus-visible {
        background: var(--nav-dropdown-hover-bg);
        border-left-color: transparent;
    }

    /* Keep theme label hidden — icon only */
    .ucb-navbar .dark-mode-toggle .theme-label {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        clip: rect(0, 0, 0, 0) !important;
        overflow: hidden !important;
    }

    /* Hide header hamburger when menu is open — utility row close button takes over */
    .mobile-menu-toggle[aria-expanded="true"] {
        display: none !important;
    }

    /* Close button in utility row — pushed to far right */
    .mobile-menu-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        min-height: 44px;
        margin-left: auto;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: var(--radius-sm);
        color: var(--nav-text);
        cursor: pointer;
    }

    .mobile-menu-close:hover,
    .mobile-menu-close:focus-visible {
        background: var(--nav-dropdown-hover-bg);
    }

    .mobile-menu-close:focus-visible {
        outline: 3px solid var(--ucb-gold);
        outline-offset: -3px;
    }
}

/* =============================================================================
   Desktop Navigation (≥ 768px)
   ============================================================================= */

@media (min-width: 768px) {
    /* Ensure hamburger, backdrop, and mobile close button are hidden on desktop */
    .mobile-menu-toggle,
    .mobile-menu-backdrop,
    .mobile-menu-close {
        display: none !important;
    }

    /* Utility row transparent on desktop — children flow into the nav flex row */
    .mobile-utility-row {
        display: contents;
    }

    /* Close button hidden on desktop */
    .mobile-menu-close {
        display: none !important;
    }

    /* Desktop horizontal navigation remains unchanged */
    .ucb-navbar ul {
        position: static;
        height: auto;
        width: auto;
        flex-direction: row;
        padding: 0;
        overflow: visible;
        box-shadow: none;
    }
}

/* =============================================================================
   Accessibility Enhancements
   ============================================================================= */

/* Focus visible for keyboard navigation */
@media (max-width: 767px) {
    .ucb-navbar li > a:focus-visible,
    .ucb-navbar .dropdown > span:focus-visible,
    .ucb-navbar .dropdown > a:focus-visible,
    .ucb-navbar .dropdown-content a:focus-visible {
        outline: 3px solid var(--ucb-gold);
        outline-offset: -3px;
    }

    /* Ensure touch targets are at least 44x44px (WCAG 2.1 Level AAA) */
    .ucb-navbar li > a,
    .ucb-navbar .dropdown > span,
    .ucb-navbar .dropdown > a,
    .ucb-navbar .dropdown-content a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* =============================================================================
   Smooth Animations
   ============================================================================= */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .ucb-navbar ul,
    .mobile-menu-backdrop,
    .mobile-menu-toggle {
        transition: none;
    }

    .ucb-navbar .dropdown > span::after,
    .ucb-navbar .dropdown > a::after {
        transition: none;
    }
}