/*
Theme Name: astra-child
Description: Child-Theme für Astra
Author: Chris@B
Template: astra
Version: 1.0.0
Text Domain: astra-child
*/

/* Alphabetische Navigation – Buchstaben A–Z hervorheben */
.alphabet-navigation {
    font-size: 2rem;         /* Schriftgröße anpassen */
    text-align: center;
    margin: 1em 0;
}

.alphabet-navigation a,
.alphabet-navigation a:visited,
.alphabet-navigation a:hover,
.alphabet-navigation a:focus,
.alphabet-navigation a:active {
    font-weight: bold !important;   /* fett für Hervorhebung */
    font-size: 2rem;
    text-decoration: none !important;
    color: inherit;
    margin: 0 0.3em;
}

/* Buchstabenblock hervorheben */
.letter-block,
.letter-block li,
.letter-block li strong {
    text-decoration: none !important;
    color: inherit;
    font-weight: bold !important;  /* fett */
}

/* Autoreneinträge / Links in Buchstabenlisten hervorheben */
.book-list a,
.book-list a:visited,
.book-list a:hover,
.book-list a:focus,
.book-list a:active {
    text-decoration: none !important;  /* Unterstreichung entfernen */
    color: inherit;
    font-weight: bold !important;      /* fett hervorheben */
}

/* Volle Breite & Sidebar ausblenden für bestimmte Kategorien, aber 80% Breite */
body.category-erlebnisse .ast-container,
body.category-skizzen .ast-container,
body.category-rezensionen .ast-container,
body.category-urlaube .ast-container,
body.category-modular .ast-container {
    max-width: 80% !important;
    width: 80% !important;
    margin: 0 auto; /* zentriert den Inhalt */
}

body.category-erlebnisse .content-area,
body.category-skizzen .content-area,
body.category-rezensionen .content-area,
body.category-urlaube .content-area,
body.category-modular .content-area {
    width: 100% !important; /* Content selbst nimmt die volle Container-Breite */
}

body.category-erlebnisse #secondary,
body.category-skizzen #secondary,
body.category-rezensionen #secondary,
body.category-urlaube #secondary,
body.category-modular #secondary {
    display: none !important; /* Sidebar ausblenden */
}

/* Anpassung der Farben für Text und Links */
a {
    color: #3498db;
}

/* Beitragstitel und Meta-Informationen */
.post-title {
    font-size: 1.6em;
    font-family: 'Montserrat', sans-serif;
}

.post-meta {
    font-size: 0.9em;
    color: #777;
}

/* Beitragsextrakt (Excerpt) */
.post-excerpt {
    color: #555;
}

/* Beitragsübersicht (Post-Grid) mit 3 Spalten auf großen Bildschirmen */
.ast-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 3 Spalten auf größeren Bildschirmen */
    gap: 20px !important; /* Abstand zwischen den Spalten */
    width: 100% !important; /* Sicherstellen, dass der Container die gesamte Breite nutzt */
    max-width: 100% !important; /* Verhindert, dass der Container zu schmal wird */
    box-sizing: border-box !important; /* Sicherstellen, dass padding und border die Gesamtbreite nicht beeinflussen */
}

/* Auf Tablets (max. 768px) 2 Spalten */
@media (max-width: 768px) {
    .ast-row {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 Spalten auf Tablets */
    }
}

/* Auf Smartphones (max. 480px) nur 1 Spalte */
@media (max-width: 480px) {
    .ast-row {
        grid-template-columns: 1fr !important; /* 1 Spalte auf Smartphones */
    }
}

/* Zusätzliche Sicherstellung der Spalten-Layouts */
.ast-row > .post {
    width: 100% !important; /* Sicherstellen, dass jedes Element in einer Spalte die volle Breite ausnutzt */
    box-sizing: border-box !important; /* Sicherstellen, dass padding und border die Gesamtbreite nicht beeinflussen */
}

/* Optional: Bildgrößen anpassen */
.post-thumbnail img {
    width: 100% !important; /* Sicherstellen, dass Bilder sich innerhalb der Spalte anpassen */
    height: auto !important;
    border-radius: 8px !important;
}