/* ── Footnote definitions (hidden anchors in the page) ──────────────────── */

.footnote-def {
    display: none;
}

/* ── Inline reference superscript ───────────────────────────────────────── */

.footnote-ref {
    font-size: 0.72em;
    vertical-align: super;
    line-height: 0;
}

.footnote-trigger {
    display: inline-block;
    padding: 0 0.18em;
    min-width: 1.2em;
    text-align: center;
    color: var(--behnke-design, #0066cc);
    background: color-mix(in srgb, var(--behnke-design, #0066cc) 10%, transparent);
    border-radius: 3px;
    font-weight: 600;
    font-size: 0.95em;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.footnote-trigger:hover,
.footnote-trigger:focus {
    background: color-mix(in srgb, var(--behnke-design, #0066cc) 20%, transparent);
    color: var(--behnke-design, #0066cc);
    text-decoration: none;
    outline: none;
}

/* ── Popup card ──────────────────────────────────────────────────────────── */

.footnote-popup {
    position: absolute;
    z-index: 9999;
    max-width: min(380px, calc(100vw - 2rem));
    background: var(--behnke-white, #fff);
    border: 1px solid var(--behnke-light-black, #ddd);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.10),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
    font-size: var(--behnke-smallest-font-size, 0.8rem);
    color: var(--behnke-black, #1a1a1a);
    line-height: 1.55;
    pointer-events: auto;

    /* Fade-in transition */
    opacity: 0;
    transform: translateY(4px);
    transition:
        opacity   0.15s ease,
        transform 0.15s ease;
}

.footnote-popup--visible {
    opacity: 1;
    transform: translateY(0);
}

/* Flip transform direction when popup is shown above the trigger */
.footnote-popup[data-placement="above"] {
    transform: translateY(-4px);
}
.footnote-popup[data-placement="above"].footnote-popup--visible {
    transform: translateY(0);
}

/* Links inside a footnote popup */
.footnote-popup a {
    color: var(--behnke-design, #0066cc);
    text-decoration: underline;
}