/**
 * Copyright (c) 2026 DNA Genics, S.L. All rights reserved.
 *
 * Heritage atlas: shared map plate (decorative Leaflet GeoJSON), sea and region
 * labels, credit, fallback message and the copper era ruler. Used by the public
 * Heritage homepage and the Heritage dashboard hero.
 */

.ha-plate {
    --ha-paper: #f6f7ef;
    --ha-copper: #a17b57;
    --ha-water: #5f7f77;
    position: relative;
    min-height: 520px;
    background: var(--ha-paper);
}

.ha-map {
    position: absolute;
    inset: 0;
    background: var(--ha-paper);
}

.ha-plate .leaflet-container {
    background: var(--ha-paper);
    font-family: inherit;
    outline: 0;
}

.ha-map .leaflet-interactive { stroke-linejoin: round; }

.ha-label {
    position: absolute;
    z-index: 2;
    color: var(--ha-water);
    font: italic 500 0.88rem/1.5 "Cormorant Garamond", Georgia, serif;
    letter-spacing: 0.2em;
    text-align: center;
    text-transform: uppercase;
    pointer-events: none;
}
.ha-label--north { top: 9%; left: 38%; }
.ha-label--west { top: 60%; left: 14%; }
.ha-label--region { top: 80%; left: 66%; font-style: normal; }

.ha-message {
    position: absolute;
    z-index: 2;
    left: 16px;
    bottom: 16px;
    margin: 0;
    color: #6c6961;
    font-size: 0.8rem;
}

.ha-credit {
    position: absolute;
    z-index: 2;
    right: 6px;
    bottom: 4px;
    color: #66705f;
    font-size: 0.68rem;
    text-decoration: none;
}
a.ha-credit:hover,
a.ha-credit:focus-visible { color: #3f4a3c; text-decoration: underline; }

/* Era ruler */
.ha-era {
    --ha-copper: #a17b57;
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 24px;
    padding-top: 18px;
    border-top: 1px solid #ddd3c0;
}
.ha-era__buttons {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-width: 0;
}
.ha-era__button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-height: 44px;
    padding: 14px 10px 6px 0;
    border: 0;
    background: transparent;
    color: #25241f;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.ha-era__dot {
    position: absolute;
    top: -24px;
    left: 0;
    width: 11px;
    height: 11px;
    border: 1px solid var(--ha-copper);
    border-radius: 50%;
    background: #faf8f4;
}
.ha-era__label { font-size: 0.8rem; font-weight: 600; }
.ha-era__dates { color: #6c6961; font-size: 0.7rem; }
.ha-era__button[aria-pressed="true"] .ha-era__dot { background: var(--ha-copper); }
.ha-era__button[aria-pressed="true"] .ha-era__label { color: #85603d; }
.ha-era__button:hover .ha-era__label { color: #213a2f; }
.ha-era__button:focus-visible { outline: 2px solid #b08d4f; outline-offset: 2px; }

@media (max-width: 1023px) {
    .ha-plate { min-height: 380px; }
}

@media (max-width: 575px) {
    .ha-plate { min-height: 280px; }
    .ha-label { font-size: 0.7rem; letter-spacing: 0.14em; }
    .ha-era { flex-direction: column; align-items: flex-start; }
    .ha-era__buttons {
        grid-template-columns: repeat(5, minmax(96px, 1fr));
        width: 100%;
        overflow-x: auto;
        padding-top: 24px;
        margin-top: -24px;
    }
}

@media print {
    .ha-plate, .ha-era { display: none; }
}