/**
 * Minimal Blog – Theme-Overrides
 * -----------------------------------------
 * Bis Version 1.4.6 wurde dieser komplette Block bei jedem Seitenaufruf
 * per PHP (wp_head) als Inline-<style> ausgegeben. Das verhindert
 * Browser-Caching und dupliziert Farbwerte, die bereits als CSS-Variablen
 * in style.css existieren. Ab jetzt: statische Regeln hier in einer echten,
 * cachebaren Datei; nur die Akzentfarbe (Customizer-abhängig) bleibt als
 * kurzer Inline-Block in functions.php (siehe minimal_blog_customize_css()).
 *
 * Nutzt konsequent die Theme-Variablen aus style.css statt fester Hex-Werte,
 * damit z.B. ein Wechsel der Akzentfarbe im Customizer auch hier greift.
 */

/* ---- ÜBERSCHRIFTEN: Schriftarten erzwingen ----
   Bewusst NICHT .single-article__inner als Selektor, da dieser Wrapper
   auch den Artikel-Titel-Header (h1.post-title, eigene Regel: DM Sans)
   umschließt - ein Treffer hier würde die Titel-Schrift mit !important
   überstimmen. Nur .entry-content (der eigentliche Fließtext) soll
   Playfair Display für H1-H3 bekommen. ---- */
.entry-content h1, .entry-content h2, .entry-content h3,
.post-card__content h1, .post-card__content h2, .post-card__content h3,
.hero-post__content-text h1, .hero-post__content-text h2, .hero-post__content-text h3,
.wp-block-heading h1, .wp-block-heading h2, .wp-block-heading h3 {
    font-family: var(--font-serif) !important;
}
.entry-content h4, .entry-content h5, .entry-content h6,
.post-card__content h4, .post-card__content h5, .post-card__content h6,
.hero-post__content-text h4, .hero-post__content-text h5, .hero-post__content-text h6 {
    font-family: var(--font-sans) !important;
}
/* Gutenberg-Blöcke */
.wp-block-heading[class*="is-style"],
h1.wp-block-heading, h2.wp-block-heading, h3.wp-block-heading {
    font-family: var(--font-serif) !important;
}
h4.wp-block-heading, h5.wp-block-heading, h6.wp-block-heading {
    font-family: var(--font-sans) !important;
}

/* ---- LOGO: immer korrekte Größe unabhängig von WordPress-Attributen ---- */
.site-branding img,
.site-branding a img,
.custom-logo-link img,
.custom-logo-link .custom-logo,
.site-header img.custom-logo {
    width: auto !important;
    height: auto !important;
    max-height: 120px !important;
    max-width: 500px !important;
    object-fit: contain !important;
    display: block !important;
}

/* ---- HEADER BOX: genug Höhe für das Logo ---- */
.site-header__inner {
    min-height: 140px !important;
    padding: 1.75rem 2rem !important;
    align-items: center !important;
}

/* ---- NAVIGATION: nur den WordPress-eigenen blauen Hintergrund entfernen.
   Mega Menü Plugin-Styles bleiben vollständig erhalten. ---- */
.wp-block-navigation,
.wp-block-navigation__container,
.wp-block-navigation-item {
    background: transparent !important;
    background-color: transparent !important;
}

/* ---- MAX MEGA MENU: Menüleiste heller Hintergrund ---- */
#mega-menu-wrap-primary,
#mega-menu-wrap-primary #mega-menu-primary,
#mega-menu-wrap-primary ul.mega-menu,
.mega-menu-wrap,
.mega-menu-wrap ul.mega-menu,
.mega-menu-wrap .mega-menu,
nav.main-navigation,
.site-header__nav,
.site-header__nav nav {
    background: var(--color-card) !important;
    background-color: var(--color-card) !important;
}

/* ---- MAX MEGA MENU: Dropdown-Panels heller Hintergrund ---- */
#mega-menu-wrap-primary .mega-sub-menu,
#mega-menu-wrap-primary li.mega-menu-item ul.mega-sub-menu,
#mega-menu-wrap-primary li.mega-menu-item .mega-sub-menu,
.mega-menu-wrap .mega-sub-menu,
.mega-menu-wrap li.mega-menu-item ul.mega-sub-menu,
.mega-sub-menu,
ul.mega-sub-menu,
li.mega-menu-megapanel > .mega-sub-menu,
.mega-menu-megapanel,
.mega-menu-megapanel > .mega-sub-menu {
    background: var(--color-card) !important;
    background-color: var(--color-card) !important;
    border-top: 2px solid var(--color-accent) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.10) !important;
}

