/*
 * Sky Content Vault Connector 0.1.2
 * Mobile Responsive Hotfix for single Sky Feed Post pages.
 *
 * Scope is intentionally limited to the configured Feed Post singular page.
 */

/* Prevent the page itself from becoming wider than the viewport. */
html.scv-feed-mobile-fix,
html.scv-feed-mobile-fix body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* GeneratePress + common WordPress content wrappers. */
body.scv-feed-mobile-fix .site,
body.scv-feed-mobile-fix #page,
body.scv-feed-mobile-fix .site-content,
body.scv-feed-mobile-fix #primary,
body.scv-feed-mobile-fix .content-area,
body.scv-feed-mobile-fix #main,
body.scv-feed-mobile-fix .site-main,
body.scv-feed-mobile-fix article,
body.scv-feed-mobile-fix .inside-article,
body.scv-feed-mobile-fix .entry-content,
body.scv-feed-mobile-fix .entry-header,
body.scv-feed-mobile-fix .entry-summary {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/*
 * This is the key overflow guard.
 * Fixed desktop widths inside the single product content can no longer
 * exceed the available parent width.
 */
body.scv-feed-mobile-fix .inside-article *,
body.scv-feed-mobile-fix .entry-content * {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

/* Responsive images/media. */
body.scv-feed-mobile-fix .entry-content img,
body.scv-feed-mobile-fix .inside-article img,
body.scv-feed-mobile-fix .entry-content video,
body.scv-feed-mobile-fix .entry-content iframe,
body.scv-feed-mobile-fix .entry-content canvas,
body.scv-feed-mobile-fix .entry-content svg {
    max-width: 100% !important;
}

body.scv-feed-mobile-fix .entry-content img,
body.scv-feed-mobile-fix .inside-article img,
body.scv-feed-mobile-fix .entry-content video {
    height: auto !important;
    object-fit: contain;
}

/* Long Thai/English titles and imported captions must wrap. */
body.scv-feed-mobile-fix .entry-title,
body.scv-feed-mobile-fix .entry-content h1,
body.scv-feed-mobile-fix .entry-content h2,
body.scv-feed-mobile-fix .entry-content h3,
body.scv-feed-mobile-fix .entry-content h4,
body.scv-feed-mobile-fix .entry-content p,
body.scv-feed-mobile-fix .entry-content li,
body.scv-feed-mobile-fix .entry-content div,
body.scv-feed-mobile-fix .entry-content span,
body.scv-feed-mobile-fix .entry-content pre {
    overflow-wrap: anywhere;
    word-wrap: break-word;
    word-break: normal;
}

/* Facebook captions sometimes preserve line formatting. */
body.scv-feed-mobile-fix .entry-content pre,
body.scv-feed-mobile-fix .entry-content code {
    white-space: pre-wrap !important;
}

/* Tables never force the whole page wider. */
body.scv-feed-mobile-fix .entry-content table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed;
}
body.scv-feed-mobile-fix .entry-content td,
body.scv-feed-mobile-fix .entry-content th {
    overflow-wrap: anywhere;
}

/* Common gallery/product wrappers used by Sky Commerce and WP themes. */
body.scv-feed-mobile-fix [class*="product-gallery"],
body.scv-feed-mobile-fix [class*="gallery-wrap"],
body.scv-feed-mobile-fix [class*="gallery-container"],
body.scv-feed-mobile-fix [class*="feed-gallery"],
body.scv-feed-mobile-fix [class*="product-images"],
body.scv-feed-mobile-fix [class*="product-detail"],
body.scv-feed-mobile-fix [class*="feed-detail"],
body.scv-feed-mobile-fix [class*="feed-content"],
body.scv-feed-mobile-fix [class*="commerce-detail"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Allow thumbnail rows to scroll INSIDE themselves rather than widening the page. */
body.scv-feed-mobile-fix [class*="thumbs"],
body.scv-feed-mobile-fix [class*="thumbnails"] {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* Mobile typography and spacing. */
@media (max-width: 768px) {
    body.scv-feed-mobile-fix .site-content,
    body.scv-feed-mobile-fix #primary,
    body.scv-feed-mobile-fix .content-area {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    body.scv-feed-mobile-fix .inside-article {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body.scv-feed-mobile-fix .entry-title {
        font-size: clamp(24px, 7vw, 32px) !important;
        line-height: 1.25 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.scv-feed-mobile-fix .entry-content {
        font-size: 16px !important;
        line-height: 1.65 !important;
    }

    body.scv-feed-mobile-fix .entry-content p,
    body.scv-feed-mobile-fix .entry-content li,
    body.scv-feed-mobile-fix .entry-content div:not([class*="badge"]):not([class*="button"]) {
        font-size: inherit;
        line-height: inherit;
    }

    body.scv-feed-mobile-fix .entry-content h2 {
        font-size: 23px !important;
        line-height: 1.3 !important;
    }

    body.scv-feed-mobile-fix .entry-content h3 {
        font-size: 20px !important;
        line-height: 1.35 !important;
    }

    /* If imported markup contains fixed inline widths, max-width still wins. */
    body.scv-feed-mobile-fix .entry-content [style*="width"],
    body.scv-feed-mobile-fix .inside-article [style*="width"] {
        max-width: 100% !important;
    }
}

/* Very narrow devices. */
@media (max-width: 420px) {
    body.scv-feed-mobile-fix .site-content,
    body.scv-feed-mobile-fix #primary,
    body.scv-feed-mobile-fix .content-area {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    body.scv-feed-mobile-fix .inside-article {
        padding: 12px 8px !important;
    }

    body.scv-feed-mobile-fix .entry-title {
        font-size: 25px !important;
    }

    body.scv-feed-mobile-fix .entry-content {
        font-size: 16px !important;
    }
}