/*
 * ADVx third-party overrides — MapLibre GL theming. Deliberately UNLAYERED
 * and linked AFTER maplibre-gl.css: unlayered styles beat every @layer, and
 * source order beats maplibre's own unlayered rules, so nothing here needs
 * !important (the pre-migration file needed 30 of them purely because Pico
 * loaded after application.css).
 */

:root {
    --map-popup-bg: light-dark(#ffffff, var(--gray-2));
    --map-popup-color: light-dark(#333333, #f0f0f0);
}

/* Hairline frame around every rendered map — the dark map palette matches the
   page background, so maps need an edge to read as a distinct surface. */
.maplibregl-map {
    border: var(--advx-border-width) solid var(--advx-border);
}

[data-controller~="featured-map"] .maplibregl-canvas {
    cursor: default;
}

/* Absolute-fill map containers. maplibre-gl.css forces
   `.maplibregl-map { position: relative }` on the element it mounts into, so
   these must live here (unlayered, after it) to win — a layered rule loses
   to it regardless of specificity, and the container collapses to 0 height. */
.card-thumb .card-thumb-map {
    position: absolute;
    inset: 0;
}
.profile-cover .profile-cover-map {
    position: absolute;
    inset: 0;
}
/* The cover's fade replaces the global hairline map frame. */
.profile-cover .maplibregl-map {
    border: none;
}

.maplibregl-popup-content {
    background-color: var(--map-popup-bg);
    color: var(--map-popup-color);
    border-radius: var(--advx-radius-2);
    box-shadow: var(--advx-shadow-2);
    font-family: var(--advx-font-body);
}

/* Quiet, correctly-hovering "×" (the global button styles would otherwise
   paint it as a solid amber box). */
.maplibregl-popup-close-button {
    background: transparent;
    color: var(--map-popup-color);
    border: 0;
    padding: 0 0.35rem;
    width: auto;
    font-size: 1.1rem;
    line-height: 1;
    opacity: 0.6;
    box-shadow: none;
}
.maplibregl-popup-close-button:hover {
    background: rgba(127, 127, 127, 0.18);
    opacity: 1;
}

/* Keep MapLibre's compact 29px control squares free of the app's button
   styling; the group's rounded corners are preserved by clipping. */
.maplibregl-ctrl-group {
    overflow: hidden;
}
.maplibregl-ctrl-group button {
    width: 29px;
    height: 29px;
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: inherit;
    line-height: 1;
    background-color: transparent;
    color: inherit;
}
.maplibregl-ctrl-group button:not(:disabled):hover {
    background-color: rgba(0, 0, 0, 0.06);
}

/* 29px is a mouse-only size. On a touch screen — which is where the map
   actually gets used — it's well under the 44px floor, so grow the controls
   there and leave the desktop density alone. */
@media (pointer: coarse) {
    .maplibregl-ctrl-group button {
        width: 44px;
        height: 44px;
    }

    /* Everything clickable clears the floor. Most controls already do; the ones
       that didn't were the compact ones — filter chips, .btn-sm actions, the
       navbar's Log Out, the map popup's "×". */
    button,
    a[role="button"],
    summary[role="button"],
    .maplibregl-popup-close-button,
    .toast-close,
    .planner-layer-toggle,
    .route-weather-alerts,
    select {
        min-height: 44px;
        min-width: 44px;
    }

    /* Boxes that only grew vertically would otherwise top-align their label. */
    .theme-toggle,
    .planner-layer-toggle,
    .route-weather-alerts {
        display: inline-flex;
        align-items: center;
    }

    .theme-toggle {
        justify-content: center;
    }
}

.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
    border-top-color: var(--map-popup-bg);
}
.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
    border-bottom-color: var(--map-popup-bg);
}
.maplibregl-popup-anchor-left .maplibregl-popup-tip {
    border-right-color: var(--map-popup-bg);
}
.maplibregl-popup-anchor-right .maplibregl-popup-tip {
    border-left-color: var(--map-popup-bg);
}