/* Additional Mobile Overflow Fixes */

/* Prevent all tables from overflowing */
@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
        max-width: 100%;
    }

    table td,
    table th {
        white-space: normal !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
        min-width: 80px;
    }

    /* Fix for pre and code blocks */
    pre,
    code {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: pre-wrap;
    }

    /* Fix for images */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Fix for iframes and embeds */
    iframe,
    embed,
    object {
        max-width: 100% !important;
    }

    /* Fix for forms and inputs */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    textarea,
    select {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    /* Fix for buttons */
    button,
    .btn {
        max-width: 100%;
        white-space: normal;
        word-wrap: break-word;
    }

    /* Fix for long URLs and emails */
    a {
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* Fix for divs with specific classes that might overflow */
    .content,
    .main-content,
    .article,
    .post {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Fix for Bootstrap containers if present */
    .container-fluid,
    .row {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Fix for any fixed width elements */
    [style*="width"] {
        max-width: 100% !important;
    }

    /* Ensure all sections don't overflow */
    section,
    article,
    aside,
    main {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Fix for lists */
    ul,
    ol {
        padding-left: 1.5rem;
        max-width: 100%;
    }

    /* Fix for blockquotes */
    blockquote {
        max-width: 100%;
        padding: 1rem;
        margin: 1rem 0;
        overflow-x: hidden;
    }

    /* Fix for headers that might be too long */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* Fix for cards and panels */
    .card,
    .panel,
    .box {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Fix for any absolute positioned elements */
    [style*="position: absolute"] {
        max-width: 100%;
    }

    /* ========================================
       COMPREHENSIVE MOBILE FONT & SPACING OPTIMIZATION
       Applied to ALL pages for better readability
       ======================================== */

    /* Reduce container padding to minimize empty space */
    .container {
        width: 100%;
        max-width: 100%;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Optimize heading sizes for mobile */
    h1 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
    }

    h2 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.875rem !important;
        margin-top: 1.5rem !important;
    }

    h3 {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.75rem !important;
        margin-top: 1.25rem !important;
    }

    h4 {
        font-size: 1.1rem !important;
        line-height: 1.3 !important;
    }

    h5 {
        font-size: 1rem !important;
    }

    h6 {
        font-size: 0.95rem !important;
    }

    /* Optimize paragraph and body text */
    body {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }

    p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1rem !important;
    }

    /* Optimize list text */
    li {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        margin-bottom: 0.5rem !important;
    }

    /* Reduce section padding */
    .section,
    section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* Optimize card and content box padding */
    .card,
    .tool-card,
    .content-section,
    .blog-card,
    .contact-card {
        padding: 1.25rem !important;
        margin-bottom: 1rem !important;
    }

    /* Optimize hero sections */
    .hero,
    .article-header,
    .blog-header,
    .contact-header,
    .about-header,
    .disclaimer-header,
    .policy-header,
    .terms-header,
    .cookie-header {
        padding: 2.5rem 0 2rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* Optimize button sizes */
    .btn,
    button {
        font-size: 0.9rem !important;
        padding: 0.625rem 1.25rem !important;
    }

    /* Optimize form elements */
    input,
    textarea,
    select {
        font-size: 0.95rem !important;
        padding: 0.625rem !important;
    }

    label {
        font-size: 0.9rem !important;
    }

    /* Reduce grid gaps */
    .grid {
        gap: 1rem !important;
    }

    /* Optimize footer */
    .footer {
        padding: 2rem 0 1rem !important;
        font-size: 0.9rem !important;
    }

    .footer h4 {
        font-size: 1rem !important;
        margin-bottom: 0.75rem !important;
    }

    .footer p,
    .footer li,
    .footer a {
        font-size: 0.875rem !important;
    }

    /* Optimize navigation */
    .nav-links a {
        font-size: 0.95rem !important;
    }

    /* Content containers - maximize width */
    .content-container,
    .article-content,
    [style*="max-width: 900px"],
    [style*="max-width: 1200px"] {
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Tool cards and similar */
    .tool-card h3 {
        font-size: 1.1rem !important;
    }

    .tool-card p {
        font-size: 0.9rem !important;
    }

    /* Table optimization */
    table {
        font-size: 0.875rem !important;
    }

    th,
    td {
        padding: 0.5rem !important;
        font-size: 0.875rem !important;
    }

    /* FAQ sections */
    .faq-item,
    .faq-section {
        padding: 1rem !important;
        font-size: 0.9rem !important;
    }

    /* Highlight boxes and callouts */
    .highlight-box,
    .step-box,
    .info-box,
    .warning-box {
        padding: 1rem !important;
        margin: 1rem 0 !important;
        font-size: 0.9rem !important;
    }

    /* Search bars and inputs */
    .search-bar input {
        font-size: 0.95rem !important;
        padding: 0.75rem 1rem !important;
    }

    /* Breadcrumbs and meta info */
    .breadcrumb,
    .meta,
    .article-meta,
    .blog-meta {
        font-size: 0.85rem !important;
    }

    /* Tags and badges */
    .tag,
    .badge,
    .category,
    .tool-category,
    .blog-category {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.625rem !important;
    }

    /* Reduce vertical spacing */
    .mb-5,
    .my-5,
    .mt-5,
    .pb-5,
    .py-5,
    .pt-5 {
        margin-bottom: 2rem !important;
        margin-top: 2rem !important;
        padding-bottom: 2rem !important;
        padding-top: 2rem !important;
    }

    .mb-4,
    .my-4,
    .mt-4,
    .pb-4,
    .py-4,
    .pt-4 {
        margin-bottom: 1.5rem !important;
        margin-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
        padding-top: 1.5rem !important;
    }

    .mb-3,
    .my-3,
    .mt-3,
    .pb-3,
    .py-3,
    .pt-3 {
        margin-bottom: 1rem !important;
        margin-top: 1rem !important;
        padding-bottom: 1rem !important;
        padding-top: 1rem !important;
    }

    /* Logo size */
    .logo {
        font-size: 1.25rem !important;
    }

    /* Specific page optimizations */

    /* Calculator pages */
    .calculator-container,
    .tool-container {
        padding: 1rem !important;
    }

    .calculator-result,
    .result-box {
        padding: 1rem !important;
        font-size: 0.95rem !important;
    }

    /* Blog listing */
    .blog-grid {
        gap: 1.25rem !important;
    }

    /* Back links */
    .back-to-blog,
    .back-link {
        font-size: 0.9rem !important;
        margin-bottom: 1rem !important;
    }
}

/* Extra small devices - further optimization */
@media (max-width: 480px) {
    h1 {
        font-size: 1.5rem !important;
    }

    h2 {
        font-size: 1.35rem !important;
    }

    h3 {
        font-size: 1.15rem !important;
    }

    body,
    p,
    li {
        font-size: 0.925rem !important;
    }

    .container {
        padding-left: 0.625rem !important;
        padding-right: 0.625rem !important;
    }

    .card,
    .content-section,
    .article-content {
        padding: 1rem !important;
    }
}