/* ===== MOBILE NAVIGATION FIXES ===== */
@media (max-width: 768px) {
    /* Force single-line header layout */
    .navbar {
        padding: 8px 0 !important;
        min-height: auto !important;
    }
    
    .navbar-container {
        flex-wrap: nowrap !important;
        gap: 8px !important;
        min-height: 44px;
        align-items: center !important;
        /* Prevent overflow */
        overflow-x: visible !important;
        max-width: 100vw !important;
    }
    
    /* Ensure navbar brand meets touch target requirements */
    .navbar-brand {
        font-size: 0 !important; /* Hide text */
        min-width: 44px !important; /* Meet touch target requirement */
        min-height: 44px !important; /* Meet touch target requirement */
        flex-shrink: 0 !important;
        margin-right: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px !important;
        border-radius: 6px !important;
        transition: background-color 0.2s ease !important;
    }
    
    .navbar-brand:hover {
        background-color: var(--hh-color-base-cloud) !important;
    }
    
    .navbar-brand img {
        width: 32px !important;
        height: 32px !important;
        margin: 0 !important;
    }
    
    /* Compact navigation items */
    .navbar-nav {
        flex-wrap: nowrap !important;
        gap: 6px !important;
        width: auto !important;
        justify-content: flex-end !important;
        align-items: center !important;
    }
    
    .nav-link {
        font-size: 12px !important;
        padding: 6px 8px !important;
        white-space: nowrap !important;
        border-radius: 4px !important;
    }
    
    /* Hide GitHub links on mobile */
    .nav-link[href*="github"] {
        display: none !important;
    }
    
    .token-counter {
        font-size: 11px !important;
        padding: 4px 8px !important;
        border-radius: 12px !important;
    }
    
    .token-icon {
        width: 28px !important;
        height: 28px !important;
    }
    
    /* Logout button meets touch target requirements */
    .logout-btn {
        font-size: 0 !important;
        min-width: 44px !important; /* Meet touch target requirement */
        min-height: 44px !important; /* Meet touch target requirement */
        padding: 10px !important;
        border-radius: 22px !important;
        background: #f3f4f6 !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .logout-btn:hover {
        background: #e5e7eb !important;
    }
    
    .logout-btn:after {
        content: '🚪';
        font-size: 18px !important;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

@media (max-width: 480px) {
    /* Ultra-compact for very small screens */
    .navbar {
        padding: 6px 0 !important;
    }
    
    .navbar-container {
        padding: 0 12px !important;
        gap: 6px !important;
        min-height: 40px !important;
    }
    
    .navbar-brand img {
        width: 28px !important;
        height: 28px !important;
    }
    
    .navbar-nav {
        gap: 4px !important;
    }
    
    .nav-link {
        font-size: 11px !important;
        padding: 4px 6px !important;
    }
    
    .token-counter {
        font-size: 10px !important;
        padding: 3px 6px !important;
    }
    
    .token-icon {
        width: 24px !important;
        height: 24px !important;
    }
    
    .logout-btn {
        min-width: 28px !important;
        min-height: 28px !important;
        padding: 4px !important;
    }
    
    .logout-btn:after {
        font-size: 14px !important;
    }
}


/* ===== FOOTER MOBILE FIXES ===== */
@media (max-width: 768px) {
    footer {
        padding: 20px 0 !important;
        margin-top: 30px !important;
    }
    
    footer .container {
        padding: 0 12px !important;
    }
    
    footer p {
        font-size: 14px !important; /* Increased from 0.8em for better readability */
        line-height: 1.5;
        margin-bottom: 8px !important;
    }
    
    /* Improve footer link touch targets */
    footer a {
        margin: 0 6px !important;
        padding: 12px !important; /* Add padding for better touch targets */
        display: inline-block !important;
        min-height: 44px !important; /* Meet touch target requirement */
        line-height: 20px !important;
        text-decoration: underline !important;
        border-radius: 4px !important;
        transition: background-color 0.2s ease !important;
    }
    
    footer a:hover {
        background-color: rgba(0, 123, 255, 0.1) !important;
        text-decoration: none !important;
    }
}

@media (max-width: 480px) {
    footer {
        padding: 16px 0 !important;
        margin-top: 20px !important;
    }
    
    footer p {
        font-size: 12px !important; /* Specific size instead of relative em */
    }
    
    footer a {
        margin: 0 4px !important;
        padding: 8px !important; /* Reduce padding slightly for small screens */
    }
}


/* ===== PHASE 4: HAMBURGER NAVIGATION MENU ===== */
@media (max-width: 768px) {
    /* Clean top navbar - hide desktop navigation items */
    .navbar-nav .nav-link:not(.hamburger-trigger):not(.token-counter):not(.auth-buttons) {
        display: none !important;
    }
    
    /* Hamburger menu trigger button */
    .hamburger-menu-trigger {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-around !important;
        width: 44px !important;
        height: 44px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 8px !important;
        border-radius: var(--hh-radius-sm) !important;
        transition: all 0.2s ease !important;
        touch-action: manipulation !important;
        position: relative !important;
        z-index: 1001 !important;
    }
    
    .hamburger-menu-trigger:hover {
        background: var(--hh-color-base-cloud) !important;
    }
    
    /* Hamburger lines */
    .hamburger-line {
        width: 24px !important;
        height: 2px !important;
        background: var(--hh-color-text-primary) !important;
        transition: all 0.3s ease !important;
        border-radius: 2px !important;
    }
    
    /* Active hamburger animation (X shape) */
    .hamburger-menu-trigger.active .hamburger-line:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px) !important;
    }
    
    .hamburger-menu-trigger.active .hamburger-line:nth-child(2) {
        opacity: 0 !important;
    }
    
    .hamburger-menu-trigger.active .hamburger-line:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px) !important;
    }

    /* Hamburger button icons */
    .hamburger-icon,
    .close-icon {
        width: 20px !important;
        height: 20px !important;
        filter: var(--hh-color-text-primary-filter) !important;
        transition: all 0.2s ease !important;
    }

    /* Mobile menu divider */
    .mobile-menu-divider {
        height: 1px !important;
        background: var(--hh-color-borders-default) !important;
        margin: var(--hh-space-md) var(--hh-space-lg) !important;
    }
    
    /* Off-canvas mobile menu */
    .mobile-menu-overlay {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 999 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.3s ease !important;
        touch-action: none !important;
    }
    
    .mobile-menu-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .mobile-menu {
        position: fixed !important;
        top: 0 !important;
        right: -300px !important; /* Start off-screen */
        width: 280px !important;
        height: 100vh !important;
        background: var(--hh-color-base-white) !important;
        box-shadow: var(--hh-shadow-lg) !important;
        z-index: 1000 !important;
        transition: right 0.3s ease !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .mobile-menu.active {
        right: 0 !important; /* Slide in */
    }
    
    /* Mobile menu header */
    .mobile-menu-header {
        padding: var(--hh-space-xl) var(--hh-space-lg) !important;
        border-bottom: 1px solid var(--hh-color-borders-default) !important;
        background: var(--hh-color-base-cloud) !important;
    }
    
    .mobile-menu-title {
        font-size: var(--hh-type-h3-size) !important;
        font-weight: var(--hh-type-h3-weight) !important;
        color: var(--hh-color-text-primary) !important;
        margin: 0 !important;
    }
    
    /* Mobile menu items */
    .mobile-menu-items {
        padding: var(--hh-space-lg) 0 !important;
    }
    
    .mobile-menu-item {
        display: block !important;
        width: 100% !important;
        padding: var(--hh-space-lg) var(--hh-space-xl) !important;
        font-size: var(--hh-type-body-size) !important;
        font-weight: var(--hh-type-body-weight) !important;
        color: var(--hh-color-text-primary) !important;
        text-decoration: none !important;
        border: none !important;
        background: transparent !important;
        text-align: left !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        touch-action: manipulation !important;
        min-height: 56px !important; /* Touch target compliance */
        display: flex !important;
        align-items: center !important;
        gap: var(--hh-space-md) !important;
        border-bottom: 1px solid var(--hh-color-borders-subtle) !important;
    }
    
    .mobile-menu-item:hover,
    .mobile-menu-item:focus {
        background: var(--hh-color-base-offWhite) !important;
        color: var(--hh-color-text-primary) !important;
        text-decoration: none !important;
    }
    
    .mobile-menu-item:active {
        background: var(--hh-color-brand-primary-300) !important;
        transition: background 0.1s ease !important;
    }
    
    .mobile-menu-item:last-child {
        border-bottom: none !important;
    }
    
    /* Mobile menu icons */
    .mobile-menu-icon {
        width: 24px !important;
        height: 24px !important;
        flex-shrink: 0 !important;
        color: var(--hh-color-text-secondary) !important;
    }
    
    /* Sign out button styling in mobile menu */
    .mobile-menu-item.sign-out {
        color: var(--hh-color-status-error) !important;
        border-top: 1px solid var(--hh-color-borders-default) !important;
        margin-top: var(--hh-space-lg) !important;
    }
    
    .mobile-menu-item.sign-out:hover {
        background: rgba(217, 93, 72, 0.1) !important;
        color: var(--hh-color-status-error) !important;
    }
    
    .mobile-menu-item.sign-out .mobile-menu-icon {
        color: var(--hh-color-status-error) !important;
    }
    
    /* Token counter in mobile menu */
    .mobile-token-display {
        padding: var(--hh-space-lg) var(--hh-space-xl) !important;
        background: var(--hh-color-brand-primary-300) !important;
        border-radius: var(--hh-radius-md) !important;
        margin: var(--hh-space-lg) var(--hh-space-lg) 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: var(--hh-space-sm) !important;
    }
    
    .mobile-token-count {
        font-size: var(--hh-type-h4-size) !important;
        font-weight: var(--hh-type-h3-weight) !important;
        color: var(--hh-color-text-primary) !important;
    }
    
    .mobile-token-label {
        font-size: var(--hh-type-small-size) !important;
        color: var(--hh-color-text-secondary) !important;
    }
    
    /* Clean up top navbar for mobile */
    .navbar-container {
        padding: 0 var(--hh-space-md) !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    .navbar-brand {
        flex-shrink: 0 !important;
    }
    
    .navbar-nav {
        display: flex !important;
        align-items: center !important;
        gap: var(--hh-space-md) !important;
    }
    
    /* Show only essential items in top bar */
    .navbar-nav .token-counter {
        display: flex !important;
        padding: var(--hh-space-sm) var(--hh-space-md) !important;
        font-size: var(--hh-type-small-size) !important;
        min-height: 40px !important;
    }
    
    /* Body scroll prevention when menu is open */
    body.mobile-menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* Compact mobile navigation */
@media (max-width: 480px) {
    .navbar-container {
        padding: 0 var(--hh-space-sm) !important;
    }
    
    .mobile-menu {
        width: 260px !important; /* Slightly narrower for small screens */
    }
    
    .mobile-menu-header {
        padding: var(--hh-space-lg) var(--hh-space-md) !important;
    }
    
    .mobile-menu-title {
        font-size: var(--hh-type-h4-size) !important;
    }
    
    .mobile-menu-item {
        padding: var(--hh-space-md) var(--hh-space-lg) !important;
        min-height: 52px !important;
        font-size: var(--hh-type-small-size) !important;
    }
    
    .mobile-token-display {
        margin: var(--hh-space-md) var(--hh-space-md) 0 !important;
        padding: var(--hh-space-md) !important;
    }
    
    .mobile-token-count {
        font-size: var(--hh-type-body-size) !important;
    }
    
    .hamburger-menu-trigger {
        width: 40px !important;
        height: 40px !important;
    }
    
    .hamburger-line {
        width: 20px !important;
    }
}