/*
 * newsletter-signup.css — die Newsletter-Anmeldung (Arbeitspaket 2, T9 — M12
 * `newsletter-signup`).
 *
 * Gehört zum Baustein M12 der Divi Library. Das Markup steht in
 * template-parts/newsletter-signup.php und kommt über den Shortcode
 * `[wildisland_newsletter]` in ein Divi-Code-Modul — dasselbe Muster wie Kopf, Fuß,
 * Download-Liste und Zahlen-Band: Hülle im Builder, Markup im Repo
 * (AI/architecture/divi-fallstricke.md, Abschnitt 1).
 *
 * Warum das CSS hier steht und nicht am Modul: E7 des Plans.
 *
 * **Diese Datei baut den Bestand NICHT nach, und das ist begründet.** Die Anmutung des
 * Bestandsformulars stammt aus `//cdn-images.mailchimp.com/embedcode/classic-10_7_dtp.css`,
 * einem Stylesheet von Mailchimps CDN. Es liegt nicht im Snapshot, und es zu laden wäre genau
 * der Drittanbieter-Aufruf, den E6 verhindert. Was `scripts/measure-bestand.sh 1920 newsletter`
 * misst, ist deshalb das Formular ohne seine Kleidung. Übernommen sind die Struktur und die
 * eine Angabe, die aus dem Embed-Code selbst kommt (600px); alles andere kommt aus tokens.css
 * und damit aus AP 1. Siehe E20 des Plans.
 *
 * Zwei Klassen im Selektor, durchgehend — die Spezifitätsregel aus divi-fallstricke.md,
 * Abschnitt 2. Formularelemente sind hier besonders heikel: Divi bringt für `input`, `label`
 * und `button` eigene Vorgaben mit, und ein einklassiges `.wi-newsletter__input` verlöre gegen
 * sie unabhängig von der Ladereihenfolge.
 */

/* ------------------------------------------------------------------ *
 * Der Kasten
 * ------------------------------------------------------------------ */

.wi-newsletter {
  max-width: var(--wi-newsletter-max-width);
  /* Die Farbe kommt von der Sektion (sections.css, Erbfarbe seit T6). Sie hier zu setzen
   * hieße, den Baustein auf einen der beiden Modi festzulegen. */
  color: inherit;
}

.wi-newsletter .wi-newsletter__heading {
  margin-bottom: var(--wi-space-heading);
}

/* ------------------------------------------------------------------ *
 * Das Gate — was vor der Einwilligung steht
 * ------------------------------------------------------------------ */

.wi-newsletter .wi-newsletter__notice {
  margin-bottom: var(--wi-newsletter-gate-space);
  font-size: var(--wi-newsletter-size);
  line-height: var(--wi-newsletter-line-height);
}

