/* Brand colors, shared across the dark-blue/light-blue bars, links and
   buttons below - defined once here so a rebrand only needs one edit. */
:root {
    --brand-dark-blue: #0c3c60;
    --brand-dark-blue-hover: #145183;
    --brand-light-blue: #d1e0eb;
}

body {
    padding: 0;
    margin: 0;
}

html,
body {
    height: 100%;
    width: 100%;
}

/* Body is a column flex container so the map fills all available space
   and #sitefooter sits below it, full width, instead of overlaying it. */
body {
    display: flex;
    flex-direction: column;
}

#map {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
}

/* Hidden crawlable copy inside #map for search engines, screen readers and
   no-JS visitors. Leaflet renders visually on top of it once the app loads,
   so this content stays out of sight without relying on JS. */
#map > .seo-content,
#map > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

/* Leaflet applies mix-blend-mode: plus-lighter on .leaflet-tile to hide
   Chromium's sub-pixel tile-gap rendering bug (see Leaflet#3575, #9399).
   That workaround itself causes visible white grid lines at some zoom
   levels. Overriding it to "normal" removes the grid but may bring back
   faint tile seams in Chrome — acceptable trade-off. No permanent fix
   exists upstream as of Leaflet 1.9.4 / 2.0-alpha. */
.leaflet-tile {
    mix-blend-mode: normal !important;
}


/* Greyed-out state for the download-visible-turbines button, shown when
   zoomed out too far for any turbines to be visible. */
.gin-control-download-disabled {
    opacity: 0.4;
    cursor: default !important;
    pointer-events: none;
}

.leaflet-bar a {
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    color: #444;
    display: block;
    height: 26px;
    width: 26px;
    text-align: center;
    text-decoration: none;
    font: bold 18px 'Lucida Console', Monaco, monospace;
}

/* Shared centering for the Font Awesome icons used by our custom topright
   controls (zoom in/out, download). Centering them here - instead of via
   one-off inline styles per button - keeps their visual weight consistent
   with the locate-me control's bold icon. */
.leaflet-bar a .fa {
    line-height: 26px;
    vertical-align: middle;
}

/* Zoom in/out buttons: smaller 14px icons */
.gin-control-zoom-in .fa,
.gin-control-zoom-out .fa {
    font-size: 14px;
}

/* Download button: larger 18px icon */
.gin-control-download-button .fa {
    font-size: 18px;
}

/* Normalize spacing so the search box matches the other topright controls */
.leaflet-top.leaflet-right .geocoder-control {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    position: relative;
}

/* esri-leaflet-geocoder's built-in search icon is a low-contrast grey PNG
   that looks noticeably lighter than the other topright controls. Replace
   it with a Font Awesome icon at the same color/weight as the rest. */
.geocoder-control-input {
    background-image: none !important;
}

.geocoder-control::after {
    font-family: FontAwesome;
    content: '\f002';
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(-50%, -40%);
    font-size: 18px;
    font-weight: 900;
    pointer-events: none;
}

/* Bring search control and suggestions to front so they appear above share/info buttons */
.leaflet-top.leaflet-right .geocoder-control {
    z-index: 1000 !important;
}

.geocoder-control-suggestions {
    z-index: 10001 !important;
}

/* Top and bottom Leaflet controls are separate stacking contexts, so raise
   the entire top context above bottom-right scale controls. (to keep info
   box in front of scale) */
#map .leaflet-top {
    z-index: 1002 !important;
}

#map .leaflet-bottom {
    z-index: 1001 !important;
}

/* Bottom-right corner: stack the scale control, turbine-count label and
   Leaflet's attribution string as three separate rows (scale on top,
   turbine count in the middle, attribution nearest the map edge) instead of
   Leaflet's default float-based flow, which depends on control-add order.
   Using flex + explicit `order` makes the stacking order independent of
   when each control is added to the map. */
#map .leaflet-bottom.leaflet-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#map .leaflet-bottom.leaflet-right .leaflet-control-scale {
    order: 1;
}

#map .leaflet-bottom.leaflet-right .turbine-count-control {
    order: 2;
}

#map .leaflet-bottom.leaflet-right .leaflet-control-attribution {
    order: 3;
}

/* Turbine count label, styled to match Leaflet's own attribution control
   directly below it so the two read as a matching pair. Both are capped to
   the map's width and ellipsized instead of wrapping/overflowing on narrow
   (phone) screens - the attribution string is the less important of the
   two, but each row is independent now so both get the same safety net. */
.turbine-count-control,
#map .leaflet-bottom.leaflet-right .leaflet-control-attribution {
    max-width: calc(100vw - 20px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

/* Top site bar - full-width, same look as the #sitefooter bar below the
   map. Placed in normal document flow above the map via flex order (it's
   appended to <body> after #map in the DOM, but rendered first).
   3-column grid (spacer / link / switcher) instead of flexbox so the
   diagnostics link stays exactly centered - as it was before the language
   switcher existed - regardless of the switcher's width, rather than
   flexbox's space-between (which centers only when both sides are equal
   width). min-width: 0 on the two outer columns lets them shrink below
   their content's natural size instead of forcing the link off-center. */
#referencelink {
    order: -1;
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 8px;
    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: 3px 10px;
    white-space: normal;
}

