/**
 * Mobile Overflow & Typography Fixes
 * SideBizStarter theme
 * Applied: 2026-04-02 (audit issues from 2026-03-22)
 *
 * Fixes:
 * - CRITICAL: Horizontal overflow on homepage and articles on mobile
 * - H1 in articles was 56px (should be ~28-32px max on mobile)
 * - Paragraph font was 14.4px (should be 16px min for readability)
 * - Lazy loading / missing images on homepage
 */

/* ===== Global overflow prevention ===== */
html, body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Fix: .single-hero uses width:100vw which overflows by scrollbar width */
.single-hero {
    width: 100% !important;
    margin-left: 0 !important;
}

/* ===== Mobile-specific fixes ===== */
@media (max-width: 768px) {

    /* Prevent any element from causing horizontal scroll */
    body {
        overflow-x: hidden;
        width: 100%;
    }

    /* Images, media, embeds */
    img, video, iframe, embed, object, svg {
        max-width: 100%;
        height: auto;
    }

    /* Tables: make scrollable instead of overflowing */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    .wp-block-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Code blocks */
    pre, code {
        overflow-x: auto;
        word-break: break-word;
        white-space: pre-wrap;
        max-width: 100%;
    }

    /* WordPress blocks */
    .wp-block-image img,
    .wp-block-cover img,
    .wp-block-media-text img {
        max-width: 100%;
        height: auto;
    }

    .wp-block-columns {
        flex-wrap: wrap;
    }

    /* Ensure the main content area doesn't overflow */
    .container,
    .site-main,
    .entry-content,
    .sbs-article-content {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* ===== Typography Fixes ===== */

    /* H1 was 56px — way too big for mobile; cap at 28px */
    h1,
    .entry-title,
    .sbs-article-title,
    .wp-block-post-title {
        font-size: 28px !important;
        line-height: 1.2 !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Scale down other headings proportionally */
    h2 {
        font-size: 22px !important;
        line-height: 1.25 !important;
    }

    h3 {
        font-size: 19px !important;
        line-height: 1.3 !important;
    }

    /* Body text was 14.4px — below WCAG recommendation; set to 16px */
    body,
    p,
    .entry-content,
    .entry-content p,
    .sbs-article-content,
    .sbs-article-content p {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    /* Ensure list items also get proper sizing */
    li, dd, dt {
        font-size: 16px !important;
    }
}

/* ===== Lazy Loading / Image Visibility Fix ===== */
/*
 * If images on homepage are missing due to aggressive lazy loading,
 * ensure they have dimensions and are not hidden by default.
 */
img[loading="lazy"] {
    min-height: 1px;
}

/* Ensure homepage sections with background images render */
.sbs-hero img,
.sbs-featured img,
[class*="sbs-section"] img {
    opacity: 1 !important;
    visibility: visible !important;
}