/* ==========================================================================
   Powerlifting editorial surface
   --------------------------------------------------------------------------
   Loaded only on a post in the `powerlifting` category, by
   Powerlifting_Editorial_Bridge::enqueue_editorial_assets(). Declared with
   `powerlifting-styles` as a dependency so these neutralisers always land
   AFTER the base sheet rather than depending on enqueue order.

   WHY THIS FILE EXISTS AT ALL (do not fold it into powerlifting.css).
   powerlifting.css is written for a page the plugin owns end to end. Three of
   its rules are actively wrong once the same markup sits inside a theme
   article, and neutralising them in the base sheet would change the plugin's
   own routes. This file is the editorial-only half.

   T2, stated once here and once in the bridge, because a future reader will
   try to delete the wrapper classes: `.powerlifting-app` is NOT decoration.
   powerlifting.css has no :root block. Every design token is declared inside
   the single rule `.powerlifting-app { ... }` that opens at line 15 and closes
   at line 172. Strip that ancestor and every var(--pl-*) reference in the nav
   is undefined, those declarations drop at computed-value time, and the nav
   renders as unstyled links. The class is the token scope. It is the whole
   reason the markup is not blank. `pl-app` does not exist anywhere in this
   plugin - markup carrying it would be completely unstyled.

   `pl-embed` is the opposite half: it exists ONLY in this file, and only to
   undo what `.powerlifting-app` assumes about owning the page.

   Light theme only, deliberately. No prefers-color-scheme block: the site is
   light-only and the theme article around this markup is white.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Neutralisers - each one cancels a specific base-sheet rule
   -------------------------------------------------------------------------- */

.powerlifting-app.pl-embed {
    /*
     * powerlifting.css:178-186 sets `background-color: var(--pl-bg)` (#f8fafc)
     * on .powerlifting-app. On a plugin route that is the page ground. Inside a
     * white article it is a grey slab behind the fragment, with a hard edge at
     * the wrapper's bounds.
     */
    background-color: transparent;

    /*
     * powerlifting.css:5560-5562 sets `overflow-x: clip` on .powerlifting-app to
     * stop horizontal bleed on a full-width route. The nav's dropdown menu is
     * absolutely positioned (powerlifting.css:376) and opens inside what is now
     * a narrow article column, so a menu near the right edge is exactly the case
     * that clipping eats. Per spec a clip/visible pair preserves the visible
     * axis, but the horizontal clip is real. bodybuilding already paid for this
     * once - commit 9030e0ae, "the hero search dropdown was clipped,
     * mispositioned and out-stacked".
     */
    overflow: visible;
}

/*
 * powerlifting.css:670-677 boxes .pl-container to var(--pl-container) with side
 * padding. The nav markup carries a .pl-container, and the theme has already
 * boxed this column - a second box re-inserts the plugin's own gutters inside
 * the article's gutters and the nav stops lining up with anything around it.
 */
