/* 
Theme Name: Lilli-Jahn-Schule Theme
Main Stylesheet - Compiled from SCSS
*/

/* Font Face Declarations */
@font-face {
    font-family: "Jost";
    src: url('../fonts/Jost-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Jost";
    src: url('../fonts/Jost-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Jost";
    src: url('../fonts/Jost-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Jost";
    src: url('../fonts/Jost-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Jost";
    src: url('../fonts/Jost-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Jost";
    src: url('../fonts/Jost-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Jost";
    src: url('../fonts/Jost-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Jost";
    src: url('../fonts/Jost-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Jost";
    src: url('../fonts/Jost-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* Variables */
:root {
    --primary-color: #ffda6a;
    --muted-font-color: #212529;
    --color-1: #f68235;
    --color-1-light: #ffae84;
    --color-2: #bd3d94;
    --color-2-light: #cc73ad;
    --color-3: #2b7abf;
    --color-3-light: #67a0d7;
    --color-4: #2cb1d0;
    --color-4-light: #6dcee1;
    --color-5: #97ca51;
    --color-5-light: #b8d877;
    --color-6: #f7d22b;
    --color-6-light: #f4e17a;
}

/* Light mode variables */
@media (prefers-color-scheme: light) {
    :root {
        --navbar-font-color: rgba(0, 0, 0, 0.7);
        --navbar-font-color-hover: rgba(0, 0, 0, 0.9);
        --navbar-background-color: white;
        --navbar-dropdown-background-color: white;
        --navbar-dropdown-background-color-hover: rgb(240, 240, 240);
        --site-background-color: white;
        --site-color: rgb(52, 58, 64);
        --section-alternative-background-color: #f8f8f8;
        --cards-background-color: #F5F5F5;
        --cards-border-color: rgb(250,250,250);
        --cards-shadow-color: rgba(80, 80, 80, 0.25);
        --post-title-color: #444;
        --text-color: #333;
        --text-secondary-color: #666;
        --secondary-color: white;
    }
}

/* Dark mode variables */
@media (prefers-color-scheme: dark) {
    body {
        --navbar-font-color: rgba(230, 230, 230, 0.7);
        --navbar-font-color-hover: rgba(250, 250, 250, 0.9);
        --navbar-background-color: rgb(60,60,60);
        --navbar-dropdown-background-color: rgb(40, 40, 40);
        --navbar-dropdown-background-color-hover: rgb(50, 50, 50);
        --site-background-color: rgb(60, 60, 60);
        --site-color: rgba(230, 230, 230, 0.8);
        --section-alternative-background-color: rgb(40, 40, 40);
        --cards-background-color: rgb(70, 70, 70);
        --cards-border-color: rgb(80, 80, 80);
        --cards-shadow-color: rgba(0,0,0,0.7);
        --post-title-color: rgba(230, 230, 230, 0.9);
        --text-color: rgba(230, 230, 230, 0.95);
        --text-secondary-color: rgba(180, 180, 180, 0.85);
        --secondary-color: rgb(70, 70, 70);
    }

    .site-header.scrolled {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }

    .table {
        --bs-table-color: rgb(240, 240, 240);
        --bs-table-bg: rgb(55, 55, 55);
        --bs-table-striped-color: rgba(230, 230, 230, 1.0);
        --bs-table-striped-bg: rgb(45, 45, 45);
    }

    /* Footer matches header color in dark mode */
    .site-footer {
        background-color: rgb(60, 60, 60);
        color: rgba(230, 230, 230, 0.9);
    }

    .site-footer h3,
    .site-footer p,
    .site-footer a {
        color: rgba(230, 230, 230, 0.9);
    }

    .site-footer a:hover {
        color: rgba(250, 250, 250, 1);
    }

    .developedby {
        border-top-color: rgba(230, 230, 230, 0.3);
    }
    
    /* Header contact bar (bottom bar) matches header in dark mode */
    .header-contact {
        background-color: rgb(60, 60, 60);
    }
    
    .header-contact .btn {
        color: rgba(230, 230, 230, 0.9);
    }
    
    .header-contact .btn:hover {
        color: rgba(250, 250, 250, 1);
    }
}

/* Footer background matches current section color */
body.color-1 .site-footer,
body.color-1 .header-contact,
body.color-1 .developedby {
    background-color: var(--color-1);
}

body.color-1 .site-footer,
body.color-1 .site-footer h3,
body.color-1 .site-footer p,
body.color-1 .site-footer a,
body.color-1 .header-contact .btn,
body.color-1 .developedby,
body.color-1 .developedby a {
    color: rgba(0, 0, 0, 0.85);
}

body.color-1 .site-footer a:hover,
body.color-1 .header-contact .btn:hover,
body.color-1 .developedby a:hover {
    color: rgba(0, 0, 0, 1);
}

body.color-2 .site-footer,
body.color-2 .header-contact,
body.color-2 .developedby {
    background-color: var(--color-2);
}

body.color-2 .site-footer,
body.color-2 .site-footer h3,
body.color-2 .site-footer p,
body.color-2 .site-footer a,
body.color-2 .header-contact .btn,
body.color-2 .developedby,
body.color-2 .developedby a {
    color: white;
}

body.color-2 .site-footer a:hover,
body.color-2 .header-contact .btn:hover,
body.color-2 .developedby a:hover {
    color: rgba(255, 255, 255, 0.8);
}

body.color-3 .site-footer,
body.color-3 .header-contact,
body.color-3 .developedby {
    background-color: var(--color-3);
}

body.color-3 .site-footer,
body.color-3 .site-footer h3,
body.color-3 .site-footer p,
body.color-3 .site-footer a,
body.color-3 .header-contact .btn,
body.color-3 .developedby,
body.color-3 .developedby a {
    color: white;
}

body.color-3 .site-footer a:hover,
body.color-3 .header-contact .btn:hover,
body.color-3 .developedby a:hover {
    color: rgba(255, 255, 255, 0.8);
}

body.color-4 .site-footer,
body.color-4 .header-contact,
body.color-4 .developedby {
    background-color: var(--color-4);
}

body.color-4 .site-footer,
body.color-4 .site-footer h3,
body.color-4 .site-footer p,
body.color-4 .site-footer a,
body.color-4 .header-contact .btn,
body.color-4 .developedby,
body.color-4 .developedby a {
    color: white;
}

body.color-4 .site-footer a:hover,
body.color-4 .header-contact .btn:hover,
body.color-4 .developedby a:hover {
    color: rgba(255, 255, 255, 0.8);
}

body.color-5 .site-footer,
body.color-5 .header-contact,
body.color-5 .developedby {
    background-color: var(--color-5);
}

body.color-5 .site-footer,
body.color-5 .site-footer h3,
body.color-5 .site-footer p,
body.color-5 .site-footer a,
body.color-5 .header-contact .btn,
body.color-5 .developedby,
body.color-5 .developedby a {
    color: rgba(0, 0, 0, 0.85);
}

body.color-5 .site-footer a:hover,
body.color-5 .header-contact .btn:hover,
body.color-5 .developedby a:hover {
    color: rgba(0, 0, 0, 1);
}

body.color-6 .site-footer,
body.color-6 .header-contact,
body.color-6 .developedby {
    background-color: var(--color-6);
}

body.color-6 .site-footer,
body.color-6 .site-footer h3,
body.color-6 .site-footer p,
body.color-6 .site-footer a,
body.color-6 .header-contact .btn,
body.color-6 .developedby,
body.color-6 .developedby a {
    color: rgba(0, 0, 0, 0.85);
}

body.color-6 .site-footer a:hover,
body.color-6 .header-contact .btn:hover,
body.color-6 .developedby a:hover {
    color: rgba(0, 0, 0, 1);
}

/* Dark mode: footer colors should still respect section colors */
@media (prefers-color-scheme: dark) {
    body.color-1 .site-footer,
    body.color-1 .header-contact,
    body.color-1 .developedby {
        background-color: var(--color-1);
    }

    body.color-2 .site-footer,
    body.color-2 .header-contact,
    body.color-2 .developedby {
        background-color: var(--color-2);
    }

    body.color-3 .site-footer,
    body.color-3 .header-contact,
    body.color-3 .developedby {
        background-color: var(--color-3);
    }

    body.color-4 .site-footer,
    body.color-4 .header-contact,
    body.color-4 .developedby {
        background-color: var(--color-4);
    }

    body.color-5 .site-footer,
    body.color-5 .header-contact,
    body.color-5 .developedby {
        background-color: var(--color-5);
    }

    body.color-6 .site-footer,
    body.color-6 .header-contact,
    body.color-6 .developedby {
        background-color: var(--color-6);
    }
    
    /* Improve text contrast on bright backgrounds */
    body.color-4 .site-footer,
    body.color-4 .site-footer h3,
    body.color-4 .site-footer p,
    body.color-4 .site-footer a,
    body.color-4 .header-contact,
    body.color-4 .header-contact .btn,
    body.color-4 .developedby,
    body.color-4 .developedby a {
        color: rgba(0, 0, 0, 0.85);
    }
    
    body.color-5 .site-footer,
    body.color-5 .site-footer h3,
    body.color-5 .site-footer p,
    body.color-5 .site-footer a,
    body.color-5 .header-contact,
    body.color-5 .header-contact .btn,
    body.color-5 .developedby,
    body.color-5 .developedby a {
        color: rgba(0, 0, 0, 0.85);
    }
    
    body.color-6 .site-footer,
    body.color-6 .site-footer h3,
    body.color-6 .site-footer p,
    body.color-6 .site-footer a,
    body.color-6 .header-contact,
    body.color-6 .header-contact .btn,
    body.color-6 .developedby,
    body.color-6 .developedby a {
        color: rgba(0, 0, 0, 0.85);
    }
    
    body.color-4 .site-footer a:hover,
    body.color-4 .header-contact .btn:hover,
    body.color-4 .developedby a:hover,
    body.color-5 .site-footer a:hover,
    body.color-5 .header-contact .btn:hover,
    body.color-5 .developedby a:hover,
    body.color-6 .site-footer a:hover,
    body.color-6 .header-contact .btn:hover,
    body.color-6 .developedby a:hover {
        color: rgba(0, 0, 0, 1);
    }
}

/* Base styles */
html, body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Jost", Arial, sans-serif;
    font-size: 1.05rem;
    font-weight: 300;
    background-color: var(--site-background-color);
    color: var(--site-color);
}

/* Header and Navigation */
.site-header {
    background-color: var(--navbar-background-color);
    box-shadow: none;
    transition: box-shadow 0.3s ease;
}

.site-header.scrolled {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

#main-nav {
    background-color: var(--navbar-background-color) !important;
    color: var(--navbar-font-color);
}

/* Ensure the navbar element itself never shows a box-shadow (header has the shadow after scroll)
   This prevents duplicated/strong shadows when both header and navbar would render shadows. */
#main-nav {
    box-shadow: none !important;
}

.site-header.scrolled #main-nav {
    box-shadow: none !important;
}

.nav-link {
    color: var(--navbar-font-color) !important;
    transition: all 0.3s ease;
    padding: 0.5rem 1rem;
    border-bottom: 2px solid transparent;
}

.nav-link:hover {
    color: var(--navbar-font-color-hover) !important;
}

/* Color variations for nav items */
.nav-1 .nav-link:hover { border-bottom-color: var(--color-1); }
.nav-1 .nav-link.active { border-bottom-color: var(--color-1-light); font-weight: bold; }
.nav-1 .current-menu-item > .nav-link,
.nav-1 .current-menu-ancestor > .nav-link,
.nav-1 .current-menu-parent > .nav-link { border-bottom-color: var(--color-1-light); font-weight: bold; }
.nav-1 a:active { color: var(--color-1); }
.nav-1 .dropdown-item.active,
.nav-1 .dropdown-item:active {
    background-color: var(--navbar-dropdown-background-color);
    color: var(--navbar-font-color);
    font-weight: bold;
}

.nav-2 .nav-link:hover { border-bottom-color: var(--color-2); }
.nav-2 .nav-link.active { border-bottom-color: var(--color-2-light); font-weight: bold; }
.nav-2 .current-menu-item > .nav-link,
.nav-2 .current-menu-ancestor > .nav-link,
.nav-2 .current-menu-parent > .nav-link { border-bottom-color: var(--color-2-light); font-weight: bold; }
.nav-2 a:active { color: var(--color-2); }
.nav-2 .dropdown-item.active,
.nav-2 .dropdown-item:active {
    background-color: var(--navbar-dropdown-background-color);
    color: var(--navbar-font-color);
    font-weight: bold;
}

.nav-3 .nav-link:hover { border-bottom-color: var(--color-3); }
.nav-3 .nav-link.active { border-bottom-color: var(--color-3-light); font-weight: bold; }
.nav-3 .current-menu-item > .nav-link,
.nav-3 .current-menu-ancestor > .nav-link,
.nav-3 .current-menu-parent > .nav-link { border-bottom-color: var(--color-3-light); font-weight: bold; }
.nav-3 a:active { color: var(--color-3); }
.nav-3 .dropdown-item.active,
.nav-3 .dropdown-item:active {
    background-color: var(--navbar-dropdown-background-color);
    color: var(--navbar-font-color);
    font-weight: bold;
}

.nav-4 .nav-link:hover { border-bottom-color: var(--color-4); }
.nav-4 .nav-link.active { border-bottom-color: var(--color-4-light); font-weight: bold; }
.nav-4 .current-menu-item > .nav-link,
.nav-4 .current-menu-ancestor > .nav-link,
.nav-4 .current-menu-parent > .nav-link { border-bottom-color: var(--color-4-light); font-weight: bold; }
.nav-4 a:active { color: var(--color-4); }
.nav-4 .dropdown-item.active,
.nav-4 .dropdown-item:active {
    background-color: var(--navbar-dropdown-background-color);
    color: var(--navbar-font-color);
    font-weight: bold;
}

.nav-5 .nav-link:hover { border-bottom-color: var(--color-5); }
.nav-5 .nav-link.active { border-bottom-color: var(--color-5-light); font-weight: bold; }
.nav-5 .current-menu-item > .nav-link,
.nav-5 .current-menu-ancestor > .nav-link,
.nav-5 .current-menu-parent > .nav-link { border-bottom-color: var(--color-5-light); font-weight: bold; }
.nav-5 a:active { color: var(--color-5); }
.nav-5 .dropdown-item.active,
.nav-5 .dropdown-item:active {
    background-color: var(--navbar-dropdown-background-color);
    color: var(--navbar-font-color);
    font-weight: bold;
}

.nav-6 .nav-link:hover { border-bottom-color: var(--color-6); }
.nav-6 .nav-link.active { border-bottom-color: var(--color-6-light); font-weight: bold; }
.nav-6 .current-menu-item > .nav-link,
.nav-6 .current-menu-ancestor > .nav-link,
.nav-6 .current-menu-parent > .nav-link { border-bottom-color: var(--color-6-light); font-weight: bold; }
.nav-6 a:active { color: var(--color-6); }
.nav-6 .dropdown-item.active,
.nav-6 .dropdown-item:active {
    background-color: var(--navbar-dropdown-background-color);
    color: var(--navbar-font-color);
    font-weight: bold;
}

/* Dynamic page coloring based on active menu parent */
/* Use :has() to detect which nav-X item is current-menu-ancestor/parent, then apply color-X to body */
@supports selector(:has(.nav-1)) {
    body:has(.menu-item.nav-1.current-menu-ancestor),
    body:has(.menu-item.nav-1.current-menu-parent) {
        --active-section-color: var(--color-1);
    }
    
    body:has(.menu-item.nav-2.current-menu-ancestor),
    body:has(.menu-item.nav-2.current-menu-parent) {
        --active-section-color: var(--color-2);
    }
    
    body:has(.menu-item.nav-3.current-menu-ancestor),
    body:has(.menu-item.nav-3.current-menu-parent) {
        --active-section-color: var(--color-3);
    }
    
    body:has(.menu-item.nav-4.current-menu-ancestor),
    body:has(.menu-item.nav-4.current-menu-parent) {
        --active-section-color: var(--color-4);
    }
    
    body:has(.menu-item.nav-5.current-menu-ancestor),
    body:has(.menu-item.nav-5.current-menu-parent) {
        --active-section-color: var(--color-5);
    }
    
    body:has(.menu-item.nav-6.current-menu-ancestor),
    body:has(.menu-item.nav-6.current-menu-parent) {
        --active-section-color: var(--color-6);
    }
    
    /* Apply the active section color to page headers, links, etc. */
    body:has(.menu-item.nav-1.current-menu-ancestor) .page-header,
    body:has(.menu-item.nav-1.current-menu-parent) .page-header {
        border-left-color: var(--color-1);
    }
    
    body:has(.menu-item.nav-1.current-menu-ancestor) .entry-content a,
    body:has(.menu-item.nav-1.current-menu-parent) .entry-content a {
        color: var(--color-1);
    }
    
    body:has(.menu-item.nav-2.current-menu-ancestor) .page-header,
    body:has(.menu-item.nav-2.current-menu-parent) .page-header {
        border-left-color: var(--color-2);
    }
    
    body:has(.menu-item.nav-2.current-menu-ancestor) .entry-content a,
    body:has(.menu-item.nav-2.current-menu-parent) .entry-content a {
        color: var(--color-2);
    }
    
    body:has(.menu-item.nav-3.current-menu-ancestor) .page-header,
    body:has(.menu-item.nav-3.current-menu-parent) .page-header {
        border-left-color: var(--color-3);
    }
    
    body:has(.menu-item.nav-3.current-menu-ancestor) .entry-content a,
    body:has(.menu-item.nav-3.current-menu-parent) .entry-content a {
        color: var(--color-3);
    }
    
    body:has(.menu-item.nav-4.current-menu-ancestor) .page-header,
    body:has(.menu-item.nav-4.current-menu-parent) .page-header {
        border-left-color: var(--color-4);
    }
    
    body:has(.menu-item.nav-4.current-menu-ancestor) .entry-content a,
    body:has(.menu-item.nav-4.current-menu-parent) .entry-content a {
        color: var(--color-4);
    }
    
    body:has(.menu-item.nav-5.current-menu-ancestor) .page-header,
    body:has(.menu-item.nav-5.current-menu-parent) .page-header {
        border-left-color: var(--color-5);
    }
    
    body:has(.menu-item.nav-5.current-menu-ancestor) .entry-content a,
    body:has(.menu-item.nav-5.current-menu-parent) .entry-content a {
        color: var(--color-5);
    }
    
    body:has(.menu-item.nav-6.current-menu-ancestor) .page-header,
    body:has(.menu-item.nav-6.current-menu-parent) .page-header {
        border-left-color: var(--color-6);
    }
    
    body:has(.menu-item.nav-6.current-menu-ancestor) .entry-content a,
    body:has(.menu-item.nav-6.current-menu-parent) .entry-content a {
        color: var(--color-6);
    }
}

/* Fallback for browsers without :has() support - use position-based coloring */
@supports not selector(:has(.nav-1)) {
    body.color-1 .page-header { border-left-color: var(--color-1); }
    body.color-1 .entry-content a { color: var(--color-1); }
    body.color-2 .page-header { border-left-color: var(--color-2); }
    body.color-2 .entry-content a { color: var(--color-2); }
    body.color-3 .page-header { border-left-color: var(--color-3); }
    body.color-3 .entry-content a { color: var(--color-3); }
    body.color-4 .page-header { border-left-color: var(--color-4); }
    body.color-4 .entry-content a { color: var(--color-4); }
    body.color-5 .page-header { border-left-color: var(--color-5); }
    body.color-5 .entry-content a { color: var(--color-5); }
    body.color-6 .page-header { border-left-color: var(--color-6); }
    body.color-6 .entry-content a { color: var(--color-6); }
}

/* Search overlay styles (moved from root style.css) */
.lilli-search-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:9999;padding:1.25rem;background:rgba(0,0,0,0.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s}
.lilli-search-overlay.open{opacity:1;visibility:visible}
.lilli-search-panel{background:#fff;width:100%;max-width:820px;border-radius:12px;padding:1.25rem 1.5rem;box-shadow:0 20px 40px rgba(0,0,0,0.35);position:relative;transform:translateY(-8px) scale(.995);transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .2s;opacity:0}
.lilli-search-overlay.open .lilli-search-panel{transform:none;opacity:1}
.lilli-search-close{position:absolute;right:0.5rem;top:0.5rem;border:none;background:transparent;font-size:1.5rem;line-height:1;color:rgba(0,0,0,0.6);cursor:pointer}
.lilli-search-close:hover{color:rgba(0,0,0,0.85)}
.lilli-search-form{display:flex}
.lilli-search-input{flex:1;padding:0.9rem 1.1rem;font-size:1.25rem;border:1px solid rgba(0,0,0,0.12);border-radius:8px;width:100%;background:var(--wp--preset--color--background,#fff)}
.lilli-search-input::placeholder{color:rgba(0,0,0,0.45)}
.lilli-search-input:focus{outline:none;box-shadow:0 6px 20px rgba(0,0,0,0.08)}
.header-search-wrapper{display:flex;align-items:center}
.header-search-toggle{padding:0.35rem;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:inherit}
.header-search-toggle:hover{background:rgba(0,0,0,0.03)}
.header-search-toggle:focus{outline:2px solid rgba(0,0,0,0.08);outline-offset:2px}

@media (max-width:767px){
    .lilli-search-panel{max-width:96%;padding:1rem;border-radius:10px}
    .lilli-search-input{font-size:1rem}
}

/* Fallback: colorize menu items by position when no nav-X class is set */
.navbar-nav>li:nth-child(1) .nav-link:hover { border-bottom-color: var(--color-1); }
.navbar-nav>li:nth-child(1) .nav-link.active { border-bottom-color: var(--color-1-light); font-weight: bold; }
.navbar-nav>li:nth-child(2) .nav-link:hover { border-bottom-color: var(--color-2); }
.navbar-nav>li:nth-child(2) .nav-link.active { border-bottom-color: var(--color-2-light); font-weight: bold; }
.navbar-nav>li:nth-child(3) .nav-link:hover { border-bottom-color: var(--color-3); }
.navbar-nav>li:nth-child(3) .nav-link.active { border-bottom-color: var(--color-3-light); font-weight: bold; }
.navbar-nav>li:nth-child(4) .nav-link:hover { border-bottom-color: var(--color-4); }
.navbar-nav>li:nth-child(4) .nav-link.active { border-bottom-color: var(--color-4-light); font-weight: bold; }
.navbar-nav>li:nth-child(5) .nav-link:hover { border-bottom-color: var(--color-5); }
.navbar-nav>li:nth-child(5) .nav-link.active { border-bottom-color: var(--color-5-light); font-weight: bold; }
.navbar-nav>li:nth-child(6) .nav-link:hover { border-bottom-color: var(--color-6); }
.navbar-nav>li:nth-child(6) .nav-link.active { border-bottom-color: var(--color-6-light); font-weight: bold; }

/* Section color theming: only header-contact bar changes color, not navbar */
.color-1 .header-contact { background-color: var(--color-1); }
.color-2 .header-contact { background-color: var(--color-2); }
.color-3 .header-contact { background-color: var(--color-3); }
.color-4 .header-contact { background-color: var(--color-4); }
.color-5 .header-contact { background-color: var(--color-5); }
.color-6 .header-contact { background-color: var(--color-6); }

/* Header contact bar button colors */
.color-1 .header-contact .btn, .color-2 .header-contact .btn, .color-3 .header-contact .btn, .color-4 .header-contact .btn, .color-5 .header-contact .btn { color: white; }
.color-6 .header-contact .btn { color: #000; }

/* Hero Section */
.hero-section, .hero-front {
    position: relative;
    min-height: 370px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    padding: 2rem 0;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-title {
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-size: 3rem;
    font-weight: 300;
    text-transform: uppercase;
    margin: 0;
}

/* Aktuelle Meldungen section */
#aktuelle-meldungen {
    background: var(--section-alternative-background-color);
    padding: 5rem 0;
    margin-top: 0;
}

.preview-cards {
    padding: 2rem 0;
}

.preview-cards .row {
    margin-bottom: 3rem;
}

#aktuelle-meldungen .post-title {
    margin: 0 0 3rem 0;
    font-size: 2rem;
    font-weight: 300;
    text-transform: uppercase;
}

#aktuelle-meldungen .post-title span {
    position: relative;
    top: 2px;
    display: inline-block;
    border-bottom: 4px solid var(--primary-color) !important;
    padding-bottom: 0.5rem;
}

/* Main Content */
.site-main {
    padding: 0;
}

.site-main.page-content {
    padding: 1.5rem 0 3rem 0;
}

/* Breadcrumbs spacing kept tight like Hugo */
#breadcrumbs {
    margin: 0;
    padding: 0;
}

#breadcrumbs .breadcrumbs {
    padding: 0;
}

.page-content .entry-content {
    line-height: 1.8;
}

/* Post Cards */
.post-card, .projekt-card, .card {
    background-color: var(--cards-background-color);
    box-shadow: 0px 8px 56px var(--cards-shadow-color);
    border-radius: 0.75rem;
    overflow: hidden;
    border: none;
    transition: transform 0.2s ease;
}

.post-card:hover, .projekt-card:hover, .card:hover {
    transform: scale(1.02);
}

.post-thumbnail img, .projekt-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

.post-content, .projekt-content {
    padding: 1.5rem;
}

/* Single Post Styling */
.single-post-featured {
    padding: 0;
    margin: 0 0 2rem 0;
    display: block;
}

.single-post-featured img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 500px;
    border-radius: 5px;
    box-shadow: 0px 0px 52px -12px rgba(0, 0, 0, 0.45);
    object-fit: cover;
}

.single-post-article {
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.single-post-content {
    padding: 0;
    background: transparent;
}

.single-post-content .entry-header {
    text-align: center;
    margin-bottom: 2rem;
}

.single-post-content .entry-title {
    text-transform: uppercase;
    font-weight: 400;
    margin-bottom: 1rem;
    font-size: 1.75rem;
}

.single-post-content .entry-meta {
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.single-post-content .post-categories {
    text-align: center;
    margin-bottom: 1rem;
}

.single-post-content .entry-summary {
    font-size: 1rem;
    line-height: 1.6;
}

.entry-title {
    font-size: 1.75rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
    color: var(--post-title-color);
}

.entry-title a {
    color: var(--post-title-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.entry-title a:hover {
    color: var(--color-3);
}

.post-categories, .projekt-categories {
    margin-bottom: 1rem;
}

.badge {
    font-weight: 400;
    padding: 0.35em 0.65em;
    margin-right: 0.25rem;
}

.entry-meta {
    font-size: 0.9rem;
    color: var(--text-secondary-color);
    margin-bottom: 1rem;
}

.entry-meta i {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 0.25rem;
}

.entry-summary {
    line-height: 1.6;
}

/* Buttons */
.btn-primary {
    background-color: var(--color-3);
    border-color: var(--color-3);
    font-weight: 400;
}

.btn-primary:hover {
    background-color: var(--color-3-light);
    border-color: var(--color-3-light);
}

.btn-success {
    background-color: var(--color-5);
    border-color: var(--color-5);
}

.btn-success:hover {
    background-color: var(--color-5-light);
    border-color: var(--color-5-light);
}

/* Sidebar */
.widget-area {
    padding-left: 2rem;
}

.widget {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: var(--cards-background-color);
    border-radius: 0.5rem;
}

.widget-title {
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--color-3);
    padding-bottom: 0.5rem;
}

/* Footer */
.site-footer {
    box-shadow: inset 0 0.1em 1em rgba(0, 0, 0, 0.15);
    padding: 40px 0 20px 0;
}

.site-footer h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.site-footer p {
    margin-bottom: 0.75rem;
}

.site-footer a {
    text-decoration: none;
}

.site-footer a:hover {
    font-weight: 700;
}

#footer-nav ul {
    list-style: circle;
    margin: 0;
    padding: 0;
}

#footer-nav ul li {
    margin-bottom: 0.25rem;
}

#footer-nav ul li a {
    text-decoration: none;
}

#footer-nav {
    padding-top: 10px;
}

.developedby {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    padding: 20px 0;
    text-align: center;
    background-color: var(--color-6);
    color: rgba(0, 0, 0, 0.85);
    box-shadow: inset 0 0.1em 1em rgba(0, 0, 0, 0.15);
}

.developedby a {
    margin-left: 10px;
    text-decoration: none;
    color: rgba(0, 0, 0, 0.85);
}

.developedby a:hover {
    font-weight: 700;
    color: rgba(0, 0, 0, 1);
}

/* Header contact bar */
.header-contact {
    background-color: var(--color-6);
    padding: 0.35rem 0;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05);
}

.header-contact .btn {
    color: #000;
    font-weight: 400;
}

.header-contact .btn:hover {
    color: rgba(0,0,0,0.7);
}

/* Navbar tweaks */
#main-nav {
    background-color: var(--navbar-background-color);
    color: var(--navbar-font-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

#navbar-toggle>div {
    cursor: pointer;
    border: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#navbar-toggle:is(:hover, :focus) {
    border: none;
}

.icon-bar {
    display: block;
    width: 25px;
    height: 4px;
    margin: 2px;
    background-color: rgba(0, 0, 0, 0.7);
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

@media (prefers-color-scheme: dark) {
    #navbar-toggle .icon-bar {
        background-color: var(--navbar-font-color);
    }

    #navbar-toggle:is(:hover, :focus) .icon-bar {
        background-color: var(--navbar-font-color-hover);
    }
}

/* Navbar stays white, no section color override on navbar */

#navbar-toggle:is(:hover, :focus) .icon-bar {
    background-color: rgba(0, 0, 0, 0.9);
}

#navbar-toggle[aria-expanded='true'] .icon-bar:is(:first-child, :last-child) {
    position: absolute;
    margin: 0;
    width: 30px;
}

#navbar-toggle[aria-expanded='true'] .icon-bar:first-child { transform: rotate(45deg); }
#navbar-toggle[aria-expanded='true'] .icon-bar:nth-child(2) { opacity: 0; }
#navbar-toggle[aria-expanded='true'] .icon-bar:last-child { transform: rotate(-45deg); }

.dropdown-menu {
    margin: 0.5em;
    border-radius: 5px;
    background-color: var(--navbar-dropdown-background-color);
}

.dropdown-menu>li>a { background-color: var(--navbar-dropdown-background-color); }
.dropdown-menu>li>a:hover { background-color: var(--navbar-dropdown-background-color-hover); }

/* Frontpage hero image */
.hero-front { padding-top: var(--navbar-height, 0); }
.main-image {
    border-radius: 10px;
    box-shadow: 0px 8px 56px var(--cards-shadow-color);
}

/* Preview cards (Aktuelle Meldungen) */
.preview-cards .card {
    background-color: var(--secondary-color) !important;
    box-shadow: 0px 8px 56px var(--cards-shadow-color);
    border-radius: .75rem;
    color: var(--text-color) !important;
    cursor: context-menu;
    overflow: hidden;
    border: none;
    transition: transform .2s;
    height: 100%;
}

.preview-cards .card:hover { 
    transform: scale(1.02);
}

.preview-cards .card a { 
    text-decoration: none; 
    color: var(--text-color); 
}

.preview-cards .card a h5 { 
    color: var(--text-color) !important; 
    margin-bottom: 0.5rem !important; 
    font-size: 1.1rem;
}

.preview-cards .post-footer {
    padding: 1rem;
    background-color: var(--secondary-color) !important;
    color: var(--text-color) !important;
    border-top: 1px solid var(--cards-border-color);
    opacity: 0.9;
}

.preview-cards .post-footer a {
    background-color: var(--secondary-color) !important;
    color: var(--text-secondary-color) !important;
    border-color: var(--primary-color) !important;
    transition: none;
}

.preview-cards .post-footer a:hover { 
    color: var(--primary-color) !important;
}

.preview-cards .card>.card-header { 
    padding: 0 !important; 
    border: none !important; 
    background-color: var(--secondary-color) !important;
}

.preview-cards .card>.card-header .card-img-top { 
    width: 100%; 
    background-color: transparent !important;
}

.preview-cards .card-categories { 
    margin-bottom: 0.5rem !important;
}

.preview-cards .card-body {
    padding: 1.5rem !important;
    color: var(--text-color) !important;
}

.preview-cards .card-text,
.preview-cards .card-text p {
    color: var(--text-color) !important;
}

/* Pagination */
.pagination {
    margin-top: 3rem;
    justify-content: center;
}

.pagination .page-numbers {
    padding: 0.5rem 0.75rem;
    margin: 0 0.25rem;
    border: 1px solid #ddd;
    border-radius: 0.375rem;
    text-decoration: none;
    color: var(--text-color);
    transition: all 0.3s ease;
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Cards grid spacing */
#content { padding: 30px 0 40px; }

/* Footer styling closer to Hugo */
.footer {
    box-shadow: inset 0 0.1em 1em rgba(0, 0, 0, 0.15);
    background: var(--color-6);
    padding: 40px 0 20px 0;
}

.developedby { border-top: 1px dotted #000; padding-top: 20px; text-align: center; }
.developedby a { margin-left: 10px; }
.developedby a:hover { font-weight: 700; }

/* Utility styles */
.btn-circle { width: 30px; height: 30px; line-height: 30px; text-align: center; padding: 0; }
.btn-circle-inner { position: relative; top: -3px; width: 16px; height: 16px; }
.lightbox-img img { border-radius: 10px; box-shadow: 0px 8px 56px var(--cards-shadow-color); }
.card-title { font-size: 1.2em; font-weight: 500; }

/* Pagination */
.pagination {
    margin-top: 2rem;
}

.page-link {
    color: var(--color-3);
    border-color: var(--cards-border-color);
}

.page-link:hover {
    color: var(--color-3-light);
    background-color: var(--section-alternative-background-color);
}

.page-item.active .page-link {
    background-color: var(--color-3);
    border-color: var(--color-3);
}

/* Post Navigation */
.post-navigation {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--cards-border-color);
}

.post-navigation .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    flex: 1 1 48%;
    background: var(--section-alternative-background-color);
    border: 1px solid var(--cards-border-color);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.post-navigation .nav-previous:hover,
.post-navigation .nav-next:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

.post-navigation a {
    text-decoration: none;
    display: block;
    color: var(--text-color);
}

.post-navigation a:hover .nav-title {
    color: var(--color-3);
}

@media (prefers-color-scheme: dark) {
    .post-navigation .nav-previous,
    .post-navigation .nav-next {
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    
    .post-navigation .nav-previous:hover,
    .post-navigation .nav-next:hover {
        box-shadow: 0 6px 16px rgba(0,0,0,0.5);
    }
}

.nav-subtitle {
    display: block;
    font-size: 0.875rem;
    color: var(--text-secondary-color);
    margin-bottom: 0.25rem;
}

.nav-title {
    font-weight: 400;
}

/* Cookie Dialog */
#cookie-dialog {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 1.5rem;
    z-index: 9999;
    display: none;
}

#cookie-dialog p {
    margin-bottom: 1rem;
}

#cookie-dialog a {
    color: var(--color-6);
}

