/**
 * event-map.css - EventMapWidget (widgets/EventMapWidget.php +
 * widgets/views/event-map.php).
 *
 * Map left (70%), persistent panel right (30%), stacked on phones. Colours
 * come from the site's own brand tokens (primary green family), with the
 * brief's reference palette as fallbacks - no second hard-coded identity.
 */

.evm2 {
    --evm-green: var(--color-primary-500, #527a5d);
    --evm-green-deep: var(--color-primary-800, #294c38);
    --evm-sage: color-mix(in srgb, var(--evm-green) 9%, var(--bg-primary, #fffefb));
    --evm-line: color-mix(in srgb, var(--evm-green) 20%, transparent);
    --evm-muted: color-mix(in srgb, var(--evm-green-deep) 62%, transparent);
    font-family: var(--font-family-body, inherit);
    color: var(--evm-green-deep);
}

/* ---- controls ----------------------------------------------------------- */
.evm2 .evm-controls {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 1rem 2rem;
    align-items: start;
    margin-bottom: 1rem;
}

.evm2 .evm-control-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--evm-green-deep);
    margin-bottom: 0.35rem;
}

.evm2 .evm-where-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.evm2 .evm-place {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    border-radius: var(--radius-lg, 0.75rem);
    border-color: var(--evm-line);
    background: var(--bg-primary, #fffefb);
}

.evm2 .evm-place:focus {
    border-color: var(--evm-green);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--evm-green) 25%, transparent);
}

.evm2 .evm-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0 1rem;
    border-radius: var(--radius-full, 999px);
    border: 1px solid var(--evm-line);
    background: var(--bg-primary, #fffefb);
    color: var(--evm-green-deep);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
}

.evm2 .evm-btn:hover {
    border-color: var(--evm-green);
}

.evm2 .evm-btn-quiet {
    background: transparent;
    border-color: transparent;
    text-decoration: underline;
}

.evm2 .evm-btn[hidden] {
    display: none;
}

.evm2 .evm-btn:focus-visible,
.evm2 .evm-list-item:focus-visible,
.evm2 .evm-back:focus-visible,
.evm2 .evm-d-cta:focus-visible {
    outline: 2px solid var(--evm-green-deep);
    outline-offset: 2px;
}

.evm2 .evm-where-status {
    min-height: 1.25rem;
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: var(--evm-muted);
}

.evm2 .evm-radius output {
    font-weight: 700;
    color: var(--evm-green-deep);
}

.evm2 .evm-range {
    accent-color: var(--evm-green);
    height: 44px;
}

.evm2 .evm-range:disabled {
    opacity: 0.45;
}

/* Brand-green slider (Bootstrap's .form-range paints its own blue thumb). */
.evm2 .evm-range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(to right,
        var(--evm-green) var(--evm-fill, 16%),
        color-mix(in srgb, var(--evm-green) 22%, var(--bg-primary, #fffefb)) var(--evm-fill, 16%));
}

.evm2 .evm-range::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    margin-top: -7px;
    border: 3px solid var(--bg-primary, #fffefb);
    border-radius: 50%;
    background: var(--evm-green);
    box-shadow: 0 1px 4px rgba(41, 76, 56, 0.35);
}

.evm2 .evm-range::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--evm-green) 22%, var(--bg-primary, #fffefb));
}

.evm2 .evm-range::-moz-range-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--evm-green);
}

.evm2 .evm-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 3px solid var(--bg-primary, #fffefb);
    border-radius: 50%;
    background: var(--evm-green);
}

.evm2 .evm-range:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--evm-green-deep);
    outline-offset: 2px;
}

.evm2 .evm-radius-hint {
    display: block;
    font-size: 0.8rem;
    color: var(--evm-muted);
}

.evm2 .evm-radius-hint[hidden] {
    display: none;
}

/* ---- map + panel -------------------------------------------------------- */
.evm2 .evm-body {
    display: grid;
    grid-template-columns: minmax(0, 70fr) minmax(0, 30fr);
    gap: clamp(1.5rem, 2.2vw, 2rem);
    align-items: stretch;
}

.evm2 .event-map-leaflet {
    z-index: 0;
    width: 100%;
    border-radius: var(--radius-xl, 1.25rem);
    border: 1px solid var(--evm-line);
    overflow: hidden;
    background: #f8f7f1;
}