.powerlifting-app.pl-embed .pl-container {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

/*
 * ...except the one inside the nav, which keeps the base sheet's gutter.
 *
 * The rule above is written for content sitting in the theme's article column,
 * where the theme has already supplied the gutter and a second one would double it.
 * The nav is not in that column - it is a card of its own, and stripping the gutter
 * put its logo and links hard against the card's left and right edges.
 *
 * Measured against a plugin route, which is what this has to match:
 *     route      .pl-container padding 24px / 24px, logo at x=257
 *     editorial  .pl-container padding  0px /  0px, logo at x=233
 * Same card, same 1240 width, same radius and shadow, and the contents 24px out of
 * position on one of them.
 *
 * (0,4,0) because the neutraliser above is (0,4,0)... no: it is (0,3,0), and so is
 * the base sheet's `.powerlifting-app .pl-nav .pl-container`. Equal specificity, and
 * this file loads after the base sheet, so the neutraliser won on source order and
 * the base padding never had a chance. Adding .pl-nav here makes it (0,4,0) and
 * settles it on specificity instead of load order.
 *
 * Values come from the base sheet's own .pl-container rule rather than a literal 24px,
 * including its 640px step, so the two stay in step if the scale is ever retuned.
 */
.powerlifting-app.pl-embed .pl-nav .pl-container {
    padding-left: var(--pl-nav-gutter);
    padding-right: var(--pl-nav-gutter);
}

/*
 * powerlifting.css:248-256 makes .pl-nav `position: sticky; top: 0; z-index: 100`,
 * and gives it a translucent background, a blur and a shadow. All of that is
 * sized for a full-bleed route where the band floats over scrolling content.
 *
 * Foxiz runs its own sticky site header at top: 0. Two elements competing for
 * the same edge is a stacking fight the plugin cannot win from inside an article
 * container, and a sticky child of a scrolling article sticks to the article
 * rather than the viewport, which reads as a nav that drifts. The band is a
 * section marker on an editorial page, not site chrome. It stays put. The blur
 * and shadow go with it: inside an article they read as a heavy slab, and the
 * blur has nothing behind it to blur.
 *
 * `position: relative` and NOT `static`, which is the obvious-looking value and
 * is the wrong one. Two things hang off .pl-nav being a positioned element:
 *   - It is the stacking context the open dropdown menu lives in. The menu is
 *     z-index 60 (css:389); drop the context and it competes directly with
 *     whatever the theme paints after the band. That is the "out-stacked" half
 *     of bodybuilding's commit 9030e0ae.
 *   - relative with no offsets lays out identically to static, so nothing moves.
 * z-index 110, and the exact number is load-bearing. Foxiz gives header.single-header
 * `position: relative; z-index: 109`, and that header is the article's own title
 * block. It and this band meet at div.site-wrap, so they are ranked against each
 * other directly. Anything below 110 loses, and the open dropdown loses with it,
 * because the menu's own z-index 60 (css:391) is resolved INSIDE whatever context
 * .pl-nav creates - it cannot climb out on its own.
 *
 * This shipped as z-index 1 and was measured wrong: with 1, hit-testing four points
 * down an open 244px flyout put only the top one inside the menu; the other three
 * returned h1.s-title, div.p-categories and div.single-meta. The menu was drawn
 * under the article title and three quarters of it was unclickable. `auto` fails
 * the same way, and so would the base sheet's 100. At 110 all four points return
 * a.pl-nav-dropdown-item.
 *
 * Do not raise it further looking for safety. 110 is the theme's own navbar-outer
 * level and stays under everything that must win: navbar-wrap 999 (the sticky site
 * header this band must never cover), reading-indicator 9041, the notification
 * dropdown 9999, and the overlays above those. The band is not sticky, so it never
 * travels into them - only the flyout it opens needs the height.
 *
 * The dropdown menu's containing block is NOT affected by this rule: it resolves
 * against .pl-nav-dropdown, which carries its own `position: relative`
 * (powerlifting.css:361-363). Checked, not assumed.
 */
.powerlifting-app.pl-embed .pl-nav {
    position: relative;
    top: auto;
    z-index: 110;

    /*
     * The card treatment SURVIVES here, and that is the point.
     *
     * This block used to strip the background, border and shadow, because the base
     * sheet's nav was a translucent blurred sticky band and all three of those were
     * wrong inside an article. The base nav is now an opaque card with rounded
     * bottom corners, a hairline and a soft shadow - the shared look across
     * bodybuilding, powerlifting and strongman - and the whole reason for the rule
     * is that a section post should carry the same nav as a section route.
     * Stripping it here would give a reader two different navs for the same section
     * depending on which URL they arrived through.
     *
     * So only the two properties that were genuinely route-specific are undone:
     * sticky positioning (a sticky child of a scrolling article sticks to the
     * article, which reads as drift) and the blur (nothing meaningful behind it
     * once the surface is opaque). Background, border, radius and shadow inherit.
     */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/*
 * DELIBERATELY ABSENT #1: a .pl-main neutraliser.
 * powerlifting.css:686-690 gives .pl-main `min-height: 50vh`, which would open
 * half a viewport of dead space inside an article. There is no rule for it here
 * because the editorial template never emits .pl-main - powerlifting_header()
 * is never called, and the nav slice cuts at </nav> (base.php:271), three lines
 * before <main id="main-content" class="pl-main"> (base.php:274). If you are
 * about to add .pl-main to the markup: do not. It also carries a <main>
 * landmark, and the theme already owns the document structure.
 *
 * DELIBERATELY ABSENT #2: a ::before reset.
 * bodybuilding.css:1158-1160 carries `.bb-app.bb-embed::before { content: none }`
 * to cancel a full-viewport ground layer that once covered a 27,317px article and
 * made it read as blank. Powerlifting has no such layer: no
 * .powerlifting-app::before, no vw units anywhere in powerlifting.css, no
 * calc(50% - 50vw), and the only position:fixed is .pl-toast-container. Copying
 * that rule across would be cargo cult. Verified by grep, not assumed.
 */

/* --------------------------------------------------------------------------
   2. The nav band
   -------------------------------------------------------------------------- */

/*
 * The band's own frame. .pl-nav's appearance resets live in section 1 with the
 * position rule they belong to, so there is exactly one .pl-nav block in this
 * file.
 */
/*
 * Spacing only. No border.
 *
 * This carried a border-bottom from when the nav was a flat band and needed a line
 * to separate it from the article. The nav is a card now, with its own 1px hairline
 * on all four sides, so the wrapper's border drew a SECOND line directly under the
 * card's own bottom edge - a doubled rule a few pixels apart.
 *
 * Neither bodybuilding nor strongman has one. Checked, not assumed.
 */
.pl-editorial-navbar {
    margin-bottom: var(--pl-space-lg, 1.5rem);
}

/*
 * The band's width box, and it has to live on the THREE-class selector.
 *
 * The nav shipped full-bleed: 1440 wide at x=0, spanning the viewport instead of
 * lining up with the page. Two things combine to cause it.
 *
 * First, the neutraliser in section 1 sets `max-width: none` on
 * `.powerlifting-app.pl-embed .pl-container`. That rule is right for markup
 * inside the theme's article, where the theme has already boxed the column and a
 * second box would double the gutters. But the nav is NOT in the article. The
 * bridge injects it one level up, as a direct child of `div.site-wrap`, which the
 * theme does not box at all. So the neutraliser removes the nav's only width
 * constraint and nothing replaces it.
 *
 * Second, the obvious place to put the box back - a bare `.pl-editorial-navbar` -
 * silently loses. That selector is (0,1,0) and it is competing with
 * `.powerlifting-app.pl-embed` at (0,2,0), which is where `max-width: none`,
 * `margin-inline: 0` and `padding-inline: 0` are declared. The declarations sit
 * right there in the stylesheet looking applied and do nothing. Bodybuilding paid
 * for this exact mistake first and left the note in bodybuilding.css:24535: the
 * nav "stayed 1440 wide at left 0". Hence (0,3,0) here.
 *
 * The box goes on the WRAPPER rather than on the inner .pl-container, so the
 * container keeps computing `max-width: none` exactly as it does on a plugin
 * route, and the geometry stays identical to a route: content lands on 1240 with
 * 20px of gutter either side.
 */
.powerlifting-app.pl-embed.pl-editorial-navbar {
    /*
     * The wrapper only supplies the side gutter. The MEASURE belongs to .pl-nav,
     * which now carries `max-width: var(--pl-container)` in the base sheet so the
     * card is the same width on a route and on a category post. Setting a second
     * max-width here made two elements own one number, and the narrower of the two
     * silently decided it.
     */
    padding-inline: 20px;
    box-sizing: border-box;
}

/*
 * MOBILE: edge to edge.
 *
 * On a phone the 20px gutter leaves the band floating with a strip of page either
 * side, which reads as a card rather than as site chrome. Full-bleed makes it a
 * band under the site header, which is the point of putting the nav there at all.
 * Everything inside still lines up: pl_nav()'s own .pl-container keeps its padding.
 *
 * Same (0,3,0) selector, for the same reason as above.
 */
@media (max-width: 767px) {
    .powerlifting-app.pl-embed.pl-editorial-navbar {
        max-width: none;
        padding-inline: 0;
    }
}

/* --------------------------------------------------------------------------
   3. Sidebar cards
   --------------------------------------------------------------------------
   The cards sit inside the theme's own widget wrapper (widget rb-section
   w-sidebar clearfix), which owns the column width, the heading rhythm and the
   outer spacing. Everything below styles only the body the plugin adds, so the
   cards keep the theme's shape and inherit its column. Without these rules the
   lists arrive as bare browser bullets with default margins, which reads as
   unfinished next to the theme's real widgets.
   -------------------------------------------------------------------------- */

.powerlifting-app.pl-embed--sidebar {
    /* A scope, not a box. The widgets inside carry their own spacing. */
    display: block;
}

.pl-embed-widget__body {
    font-size: 14px;
    line-height: 1.5;
}

.pl-embed-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pl-embed-list li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--pl-border, #e2e8f0);
}

.pl-embed-list li:last-child {
    border-bottom: 0;
}

.powerlifting-app.pl-embed .pl-embed-list a {
    display: block;
    padding: 9px 0;
    color: var(--pl-text, #1e293b);
    font-weight: 500;
}

.powerlifting-app.pl-embed .pl-embed-list a:hover,
.powerlifting-app.pl-embed .pl-embed-list a:focus-visible {
    color: var(--pl-primary, #dc2626);
}

.pl-embed-list__note {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    color: var(--pl-text-muted, #64748b);
}

/* Recent posts card: title plus date, no thumbnails. */
.pl-embed-posts__date {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    color: var(--pl-text-muted, #64748b);
}
