/* ── Layout ─────────────────────────────────────────── */

.site-header-band {
    display: flex;
    height: 140px;
}

.site-logo-col {
    width: 40px;
    min-width: 40px;
    background: #1a1a2e;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.site-logo-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    white-space: nowrap;
}

.site-banner-col {
    flex: 1;
    overflow: hidden;
}

.site-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ── Map ─────────────────────────────────────────────── */

#map {
    height: 60vh;
    min-height: 400px;
}

.side-col {
    background: linear-gradient(180deg, #e6f2ff 0%, #cce5ff 100%);
    border-left: 1px solid #b3d9ff;
    border-right: 1px solid #b3d9ff;
    position: relative;
    overflow: hidden;
}

/* Trees fixed in background */
.side-col::before,
.side-col::after {
    content: '';
    position: fixed;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('/pine-tree-icon.png');
    opacity: 0.7;
    pointer-events: none;
    z-index: 1;
}

.side-col:nth-of-type(1)::before {
    bottom: 0;
    left: 0.5rem;
    width: 2.5rem;
    height: 8rem;
}

.side-col:nth-of-type(1)::after {
    bottom: 8rem;
    left: 1.5rem;
    width: 2rem;
    height: 6rem;
}

.side-col:nth-of-type(3)::before {
    bottom: 0;
    right: 0.5rem;
    width: 2.5rem;
    height: 8rem;
}

.side-col:nth-of-type(3)::after {
    bottom: 8rem;
    right: 1.5rem;
    width: 2rem;
    height: 6rem;
}

/* Snowflake animation */
@keyframes snowfall {
    0% {
        top: -20px;
        opacity: 1;
        transform: translateX(0);
    }
    50% {
        transform: translateX(var(--drift, 0));
    }
    90% {
        opacity: 1;
    }
    100% {
        top: 100vh;
        opacity: 0;
        transform: translateX(var(--drift, 0));
    }
}

.snowflake {
    position: fixed;
    width: 20px;
    height: 20px;
    background-image: url('/snowflake.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
    pointer-events: none;
    animation: snowfall linear infinite;
}

/* ── Ticker ──────────────────────────────────────────── */

.ticker-wrapper {
    height: 2rem;
    position: relative;
}

.ticker-track {
    display: flex;
    white-space: nowrap;
    animation: ticker-scroll 60s linear infinite;
    will-change: transform;
    height: 100%;
    align-items: center;
}

.ticker-track:hover {
    animation-play-state: paused;
}

.ticker-item {
    display: inline-block;
    padding: 0 1.5rem;
    font-size: 0.825rem;
    color: #fff;
}

.ticker-item::after {
    content: ' ·';
    color: rgba(255, 255, 255, 0.35);
    margin-left: 1.5rem;
}

@keyframes ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── Webcam map pin ──────────────────────────────────── */

.webcam-map-pin {
    width: 28px;
    height: 28px;
    background: #198754;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
}

/* ── Leaflet popup ───────────────────────────────────── */

.leaflet-popup-content table {
    margin-bottom: 0;
}

/* ── General ─────────────────────────────────────────── */

body {
    background: #f5f5f5;
}

.container {
    background: #fff;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-radius: .375rem;
}

/* Full-width containers shouldn't get the card treatment */
.container-fluid {
    background: transparent;
}

/* Attribution tooltip */
.attribution-link {
    text-decoration: underline;
    color: #8dadf5;
    cursor: help;
    transition: color 0.2s ease;
}

.attribution-link:hover {
    color: #a8c5ff;
}

.attribution-tooltip {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.8rem;
    white-space: nowrap;
    margin-bottom: 0.5rem;
    z-index: 1000;
    text-decoration: none;
    pointer-events: none;
    font-style: italic;
}

.attribution-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.85);
}

.attribution-trigger:hover .attribution-tooltip {
    display: block;
}