/*!
 * Codex Site Fixes 0.2.1
 *
 * Small, always-loaded corrections for defects measured on the four older sites. Kept apart from
 * codex-premium-blocks.css because that file only loads on pages containing a codex-* block, and
 * these defects appear on every page: on economad only 21% of the pages carrying the opt-in box
 * also carry a block marker, so the gated stylesheet would have missed four fifths of them.
 */

/* --------------------------------------------------------------------------------------------
   1. THE FREE-DOWNLOAD BOX SHOWED ITS PREMIUM COVER AT 82 PIXELS.

   Measured 2026-10-08 on mindclarityhub.com/journals-for-productivity/: the opt-in box is 1140px
   wide and its cover image is a 1024x1024 PNG, rendered at 82x82. At that size the cover reads as
   a small grey square - you cannot tell it is a book mockup at all, which is exactly why the box
   looked like it had never been given the premium image. It had; it was just 82px.

   This is the same defect the lead-magnet landing generator fixed on the landing pages ("the
   mockup is displayed at 80 pixels wide ... it reads as a small grey smudge"). The in-post box
   was never fixed because it is rendered by the bridge plugin, not by that generator.

   NOT a content problem: the image URL in those 621 posts is fine. The August and September
   mockups were compared byte for byte - both 1024x1024, both exactly 526,489 bytes - so they are
   the same picture under two filenames, and rewriting the URL in 621 posts would have changed
   nothing a reader can see.

   !important is required because the bridge prints its own .codex-reach-optin-thumb rule with the
   same specificity, and its stylesheet position relative to this one is not guaranteed.
   -------------------------------------------------------------------------------------------- */
.codex-reach-optin-thumb {
    width: clamp(104px, 13vw, 160px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

/* The header is a flex row; at narrow widths a 160px cover plus the headline no longer fits on one
   line, so let it wrap rather than squeezing the text to a column of single words. */
@media (max-width: 560px) {
    .codex-reach-optin-header {
        flex-wrap: wrap;
    }
    .codex-reach-optin-thumb {
        width: clamp(96px, 26vw, 128px) !important;
    }
}

/* --------------------------------------------------------------------------------------------
   2. A COLLAPSED AUTO-ADS SLOT LETS ITS AD PAINT OVER THE ARTICLE.

   Measured 2026-10-08 on mindclarityhub.com/4-types-of-stress/: of 11 Auto Ads slots, two had an
   inline height of 0px while still containing a rendered 150px ad iframe. Google sets that height
   itself, and because the iframe is position:absolute it contributes nothing to the container, so
   the ad overflowed and collided with the "Reader resource" box below it - which is what reads as
   an ad being cut off or clipped.

   This CSS is only the belt. It cannot know how tall a given ad is, so the actual correction is in
   codex-ad-slot-guard.js, which measures the rendered iframe and grows only the containers that
   are genuinely too short. What CSS can safely do is stop a collapsed container from clipping an
   ad that is already inside it, and make sure an ad can never sit on top of following content.
   -------------------------------------------------------------------------------------------- */
ins.adsbygoogle {
    overflow: visible;
}

/* Set by the guard script, never by Google. Scoping the rule to this attribute means nothing here
   applies to a slot the script has not measured and judged to be short. */
ins.adsbygoogle[data-codex-ad-fix="1"] {
    display: block;
    position: relative;
}

/* --------------------------------------------------------------------------------------------
   3. wpautop PUTS A <br> INSIDE LINKS, AND THE EXISTING BACKSTOP ONLY COVERS CLASSED ONES.

   Measured 2026-10-08 on mindclarityhub.com/the-power-of-clarity/ at 375px: 14 anchors contained
   a <br> that wpautop injected. The live backstop lists classes -
     a.cta-animate br, a.affiliate-cta br, .wp-element-button br, .elementor-button br, ...
   - which fixes the seven CTAs that carry a class and misses the seven that do not. The ones it
   misses are the affiliate IMAGE links ("Boost focus with nootropics", "Sleep deeper tonight" and
   the rest): their markup is <a><br> <img ...></a>, so the stray break pushes the image down and
   inflates the link box.

   Matching on POSITION instead of class closes the gap permanently and needs no maintenance as new
   blocks are added. A <br> as the first or last child of a link is never intentional - it is
   always wpautop - whereas a <br> BETWEEN two lines of link text can be deliberate, and this rule
   deliberately leaves that one alone.

   This only hides; it cannot alter markup or break a link.
   -------------------------------------------------------------------------------------------- */
a > br:first-child,
a > br:last-child,
button > br:first-child,
button > br:last-child {
    display: none !important;
}