/*
 * Newspaper Theme – Mobile Responsiveness Fix
 * Version: 1.0.0
 * Compatible with: Newspaper v12.6.4 (tagDiv)
 * -----------------------------------------------
 * Drop this file into your Newspaper theme root folder
 * and enqueue it in functions.php (see bottom of file).
 * -----------------------------------------------
 * Fixes covered:
 *   1. Prevent horizontal page overflow (html/body)
 *   2. Container max-width safety net
 *   3. Post-content tables → horizontal scroll on mobile
 *   4. iframe / embed responsive sizing
 *   5. Widget images and ad units — contained width
 *   6. Logo area — extra scaling for very small screens (≤400px)
 *   7. WooCommerce tables — horizontal scroll on mobile
 *   8. Search / default page wrap — full width on phone
 *   9. Post single content — prevent wide code blocks from overflowing
 *  10. Sidebar widgets — break long URLs on mobile
 */

/* ==========================================================================
   1. Prevent Horizontal Overflow – Global
   ========================================================================== */
html {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

body {
    overflow-x: hidden;
}

/* ==========================================================================
   2. Container Safety Net – enforces max-width on all screen sizes
   ========================================================================== */
.td-container,
.tdc-row,
.tdc-row-composer {
    max-width: 100%;
    box-sizing: border-box;
}

/* ==========================================================================
   3. Responsive Tables – inside post/page content
   ========================================================================== */
.tagdiv-type table,
.td-post-content table,
.td-page-content table,
.entry-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    border-collapse: collapse;
}

/* ==========================================================================
   4. Responsive iframes / Embeds
   ========================================================================== */
.tagdiv-type iframe:not(.instagram-media),
.tagdiv-type embed,
.tagdiv-type object,
.td-post-content iframe:not(.instagram-media),
.td-post-content embed,
.td-post-content object {
    max-width: 100% !important;
    width: 100% !important;
}

/* YouTube / video embed responsive wrapper */
.td-a-ad .td-ad-responsive,
.td-post-content .wp-block-embed__wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* ==========================================================================
   5. Widget Images & Ad Units – prevent overflow
   ========================================================================== */
.widget img,
.td_block_ad_box img,
.td-a-ad img,
.td-fix-index img {
    max-width: 100% !important;
    height: auto !important;
}

/* Google AdSense units */
ins.adsbygoogle {
    max-width: 100% !important;
}

/* ==========================================================================
   6. Logo – Extra Safety on Very Small Screens (≤ 400px)
   ========================================================================== */
@media (max-width: 400px) {
    .td-logo-text-container .td-logo-text {
        font-size: 26px !important;
    }
    .td-logo-text-container .td-tagline-text {
        font-size: 10px !important;
    }
    .td-header-style-1 .td-logo-text-wrap,
    .td-header-style-1 .td-logo-text-wrap a,
    .td-header-style-1 .td-logo-text-wrap .td-logo {
        min-height: 70px !important;
        line-height: 70px !important;
    }
}

/* ==========================================================================
   7. WooCommerce Tables – horizontal scroll on mobile
   ========================================================================== */
@media (max-width: 767px) {
    .woocommerce table.shop_table,
    .woocommerce table.my_account_orders,
    .woocommerce table.woocommerce-checkout-review-order-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ==========================================================================
   8. Search / Default Page – Full Width on Phone
   ========================================================================== */
@media (max-width: 767px) {
    .page-template-default .td-main-page-wrap,
    .search .td-main-page-wrap {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ==========================================================================
   9. Code Blocks / Pre – prevent horizontal page overflow on mobile
   ========================================================================== */
pre,
code {
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-width: 100%;
}

/* ==========================================================================
   10. Sidebar – Break Long URLs / Words in Widgets
   ========================================================================== */
.widget,
.widgettitle {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ==========================================================================
   How to load this file in WordPress
   ==========================================================================

   Option A – Child theme (recommended):
   Add to your child theme's functions.php:

   function newspaper_responsive_fix() {
       wp_enqueue_style(
           'newspaper-responsive-fix',
           get_template_directory_uri() . '/responsive-fix.css',
           array( 'newspaper-style' ),
           '1.0.0'
       );
   }
   add_action( 'wp_enqueue_scripts', 'newspaper_responsive_fix' );

   Option B – Direct @import in child theme's style.css:
   @import url("../newspaper/responsive-fix.css");

   Option C – WordPress Customizer > Additional CSS:
   Paste the CSS contents (without the HOW TO section) into WP Admin
   → Appearance → Customise → Additional CSS

   ========================================================================== */