/*
 * TC SEO Autopilot – Frontend-Styles für vom Plugin in den Artikeltext geschriebene
 * Elemente (FAQ-Blöcke, KI-Kennzeichnungs-Hinweis). Vorher gab es dafür kein CSS
 * (admin.css lädt ausschließlich im wp-admin) - beide erschienen als nackter,
 * unformatierter Text.
 *
 * Nutzt bevorzugt Elementors globale Farb-CSS-Variablen (--e-global-color-*), damit
 * die Boxen automatisch zu den auf der jeweiligen Site/beim jeweiligen Kunden
 * konfigurierten Marken-/Theme-Farben passen, statt fixe Hex-Werte einer einzelnen
 * Installation im Plugin zu hinterlegen. Fallback ist currentColor (die tatsächliche
 * Textfarbe an dieser Stelle), damit es auch ohne Elementor auf jedem Theme - hell
 * oder dunkel - sinnvoll aussieht.
 */

.tc-seo-faq-block {
    background: color-mix( in srgb, var( --e-global-color-text, currentColor ) 6%, transparent );
    border: 1px solid color-mix( in srgb, var( --e-global-color-text, currentColor ) 14%, transparent );
    border-radius: 10px;
    padding: 1.1em 1.4em;
    margin: 0 0 1em;
}

.tc-seo-faq-q {
    margin: 0 0 .5em;
    font-size: 1.05em;
    color: var( --e-global-color-secondary, inherit );
}

.tc-seo-faq-a {
    margin: 0;
}

.tc-seo-ai-disclosure {
    display: flex;
    align-items: center;
    gap: .75em;
    /* Bewusst --e-global-color-text statt --e-global-color-accent: "Accent" ist bei
       Elementor-Kits nicht garantiert eine sichtbare Farbe - manche Kits (z.B. dieses)
       zweckentfremden es als fast-transparente Overlay-Hilfsfarbe (#FFFFFF2B), wodurch
       die Box praktisch unsichtbar wird. "Text" muss dagegen immer eine tatsächlich
       lesbare, opake Vordergrundfarbe sein - sonst wäre der Fließtext selbst unlesbar. */
    background: color-mix( in srgb, var( --e-global-color-text, currentColor ) 8%, transparent );
    border: 1px solid color-mix( in srgb, var( --e-global-color-text, currentColor ) 24%, transparent );
    border-radius: 10px;
    margin: 2em 0 0;
    padding: .85em 1.15em;
    font-size: .9em;
    line-height: 1.55;
}

.tc-seo-ai-disclosure__icon {
    flex: 0 0 auto;
    display: flex;
}

/* Festes Pixel-Maß statt em (s. Task-Vorgabe "EU-Icons in die KI-Kennzeichnung
   integrieren", Abschnitt 3: Icon-Größe fest ~20px): das EU-Icon ist ein fertig
   eingefärbtes Symbol, keine an die Schriftgröße gekoppelte Glyphe wie das
   vorherige Inline-SVG. */
.tc-seo-ai-disclosure__icon-img {
    display: block;
    width: 20px;
    height: 20px;
}

.tc-seo-ai-disclosure__text {
    margin: 0;
    color: color-mix( in srgb, var( --e-global-color-text, currentColor ) 92%, transparent );
}