/*
 * SITWP Glossary — inline tooltip styles.
 *
 * Markup contract (see sitwp_glossary_render_term()):
 *   <span class="glossary">
 *     <span|abbr class="glossary-term" ...>matched text</…>
 *     <span class="glossary-definition" role="tooltip" hidden>definition</span>
 *   </span>
 *
 * Reveal model: pure CSS. The tooltip shows while the cursor is over the
 * term OR any descendant of the wrapper has focus (keyboard access). No JS
 * is required to display the definition — the script only handles the
 * Escape-to-dismiss affordance.
 */

.glossary {
    /* Positioning context for the absolutely-positioned tooltip below. */
    position: relative;
    /* Keep the wrapper inline so it doesn't break paragraph flow. */
    display: inline;
}

.glossary-term {
    /* Visual affordance that the term is interactive — dotted underline is
     * the long-established convention for <abbr> and glossary terms. */
    text-decoration: underline dotted;
    text-underline-offset: 0.15em;
    cursor: help;
}

.glossary-term:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #e45d54;
}

.glossary-definition {
    /* Positioned relative to the .glossary wrapper. Anchored to the term's
     * left edge and sitting directly below it. */
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1000;

    /* Sizing — wide enough to be readable, capped so a long definition
     * doesn't stretch across the whole viewport. max-width uses min() so
     * it also respects narrow screens without a media query. */
    width: max-content;
    max-width: min(32ch, calc(100vw - 2rem));
    
    padding: 0.5em 0.75em;
    background: #1d1d1b;
    color: #fafafa;
    font-size: 13px;
    line-height: 1.4;
    border-radius: 5px;
    box-shadow: 3px 4px 4px -4px rgba(0, 0, 0, 0.54);

    /* Prevent the tooltip itself from being a hover/focus target — hovering
     * the tooltip shouldn't keep it open (it's not interactive content), and
     * pointer-events: none removes the risk of flicker when the cursor
     * crosses from term to tooltip. */
    pointer-events: none;
}

/* Canonical term label shown above the definition when the matched spelling
 * differs from the post title (e.g. "BSI" → "British Standards Institution").
 * Block display puts it on its own line above the description. */
.glossary-definition__term {
    display: block;
    margin-bottom: 0.25em;
}

/*
 * Reveal. The HTML `hidden` attribute is rendered as `display: none` by the
 * UA stylesheet, which would prevent any transition. Override with a more
 * specific rule and drive visibility via opacity/visibility instead, so the
 * fade can animate.
 *
 * We keep `hidden` on the element for accessibility tooling that reads it
 * (and as a no-JS fallback where the CSS fails to load); the selector
 * `.glossary-definition[hidden]` is more specific than the UA rule, so this
 * wins.
 */
.glossary-definition[hidden] {
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity 120ms ease-out, visibility 0s linear 120ms;
}

/* Show on pointer hover of the term, or when focus lands anywhere inside the
 * wrapper (keyboard activation of the term). :focus-within covers the term
 * being tabbed to; :hover on the wrapper (not the term alone) means the
 * tooltip doesn't flicker if the term is a narrow word — hovering just past
 * its edge within the wrapper still counts. */
.glossary:hover .glossary-definition[hidden],
.glossary:focus-within .glossary-definition[hidden] {
    opacity: 1;
    visibility: visible;
    transition: opacity 120ms ease-out, visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
    .glossary-definition[hidden],
    .glossary:hover .glossary-definition[hidden],
    .glossary:focus-within .glossary-definition[hidden] {
        transition: none;
    }
}