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

/* Global Mobile Overflow Fix */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

@media (max-width: 768px) {
    * {
        max-width: 100%;
    }

    .container {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
        overflow-x: hidden;
    }

    /* Prevent any element from causing horizontal scroll */
    img, video, iframe, embed, object {
        max-width: 100%;
        height: auto;
    }

    /* Fix sections that might overflow */
    section,
    .site-main,
    .content-area,
    .entry-content {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* Grid layouts - ensure they don't overflow */
    .services-grid,
    .brands-grid,
    .error-codes-grid,
    .posts-grid {
        overflow-x: hidden;
    }

    /* Cards - ensure proper sizing */
    .service-card,
    .brand-card,
    .error-code-card,
    .post-card {
        max-width: 100%;
        min-width: 0;
    }

    /* Text overflow handling */
    h1, h2, h3, h4, h5, h6,
    .hero-title,
    .section-title,
    .page-title {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: none;
    }

    /* Hero section mobile fix */
    .brand-hero,
    .hero {
        overflow-x: hidden;
    }

    .hero-title {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
    }

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

    /* CTA buttons stack on mobile */
    .hero-cta {
        flex-direction: column;
        gap: var(--space-3);
    }

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

    /* Trust items wrap properly */
    .hero-trust {
        flex-direction: column;
        gap: var(--space-2);
    }
}

/* =========================================================================
   MOBILE REDUCED PADDING & SPACING
   ========================================================================= */
@media (max-width: 639px) {
    /* Reduce section padding on mobile */
    section {
        padding: var(--space-8) 0;
    }

    .page-header {
        padding: var(--space-10) 0 var(--space-8);
    }

    .brand-hero {
        padding: var(--space-10) 0 var(--space-12);
        min-height: auto;
    }

    .content-area {
        padding: var(--space-8) 0;
    }

    .cta-section {
        padding: var(--space-10) 0;
    }

    .services-section,
    .trust,
    .brands,
    .error-codes-section,
    .brand-intro-section {
        padding: var(--space-8) 0;
    }

    .section-header {
        margin-bottom: var(--space-8);
    }

    .footer-top {
        padding: var(--space-10) 0;
    }
}

/* =========================================================================
   MOBILE TOUCH OPTIMIZATIONS
   ========================================================================= */
@media (max-width: 768px) {
    /* Larger touch targets */
    .btn, button, a {
        min-height: 44px;
    }

    /* Better tap highlighting */
    a, button {
        -webkit-tap-highlight-color: rgba(249, 115, 22, 0.2);
    }

    /* Disable hover effects on touch */
    @media (hover: none) {
        .card:hover,
        .service-card:hover,
        .brand-card:hover {
            transform: none;
            box-shadow: none;
        }
    }
}

/* =========================================================================
   PRINT STYLES
   ========================================================================= */
@media print {
    .floating-cta,
    .fixed-cta-bar,
    .floating-whatsapp,
    .site-header,
    .site-footer,
    .mobile-menu {
        display: none !important;
    }

    body {
        padding: 0;
    }
}

/* =========================================================================
   PAGE HEADER MOBILE
   ========================================================================= */
@media (max-width: 768px) {
    .page-header {
        padding: 2rem 0 !important;
    }

    .page-title {
        font-size: 1.5rem !important;
        padding: 0 1rem;
    }

    .page-desc {
        font-size: 1rem !important;
        padding: 0 1rem;
    }

    .page-header .breadcrumb-list {
        padding: 0 1rem;
    }
}

/* =========================================================================
   ZONES ARCHIVE MOBILE
   ========================================================================= */
@media (max-width: 639px) {
    .zones-archive-section {
        padding: 2rem 0 !important;
    }

    .zones-grid-large {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        padding: 0 1rem;
    }

    .zone-card {
        padding: 1rem 1.25rem !important;
    }

    .zone-icon {
        width: 40px !important;
        height: 40px !important;
    }

    .zone-icon svg {
        width: 20px !important;
        height: 20px !important;
    }

    .zone-name {
        font-size: 0.9375rem !important;
    }

    .zone-arrow {
        width: 28px !important;
        height: 28px !important;
    }
}

/* =========================================================================
   BRANDS ARCHIVE MOBILE
   ========================================================================= */
@media (max-width: 639px) {
    .brands-archive-section {
        padding: 2rem 0 !important;
    }

    .brands-grid-large {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
        padding: 0 1rem;
    }

    .brands-grid-large .brand-card {
        padding: 1rem !important;
        min-height: 100px !important;
    }

    .brands-grid-large .brand-logo {
        height: 50px !important;
    }

    .brands-grid-large .brand-logo img {
        max-height: 40px !important;
        max-width: 80px !important;
    }
}

/* =========================================================================
   PARMACALOR CTA BOX MOBILE
   ========================================================================= */
@media (max-width: 639px) {
    .parmacalor-cta-box,
    p.parmacalor-cta-box {
        padding: 1.25rem !important;
        margin: 1.5rem 0 !important;
        font-size: 0.9375rem !important;
    }

    .parmacalor-cta-box strong,
    p.parmacalor-cta-box strong {
        font-size: 1.125rem !important;
    }

    .cta-box-blue {
        padding: 1.25rem !important;
        margin: 1.5rem 0 !important;
    }

    .cta-box-blue h3 {
        font-size: 1.25rem !important;
    }
}