/**
 * Mobile SEO Fixes — v1.0.0
 * Fixes: tap targets, font sizes, table overflow, CLS, sticky CTA
 * Google Mobile-First Indexing compliance
 */

/* ═══════════════════════════════════════
   FIX 1: Tap Targets — minimum 48px
   ═══════════════════════════════════════ */
@media (max-width: 992px) {
    .ts-dark-toggle {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    .ts-mobile-toggle {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    .ts-share-btn,
    .ts-print-btn {
        min-height: 44px;
        min-width: 44px;
        padding: 10px;
    }

    /* Menu links padding */
    .ts-nav-primary .ts-menu a {
        padding: 12px 16px;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .ts-dark-toggle {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    .ts-mobile-toggle {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 8px;
    }
}

/* ═══════════════════════════════════════
   FIX 2: Font Sizes — minimum 12px
   ═══════════════════════════════════════ */
.ts-blog-card-cat,
.ts-blog-related-card-cat {
    font-size: 0.75rem; /* 12px instead of 0.68rem (10.88px) */
}

.ts-crit-weight {
    font-size: 11px; /* was 10px */
}

/* ═══════════════════════════════════════
   FIX 3: Tables — no horizontal overflow
   ═══════════════════════════════════════ */
@media (max-width: 768px) {
    .ts-table-responsive .ts-table {
        min-width: auto;
    }

    /* Stack table cells on very small screens */
    .ts-table th,
    .ts-table td {
        padding: 8px 10px;
        word-break: break-word;
    }

    /* Comparison table mobile */
    .ts-compare-table th:not(:first-child),
    .ts-compare-table td:not(:first-child) {
        width: auto;
        min-width: 100px;
    }

    /* Match table */
    .ts-match-table td,
    .ts-match-table th {
        width: auto;
    }
}

/* Blog post content tables */
.ts-blog-content table,
.entry-content table,
.ts-post-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* ═══════════════════════════════════════
   FIX 4: Prevent horizontal overflow
   ═══════════════════════════════════════ */
html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Pre and code blocks */
@media (max-width: 768px) {
    pre, code {
        word-break: break-all;
        white-space: pre-wrap;
    }

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

/* ═══════════════════════════════════════
   FIX 5: Sticky CTA — body padding
   ═══════════════════════════════════════ */
@media (max-width: 768px) {
    .ts-sticky-active body,
    body:has(.ts-sticky-cta) {
        padding-bottom: 72px; /* height of sticky CTA bar */
    }
}

/* ═══════════════════════════════════════
   FIX 6: Mobile menu max-height
   ═══════════════════════════════════════ */
@media (max-width: 992px) {
    .ts-nav-primary {
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ═══════════════════════════════════════
   FIX 7: CLS prevention
   ═══════════════════════════════════════ */
.ts-logo-img,
.ts-logo img {
    width: auto;
    aspect-ratio: attr(width) / attr(height);
}

/* Score circle — explicit dimensions */
.ts-score-circle {
    min-width: 80px;
    min-height: 80px;
}

/* Provider logo — explicit dimensions */
.ts-provider-logo img {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

/* ═══════════════════════════════════════
   FIX 8: Hero section mobile padding
   ═══════════════════════════════════════ */
@media (max-width: 768px) {
    .ts-hero {
        min-height: 400px;
        padding: 48px 16px;
    }

    .ts-hero h1 {
        font-size: 1.75rem;
        line-height: 1.2;
    }
}

@media (max-width: 480px) {
    .ts-hero {
        min-height: 360px;
        padding: 32px 16px;
    }

    .ts-hero h1 {
        font-size: 1.5rem;
    }
}

/* ═══════════════════════════════════════
   FIX 9: Compare header mobile
   ═══════════════════════════════════════ */
@media (max-width: 768px) {
    .ts-compare-header {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
        text-align: center;
    }
}

/* ═══════════════════════════════════════
   FIX 10: Provider summary card mobile
   ═══════════════════════════════════════ */
@media (max-width: 768px) {
    .ts-provider-summary {
        flex-direction: column;
        text-align: center;
    }

    .ts-provider-actions {
        flex-direction: column;
        width: 100%;
    }

    .ts-provider-actions .ts-btn {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }
}