#accept-cookies {
    background-color: var(--color-6);
    color: black;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
}

/* Image Modal */
#image-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    cursor: pointer;
}

#modal-image {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Responsive */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2rem;
    }

    .widget-area {
        padding-left: 0;
        margin-top: 2rem;
    }

    .footer-top h3 {
        margin-top: 1.5rem;
    }
}

/* WordPress Core Styles */
.alignleft {
    float: left;
    margin-right: 1.5rem;
    margin-bottom: 1rem;
}

.alignright {
    float: right;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img.alignleft, img.alignright, img.aligncenter {
    max-width: 100%;
    height: auto;
}

/* Clearfix */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Kollegium Cards */
.kollegium-grid {
    margin: 2rem 0;
}

.kollegium-card {
    background-color: var(--cards-background-color);
    box-shadow: 0px 8px 56px var(--cards-shadow-color);
    border-radius: 0.75rem;
    overflow: hidden;
    border: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.kollegium-card:hover {
    transform: scale(1.02);
    box-shadow: 0px 12px 64px var(--cards-shadow-color);
}

.kollegium-card-image {
    width: 100%;
    height: 300px;
    overflow: hidden;
    background-color: var(--section-alternative-background-color);
}

.kollegium-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kollegium-card-body {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--cards-background-color);
}

.kollegium-card-name {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: var(--text-color);
}

.kollegium-card-funktion {
    font-size: 0.95rem;
    color: var(--text-secondary-color);
    margin: 0;
    font-style: italic;
}

/* Förderverein Cards */
.foerderverein-card {
    background-color: var(--cards-background-color);
    box-shadow: 0px 8px 56px var(--cards-shadow-color);
    border-radius: 0.75rem;
    overflow: hidden;
    border: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.foerderverein-card:hover {
    transform: scale(1.02);
    box-shadow: 0px 12px 64px var(--cards-shadow-color);
}

.foerderverein-card-image {
    width: 100%;
    height: 300px;
    overflow: hidden;
    background-color: var(--section-alternative-background-color);
}

.foerderverein-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.foerderverein-card-body {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--cards-background-color);
}

.foerderverein-card-name {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: var(--text-color);
}

.foerderverein-card-funktion {
    font-size: 0.95rem;
    color: var(--text-secondary-color);
    margin: 0;
    font-style: italic;
}

/* Hero Image Section */
#hero-single {
    padding-top: var(--navbar-height, 60px);
    padding-bottom: 0;
    margin: 0;
}

