/* ABOUTME: app-specific styles — fonts, map/label/control theming.
   ABOUTME: lives in a file (not inline) so CSP style-src can stay 'self'. */

/* Inter (variable, latin subset, vendored — OFL-licensed; covers
   weights 300-700, non-latin glyphs fall back to system fonts) */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../vendor/inter/inter-latin-var.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Apple-style keyframe animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Feature label styling */
.feature-label {
    background: rgba(255, 255, 255, 0.95);
    color: #1d1d1f;
    border: none;
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 500;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    letter-spacing: -0.01em;
}

/* Dark mode feature labels */
.dark .feature-label {
    background: rgba(44, 44, 46, 0.95);
    color: #f5f5f7;
}

/* Polygon label styling */
.polygon-label {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

.polygon-label-text {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #1d1d1f;
    text-shadow:
        -1px -1px 0 #fff,
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 1px 0 #fff,
        0px -1px 0 #fff,
        0px 1px 0 #fff,
        -1px 0px 0 #fff,
        1px 0px 0 #fff;
    white-space: nowrap;
    text-align: center;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    pointer-events: none;
    opacity: 0.85;
}

/* Dark mode polygon labels */
.dark .polygon-label-text {
    color: #f5f5f7;
    text-shadow:
        -1px -1px 0 #1d1d1f,
        1px -1px 0 #1d1d1f,
        -1px 1px 0 #1d1d1f,
        1px 1px 0 #1d1d1f,
        0px -1px 0 #1d1d1f,
        0px 1px 0 #1d1d1f,
        -1px 0px 0 #1d1d1f,
        1px 0px 0 #1d1d1f;
}

/* Text along path styling for dark mode */
.dark .leaflet-overlay-pane text {
    fill: #f5f5f7 !important;
    stroke: #1d1d1f !important;
}

/* Apple Maps-style zoom controls */
.leaflet-control-zoom {
    border: none !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.12) !important;
    z-index: 1000 !important;
}

.leaflet-control-zoom a {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #1d1d1f !important;
    border: none !important;
    border-radius: 12px !important;
    margin: 3px !important;
    width: 44px !important;
    height: 44px !important;
    line-height: 42px !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif !important;
    backdrop-filter: blur(20px) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    text-align: center !important;
}

.leaflet-control-zoom a:hover {
    background: rgba(255, 255, 255, 1) !important;
    transform: scale(1.05) translateY(-1px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.20), 0 6px 12px rgba(0, 0, 0, 0.16);
}

.leaflet-control-zoom a:active {
    transform: scale(0.95);
    transition: all 0.1s ease-out !important;
}

.leaflet-control-zoom a:first-child {
    border-radius: 12px 12px 6px 6px !important;
}

.leaflet-control-zoom a:last-child {
    border-radius: 6px 6px 12px 12px !important;
}

/* Dark mode zoom controls */
.dark .leaflet-control-zoom a {
    background: rgba(44, 44, 46, 0.95) !important;
    color: #f5f5f7 !important;
}

.dark .leaflet-control-zoom a:hover {
    background: rgba(58, 58, 60, 1) !important;
    transform: scale(1.05) translateY(-1px);
}

/* Ensure map takes full height */
#map {
    height: 100vh;
    height: 100dvh; /* modern viewport height */
}

/* Pulse animation for loading states */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animate-pulse-custom {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}