/* Footer — Social-Zeile aufgeraeumt (SEO-Review Alex, 09/2026)
 *
 * Das Footer-Markup lebt als Etch-Component in der DB (wp_block 2925) und
 * darf nicht angefasst werden — Johannes/Edith pflegen dort Inhalte. Die
 * Anpassung passiert deshalb rein per CSS, geladen NACH thch-blocks.css
 * (Prioritaet 100 auf wp_enqueue_scripts).
 *
 * Desktop (>= 75rem; 993-1199px: 2 Spalten, Icons unter dem Newsletter):
 *   - Der Satz "Thermochema auf YouTube, Facebook & Instagram" ist ein
 *     nackter Textknoten in .thch-footer__youtube und per Selektor nicht
 *     erreichbar -> font-size: 0 auf dem Container, die Icons (::before,
 *     feste Groessen) bleiben unberuehrt. Der Text bleibt im DOM und damit
 *     fuer Screenreader erhalten; die Links tragen ohnehin aria-label.
 *   - .thch-footer__right-col wird zu display: contents, damit Newsletter
 *     und Icon-Reihe direkte Grid-Items von .thch-footer__middle-grid
 *     werden. Aus 2 Spalten + Extra-Zeile wird eine Zeile mit 3 Spalten:
 *     Kontakt | Newsletter | Social-Icons. Der Footer verliert damit eine
 *     komplette Zeile.
 *
 * Mobil (<= 62rem): Satz ebenfalls weg, Icons als kompakte mittige Reihe.
 */

/* Satz "Thermochema auf YouTube, Facebook & Instagram" auf allen Breiten weg:
   Textknoten unsichtbar machen, ohne ihn aus dem DOM zu nehmen (Screenreader). */
.thch-footer__youtube {
    font-size: 0;
    line-height: 0;
    gap: 0.75rem;
    flex-wrap: nowrap;
}

/* Ab Desktop-Breite: Icons rechtsbuendig unter der Newsletter-Karte
   (Basis-Layout 2 Spalten bleibt). */
@media (min-width: 62.0625rem) {
    .thch-footer__youtube {
        justify-content: flex-end;
    }
}

/* Erst ab 75rem (1200px) reicht der Platz fuer Kontakt | Newsletter | Icons in
   einer Zeile. Zwischen 993 und 1199px wurde die Newsletter-Karte sonst auf
   Eingabefeld-Breite gequetscht. */
@media (min-width: 75rem) {
    .thch-footer__right-col {
        display: contents;
    }

    .thch-footer__middle-grid {
        grid-template-columns: auto minmax(0, 1fr) auto;
        column-gap: 2rem;
    }

    /* Newsletter-Karte behaelt ihre gewohnte Breite und rueckt an die
       Icon-Spalte heran, statt die frei gewordene Zeile aufzufuellen. */
    .thch-footer__newsletter {
        min-width: 0;
        max-width: 38rem;
        margin-left: auto;
    }

    .thch-footer__youtube {
        padding-top: 0;
        align-self: center;
    }
}

/* Mobil: Icon-Reihe kompakt und mittig unter der Newsletter-Karte */
@media (max-width: 62rem) {
    .thch-footer__youtube {
        justify-content: center;
        padding-top: 1.25rem;
    }
}

/* Mobil bekam der Icon-Link display:block (Etch/Base-Regel) — das ::before
   sass dann oben links im Kreis. Flex erzwingen, damit das Symbol zentriert ist. */
.thch-footer .thch-footer__youtube a.thch-footer__social-icon,
.thch-footer .thch-footer__youtube a.thch-footer__youtube-icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
}