/* Alakylän MS: metsästysalueiden kartta (/kartta). */

/* Koko näytön sivu: sivuston ylä- ja alapalkki piiloon, kartta peittää näkymän. */
html:has(body.ams-kartta-page),
body.ams-kartta-page {
    overflow: hidden;
}
.ams-kartta-page .site-header,
.ams-kartta-page .main-navigation,
.ams-kartta-page .site-footer {
    display: none;
}

/* Tarkempi valitsin ohittaa sisällön .entry-content > * + * -välistyksen. */
.ams-kartta-page .ams-kartta {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    margin: 0;
    background: var(--ams-surface-container, #f1eee6);
}
/* Kirjautuneen käyttäjän WP-hallintapalkki jää näkyviin kartan yläpuolelle. */
.admin-bar.ams-kartta-page .ams-kartta {
    top: 32px;
}
@media (max-width: 782px) {
    .admin-bar.ams-kartta-page .ams-kartta {
        top: 46px;
    }
}

.ams-kartta__map {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    background: #e9ecef;
    font-family: var(--ams-font-body);
}

.ams-kartta__noscript {
    padding: 24px;
}

/* Tilarivi kartan alla */
.ams-kartta__status {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    font-family: var(--ams-font-body);
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--ams-on-surface, #1c1c17);
    background: var(--ams-surface-container-low, #f6f3eb);
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--ams-outline-variant, #c3c8be);
}

.ams-kartta__status-dot {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    margin-top: 4px;
    border-radius: 50%;
    background: #adb5bd;
}

.ams-kartta__status[data-state="waiting"] .ams-kartta__status-dot,
.ams-kartta__status[data-state="inaccurate"] .ams-kartta__status-dot {
    background: #1c7ed6;
    animation: ams-kartta-pulse 1.2s ease-in-out infinite;
}
.ams-kartta__status[data-state="inside"] { background: #ebfbee; }
.ams-kartta__status[data-state="inside"] .ams-kartta__status-dot { background: #2f9e44; }
.ams-kartta__status[data-state="edge"] { background: #fff4e6; }
.ams-kartta__status[data-state="edge"] .ams-kartta__status-dot { background: #f08c00; }
.ams-kartta__status[data-state="outside"],
.ams-kartta__status[data-state="error"] { background: #fff5f5; }
.ams-kartta__status[data-state="outside"] .ams-kartta__status-dot,
.ams-kartta__status[data-state="error"] .ams-kartta__status-dot { background: #e03131; }
.ams-kartta__status[data-state="inside"] .ams-kartta__status-text,
.ams-kartta__status[data-state="edge"] .ams-kartta__status-text,
.ams-kartta__status[data-state="outside"] .ams-kartta__status-text { font-weight: 600; }

.ams-kartta__status[data-state="idle"] {
    display: none;
}

@keyframes ams-kartta-pulse {
    50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
    .ams-kartta__status-dot { animation: none !important; }
}

/* Omat painikkeet (Leaflet-palkin tyylillä, isompi kosketusalue) */
.ams-kartta .leaflet-bar a,
.ams-kartta .ams-kartta-btn {
    width: 44px;
    height: 44px;
    line-height: 44px;
    font-size: 22px;
    color: #212529;
}
.ams-kartta .ams-kartta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}
.ams-kartta .ams-kartta-btn svg {
    width: 24px;
    height: 24px;
}
.ams-kartta .ams-kartta-btn.is-active {
    color: #1c7ed6;
}
.ams-kartta .ams-kartta-btn.is-following {
    color: #fff;
    background: #1c7ed6;
}
.ams-kartta .leaflet-control-layers-toggle {
    width: 44px;
    height: 44px;
}
.ams-kartta .leaflet-control-layers-expanded {
    font-size: 1rem;
    line-height: 1.8;
    padding: 8px 12px;
}
.ams-kartta .leaflet-control-attribution {
    font-size: 11px;
}
.ams-kartta .leaflet-popup-content {
    font-family: var(--ams-font-body);
    font-size: 0.95rem;
    line-height: 1.4;
}

/* Paluu seuran sivuille */
.ams-kartta .ams-kartta-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    padding: 0 16px 0 10px;
    border-radius: 999px;
    background: #1f6f43;
    color: #fff;
    font: 600 0.9375rem/1 var(--ams-font-body);
    text-decoration: none;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
}
.ams-kartta .ams-kartta-back:hover,
.ams-kartta .ams-kartta-back:focus-visible {
    background: #185a36;
    color: #fff;
}
.ams-kartta .ams-kartta-back svg {
    width: 20px;
    height: 20px;
}

/* Näyttötapa-valitsin paluupainikkeen alla */
.ams-kartta-mode {
    display: flex;
    padding: 3px;
    gap: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
}
.ams-kartta-mode__btn {
    min-height: 38px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #212529;
    font: 600 0.875rem/1 var(--ams-font-body);
    white-space: nowrap;
    cursor: pointer;
}
.ams-kartta-mode__btn.is-selected {
    background: #1f6f43;
    color: #fff;
}
.ams-kartta-mode__btn:focus-visible {
    outline: 2px solid #1c7ed6;
    outline-offset: 1px;
}

/* Tietopaneeli: alareunan paneeli puhelimessa, kortti isommilla näytöillä */
.ams-kartta-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    max-height: 75%;
    overflow-y: auto;
    padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
    background: #fff;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
    font-family: var(--ams-font-body);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--ams-on-surface, #1c1c17);
}
.ams-kartta-info[hidden] {
    display: none;
}
@media (min-width: 768px) {
    .ams-kartta-info {
        left: auto;
        right: 10px;
        bottom: 10px;
        width: 420px;
        max-height: calc(100% - 20px);
        padding: 20px 24px 24px;
        border-radius: 12px;
    }
}
.ams-kartta-info__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.ams-kartta-info__title {
    margin: 0;
    font-size: 1.25rem;
}
.ams-kartta-info__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -6px -8px -6px 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #212529;
    cursor: pointer;
}
.ams-kartta-info__close:hover {
    background: #f1f3f5;
}
.ams-kartta-info__close svg {
    width: 24px;
    height: 24px;
}
.ams-kartta-legend {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}
.ams-kartta-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.ams-kartta-legend__swatch {
    display: inline-block;
    width: 22px;
    height: 14px;
    border-radius: 2px;
}
.ams-kartta-legend__swatch--area {
    border: 2px solid #3b5bdb;
    background: rgba(16, 160, 80, 0.45);
}
.ams-kartta-legend__swatch--excluded {
    border: 2px solid #d63a3a;
    background: rgba(214, 58, 58, 0.45);
}
.ams-kartta-legend__swatch--me {
    width: 14px;
    border-radius: 50%;
    background: #1c7ed6;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(28, 126, 214, 0.4);
}
.ams-kartta-disclaimer {
    margin: 0 0 12px;
    padding: 12px 16px;
    border-left: 4px solid var(--ams-secondary, #934b19);
    background: var(--ams-surface-container-low, #f6f3eb);
}
.ams-kartta-meta {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ams-on-surface-variant, #434840);
}