/* Brand colors moved to css/chrome.css (loaded alongside this file on
   every index.html, both sites - see templates/page.hbs) since they're shared
   byte-for-byte with css/static.css's FAQ/legal pages. */

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

/* Turbine site only (see css/chrome.css's "Persistent site header/footer"
   section): when #map is nested inside .page-content (not a direct flex
   child of <body>), it needs to fill that wrapper via absolute positioning
   instead of the flex-based sizing above, since .page-content itself is the
   flex item now (shared with the landing hero overlay stacked on top of
   #map at the same position). Solar's #map is still a direct child of
   <body>, so the plain `#map` rule above still applies there unchanged. */
.page-content > #map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

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

/* Solar site theme override (index.html, plus localized
   /{lang}/index.html) for the legacy #referencelink/#sitefooter bars
   above - redefining the brand custom properties under body.site-solar
   re-themes them (plus license-modal button/link, popup close button, and
   popup table links below) without restyling each selector individually.
   The live .site-header/.site-footer solar override (and the --brand-*
   redefinition itself) now lives in css/chrome.css - see that file's header
   comment - loaded alongside this file via templates/page.hbs. */
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;
}

/* Export options and licence notice. */
.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;
    margin: 20px;
    padding: 0;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    font-family: sans-serif;
    width: min(480px, calc(100vw - 40px));
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

.license-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 16px 11px 20px;
    background: var(--brand-dark-blue);
    color: #fff;
}

.license-modal-title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
}

.license-modal-close {
    border: 0;
    background: transparent;
    color: inherit;
    font: bold 25px/1 sans-serif;
    cursor: pointer;
    padding: 0 2px;
}

.license-modal-close:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.license-modal-body {
    padding: 18px 20px 20px;
}

.license-modal-scope,
.license-modal-formats {
    border: 0;
    margin: 0 0 18px;
    padding: 0;
}

.license-modal-scope legend,
.license-modal-formats legend {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 9px;
}

.license-modal-scope label,
.license-modal-formats label {
    font-size: 14px;
    cursor: pointer;
}

.license-modal-scope label {
    display: block;
    margin: 0 0 8px;
}

.license-modal-formats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
}

.license-modal-formats legend {
    width: 100%;
}

.license-modal-scope input,
.license-modal-formats input {
    accent-color: var(--brand-dark-blue);
}

.license-modal-actions {
    margin: 4px 0 15px;
}

.license-modal-download {
    box-sizing: border-box;
    width: min(100%, 400px);
    min-height: 40px;
    background-color: var(--brand-dark-blue);
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 9px 18px;
    font-size: 14px;
    cursor: pointer;
}

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

.license-modal-download:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.license-modal-acceptance {
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
}

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

.license-modal-error {
    color: #a00000;
    font-size: 12px;
    margin: 8px 0 0;
}

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

/* Share control row. The cell spans both columns, so it also matches the
   nowrap/fixed-width first-column rule above and has to opt back out of it -
   its label is a full sentence and must be allowed to wrap. */
table.turbine-popup-table td.turbine-popup-share-cell {
    text-align: center;
    white-space: normal;
    width: auto;
    padding-top: 8px;
}

/* Reads as a button rather than another link, because unlike the "view in
   ..." rows above it copies to the clipboard instead of navigating away. */
button.turbine-popup-share {
    font: inherit;
    color: var(--brand-dark-blue);
    background: #f4f6f8;
    border: 1px solid #d6dbe0;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
}

button.turbine-popup-share:hover {
    background: #e8ecf0;
    color: var(--brand-dark-blue-hover);
}

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

/* Status badge (js/renderer.js's buildTurbinePopup()) - only ever shown for
   register-sourced turbines whose status isn't the default 'operating', so an
   amber/teal/red accent is enough to draw attention without needing a legend. */
.turbine-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 12px;
}

.turbine-status-badge.turbine-status-planned {
    background: #fff3cd;
    color: #7a5c00;
}

.turbine-status-badge.turbine-status-approved {
    background: #d1ecf1;
    color: #0c5460;
}

.turbine-status-badge.turbine-status-unavailable {
    background: #f8d7da;
    color: #842029;
}

/* ---- ventodyne map badge (templates/page.hbs, wind site only) ----
 * A discreet, collapsible floating badge over the bottom-left corner of the
 * map (no existing Leaflet control uses that corner - zoomControl is
 * disabled and the locate control/attribution/scale/turbine-count all live
 * bottom-right - see main.js/this file's #map .leaflet-bottom.leaflet-right
 * rules above), promoting ventodyne's commercial SCADA diagnostics/
 * wake-steering services without disrupting map browsing. Positioned
 * relative to .page-content (same absolute-inset ancestor #map uses) so it
 * stays anchored to the map viewport, not the whole page. z-index is set
 * above #map .leaflet-top/.leaflet-bottom (1002/1001 !important above, e.g.
 * the scale control) so the expanded card isn't hidden behind them, while
 * staying below #landing-hero-overlay's 9999 so the hero still fully covers
 * it while shown. */
.ventodyne-widget {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 1003;
    max-width: calc(100vw - 24px);
    font-family: sans-serif;
}

.ventodyne-widget-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    background: rgba(12, 60, 96, 0.55);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 7px 14px;
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    opacity: 0.9;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.ventodyne-widget-badge:hover,
.ventodyne-widget-badge:focus-visible,
.ventodyne-widget.is-expanded .ventodyne-widget-badge {
    background: var(--brand-dark-blue);
    opacity: 1;
}

.ventodyne-widget-badge-short {
    display: none;
}

.ventodyne-widget-card {
    box-sizing: border-box;
    margin-bottom: 8px;
    width: 320px;
    max-width: calc(100vw - 24px);
    background: var(--brand-dark-blue);
    color: #fff;
    border-radius: 8px;
    padding: 16px 18px;
    font-size: 13px;
    line-height: 1.55;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}

.ventodyne-widget-list {
    margin: 0 0 10px 0;
    padding-left: 18px;
}

.ventodyne-widget-list li {
    margin-bottom: 6px;
}

.ventodyne-widget.is-expanded .ventodyne-widget-card {
    order: -1;
}

.ventodyne-widget {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ventodyne-widget-eyebrow {
    margin: 0 0 8px 0;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--brand-light-blue);
}

.ventodyne-widget-card p {
    margin: 0 0 10px 0;
}

.ventodyne-widget-cta {
    display: inline-block;
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
}

.ventodyne-widget-cta:hover {
    text-decoration: none;
}

@media (max-width: 760px) {
    .ventodyne-widget-badge-full {
        display: none;
    }

    .ventodyne-widget-badge-short {
        display: inline;
    }

    .ventodyne-widget-card {
        width: calc(100vw - 24px);
    }

    /* Leaflet's bottom-right attribution text sits at a similar height on
       narrow viewports, so double the badge's distance from the bottom
       edge here to avoid overlapping it. */
    .ventodyne-widget {
        bottom: 24px;
    }
}