/**
 * CLS (Cumulative Layout Shift) Fixes for mining.com.au
 *
 * This stylesheet reserves space for dynamically-loaded elements
 * to prevent layout shift when they render.
 *
 * Copy this file to:
 *   wp-content/themes/mining_new_theme/css/cwv-cls-fixes.css
 *
 * @package mining
 * @since 1.4.0
 */

/* =========================================================================
 * 1. AD SLOT RESERVATIONS
 * Advanced Ads and Google Ad Manager slots inject content without
 * reserved space, causing the entire page to reflow.
 * ========================================================================= */

/* --- Noframe ads (no background, collapse if unfilled) ---
 * These start at 0px height and cause layout shift when ads fill in.
 * Reserve min-height matching the tallest possible ad size (including
 * responsive sizes) so the container never grows when an ad loads.
 * When JS collapses unfilled ads (.mining-ad-noframe--collapsed),
 * opacity:0 preserves the reserved space — preventing CLS.
 */

/* Noframe ad min-height is set inline by ads.php based on each
 * placement's actual max ad size. CSS containment for performance. */
.mining-ad-noframe {
	contain: layout style;
}

/* Framed ads already have aspect-ratio via .mining-ad-tile / .mining-ad-square. */
.mining-ad-frame--green,
.mining-ad-frame--light {
	contain: layout style;
}

/* Collapsed noframe ads (JS determined no ad filled).
   Space is now preserved via opacity:0 in ads.css to prevent CLS.
   This rule intentionally removed — clearing min-height causes layout shift. */


/* =========================================================================
 * 2. TRADINGVIEW TICKER TAPE WIDGET (mg-tickertape)
 *
 * Pin every layer of the ticker (section wrapper → .mg-tickertape →
 * .mg-tickertape-crop → widget container) to a *fixed* 46px height. We use
 * `height` (not `min-height`), because:
 *   - `min-height` only sets a floor; the rendered "Track all markets on
 *     TradingView" copyright link can push the container taller before the
 *     inline `display: none` (which lives in a <style> block INSIDE the body)
 *     is parsed. That intermediate growth → collapse is the visible jump.
 *   - `overflow: hidden` only clips paint, it does NOT constrain box height.
 *
 * The copyright link is also force-hidden here (rather than relying on the
 * body-inline style) so it never participates in layout.
 * ========================================================================= */

section:has(.mg-tickertape),
.mg-tickertape,
.mg-tickertape-crop,
.tradingview-widget-container,
.tradingview-widget-container__widget {
	height: 46px;
	overflow: hidden;
	contain: layout size;
}

.tradingview-widget-container iframe {
	height: 46px !important;
}

/* The "Track all markets on TradingView" link is the layout-shift culprit
   when its display:none arrives late from the body-inline <style>. */
.tradingview-widget-copyright {
	display: none !important;
}


/* =========================================================================
 * 3. METAL PRICES TICKER (jConveyorTicker)
 *
 * Before $(document).ready fires, the <ul class="tdm-list-items"> renders
 * every metal price stacked vertically (potentially 200-400px tall). When
 * jQuery initialises jConveyorTicker, it collapses to a single horizontal
 * ticker row, snapping the page up by the diff. That is the CLS.
 *
 * Fix: pin the wrapper to its final ticker height (10px top padding from
 * theme + ~40px ticker row = 50px) and clip the un-initialised list with
 * overflow:hidden so it never participates in layout.
 * ========================================================================= */

.metal-prices-ticker {
	height: 50px;          /* fixed: 10px top padding + 40px ticker row */
	overflow: hidden;
	contain: layout size;
}

.metal-prices-ticker .jctkr-wrapper,
.jctkr-wrapper {
	height: 40px;
	overflow: hidden;
}

/* Until jConveyorTicker initialises, the raw <ul> is stacked vertically.
   Clip it so the wrapper height is the only thing that influences layout. */
.jctkr-wrapper:not(.jctkr-initialized) .tdm-list-items,
.metal-prices-ticker:not(.jctkr-ready) .tdm-list-items {
	max-height: 40px;
	overflow: hidden;
	margin: 0;
	padding: 0;
}


/* =========================================================================
 * 4. COOKIE NOTICE BANNER
 * Must use fixed positioning to avoid pushing page content down.
 * ========================================================================= */

.cookie-notice-container,
#cookie-notice {
	position: fixed !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 99999;
}

#cookie-notice .cookie-notice-container {
	background: rgba(50,50,58,1) !important;
}


/* =========================================================================
 * 5. HOMEPAGE TOP STORIES SECTION
 * The hero section shifts heavily when images/content load.
 *
 * Strategy:
 *   - Reserve space on the SECTION only (min-height).
 *   - NEVER set height/overflow on Bootstrap .row — it uses flexbox
 *     and fixed heights clip content or break the grid.
 *   - NEVER set min-height on inner cards — Bootstrap columns rely
 *     on natural flex item sizing.
 * ========================================================================= */

.top_main_section {
	contain: layout style;
}

/* Desktop: ~580px for top grid + ~400px for bottom row + padding = ~1020px */
@media (min-width: 992px) {
	.top_main_section {
		min-height: 1020px;
	}
}

/* Tablet: partial stacking needs more vertical space */
@media (min-width: 768px) and (max-width: 991px) {
	.top_main_section {
		min-height: 1500px;
	}
}

/* Mobile: fully stacked */
@media (max-width: 767px) {
	.top_main_section {
		min-height: 2600px;
	}
}

