/* The site's maps (the map module: map_css.html, static_map.html). Both
   skins load it, so every colour names the v3 token first and falls back to
   a plain value the v1 skin reads as well. */

.map-box {
    width: 100%;
    height: 22rem;
    border-radius: var(--radius-md, 0.5rem);
    border: 1px solid var(--line, rgba(0, 0, 0, 0.125));
    overflow: hidden;
    z-index: 0;
}

.map-box.is-tall {
    height: min(70vh, 40rem);
}

.map-box.is-small {
    height: 14rem;
}

.map-note {
    margin: 0.5rem 0 1rem;
    font-size: 0.875rem;
    opacity: 0.75;
}

/* One place as Neshan's static map: the light picture on a light page, the
   dark one on a dark page. The hidden one is loading="lazy", so the browser
   does not fetch it. */
.static-map {
    position: relative;
    margin: 0;
    height: 14rem;
    border-radius: var(--radius-md, 0.5rem);
    border: 1px solid var(--line, rgba(0, 0, 0, 0.125));
    overflow: hidden;
    background-color: var(--page, #f5f5f5);
}

/* while the picture comes: a map glyph, not an empty box */
.static-map:not(.is-loaded)::before {
    content: "\F47F";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-faint, #adb5bd);
    font-family: "bootstrap-icons";
    font-size: 2rem;
}

.static-map-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.static-map-img.is-dark,
[data-bs-theme="dark"] .static-map-img.is-light {
    display: none;
}

[data-bs-theme="dark"] .static-map-img.is-dark {
    display: block;
}

.map-pin {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background-color: var(--brand, #0d6efd);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* the glyph centred the way `.icon-chip` centres one: a 1em flex box, so
   bootstrap-icons' vertical-align stops counting */
.map-pin i {
    display: flex;
    width: 1em;
    height: 1em;
    line-height: 1;
    transform: rotate(45deg);
    color: #fff;
    font-size: 1rem;
}

/* A pin with a photo (`photo`, base_map.js): the picture in the pin's ring,
   round and upright. 44px — the size base_map.js anchors it by. */
.map-pin.is-photo {
    width: 44px;
    height: 44px;
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
    transform: none;
}

.map-pin.is-photo img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* A pin with its name under it (`labels`): the box is the pin's, which
   Leaflet anchors on the place, and the label hangs below the point,
   outside the box — a long name does not move the pin. */
.map-place {
    position: relative;
    width: 100%;
    height: 100%;
}

.map-place-label {
    position: absolute;
    top: 100%;
    left: 50%;
    max-width: 12rem;
    margin-top: 4px;
    padding: 0.1rem 0.5rem;
    overflow: hidden;
    transform: translateX(-50%);
    border: 1px solid var(--line, rgba(0, 0, 0, 0.125));
    border-radius: 999px;
    background-color: var(--surface, #fff);
    color: var(--ink, #212529);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    font-size: var(--fs-xs, 0.75rem);
    font-weight: 600;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* the glyph's drop points 7px below its box */
.map-pin:not(.is-photo) + .map-place-label {
    margin-top: 11px;
}

[data-bs-theme="dark"] .map-place-label {
    border-color: var(--line, rgba(255, 255, 255, 0.15));
    background-color: var(--surface, #212529);
    color: var(--ink, #dee2e6);
}

.leaflet-popup-content {
    font-family: inherit;
    text-align: start;
}

.map-popup-title {
    font-weight: 700;
    display: block;
}

.map-popup-note {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.875em;
    opacity: 0.75;
}

/* The page's card for the picked pin (`[data-map-card]`) is the page's to
   draw; the script shows and hides it, and its parts, with `hidden` — which
   a `display` of the page's must not outrank. */
[data-map-card][hidden],
[data-map-card] [hidden] {
    display: none !important;
}