/*
Theme Name: Newsup Pro Child (Fulda Online)
Theme URI: https://www.fulda-online.com
Description: Child-Theme von Newsup Pro fuer www.fulda-online.com. Enthaelt die uebernommenen Feineinstellungen aus dem alten Theme: individuelle Startseiten-/Kategorie-Texte (ACF), Amazon-Cover (AAWP/ASIN) und den YouTube-Embed-Fix.
Author: Fulda Online
Template: newsup-pro
Version: 1.0.0
Text Domain: newsup-pro-child
*/

/* ==========================================================================
   Eigene Style-Anpassungen bitte HIER unterhalb ergaenzen.
   Diese Datei wird nach der Eltern-style.css geladen und gewinnt damit
   bei gleichen Selektoren.
   ========================================================================== */

/* Amazon-Cover (AAWP/ASIN) in Listen-/Grid-Ansichten sauber einpassen */
.fo-asin-cover {
    max-width: 100%;
    height: auto;
}

/* Single-Beitrag: Beitragsbild (Hero) oben auf die Content-Breite einschraenken.
   Der Text-Container .small.single hat padding:40px – das Beitragsbild liegt als
   Geschwister-Element davor und war daher links/rechts breiter. Wir geben dem
   Bild-Container dasselbe horizontale Padding.
   Ausgenommen: ASIN-Filmreviews mit Amazon-Cover (.fo-asin-cover) bleiben unveraendert. */
.mg-blog-post-box.single .mg-blog-thumb:not(:has(.fo-asin-cover)) {
    padding-left: 40px;
    padding-right: 40px;
}

/* Single-Beitrag: Hero-/Beitragsbild immer auf volle Content-Breite strecken.
   Das Theme nutzt nur max-width:100% (Bild bleibt in Originalbreite, wenn
   kleiner). width:100% fuellt die Spalte. ASIN-Cover ausgenommen, damit
   Film-/Produktbilder nicht hochskaliert/unscharf werden. */
.mg-blog-post-box.single .mg-blog-thumb img:not(.fo-asin-cover) {
    width: 100%;
    height: auto;
}

/* Single-Beitrag: Kopfbereich (H1, Kategorie, Autor) buendig mit Beitragsbild
   und Content ausrichten. Das Theme nutzt hier padding: 30px 70px – wir setzen
   das horizontale Padding auf 40px (= Content-/Bild-Breite). */
.mg-blog-post-box.single .mg-header {
    padding-left: 40px;
    padding-right: 40px;
}

/* Block-Widget-Titel im Suche-Stil (blauer Tab + Ecke + durchgehende Unterlinie).
   Anwendung: dem Titel-Block (Absatz ODER Ueberschrift) in der Sidebar unter
   "Erweitert -> Zusaetzliche CSS-Klasse(n)" die Klasse  fo-wtitle  geben.
   Wirkt fuer alle Widget-Typen (Neueste Beitraege, Kategorien, Liste ...). */
.mg-sidebar .mg-widget .fo-wtitle {
    background: var(--pri-color);
    color: #fff;
    display: inline-block;
    width: auto;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    font-weight: 600;
    text-transform: capitalize;
    padding: 0 38px 0 15px;
    margin: 0 -20px 20px -20px; /* an die Widget-Kante ziehen, wie im Theme */
    position: relative;
    border: 0 solid var(--pri-color);
    border-bottom-width: 2px;
}
/* Absicherung fuer das Widget "Aehnliche Beitraege (primaere Kategorie)":
   identische Grunddarstellung wie der Core-Block "Neueste Beitraege",
   auch falls dessen Block-CSS auf der Seite nicht geladen ist. */
.mg-sidebar .mg-widget .wp-block-latest-posts__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mg-sidebar .mg-widget .wp-block-latest-posts__list > li {
    margin-bottom: 20px;
}
.mg-sidebar .mg-widget .wp-block-latest-posts__list > li:last-child {
    margin-bottom: 0;
}
.mg-sidebar .mg-widget .wp-block-latest-posts__featured-image img {
    width: 100%;
    height: auto;
    display: block;
}
.mg-sidebar .mg-widget .wp-block-latest-posts__post-title {
    display: block;
}

/* Diagonale Ecke rechts (wie bei der Suche) */
.mg-sidebar .mg-widget .fo-wtitle::before {
    content: "";
    position: absolute;
    right: -1px;
    top: -1px;
    width: 29px;
    height: 40px;
    background: #fff;
    clip-path: polygon(0 0, 100% 100%, 100% 0);
}
/* Durchgehende Unterlinie ueber die gesamte Widget-Breite */
.mg-sidebar .mg-widget .fo-wtitle::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 100%;
    width: 100vw;
    height: 2px;
    background-color: var(--pri-color);
}