/* 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-group {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.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-sep {
    color: var(--brand-light-blue);
    opacity: 0.6;
    font-size: 12px;
}

/* Phone-width stand-in for the link row above (templates/partials/site-header.hbs).
   Hidden here so the wide layout is the one that needs no override; the media
   query at the bottom of this file swaps the two. It sits in the header grid's
   first column, which the wide layout leaves empty anyway. */
.map-icons {
    display: none;
    grid-column: 1;
    justify-self: start;
    align-items: center;
    gap: 14px;
}

.map-icon {
    display: inline-flex;
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

.map-icon:hover,
.map-icon:focus-visible {
    opacity: 1;
}

.map-icon img {
    display: block;
    width: 24px;
    height: 24px;
}

/* 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;
    /* Named rather than the header's inherited `sans-serif`, because a select
       is as wide as its widest option even though it shows only one. On
       <html lang="ja"> the generic resolves to a Japanese system font, which
       draws the Cyrillic entry at 120px instead of 60 and blows the control
       out to 148px - showing "日本語" in a box sized for "Українська", and
       taking the space out of the title. Naming a Latin face first keeps every
       language's control the same width; the CJK entries still fall back to a
       font that can draw them. */
    font-family: Arial, Helvetica, sans-serif;
    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;
}

/* Words out, symbols in. 880px rather than a phone width: the wide layout
   centres the title between two equal 1fr tracks, so the empty side is
   reserved at the nav's width - and with the language select that runs to
   370px in the widest languages, leaving the title too little until well
   past tablet size. Measured, the last language stops fitting just under
   880px. */
@media (max-width: 880px) {
    /* Sizing both outer tracks to their contents, instead of mirroring them,
       hands the title what is left. It is then centred between the icons and
       the language select rather than in the bar - which is also why it
       survives this far down at all. */
    .site-header {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .app-switcher-group {
        display: none;
    }

    .map-icons {
        display: inline-flex;
    }
}

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

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


/* 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;
}

/* Battery site theme override, same mechanism as the solar block above.
   Deep teal-green reads as a charge indicator - a full battery, energy held
   in reserve - and sits far from both navy (207 degrees) and burnt orange
   (31 degrees) on the colour wheel at 165, so the three sites are not
   confused in peripheral vision. 7.9:1 against white text.
   Unlike solar it is a *dark* base like the turbine site's navy, so it needs
   none of the inverted-hover overrides solar carries in css/static.css and
   css/style.css - white-on-teal is already the readable combination. */
body.site-battery {
    --brand-dark-blue: #0F5C4C;
    --brand-dark-blue-hover: #15745F;
    --brand-light-blue: #cfe6df;
}