/* ═══════════════════════════════════════════════════════════
   ADVERTISER DISCLOSURE
   Component:     Site-wide compensation disclosure
   Template part: template-parts/advertiser-disclosure.php
   Version:       v6.0 (unpackaged)
   Status:        IMPLEMENTED CANDIDATE — awaiting final approval

   ★ CONDITIONALLY ENQUEUED. functions.php loads this file only when
     fp_page_shows_advertiser_disclosure() is true — the same predicate
     the template part guards itself with. A page that does not render
     the disclosure must not request this stylesheet. Today every
     provider destination is '#', so NO page requests it.

   ★ APPROVED TREATMENT — do not restyle without approval.
     DEFAULT   two words only. 13px, gray-600, underlined. Upper-right
               of the page-level row beneath the header on desktop;
               normal flow in that row on mobile (v3.42.0).
     OPEN      an MDN-style floating white card, 12px radius, hairline
               border, soft shadow, anchored beneath the label and
               extending LEFT. 380px on tablet and desktop. Simple x,
               upper-right. No three-dot menu.

     NO icon, NO dagger, NO symbol, NO chevron, NO box in the default
     state, NO bottom-of-page duplicate, NO per-CTA repetition.

   ★ ZERO PAGE MOVEMENT. THIS IS THE LOAD-BEARING REQUIREMENT.
     The card is position:absolute, so it occupies NO space in the
     document flow. Opening or closing it cannot move the hero, the
     illustration, the metadata, the content below, or - critically -
     the Advertiser Disclosure label itself. Measured closed-vs-open:
     identical page height, and 0 differing pixels everywhere except
     the card's own rectangle.

     DO NOT give the card position:static or put it back in flow. An
     earlier candidate did exactly that and the header grew when it
     opened.

   ★ SUPERSEDED CANDIDATES — recorded so they are not reintroduced:
     v1 a large grey panel with a navy left rule, sitting immediately
        above the products;
     v2 label plus the compensation sentence always visible, beneath
        the byline, with a "Learn more" control;
     v3 this collapsed treatment, but the panel covered the hero
        illustration;
     v4 the panel opened IN FLOW beneath the metadata row, which pushed
        the header down when it opened;
     v5 a floating card with an 8px radius and a heavier shadow,
        superseded by the MDN-style reference this file now matches.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Base = the MOBILE behaviour, and the fallback everywhere ──
 * This is deliberately the base rather than a media-query exception.
 * .fp-article__hero-band is display:grid only from 1024 up — below that
 * it is a plain block — so normal flow is what the small screens
 * already do. The desktop corner placement is the exception layered on
 * top, in section 4. One structure, one media query, no second code
 * path: that is why the collapsed state renders pixel-identically at
 * both widths. */
.fp-advdisc {
    margin: 10px 0 0;
    /* Anchor for the floating card at every width. */
    position: relative;
    /* 13px --fp-font-caption is the site's metadata size and the
       smallest type on the page, by intent. */
    font-size: var(--fp-font-caption);
    line-height: 1.5;
}

/* ── 2. The control ───────────────────────────────────────
 * The native marker is removed in both syntaxes; browsers disagree on
 * which they honour. NOTHING replaces it — no chevron, no caret, no
 * icon. The underline is the affordance, by approved decision.
 *
 * <summary> is natively focusable and natively operable with Enter and
 * Space. No role, no tabindex, no aria-* and no script is added here,
 * and none should be: every one of those would override behaviour the
 * browser already provides correctly. */
