/* ======================================
   ISA MOBILE MASTER STYLESHEET
   Consolidated mobile styles - Preserves desktop
   ====================================== */

/* ==================== MOBILE BREAKPOINT: 768px and below ==================== */
@media (max-width: 768px) {
    
    /* ========== CRITICAL FOUNDATION ========== */
    
    /* Prevent horizontal scroll */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Box-sizing reset for mobile */
    *, *::before, *::after {
        box-sizing: border-box !important;
    }
    
    /* ========== HEADER & NAVIGATION ========== */
    
    /* Fixed header */
    header, nav, #header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 60px !important;
        z-index: 9999 !important;
        background: rgba(10, 10, 10, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }
    
    /* Header container */
    header .container, nav .container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: 60px !important;
        padding: 0 1rem !important;
        margin: 0 !important;
        max-width: 100% !important;
    }
    
    /* Logo */
    header a[href="#top"], header .logo, nav .logo {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        text-decoration: none !important;
    }
    
    header img, nav img {
        height: 32px !important;
        width: auto !important;
    }
    
    /* Hide desktop navigation */
    .desktop-nav, .nav-links, header ul, nav ul {
        display: none !important;
    }
    
    /* Mobile menu button */
    .mobile-menu-btn {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 40px !important;
        height: 40px !important;
        padding: 8px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 10001 !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .mobile-menu-btn span {
        display: block !important;
        width: 24px !important;
        height: 2px !important;
        background: white !important;
        margin: 3px 0 !important;
        transition: all 0.3s ease !important;
        border-radius: 2px !important;
    }
    
    /* Hamburger animation */
    .mobile-menu-btn.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px) !important;
    }
    
    .mobile-menu-btn.active span:nth-child(2) {
        opacity: 0 !important;
    }
    
    .mobile-menu-btn.active span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px) !important;
    }
    
    /* Mobile menu overlay */
    .mobile-menu, #mobile-menu {
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(10, 10, 10, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        z-index: 9998 !important;
        overflow-y: auto !important;
        padding: 2rem 0 !important;
        display: block !important;
    }
    
    .mobile-menu.active, #mobile-menu.active {
        transform: translateX(0) !important;
    }
    
    /* Mobile menu items */
    .mobile-menu a, #mobile-menu a {
        display: block !important;
        padding: 1rem 1.5rem !important;
        color: #fff !important;
        text-decoration: none !important;
        font-size: 18px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-menu a:hover, #mobile-menu a:hover {
        background: rgba(0, 212, 255, 0.1) !important;
        padding-left: 2rem !important;
    }
    
    /* Mobile CTA button in menu */
    .mobile-menu .mobile-cta, #mobile-menu .mobile-cta {
        margin: 2rem 1rem !important;
        display: block !important;
        text-align: center !important;
        background: linear-gradient(135deg, #00d4ff, #8b5cf6) !important;
        padding: 1rem !important;
        border-radius: 50px !important;
        color: white !important;
        font-weight: bold !important;
        text-decoration: none !important;
        border: none !important;
    }
    
    /* ========== CONTENT ADJUSTMENTS ========== */
    
    /* Body padding for fixed header */
    body {
        padding-top: 60px !important;
    }
    
    /* Main content containers */
    main, .main-content {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Hero section */
    .hero, section.hero {
        padding-top: 2rem !important;
        padding-bottom: 3rem !important;
        min-height: auto !important;
    }
    
    /* Hero content */
    .hero h1, .hero-title {
        font-size: clamp(1.75rem, 5vw, 2.5rem) !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }
    
    .hero h2, .hero-subtitle {
        font-size: clamp(1rem, 3vw, 1.25rem) !important;
        line-height: 1.4 !important;
    }
    
    .hero p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }
    
    /* Hero CTA buttons */
    .hero .cta-button, .hero-cta {
        display: block !important;
        width: 100% !important;
        max-width: 300px !important;
        margin: 1rem auto !important;
        padding: 1rem !important;
        font-size: 16px !important;
    }
    
    /* ========== LAYOUT & GRID ========== */
    
    /* Single column grids on mobile */
    .grid, .grid-cols-2, .grid-cols-3, .grid-cols-4 {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    /* Flexbox adjustments */
    .flex-row {
        flex-direction: column !important;
    }
    
    /* Container widths */
    .container, .max-w-7xl, .max-w-6xl, .max-w-5xl {
        padding: 0 1rem !important;
        margin: 0 auto !important;
        max-width: 100% !important;
    }
    
    /* Section padding */
    section {
        padding: 3rem 1rem !important;
    }
    
    /* ========== FORMS ========== */
    
    /* Form inputs */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    textarea,
    select {
        width: 100% !important;
        min-height: 48px !important;
        padding: 12px 16px !important;
        font-size: 16px !important; /* Prevents iOS zoom */
        border-radius: 8px !important;
    }
    
    /* Form buttons */
    button[type="submit"],
    .form-button,
    .submit-btn {
        width: 100% !important;
        min-height: 48px !important;
        padding: 12px 24px !important;
        font-size: 16px !important;
        border-radius: 8px !important;
        touch-action: manipulation !important;
    }
    
    /* Newsletter form specific */
    .newsletter-form {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .newsletter-form input[type="email"] {
        width: 100% !important;
    }
    
    /* ========== CARDS & COMPONENTS ========== */
    
    /* Card layouts */
    .card, .feature-card, .service-card {
        padding: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* ========== IMAGES & MEDIA ========== */
    
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    video, iframe {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* ========== TYPOGRAPHY ========== */
    
    h1 {
        font-size: clamp(1.75rem, 5vw, 2.5rem) !important;
    }
    
    h2 {
        font-size: clamp(1.5rem, 4vw, 2rem) !important;
    }
    
    h3 {
        font-size: clamp(1.25rem, 3vw, 1.5rem) !important;
    }
    
    p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }
    
    /* ========== BUTTONS & TOUCH TARGETS ========== */
    
    /* Minimum touch target size */
    a, button, .clickable {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* CTA buttons */
    .cta-button, .btn-primary {
        display: block !important;
        width: 100% !important;
        max-width: 300px !important;
        margin: 1rem auto !important;
        padding: 1rem !important;
        text-align: center !important;
    }
    
    /* ========== UTILITIES ========== */
    
    /* Hide desktop-only elements */
    .desktop-only, .hide-mobile {
        display: none !important;
    }
    
    /* Show mobile-only elements */
    .mobile-only, .show-mobile {
        display: block !important;
    }
    
    /* Text alignment */
    .text-center-mobile {
        text-align: center !important;
    }
    
    /* Spacing utilities */
    .p-mobile-1 { padding: 1rem !important; }
    .p-mobile-2 { padding: 2rem !important; }
    .m-mobile-0 { margin: 0 !important; }
    .m-mobile-1 { margin: 1rem !important; }
    
    /* ========== FOOTER ========== */
    
    footer {
        padding: 2rem 1rem !important;
    }
    
    footer .grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    
    /* ========== MODALS & OVERLAYS ========== */
    
    .modal, .overlay {
        padding: 1rem !important;
    }
    
    .modal-content {
        width: 95% !important;
        max-width: 100% !important;
        margin: 1rem !important;
    }
    
    /* ========== PERFORMANCE ========== */
    
    /* Reduce animations on mobile */
    * {
        animation-duration: 0.2s !important;
    }
    
    /* Disable logo scroll animation on mobile */
    .logo-scroll-track {
        animation: none !important;
        display: flex !important;
        justify-content: center !important;
        gap: 2rem !important;
        flex-wrap: wrap !important;
        padding: 1rem !important;
    }
    
    /* Make logo images smaller on mobile */
    .logo-scroll-track img {
        height: 40px !important;
        width: auto !important;
        opacity: 0.7 !important;
    }
    
    /* Optimize scrolling */
    .scroll-container {
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ==================== TABLET BREAKPOINT: 769px - 1024px ==================== */
@media (min-width: 769px) and (max-width: 1024px) {
    
    /* Show desktop nav on tablet */
    .desktop-nav {
        display: flex !important;
    }
    
    /* Hide mobile menu button on tablet */
    .mobile-menu-btn {
        display: none !important;
    }
    
    /* Container adjustments */
    .container {
        padding: 0 2rem !important;
    }
    
    /* Grid adjustments */
    .grid-cols-3, .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* CTA button adjustments */
    header .desktop-nav a[href*="calendly"] {
        padding: 0.5rem 1rem !important;
        font-size: 14px !important;
    }
}

/* ==================== DESKTOP SAFETY: 1025px and up ==================== */
@media (min-width: 1025px) {
    
    /* Ensure mobile menu is hidden on desktop */
    .mobile-menu, #mobile-menu {
        display: none !important;
    }
    
    .mobile-menu-btn {
        display: none !important;
    }
    
    /* Show desktop navigation */
    .desktop-nav, .nav-links {
        display: flex !important;
    }
    
    /* Hide mobile-only elements */
    .mobile-only, .show-mobile {
        display: none !important;
    }
    
    /* Show desktop-only elements */
    .desktop-only, .hide-mobile {
        display: block !important;
    }
}

/* ==================== ACCESSIBILITY ==================== */

/* Focus styles for better keyboard navigation */
@media (max-width: 768px) {
    a:focus, button:focus, input:focus, textarea:focus, select:focus {
        outline: 2px solid #00d4ff !important;
        outline-offset: 2px !important;
    }
}

/* ==================== PRINT STYLES ==================== */
@media print {
    header, footer, .mobile-menu, .mobile-menu-btn {
        display: none !important;
    }
}