/**
 * CycleFix London - 2026 Mobile Optimizations
 * Conversion-focused, modern mobile experience
 */

/* ========================================
   MOBILE HEADER IMPROVEMENTS
   ======================================== */

/* Better header sizing on mobile */
@media (max-width: 1024px) {
    .site-header {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }
    
    /* Logo optimization - better visibility */
    .site-logo .cyclefix-logo-cycle,
    .site-logo .cyclefix-logo-fix {
        font-size: 1.25rem !important; /* 20px */
    }
    
    /* Mobile buttons - touch-friendly 44px minimum */
    .nav-phone-pill,
    .nav-book-pill,
    #mobile-cart-btn {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Header actions better spacing */
    .header-actions {
        gap: 0.5rem !important;
    }
}

@media (max-width: 640px) {
    /* Even smaller on phones */
    .site-header {
        padding-top: 0.375rem !important;
        padding-bottom: 0.375rem !important;
    }
    
    .site-logo .cyclefix-logo-cycle,
    .site-logo .cyclefix-logo-fix {
        font-size: 1.125rem !important; /* 18px */
    }
    
    .header-actions {
        gap: 0.375rem !important;
    }
}

/* ========================================
   MOBILE MENU ENHANCEMENTS
   ======================================== */

@media (max-width: 1024px) {
    /* Smooth slide animation */
    .mobile-menu-panel {
        transform: translateY(-100%);
        opacity: 0;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    }
    
    .mobile-menu-panel:not(.hidden) {
        transform: translateY(0);
        opacity: 1;
    }
    
    /* Scroll handling */
    .mobile-menu-scroll {
        scroll-behavior: smooth;
        overscroll-behavior: contain;
    }
    
    /* Better touch targets */
    .mobile-menu-panel a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    /* Prevent body scroll when menu open */
    body.menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
}

/* ========================================
   HOMEPAGE MOBILE OPTIMIZATIONS
   ======================================== */

@media (max-width: 1024px) {
    /* Hero section - reduce height, improve readability */
    .hero-standard {
        min-height: 50vh !important;
        padding-top: calc(var(--header-height) + 1.5rem) !important;
        padding-bottom: 2rem !important;
    }
    
    .hero-standard h1 {
        font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
        line-height: 1.1 !important;
        margin-bottom: 1rem !important;
    }
    
    .hero-standard p {
        font-size: clamp(0.875rem, 3vw, 1rem) !important;
        line-height: 1.5 !important;
    }
    
    /* Stats - better mobile layout */
    .stat-box-home {
        padding: 0.75rem 1rem !important;
    }
    
    .stat-number-home {
        font-size: 1.25rem !important;
    }
    
    .stat-label-home {
        font-size: 8px !important;
    }
}

@media (max-width: 640px) {
    .hero-standard {
        min-height: 45vh !important;
        padding-top: calc(var(--header-height) + 1rem) !important;
        padding-bottom: 1.5rem !important;
    }
    
    /* CTA buttons - full width on mobile */
    .hero-standard .flex.gap-4 a {
        flex: 1;
        min-width: 0;
    }
}

/* ========================================
   SERVICE CARDS MOBILE OPTIMIZATION
   ======================================== */

@media (max-width: 1024px) {
    /* Service grid - better mobile layout */
    .grid.grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    
    .grid.grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    
    /* Service cards - taller for better touch */
    .service-card {
        min-height: 200px !important;
        border-radius: 1.25rem !important;
    }
    
    .service-card-content {
        padding: 1.5rem !important;
    }
    
    .service-card h3 {
        font-size: 1.125rem !important;
    }
}

@media (max-width: 640px) {
    /* Single column on phone */
    .grid.grid-cols-2,
    .grid.grid-cols-3,
    .grid.grid-cols-4 {
        grid-template-columns: 1fr !important;
        gap: 0.875rem !important;
    }
    
    .service-card {
        min-height: 180px !important;
    }
}