/* ---- DARK MODE: Mega Menu Dropdown (dunkler Schatten statt hellem) ---- */
[data-theme="dark"] #mega-menu-wrap-primary .mega-sub-menu,
[data-theme="dark"] .mega-menu-wrap .mega-sub-menu,
[data-theme="dark"] .mega-sub-menu,
[data-theme="dark"] .mega-menu-megapanel {
    background: var(--color-card) !important;
    background-color: var(--color-card) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.4) !important;
}

/* ---- DARK MODE: Zufällige Artikel Widget ---- */
[data-theme="dark"] .random-post-text h3,
[data-theme="dark"] .article-item a,
[data-theme="dark"] .article-item {
    color: var(--color-text) !important;
}
[data-theme="dark"] .random-post-cat {
    color: var(--color-text-muted) !important;
}
[data-theme="dark"] .article-item hr {
    border-top-color: var(--color-border) !important;
}

/* ---- LETZTE AKTUALISIERUNG ---- */
p.post-last-modified {
    font-size: 0.75rem !important;
    color: var(--color-text-muted) !important;
    font-style: italic !important;
    margin-top: .35rem !important;
    margin-bottom: 0 !important;
}

/* ---- SEITENTITEL: linksbündig, DM Sans ---- */
h1.page-title,
.site-main h1.page-title,
.container--text h1.page-title {
    font-family: var(--font-sans) !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: -0.02em !important;
    color: var(--color-text) !important;
}

/* ---- BREADCRUMBS (siehe minimal_blog_breadcrumbs() in functions.php) ---- */
.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-sans);
    font-size: var(--size-xs);
    color: var(--color-text-muted);
    margin-bottom: .85rem;
}
.breadcrumbs a {
    color: var(--color-text-muted);
    transition: color var(--transition);
}
.breadcrumbs a:hover {
    color: var(--color-accent);
}
.breadcrumbs span[aria-current] {
    color: var(--color-text);
    font-weight: 500;
    /* Langer Artikeltitel als letztes Element soll nicht die ganze Zeile sprengen */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40ch;
}
.breadcrumbs__sep {
    color: var(--color-border);
}
@media (max-width: 480px) {
    .breadcrumbs span[aria-current] { max-width: 20ch; }
}

/* ---- DARK MODE: TablePress ----
   #2f2f33 (ungerade Zeilen) und #333338 (Tabellenkopf) sind bewusste,
   leicht abweichende Zebra-/Kopfzeilen-Töne ohne eigene CSS-Variable -
   die übrigen Werte entsprechen exakt --color-text / --color-card /
   --color-border im Dark Mode. */
[data-theme="dark"] table.tablepress,
[data-theme="dark"] table.tablepress td,
[data-theme="dark"] table.tablepress th,
[data-theme="dark"] table.tablepress thead th,
[data-theme="dark"] table.tablepress tbody tr td,
[data-theme="dark"] [class*="tablepress-id-"] td,
[data-theme="dark"] [class*="tablepress-id-"] th,
[data-theme="dark"] [class*="tablepress-id-"] tbody td,
[data-theme="dark"] [class*="tablepress-id-"] thead th {
    color: var(--color-text) !important;
    background-color: var(--color-card) !important;
    border-color: var(--color-border) !important;
}
[data-theme="dark"] table.tablepress tbody tr.odd td,
[data-theme="dark"] [class*="tablepress-id-"] tbody tr.odd td {
    background-color: #2f2f33 !important;
}
[data-theme="dark"] table.tablepress tbody tr.even td,
[data-theme="dark"] [class*="tablepress-id-"] tbody tr.even td {
    background-color: var(--color-card) !important;
}
[data-theme="dark"] table.tablepress tbody tr:hover td,
[data-theme="dark"] [class*="tablepress-id-"] tbody tr:hover td {
    background-color: var(--color-border) !important;
}
[data-theme="dark"] table.tablepress thead tr th,
[data-theme="dark"] [class*="tablepress-id-"] thead tr th {
    background-color: #333338 !important;
    color: var(--color-text) !important;
}