/* ============================================================================
   site-popover.css - hover/focus popover
   Replaces Telerik RadToolTip used as a genuine hover tooltip, as opposed to the
   modal use handled by site-modals.css.

   Part of the Telerik removal project. See .kiro/specs/telerik-removal/

   First use: the "Fulfillment Guidelines" panel on Checkout.aspx, which was
     <telerik:RadToolTip TargetControlID="FulfillmentLink" ShowDelay="300"
                         HideEvent="LeaveTargetAndToolTip" Position="MiddleRight">

   MARKUP CONTRACT:
     <span class="scc-popover">
       <span class="scc-popover-trigger">... the link or text ...</span>
       <span class="scc-popover-body" role="tooltip">... rich content ...</span>
     </span>

   CSS-ONLY, NO JAVASCRIPT:
     RadToolTip needed script because it rendered the panel detached from its
     trigger and positioned it at runtime (that is what TargetControlID was for).
     Here the panel is a sibling of the trigger inside a positioned wrapper, so
     :hover and :focus-within do the whole job.

   :focus-within matters for accessibility - it means the panel also opens when the
   trigger is reached by keyboard, which the RadToolTip hover behaviour did not
   support at all.
   ============================================================================ */

.scc-popover {
    position: relative;
    display: inline-block;
}

.scc-popover-body {
    /* Hidden by default. visibility + opacity rather than display:none so the
       fade can animate, mirroring RadToolTip's Animation="Fade". */
    visibility: hidden;
    opacity: 0;
    transition: opacity 300ms ease, visibility 300ms;

    position: absolute;
    z-index: 1200;

    /* Position="MiddleRight": to the right of the trigger, vertically centred. */
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 10px;

    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    text-align: left;
    font-weight: normal;

    /* The original content declared its own width: 275px. Keep a sane cap here so
       reuse elsewhere does not produce a full-width panel. */
    max-width: 320px;
}

/* ShowDelay="300" - only open after a brief hover, so passing the cursor over the
   trigger on the way somewhere else does not flash the panel open. */
.scc-popover:hover .scc-popover-body {
    visibility: visible;
    opacity: 1;
    transition-delay: 300ms;
}

/* Keyboard users get it immediately, with no delay. */
.scc-popover:focus-within .scc-popover-body {
    visibility: visible;
    opacity: 1;
    transition-delay: 0ms;
}

/* Near the right edge of the viewport, flip to the left of the trigger. */
.scc-popover.scc-popover-left .scc-popover-body {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 10px;
}

/* Narrow screens: there is no room beside the trigger, so drop below it and let
   it use the available width. */
@media (max-width: 700px) {
    .scc-popover-body {
        left: 0;
        right: auto;
        top: 100%;
        transform: none;
        margin-left: 0;
        margin-top: 6px;
        max-width: 90vw;
    }
}

@media print {
    .scc-popover-body {
        display: none;
    }
}