/* ========================================
   TYPOGRAPHY IMPROVEMENTS
   ======================================== */

@media (max-width: 1024px) {
    /* Base font size */
    html {
        font-size: 16px !important; /* Easier to read */
    }
    
    /* Headings */
    h1 {
        font-size: clamp(1.75rem, 5vw, 2.5rem) !important;
        line-height: 1.2 !important;
    }
    
    h2 {
        font-size: clamp(1.5rem, 4vw, 2rem) !important;
        line-height: 1.3 !important;
    }
    
    h3 {
        font-size: clamp(1.125rem, 3vw, 1.5rem) !important;
        line-height: 1.4 !important;
    }
    
    /* Body text */
    p, li {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }
    
    /* Buttons - touch friendly */
    .btn, button, .cfb-btn, a[class*="btn"] {
        min-height: 48px !important;
        padding: 0.875rem 1.5rem !important;
        font-size: 0.9375rem !important;
        font-weight: 700 !important;
        border-radius: 12px !important;
    }
}

/* ========================================
   TOUCH-FRIENDLY IMPROVEMENTS
   ======================================== */

@media (max-width: 1024px) {
    /* All interactive elements - 44px minimum (Apple guidelines) */
    a, button, input[type="submit"], input[type="button"], .clickable {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Better tap targets */
    .nav-pill,
    .header-action-pill {
        padding: 0.75rem 1rem !important;
    }
    
    /* Increase spacing between interactive elements */
    nav a + a,
    button + button {
        margin-left: 0.75rem;
    }
    
    /* Remove hover effects on touch devices */
    @media (hover: none) {
        *:hover {
            transform: none !important;
        }
    }
}

/* ========================================
   MOBILE STICKY ELEMENTS
   ======================================== */

@media (max-width: 1024px) {
    /* Floating booking button */
    .mobile-floating-cta {
        position: fixed;
        bottom: 1rem;
        right: 1rem;
        z-index: 900;
        background: linear-gradient(135deg, #009FE3, #00d4ff);
        color: white;
        padding: 1rem 1.5rem;
        border-radius: 50px;
        box-shadow: 0 8px 24px rgba(0, 159, 227, 0.4);
        font-size: 0.875rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        animation: float-pulse 3s ease-in-out infinite;
    }
    
    @keyframes float-pulse {
        0%, 100% {
            transform: translateY(0);
            box-shadow: 0 8px 24px rgba(0, 159, 227, 0.4);
        }
        50% {
            transform: translateY(-5px);
            box-shadow: 0 12px 32px rgba(0, 159, 227, 0.5);
        }
    }
}

/* ========================================
   SPACING & LAYOUT OPTIMIZATION
   ======================================== */

@media (max-width: 1024px) {
    /* Container padding */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Section spacing - reduce for less scrolling */
    section {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
    
    /* Reduce gap between elements */
    .space-y-16 > * + * {
        margin-top: 3rem !important;
    }
    
    .space-y-12 > * + * {
        margin-top: 2.5rem !important;
    }
    
    .space-y-8 > * + * {
        margin-top: 2rem !important;
    }
    
    /* Grid gaps */
    .gap-8 {
        gap: 1.5rem !important;
    }
    
    .gap-6 {
        gap: 1rem !important;
    }
}

@media (max-width: 640px) {
    section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
}

/* ========================================
   FORMS & INPUTS MOBILE
   ======================================== */

@media (max-width: 1024px) {
    /* Input fields */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    textarea,
    select {
        min-height: 48px !important;
        padding: 0.875rem 1rem !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
        border-radius: 12px !important;
    }
    
    /* Labels */
    label {
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Form spacing */
    form > * + * {
        margin-top: 1rem !important;
    }
}

/* ========================================
   SHOP/WOOCOMMERCE MOBILE
   ======================================== */

@media (max-width: 1024px) {
    /* Product grid */
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    
    /* Product cards */
    .woocommerce ul.products li.product {
        margin: 0 !important;
    }
    
    /* Add to cart button */
    .woocommerce .button,
    .woocommerce button.button {
        min-height: 48px !important;
        padding: 0.875rem 1.5rem !important;
        font-size: 0.9375rem !important;
    }
}

@media (max-width: 640px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   FOOTER MOBILE
   ======================================== */

@media (max-width: 1024px) {
    footer {
        padding: 2rem 0 !important;
    }
    
    /* Footer columns - stack on mobile */
    footer .grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    /* Footer links */
    footer a {
        font-size: 0.9375rem !important;
        line-height: 2 !important;
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

@media (max-width: 1024px) {
    /* Reduce animations on mobile */
    *, *::before, *::after {
        animation-duration: 0.2s !important;
        transition-duration: 0.2s !important;
    }
    
    /* Disable parallax on mobile */
    [data-parallax] {
        transform: none !important;
    }
    
    /* Optimize images */
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

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

@media (max-width: 1024px) {
    /* Better focus states for keyboard navigation */
    :focus-visible {
        outline: 3px solid #009FE3 !important;
        outline-offset: 3px !important;
        border-radius: 4px;
    }
    
    /* Skip to content link */
    .skip-to-content {
        position: absolute;
        top: -40px;
        left: 0;
        background: #009FE3;
        color: white;
        padding: 0.5rem 1rem;
        text-decoration: none;
        z-index: 10000;
    }
    
    .skip-to-content:focus {
        top: 0;
    }
}

/* ========================================
   LANDSCAPE MODE OPTIMIZATIONS
   ======================================== */

@media (max-width: 1024px) and (orientation: landscape) {
    /* Reduce hero height in landscape */
    .hero-standard {
        min-height: 70vh !important;
    }
    
    /* Adjust mobile menu height */
    .mobile-menu-scroll {
        max-height: calc(100vh - 50px) !important;
    }
}

/* ========================================
   IPAD SPECIFIC (768px - 1024px)
   ======================================== */

@media (min-width: 768px) and (max-width: 1024px) {
    /* iPad - 2 columns for most grids */
    .grid.grid-cols-3,
    .grid.grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Service cards - maintain hover effects */
    .service-card:hover {
        transform: translateY(-4px) !important;
    }
    
    /* Typography - slightly larger than phone */
    h1 {
        font-size: 2.5rem !important;
    }
    
    h2 {
        font-size: 2rem !important;
    }
}

/* ========================================
   SMALL PHONES (<375px)
   ======================================== */

@media (max-width: 374px) {
    /* Logo even smaller */
    .site-logo .cyclefix-logo-cycle,
    .site-logo .cyclefix-logo-fix {
        font-size: 1rem !important;
    }
    
    /* Buttons - adjust padding */
    .nav-phone-pill,
    .nav-book-pill {
        padding: 0.5rem 0.75rem !important;
        font-size: 8px !important;
    }
    
    /* Hero */
    .hero-standard h1 {
        font-size: 1.5rem !important;
    }
    
    /* Stats */
    .stat-box-home {
        padding: 0.5rem 0.75rem !important;
    }
}

/* ========================================
   DARK MODE SUPPORT (if enabled)
   ======================================== */

@media (prefers-color-scheme: dark) and (max-width: 1024px) {
    /* Adjust for better readability in dark mode */
    .mobile-menu-panel {
        background: #1a1a1a !important;
        color: #f5f5f5 !important;
    }
    
    .mobile-menu-panel a {
        color: #f5f5f5 !important;
    }
}

/* ========================================
   PRINT STYLES (bonus for invoices/bookings)
   ======================================== */

@media print {
    /* Hide non-essential elements */
    header, footer, .mobile-floating-cta, .mobile-menu-panel, nav {
        display: none !important;
    }
    
    /* Optimize for print */
    * {
        background: white !important;
        color: black !important;
    }
}