/*
Theme Name: Astra Child
Template: astra
Version: 1.0.0
*/

/* ==========================================================
   SHOP
   ========================================================== */

/*
Shop-Kategorien

Grund:
Die Standard-Gutenberg-Spalten wurden zu schmal, wodurch die
Kategorietitel unschön umgebrochen sind.

Lösung:
Grid mit automatischer Spaltenbreite verwenden.
*/

.tab-shop-categories .wp-block-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 24px;
}

.tab-shop-categories .wp-block-column {
    flex-basis: auto !important;
    flex-grow: 0;
}

.tab-shop-categories h3 {
    line-height: 1.25;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

.tab-shop-categories h3 a {
    text-decoration: none;
}

/*
Shop-Slider
*/

.shopslider {
    height: 50%;
}


/* ==========================================================
   HEADER
   ========================================================== */

/*
Logo und Header

Hinweis:
Noch prüfen, ob diese Regeln überhaupt benötigt werden.
Falls Astra das inzwischen sauber löst, können sie entfernt werden.
*/

.site-logo {
    display: block !important;
    margin: 0 auto !important;
    text-align: center !important;
}

.site-header {
    display: flex !important;
    flex-direction: column !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

/*
Mobile H1

Grund:
Große Überschriften sollen auf Smartphones sauber umbrechen.
*/

@media only screen and (max-width: 768px) {

    h1 {
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        text-align: center !important;
        line-height: 1.4 !important;
        font-size: 24px !important;
        display: block !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

}


/* ==========================================================
   AUFRÄUMEN
   ========================================================== */

/*
Diese automatisch erzeugte WordPress-Klasse sollte mittelfristig
durch eine eigene CSS-Klasse ersetzt werden.

Warum?
- nicht sprechend
- schlecht wartbar
- kann sich nach Änderungen ändern
*/

.wp-elements-f06759fef6b599082a75d9e6041a985f {
    font-size: 24px !important;
    line-height: 1.4 !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    padding: 5px 0 !important;
}