/*
 * tooltips.css – Erklärende Tooltips für Fachbegriffe (SEO, GEO-Optimierung, Conversion, Performance)
 *
 * Passt sich automatisch an den Dark- und Light-Mode des Themes an,
 * indem es die vorhandenen CSS-Variablen verwendet.
 * Kein JavaScript für das Styling notwendig – rein CSS-basiert via ::after / ::before.
 */

/* ── Basis-Stil: dünne gestrichelte Unterlinie signalisiert Interaktivität ── */
.term-tooltip {
    border-bottom: 1px dashed var(--accent, #7c6ef7);
    cursor: help;
    position: relative;
    display: inline;
    /* Kein eigener Farb-Override – erbt die Farbe vom Elternelement */
}

/* ── Tooltip-Inhalt (erscheint über dem Begriff) ── */
.term-tooltip::after {
    content: attr(data-tooltip);

    /* Positionierung: zentriert über dem Begriff */
    position:   absolute;
    bottom:     calc(100% + 8px);
    left:       50%;
    transform:  translateX(-50%) translateY(5px);

    /* Aussehen: gleiche Oberflächen-Farbe wie Cards im Theme */
    background:    var(--surface-2,   #1e1e2e);
    color:         var(--text-2,      #b0b0c8);
    border:        1px solid var(--line, rgba(255,255,255,.1));
    border-radius: var(--r, 8px);
    box-shadow:    0 6px 20px rgba(0, 0, 0, .28);

    /* Typografie */
    font-size:   .73rem;
    font-weight: 500;
    line-height: 1.45;
    text-align:  center;
    white-space: normal;
    max-width:   210px;
    width:       max-content;

    /* Padding */
    padding: .4rem .7rem;

    /* Ein- und Ausblenden */
    opacity:    0;
    transition: opacity .18s var(--ease, ease),
                transform .18s var(--ease, ease);
    pointer-events: none;

    /* Immer über dem restlichen Inhalt */
    z-index: 9999;
}

/* ── Kleiner Pfeil nach unten (Caret) ── */
.term-tooltip::before {
    content: '';
    position:  absolute;
    bottom:    calc(100% + 4px);
    left:      50%;
    transform: translateX(-50%) translateY(5px);

    /* Dreieck via Border-Trick */
    border:             5px solid transparent;
    border-top-color:   var(--line, rgba(255,255,255,.12));

    opacity:    0;
    transition: opacity .18s var(--ease, ease),
                transform .18s var(--ease, ease);
    pointer-events: none;
    z-index:    9999;
}

/* ── Sichtbar bei Hover und Fokus ── */
.term-tooltip:hover::after,
.term-tooltip:focus-visible::after {
    opacity:   1;
    transform: translateX(-50%) translateY(0);
}

.term-tooltip:hover::before,
.term-tooltip:focus-visible::before {
    opacity:   1;
    transform: translateX(-50%) translateY(0);
}

/* ── Fokus-Rahmen für Barrierefreiheit (Tastaturnavigation) ── */
.term-tooltip:focus-visible {
    outline:        2px solid var(--accent, #7c6ef7);
    outline-offset: 2px;
    border-radius:  2px;
}

/* ── Mobil: Tooltip nach oben verschieben, falls er abgeschnitten wird ──
   Hinweis: Bei sehr kleinen Viewports kann es bei edge-Begriffen
   nötig sein, die Position dynamisch via JS anzupassen (nicht implementiert). */
@media (max-width: 480px) {
    .term-tooltip::after {
        max-width: 170px;
        font-size: .71rem;
    }
}

/* ── Light-Mode-Anpassung ──
   Das Theme setzt im Light-Mode andere Werte für --surface-2 und --line.
   Da wir CSS-Variablen nutzen, passt sich der Tooltip automatisch an – kein Override nötig. */

/* ── CTA-Subtext: Vertrauenstext direkt unter primären CTA-Buttons ──
   - display:block + width:100% erzwingt in Flex-Containern (inline-actions)
     eine neue Zeile, ohne die Flex-Struktur zu zerstören
   - margin-top klein halten, damit kein visueller Abstand zwischen Button
     und Subtext entsteht (Button und Text wirken als Einheit) */
.cta-subtext {
    display: block;
    width:   100%;
    font-size:   .74rem;
    font-weight: 500;
    color:       var(--muted, #6e6e8a);
    margin:      .3rem 0 0;
    line-height: 1.4;
}