* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}


::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #333;
    line-height: 1.6;
    min-height: 100vh;
    padding: 20px;
    animation: gradientShift 15s ease infinite;
    background-size: 200% 200%;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.container {
    width: 98%;
    max-width: none;
    margin: 0 auto;
}

/* 3-column layout wrapper */
.layout-3col {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* 1:2:1 ratio */
    gap: 24px;
    align-items: start;
}

.col-left, .col-middle, .col-right { min-width: 0; }

/* Quick current card in left column */
.current-quick {
    background: white;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
}

/* Astronomy card styles */
.astronomy-card {
    background: white;
    border-radius: 15px;
    padding: 18px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    margin-top: 18px;
}
.astro-grid {
    display: flex;
    gap: 12px;
    align-items: center;
}
.astro-times { flex: 0 0 46%; font-size: 0.95em; color: #333; }
.astro-times div { margin-bottom: 6px; }
.astro-visual { flex: 1 1 54%; }
.astro-track {
    position: relative;
    width: 100%;
    /* Maintain semicircle aspect, height will be half of width */
    aspect-ratio: 2 / 1;
    background: transparent; /* arc is drawn by the inline SVG for crispness */
    overflow: visible;
}
.astro-sun, .astro-moon {
    position: absolute;
    /* top/left will be placed by JS along the arc; keep transform centering */
    transform: translate(-50%, -50%);
    font-size: 1.25em;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    transition: left 0.25s ease, top 0.25s ease, opacity 0.25s ease;
}
.astro-sun { background: rgba(255, 223, 93, 0.95); }
.astro-moon { background: rgba(230, 230, 255, 0.95); }
.astro-legend { margin-top: 8px; font-size: 0.85em; color: #666; }

/* SVG arc that draws the semicircle */
.astro-arc {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

@media (max-width: 600px) {
    .astro-grid { flex-direction: column; gap: 8px; }
    .astro-times { width: 100%; }
    .astro-visual { width: 100%; }
}

.current-quick .temp-display { margin-bottom: 8px; }
.current-quick .quick-wind { font-weight: 600; color: #444; margin: 8px 0 6px; }
.current-quick .quick-wind-gust { font-size: 0.95em; color: #666; margin-top: 4px; }

/* Header Styles */

header {
    text-align: center;
    color: white;
    padding: 40px 20px;
    margin-bottom: 30px;
    animation: fadeIn 1s ease;
}

/* NWS Alerts card (full-width banner that sits above the 3-column layout) */
.nws-alerts {
    background: linear-gradient(90deg, #fff 0%, #fff 100%);
    border-radius: 16px;
    padding: 18px 22px;
    /* Match other section spacing (sections use 30px) */
    margin-bottom: 30px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}
.nws-alerts h2 {
    /* Match other section headers */
    font-size: 2em;
    color: #667eea;
    margin-bottom: 25px;
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, #667eea, #764ba2) 1;
    padding-bottom: 10px;
    font-weight: 700;
    text-align: center;
}
.nws-alerts .alerts-loading,
.nws-alerts .alerts-none {
    color: #4a5568;
    padding: 10px 6px;
    text-align: center;
}
.nws-alerts .alerts-list { display:block; margin-top:8px; }
.nws-alert { border-radius: 10px; padding: 12px; margin-bottom: 10px; background: linear-gradient(180deg, #f8fafc 0%, #fff 100%); border-left: 6px solid #90cdf4; text-align: center; }
.nws-alert-row { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.nws-alert-title { font-size: 1.05rem; color:#1a202c; }
.nws-alert-meta { display:block; font-size:0.85rem; color:#4a5568; margin-top:4px; }
.nws-alert-times { font-size:0.85rem; color:#4a5568; text-align:right; min-width:140px; }
.nws-alert-desc { margin-top:8px; color:#2d3748; font-size:0.95rem; line-height:1.4; text-align: center; }

/* Summary & toggle */
.alerts-summary { display:flex; gap:12px; align-items:center; justify-content:center; margin-bottom:12px; }
.alerts-count { font-weight:700; color:#1a202c; }
.alerts-toggle { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; border: none; padding: 8px 12px; border-radius: 10px; cursor: pointer; font-weight:700; box-shadow: 0 6px 18px rgba(102,126,234,0.18); }
.alerts-toggle:focus { outline: 3px solid rgba(102,126,234,0.18); }

/* Alert item formatting when expanded */
.nws-alert-item { background: white; border-radius: 12px; padding: 14px; margin: 10px auto; max-width: 980px; text-align: left; box-shadow: 0 8px 20px rgba(0,0,0,0.06); border-left: 6px solid #90cdf4; }
.nws-alert-item-head { display:flex; align-items:center; gap:10px; }
.nws-alert-item .nws-alert-title { font-size: 1.05rem; color: #1a202c; }
.nws-alert-item-meta { font-size: 0.9rem; color: #4a5568; margin-top:6px; }
.nws-alert-item-times { font-size: 0.85rem; color: #6b7280; margin-top:6px; }
.nws-alert-item-body { margin-top:10px; color:#2d3748; line-height:1.5; }

/* Indent alert lists so bullets aren't flush against the card edge and ensure
   list text matches the surrounding paragraph styling (prevents "thinner" look)
   and wrapped lines align under the text, not under the bullet. */
.nws-alert-item-body ul {
    padding-left: 1.5rem; /* indent bullets slightly more for readability */
    margin: 8px 0;
    list-style-position: outside; /* ensure wrapped lines align with text */
    font: inherit; /* match surrounding font size/weight */
    color: inherit; /* match surrounding color */
}
.nws-alert-item-body ul li {
    margin-bottom: 6px;
    line-height: 1.4;
}

/* Severity badge */
.nws-badge { display:inline-block; padding:6px 10px; border-radius: 10px; font-weight:700; font-size:0.8rem; color: #fff; }
.nws-badge.sev-minor { background: #f6ad55; color:#4a2f00; }
.nws-badge.sev-moderate { background: #f97316; }
.nws-badge.sev-severe { background: #ef4444; }
.nws-badge.sev-extreme { background: #9f1239; }
.nws-badge.sev-unknown { background: #90a4ae; }

/* Severity color hints */
.nws-alert.sev-minor { border-left-color: #f6ad55; }
.nws-alert.sev-moderate { border-left-color: #f97316; }
.nws-alert.sev-severe { border-left-color: #ef4444; }
.nws-alert.sev-extreme { border-left-color: #9f1239; }
.nws-alert.sev-unknown { border-left-color: #90a4ae; }

@media (max-width: 768px) {
    .nws-alert-row { flex-direction: column; align-items: center; }
    .nws-alert-times { text-align: center; min-width: auto; margin-top:6px; }
    .nws-alert-item { margin-left: 12px; margin-right: 12px; }
    .alerts-summary { flex-direction: column; gap:8px; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

header h1 {
    font-size: 3.5em;
    font-weight: 700;
    margin-bottom: 10px;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
    animation: slideDown 0.8s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.subtitle {
    font-size: 1.3em;
    opacity: 0.95;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Section Styles */
section {
    background: white;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
    animation: fadeInUp 0.6s ease;
}

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

section h2 {
    font-size: 2em;
    color: #667eea;
    margin-bottom: 25px;
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, #667eea, #764ba2) 1;
    padding-bottom: 10px;
    font-weight: 700;
    text-align: center;
}

section h3 {
    font-size: 1.3em;
    color: #555;
    margin-bottom: 15px;
    text-align: center;
}

/* Current Weather Styles */
/* Deprecated in new layout: .current-grid and .current-main */

.weather-icon-large {
    font-size: 6em;
    margin-bottom: 10px;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.temp-display {
    font-size: 5em;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
}

.temp-value {
    font-size: 1em;
}

.temp-unit {
    font-size: 0.35em; /* smaller superscript-style unit */
    vertical-align: super; /* superscript positioning */
    margin-left: 0; /* ensure no gap */
    line-height: 1;
}

.conditions {
    font-size: 1.8em;
    color: #555;
    margin-bottom: 10px;
    font-weight: 500;
}

.feels-like {
    font-size: 1.2em;
    color: #555;
    margin-bottom: 15px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    display: inline-block;
}

.update-time {
    font-size: 0.9em;
    color: #666;
    margin-top: 20px;
    padding: 8px 15px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 15px;
    display: block; /* force new line */
    width: fit-content; /* keep pill-sized width */
    margin-left: auto; /* center horizontally */
    margin-right: auto; /* center horizontally */
}

.current-details {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 20px;
}

/* Compact sizing for the Current Details row */
.current-details-section .current-details .detail-item {
    padding: 12px;
}
.current-details-section .current-details .detail-icon { font-size: 2em; }
.current-details-section .current-details .detail-label { font-size: 0.75em; margin-bottom: 6px; }
.current-details-section .current-details .detail-value { font-size: 1.2em; }
.current-quick { text-align: center; }
.current-quick h2 { text-align: left; }

/* Stats card */
.stats-card {
    background: white;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
    margin-top: 24px;
}

/* History card */
.history-card {
    background: white;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
    margin-top: 24px;
}

.history-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    justify-content: center;
}

.history-tab {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e0 100%);
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 1.5em;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.history-tab:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
    border-color: #667eea;
}

.history-tab.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.4);
    transform: scale(1.05);
}

.history-table-wrap {
    overflow-x: auto;
}

.history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.history-table th,
.history-table td {
    padding: 10px 8px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.history-table th {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    color: #333;
    font-weight: 600;
    position: sticky;
    top: 0;
}

.history-table th:last-child,
.history-table td:last-child {
    text-align: right;
    font-weight: 600;
}

.history-table tbody tr:hover {
    background: rgba(102, 126, 234, 0.05);
}

.history-table td:first-child {
    color: #666;
    font-size: 0.9em;
}


.stats-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

/* Center the timeframe picker and controls in the Stats card */
.stats-card .stats-controls {
    justify-content: center;
}
.stats-controls label { font-weight: 600; color: #333; }
.stats-controls select {
    padding: 6px 10px;
    border: 2px solid #667eea;
    border-radius: 8px;
    background: #fff;
    color: #667eea;
    font-weight: 600;
}

.stats-table-wrap { overflow-x: auto; }
.stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
    border-radius: 12px;
    overflow: hidden;
}
.stats-table th, .stats-table td {
    padding: 12px 10px;
    text-align: right;
}
.stats-table th:first-child, .stats-table td:first-child { text-align: left; }
.stats-table thead th {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    color: #333;
}
.stats-table tbody tr:nth-child(odd) { background: rgba(0,0,0,0.02); }
.stats-table tbody tr:hover { background: rgba(102,126,234,0.08); }

/* Metric cell with icon */
.stats-table td.metric, .stats-table th.metric {
    display: flex;
    align-items: center;
    gap: 10px;
}
.stats-table .metric-icon {
    font-size: 1.2em;
    line-height: 1;
}
.stats-table .metric-name { font-weight: 600; color: #333; }

/* Values */
.stats-table td.value { text-align: right; }
.stats-table td.value span[title] { cursor: help; }

/* Colored text for stats */
.color-temp { color: #c62828; font-weight: 600; }
.color-wind { color: #ef6c00; font-weight: 600; }
.color-gust { color: #d84315; font-weight: 600; }
.color-precip { color: #1565c0; font-weight: 600; }
.color-humidity { color: #0277bd; font-weight: 600; }
.color-pressure { color: #6a1b9a; font-weight: 600; }
.color-dew { color: #00838f; font-weight: 600; }
.color-muted { color: #607d8b; }

/* Map card next to current conditions */
/* Live Map section: make the radar embed more square using aspect-ratio
   use a wrapper `.map-embed` that defines the square area and let the iframe
   fill it. This keeps visual consistency and adapts across breakpoints. */
.live-map .map-embed {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1; /* square */
    border-radius: 12px;
    overflow: hidden;
    display: block;
}
.live-map .map-embed iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Precipitation Card */
.precipitation-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    margin-bottom: 30px;
}

/* Fire Danger Card */
.fire-danger-card {
    /* Match the other section cards for a consistent background */
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
    margin-bottom: 30px;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.04);
}
.fire-danger-content { display:flex; flex-direction:column; gap:6px; align-items:center; justify-content:center; }
.fire-danger-category {
    font-size: 1.9rem;
    font-weight: 900;
    padding: 10px 16px;
    border-radius: 12px;
    color: white;
    display: inline-block;
    min-width: 160px;
    text-align: center;
    letter-spacing: 0.6px;
}
.fire-danger-reason { font-size: 0.95rem; color: #444; opacity: 0.95; font-style: italic; }

/* Category color variants */
.fire-low .fire-danger-category { background: #2ecc71; color: #05462f; }
.fire-moderate .fire-danger-category { background: #f6c343; color: #5b3f00; }
.fire-high .fire-danger-category { background: #ff8a33; color: #5a2f00; }
.fire-very-high .fire-danger-category { background: #ff4d4f; color: #4a0f0f; }
.fire-extreme .fire-danger-category { background: #8e44ad; color: #2a0830; }

/* Pressure unit and wind-direction minor styling */
.pressure-unit, .wind-dir { display:block; font-size:0.85em; color:#666; margin-top:4px; }


/* Main Counters */
.precip-counters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

.precip-counter {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.precip-counter:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.counter-label {
    font-size: 0.9em;
    font-weight: 500;
    opacity: 0.9;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.counter-value {
    font-size: 2em;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Last Precipitation Info */
.last-precip-info {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.last-precip-label {
    font-size: 0.95em;
    color: #666;
    margin-bottom: 8px;
    font-weight: 500;
}

.last-precip-datetime {
    font-size: 1.3em;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
}

.days-since-precip {
    font-size: 1.1em;
    color: #667eea;
    font-weight: 600;
}

/* Precipitation Summary Table */
.precip-summary {
    margin-top: 20px;
}

.precip-table {
    width: 100%;
    border-collapse: collapse;
}

.precip-table thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.precip-table th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.95em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.precip-table th:last-child {
    text-align: right;
}

.precip-table tbody tr {
    border-bottom: 1px solid #e0e0e0;
    transition: background-color 0.2s ease;
}

.precip-table tbody tr:hover {
    background-color: #f5f7fa;
}

.precip-table tbody tr:last-child {
    border-bottom: none;
}

.precip-table td {
    padding: 12px;
    color: #333;
}

.precip-table td:first-child {
    font-weight: 600;
    color: #555;
}

.precip-table td:last-child {
    text-align: right;
    font-weight: 700;
    color: #667eea;
    font-size: 1.05em;
}

.detail-item {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding: 20px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.detail-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.detail-item:hover::before {
    opacity: 0.1;
}

.detail-item:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
    border-color: #667eea;
}

.detail-icon {
    font-size: 2.5em;
    margin-bottom: 10px;
    z-index: 1;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.detail-label,
.detail-value {
    z-index: 1;
}

.detail-label {
    font-size: 0.85em;
    color: #666;
    margin-bottom: 8px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.detail-value {
    font-size: 1.6em;
    color: #333;
    font-weight: 700;
}

/* Color-coded detail items */
.humidity-item:hover { border-color: #4fc3f7; }
.pressure-item:hover { border-color: #ba68c8; }
.wind-item:hover { border-color: #81c784; }
.gust-item:hover { border-color: #ffb74d; }
.dewpoint-item:hover { border-color: #4dd0e1; }
.uv-item:hover { border-color: #ffd54f; }
.precipitation-item:hover { border-color: #64b5f6; }
.solar-item:hover { border-color: #ffca28; }

/* Forecast Styles */
.forecast h2 {
    display: flex;
    align-items: center;
    justify-content: center; /* center the Forecast heading like other cards */
    flex-wrap: wrap;
    gap: 15px;
}

.forecast-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
}

.forecast-day {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 15px;
    border-radius: 15px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
    border: 3px solid transparent;
    animation: slideInUp 0.5s ease backwards;
}

/* Staggered animation for forecast cards */
.forecast-day:nth-child(1) { animation-delay: 0.1s; }
.forecast-day:nth-child(2) { animation-delay: 0.2s; }
.forecast-day:nth-child(3) { animation-delay: 0.3s; }
.forecast-day:nth-child(4) { animation-delay: 0.4s; }
.forecast-day:nth-child(5) { animation-delay: 0.5s; }
.forecast-day:nth-child(6) { animation-delay: 0.6s; }
.forecast-day:nth-child(7) { animation-delay: 0.7s; }

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

.forecast-day:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(102, 126, 234, 0.5);
    border-color: rgba(255, 255, 255, 0.3);
}

.forecast-day.expanded {
    outline: 4px solid #ffffff;
    outline-offset: 3px; /* draw outside the card, no layout shift */
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9), 0 16px 35px rgba(102, 126, 234, 0.55);
    transform: translateY(-6px) scale(1.05);
    filter: saturate(1.15) brightness(1.05);
}

.forecast-day.expanded .expand-indicator {
    opacity: 1;
    color: #fff;
}

.expand-indicator {
    margin-top: 6px;
    font-size: 0.75em;
    opacity: 0.7;
}

.forecast-day-name {
    font-size: 1em;
    font-weight: 700;
    margin-bottom: 3px;
}

.forecast-date {
    font-size: 0.8em;
    opacity: 0.9;
    margin-bottom: 6px;
}

.forecast-icon {
    font-size: 2.5em;
    margin: 6px 0;
}


/* Forecast wind display */
.forecast-wind {
    margin-top: 6px;
    font-weight: 600;
    display: block;
}
.forecast-conditions {
    font-size: 0.85em;
    margin-bottom: 6px;
    opacity: 0.95;
}

.forecast-temps {
    font-size: 1.2em;
    font-weight: 600;
    margin: 6px 0;
}

.temp-separator {
    opacity: 0.7;
    margin: 0 5px;
}

.temp-low {
    opacity: 0.8;
}

.forecast-precip {
    font-size: 0.8em;
    opacity: 0.9;
}

/* Forecast Details (Expandable) */
.forecast-details {
    background: white;
    padding: 20px;
    border-radius: 12px;
    color: #333;
    line-height: 1.8;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    animation: slideDown 0.3s ease-out;
    width: 100%;
}

.forecast-details-panel {
    background: white;
    padding: 20px;
    border-radius: 12px;
    color: #333;
    line-height: 1.8;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    animation: slideDown 0.3s ease-out;
    width: 100%;
}

/* Forecast detail content sections */
.forecast-detail-section {
    margin-bottom: 12px;
}
.forecast-detail-section:last-child {
    margin-bottom: 0;
}
.detail-subheader {
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 6px;
    text-align: center;
}
.detail-row {
    display: flex;
    flex-direction: column; /* stack icon above text */
    gap: 8px;
    align-items: center; /* center icon */
    text-align: center; /* center text */
}
.detail-icon {
    flex: 0 0 auto;
    font-size: 2rem; /* ~2x larger icon */
    line-height: 1;
}
.detail-text {
    flex: 1 1 auto;
}

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

.forecast-detail-section {
    display: inline-block;
    width: 48%;
    vertical-align: top;
    padding: 10px;
    margin-bottom: 10px;
}

.forecast-detail-section img {
    max-width: 50px;
    height: auto;
    display: block;
    margin: 0 auto 10px;
}

/* Historical Data Styles */
.chart-controls {
    margin: 18px 0 8px 0;
    padding: 12px 20px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
}

.chart-controls label {
    font-weight: 700;
    color: #333;
    font-size: 1.1em;
}

.chart-controls select {
    margin-left: 10px;
    padding: 10px 20px;
    border: 2px solid #667eea;
    border-radius: 10px;
    font-size: 1em;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    color: #667eea;
}

.chart-controls select:hover {
    border-color: #764ba2;
    background: #f8f9fa;
}

.chart-controls select:focus {
    outline: none;
    border-color: #764ba2;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.chart-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: center;
    align-items: center;
}

/* Chart tab icon style and a simple screen-reader-only helper */
.chart-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.chart-tab .chart-icon { font-size: 1.25rem; line-height: 1; display: inline-block; }
.chart-tab .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.chart-tab {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e0 100%);
    color: #333;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 12px 20px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    font-size: 0.95em;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.chart-tab:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
    border-color: #667eea;
}

.chart-tab.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
    transform: scale(1.05);
}

.chart-container {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding: 25px;
    border-radius: 15px;
    height: 350px;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.05);
}

.chart-container canvas {
    max-height: 280px;
}

/* Footer Styles */
footer {
    text-align: center;
    color: white;
    padding: 25px;
    margin-top: 40px;
    opacity: 0.95;
    font-size: 1em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Error Message */
.error-message {
    background: linear-gradient(135deg, #fee 0%, #fcc 100%);
    color: #c33;
    padding: 20px;
    border-radius: 15px;
    border: 2px solid #c33;
    text-align: center;
    font-size: 1.1em;
    font-weight: 600;
    box-shadow: 0 5px 15px rgba(204, 51, 51, 0.2);
    animation: shake 0.5s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .layout-3col { grid-template-columns: 1.2fr 1.8fr; }
    .col-right { grid-column: 1 / -1; }
    .charts-grid {
        grid-template-columns: 1fr;
    }
    
    .current-details {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .layout-3col { grid-template-columns: 1fr; }
    .col-right { grid-column: auto; }
    header h1 {
        font-size: 2.5em;
    }
    
    .subtitle {
        font-size: 1.1em;
    }
    
    .current-details { grid-column: auto; }
    
    .current-map-card iframe {
        height: 300px;
    }
    
    .weather-icon-large {
        font-size: 5em;
    }
    
    .temp-display {
        font-size: 4em;
    }
    
    section {
        padding: 20px;
    }
    
    section h2 {
        font-size: 1.6em;
    }
    
    .chart-controls {
        padding: 15px;
    }
    
    .chart-tab {
        padding: 10px 15px;
        font-size: 0.9em;
    }
    
    .temp-display {
        font-size: 4em;
    }
    
    .forecast-container {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
    
    .forecast-detail-section {
        width: 100%;
        display: block;
    }
    
    .current-details {
        grid-template-columns: 1fr;
    }
    
    .charts-grid {
        grid-template-columns: 1fr;
    }
    
    .chart-container {
        min-width: 100%;
    }
}

@media (max-width: 480px) {
    .current-details { grid-template-columns: repeat(3, 1fr); }
    body {
        padding: 10px;
    }
    
    .current-details {
        grid-template-columns: repeat(3, 1fr);
    }
    
    header h1 {
        font-size: 1.8em;
    }
    
    .temp-display {
        font-size: 3em;
    }
    
    .forecast-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile stacking and re-order for phone-sized screens */
@media (max-width: 600px) {
    /* Flatten column wrappers so sections can be re-ordered */
    .layout-3col { display: flex; flex-direction: column; gap: 16px; }
    .col-left, .col-middle, .col-right { display: contents; }

    /* Desired order on small screens */
    section.current-quick { order: 1; }
    section.current-details-section { order: 2; }
    section.forecast { order: 3; }
    section.stats-card { order: 4; }
    section.live-map { order: 5; }
    section.historical { order: 6; }

    /* Show only Temp, Wind and Precipitation in Current Conditions and keep them on one row */
    .current-details .detail-item { display: none; }
    .current-details {
        display: flex;
        flex-direction: row;
        gap: 8px;
        align-items: stretch;
    }
    .current-details .temperature-item,
    .current-details .wind-item,
    .current-details .precipitation-item {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        padding: 10px;
        min-width: 0;
    }

    /* Forecast: show only Today and Tomorrow (first two cards) on mobile */
    .forecast-container .forecast-day { display: none; }
    .forecast-container .forecast-day:nth-child(-n+2) { display: block; }
    .forecast-container { grid-template-columns: repeat(2, 1fr); }
    .forecast-day { padding: 12px; }
    .forecast-day .expand-indicator { display: none; }

    /* Make Live Radar square on phones as well */
    .live-map .map-embed { aspect-ratio: 1 / 1; }

    /* Ensure sections span full width */
    section { width: 100%; }
    
    /* Hide less-important cards on very small screens */
    .history-card,
    .precipitation-card,
    .astronomy-card,
    .fire-danger-card { display: none; }

    /* Stats: hide metric names and show only icons */
    .stats-card .stats-table .metric-name { display: none; }
    .stats-card .stats-table td.metric, .stats-card .stats-table th.metric {
        justify-content: center;
        gap: 0;
    }
    .stats-card .stats-table .metric-icon { font-size: 1.4em; }
}

/* Loading Animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

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