/*
 * ⚠ COLOUR IS gray-600, NOT gray-500 — AND THAT IS DELIBERATE.
 *
 * The approved treatment specified gray-500. On desktop this label sits on
 * the article hero band, whose background is rgba(37,99,235,.06) over white
 * = #F2F6FE, not white. Measured there:
 *
 *     gray-500  #6B7280  on #F2F6FE  =  4.464 : 1   FAILS AA
 *     gray-600  #4B5563  on #F2F6FE  =  6.978 : 1   passes
 *                        on #FFFFFF  =  7.557 : 1   passes
 *
 * gray-500 clears 4.5:1 on white (4.834:1) but NOT on the tint, and the
 * tinted hero is where this label actually renders. One step darker is the
 * smallest change that makes it conformant on both surfaces, and it leaves
 * the treatment just as quiet. Asserted by A9 against the composited tint,
 * not against white — deriving it from white is what hid this.
 */
.fp-advdisc__more {
    display: inline-block;
    cursor: pointer;
    /* ⚠ IT IS A <button> NOW, NOT A <summary>. These resets keep the approved
       text-link appearance; without them the UA and GeneratePress button
       styling take over. See the parent-scoped reset below. */
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    font: inherit;
    text-align: left;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    color: var(--fp-color-gray-600);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    /* Two words that must never break across lines. */
    white-space: nowrap;
    /* Negative margin cancels the padding's layout effect, so the tap
       target grows WITHOUT shifting anything around it. That is why the
       collapsed state stays pixel-identical to the approved board.

       15px, not 12px: the label's line box is 13px x 1.5 = 19.5px, so
       12px padding gives 43.5px — MEASURED in a real browser, and short
       of the 48px ch8 minimum. 15px gives 49.5px. Do not reduce it. */
    padding: 15px 2px;
    margin: -15px -2px;
}

.fp-advdisc__more:hover { color: var(--fp-color-navy); }

