/* Styles owned by `static/js/dayz_map.js` (DayZMap): the overview widget and the place-name labels.
 * Shared by every page that uses those helpers -- the Loot Finder and the interactive map (/map).
 * Moved here from wiki-loot-finder.css when the second page adopted them. */

.dz-ov { position: relative; width: 100%; height: 100%; }
.dz-ov__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dz-ov__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The viewport box. Blue, as in the replay -- and deliberately NOT the red of `.dz-loc--poi` or the
   green of a static loot point, so nothing on the map means the same thing. */
.dz-ov__box {
    fill: rgba(59,130,246,.25);
    stroke: #3b82f6;
    stroke-width: 2;
    cursor: move;
    transition: fill .15s;
}
.dz-ov__box:hover { fill: rgba(59,130,246,.4); }

/* --------------------------------------------------------------------- place names */

/* Town and village labels, drawn by `DayZMap.locationLayer`.
 *
 * These rules are the whole reason that module emits class names instead of an inline style string.
 * Seven templates on this site build the same labels from a copy-pasted `font-size: ...; color: ...`
 * literal, and three of them ALSO set `className: 'settlement-label'` without ever defining that
 * class -- so their labels render inside Leaflet's default white `.leaflet-div-icon` box. The first
 * rule below is the one those pages are missing.
 *
 * The type table is travel.html's, unchanged: yellow for the places you navigate by, red for a
 * point of interest, near-white for a village, grey for everything smaller. The text shadow is
 * doing real work -- the same label crosses snow, forest and tarmac tiles.
 */
.dz-loc-icon {
    background: transparent; border: 0;
    display: flex; align-items: center; justify-content: center;
    text-align: center; white-space: nowrap;
    /* The map underneath is clickable -- `onMapClick` opens the point popup -- and a 150px-wide
       label box swallowing those clicks would put a dead zone over every town. */
    pointer-events: none;
}

.dz-loc { text-shadow: 1px 1px 2px #000; font-size: 10px; font-weight: 400; color: #b0b8c4; }
.dz-loc--capital { font-size: 16px; font-weight: 700; color: #facc15; }
.dz-loc--city    { font-size: 14px; font-weight: 700; color: #facc15; }
.dz-loc--poi     { font-size: 12px; font-weight: 700; color: #ef4444; }
.dz-loc--village { font-size: 11px; font-weight: 700; color: #e5e7eb; }

/* The POI dot, which is the other half of a POI label. Same red as `.dz-loc--poi` above and
   declared next to it for that reason -- these are one mark in two parts. */
.dz-loc-dot { fill: #ef4444; stroke: #ffffff; }