/**
 * ARPHost Mobile Menu & Performance CSS Fixes
 */

/* ==========================================================================
   MOBILE MENU FIX
   ========================================================================== */

@media (max-width: 768px) {
    /* Hide CTA button on mobile to make room for hamburger */
    .header-actions .btn-primary {
        display: none !important;
    }

    /* CRITICAL: Ensure mobile toggle hamburger is ALWAYS visible */
    .mobile-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 44px !important;
        height: 44px !important;
        gap: 6px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 0 !important;
        z-index: 1001 !important;
        flex-shrink: 0 !important; /* Never shrink */
    }

    .mobile-toggle span {
        display: block !important;
        width: 24px !important;
        height: 2px !important;
        background: var(--text-primary, #f1f5f9) !important;
        border-radius: 2px !important;
        transition: all 0.3s ease !important;
    }

    /* Ensure header doesn't overflow */
    .header-inner {
        overflow: visible !important;
    }

    .header-actions {
        flex-shrink: 0 !important;
    }

    /* When menu is moved to body, ensure proper styling */
    body > .main-nav.active,
    body > #mainNav.active {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 99999 !important;
        background: var(--bg-surface, #111827) !important;
        padding: 80px 1.5rem 2rem !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Nav items styling */
    body > .main-nav .nav-item,
    body > #mainNav .nav-item {
        display: block !important;
        width: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    body > .main-nav .nav-link,
    body > #mainNav .nav-link {
        display: flex !important;
        width: 100% !important;
        padding: 1rem 0 !important;
        font-size: 1.1rem !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }

    /* Dropdown menus in mobile */
    body > .main-nav .dropdown-menu,
    body > #mainNav .dropdown-menu {
        position: static !important;
        width: 100% !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding-left: 1rem !important;
        display: none;
    }

    body > .main-nav .nav-item.open .dropdown-menu,
    body > #mainNav .nav-item.open .dropdown-menu,
    .main-nav .nav-item.open .dropdown-menu,
    #mainNav .nav-item.open .dropdown-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        max-height: 500px !important;
    }

    /* Dropdown items styling */
    .nav-item.open .dropdown-item,
    body > .main-nav .dropdown-item,
    body > #mainNav .dropdown-item {
        display: block !important;
        padding: 0.75rem 1rem !important;
        color: var(--text-secondary, #9ca3af) !important;
        text-decoration: none !important;
    }

    .nav-item.open .dropdown-item:hover,
    body > .main-nav .dropdown-item:hover,
    body > #mainNav .dropdown-item:hover {
        color: var(--text-primary, #f1f5f9) !important;
        background: rgba(255,255,255,0.05) !important;
    }

    /* Arrow rotation for open dropdowns */
    .nav-item.open > .nav-link i,
    .nav-item.open > .nav-link svg {
        transform: rotate(180deg) !important;
    }

    /* Ensure nav-link shows pointer cursor */
    .nav-item .nav-link {
        cursor: pointer !important;
    }

    /* Prevent body scroll when menu open */
    body.menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Close button positioning */
    .mobile-toggle.active {
        position: fixed !important;
        top: 1rem !important;
        right: 1rem !important;
        z-index: 100000 !important;
    }
}

/* ==========================================================================
   PERFORMANCE: REDUCE LAYOUT SHIFTS
   ========================================================================== */

/* Reserve space for images to prevent CLS */
img {
    height: auto;
    max-width: 100%;
}

/* Font display swap for faster text rendering */
@font-face {
    font-display: swap;
}

/* Reduce paint complexity on scroll */
.site-header {
    will-change: transform;
    contain: layout style;
}

/* ==========================================================================
   PERFORMANCE: OPTIMIZE ANIMATIONS
   ========================================================================== */

/* Use GPU-accelerated properties only */
.main-nav,
.dropdown-menu,
.nav-link i {
    will-change: transform, opacity;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}