/* Focus is the ONLY way a keyboard user can see where they are. */
.fp-advdisc__more:focus-visible {
    outline: 2px solid var(--fp-color-blue);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ── 3. The floating card ────────────────────────────────
 * position:absolute, anchored to .fp-advdisc, so it floats over the
 * page and takes no space in the flow. See the zero-movement note at
 * the top of this file before changing anything here.
 *
 * The card is present in the DOM at all times and hidden with CSS, so
 * the copy stays crawlable and degrades to fully visible with CSS off -
 * which for a legal disclosure fails safe. */
/* ⚠ VISIBILITY IS THE BROWSER'S JOB NOW. A [popover] is display:none until
   the UA shows it, so there are no display rules here and no [open] selector.
   The UA popover defaults (inset:0, auto margins, a border and padding) are
   reset below; every approved visual property is re-declared unchanged. */
.fp-advdisc__panel {
    margin: 0;
    box-sizing: border-box;
    width: 380px;
    padding: 18px 48px 18px 20px; /* right padding clears the close control */
    text-align: left;
    background-color: var(--fp-color-white);
    border: 1px solid var(--fp-color-gray-200);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(16,24,40,.10), 0 2px 6px rgba(16,24,40,.06);
    font-size: var(--fp-font-body-s);
    line-height: 1.55;
    color: var(--fp-color-gray-600);   /* 7.557:1 on white */
}
/* ── 3z. Popover positioning ──────────────────────────────
 * BASELINE: viewport-centred, deterministic, never off-screen. A top-layer
 * popover resolves its containing block against the VIEWPORT, not the
 * trigger's positioned ancestor - measured, not assumed - so it cannot track
 * the trigger without anchor positioning.
 *
 * The backdrop is transparent by default; it is declared explicitly so no
 * future UA change introduces dimming the approved treatment never had. */
.fp-advdisc__panel:popover-open {
    position: fixed;
    inset: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.fp-advdisc__panel::backdrop { background: transparent; }

/* ── 3z-a. ENHANCEMENT: the approved anchored placement ───
 * Where CSS Anchor Positioning exists (Chrome, Safari 26+) the panel returns
 * to its approved geometry - directly below the trigger, right edges flush,
 * 10px gap - which is exactly the old `top: calc(100% + 10px); right: 0`.
 *
 * ⚠ PROGRESSIVE ENHANCEMENT ONLY. The component is fully functional without
 * it; Safari 17-25 simply keeps the centred card. Never make this a
 * requirement. */
@supports (anchor-name: --fp-advdisc-anchor) {
    .fp-advdisc__more { anchor-name: --fp-advdisc-anchor; }

    .fp-advdisc__panel:popover-open {
        position-anchor: --fp-advdisc-anchor;
        top: calc(anchor(bottom) + 10px);
        right: anchor(right);
        left: auto;
        bottom: auto;
        transform: none;
    }
}

/* ── 3z-b. FAIL-SAFE below Popover support (Safari < 17) ──
 * popover and popovertarget are inert there, so the trigger and the × would be
 * dead controls. Hide them and render the disclosure inline and permanently
 * visible: for a legal notice, visible-but-unstyled beats unreachable. */
/* ── 3z-c. MOBILE POSITIONING — the centred baseline, restated ─
 * ⚠ THIS EXISTS TO BEAT THE ANCHOR ENHANCEMENT ABOVE, AND IT IS LOAD-BEARING.
 *
 * The @supports (anchor-name) block carries the DESKTOP geometry -
 * `right: anchor(right)` - and it was written with no media scoping, so it
 * applied at every width and won on source order. On desktop the trigger sits
 * at the upper RIGHT of the hero (right edge 1289) and right-anchoring a 380px
 * panel lands neatly on screen. On mobile the label sits at the LEFT (right
 * edge 172.1), so right-anchoring a 293px panel put its left edge at
 * 172.1 - 293 = -120.9: measured, 120.9px of the card off the left of a 375
 * viewport. That was the v3.40.8 mobile defect.
 *
 * Restating the centred baseline here, after the enhancement, confines the
 * anchored geometry to the breakpoint it was designed for. Result at 375:
 * 293px wide, 0.00px off centre, equal 41px gutters, fully on screen.
 *
 * ⚠ Do not delete this thinking the @supports block "already handles it", and
 * do not move it above that block - it must come after to win. */
@media (max-width: 1023px) {
    .fp-advdisc__panel:popover-open {
        position: fixed;
        inset: 50% auto auto 50%;
        transform: translate(-50%, -50%);
    }
}

@supports not (selector(:popover-open)) {
    .fp-advdisc__more,
    .fp-advdisc__close { display: none; }

    .fp-advdisc__panel {
        display: block;
        position: static;
        width: auto;
        max-width: 100%;
        margin: 8px 0 0;
        box-shadow: none;
        border-color: var(--fp-color-gray-300);
    }
}

.fp-advdisc__panel p { margin: 0; }

/* A <span>, not a heading - see the note in the template part. */
.fp-advdisc__label {
    display: block;
    margin: 0 0 6px;
    font-weight: 700;
    color: var(--fp-color-navy);
}

/* ── 3a. The close control ───────────────────────────────
 * A real <button>, so it is focusable and operable natively. Quiet by
 * default; it must not compete with the disclosure copy. */
/* ⚠ THE HIT BOX AND THE PAINTED CIRCLE ARE SEPARATE, ON PURPOSE.
 *
 * THE BUTTON is a real 44x44 control - the minimum every touch platform
 * assumes. THE PAINTED CIRCLE is the approved 30x30 and lives on the inner
 * <span>, so enlarging the target did NOT enlarge the visual or the hover
 * background.
 *
 * GEOMETRY IS UNCHANGED. Old: button 30x30 at top/right 10, so the circle
 * occupied 10..40 from the panel corner, centred at 25,25. New: button 44x44 at
 * top/right 3 with a 30x30 span centred inside, so the circle occupies
 * 3+7=10 .. 40 - the SAME pixels, the same centre. Nothing moved.
 *
 * ⚠ SUPERSEDES the .fp-advdisc__close::after hit-area expander shipped in
 * v3.40.3. That pseudo-element extended the hit region outside the button's own
 * border box; this makes the button's own box the hit region, which is what
 * every browser hit-tests most reliably. Do not reintroduce it.
 *
 * touch-action: manipulation removes the double-tap-zoom wait without
 * suppressing scrolling. */
.fp-advdisc__close {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* ⚠ THE 44x44 BOX MUST STAY INVISIBLE IN EVERY STATE.
 *
 * GeneratePress paints `button:hover, button:focus { background-color: rgb(63,64,71) }`
 * at specificity (0,1,1), and sets `appearance: button` in main.min.css - which
 * loads AFTER this file (stylesheet 14 vs 13, plus a later inline block). A plain
 * `.fp-advdisc__close` rule is only (0,1,0), so it CANNOT win: on iOS the button
 * keeps :hover/:focus after a tap and the framework painted a dark 44x44 square
 * over the control. That was the v3.40.4 regression.
 *
 * Scoping through the parent makes these (0,2,0)/(0,2,1), which beats the
 * framework in every state without !important and without depending on load
 * order. appearance:none also stops iOS drawing native button chrome.
 *
 * ⚠ DO NOT "SIMPLIFY" THIS BACK TO A BARE .fp-advdisc__close SELECTOR. The
 * parent scope is load-bearing, not stylistic. */
.fp-advdisc .fp-advdisc__close,
.fp-advdisc .fp-advdisc__close:hover,
.fp-advdisc .fp-advdisc__close:focus,
.fp-advdisc .fp-advdisc__close:active,
.fp-advdisc .fp-advdisc__more,
.fp-advdisc .fp-advdisc__more:hover,
.fp-advdisc .fp-advdisc__more:focus,
.fp-advdisc .fp-advdisc__more:active {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    background-color: transparent;
    border: 0;
    box-shadow: none;
}

/* ⚠ COLOUR IS SET PER CONTROL, NOT IN THE RESET ABOVE. An earlier version
   put `color: inherit` in the shared block; at (0,2,0) it outranked
   `.fp-advdisc__more` and the trigger rendered in body colour instead of
   gray-600. The × is unaffected either way - its colour lives on the inner
   span. */
.fp-advdisc .fp-advdisc__close { color: inherit; }
.fp-advdisc .fp-advdisc__more  { color: var(--fp-color-gray-600); }
.fp-advdisc .fp-advdisc__more:hover { color: var(--fp-color-navy); }

/* The approved visual: a 30x30 circle carrying the glyph, the hover fill and
   the focus ring. Everything the eye sees is this element. */
.fp-advdisc__close > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--fp-color-gray-500);
    font-size: 18px;
    line-height: 1;
}
/* ⚠ POINTER DEVICES ONLY. iOS keeps :hover applied after a tap, which left the
 * hover fill stuck on the circle once the × had been used. Gating it on a real
 * pointer keeps the approved desktop hover and gives touch devices none. */
@media (hover: hover) {
    .fp-advdisc__close:hover > span {
        color: var(--fp-color-navy);
        background-color: var(--fp-color-gray-50);
    }
}
/* Focus ring stays on the 30x30 circle, not the 44x44 box, so the keyboard
   appearance is pixel-identical to the approved treatment. */
.fp-advdisc__close:focus-visible {
    outline: none;
}
.fp-advdisc__close:focus-visible > span {
    outline: 2px solid var(--fp-color-blue);
    outline-offset: 2px;
}

/* ── 3b. The single link ─────────────────────────────────
 * Exactly one destination in the whole component. No email address, no
 * telephone number, no provider name, no second link.
 *
 * ⚠ THESE RULES ARE NOT DECORATIVE. Without them the link falls back to
 *   the site's default anchor styling, whose underline renders thicker —
 *   a 3,321-pixel difference from the approved card, caught by diffing
 *   the production render against the approved board. They were dropped
 *   once by a careless section replacement; do not drop them again. */
.fp-advdisc__link {
    color: var(--fp-color-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.fp-advdisc__link:hover,
.fp-advdisc__link:focus-visible {
    color: var(--fp-color-blue-hover);
    text-decoration-thickness: 2px;
}
.fp-advdisc__link:visited {
    color: var(--fp-color-blue);
}

/* ── 4. Desktop 1024+ : the label is pinned to the page-level row ──
 * The positioning context is .fp-advdisc-page, the zero-height wrapper at
 * the header's bottom edge (advertiser-disclosure-host.css).
 *
 * ⚠ v3.42.0: `.fp-article__hero-band { position: relative; }` WAS REMOVED
 *   from this block. It made the article hero the context for the old
 *   hero-corner placement, which is superseded; the component no longer
 *   renders inside any hero. */
@media (min-width: 1024px) {
    .fp-advdisc {
        position: absolute;
        top: var(--fp-space-m);      /* 24px - matches the band's padding */
        right: var(--fp-space-l);    /* 32px */
        margin: 0;
        z-index: 3;
    }
}

/* ── 4a. Below 1024 : same floating card, viewport-safe ──
 * The label returns to normal flow in the page-level row. The card
 * is left-aligned to the text column and capped so it can never reach a
 * viewport edge. */
@media (max-width: 1023px) {
    /* ⚠ THE WIDTH IS NOW EXPLICIT, AND IT HAS TO BE.
     *
     * The previous rule was `left: 0; right: 0; width: auto`, which derived
     * the card's width from the absolutely-positioned containing block. A
     * viewport-centred popover has no such block, so `auto` collapsed the
     * card to fit-content - measured 187.5px at a 375 viewport.
     *
     * 293px is the approved mobile width. The max-width keeps it inside
     * narrower devices without ever exceeding the approved size. */
    .fp-advdisc__panel {
        width: 293px;
        max-width: calc(100vw - 32px);
        padding: 16px 46px 16px 18px;
    }
}

/* ── 4b. Compaction from 640 up — TABLET AND DESKTOP ────
 * Approved 2026-08-21. Width 440 -> 380, padding 18/48/18/20 -> 14/40/14/16,
 * leading 1.55 -> 1.5. Measured result: 440x261 -> 380x246 on desktop and
 * 420x257 -> 380x246 on tablet, with the copy still on 10 lines at 45
 * characters per line.
 *
 * ⚠ WHY 640 AND NOT 1024. Narrowing the tablet card to 380px while it kept
 *   the looser leading wrapped the copy to an ELEVENTH line and made the card
 *   TALLER than before — 257px to 279px. Narrower is not smaller unless the
 *   leading comes down with it. Measured, not assumed.
 *
 * ⚠ WHY NOT THE BASE BLOCK. These declarations in the base leak into the
 *   375px card, which must not be shrunk. A first attempt did exactly that
 *   and moved 131,177 pixels at 375. This block must stay a media query, and
 *   it must stay AFTER the max-width:1023 block so it can override that
 *   block's padding on tablet by source order.
 *
 * ⚠ BODY SIZE IS NOT REDUCED, AND THAT WAS A MEASURED DECISION. 13px was
 *   built and rejected: it saves 9px of card height and would make legally
 *   material fine print the smallest type on the page. Contrast is identical
 *   either way (gray-600 on white, 7.557:1), so this is a readability
 *   judgement, not an accessibility one. Width and padding do the work. */
@media (min-width: 640px) {
    .fp-advdisc__panel {
        padding: 14px 40px 14px 16px;
        line-height: 1.5;
    }
}

/* ── 5. Print ─────────────────────────────────────────────
 * On paper there is nothing to click, so the disclosure must be present
 * regardless of the open state and the control is meaningless. */
@media print {
    .fp-advdisc__more  { display: none; }
    .fp-advdisc__close { display: none; }
    .fp-advdisc__panel {
        display: block;
        position: static;
        width: auto;
        max-width: 100%;
        margin: 8px 0 0;
        box-shadow: none;
        border-color: var(--fp-color-gray-300);
        color: var(--fp-color-gray-700);
    }
}