/**
 * Spoiler-Effekt fuer versteckten Text im Beitrag.
 *
 * @package welpentheme
 * @author  Jörn Gorres
 *
 * Verwendung im Beitrag (HTML-Block oder Inline-Format aus
 * dem Block-Editor):
 *
 *     <span class="spoiler">Versteckter Text</span>
 *
 * Standardzustand: Text ist per CSS-Filter unscharf (blur) und durch
 * einen leichten Hintergrund als Spoiler erkennbar.
 *
 * Aufgedeckt wird der Spoiler ueber drei Wege:
 *   - :hover  (Maus auf Desktop)
 *   - :focus  (Tastatur, dank tabindex=0 aus js/spoiler.js)
 *   - .is-revealed (Klick/Tap, gesetzt durch js/spoiler.js)
 *
 * Reines CSS reicht hier nicht, weil :hover auf Touch-Geraeten
 * unschoen ist (erster Tap loest den Hover aus und laesst den
 * Spoiler aufgedeckt, ohne Moeglichkeit, ihn wieder zu verstecken).
 * Deshalb ergaenzt js/spoiler.js einen sauberen Klick-Toggle.
 */

/* ------------------------------------------------------------------
 * Standard-/Versteckt-Zustand
 * ------------------------------------------------------------------ */
.spoiler {
    /* "inline" (nicht "inline-block"), damit der Span im normalen
       Textfluss bleibt und auch ueber Zeilengrenzen hinweg umbrechen
       kann. Bei "inline-block" rutscht der gesamte Spoiler bei
       laengerem Text auf eine neue Zeile, weil die Box nicht
       intern umbricht. */
    display: inline;

    /* Etwas Innenabstand, damit der abgesetzte Hintergrund nicht
       direkt am Text klebt. */
    padding: 0 0.2em;
    border-radius: 3px;

    /* Leicht abgesetzter Hintergrund signalisiert dem Leser: "Hier
       steckt etwas". Farbe inherit, damit der Spoiler in jedem
       Kontext (heller/dunkler Bereich) zur Umgebung passt. */
    background-color: rgba(0, 0, 0, 0.08);
    color: inherit;

    /* Mauszeiger zeigt: klickbar/aufdeckbar. */
    cursor: pointer;

    /* Eigentlicher Spoiler-Effekt: 5px-Gauss-Weichzeichner. */
    filter: blur(5px);

    /* Sanfte Ueberblendung beim Aufdecken/Verstecken. */
    transition: filter 200ms ease-out, background-color 200ms ease-out;

    /* Im versteckten Zustand soll der Text nicht versehentlich per
       Doppelklick markiert werden koennen. Im aufgedeckten Zustand
       (Reveal-Selektor unten) wird die Textselektion wieder freigegeben. */
    -webkit-user-select: none;
            user-select: none;
}

/* ------------------------------------------------------------------
 * Aufgedeckt-Zustand (Hover, Tastaturfokus oder Klick/Tap)
 * ------------------------------------------------------------------ */
.spoiler:hover,
.spoiler:focus,
.spoiler.is-revealed {
    filter: blur(0);
    background-color: transparent;

    /* Text kann jetzt normal markiert und kopiert werden. */
    -webkit-user-select: text;
            user-select: text;
}

/* Standard-Fokusring unterdruecken; sichtbarer Fokus wird unten
   ueber :focus-visible gezielt fuer Tastaturnutzer gesetzt. */
.spoiler:focus {
    outline: none;
}

/* Sichtbarer Fokusring nur bei Tastaturbedienung, nicht bei Maus-Klick. */
.spoiler:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ------------------------------------------------------------------
 * Reduced-Motion-Variante
 * ------------------------------------------------------------------ */

/*
 * Nutzer mit "prefers-reduced-motion" bekommen den Reveal ohne
 * weiche Ueberblendung. Der Spoiler-Effekt selbst bleibt aktiv –
 * nur die Transition wird abgeschaltet.
 */
@media (prefers-reduced-motion: reduce) {
    .spoiler {
        transition: none;
    }
}