#referencelink .ref-spacer {
    min-width: 0;
}

#referencelink a {
    color: var(--brand-light-blue);
    text-decoration: underline;
}

#referencelink a:hover {
    color: #fff;
}

/* Language switcher in the top bar. Unlike the FAQ pages, the map bar always
   uses the compact <select> version so it stays stable regardless of the
   available horizontal space. */
.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;
}

/* Solar site theme override (solar.html, solar-faq*.html, solar-legal.html) -
   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) - bars, language switcher, license-modal
   button/link, popup close button, and popup table links - without having
   to restyle each selector individually. Applied via js/siteconfig.js's
   SOLAR_SITE_CONFIG.bodyClass and main.js, which adds this class when
   window.ACTIVE_SITE_ID === 'solar' (and hardcoded on <body> for the
   static FAQ/legal pages, which have no JS site-config plumbing). */
body.site-solar {
    --brand-dark-blue: #dc973c;
    --brand-dark-blue-hover: #d67a1e;
    --brand-light-blue: #3a2000;
}

body.site-solar #referencelink a:hover,
body.site-solar #sitefooter a:hover {
    color: #000;
}

.notification {
    z-index: 700;
    line-height: 30px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    position: absolute;
}

#zoom_element {
    opacity: 0.8;
    bottom: 20%;
    left: 50%;
    background-color: #662483;
    color: white;
}

/* Centered, white "toast" banner - used for the loading indicator and for
   brief temporary messages such as the "Link copied!" confirmation. */
#loading_text,
.center-toast {
    position: fixed;
    opacity: 0.8;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    color: black;
    height: auto;
    min-height: 30px;
    line-height: 30px;
    max-width: 90vw;
    padding: 2px 0;
    white-space: normal;
    z-index: 700;
    text-align: center;
    border-radius: 5px;
}

.error {
    opacity: 1;
    bottom: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    background-color: rgb(255 89 0 / 0.83);
    color: black;
}

/* Data licence notice shown before a CSV download starts. */
.license-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.license-modal-dialog {
    background-color: #fff;
    color: #222;
    max-width: 380px;
    margin: 20px;
    padding: 18px 20px;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    font-family: sans-serif;
}

.license-modal-text {
    margin: 0 0 16px 0;
    font-size: 13px;
    line-height: 1.5;
}

.license-modal-text a {
    color: var(--brand-dark-blue);
    text-decoration: underline;
}

.license-modal-actions {
    text-align: right;
}

.license-modal-ok {
    background-color: var(--brand-dark-blue);
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 6px 18px;
    font-size: 13px;
    cursor: pointer;
}

.license-modal-ok:hover {
    background-color: var(--brand-dark-blue-hover);
}

/* Bottom site footer bar - same look as the top #referencelink bar, but
   placed below the map in normal document flow (full width, not an
   overlay) so it doesn't cover the Leaflet attribution control. */
#sitefooter {
    position: static;
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
    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: 3px 10px;
    white-space: normal;
}

#sitefooter a {
    color: var(--brand-light-blue);
    text-decoration: underline;
}

#sitefooter a:hover {
    color: #fff;
}

/* Keeps the footer's FAQ/licence/impressum/privacy links from wrapping
   individually onto separate lines on narrow screens. */
.footer-links-nowrap {
    white-space: nowrap;
}

/* Info control (js/infoelement.js) title bar and content close button. */
.info-title {
    padding: 5px;
}

.info-close-button {
    cursor: pointer;
}

/* Turbine info popup (js/renderer.js / js/webgl.js) - denser,
   more modern chrome than Leaflet's defaults. Trim the wrapper's own
   padding/margin so the table below controls all spacing itself. */
.turbine-popup .leaflet-popup-content-wrapper {
    padding: 0;
    border-radius: 8px;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.25);
}

.turbine-popup .leaflet-popup-content {
    margin: 0;
    width: 280px;
}

.turbine-popup .leaflet-popup-close-button {
    /* Match the site's brand color instead of Leaflet's default grey/blue. */
    color: var(--brand-dark-blue);
}

table.turbine-popup-table {
    border-collapse: collapse;
    font: 13px/1.3 sans-serif;
    width: 100%;
}

table.turbine-popup-table td {
    padding: 5px 12px;
    border-bottom: 1px solid #eee;
}

table.turbine-popup-table tr:last-child td {
    border-bottom: none;
}

/* Label column - muted, slightly bolder, and never wrapped. The value
   column (second td) wraps normally so long content breaks onto extra
   lines instead of stretching/overflowing the popup. */
table.turbine-popup-table td:first-child {
    color: #667;
    font-weight: 600;
    padding-right: 10px;
    white-space: nowrap;
    width: 80px;
}


table.turbine-popup-table td:last-child {
    word-break: break-word;
}

table.turbine-popup-table a {
    color: var(--brand-dark-blue);
    text-decoration: none;
}

table.turbine-popup-table a:hover {
    color: var(--brand-dark-blue-hover);
    text-decoration: underline;
}