/* ============================================
   IQ Limousine - Responsive Styles
   Mobile-First Design
   ============================================ */

/* ============= Mobile Menu Styles ============= */
/* Header Layout for Mobile */
.nav {
    justify-content: space-between;
    padding: 15px 0;
}

.logo-link {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    order: 2;
}

.nav-right {
    order: 3;
    display: flex;
    /* Ensure button and toggle are visible */
    gap: 15px;
}

.mobile-menu-toggle {
    order: 1;
    /* Move toggle to left */
    margin-right: auto;
    /* Push others to right if needed, but absolute logo handles center */
    display: flex;
    z-index: 1001;
    position: relative;
    /* Ensure it stays in flow or absolute if needed */
    margin-left: 0;
}

/* Adjust Book Now button for mobile header */
.nav-right .btn-primary {
    display: flex !important;
    /* Force show on mobile */
    padding: 8px 16px;
    font-size: 12px;
    height: 36px;
}

/* Hide the desktop-only class restriction for the header button on mobile */
.desktop-only {
    display: flex !important;
}

.nav-menu {
    position: fixed;
    top: 0;
    left: -100%;
    /* Change to left side per standard drawer or keep right? User asked for menu toggle on left, usually implies drawer on left or just toggle. keeping right drawer for now unless asked */
    right: auto;
    width: 300px;
    height: 100vh;
    background: rgba(10, 10, 10, 0.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    padding: 80px 30px 30px;
    gap: var(--spacing-md);
    transition: left var(--transition-base);
    /* Animate from left if we move it */
    z-index: 999;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-left: none;
    overflow-y: auto;
}

/* If toggle is on left, drawer should probably come from left */
.nav-menu {
    left: -100%;
    right: auto;
}

.nav-menu.active {
    left: 0;
    right: auto;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(7px, 7px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Overlay when menu is open */
body.menu-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 998;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* ============= Tablet (768px - 1024px) ============= */
@media (max-width: 1024px) {
    h1 {
        font-size: 40px;
    }

    h2 {
        font-size: 28px;
    }

    .section {
        padding: var(--spacing-2xl) 0;
    }

    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============= Mobile (< 768px) ============= */
@media (max-width: 768px) {
    :root {
        --spacing-xl: 32px;
        --spacing-2xl: 48px;
        --spacing-3xl: 64px;
    }

    /* Typography */
    h1 {
        font-size: 32px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 20px;
    }

    .hero-subtitle {
        font-size: var(--font-size-base);
    }

    /* Layout */
    .container {
        padding: 0 var(--spacing-sm);
    }

    .section {
        padding: var(--spacing-xl) 0;
    }

    /* Header */
    .logo {
        height: 55px;
    }

    .nav {
        padding: var(--spacing-xs) 0;
    }

    /* Hero */
    .hero {
        min-height: auto;
        padding: 100px var(--spacing-sm) var(--spacing-xl);
        background-position: center;
    }

    .hero-glass-card {
        padding: 24px;
        border-radius: 16px;
    }

    .hero h1 {
        font-size: 28px;
        line-height: 1.2;
    }

    .trust-indicators-row {
        gap: 12px;
        margin-top: var(--spacing-sm);
    }
    
    .trust-item {
        font-size: 13px;
    }

    .hero-cta {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .hero-cta .btn {
        width: 100%;
    }

    /* Feature Pills Mobile Stacking */
    .hero-features-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        padding-top: var(--spacing-md);
    }

    .feature-pill {
        justify-content: flex-start;
        padding: 12px;
    }

    .feature-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    /* Booking Form */


    .form-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    /* Cards */
    .card-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .card {
        padding: var(--spacing-md);
    }

    .card-icon {
        width: 56px;
        height: 56px;
        font-size: 28px;
    }

    /* Fleet Carousel */
    .fleet-card {
        min-width: 250px;
    }

    .fleet-image {
        height: 180px;
    }

    /* Reviews */
    .reviews-grid {
        grid-template-columns: 1fr;
    }

    /* FAQ */
    .faq-question {
        padding: var(--spacing-sm);
        font-size: var(--font-size-sm);
    }

    .faq-answer-content {
        padding: 0 var(--spacing-sm) var(--spacing-sm);
        font-size: var(--font-size-sm);
    }

    /* Footer */
    .footer {
        padding: var(--spacing-xl) 0 var(--spacing-md);
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .footer-logo {
        height: 50px;
    }

    /* Buttons */
    .btn {
        padding: 12px 24px;
        font-size: var(--font-size-sm);
    }

    /* Location Tags */
    .location-tags {
        gap: var(--spacing-xs) !important;
    }

    .location-tag {
        font-size: 13px !important;
        padding: 6px 16px !important;
    }
}

/* ============= Small Mobile (< 480px) ============= */
@media (max-width: 480px) {
    h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 20px;
    }

    .hero h1 {
        font-size: 24px;
    }

    .btn {
        padding: 10px 20px;
        font-size: 13px;
    }

    .card-icon {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }

    .fleet-card {
        min-width: 220px;
    }

    .nav-menu {
        width: 100%;
        right: -100%;
    }

    .booking-form {
        padding: var(--spacing-sm);
    }
}

/* ============= Landscape Mobile ============= */
@media (max-height: 600px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: 120px 0 var(--spacing-md);
    }

    .booking-form {
        margin-top: var(--spacing-md);
    }
}

/* ============= Touch Device Optimizations ============= */
@media (hover: none) and (pointer: coarse) {

    /* Increase tap targets */
    .btn,
    .nav-link,
    .faq-question {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .form-input,
    .form-select {
        min-height: 48px;
        font-size: 16px;
        /* Prevents zoom on iOS */
    }

    /* Remove hover effects on touch devices */
    .card:hover,
    .fleet-card:hover {
        transform: none;
    }

    /* Add tap feedback */
    .card:active,
    .btn:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
}

/* ============= Accessibility ============= */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============= High Contrast Mode ============= */
@media (prefers-contrast: high) {

    .card,
    .booking-form,
    .footer {
        border: 2px solid var(--color-white);
    }

    .btn-primary {
        border: 2px solid var(--color-bg-primary);
    }
}

/* ============= Dark Mode (System Preference) ============= */
@media (prefers-color-scheme: light) {
    /* Site is already dark, but we can add overrides if needed */
    /* For now, keeping dark theme regardless of system preference */
}

/* ============= Print Styles ============= */
@media print {

    .header,
    .mobile-menu-toggle,
    .booking-form,
    .btn {
        display: none;
    }

    .section {
        page-break-inside: avoid;
    }

    body {
        background: white;
        color: black;
    }
}

/* ============= Services Page Mobile Responsive ============= */
@media (max-width: 768px) {
    .services-hero {
        min-height: auto;
        padding-top: 120px;
        padding-bottom: 60px;
    }

    .services-hero h1 {
        font-size: 32px;
    }

    .services-subtitle {
        font-size: 16px;
    }

    .services-hero-cta {
        flex-direction: column;
        width: 100%;
    }

    .services-hero-cta .btn {
        width: 100%;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .service-card {
        padding: var(--spacing-lg);
    }

    .booking-inline-form {
        grid-template-columns: 1fr;
    }

    .booking-inline-form .btn {
        width: 100%;
    }

    .location-tags {
        gap: 8px;
    }

    .location-tag {
        font-size: 12px;
        padding: 8px 12px;
    }

    .cta-buttons {
        flex-direction: column;
        width: 100%;
    }

    .cta-buttons .btn {
        width: 100%;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .footer-legal {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
}