/*
Theme Name: Blogsy GetRemoteWorks
Description: Minimal GetRemoteWorks child theme for presentation-level Blogsy adjustments.
Author: GetRemoteWorks
Template: blogsy
Version: 1.2.0
Requires at least: 6.8
Requires PHP: 7.4
Text Domain: blogsy-grw
*/

/* ==========================================================================
   AV-001 — Reserved height for ad slots
   Experiment: Active View improvement via min-height reservation.
   Deployed: 2026-08-05
   File: wp-content/themes/blogsy-grw/style.css
   Rollback: remove the entire AV-001 block below and purge LiteSpeed cache.
   ========================================================================== */

/*
 * WHY: Ad Inserter wraps every block in .code-block.code-block-N.
 * AdSense uses <ins class="adsbygoogle">.
 * When the ad script loads slowly or returns no fill, the <ins> collapses to
 * 0 px height. Google Active View counts any slot at 0 px as not viewable,
 * directly reducing our Active View percentage.
 *
 * Reserving a min-height on the wrapper prevents the collapse. The space is
 * visible as whitespace until the creative fills it — this is intentional and
 * acceptable under AdSense policy. It matches what Google itself recommends
 * for reducing CLS and improving Active View.
 *
 * Sizes chosen:
 *   Leaderboard (728×90) → min-height: 90px   — desktop in-article banner
 *   Medium rectangle (300×250) → min-height: 250px — sidebar / mobile slots
 *   Responsive → min-height: 90px desktop, 280px mobile (safe lower bounds)
 *
 * We target .code-block (all Ad Inserter blocks) and ins.adsbygoogle
 * (both Ad Inserter and Auto Ads in-article).
 *
 * overflow:hidden prevents the reserved space from causing horizontal scroll.
 * display:block on <ins> ensures height is respected (default is inline).
 */

/* --- 1. All Ad Inserter block wrappers: prevent horizontal overflow --- */
.code-block {
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

/* --- 2. Reserve min-height on the <ins> element itself (most precise) --- */
ins.adsbygoogle {
    display: block;
    /* Required: inline elements ignore min-height */
}

/* --- 3. Desktop in-article and page-level slots (leaderboard / responsive) ---
   Applies when viewport ≥ 768px. Leaderboard is 90px tall.
   Responsive units can be taller; 90px is the safe minimum floor.          */
@media (min-width: 768px) {

    .single-content-inner ins.adsbygoogle,
    .single-content-inner .code-block,
    .entry-content ins.adsbygoogle,
    .entry-content .code-block {
        min-height: 90px;
    }
}

/* --- 4. Mobile in-article slots (full-width responsive, typically 280px+) ---
   On viewports < 768px, responsive ads expand to full width and are taller.
   280px is the Google-recommended min for a responsive slot on mobile.      */
@media (max-width: 767px) {

    .single-content-inner ins.adsbygoogle,
    .single-content-inner .code-block,
    .entry-content ins.adsbygoogle,
    .entry-content .code-block {
        min-height: 280px;
    }
}

/* --- 5. Homepage in-feed slot (Ad Inserter block inside the main loop area)
   The homepage post loop and its surrounding area (.main-wrapper) can host
   an in-feed slot injected by Ad Inserter via loop_start / loop_end hooks.
   Reserve 280px on all viewports — responsive in-feed ads are typically this
   tall or taller.                                                            */
.main-wrapper>.code-block,
.main-wrapper ins.adsbygoogle {
    min-height: 280px;
}

/* Override: if the main-wrapper slot is inside a single post (already handled
   by rules 3/4 above), reset to their more precise values.                   */
.single-post-wrapper .main-wrapper>.code-block,
.single-post-wrapper .main-wrapper ins.adsbygoogle {
    min-height: 0;
    /* let the single-content-inner rules take over */
}

/* --- 6. Static page slots (About, custom pages with sidebar layout)
   Leaderboard between header and content: reserve leaderboard height.
   Sidebar rectangle: reserve 250px.                                         */
.page-template-default .code-block,
body.page:not(.single) .code-block {
    min-height: 90px;
}

.sidebar-container .code-block,
.sidebar-container ins.adsbygoogle {
    min-height: 250px;
    display: block;
    overflow: hidden;
}

/* --- 7. Safety: do not apply reserved height to non-ad code-block usages ---
   Ad Inserter can also be used to inject HTML widgets with no height.
   Limit rules to containers that are known to hold adsbygoogle units.
   If a block has no <ins> child, the min-height is still present but
   does not cause visible whitespace because the block content fills it.     */

/* --- 8. Prevent CLS from reserved containers: use background placeholder ---
   While the slot is loading, show a very subtle neutral background so the
   reserved space does not appear as a jarring white gap.
   Colour: #f5f5f5 — matches the typical AdSense loading placeholder.        */
ins.adsbygoogle:not([data-ad-status="filled"]) {
    background-color: #f5f5f5;
}

/* --- 9. Collapse empty slots that received no fill ---
   When AdSense returns no ad (data-ad-status="unfilled"), collapse the slot
   to zero height so it doesn't leave a visible placeholder gap.
   This overrides all min-height reservations for unfilled slots only.
   Active View is unaffected — an unfilled slot cannot be counted as viewable
   regardless of its height.                                                 */
ins.adsbygoogle[data-ad-status="unfilled"] {
    min-height: 0 !important;
    height: 0 !important;
    background-color: transparent !important;
}

.code-block:has(ins.adsbygoogle[data-ad-status="unfilled"]) {
    min-height: 0 !important;
}

/* ==========================================================================
   END AV-001
   ========================================================================== */

/* ==========================================================================
   FIX-ANCHOR — Prevent anchor ad from covering page content
   Issue: Google Auto Ads anchor bar (fixed bottom) overlaps content and
   sidebar widgets when user scrolls, hiding text and interactive elements.
   Cause: AdSense injects a fixed-position iframe ~60px tall at the bottom.
   Fix: Add padding-bottom to the page body equal to the anchor bar height
   so content always remains visible above it. Policy-compliant — we are not
   hiding the ad, just ensuring content is not obscured beneath it.
   Deployed: 2026-08-08
   Rollback: remove this block and purge cache.
   ========================================================================== */

/*
 * The anchor bar height varies by creative: ~60px collapsed, up to ~120px
 * expanded (image + text format as seen in screenshots).
 * Using 130px mobile to ensure content is never hidden beneath it.
 */
body {
    padding-bottom: 130px;
}

/*
 * On desktop the anchor bar is shorter (~60–90px).
 */
@media (min-width: 768px) {
    body {
        padding-bottom: 90px;
    }
}

/* ==========================================================================
   END FIX-ANCHOR
   ========================================================================== */

/* ==========================================================================
   SIDEBAR-FIX — Opt sidebar out of flex stretch so Blogsy's built-in
   sticky behavior (aside.sidebar-container.sticky) can actually work.
   Confirmed via DevTools: aside was stretching to 2504px (matching the
   post-loop column height) instead of sizing to its own content.
   ========================================================================== */

aside.sidebar-container.sticky {
    align-self: flex-start;
    height: fit-content;
}

/* ==========================================================================
   END SIDEBAR-FIX
   ========================================================================== */