/* ============================================================
   Header colour options. body.hdr-light or body.hdr-blue.
   (No class = the original dark header.)
   ============================================================ */

/* ---------- Light: white bar, navy text, amber accents ---------- */
.hdr-light .site-header { background: #ffffff; box-shadow: 0 1px 0 var(--border), 0 4px 18px rgba(17, 24, 39, 0.07); }
.hdr-light a.site-title,
.hdr-light a.site-title:hover { color: var(--dark); }
.hdr-light a.site-title span { color: #c27a14; }
.hdr-light .site-tagline { color: var(--text-light); }
.hdr-light .menu-toggle { border-color: var(--border); }
.hdr-light .menu-toggle span { background: var(--dark); }

.hdr-light .nav-bar { background: #ffffff; border-top: 1px solid var(--border); }
.hdr-light .primary-nav > li > a { color: var(--text); }
.hdr-light .primary-nav > li > a:hover,
.hdr-light .primary-nav > li.current-menu-item > a,
.hdr-light .primary-nav > li.current-menu-ancestor > a {
    color: var(--primary);
    background: none;
    box-shadow: inset 0 -3px 0 var(--accent);
}
.hdr-light .primary-nav li ul {
    background: #ffffff;
    border: 1px solid var(--border);
    border-top: 3px solid var(--accent);
    box-shadow: var(--shadow-lg);
}
.hdr-light .primary-nav li ul li a { color: var(--text); }
.hdr-light .primary-nav li ul li a:hover,
.hdr-light .primary-nav li ul li.current-menu-item a { color: var(--primary); background: var(--bg); }
.hdr-light .build-nav .nav-overview a { color: #b06d10; }
.hdr-light .build-nav .nav-n { color: #c27a14; }
.hdr-light .build-nav .nav-divider { background: var(--border); }

.hdr-light .nav-search { background: var(--bg); border-color: var(--border); }
.hdr-light .nav-search:focus-within { background: #fff; border-color: var(--accent); }
.hdr-light .nav-search input { color: var(--text); }
.hdr-light .nav-search input::placeholder { color: var(--text-muted); }
.hdr-light .nav-search button { color: var(--text-light); }

@media (max-width: 768px) {
    .hdr-light .primary-nav > li > a { border-bottom-color: var(--border); box-shadow: none; }
    .hdr-light .primary-nav li ul { background: var(--bg); border: none; border-left: 3px solid var(--accent); box-shadow: none; }
}

/* ---------- Blue: the site's own blue instead of near black ---------- */
.hdr-blue .site-header { background: var(--primary); box-shadow: 0 2px 14px rgba(26, 63, 99, 0.35); }
.hdr-blue .site-tagline { color: rgba(255, 255, 255, 0.7); }
.hdr-blue .nav-bar { background: var(--primary-dark); border-top-color: rgba(255, 255, 255, 0.1); }
.hdr-blue .primary-nav > li > a { color: rgba(255, 255, 255, 0.92); }
.hdr-blue .primary-nav li ul { background: var(--primary-dark); }
.hdr-blue .btn-project { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }

/* ============================================================
   Light overview banner and footer (all header options)
   ============================================================ */
.bo-hero {
    background: linear-gradient(180deg, #e6eef6 0%, var(--bg) 100%);
    color: var(--text);
    border-bottom: 1px solid var(--border);
}
.bo-hero h1 { color: var(--dark); }
.bo-kicker { color: #b06d10; }
.ba-hint { color: var(--text-light); }
.ba-slider { background: var(--border); box-shadow: var(--shadow-lg); }

.site-footer {
    background: #ffffff;
    border-top: 3px solid var(--primary);
}
.site-footer p { color: var(--text-light); }
.site-footer a { color: var(--primary); }
.site-footer a:hover { color: #b06d10; }
.footer-credit { color: var(--text-muted) !important; }
.bo-other-link { background: var(--primary); }
.bo-other-link:hover { background: var(--primary-dark); color: #fff; }
.bo-other-link .nav-label { color: #f3c37a; }
.bo-extra-icon { background: var(--primary); color: #fff; }