/*
 * Mindblossom – Darstellungskorrekturen
 *
 * Bewusst als eigene Datei statt in less/theme.mindblossom.less:
 * Die LESS-Datei wird nur beim Speichern im YOOtheme-Customizer neu kompiliert.
 */

/* Lange Wörter in Überschriften auf dem Handy trennen statt abschneiden
   (z. B. „Zertifizierungsvoraussetzungen“ auf den Ausbildungsseiten). */
@media (max-width: 639px) {
    #tm-main h1, #tm-main h2, #tm-main h3, #tm-main h4,
    #tm-main .uk-h1, #tm-main .uk-h2, #tm-main .uk-h3, #tm-main .uk-h4 {
        -webkit-hyphens: auto;
        hyphens: auto;
        hyphenate-limit-chars: 14 6 6;
        overflow-wrap: break-word;
    }
}

/* Buttons dürfen auf dem Handy nicht über den Rand laufen
   (z. B. „ANMELDEFORMULAR“ auf den Ausbildungsseiten). */
@media (max-width: 639px) {
    .uk-button {
        max-width: 100%;
        padding-left: 24px;
        padding-right: 24px;
    }

    .uk-button:not(.uk-button-small) {
        font-size: min(2rem, 7.5vw);
    }
}

/* Produktseite: „In den Warenkorb“ so hoch wie das Mengenfeld daneben. */
.woocommerce div.product form.cart .single_add_to_cart_button {
    height: 50px;
    line-height: 50px;
}

/* Warenkorb auf dem Handy: Spalte „Preis“ ausblenden, damit die Zwischensumme
   nicht hinter dem rechten Rand verschwindet (Menge × Preis steht in der Zwischensumme). */
@media (max-width: 639px) {
    .woocommerce-cart-form .shop_table .product-price {
        display: none;
    }
}

/* Kasse: Germanized verschiebt „Deine Bestellung“ in die rechte Spalte.
   Dort soll die Überschrift die volle Spaltenbreite nutzen (ab 1200 px galt das schon). */
@media (min-width: 640px) {
    #order_review > #order_review_heading {
        float: none;
        width: 100%;
    }
}

/* Kasse auf dem Tablet einspaltig wie auf dem Handy: Zweispaltig sind Formularfelder
   zu schmal und die Bestellübersicht läuft aus ihrer Spalte. */
@media (min-width: 640px) and (max-width: 959px) {
    #customer_details,
    .woocommerce-checkout-review-order {
        float: none;
        width: auto;
    }
}

/* Kasse einspaltig (Handy/Tablet): „Zahlungsart auswählen“ klebte direkt am Anmerkungsfeld. */
@media (max-width: 959px) {
    .woocommerce-checkout-review-order {
        margin-top: 40px;
    }
}

/* Über mich: Die Bildspalte oben hat nur ein Hintergrundbild und fällt gestapelt
   sonst auf einen schmalen Streifen zusammen (Klasse im YOOtheme-Layout gesetzt). */
@media (max-width: 959px) {
    .mb-image-column {
        min-height: 60vw;
    }
}

/* Warenkorb auf dem Handy: „Warenkorb aktualisieren“ brach bei 32 px Schrift zweizeilig um.
   Etwas kleiner, damit er einzeilig und so hoch wie „Gutschein anwenden“ bleibt. */
@media (max-width: 639px) {
    .woocommerce-cart-form button[name="update_cart"] {
        padding-left: 16px;
        padding-right: 16px;
        font-size: min(2rem, 6.4vw);
        line-height: 44.8px;
        white-space: nowrap;
        width: 100%;
    }
}