/**
 * Text Watermark — style.css  (editor + frontend, via wp_enqueue_block_style)
 *
 * Renders a large, faint decorative word behind a group's / cover's content.
 *   - Frontend: a real <span class="oi-watermark" aria-hidden="true"> injected
 *     server-side at render time (index.php).
 *   - Editor preview: the ::before pseudo on the .oi-watermark-preview wrapper
 *     (the canvas can't inject a child into the core block's markup).
 * Both read identical --oi-watermark-* custom properties set on the wrapper.
 *
 * Position model (shared with cover-graphic): X/Y are 0–100 anchors. The element
 * edge matching the anchor is pulled back onto the matching container edge via a
 * percentage translate, so X=100 right-aligns, X=0 left-aligns, X=50 centers.
 */

/* Wrapper becomes the positioning context. */
.oi-has-watermark,
.oi-watermark-preview { position: relative; }

/* Group: isolate so a z-index:-1 watermark sits above the group's own
   background but below all (non-positioned) content. */
.wp-block-group.oi-has-watermark,
.wp-block-group.oi-watermark-preview { isolation: isolate; }

/* The watermark itself — span (frontend) and ::before (editor preview). */
.oi-watermark,
.oi-watermark-preview::before {
    position: absolute;
    top:  var( --oi-watermark-y, 50% );
    left: var( --oi-watermark-x, 100% );
    transform:
        translate(
            calc( -1 * var( --oi-watermark-x, 100% ) ),
            calc( -1 * var( --oi-watermark-y, 50% ) )
        )
        rotate( var( --oi-watermark-rotate, 0deg ) );
    z-index: -1;
    font-family: var( --oi-watermark-font, var( --wp--preset--font-family--serif, Georgia, "Times New Roman", serif ) );
    font-size: var( --oi-watermark-size, clamp( 10rem, 20vw, 18rem ) );
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.05em;
    color: var( --oi-watermark-color, var( --wp--preset--color--palette-1 ) );
    opacity: var( --oi-watermark-opacity, 0.05 );
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    margin: 0;
}

/* Only the pseudo needs generated content; the span carries a real text node. */
.oi-watermark-preview::before {
    content: var( --oi-watermark-text, "" );
}

/* Cover establishes its own stacking context: background image/video sit at
   z-index 0, the overlay (__background) and __inner-container at z-index 1.
   The span is injected immediately before __inner-container, so z-index:1 +
   source order floats it above the overlay yet below the content. */
.wp-block-cover.oi-has-watermark > .oi-watermark,
.wp-block-cover.oi-watermark-preview::before { z-index: 1; }