/*
 * Snati's maps in an article (maps/island.py, site/maps/maps.js), and their markers, legend and
 * cards, which the map editor in Snati draws the same way (cadmin/map/editor.css loads this file).
 * Colours and type from the page's tokens, so each outlet's own: the site's (--st-*: Heimildin, HB), else
 * a look's of its own on the base (Mannlíf's theme: --g-*, --font-*).
 */
figure.inline-map,
figure.figure__map,
.map-island {
    --snm-font: var(--st-font-sans, var(--font-ui, "sanomattextsans_web", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif));
    --snm-head: var(--st-font-headline, var(--font-primary, "tiemposheadline_web", serif));
    --snm-serif: var(--st-font-text, var(--font-text, "tiempostext_web", serif));
    --snm-ink: var(--st-text-color, var(--text-color, #1d1d1d));
    --snm-soft: var(--st-text-color-light, var(--g-700, #5a5a5a));
    --snm-card: var(--st-card-bg, var(--g-100, hsl(40, 14%, 95%)));
    --snm-paper: #fff;
    --snm-frame: #ebe9e3;
    --snm-line: var(--st-line-color, #d8d8d8);
}

.map-island {
    font-family: var(--snm-font);
    color: var(--snm-ink);
}

[data-theme="dark"] .map-island {
    --snm-paper: #1b1b1b;
    --snm-frame: #202326;
}

/* ---- The card: a map as a Kassi in the look Spjald (article.scss .inline-box.style-card) ----
 * Tinted; in the text's width reaching out past the text by the page's gutter, so on a phone it fills the screen,
 * and by more where the page has the room; the title, caption, map, legend and sources inside on the text's edge.
 * Over the map its title (the article's headline face) and caption (its text face, as a Kassi's standfirst); under
 * it the legend, then the sources. */
figure.inline-map > .inline-wrap {
    background: var(--snm-card);
    border: 0;
    padding: 1.5rem 1.25rem 1.75rem;
}

@media (max-width: 767.98px) {
    figure.inline-map:is(.position-block, .position-block-small) > .inline-wrap {
        margin-left: -15px;
        margin-right: -15px;
        padding-left: 15px;
        padding-right: 15px;
        max-width: 100vw;
    }
}

@media (min-width: 768px) {
    figure.inline-map.position-block-small > .inline-wrap {
        margin-left: -15px;
        margin-right: -15px;
        padding: 2rem 15px 2.25rem;
        max-width: calc(660px + 30px);
    }

    /* Wide (Breitt, Yfir alla síðuna): the map as wide as the block, the card's texts in from its edges. */
    figure.inline-map:is(.position-block, .position-block-cover) > .inline-wrap {
        --snm-pad: 2rem;
        padding: 2rem var(--snm-pad) 2.25rem;
    }
}

@media (min-width: 1200px) {
    figure.inline-map.position-block-small > .inline-wrap {
        margin-left: -3.5rem;
        margin-right: -3.5rem;
        padding: 2.5rem 3.5rem 2.75rem;
        max-width: calc(730px + 7rem);
    }

    figure.inline-map:is(.position-block, .position-block-cover) > .inline-wrap {
        --snm-pad: 3rem;
        padding: 2.5rem var(--snm-pad) 2.75rem;
    }
}

figure.inline-map:is(.position-block, .position-block-cover) > .inline-wrap .map-island__frame,
figure.figure__map > .map-island > .map-island__frame {
    margin-left: calc(-1 * var(--snm-pad, 0px));
    margin-right: calc(-1 * var(--snm-pad, 0px));
    width: auto;
}

/* The feature layouts centre the text in a column narrower beside the sidebar than below it: there the card is
 * centred and no wider than the column (as a Kassi's: article.scss $feature-layouts). */
@media (min-width: 768px) {
    :is(.article__layout-feature, .article__layout-feature-overlay, .article__layout-feature-center, .article__layout-feature-portrait,
        .article__layout-feature-splitcover, .article__layout-feature-topcover) figure.inline-map.position-block-small > .inline-wrap {
        margin-left: auto;
        margin-right: auto;
        max-width: min(100%, calc(660px + 30px));
    }
}

@media (min-width: 1200px) {
    :is(.article__layout-feature, .article__layout-feature-overlay, .article__layout-feature-center, .article__layout-feature-portrait,
        .article__layout-feature-splitcover, .article__layout-feature-topcover) figure.inline-map.position-block-small > .inline-wrap {
        max-width: min(100%, calc(730px + 7rem));
    }
}

/* Mannlíf (its look on the base, .th-article): its Kassar stay in the text's column, so its map cards do too, the map
 * as wide as the text and the card's texts in from its edges by its gutter. (:is() for the weight of the feature
 * layouts' rule above.) */
:is(.th-article) figure.inline-map:is(.position-block, .position-block-small, .position-block-cover) > .inline-wrap {
    --snm-pad: 1.5rem;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    padding: 1.5rem var(--snm-pad) 1.75rem;
}

:is(.th-article) figure.inline-map > .inline-wrap .map-island__frame {
    margin-left: calc(-1 * var(--snm-pad, 0px));
    margin-right: calc(-1 * var(--snm-pad, 0px));
    width: auto;
}

:is(.th-article) figure.inline-map:is(.position-block, .position-block-small, .position-block-cover) > .inline-wrap:has(> .map-island--plain) {
    padding-top: 0;
}

/* In the main slot (maps_tags.main_map_figure): the card in the main picture's place, the map as wide as the picture
 * would be. */
figure.figure__map > .map-island {
    --snm-pad: 15px;
    background: var(--snm-card);
    padding: 1.25rem var(--snm-pad) 1.5rem;
}

@media (min-width: 768px) {
    figure.figure__map > .map-island {
        --snm-pad: 2rem;
        padding: 2rem var(--snm-pad) 2.25rem;
    }
}

@media (min-width: 1200px) {
    figure.figure__map > .map-island {
        --snm-pad: 3rem;
        padding: 2.5rem var(--snm-pad) 2.75rem;
    }
}

/* A map with neither title nor caption: on a wide card and in the main slot the map at the card's top. */
@media (min-width: 768px) {
    figure.inline-map:is(.position-block, .position-block-cover) > .inline-wrap:has(> .map-island--plain) {
        padding-top: 0;
    }
}

figure.figure__map > .map-island.map-island--plain {
    padding-top: 0;
}

.map-island__head {
    margin: 0 0 1.25rem;
}

/* (Two classes and the tag: over the article's own headings and text in its body.) */
.map-island h3.map-island__title {
    font-family: var(--snm-head);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    text-wrap: balance;
    margin: 0;
    padding: 0;
    color: var(--snm-ink);
}

.map-island h3.map-island__title::before {
    content: none;
}

@media (min-width: 576px) {
    .map-island h3.map-island__title {
        font-size: 1.75rem;
    }
}

.map-island div.map-island__caption {
    margin: .5rem 0 0;
    font-family: var(--snm-serif);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--snm-soft);
    text-wrap: pretty;
}

@media (min-width: 768px) {
    .map-island div.map-island__caption {
        font-size: 1.125rem;
    }
}

/* Mannlíf's headline face is a variable one, set narrower and bold as its Kassi's title (theme/_snati.scss). */
.th-article .map-island h3.map-island__title {
    font-variation-settings: "wdth" 87, "wght" 700;
    font-weight: normal;
}

/* The map's sources: its own, the basemap's makers (their licences ask it), its map services'. */
.map-island div.map-island__credit {
    margin: 1rem 0 0;
    font-family: var(--snm-font);
    font-size: .6875rem;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--snm-soft);
}

.map-island__frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--snm-frame);
    /* (A hairline: a light map's edge on the card's tint.) */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .07);
}