.evm2 .evm-panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--evm-sage);
    border: 1px solid var(--evm-line);
    border-radius: var(--radius-xl, 1.25rem);
    padding: 1.25rem 1.25rem 1rem;
    max-height: var(--evm-panel-max, 520px);
}

.evm2 .evm-count {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-family: var(--font-family-eyebrow, var(--font-family-body, inherit));
    color: var(--evm-green-deep);
}

.evm2 .evm-panel-list,
.evm2 .evm-panel-detail {
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
}

.evm2 .evm-panel-list[hidden],
.evm2 .evm-panel-detail[hidden] {
    display: none;
}

.evm2 .evm-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.evm2 .evm-list li + li {
    border-top: 1px solid var(--evm-line);
}

.evm2 .evm-list-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    width: 100%;
    padding: 0.75rem 0.25rem;
    border: 0;
    background: transparent;
    text-align: left;
    color: inherit;
    cursor: pointer;
    border-radius: 0.5rem;
}

.evm2 .evm-list-item:hover .evm-list-title {
    text-decoration: underline;
}

.evm2 .evm-list-title {
    font-weight: 700;
    line-height: 1.35;
}

.evm2 .evm-list-cats {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--evm-green);
}

.evm2 .evm-list-meta {
    font-size: 0.8125rem;
    color: var(--evm-muted);
}

.evm2 .evm-empty,
.evm2 .evm-more {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: var(--evm-muted);
}

.evm2 .evm-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 0;
    background: none;
    padding: 0.25rem 0;
    margin-bottom: 0.75rem;
    min-height: 44px;
    color: var(--evm-green);
    font-weight: 600;
    cursor: pointer;
}

.evm2 .evm-d-eyebrow {
    margin: 0 0 0.35rem;
    font-family: var(--font-family-eyebrow, var(--font-family-body, inherit));
    font-size: 0.75rem;
    font-weight: var(--website-font-weight-eyebrow, 600);
    letter-spacing: var(--website-font-tracking-eyebrow, 0.16em);
    text-transform: uppercase;
    color: var(--evm-green-deep);
}

.evm2 .evm-d-title {
    margin: 0 0 0.75rem;
    font-family: var(--font-family-heading, inherit);
    font-weight: var(--website-font-weight-heading, 400);
    font-size: clamp(1.35rem, 1rem + 1vw, 1.85rem);
    line-height: 1.2;
    color: var(--evm-green-deep);
}

.evm2 .evm-d-line {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    margin: 0 0 0.4rem;
    font-size: 0.9rem;
    color: var(--evm-green-deep);
}

.evm2 .evm-d-line i {
    width: 1rem;
    color: var(--evm-green);
}

.evm2 .evm-d-dist {
    color: var(--evm-muted);
}

.evm2 .evm-approx {
    color: var(--evm-muted);
    font-size: 0.8rem;
}

.evm2 .evm-d-excerpt {
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
    line-height: 1.55;
}

.evm2 .evm-d-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    padding: 0.7rem 1.35rem;
    min-height: 44px;
    border-radius: var(--radius-full, 999px);
    background: var(--evm-green);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.evm2 .evm-d-cta:hover {
    background: var(--evm-green-deep);
    color: #fff;
}

.evm2 .evm-skipped {
    margin: 0.6rem 0 0;
    font-size: 0.8125rem;
    color: var(--evm-muted);
}

/* ---- pins, clusters, centre, radius ------------------------------------ */
.evm-pin {
    background: transparent;
    border: 0;
}

.evm-pin::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-primary-500, #527a5d);
    border: 2px solid #fffefb;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 2px 6px rgba(41, 76, 56, 0.35);
}

.evm-pin-glyph {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 0.72rem;
}

.evm-pin-city::before,
.evm-pin-org::before {
    opacity: 0.72;
}

