/*
 * jut-so Tooltip — frontend
 *
 * Markup is generated by includes/tinymce-tooltip.php:
 *
 *   <a class="jso-tooltip" href="...">
 *       Wort
 *       <span class="jso-tooltip__bubble" role="tooltip">
 *           <span class="jso-tooltip__title">Überschrift</span>
 *           <span class="jso-tooltip__text">Text</span>
 *       </span>
 *   </a>
 *
 * Override the custom properties below to restyle, e.g. in style.css:
 *   .jso-tooltip { --jso-tooltip-bg: var(--e-global-color-primary); }
 */

.jso-tooltip {
    --jso-tooltip-width: 280px;
    --jso-tooltip-bg: #1f2933;
    --jso-tooltip-color: #ffffff;
    --jso-tooltip-radius: 6px;
    --jso-tooltip-padding: 12px 14px;
    --jso-tooltip-gap: 10px;
    --jso-tooltip-arrow: 7px;
    --jso-tooltip-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    --jso-tooltip-z-index: 999;

    position: relative;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* Not a link — nothing to click, so signal "info" instead. */
span.jso-tooltip {
    cursor: help;
}

.jso-tooltip__bubble {
    position: absolute;
    bottom: calc(100% + var(--jso-tooltip-gap));
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    z-index: var(--jso-tooltip-z-index);

    display: block;
    width: var(--jso-tooltip-width);
    max-width: min(var(--jso-tooltip-width), calc(100vw - 2 * var(--content-padding, 20px)));
    padding: var(--jso-tooltip-padding);

    background: var(--jso-tooltip-bg);
    color: var(--jso-tooltip-color);
    border-radius: var(--jso-tooltip-radius);
    box-shadow: var(--jso-tooltip-shadow);

    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    text-decoration: none;
    white-space: normal;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

/* The arrow. */
.jso-tooltip__bubble::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: var(--jso-tooltip-arrow) solid transparent;
    border-top-color: var(--jso-tooltip-bg);
    border-bottom-width: 0;
}

.jso-tooltip__title {
    display: block;
    margin-bottom: 4px;
    font-weight: 700;
    font-size: 1em;
    line-height: 1.3;
}

.jso-tooltip__text {
    display: block;
}

.jso-tooltip:hover > .jso-tooltip__bubble,
.jso-tooltip:focus > .jso-tooltip__bubble,
.jso-tooltip:focus-visible > .jso-tooltip__bubble {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/*
 * Touch devices have no hover: the first tap focuses and shows the bubble,
 * a second tap follows the link.
 */
@media (hover: none) {
    .jso-tooltip:active > .jso-tooltip__bubble {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }
}

/*
 * Fallback for tooltips near the viewport edge. Add the class in the Elementor
 * "CSS Classes" field of the widget, or via the HTML view of the editor.
 */
.jso-tooltip--left > .jso-tooltip__bubble {
    left: 0;
    transform: translateX(0) translateY(4px);
}

.jso-tooltip--left:hover > .jso-tooltip__bubble,
.jso-tooltip--left:focus > .jso-tooltip__bubble {
    transform: translateX(0) translateY(0);
}

.jso-tooltip--left > .jso-tooltip__bubble::after {
    left: 1.5em;
}

.jso-tooltip--right > .jso-tooltip__bubble {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(4px);
}

.jso-tooltip--right:hover > .jso-tooltip__bubble,
.jso-tooltip--right:focus > .jso-tooltip__bubble {
    transform: translateX(0) translateY(0);
}

.jso-tooltip--right > .jso-tooltip__bubble::after {
    left: auto;
    right: 1.5em;
    transform: translateX(0);
}

/* Below the word instead of above it. */
.jso-tooltip--below > .jso-tooltip__bubble {
    bottom: auto;
    top: calc(100% + var(--jso-tooltip-gap));
    transform: translateX(-50%) translateY(-4px);
}

.jso-tooltip--below:hover > .jso-tooltip__bubble,
.jso-tooltip--below:focus > .jso-tooltip__bubble {
    transform: translateX(-50%) translateY(0);
}

.jso-tooltip--below > .jso-tooltip__bubble::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-top-width: 0;
    border-bottom-color: var(--jso-tooltip-bg);
    border-bottom-width: var(--jso-tooltip-arrow);
}

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

@media print {
    .jso-tooltip__bubble {
        display: none;
    }
}