/*
 * Strukturelle Basis-Styles für das ALTCHA-Widget.
 * Farben und Eckenradien werden zur Laufzeit aus den Plugin-Einstellungen
 * als Inline-Style ergänzt (siehe includes/settings.php).
 */

altcha-widget {
  /* Erzwingt das helle Farbschema für ALTCHAs light-dark()-Variablen
     (z. B. --altcha-color-base-content, Spinner-Farbe). Ohne diese
     Angabe orientiert sich der Browser am Farbschema des Systems und
     rendert Text/Spinner z. B. bei aktiviertem Dark Mode hell auf dem
     hier fest hell eingestellten Widget-Hintergrund -- praktisch
     unsichtbarer Kontrast, u. a. beim Lade-Spinner während der
     PoW-Berechnung. Das Plugin bietet ohnehin nur helle
     Widget-Hintergründe an, ein Dark-Theme-Support ist nicht vorgesehen. */
  color-scheme: light;
  --altcha-max-width: 100%;
  --altcha-padding: 12px;
  margin-top: 20px;
  margin-bottom: 16px;
  display: block;

  /* Elementor-Formulare (z. B. Pro-Forms-Button-Gruppe, "e-form__buttons")
   * rendern das Widget per Flexbox in derselben Zeile wie den
   * Absende-Button. Der Button landet dadurch rechts neben statt unter dem
   * Widget -- schlechtere UX (Absenden vor der Verifizierung sichtbar/
   * erreichbar, unklare Reihenfolge) und bei schmalen Spalten drängt sich
   * beides.
   *
   * flex-basis: 100% erzwingt in einem umbrechenden Flex-Container
   * (Elementor setzt flex-wrap: wrap auf die Button-Gruppe) eine eigene
   * Zeile für das Widget, der Button fällt in die nächste Zeile darunter --
   * die richtige Reihenfolge für den Nutzer. Siehe .altcha-main weiter
   * unten für die tatsächliche Breite des sichtbaren Kastens. */
  flex-basis: 100%;
}

/* altcha-widget selbst hat kein Shadow DOM (siehe altcha.js:
 * create_custom_element(Widget, ...) wird ohne shadow_root_init
 * aufgerufen); .altcha-main liegt also im Light DOM und ist direkt
 * adressierbar. flex-basis: 100% oben zwingt nur den Host auf volle
 * Breite, ändert aber nichts am sichtbaren Kasten, da .altcha-main per
 * --altcha-max-width lediglich eine Obergrenze bekommt, keine tatsächliche
 * Breite. Deshalb hier zusätzlich width: fit-content: Der sichtbare Kasten
 * bleibt so breit wie sein Inhalt (Checkbox, Label, Logo) tatsächlich
 * braucht -- unabhängig von Schriftgröße oder Übersetzungslänge -- und
 * wächst nur bis zur in --altcha-max-width gesetzten Obergrenze. */
altcha-widget .altcha-main {
  font-family: inherit;
  font-size: 14px;
  width: fit-content;
}

/* Tastatur-Fokus der Checkbox in der Primärfarbe sichtbar machen. ALTCHA
   koppelt den Checkbox-Fokus sonst nicht an die Primärfarbe; :focus-visible
   zeigt den Rahmen nur bei Tastaturbedienung, nicht beim Mausklick. */
altcha-widget input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--altcha-color-primary);
  outline-offset: 2px;
}

altcha-widget .altcha-footer {
  display: none;
}

altcha-widget .altcha-logo {
  pointer-events: none;
}

/* Lade-Spinner (PoW-Berechnung) gegen Theme-CSS absichern.
 *
 * Ursache (live auf einer Enfold/Avada-Installation nachvollzogen): Enfold
 * erzeugt eine generische Regel ".alternate_color div { border-color: ... }"
 * (Element- + Klassenselektor, Spezifität 0,0,1,1). Der Spinner ist ein
 * einfaches <div class="altcha-spinner">, ALTCHAs eigene Regel
 * ".altcha-spinner { border-color: var(--altcha-spinner-color) }" hat
 * dieselbe Spezifität -- bei Gleichstand entscheidet die Ladereihenfolge,
 * und Enfolds Theme-CSS lädt nach unserem Stylesheet. Ergebnis: Der Spinner
 * bekommt die (helle) Theme-Rahmenfarbe statt der Plugin-Textfarbe und ist
 * auf hellem Widget-Hintergrund praktisch unsichtbar.
 *
 * Zusätzlich zielt hier bewusst --altcha-color-base-content statt
 * --altcha-spinner-color: Letztere wird von ALTCHA nur einmal auf :root neu
 * berechnet (var(--altcha-color-base-content) wird dort aufgelöst); unser
 * Farb-Override sitzt aber auf altcha-widget, also eine Ebene tiefer, und
 * kommt für --altcha-spinner-color zu spät. --altcha-color-base-content
 * direkt zu referenzieren umgeht das.
 *
 * !important ist hier bewusst, weil wir nicht wissen, welche
 * Theme-Spezifitäten auf künftigen Kundeninstallationen sonst noch mit
 * ALTCHAs eigenem CSS kollidieren. */
altcha-widget .altcha-spinner {
  border-top-color: var(--altcha-color-base-content) !important;
  border-left-color: var(--altcha-color-base-content) !important;
  border-bottom-color: transparent !important;
  border-right-color: transparent !important;
}

/* Abstand zwischen Beschriftung ("Ich bin kein Roboter") und ALTCHA-Logo.
 *
 * DOM-Struktur des Widgets (aus altcha.js):
 *   .altcha-main
 *     > div                     (Checkbox + Label)
 *         > .altcha-checkbox-wrap
 *     > a.altcha-logo           (eigenes Flex-Item, Geschwister des obigen div)
 *     > .altcha-footer
 *
 * .altcha-main ist standardmäßig flex-direction: column, wird aber in vielen
 * Layouts (schmale Container, CF7- und Elementor-Formulare) durch den
 * verfügbaren Platz effektiv einzeilig dargestellt: Label und Logo landen
 * nebeneinander. ALTCHA definiert für diesen Übergang keinen Zwischenraum --
 * bei ausreichend Breite bleibt zufällig Luft übrig, bei schmalen Breiten
 * klebt das Logo direkt am Textende.
 *
 * Fix: fester linker Mindestabstand am Logo, unabhängig von der
 * verfügbaren Restbreite. */
altcha-widget .altcha-logo {
  margin-left: 0.5rem;
}