.evm-pin.is-selected::before {
    background: var(--color-primary-800, #294c38);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary-500, #527a5d) 35%, transparent), 0 3px 8px rgba(41, 76, 56, 0.45);
}

.evm-pin.is-selected .evm-pin-glyph {
    font-size: 0.9rem;
}

.evm-cluster {
    background: transparent;
    border: 0;
}

.evm-cluster span {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-primary-500, #527a5d) 88%, transparent);
    border: 3px solid color-mix(in srgb, var(--color-primary-500, #527a5d) 30%, #fffefb);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    box-shadow: 0 2px 6px rgba(41, 76, 56, 0.3);
}

.evm-centre {
    background: #efdfdc;
    border: 3px solid var(--color-primary-800, #294c38);
    border-radius: 50%;
}

.evm-radius-ring {
    fill: var(--color-primary-500, #527a5d);
    fill-opacity: 0.1;
    stroke: var(--color-primary-500, #527a5d);
    stroke-opacity: 0.55;
    stroke-width: 1.5;
}

.evm-tooltip {
    font-family: var(--font-family-body, inherit);
    font-weight: 600;
    color: var(--color-primary-800, #294c38);
    border-radius: 0.5rem;
    border-color: color-mix(in srgb, var(--color-primary-500, #527a5d) 25%, transparent);
}

/* Interim basemap (standard OSM tiles until a custom MapTiler style is
   configured - helpers/MapTilesHelper.php): a gentle warm, less saturated
   tint so it sits closer to the cream/sage palette. Stopgap only. */
.evm2 .evm-tiles-interim {
    filter: saturate(0.7) sepia(0.12) brightness(1.03);
}

/* Leaflet controls in the brand look. */
.evm2 .leaflet-bar a {
    color: var(--evm-green-deep);
    width: 36px;
    height: 36px;
    line-height: 36px;
}

.evm2 .leaflet-bar {
    border: 1px solid var(--evm-line);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(41, 76, 56, 0.12);
}

.evm2 .leaflet-control-attribution {
    font-size: 0.7rem;
    background: rgba(255, 254, 251, 0.85);
}

/* Place suggestions (web/js/address-autocomplete.js), same look as mileage. */
.address-autocomplete-suggestions {
    display: none;
    position: fixed;
    z-index: 2000;
    max-height: 280px;
    overflow-y: auto;
    background: var(--bs-body-bg, #fff);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.address-autocomplete-suggestions .list-group-item {
    border-left: 0;
    border-right: 0;
    font-size: 0.85rem;
}

/* ---- dark mode ------------------------------------------------------------ */
/* The site-wide dark rule inverts map tiles (web/css/site.css), which turns
   this branded map's greens into a murky negative. Here the tiles are only
   dimmed and softened instead, so parks stay green and water stays pale -
   the map reads as the same map at night rather than a photo negative. */
[data-theme="dark"] .evm2 .leaflet-tile,
[data-bs-theme="dark"] .evm2 .leaflet-tile {
    filter: brightness(0.62) contrast(1.08) saturate(0.7);
}

[data-theme="dark"] .evm2 .evm-tiles-interim,
[data-bs-theme="dark"] .evm2 .evm-tiles-interim {
    filter: none;
}

[data-theme="dark"] .evm2 .event-map-leaflet,
[data-bs-theme="dark"] .evm2 .event-map-leaflet {
    background: #1b221e;
}

[data-theme="dark"] .evm2 .leaflet-control-attribution,
[data-bs-theme="dark"] .evm2 .leaflet-control-attribution {
    background: rgba(27, 34, 30, 0.85);
    color: #cfd9d2;
}

[data-theme="dark"] .evm2 .leaflet-control-attribution a,
[data-bs-theme="dark"] .evm2 .leaflet-control-attribution a {
    color: #9dc3a8;
}

[data-theme="dark"] .evm2 .leaflet-bar a,
[data-bs-theme="dark"] .evm2 .leaflet-bar a {
    background: #222b26;
    color: #e6efe8;
    border-bottom-color: rgba(157, 195, 168, 0.25);
}

[data-bs-theme="dark"] .evm2 {
    --evm-green-deep: var(--text-primary, #e6efe8);
    --evm-sage: color-mix(in srgb, var(--evm-green) 14%, var(--bg-primary, #151a17));
    --evm-line: color-mix(in srgb, var(--evm-green) 35%, transparent);
    --evm-muted: color-mix(in srgb, var(--text-primary, #e6efe8) 65%, transparent);
}

[data-bs-theme="dark"] .evm2 .evm-btn,
[data-bs-theme="dark"] .evm2 .evm-place {
    background: transparent;
    color: var(--text-primary, #e6efe8);
}

/* ---- phones: map above the panel ---------------------------------------- */
@media (max-width: 767.98px) {
    .evm2 .evm-controls {
        grid-template-columns: minmax(0, 1fr);
    }

    .evm2 .evm-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .evm2 .event-map-leaflet {
        height: min(62vh, 420px) !important;
    }

    .evm2 .evm-panel {
        max-height: none;
    }

    .evm2 .evm-btn-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .evm2 [data-evm-me] {
        width: 44px;
        justify-content: center;
        padding: 0;
    }
}