/* Kart over Norge på forsiden (Scripts/NorwayMap.js). Farger som i prototypen. */

.map-card {
    --map-sea: #fff;
    --map-land: #fff;
    --map-edge: #6e93a0;
    --map-hover: var(--darkpurple, #00244e);
    --map-hatch-ground: #f4f8f9;
    --map-hatch-line: #afc6cc;
    --map-line: #b9d3d6;
    --map-line-soft: #dce7ea;
    --map-surface-2: #f4f8f9;
    --map-case: #fff;
    /* Fargetrinn etter antall tilsyn. Trinn 0 er null tilsyn. Bruddpunktene står i NorwayMap.js. */
    --map-step-0: #fff;
    --map-step-1: #c7dce5;
    --map-step-2: #a1c4d3;
    --map-step-3: #70a5bc;
    --map-step-4: #43788e;
    --map-step-5: #2a566a;
    position: relative;
    overflow: hidden;
    background: var(--map-sea);
    border: 1px solid var(--map-line);
    border-radius: 12px;
}

.map-card[hidden] {
    display: none;
}

.map-holder {
    height: 640px;
    padding: 8px;
}

.map-holder svg {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: pan-y;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}

.map-holder svg.is-grabbing,
.map-holder svg.is-grabbing .region {
    cursor: grabbing;
}

/* 701–831 px: høyden følger bredden. Ved 831 px er containeren 720 px (custom.css), kortet 690 px
   og kartrammen 688 px innenfor rammen, altså samme høyde som over 831 px. */
@media (min-width: 701px) and (max-width: 831px) {
    .map-holder {
        height: auto;
        aspect-ratio: 688 / 640;
    }
}

@media (max-width: 700px) {
    .map-holder {
        height: auto;
        aspect-ratio: 1000 / 1248;
        padding: 4px;
    }
}

#map-world {
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}

#map-world.no-transition {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    #map-world,
    .map-card .region {
        transition: none;
    }
}

/* Strektykkelser i px på skjermen (non-scaling-stroke):
   kommunegrense 0,8 – fylkesgrense 1,1 – hover 2 (kappe 4,5) – valgt 3,5 (kappe 5,5) */
.map-card .region {
    fill: var(--map-land);
    stroke: var(--map-edge);
    stroke-width: .8;
    stroke-opacity: .6;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    transition: fill .18s ease;
}

/* setFill i NorwayMap.js sørger for at en flate har høyst én av disse klassene. */
.map-card .region.is-hatched {
    fill: url(#map-hatch);
}

.map-card .region.is-step-0 { fill: var(--map-step-0); }
.map-card .region.is-step-1 { fill: var(--map-step-1); }
.map-card .region.is-step-2 { fill: var(--map-step-2); }
.map-card .region.is-step-3 { fill: var(--map-step-3); }
.map-card .region.is-step-4 { fill: var(--map-step-4); }
.map-card .region.is-step-5 { fill: var(--map-step-5); }

.map-card .region.is-hidden {
    display: none;
}

.map-card .region.is-clickable {
    cursor: pointer;
}

.map-card .edge {
    fill: none;
    stroke: var(--map-edge);
    stroke-width: 1.1;
    stroke-opacity: .75;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.map-card .map-hatch-ground {
    fill: var(--map-hatch-ground);
}

.map-card .map-hatch-line {
    stroke: var(--map-hatch-line);
    stroke-width: 6;
}

/* Hover og valgt: lys kappe under mørk kjerne. Kjernen har kontrast mot de lyse trinnene og
   kappen mot de mørke, slik at minst én av dem alltid har 3:1 mot fyllet. */
#map-hover,
#map-selected,
#map-hover-case,
#map-selected-case {
    fill: none;
    stroke: var(--map-hover);
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

#map-hover-case,
#map-selected-case {
    stroke: var(--map-case);
}

#map-hover {
    stroke-width: 2;
}

#map-hover-case {
    stroke-width: 4.5;
}

#map-selected {
    stroke-width: 3.5;
}

#map-selected-case {
    stroke-width: 5.5;
}

.map-toolbar {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 1;
    display: flex;
    gap: 9px;
    align-items: flex-start;
}

.map-reset,
.map-zoom {
    background: #fff;
    border: 1px solid var(--map-line);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 36, 78, .08);
    color: var(--darkpurple, #00244e);
}

.map-reset {
    padding: 7px 13px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

.map-reset[hidden] {
    display: none;
}

.map-zoom {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.map-zoom button {
    width: 33px;
    height: 33px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 17px;
    line-height: 1;
}

.map-zoom button + button {
    border-top: 1px solid var(--map-line-soft);
}

.map-reset:hover,
.map-zoom button:hover {
    background: var(--map-surface-2);
}

/* Mobil: kontrollene legges som en rad under kartet, med 44 px trykkflater. Knappene er
   den eneste zoom-veien for den som ikke kan knipe. */
@media (max-width: 700px) {
    .map-card {
        display: flex;
        flex-direction: column;
    }

    .map-holder {
        order: 1;
    }

    .map-toolbar {
        position: static;
        order: 2;
        justify-content: flex-end;
        align-items: center;
        gap: 10px;
        padding: 10px 12px 12px;
    }

    .map-reset {
        min-height: 44px;
    }

    .map-zoom {
        flex-direction: row;
    }

    .map-zoom button {
        width: 44px;
        height: 44px;
        font-size: 19px;
    }

    .map-zoom button + button {
        border-top: 0;
        border-left: 1px solid var(--map-line-soft);
    }
}

/* Kildeangivelsen kreves av lisensen (CC BY 4.0). Ligger i nedre høyre hjørne av kartet,
   og slipper musen gjennom så den ikke stopper flytting av kartet. */
.map-attribution {
    position: absolute;
    right: 10px;
    bottom: 8px;
    margin: 0;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .85);
    font-size: .75rem;
    color: var(--purple, #3c4a71);
    pointer-events: none;
}

/* Mobil: kontrollraden ligger nederst i kortet, så attribusjonen legges under den. */
@media (max-width: 700px) {
    .map-attribution {
        position: static;
        order: 3;
        padding: 0 12px 8px;
        text-align: right;
        background: none;
    }
}

/* Kildehenvisning (TIL-29). Står under kartet og sidepanelet uansett utvalg. */
.map-source {
    margin: 14px 0 0;
    font-size: .75rem;
    line-height: 1.5;
    color: var(--purple, #3c4a71);
}