/* =========================================
   Global Styles
========================================= */

body {
    background: #eef1f5;
}

/* =========================================
   Project Header
========================================= */

.project-by {
    font-size: 0.95rem;
    color: #6c757d;
    margin-bottom: 6px;
}

/* =========================================
   Weather Input Section
========================================= */

.zip-helper {
    background: #ffffff;
    border-radius: 12px;
    padding: 1rem;
}

/* ZIP input — remove Bootstrap blue */
#zip.form-control:focus {
    border-color: #394867 !important;
    box-shadow: 0 0 0 0.25rem rgba(57, 72, 103, 0.25) !important;
}

/* =========================================
   Empty State
========================================= */

.empty-state {
    padding: 40px;
    text-align: center;
    color: #6c757d;
    font-size: 1rem;
    border: 2px dashed #d0d4d9;
    border-radius: 12px;
    background: #ffffff;
}

/* =========================================
   Weather Cards
========================================= */

.weather-card,
.forecast-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    border: 1px solid #e3e6ea;
}

.weather-card h5,
.forecast-card h5 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.weather-card h6,
.forecast-card h6 {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 12px;
}

.weather-card p,
.forecast-card p {
    margin: 4px 0;
}

.temp {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.weather-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 12px;
}

/* =========================================
   Slate Indigo Button Theme
========================================= */

:root {
    --slate: #394867;
}

/* ------------------------------------------
   ZIP BUTTONS (Current / Forecast / Clear)
------------------------------------------- */

button#getWeather.btn-outline-primary,
button#getWeatherForecast.btn-outline-primary,
button#clearZip.btn-outline-primary {
    background-color: transparent !important;
    border-color: var(--slate) !important;
    color: var(--slate) !important;
}

button#getWeather.btn-outline-primary:hover,
button#getWeatherForecast.btn-outline-primary:hover,
button#clearZip.btn-outline-primary:hover {
    background-color: var(--slate) !important;
    color: #fff !important;
}

button#getWeather.btn-outline-primary:active,
button#getWeatherForecast.btn-outline-primary:active,
button#clearZip.btn-outline-primary:active {
    background-color: var(--slate) !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* ------------------------------------------
   FORECAST COLLAPSE BUTTONS
------------------------------------------- */

#forecast .btn-outline-primary {
    background-color: transparent !important;
    border-color: var(--slate) !important;
    color: var(--slate) !important;
}

#forecast .btn-outline-primary:hover {
    background-color: var(--slate) !important;
    color: #fff !important;
}

/* When collapsed (closed) */
#forecast .btn-outline-primary.collapsed {
    background-color: transparent !important;
    color: var(--slate) !important;
}

/* When expanded (open) */
#forecast .btn-outline-primary:not(.collapsed),
#forecast .btn-check:checked + .btn-outline-primary {
    background-color: var(--slate) !important;
    color: #fff !important;
    border-color: var(--slate) !important;
}

/* Active click */
#forecast .btn-outline-primary:active {
    background-color: var(--slate) !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* ------------------------------------------
   CHEVRON ROTATION
------------------------------------------- */

/* Isolate the chevron so Bootstrap cannot override its transform */
#forecast .details i {
    display: inline-block;
    transform-origin: center;
    transition: transform 0.25s ease;
}

/* Collapsed — > */
#forecast button.btn.btn-outline-primary.collapsed .details i {
    transform: rotate(0deg);
}

/* Expanded — V */
#forecast button.btn.btn-outline-primary:not(.collapsed) .details i {
    transform: rotate(90deg);
}