/* -------------------------------------------------------------------------
   Image containers: DO NOT add aspect-ratio or min-height here.
   
   The theme's style.css already uses the padding-bottom trick for
   aspect-ratio on .mining-post-image:
     - .mining-posts-layout-1 .mining-post-image { padding-bottom: 100% }
     - .mining-posts-listing.mining-posts-layout-1 .large .mining-post-image
       { padding-bottom: calc(90% + 4px) }
     - .mining-posts-listing.mining-posts-layout-1 .small .mining-post-image
       { padding-bottom: 90% }
   
   Adding aspect-ratio or min-height on top of padding-bottom causes
   the browser to calculate the wrong box height, making images overlap.
   ------------------------------------------------------------------------- */


/* =========================================================================
 * 6. NAVIGATION / HEADER
 * Reserve header height to prevent shift when sticky nav initializes.
 * ========================================================================= */

.site-top-container--sticky {
	/* min-height is set dynamically via the placeholder in main.js */
}

.site-top-container--placeholder {
	display: block;
	width: 100%;
}


/* =========================================================================
 * 6. LAZY-LOADED IMAGES
 * SiteGround's lazysizes replaces data-src with src, which can cause
 * reflow if images don't have explicit dimensions.
 * Use aspect-ratio to maintain space before load.
 * ========================================================================= */

/* Article thumbnails — the theme's .mining-post-image already uses
   padding-bottom for aspect-ratio; don't override it.
   Only target generic wp-post-image outside the theme's containers. */
.wp-post-image {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
	height: auto;
}

/* Don't fight the theme's absolute-positioned image technique
   inside .mining-post-image containers (padding-bottom trick). */
.mining-post-image img {
	aspect-ratio: auto;
	width: 100%;
}

/* Gravatar images (author avatars) — explicit size to prevent CLS */
img[src*="gravatar.com"],
img[src*="secure.gravatar.com"] {
	width: 64px;
	height: 64px;
	aspect-ratio: 1 / 1;
}

/* Ensure placeholder GIFs don't collapse */
img[src*="data:image/gif"] {
	background-color: #f0f0f0;
}

/* Prevent layout shift from lazyload class swap */
img.lazyload,
img.lazyloading {
	opacity: 0;
	transition: opacity 0.3s;
}

img.lazyloaded {
	opacity: 1;
}


/* =========================================================================
 * 7. GRAVITY FORMS
 * Forms load async and shift content. Reserve minimum space.
 * ========================================================================= */

.gform_wrapper {
	min-height: 120px;
	contain: layout;
}

/* Newsletter form in sidebar/footer */
.mining-subscribe-form .gform_wrapper {
	min-height: 80px;
}


/* =========================================================================
 * 8. SOCIAL SHARE BUTTONS
 * Sassy Social Share loads and shifts content.
 * ========================================================================= */

.heateor_sss_sharing_container {
	min-height: 40px;
	contain: layout;
}


/* =========================================================================
 * 9. SLICK SLIDER
 * Reserve space for sliders before Slick JS initializes.
 * Slides are stacked vertically in the DOM; Slick collapses them into a
 * carousel on init. Constrain the un-initialized wrap to prevent CLS.
 * ========================================================================= */

.mining-single-slider-wrap:not(.slick-initialized),
.mining-company-reports-posts-wrap:not(.slick-initialized),
.mining-post-content-small-wrap:not(.slick-initialized) {
	overflow: hidden;
}

/* Single slider posts */
.mining-single-slider-wrap:not(.slick-initialized) {
	min-height: 400px;
}

/* Company reports slider */
.mining-company-reports-posts-wrap:not(.slick-initialized) {
	min-height: 280px;
}

/* Video interviews sidebar slider */
.mining-post-content-small-wrap:not(.slick-initialized) {
	min-height: 200px;
}


/* =========================================================================
 * 10. POPUP MAKER
 * Ensure popups don't cause layout shifts.
 * ========================================================================= */

.pum-overlay,
.pum-container {
	position: fixed !important;
}


/* =========================================================================
 * 11. SIDEBAR WIDGET AREAS
 * Home page widget areas that load ads dynamically.
 * ========================================================================= */

#home_before_nav:empty,
#home_before_nav_sticky:empty,
#home_after_nav_sticky:empty,
#home_after_nav:empty {
	display: none;
}


/* =========================================================================
 * 12. FONT LOADING
 * Prevent FOUT (Flash of Unstyled Text) from causing layout shift.
 * Poppins font has display: swap which is good, but we add
 * size-adjust to minimize the shift between fallback and web font.
 * ========================================================================= */

/* Optional: If you self-host fonts, use this adjusted fallback */
@font-face {
	font-family: 'Poppins Fallback';
	src: local('Arial');
	ascent-override: 105%;
	descent-override: 35%;
	line-gap-override: 10%;
	size-adjust: 100%;
}


/* =========================================================================
 * 13. CONTAIN PROPERTY FOR PERFORMANCE
 * Using CSS containment hints to help the browser optimize rendering.
 * ========================================================================= */

/* Articles in grid don't affect each other's layout */
.trending-story {
	contain: layout style;
}

/* Footer doesn't affect above-fold rendering */
.site-footer {
	contain: layout style;
	content-visibility: auto;
	contain-intrinsic-size: 0 500px;
}

/* Sidebar widgets */
.widget {
	contain: layout style;
}