[data-theme="dark"] .map-island__frame {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .06);
}

/* Browsers without aspect-ratio: the frame's height from its width. */
@supports not (aspect-ratio: 1 / 1) {
    .map-island__frame--landscape { padding-top: 66.667%; }
    .map-island__frame--wide { padding-top: 56.25%; }
    .map-island__frame--square { padding-top: 100%; }
    .map-island__frame--portrait { padding-top: 125%; }
}

.map-island__still {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity .35s ease;
}

.map-island__nostill {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    color: var(--snm-soft);
    font-size: .875rem;
    text-align: center;
}

/* (Two classes: MapLibre's own stylesheet, added after this one, makes its map relative.) */
.map-island__frame .map-island__live {
    position: absolute;
    inset: 0;
}

/* Below a floated first letter or picture, not beside it. */
figure.inline-map {
    clear: both;
}

.map-island__frame.is-live .map-island__still {
    opacity: 0;
    pointer-events: none;
}

.map-island__go {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    font: 700 .875rem/1 var(--snm-font);
    padding: .65rem 1rem;
    border: 0;
    border-radius: 2rem;
    background: var(--snm-paper);
    color: var(--snm-ink);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
    cursor: pointer;
}

/* The full screen: the frame alone, the map filling it. */
.map-island__frame:fullscreen {
    aspect-ratio: auto !important;
    padding-top: 0;
}

