/* ═══════════════════════════════════════════════════════════════
   D13 — TERM GLOSSARY TOOLTIP — Variant A "Dotted Trace" (client-approved)
   Jargon terms in body copy (SEO, ROAS, DPH, Meta reklamy, konverzný
   pomer, landing page, responzívny dizajn...) get a dashed gold
   underline; hover/focus/tap reveals a small floating tooltip card
   with a plain-language explanation, positioned above the term
   (or below, if there isn't room).
   Ported from design-variants/D13-term-glossary.html,
   [data-variant="a"] block — B "Foil Footnote" and C "Spotlight
   Chip" were not chosen and are intentionally not ported.
   Reuses existing tokens from premium.css :root — no new colors.
   Load AFTER premium.css. Pair with js/d13-term-glossary.js.

   Markup pattern (see js/d13-term-glossary.js header for details):
   <span class="term-glossary" data-term-glossary="Krátke vysvetlenie.">SEO</span>
   ═══════════════════════════════════════════════════════════════ */

/* ─── Term trigger — dashed gold underline in running text ────── */
.term-glossary {
    color: inherit;
    cursor: help;
    position: relative;
    display: inline;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-color: var(--accent-border);
    text-underline-offset: 4px;
    text-decoration-thickness: 1.5px;
    transition: text-decoration-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.term-glossary:hover,
.term-glossary:focus-visible,
.term-glossary.is-active {
    color: var(--accent);
    text-decoration-color: var(--accent);
}

/* Outline handled via color/underline change above; keep a visible
   focus ring too for keyboard users who tab onto the term. */
.term-glossary:focus-visible {
    outline: 1px dashed var(--accent-border);
    outline-offset: 3px;
}

/* ─── Tooltip card ──────────────────────────────────────────────── */
.term-glossary-panel {
    position: absolute;
    z-index: 300;
    left: 50%;
    bottom: calc(100% + 12px);
    background: var(--surface-2);
    border: 1px solid var(--accent-border);
    border-radius: 12px;
    padding: 16px 18px;
    width: 300px;
    max-width: calc(100vw - 40px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translate(-50%, 6px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}

.term-glossary-panel.is-open {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
    pointer-events: auto;
}

/* Speech-bubble tail pointing down at the term */
.term-glossary-panel::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: var(--surface-2);
}

/* Flip below the term when there isn't room above (e.g. near top of viewport) */
.term-glossary-panel.flip-below {
    bottom: auto;
    top: calc(100% + 12px);
    transform: translate(-50%, -6px) scale(0.98);
}

.term-glossary-panel.flip-below.is-open {
    transform: translate(-50%, 0) scale(1);
}

.term-glossary-panel.flip-below::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--surface-2);
}

.term-glossary-panel-eyebrow {
    font-family: 'Archivo Black', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 6px;
}

.term-glossary-panel-body {
    color: #dcd9d0;
    font-size: 0.85rem;
    line-height: 1.55;
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .term-glossary {
        transition: none;
    }

    .term-glossary-panel {
        transition: opacity 0.01s linear;
        transform: none !important;
    }
}