/*
Theme Name:     Podcast Allianz Child
Theme URI:      https://www.podcastallianz.de
Description:    Child-Theme fuer Podcast Allianz e.V. Traegt nur, was auf Theme-Ebene gehoert: lokale Schriften, Grundtypografie, Fokus und Bewegungsreduktion, Formular-Grundraster.
Author:         7einhalb - Maik Bernstein
Author URI:     https://www.7einhalb.de
Template:       generatepress
Version:        0.4.0
*/

/* ==========================================================================
   WO WAS HINGEHOERT

   Farben        -> 11 Global Colors im Customizer. Weitere Toene werden per
                    color-mix daraus abgeleitet, nie als neuer Wert gesetzt.
   Schriftgroessen
   und -schnitte -> Customizer, Bereich Typografie.
   Bausteine     -> GenerateBlocks Global Classes (gbp-* generisch, pa-*
                    projektspezifisch). Siehe DESIGN-GRUNDLAGEN.md.
   Hier          -> nur Theme-Ebene: Schriftdateien, Grundtypografie,
                    Barrierefreiheit, allgemeine Helfer, CF7-Grundraster.

   Bitte keine Design-Bausteine mehr hier anlegen. Sie waeren im Editor
   unsichtbar und wuerden die Global Classes still ueberschreiben.
   ========================================================================== */


/* ==========================================================================
   1. Schriften

   Archivo und Karla liegen in der WordPress-Schriftenbibliothek
   (Design -> Schriftarten, Dateien in wp-content/uploads/fonts/). WordPress
   gibt die @font-face-Regeln selbst aus - als <style class="wp-fonts-local">
   im Kopf - und meldet beide Familien an den Block-Editor, wo sie in der
   Typografie-Auswahl jedes Blocks stehen. Deshalb steht hier keine einzige
   Schriftdefinition mehr.

   Angelegt und aktiviert von scripts/font_library.py. Es gibt keinen Abruf
   bei fonts.googleapis.com oder fonts.gstatic.com - ausgeliefert wird
   ausschliesslich vom eigenen Webspace.

   Was hier bleibt, ist einzig die Fallback-Kette: der GeneratePress-
   Customizer schreibt `font-family: Archivo` ohne Ersatzschriften.
   ========================================================================== */


/* ==========================================================================
   2. Grundtypografie
   Groessen und Schnitte stehen im Customizer. Hier nur, was der Customizer
   nicht kann: Fallback-Ketten und Textumbruch.
   ========================================================================== */

body {
  font-family: 'Karla', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-wrap: pretty;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-wrap: balance;
}

/* Schmale Spalten: deutsche Silbentrennung statt Loechern in der Zeile.
   Greift nur mobil, wo Woerter wie "Mitgliederverzeichnis" die Zeile sprengen.
   lang="de" steht am <html>, sonst wuerde auto nach Englisch trennen. */
@media (max-width: 600px) {
  p, li, .gb-text {
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 8 4 4;
  }
  h1, h2, h3, h4 { -webkit-hyphens: none; hyphens: none; }
}


/* ==========================================================================
   3. Barrierefreiheit
   Buttons und Textlinks bringen ihren eigenen Fokusring aus der jeweiligen
   Global Class mit. Hier steht der Grundfall fuer alles Uebrige.
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   4. Allgemeine Helfer
   ========================================================================== */

.hideme { display: none !important; }
@media screen and (max-width: 768px) { .mobile-hideme  { display: none !important; } }
@media screen and (min-width: 769px) { .desktop-hideme { display: none !important; } }

.stickme { position: sticky; top: 5%; }
.nomargin { margin: 0; }
.nopointer { pointer-events: none; }


/* ==========================================================================
   5. Contact Form 7 - Grundraster
   Farben ausschliesslich aus den Global Colors.
   ========================================================================== */

.wpcf7 .wpcf7-list-item { margin-left: 0; }
.wpcf7 p label { font-size: .9em; }

.wpcf7 input[type="email"],
.wpcf7 input[type="number"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="text"],
.wpcf7 input[type="url"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  min-height: 44px;
  background: var(--base);
  border: 1px solid var(--base-3);
  border-radius: 4px;
  color: var(--contrast);
  padding: 10px 12px;
  margin-top: 5px;
}
.wpcf7-textarea { height: 140px; }

.wpcf7-form .wpcf7-list-item:first-of-type { margin-left: 0; }
.wpcf7-form .wpcf7-form-control.wpcf7-radio { display: flex; gap: 1em; }
.wpcf7 form .wpcf7-response-output { margin: 0 .5em 0; }

/* Fehlerfarbe: dunkle Variante von accent-2, damit sie auf Weiss AA erfuellt */
.wpcf7 .wpcf7-not-valid-tip { color: color-mix(in srgb, var(--accent-2) 84%, black); }

.wpcf7 input[type="submit"] {
  min-height: 44px;
  background: var(--accent);
  color: var(--base);
  font-family: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 600;
  border: 0;
  border-radius: 4px;
  padding: 16px 30px;
  transition: background-color 180ms ease-out;
}
.wpcf7 input[type="submit"]:hover,
.wpcf7 input[type="submit"]:focus { background: var(--accent-text); }

/* CF7 - Spaltenraster */
.dwp-form { width: 100%; margin: 0 auto; }
.dwp-form-row { display: flex; flex-direction: column; width: 100%; }
.dwp-form-row .wpcf7-form-control,
.wpcf7-form label { width: 100%; }
.dwp-form-column { flex: 1; padding: .5rem 0; width: 100%; }

@media only screen and (min-width: 48em) {
  .dwp-form-row { flex-direction: row; }
  .dwp-form-column { padding: .5rem 1rem; }
  .dwp-form-column:first-of-type { padding-left: 0; }
  .dwp-form-column:last-of-type  { padding-right: 0; }
}

/* CF7 auf dunklem Grund (Karte „Freiwillige"): html_class="dwp-dunkel".
   Kompakt gehalten, damit die Karte nicht hoeher wird als ihre Nachbarn:
   Platzhalter statt Labels, Name und E-Mail in einer Zeile. */
.wpcf7-form.dwp-dunkel p { margin: 0; }
.wpcf7-form.dwp-dunkel br { display: none; }
.wpcf7-form.dwp-dunkel .dwp-kompakt .wpcf7-form-control-wrap { display: block; margin-bottom: 10px; }
.wpcf7-form.dwp-dunkel .dwp-kompakt input { margin-top: 0; }
.wpcf7-form.dwp-dunkel .dwp-zeile > p { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
@media (max-width: 480px) {
  .wpcf7-form.dwp-dunkel .dwp-zeile > p { grid-template-columns: 1fr; }
}
.wpcf7-form.dwp-dunkel .dwp-form-consent { margin: 4px 0 16px; }
.wpcf7-form.dwp-dunkel .dwp-form-consent label,
.wpcf7-form.dwp-dunkel .dwp-form-consent {
  color: color-mix(in srgb, var(--contrast) 15%, var(--base-3));
  font-size: 13px;
  line-height: 1.45;
}
.wpcf7-form.dwp-dunkel .dwp-form-consent a { color: var(--base); }
.wpcf7-form.dwp-dunkel input[type="submit"] { padding: 13px 24px; font-size: 16px; }
.wpcf7-form.dwp-dunkel .wpcf7-not-valid-tip { color: var(--accent-4); font-size: 13px; }
.wpcf7-form.dwp-dunkel .wpcf7-response-output { color: var(--base); margin: 16px 0 0; }