/* css/chrome.css
 *
 * Shared persistent site chrome: the .site-header/.site-footer bar pair
 * (templates/partials/site-header.hbs / site-footer.hbs), the language
 * switcher they embed (templates/partials/lang-switch.hbs), the
 * app-switcher cross-promo link, and the brand color custom properties
 * they're all built from (also reused by non-chrome bits of the map UI and
 * static pages, e.g. license-modal buttons, popup links, FAQ headings).
 *
 * Loaded on all four page templates - templates/page.hbs (index.html,
 * alongside css/style.css + css/landing.css, for both sites) and
 * templates/faq.hbs/templates/legal.hbs (faq.html/legal.html, alongside
 * css/static.css) - so this is the single source of truth for the chrome
 * shared identically across every page. Previously these rules were
 * copy-pasted across css/landing.css and css/static.css, which let them
 * drift out of sync (a mobile app-switcher-doesn't-hide bug and a mobile
 * header-height-jump bug both came from that duplication).
 *
 * css/style.css and css/static.css each still keep their own *dead* legacy
 * #referencelink/#sitefooter bar rules (js/siteconfig.js's
 * legacyChromeEnabled is false everywhere now, so those are unused) -
 * intentionally left alone here to keep this file scoped to the live site
 * chrome.
 */

:root {
    --brand-dark-blue: #0c3c60;
    --brand-dark-blue-hover: #145183;
    --brand-light-blue: #d1e0eb;
}

/* ---- Persistent site header/footer (all page types) ---- */

.site-header {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr minmax(0, auto) 1fr;
    align-items: center;
    column-gap: 12px;
    background-color: var(--brand-dark-blue);
    color: #fff;
    padding: 10px 20px;
    font-family: sans-serif;
    box-sizing: border-box;
}

.site-header-title {
    grid-column: 2;
    min-width: 0;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-header-nav {
    grid-column: 3;
    justify-self: end;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 18px;
    white-space: nowrap;
}

.app-switcher {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 13px;
    line-height: 16px;
    text-decoration: none;
    opacity: 0.88;
    transition: opacity 0.15s ease, text-decoration-color 0.15s ease;
}

.app-switcher:hover,
.app-switcher:focus-visible {
    color: #fff;
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.app-switcher-icon {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    object-fit: contain;
}

/* Compact language switcher (templates/partials/lang-switch.hbs) - the
   header always uses the <select> version so it stays stable regardless of
   the available horizontal space. justify-self: end is a no-op in the
   header's flex nav but keeps .lang-switch correctly right-aligned in the
   legacy #referencelink grid bar (css/style.css/css/static.css) too. */
.lang-switch {
    min-width: 0;
    justify-self: end;
    white-space: nowrap;
}

.lang-switch-select {
    display: inline-block;
    background-color: var(--brand-dark-blue);
    color: var(--brand-light-blue);
    border: 1px solid var(--brand-light-blue);
    border-radius: 3px;
    font-size: 12px;
    line-height: 14px;
    padding: 1px 3px;
}

.lang-switch-links {
    display: none;
}

/* Flex + wrap (rather than plain inline text) so that if the brand and the
   link list don't both fit on one line, the *first* break falls between them
   - keeping "Home · Map · FAQ · Legal · Impressum" together as long as
   possible - instead of the browser wrapping mid-way through either span. */
.site-footer {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 6px;
    text-align: center;
    background-color: var(--brand-dark-blue);
    color: var(--brand-light-blue);
    font-family: sans-serif;
    font-size: 13px;
    line-height: 16px;
    padding: 10px;
    box-sizing: border-box;
}

.site-footer a {
    color: var(--brand-light-blue);
    text-decoration: underline;
}

.site-footer a:hover {
    color: #fff;
}

@media (max-width: 760px) {
    .site-header {
        padding: 8px 12px;
        column-gap: 8px;
    }

    .site-header-title {
        font-size: 13px;
    }

    .app-switcher {
        display: none;
    }
}

/* Solar site theme override (index.html/faq.html/legal.html under
   public_solar/, plus their localized variants) - redefining the brand custom properties
   under body.site-solar re-themes every element that uses
   var(--brand-dark-blue)/var(--brand-light-blue)/var(--brand-dark-blue-hover)
   - header/footer bars, language switcher, license-modal button/link, popup
   close button, popup table links - without restyling each selector
   individually. The class is baked directly into the <body class="site-solar">
   tag by scripts/generate-localized-pages.mjs (via bodyClass) rather than
   added at runtime, so the solar theme is correct from the very first
   paint - no flash of the turbine site's blue while the deferred JS module
   loads. Also hardcoded on <body> for the static FAQ/legal pages, which
   have no JS site-config plumbing. */
body.site-solar {
    --brand-dark-blue: #A95700;
    --brand-dark-blue-hover: #8E4800;
    --brand-light-blue: #f5dcc0;
}