/* =========================================================================
   .wakasm-sticker-callout — REUSABLE STICKER + HAND-DRAWN CALLOUT COMPONENT
   -------------------------------------------------------------------------
   Hand-drawn SVG arrow + Caveat-font caption that point at a sticker.

   Lived in patron-requests.css until 2026-07-24. Moved here when the signup
   screen (/press-start/) needed it: a page-specific stylesheet is not a
   place to keep something two unrelated pages load. This file holds the
   GENERIC component only -- per-instance geometry (which direction the arrow
   points, where the overlay anchors) stays with the page that uses it.

   Requires no fonts of its own. Caveat is not enqueued anywhere on the front
   end, so the label deliberately falls back through Bradley Hand to a
   generic cursive rather than pulling in a webfont request.

   TWO MOUNT MODES — pick based on whether you're inside a clip-path:

   1. INLINE — sticker, arrow, all live in one wrapper. Use when
      there is NO clip-path between this element and the viewport.

       <span class="wakasm-sticker-callout">
           <span class="wakasm-sticker-callout__sticker">[sticker]</span>
           <svg class="wakasm-sticker-callout__arrow">[arrow path]</svg>
           <span class="wakasm-sticker-callout__label">Caption</span>
       </span>

   2. OVERLAY — sticker stays where it is in the DOM (e.g. inside a
      clipped page); arrow + label render in a SEPARATE element placed
      as a sibling of the clipped element, inside an unclipped ancestor
      (e.g. .prv2-page-wrap). Per-instance --modifier class positions
      the overlay so the arrowhead lands on the actual sticker.

       <span class="wakasm-sticker-callout__sticker">[sticker]</span>
       ...
       <div class="wakasm-sticker-callout-overlay
                   wakasm-sticker-callout-overlay--rankon">
           <svg class="wakasm-sticker-callout__arrow">[arrow path]</svg>
           <span class="wakasm-sticker-callout__label">Caption</span>
       </div>

   🔴 CLIP-PATH ESCAPE WARNING — READ BEFORE USING:
   This component does NOT escape clip-path. If the parent (or ANY ancestor)
   has clip-path, the arrow + label WILL be cropped at the polygon boundary.
   Wakasm's "Standard Page Design Pattern" pages (.prv2-page, .game-single)
   all wrap content in a clipped container with jagged left/right edges.
   You MUST render this callout as a SIBLING of the clipped container,
   inside an unclipped wrapper (e.g. .prv2-page-wrap). See:
     - .prv2-sticker-showcase (top of patron-requests page) — escape example
     - .prv2-thanks (patron-requests.css) — also pulled out for this reason
     - feedback memory: clip_path_escape_pattern.md
     - ARCHITECTURE/CLIP-PATH-ESCAPE-PATTERN.md

   The login screen (custom-login.css) uses INLINE mode — wp-login.php has no
   clipped ancestors, so none of the above applies there.
   ========================================================================= */
.wakasm-sticker-callout {
    position: relative;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.wakasm-sticker-callout__sticker {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.wakasm-sticker-callout__arrow {
    position: absolute;
    width: 130px;
    height: 80px;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.4));
    pointer-events: none; /* hover should fall through to the sticker */
}

.wakasm-sticker-callout__label {
    position: absolute;
    width: max-content;
    max-width: 260px;
    color: #fff5df;
    font-family: "Caveat", "Bradley Hand", "Comic Sans MS", cursive;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.05;
    text-align: left;
    white-space: nowrap;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
    pointer-events: none;
}
.wakasm-sticker-callout__label em {
    display: block;
    margin-top: 4px;
    font-style: italic;
    color: var(--coral, #ef8b6d);
    font-weight: 800;
    font-size: 18px;
}

/* --- OVERLAY mode container ---
   Anchors absolutely against the nearest positioned ancestor — use an
   unclipped wrapper like .prv2-page-wrap. Per-instance modifier classes
   tune top/right/bottom/left coords so the arrowhead lands on the actual
   sticker that lives elsewhere in the DOM. */
.wakasm-sticker-callout-overlay {
    position: absolute;
    z-index: 5;
    pointer-events: none;
}

@media (max-width: 850px) {
    /* Overlay mode only. On narrow screens the arrow points off-screen
       because the layout it was measured against has collapsed to a single
       centered column. Inline mode is unaffected — it carries its own
       sticker, so it stays correct at any width. */
    .wakasm-sticker-callout-overlay {
        display: none;
    }
}