/*!
* Saransh Dainik — Viewport Overflow Final Fix
* ---------------------------------------------------------------------------
* ROOT CAUSE:
* Raw advertisement creatives injected into the theme's ad slots were
* unconstrained. Example: the sidebar slot (`_ad_spaces.php`,
* ad_code_300) contained a plain ![]()
with a 700px intrinsic width and NO
* width/height attributes or CSS, so it rendered at 700px inside the ~360px
* sidebar and pushed document.documentElement.scrollWidth past the viewport
* on desktop AND on mobile (stacked full-width) — measured 1570px @1366,
* 700px @414/375.
*
* FIX:
* Every theme ad slot and its children (img / iframe / object / embed /
* AdSense) are now constrained to 100% of their column. The theme's own
* `body { overflow-x: hidden !important }` is LEFT UNTOUCHED — nothing is
* being masked; the page genuinely fits after this fix.
* ---------------------------------------------------------------------------
*/
/* ---- 1. Ad slots: never wider than their column -------------------------- */
.bn-lg,
.bn-md,
.bn-sm,
.bn-lg-sidebar,
.bn-sm-sidebar,
.bn-lg .row,
.bn-md .row,
.bn-sm .row,
.bn-lg-sidebar .row,
.bn-sm-sidebar .row {
min-width: 0;
width: 100%;
max-width: 100%;
}
/* raw image creatives (no width/height attributes in the stored ad HTML) */
.bn-lg img,
.bn-md img,
.bn-sm img,
.bn-lg-sidebar img,
.bn-sm-sidebar img {
display: block;
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
/* iframe / object / embed / AdSense creatives */
.bn-lg iframe,
.bn-md iframe,
.bn-sm iframe,
.bn-lg-sidebar iframe,
.bn-sm-sidebar iframe,
.bn-lg object,
.bn-md object,
.bn-sm object,
.bn-lg-sidebar object,
.bn-sm-sidebar object,
.bn-lg embed,
.bn-md embed,
.bn-sm embed,
.bn-lg-sidebar embed,
.bn-sm-sidebar embed {
max-width: 100%;
}
.bn-lg .adsbygoogle,
.bn-md .adsbygoogle,
.bn-sm .adsbygoogle,
.bn-lg-sidebar .adsbygoogle,
.bn-sm-sidebar .adsbygoogle {
max-width: 100%;
overflow: hidden;
}
/* ---- 2. Base image safety ------------------------------------------------
* Low specificity (element only). The theme's object-fit:cover components
* (.img-slider, .img-external, ...) use higher-specificity selectors, so they
* are NOT affected. Only un-styled raw images (like ad creatives) are capped.
* -------------------------------------------------------------------------- */
img {
max-width: 100%;
height: auto;
}
/* ---- 3. Homepage columns: allow children to shrink below intrinsic width --
* Bootstrap 3 uses floats (not flex), so this is a safety net; it cannot hurt.
* -------------------------------------------------------------------------- */
#main .content,
#main .sidebar {
min-width: 0;
}
/* ---- 4. Article body tables / embeds: keep overflow inside the content ----
* Tables get an internal horizontal scroll instead of widening the page.
* -------------------------------------------------------------------------- */
.post-content .post-text table {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* =========================================================================
* HERO / FEATURED-NEWS WIDTH FIX (homepage `#slider` — scoped, no global
* `.container` changes).
*
* ROOT CAUSE: the homepage hero (`partials/_slider.php` inside ``) was wrapped in `.container-fluid`, so it ran edge-to-edge
* (0 → 1351 @1366) while the rest of the page uses Bootstrap `.container`
* (1170px at ≥1201; the theme forces `.container { width:100% }` at ≤1200).
* The 3 hero cards also touched the viewport edges and looked wider than the
* main content system.
*
* FIX: reuse the SAME container width as #main / header / breaking ticker,
* give the cards a fixed height (STEP 7), and add balanced 12px gutters.
* The theme's slick JS already switches 3→2→1 columns at 1200 / 768 and is
* left untouched.
* ========================================================================= */
/* 1. Center the hero and cap it to the same width as .container
* (1170px at ≥1201; 100% at ≤1200 to mirror the theme's override). */
#slider > .container-fluid {
max-width: 1170px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 1200px) {
#slider > .container-fluid { max-width: 100%; }
}
/* 2. Hero media canvas — genuine 16:9 so video/YouTube thumbnails are not
* cropped into the previous ultra-wide (≈3.9:1) strip. The 16:9 canvas
* matches video-thumbnail source proportions: true 16:9 thumbs show
* uncropped; local 650×433 stills are only minimally cropped. */
#slider .home-slider-fixer {
aspect-ratio: 16 / 9;
}
#slider .home-slider-fixer .col-sl,
#slider .home-slider-fixer .col-sl img {
height: 100%;
}
#slider .home-slider .home-slider-item {
aspect-ratio: 16 / 9;
}
#slider .home-slider-fixer .col-sl img {
width: 100%;
object-fit: cover;
}
/* 3. Card safety (STEP 5): never wider than the container, always shrinkable. */
#slider .home-slider-item {
width: 100%;
max-width: 100%;
min-width: 0;
}
/* 4. Balanced 12px gutters between the cards (slick-safe: padding on the
* slides + compensating negative margin on the track). */
#slider .home-slider .slick-slide {
padding-left: 6px;
padding-right: 6px;
}
#slider .home-slider .slick-track {
margin-left: -6px;
margin-right: -6px;
}
/* 4b. Make the media container fill the 16:9 canvas. The absolutely-positioned
* thumbnail resolves against `.external-image-container`; if that wrapper
* keeps its auto height (driven by the tiny "fixer" png) the thumbnail is
* capped at `max-height:120%` of ~433px and leaves an empty band below the
* image inside the 658px hero. Filling the wrapper fixes video-thumbnail
* placement so `object-fit: cover` crops only the natural amount. */
#slider .home-slider-item > a {
display: block;
width: 100%;
height: 100%;
}
#slider .home-slider-item .external-image-container {
width: 100%;
height: 100%;
}
/* 5. Responsive fallbacks — the visible desktop hero (≥992px) uses the 16:9
* canvas above. The ≤991px rules only touch the desktop hero, which is
* hidden on mobile (kept for any partial-width desktop rendering). */
@media (max-width: 991px) {
#slider .home-slider-fixer .col-sl,
#slider .home-slider-fixer .col-sl img,
#slider .home-slider .home-slider-item { height: 260px; }
}
@media (max-width: 767px) {
#slider .home-slider-fixer .col-sl,
#slider .home-slider-fixer .col-sl img,
#slider .home-slider .home-slider-item { height: 240px; }
#slider .home-slider .slick-slide { padding-left: 0; padding-right: 0; }
#slider .home-slider .slick-track { margin-left: 0; margin-right: 0; }
/* Single mobile hero card sits inside the same 15px side padding as the
* main content (remove the row's negative margins on the homepage hero). */
#slider > .container-fluid > .row { margin-left: 0; margin-right: 0; }
}