/* ---- Markers (draw.js D.markerElement) ---- */

/* (Placed by MapLibre: .maplibregl-marker is absolute, and the marker's own size is what its anchor centres.) */
.snm-marker {
    --c: #d60000;
    font-family: var(--snm-font, var(--st-font-sans, sans-serif));
    line-height: 1;
    cursor: default;
}

.snm-marker--dot { width: 14px; height: 14px; }
.snm-marker--number { width: 24px; height: 24px; }
.snm-marker--pin { width: 22px; height: 30px; }

.snm-marker--has-card {
    cursor: pointer;
}

.snm-marker__mark {
    display: block;
    box-sizing: border-box;
}

.snm-marker--dot .snm-marker__mark {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--c);
    border: 2.5px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

.snm-marker--number .snm-marker__mark {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--c);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.snm-marker--pin .snm-marker__mark {
    width: 22px;
    height: 30px;
    background: var(--c);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 30'%3E%3Cpath d='M11 0a11 11 0 0 0-11 11c0 7.5 9.4 17.6 10.2 18.6a1 1 0 0 0 1.6 0C12.6 28.6 22 18.5 22 11A11 11 0 0 0 11 0zm0 15.2a4.2 4.2 0 1 1 0-8.4 4.2 4.2 0 0 1 0 8.4z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 30'%3E%3Cpath d='M11 0a11 11 0 0 0-11 11c0 7.5 9.4 17.6 10.2 18.6a1 1 0 0 0 1.6 0C12.6 28.6 22 18.5 22 11A11 11 0 0 0 11 0zm0 15.2a4.2 4.2 0 1 1 0-8.4 4.2 4.2 0 0 1 0 8.4z'/%3E%3C/svg%3E") center / contain no-repeat;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}

.snm-marker__label {
    position: absolute;
    left: calc(100% + 5px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    font-size: 14px;
    font-weight: 700;
    color: #1d1d1d;
    text-shadow: -1px -1px 0 rgba(255, 255, 255, .95), 1px -1px 0 rgba(255, 255, 255, .95), -1px 1px 0 rgba(255, 255, 255, .95), 1px 1px 0 rgba(255, 255, 255, .95), 0 0 3px #fff;
    pointer-events: none;
}

.snm-marker--pin .snm-marker__label {
    top: 11px;
    left: calc(100% + 3px);
}

[data-theme="dark"] .snm-marker__label,
.snm-dark .snm-marker__label {
    color: #f2f2f2;
    text-shadow: -1px -1px 0 rgba(20, 20, 20, .9), 1px -1px 0 rgba(20, 20, 20, .9), -1px 1px 0 rgba(20, 20, 20, .9), 1px 1px 0 rgba(20, 20, 20, .9), 0 0 3px #141414;
}

.snm-marker--label .snm-marker__label {
    position: static;
    transform: none;
    display: block;
    background: var(--c);
    color: #fff;
    text-shadow: none;
    padding: 5px 7px 4px;
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

.snm-marker:focus-visible {
    outline: 2px solid var(--c);
    outline-offset: 3px;
    border-radius: 50%;
}

/* ---- Legend (draw.js D.legendElement), under the frame ---- */

.snm-legend {
    font-family: var(--snm-font, sans-serif);
    font-size: .8125rem;
    line-height: 1.35;
    color: var(--snm-ink, #1d1d1d);
    margin: .6rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.5rem;
}

/* On the card: a little more room under the map, and a size to read beside the article's text. */
.map-island .snm-legend {
    margin-top: 1rem;
    font-size: .875rem;
    gap: .6rem 2rem;
}

/* (Not the article's own lists: no bullet, no indent. Three classes: over .article__body__text ul li.) */
.map-island .snm-legend ul.snm-legend__items > li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.map-island .snm-legend ul.snm-legend__items > li::before {
    content: none;
    display: none;
}

.snm-legend__title,
.snm-legend__head {
    font-weight: 700;
    margin: 0 0 .25rem;
    width: 100%;
}

.snm-legend__title {
    flex-basis: 100%;
}

.snm-legend__group {
    min-width: 8rem;
}

.snm-legend__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .9rem;
}

.snm-legend__items li {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
}

.snm-legend__swatch {
    --c: #999;
    display: inline-block;
    flex: none;
    width: 14px;
    height: 12px;
    background: var(--c);
    border-radius: 2px;
}

.snm-legend__swatch--point {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.snm-legend__swatch--line {
    height: 3px;
    border-radius: 2px;
}

/* ---- Cards on a click (draw.js D.featureCard / shapeCard) ---- */

.snm-popup .maplibregl-popup-content {
    font-family: var(--snm-font, var(--st-font-sans, sans-serif));
    padding: .7rem .85rem .6rem;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
    color: #1d1d1d;
}

.snm-popup .maplibregl-popup-close-button {
    font-size: 1.1rem;
    padding: 0 .35rem;
}

.snm-card__title {
    font-weight: 700;
    font-size: .9375rem;
    margin: 0 1rem .3rem 0;
    line-height: 1.25;
}

.snm-card__text {
    font-size: .875rem;
    line-height: 1.4;
    margin: 0;
}

.snm-card__fields {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .15rem .7rem;
    margin: 0;
    font-size: .8125rem;
}

.snm-card__fields dt {
    font-weight: 400;
    color: #666;
}

.snm-card__fields dd {
    margin: 0;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---- Controls ---- */

.map-island .maplibregl-ctrl-group button.snm-home svg,
.snm-home svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: #333;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
    margin: auto;
}

.map-island .maplibregl-ctrl-attrib {
    font-family: var(--snm-font);
    font-size: 11px;
}

/* The attribution and buttons on the dark basemap: dark too. */
[data-theme="dark"] .map-island .maplibregl-ctrl-attrib,
.snm-dark .maplibregl-ctrl-attrib {
    background: rgba(27, 27, 27, .85);
    color: #cfcfcf;
}

[data-theme="dark"] .map-island .maplibregl-ctrl-attrib a,
.snm-dark .maplibregl-ctrl-attrib a {
    color: #e6e6e6;
}

[data-theme="dark"] .map-island .maplibregl-ctrl-attrib-button,
.snm-dark .maplibregl-ctrl-attrib-button {
    filter: invert(1);
}

.map-island .maplibregl-cooperative-gesture-screen {
    font-family: var(--snm-font);
    font-size: 1.05rem;
}

/* ---- The locator inset (draw.js D.Inset): where the map is, in the upper left corner, as the stills draw it ---- */

.snm-inset {
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 10px;
    width: clamp(90px, 22%, 170px);
    border-radius: 4px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .22);
    pointer-events: none;
    line-height: 0;
}

.snm-inset[hidden] {
    display: none;
}

.snm-inset--dark {
    background: rgba(27, 27, 27, .94);
}

.snm-inset svg {
    display: block;
    width: 100%;
    height: auto;
}

/* ---- Loftmyndir ehf.'s credit on a map drawn on their photographs or map (draw.js D.LoftmyndirCredit) ---- */

.snm-lmcredit {
    position: absolute;
    z-index: 2;
    left: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 7px;
    border-radius: 4px;
    font: 700 12px/1 var(--snm-font, var(--st-font-sans, sans-serif));
    pointer-events: none;
}

.snm-lmcredit img {
    display: block;
    height: 18px;
    width: auto;
}

.snm-lmcredit--on-photo {
    background: rgba(0, 0, 0, .45);
    color: #fff;
}

.snm-lmcredit--on-map {
    background: rgba(255, 255, 255, .85);
    color: #1d1d1d;
}

/* A map service's own legend (its picture: draw.js legendElement). Its white ground taken out on the card's tint;
 * in the dark, on a light plate of its own. */
.snm-legend__image {
    display: block;
    max-width: 220px;
    height: auto;
    mix-blend-mode: multiply;
}

[data-theme="dark"] .snm-legend__image {
    background: #f2f2f2;
    padding: 4px;
    border-radius: 3px;
    mix-blend-mode: normal;
}