/*
 * Blog: Content-Bereich ausbalancieren
 *
 * Geltungsbereich: ausschliesslich #blog (Contentspalte) und #sidebar.
 * Header, Navigation, Hero-Bild und Footer werden nicht angefasst.
 *
 * Achtung Spezifitaet: Das Customizer-CSS (custom_css Post 3711) wird nach
 * dieser Datei ausgegeben. Regeln, die eine Customizer-Regel ueberschreiben,
 * tragen deshalb ein zusaetzliches body-Praefix. Sie sind unten markiert.
 *
 * Das Theme setzt html{font-size:10px}. rem-Werte sind hier bewusst vermieden.
 */

#blog,
#sidebar {
    --ind-navy: #12285c;
    --ind-teal: #178a7c;
    --ind-text: #363c3d;
    --ind-meta: #6b7280;
    --ind-hairline: rgba(18, 40, 92, 0.08);
}

/* ---------------------------------------------------------------------------
 * 1. Toter Weissraum ueber dem Titel
 *
 * Bisher: .container.singlepost margin-top 100px (Customizer)
 *       + #blog padding-top 50px (illdy main.css)   = 150px
 * Jetzt:  0 + 52px                                  =  52px
 *
 * Das Titelband .bottom-header.blog ist auf Einzelbeitraegen per Customizer
 * display:none. Der Hero bleibt davon unberuehrt: er ist das Hintergrundbild
 * von #header und wird hier nicht angefasst.
 * ------------------------------------------------------------------------ */

/* schlaegt .container.singlepost (0,2,0) aus dem Customizer */
body.single .container.singlepost {
    margin-top: 0;
}

body.single-post #blog {
    padding-top: 52px;
}

@media (max-width: 550px) {
    body.single-post #blog {
        padding-top: 32px;
    }
}

/* ---------------------------------------------------------------------------
 * 2. Fliesstext
 *
 * Der Text sitzt in <p>/<li>, nicht im Container: .blog-post-entry erbt nur
 * die 10px des html-Elements. Deshalb wird direkt auf die Textknoten gezielt.
 * ------------------------------------------------------------------------ */

#blog .blog-post-entry p,
#blog .blog-post-entry li {
    font-size: 17px;
    line-height: 1.75;
    color: var(--ind-text);
}

#blog .blog-post-entry p {
    margin: 0 0 1.5em;
}

#blog .blog-post-entry > :last-child {
    margin-bottom: 0;
}

/* Lesebreite: bewusst auf 68ch (~75 Zeichen) begrenzt, obwohl .col-lg-7 die
 * Spalte bereits auf 807px haelt. Bilder bleiben absichtlich ausgenommen und
 * nutzen die volle Spaltenbreite. */
#blog .blog-post-entry p,
#blog .blog-post-entry ul,
#blog .blog-post-entry ol {
    max-width: 68ch;
}

/* ---------------------------------------------------------------------------
 * 3. Titel und Meta
 * ------------------------------------------------------------------------ */

body #blog h2 {
    color: var(--ind-navy);
}

/* style.css:271 setzt #blog .blog-post-title { color: #001f5f !important }.
 * Gegen !important hilft nur !important — Spezifitaet allein reicht nicht. */
body #blog .blog-post .blog-post-title {
    color: var(--ind-navy) !important;
}

body #blog .blog-post .blog-post-title:hover,
body #blog .blog-post .blog-post-title:focus {
    color: var(--ind-teal) !important;
}

/* schlaegt die Customizer-Regeln auf .post-meta-* (1,3,0) */
body #blog .blog-post .blog-post-meta,
body #blog .blog-post .blog-post-meta .post-meta-time,
body #blog .blog-post .blog-post-meta .post-meta-categories,
body #blog .blog-post .blog-post-meta .post-meta-categories a,
body #blog .blog-post .blog-post-meta .post-meta-comments a {
    color: var(--ind-meta);
}

/* ---------------------------------------------------------------------------
 * 4. Sidebar-Karten
 *
 * Zwingend auf #sidebar gescoped: die Footer-Sidebars von illdy benutzen
 * dieselbe .widget-Klasse (illdy/functions.php:258-307).
 *
 * Das halbtransparente Weiss bleibt erhalten, damit die Hoehenlinien-Textur
 * des Seitenhintergrunds weiter durchscheint.
 * ------------------------------------------------------------------------ */

#sidebar .widget {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--ind-hairline);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(18, 40, 92, 0.06);
    padding: 22px 24px;
    margin-bottom: 26px;

    /* Das Such-Widget enthaelt ein label.screen-reader-text (position:absolute,
     * clip-path:inset(50%)). Es ist nur visuell versteckt, traegt aber weiter
     * zur Layoutbreite bei und loest unter 550px horizontales Scrollen aus.
     *
     * position:relative macht die Karte zum Containing Block, erst dadurch
     * greift clip auf dem Label. Fuer Screenreader bleibt es unveraendert
     * lesbar. clip beschneidet zugleich den border-radius sauber und erzeugt
     * anders als overflow:hidden keinen Scrollcontainer. */
    position: relative;
    overflow: clip;
}

#sidebar .widget:last-child {
    margin-bottom: 0;
}

#sidebar .widget .widget-title {
    margin-bottom: 16px;
}

/* gleiche Spezifitaet wie #sidebar .widget .widget-title h5 in style.css,
 * gewinnt ueber die spaetere Ladereihenfolge */
#sidebar .widget .widget-title h5 {
    color: var(--ind-navy);
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--ind-teal);
}

#sidebar .widget a {
    color: var(--ind-text);
}

#sidebar .widget a:hover,
#sidebar .widget a:focus {
    color: var(--ind-teal);
}

/* ---------------------------------------------------------------------------
 * 5. Bildrundung
 *
 * Nicht enthalten: das Hero-Bild. Es ist das Hintergrundbild von #header und
 * bleibt vollflaechig ohne Rundung.
 *
 * .blog-post-image erscheint nur, wenn das Beitragsbild nicht als Hero
 * verwendet wird (illdy_jumbotron_enable_featured_image, Default an).
 * ------------------------------------------------------------------------ */

#blog .blog-post-image img,
#blog .blog-post-entry img,
.blog-post-related-articles .related-post {
    border-radius: 12px;
}

#blog .blog-post-entry img {
    height: auto;
}

/* ---------------------------------------------------------------------------
 * 6. Read-more-Button
 *
 * Vorher: 45px hoch, 30px Padding, 16px fett, grau gefuellt — schwerer als
 * der Beitragstitel darueber. Jetzt eine Outline-Variante.
 *
 * body-Praefix noetig: das Customizer-CSS setzt
 * #blog .blog-post .blog-post-button { background: grey } mit (1,3,0),
 * main.css:2660 zusaetzlich einen Hover-Hintergrund.
 * ------------------------------------------------------------------------ */

body #blog .blog-post .blog-post-button {
    height: 36px;
    line-height: 34px;   /* 36px minus 2x1px Rahmen */
    padding: 0 22px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 4px;  /* schlaegt die 30px-Pille aus style.css:286 */
    background: transparent;
    border: 1px solid var(--ind-navy);
    color: var(--ind-navy);
}

body #blog .blog-post .blog-post-button:hover,
body #blog .blog-post .blog-post-button:focus {
    background: var(--ind-teal);
    border-color: var(--ind-teal);
    color: #fff;
    opacity: 1;          /* main.css:1636 setzt opacity 0.9 */
}

body #blog .blog-post .blog-post-button:focus-visible {
    outline: 2px solid var(--ind-teal);
    outline-offset: 2px;
}