/**
 * C4mulo5 — Hero-Überschrift auf kleinen Bildschirmen einpassen
 *
 * Teil 1 der Lösung: Umbruch innerhalb eines Wortes unterbinden.
 * Teil 2 (die gemessene Schriftgröße) liefert
 * assets/js/c4mulo5-hero-headline-fit.js über die Variable
 * --c4m5-hero-h1-size am <html>-Element.
 *
 * Die Größenregel greift nur, wenn das Skript gelaufen ist und die Klasse
 * c4m5-hero-fit gesetzt hat. Ohne JavaScript bleibt es bei der Theme-Größe,
 * dann wirkt nur die Umbruch-Regel — die Überschrift ist in jedem Fall
 * lesbar.
 *
 * Autor: Nico Eberhardt — https://nico-eberhardt.de
 */

@media (max-width: 767px) {

    /* Mesmerize setzt `overflow-wrap: break-word` auf Überschriften. Damit
     * trennt der Browser mitten im Wort, sobald es nicht passt — ohne
     * Trennstrich. Genau das war die Kundenbeanstandung. */
    .header-homepage h1,
    .header-homepage h2,
    .header-homepage .header-title,
    .header-homepage .hero-title {
        overflow-wrap: normal !important;
        word-break:    normal !important;
        word-wrap:     normal !important;
        hyphens:       none !important;
    }

    html.c4m5-hero-fit .header-homepage h1,
    html.c4m5-hero-fit .header-homepage .header-title,
    html.c4m5-hero-fit .header-homepage .hero-title {
        font-size: var(--c4m5-hero-h1-size) !important;
        /* Zeilenabstand mitnehmen, sonst stehen die Zeilen bei kleinerer
         * Schrift unnötig weit auseinander. */
        line-height: 1.12 !important;
    }
}