@CHARSET "UTF-8";

/* ---------------------------------------------------------------------------
 * PDS Weather – front-end styles
 * Light mode is the default. Dark mode is applied via a [data-theme="dark"]
 * attribute that JavaScript (js/pdsweather-theme.js) sets from the *browser*
 * colour-scheme preference. When JavaScript is unavailable, a prefers-color-
 * scheme media query provides an OS-preference fallback.
 * ------------------------------------------------------------------------- */

/* Colour tokens (light mode defaults). */
.weather {
        --pdsweather-bg: transparent;
        --pdsweather-text: inherit;
        --pdsweather-muted: rgba(0, 0, 0, 0.65);
        --pdsweather-border: rgba(0, 0, 0, 0.12);

        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--pdsweather-text);
        background: var(--pdsweather-bg);
}

.weather .conditions { display: flex; flex-direction: column; }

.weather .current { font-size: 1.1em; font-weight: bold; }

.weather .current .deg + .deg::before { content: " / "; font-weight: normal; font-size: 0.85em; }

.weather .wthr { font-size: 0.85em; }

.weather small label { font-size: 0.75em; color: var(--pdsweather-muted); }

.weather .pdsweather-city { font-size: 0.8em; opacity: 0.75; margin-top: 2px; }

.weather .pdsweather-aqi,
.weather .pdsweather-uv { font-size: 0.78em; color: var(--pdsweather-muted); margin-top: 2px; }

/* Weather font icon inherits the surrounding text colour for readability. */
.weather .wi { color: var(--pdsweather-text); }

/* ---------------------------------------------------------------------------
 * Dark mode (primary) — applied via the data-theme attribute that JavaScript
 * sets from the browser colour-scheme preference.
 * ------------------------------------------------------------------------- */
.weather[data-theme="dark"] {
        --pdsweather-bg: transparent;
        --pdsweather-text: #e8e8e8;
        --pdsweather-muted: rgba(232, 232, 232, 0.7);
        --pdsweather-border: rgba(255, 255, 255, 0.18);
}

.weather[data-theme="dark"] .current { color: #ffffff; }

.weather[data-theme="dark"] .wthr { color: #d7d7d7; }

.weather[data-theme="dark"] .pdsweather-city,
.weather[data-theme="dark"] .pdsweather-aqi,
.weather[data-theme="dark"] .pdsweather-uv { color: var(--pdsweather-muted); }

.weather[data-theme="dark"] .wi { color: #f0c419; }

/* Explicit light theme resets the tokens (in case a parent forces dark). */
.weather[data-theme="light"] {
        --pdsweather-bg: transparent;
        --pdsweather-text: inherit;
        --pdsweather-muted: rgba(0, 0, 0, 0.65);
        --pdsweather-border: rgba(0, 0, 0, 0.12);
}

/* ---------------------------------------------------------------------------
 * Dark mode (fallback) — used only when JavaScript has NOT set a data-theme
 * attribute. Follows the operating-system preference via the media query.
 * ------------------------------------------------------------------------- */
@media ( prefers-color-scheme: dark ) {
        .weather:not([data-theme]) {
                --pdsweather-bg: transparent;
                --pdsweather-text: #e8e8e8;
                --pdsweather-muted: rgba(232, 232, 232, 0.7);
                --pdsweather-border: rgba(255, 255, 255, 0.18);
        }

        .weather:not([data-theme]) .current { color: #ffffff; }

        .weather:not([data-theme]) .wthr { color: #d7d7d7; }

        .weather:not([data-theme]) .pdsweather-city,
        .weather:not([data-theme]) .pdsweather-aqi,
        .weather:not([data-theme]) .pdsweather-uv { color: var(--pdsweather-muted); }

        .weather:not([data-theme]) .wi { color: #f0c419; }
}