/* Shared by /karta/ and the article map. */

.vrh-icon {
    background: none;
    border: 0;
}

.vrh-icon svg {
    display: block;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
    transform-origin: 50% 100%;
}

.leaflet-marker-icon.vrh-icon:focus-visible {
    outline: 3px solid #1c64a8;
    outline-offset: 2px;
    border-radius: 2px;
}

.vrh-label {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    padding: 1px 6px;
}

.karta-labels-hidden .vrh-label {
    display: none;
}

.vrh-icon.is-ping svg {
    animation: vrh-ping 1.2s ease-out 1;
}

@keyframes vrh-ping {
    0% { transform: scale(1); }
    30% { transform: scale(1.8); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .vrh-icon.is-ping svg {
        animation: none;
        outline: 3px solid #1c64a8;
    }
}

/* fullscreen: an overlay above the page (below Bootstrap's offcanvas 1045 and modals 1055) */
.karta-fullscreen {
    position: fixed !important;
    inset: 0;
    z-index: 1040;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 0 !important;
}

body.karta-fullscreen-open {
    overflow: hidden;
}

.karta-fullscreen-control a,
.karta-reset-control a,
.karta-locate-control a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #333;
}

.karta-locate-control.is-locating i {
    animation: karta-spin 1s linear infinite;
}

@keyframes karta-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .karta-locate-control.is-locating i {
        animation: none;
        opacity: 0.5;
    }
}

.karta-locate-control.is-denied a {
    color: #999;
}

.karta-legend {
    background: #fff;
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
}

.karta-legend-toggle {
    display: none;
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
}

.karta-legend-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.karta-legend-list li {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    line-height: 1.6;
}

.karta-legend-symbol {
    display: inline-block;
    flex: none;
    width: 14px;
    height: 14px;
}

.karta-legend-symbol.is-vrh {
    background: #33583f;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.karta-legend-symbol.is-podrucje {
    background: rgba(63, 107, 76, 0.2);
    border: 2px solid #33583f;
}

.karta-legend-symbol.is-polozaj {
    border-radius: 50%;
    background: #1c64a8;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #1c64a8;
}

@media (max-width: 767.98px) {
    .karta-legend-toggle {
        display: block;
    }

    .karta-legend:not(.is-open) .karta-legend-list {
        display: none;
    }

    .karta-legend.is-open .karta-legend-list {
        margin-top: 0.25rem;
    }
}

/* decision 10: leaflet-measure prints the coordinates of every point clicked; readers never see them */
.leaflet-control-measure .results .group:has(.lastpoint),
.leaflet-measure-resultpopup p:has(.coorddivider) {
    display: none;
}

.leaflet-control-measure .results .group:has(.lastpoint) + .group {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* /karta/ panel: closed at first. Opened, it is a column beside the map from lg and an
   offcanvas sheet below lg. The funnel button on the map toggles it (sidebar.js). */
.karta-layout {
    display: grid;
    gap: 1rem;
}

@media (min-width: 992px) {
    .karta-layout.is-panel-open {
        grid-template-columns: 300px minmax(0, 1fr);
    }

    .karta-layout:not(.is-panel-open) .karta-panel {
        display: none;
    }

    /* Bootstrap hides an offcanvas-lg header from lg up; the column keeps its title and × */
    .karta-panel .offcanvas-header {
        display: flex;
        padding: 0 0 0.5rem;
    }

    .karta-panel .offcanvas-body {
        max-height: 70vh;
        overflow-y: auto;
    }
}

.karta-list {
    margin-top: 0.25rem;
}

.karta-list-item {
    display: block;
    width: 100%;
    padding: 0.375rem 0.5rem;
    border: 0;
    border-radius: 0.25rem;
    background: none;
    text-align: left;
}

.karta-list-item:hover,
.karta-list-item:focus-visible {
    background-color: var(--bs-tertiary-bg);
}

.karta-list-name {
    display: block;
}

.karta-list-meta {
    display: block;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}

/* leaflet-measure titles are <h3>, which Bootstrap sizes as a page heading (28px); keep them in
   the map's own small type */
.leaflet-control-measure h3,
.leaflet-measure-resultpopup h3 {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
}

.karta-panel-control a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #333;
}

.karta-panel-control a[aria-expanded="true"] {
    background-color: var(--bs-success-bg-subtle, #d1e7dd);
}

/* the panel is a column outside the map, so in fullscreen its button has nothing to open */
.karta-fullscreen .karta-panel-control {
    display: none;
}

/* article map: "show all peaks" appears only while the map is away from its overview */
.karta-reset-control[hidden] {
    display: none;
}