.wi-newsletter .wi-newsletter__actions {
  /* Der Ersatzlink steht ohne JavaScript allein hier; mit JavaScript steht der Knopf allein
   * hier. Beides zugleich kommt nicht vor — das Skript entfernt den einen, sobald es den
   * anderen zeigt. Der Abstand ist trotzdem gesetzt, damit der Zwischenzustand beim Laden
   * nicht springt. */
  display: flex;
  flex-wrap: wrap;
  gap: var(--wi-newsletter-field-gap);
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ *
 * Die Felder
 * ------------------------------------------------------------------ */

.wi-newsletter .wi-newsletter__required-note {
  margin-bottom: var(--wi-newsletter-gate-space);
  font-size: var(--wi-font-size-body-narrow);
  line-height: var(--wi-newsletter-line-height);
}

.wi-newsletter .wi-newsletter__field {
  margin-bottom: var(--wi-newsletter-field-gap);
}

.wi-newsletter .wi-newsletter__label {
  /* Über dem Feld und nicht daneben — wie im Bestand. Eine Beschriftung neben dem Feld
   * bräuchte eine feste Spaltenbreite, und die längste hier („Organisation") ist mehr als
   * doppelt so lang wie die kürzeste. */
  display: block;
  margin-bottom: var(--wi-newsletter-label-space);
  font-size: var(--wi-newsletter-size);
  line-height: var(--wi-newsletter-line-height);
  font-weight: var(--wi-newsletter-label-weight);
}

.wi-newsletter .wi-newsletter__required {
  color: var(--wi-newsletter-required-color);
}

.wi-newsletter .wi-newsletter__input {
  display: block;
  width: 100%;
  min-height: var(--wi-newsletter-input-height);
  padding: var(--wi-newsletter-input-padding);
  border: var(--wi-newsletter-input-border) solid var(--wi-newsletter-input-border-color);
  border-radius: var(--wi-radius);
  background-color: var(--wi-newsletter-input-surface);
  color: var(--wi-newsletter-input-color);
  font-family: var(--wi-font-sans), sans-serif;
  font-size: var(--wi-newsletter-size);
  line-height: var(--wi-newsletter-line-height);
}

/*
 * Die Spamfalle aus dem Fluss nehmen, ohne sie zu verstecken.
 *
 * `display: none` und `hidden` scheiden beide aus: ein Skript, das Formulare ausfüllt, prüft
 * genau darauf und lässt das Feld dann in Ruhe — die Falle wäre wirkungslos. Der Bestand
 * schiebt es mit `position: absolute; left: -5000px` aus dem Bild, und das ist hier
 * übernommen. `aria-hidden` und `tabindex="-1"` am Element sorgen dafür, dass es auch
 * niemandem vorgelesen oder untergeschoben wird.
 */
.wi-newsletter .wi-newsletter__trap {
  position: absolute;
  left: -5000px;
}

/* ------------------------------------------------------------------ *
 * Die Knöpfe — Einwilligung und Absenden
 * ------------------------------------------------------------------ */

.wi-newsletter .wi-newsletter__consent,
.wi-newsletter .wi-newsletter__submit {
  display: inline-block;
  padding: var(--wi-newsletter-button-padding);
  border: var(--wi-border-width-button) solid currentColor;
  border-radius: var(--wi-radius);
  background-color: transparent;
  color: inherit;
  font-family: var(--wi-font-sans), sans-serif;
  font-size: var(--wi-newsletter-button-size);
  line-height: var(--wi-newsletter-line-height);
  font-weight: var(--wi-newsletter-button-weight);
  text-transform: uppercase;
  cursor: pointer;
}

.wi-newsletter .wi-newsletter__consent:hover,
.wi-newsletter .wi-newsletter__consent:focus-visible,
.wi-newsletter .wi-newsletter__submit:hover,
.wi-newsletter .wi-newsletter__submit:focus-visible {
  color: var(--wi-newsletter-button-color-hover);
}

/*
 * Der Ersatzlink für den Fall ohne JavaScript. Er sieht bewusst NICHT wie der Knopf daneben
 * aus: er führt von der Website weg, und das soll man ihm ansehen.
 */
.wi-newsletter .wi-newsletter__fallback {
  align-self: center;
  font-size: var(--wi-newsletter-size);
  line-height: var(--wi-newsletter-line-height);
}

/* ------------------------------------------------------------------ *
 * Schmale Fenster
 * ------------------------------------------------------------------ */

/*
 * Eine einzige Stufe, und es ist Divis (767px) und nicht die des Bestands. Anders als beim
 * Zahlen-Band und der Download-Liste gibt es hier keine gemessene Bestandsstufe, an die man
 * sich halten könnte — das Formular ist im Bestand 600px breit und bleibt es auch auf dem
 * Telefon. Divis Stufe zu nehmen ist damit nicht Ausweichen, sondern die einzige Vorgabe,
 * die überhaupt existiert: unterhalb davon stapelt Divi seine Spalten, und der Baustein
 * steht in einer.
 */
@media (max-width: 767px) {
  .wi-newsletter .wi-newsletter__actions {
    /* Der Knopf über die volle Breite: nebeneinander bleibt bei zwei Elementen ohnehin
     * nichts, und ein 25px breiter Rest neben dem Knopf sähe wie ein Fehler aus. */
    flex-direction: column;
    align-items: flex-start;
  }
}