.post-title-img {
    margin: 0.5em auto 0.5em auto;
    border-radius: 10px;
    box-shadow: 0px 0px 52px -12px rgba(0, 0, 0, 0.45);
    width: 100%;
    height: auto;
}

.post-credits-image {
    font-size: 0.8em;
    margin: -0.5em auto 0.5em auto;
    text-align: center;
    color: var(--text-secondary-color);
    font-style: italic;
}

@media (max-width: 768px) {
    #hero-single {
        padding-top: var(--navbar-height, 60px);
        padding-bottom: 0.75rem;
    }

    .post-title-img {
        border-radius: 8px;
    }
}

/* Remove visual shadow around single-page hero images; keep frontpage shadow */
#hero-single .post-title-img {
    box-shadow: none !important;
}

/* Reduce top spacing above hero for specific migrated pages to match Hugo layout */
body.page-id-97 #hero-single {
    padding-top: 0; /* match original site's spacing */
}


/* Page header styles with section colors */
.color-1 .page-header {
    border-left: 1em solid var(--color-1);
    padding-left: 0.5em;
    text-transform: uppercase;
    font-weight: 200;
}

.color-2 .page-header {
    border-left: 1em solid var(--color-2);
    padding-left: 0.5em;
    text-transform: uppercase;
    font-weight: 200;
}

.color-3 .page-header {
    border-left: 1em solid var(--color-3);
    padding-left: 0.5em;
    text-transform: uppercase;
    font-weight: 200;
}

.color-4 .page-header {
    border-left: 1em solid var(--color-4);
    padding-left: 0.5em;
    text-transform: uppercase;
    font-weight: 200;
}

.color-5 .page-header {
    border-left: 1em solid var(--color-5);
    padding-left: 0.5em;
    text-transform: uppercase;
    font-weight: 200;
}

.color-6 .page-header {
    border-left: 1em solid var(--color-6);
    padding-left: 0.5em;
    text-transform: uppercase;
    font-weight: 200;
}

/* Content links with section colors */
.color-1 .entry-content a {
    color: var(--color-1);
}

.color-2 .entry-content a {
    color: var(--color-2);
}

.color-3 .entry-content a {
    color: var(--color-3);
}

.color-4 .entry-content a {
    color: var(--color-4);
}

.color-5 .entry-content a {
    color: var(--color-5);
}

.color-6 .entry-content a {
    color: var(--color-6);
}