/* Shared styling for the genealogy maps.
   Extracted from the Gypsum Hill Cemetery page so every map looks and behaves
   the same way. Page-specific data lives in each map's own inline script. */

:root {
    /* Resting and hover marker colours. The source artwork drew the boxes yellow
       and swapped to red on rollover; these are reversed, so a marker rests red
       and lights up yellow under the pointer. */
    --marker: #ff0201;
    --marker-hot: #ffff01;
}

.map-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .75rem 1.25rem;
    margin-bottom: .75rem;
}

.map-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
}

.map-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 1.25rem;
    align-items: start;
}

/* A map with nothing marked on it has no side panel to make room for. */
.map-layout.no-panel { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 900px) {
    .map-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Scroll container: the stage can grow past it when zoomed in. */
.map-viewport {
    overflow: auto;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    background: #fff;
    padding: .5rem;
}

.map-stage {
    position: relative;
    width: calc(var(--map-w) * 1px * var(--zoom, 1));
    margin: 0 auto;
    line-height: 0;
}

.map-stage img {
    display: block;
    width: 100%;
    height: auto;
    /* flat-colour source art: keep edges crisp instead of blurring when zoomed */
    image-rendering: pixelated;
}

/* Every marker sits at a percentage of the stage, so it tracks any zoom level. */
.map-marker {
    position: absolute;
    display: block;
    cursor: pointer;
    transition: background-color .1s linear, box-shadow .1s linear;
}

/* Plain colour-box markers are repainted by CSS, exactly covering the box drawn
   in the artwork underneath. */
.map-marker.is-solid {
    background: var(--marker);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}

.map-marker.is-solid:hover,
.map-marker.is-solid:focus-visible,
.map-marker.is-solid.is-active {
    background: var(--marker-hot);
    /* ring in the resting colour: a yellow ring around a yellow fill would
       disappear against the pale map background */
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--marker);
    outline: none;
    z-index: 2;
}

/* Pictorial markers (a diamond, or a labelled place name) keep their artwork and
   get a ring instead, so hovering never hides what it points at. The dark inner
   edge keeps the yellow readable over pale map backgrounds. */
.map-marker:not(.is-solid):hover,
.map-marker:not(.is-solid):focus-visible,
.map-marker:not(.is-solid).is-active {
    box-shadow: 0 0 0 2px #212529, 0 0 0 5px var(--marker-hot);
    border-radius: .15rem;
    outline: none;
    z-index: 2;
}

.map-tip {
    position: fixed;
    z-index: 1080;
    max-width: 18rem;
    padding: .3rem .55rem;
    border-radius: .3rem;
    background: #212529;
    color: #fff;
    font-size: .8125rem;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .1s linear;
}

.map-tip.is-visible { opacity: 1; }

/* Follows the map while it scrolls; scrolls internally only if the window is too
   short to show every name. */
.map-panel {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
}

@media (max-width: 900px) {
    .map-panel { position: static; max-height: none; }
}

.map-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: auto;
}

.map-list li + li { border-top: 1px solid #f1f3f5; }

.map-list a {
    display: block;
    padding: .1rem .4rem;
    border-radius: .25rem;
    text-decoration: none;
    color: #212529;
    font-size: .8125rem;
    line-height: 1.35;
}

.map-list a:hover,
.map-list a:focus-visible,
.map-list a.is-active {
    background: #fff3cd;
    color: #000;
    outline: none;
}

.map-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.25rem;
    margin-top: 1.25rem;
    padding-top: .75rem;
    border-top: 1px solid #e9ecef;
}

.legend-swatch {
    display: inline-block;
    width: .75rem;
    height: .75rem;
    background: var(--marker);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
    vertical-align: -1px;
}

@media print {
    .map-toolbar, .map-panel, .map-footer { display: none; }
    .map-layout { grid-template-columns: 1fr; }
    .map-viewport { border: 0; overflow: visible; }
}