/* =====================================================================
   HOME PAGE WEATHER  —  /weather.css
   Lives in the home page sidebar (350px wide on desktop, full width on
   phones). Same warm-paper family as the rest of the site, with a sky
   panel that changes with the weather.
   ===================================================================== */

.wx {
    --wx-ink: #1b1a17;
    --wx-muted: #6b665c;
    --wx-faint: #9a948a;
    --wx-rule: #e8e2d6;
    --wx-wash: #f7f4ee;
    --wx-accent: #8a2b1d;
    --wx-rain: #3f7fd0;
    --wx-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;

    padding: 0 !important;
    overflow: hidden;
    font-family: var(--wx-serif);
    color: var(--wx-ink);
}

/* Let the sidebar shrink to the screen on phones (otherwise the long
   hourly strip would stretch it); the strip scrolls sideways instead. */
aside { min-width: 0; }
.wx { min-width: 0; max-width: 100%; }

.wx p { margin: 0; color: inherit; font-size: inherit; line-height: 1.45; }
.wx[aria-busy="true"] .wx-now, .wx[aria-busy="true"] .wx-sub { opacity: 0.45; }

/* ---------------------------------------------------------------------
   Sky panel
   --------------------------------------------------------------------- */

.wx-hero {
    position: relative;
    padding: 16px 18px 16px;
    overflow: hidden;
    isolation: isolate;
    transition: background 1.2s ease, color 0.6s ease;
    background: linear-gradient(170deg, #fdf3df 0%, #f6ead2 55%, #fbf6ee 100%);
}

.wx-hero[data-sky="clear"]     { background: linear-gradient(170deg, #fdf0d6 0%, #f9e6c4 50%, #fdf8f0 100%); }
.wx-hero[data-sky="partly"]    { background: linear-gradient(170deg, #f6efe2 0%, #ece6dc 55%, #faf7f2 100%); }
.wx-hero[data-sky="cloudy"]    { background: linear-gradient(170deg, #eceef0 0%, #e2e5e8 55%, #f6f6f5 100%); }
.wx-hero[data-sky="fog"]       { background: linear-gradient(170deg, #eeeeec 0%, #e4e4e1 60%, #f5f5f3 100%); }
.wx-hero[data-sky="rain"]      { background: linear-gradient(170deg, #dfe6ee 0%, #cdd8e4 55%, #eef2f6 100%); }
.wx-hero[data-sky="snow"]      { background: linear-gradient(170deg, #f1f5f9 0%, #e3eaf2 60%, #f8fafc 100%); }
.wx-hero[data-sky="storm"]     { background: linear-gradient(170deg, #c9cfda 0%, #b3bccb 55%, #dde2ea 100%); }
.wx-hero[data-sky="night"],
.wx-hero[data-sky="rain-night"] {
    background: linear-gradient(170deg, #1d2440 0%, #2b3557 60%, #3a4568 100%);
    color: #eef0f7;
}
.wx-hero[data-sky="night"] .wx-sub,
.wx-hero[data-sky="rain-night"] .wx-sub,
.wx-hero[data-sky="night"] .wx-live,
.wx-hero[data-sky="rain-night"] .wx-live { color: #c3c8da; }
.wx-hero[data-sky="night"] .wx-summary,
.wx-hero[data-sky="rain-night"] .wx-summary { border-top-color: rgba(255, 255, 255, 0.16); }

/* Soft sun glow on clear days */
.wx-hero[data-sky="clear"]::before,
.wx-hero[data-sky="partly"]::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -60px;
    right: -50px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 196, 70, 0.45) 0%, rgba(255, 196, 70, 0) 65%);
    animation: wx-glow 6s ease-in-out infinite;
}
/* A few stars at night */
.wx-hero[data-sky="night"]::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image:
        radial-gradient(1.2px 1.2px at 20% 30%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 70% 18%, #fff 50%, transparent 51%),
        radial-gradient(1.4px 1.4px at 85% 55%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 40% 70%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 60% 45%, #fff 50%, transparent 51%),
        radial-gradient(1.2px 1.2px at 10% 80%, #fff 50%, transparent 51%);
    opacity: 0.55;
    animation: wx-twinkle 5s ease-in-out infinite;
}

@keyframes wx-glow { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes wx-twinkle { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.3; } }

/* Falling rain & snow */
.wx-fx {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.wx-drop {
    position: absolute;
    top: -20px;
    width: 1.5px;
    height: 16px;
    border-radius: 1px;
    background: linear-gradient(to bottom, rgba(63, 127, 208, 0), rgba(63, 127, 208, 0.7));
    animation: wx-fall linear infinite;
}
.wx-hero[data-sky="rain-night"] .wx-drop { background: linear-gradient(to bottom, rgba(200, 215, 255, 0), rgba(200, 215, 255, 0.6)); }

.wx-flake {
    position: absolute;
    top: -10px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 2px rgba(120, 140, 170, 0.5);
    animation: wx-snow linear infinite;
}

@keyframes wx-fall { to { transform: translate(-12px, 300px); } }
@keyframes wx-snow { to { transform: translate(var(--drift, 0), 300px); } }

.wx-hero-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.wx h3.wx-place {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 600;
    color: inherit;
}

.wx-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    color: var(--wx-muted);
    white-space: nowrap;
}

.wx-live i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3fae5a;
    animation: wx-pulse 2.4s ease-out infinite;
}
@keyframes wx-pulse {
    0% { box-shadow: 0 0 0 0 rgba(63, 174, 90, 0.5); }
    70% { box-shadow: 0 0 0 7px rgba(63, 174, 90, 0); }
    100% { box-shadow: 0 0 0 0 rgba(63, 174, 90, 0); }
}

.wx-now {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0 -10px;
    transition: opacity 0.4s ease;
}

.wx-icon {
    width: 92px;
    height: 92px;
    flex: 0 0 auto;
}

.wx .wx-temp {
    display: flex;
    align-items: flex-start;
    font-size: 3.3rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.wx-unit {
    margin-top: 6px;
    font-size: 1.2rem;
    letter-spacing: 0;
    opacity: 0.7;
}

.wx .wx-cond {
    margin-top: 4px;
    font-size: 1.05rem;
    font-style: italic;
}

.wx .wx-sub {
    margin-top: 2px;
    font-size: 0.9rem;
    color: var(--wx-muted);
}

.wx-dot { margin: 0 6px; }

.wx .wx-summary {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(60, 50, 30, 0.1);
    font-size: 0.95rem;
}

/* ---------------------------------------------------------------------
   Alert
   --------------------------------------------------------------------- */

.wx-alert {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 9px 18px;
    border: 0;
    background: #fbe9e4;
    color: #8a2b1d;
    font: inherit;
    font-size: 0.92rem;
    text-align: left;
    cursor: pointer;
}
.wx-alert[hidden] { display: none; }
.wx-alert-more { margin-left: auto; font-size: 0.8rem; text-decoration: underline; text-underline-offset: 3px; }
.wx .wx-alert-body {
    padding: 4px 18px 12px;
    background: #fbe9e4;
    font-size: 0.86rem;
    color: #5e2a20;
}

/* ---------------------------------------------------------------------
   Rain next 2 hours
   --------------------------------------------------------------------- */

.wx-block { padding: 14px 18px 4px; }
.wx-block[hidden] { display: none; }

.wx .wx-label {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wx-faint);
}

.wx-nowcast {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 34px;
    margin-top: 8px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--wx-rule);
}

.wx-nc-bar {
    flex: 1;
    height: var(--h, 4%);
    min-height: 3px;
    border-radius: 3px 3px 0 0;
    background: #e3e0d8;
    transform-origin: bottom;
    animation: wx-grow 0.6s cubic-bezier(.2, .7, .2, 1) both;
}
.wx-nc-bar.is-wet   { background: #7fb0e6; }
.wx-nc-bar.is-heavy { background: var(--wx-rain); }
.wx-nc-bar:nth-child(2) { animation-delay: 0.04s; }
.wx-nc-bar:nth-child(3) { animation-delay: 0.08s; }
.wx-nc-bar:nth-child(4) { animation-delay: 0.12s; }
.wx-nc-bar:nth-child(5) { animation-delay: 0.16s; }
.wx-nc-bar:nth-child(6) { animation-delay: 0.20s; }
.wx-nc-bar:nth-child(7) { animation-delay: 0.24s; }
.wx-nc-bar:nth-child(8) { animation-delay: 0.28s; }
@keyframes wx-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.wx-nowcast-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 3px;
    font-size: 0.72rem;
    color: var(--wx-faint);
}

.wx .wx-nowcast-text {
    margin-top: 4px;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--wx-muted);
}

/* ---------------------------------------------------------------------
   Tabs
   --------------------------------------------------------------------- */

.wx-tabs {
    display: flex;
    gap: 4px;
    margin: 12px 18px 0;
    padding: 3px;
    border-radius: 999px;
    background: var(--wx-wash);
    border: 1px solid var(--wx-rule);
}

.wx-tabs button {
    flex: 1;
    padding: 6px 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-size: 0.88rem;
    color: var(--wx-muted);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.wx-tabs button[aria-selected="true"] { background: var(--wx-ink); color: #fff; }
.wx-tabs button:focus-visible,
.wx-day-row:focus-visible,
.wx-strip:focus-visible,
.wx-alert:focus-visible,
.wx-strip-btn:focus-visible { outline: 2px solid var(--wx-accent); outline-offset: 2px; }

.wx-panel { padding: 10px 0 2px; }
.wx-panel[hidden] { display: none; }

/* ---- Hourly strip ---- */

.wx-strip-wrap { position: relative; }

.wx-strip {
    display: flex;
    gap: 2px;
    padding: 4px 18px 6px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding: 0 18px;
    scrollbar-width: none;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
}
.wx-strip::-webkit-scrollbar { display: none; }
.wx-strip.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.wx-strip.is-dragging * { pointer-events: none; }

.wx-hour {
    flex: 0 0 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 0 4px;
    border-radius: 10px;
    scroll-snap-align: start;
    transition: background 0.15s ease;
    user-select: none;
}
.wx-hour:hover { background: var(--wx-wash); }
.wx-hour:first-child { background: var(--wx-wash); }

.wx-hour-time { font-size: 0.74rem; color: var(--wx-muted); white-space: nowrap; }
.wx-hour-icon { width: 34px; height: 34px; -webkit-user-drag: none; }
.wx-hour-temp { font-size: 0.98rem; font-variant-numeric: tabular-nums; }
.wx-hour-sunlabel { font-size: 0.68rem; color: var(--wx-muted); }
.wx-hour--sun .wx-hour-time { color: #b0721a; }

.wx-hour-rain {
    position: relative;
    width: 30px;
    height: 16px;
    font-size: 0.68rem;
    line-height: 16px;
    text-align: center;
    color: var(--wx-faint);
    font-variant-numeric: tabular-nums;
}
.wx-hour-rain::before {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: -3px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--wx-rain) var(--p, 0%), #e8e4dc var(--p, 0%));
}
.wx-hour-rain.is-on { color: var(--wx-rain); font-weight: 600; }

.wx-strip-btn {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 26px;
    height: 26px;
    margin-top: -13px;
    border: 1px solid var(--wx-rule);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    font-size: 1.1rem;
    line-height: 1;
    color: var(--wx-ink);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.wx-strip-prev { left: 4px; }
.wx-strip-next { right: 4px; }
.wx-strip-wrap.can-left .wx-strip-prev,
.wx-strip-wrap.can-right .wx-strip-next { opacity: 1; pointer-events: auto; }

.wx-strip-wrap::before,
.wx-strip-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 22px;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.wx-strip-wrap::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); }
.wx-strip-wrap::after  { right: 0; background: linear-gradient(-90deg, #fff, rgba(255, 255, 255, 0)); }
.wx-strip-wrap.can-left::before,
.wx-strip-wrap.can-right::after { opacity: 1; }

@media (hover: none) { .wx-strip-btn { display: none; } }

/* ---- 7 days ---- */

.wx-days { list-style: none; margin: 0; padding: 0 10px; }

.wx-day-row {
    display: grid;
    grid-template-columns: 50px 30px 30px 26px 1fr 26px;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 5px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}
.wx-day-row:hover, .wx-day-row[aria-expanded="true"] { background: var(--wx-wash); }

.wx-day-name { font-size: 0.95rem; }
.wx-day-icon { width: 30px; height: 30px; }
.wx-day-rain { font-size: 0.74rem; color: var(--wx-faint); font-variant-numeric: tabular-nums; }
.wx-day-rain.is-on { color: var(--wx-rain); font-weight: 600; }
.wx-day-lo, .wx-day-hi { font-size: 0.92rem; font-variant-numeric: tabular-nums; text-align: right; }
.wx-day-lo { color: var(--wx-faint); }

.wx-range {
    position: relative;
    height: 5px;
    border-radius: 3px;
    background: #ece8df;
}
.wx-range i {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 3px;
    background: linear-gradient(90deg, #8fbfdc, #f2c66d, #e8894f);
}
.wx-range b {
    position: absolute;
    top: 50%;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--wx-ink);
}

.wx-day-more {
    margin: 2px 8px 6px;
    padding: 8px 10px;
    border-left: 2px solid var(--wx-rain);
    font-size: 0.86rem;
    line-height: 1.5;
    color: #45413a;
    animation: wx-open 0.25s ease;
}
@keyframes wx-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.wx .wx-hint {
    padding: 4px 18px 0;
    font-size: 0.76rem;
    font-style: italic;
    color: var(--wx-faint);
}

/* ---------------------------------------------------------------------
   Detail tiles
   --------------------------------------------------------------------- */

.wx-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0 14px;
}

.wx-tile {
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--wx-wash);
    min-width: 0;
}

.wx-tile dt {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wx-faint);
}

.wx-tile dd {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 4px 0 0;
}

.wx-tile-main { font-size: 1.2rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.wx-tile-main.wx-small { font-size: 0.92rem; }
.wx-tile-sub { font-size: 0.78rem; color: var(--wx-muted); line-height: 1.35; }

.wx-compass {
    position: absolute;
    right: -2px;
    top: -18px;
    width: 34px;
    height: 34px;
}
.wx-compass circle { fill: #fff; stroke: #ddd6c8; stroke-width: 1.2; }
.wx-compass text { font-size: 6px; text-anchor: middle; fill: var(--wx-faint); font-family: var(--wx-serif); }
.wx-arrow { transform-origin: 20px 20px; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.wx-arrow path { fill: var(--wx-accent); }
.wx-arrow line { stroke: var(--wx-accent); stroke-width: 1.6; stroke-linecap: round; }

.wx-aqi {
    align-self: flex-start;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 1.05rem;
    line-height: 1.5;
    background: var(--aqi, #e8e4dc);
    color: var(--aqi-ink, var(--wx-ink));
    font-variant-numeric: tabular-nums;
}
.wx-aqi.aqi-1 { --aqi: #4cbb5a; --aqi-ink: #12351a; }
.wx-aqi.aqi-2 { --aqi: #f2d43a; --aqi-ink: #3d3307; }
.wx-aqi.aqi-3 { --aqi: #f08a24; --aqi-ink: #3f2005; }
.wx-aqi.aqi-4 { --aqi: #de3a2f; --aqi-ink: #fff; }
.wx-aqi.aqi-5 { --aqi: #8f3f97; --aqi-ink: #fff; }
.wx-aqi.aqi-6 { --aqi: #7e0023; --aqi-ink: #fff; }

.wx-uvbar {
    position: relative;
    display: block;
    height: 4px;
    margin: 5px 0 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #6cc070, #f2d43a 30%, #f08a24 55%, #de3a2f 75%, #8f3f97);
}
.wx-uvbar i {
    position: absolute;
    top: 50%;
    left: 0;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--wx-ink);
    transition: left 0.8s cubic-bezier(.2, .7, .2, 1);
}

.wx-sunarc {
    position: absolute;
    right: -4px;
    top: -25px;
    width: 40px;
    height: 22px;
}
.wx-sunarc line { stroke: #ddd6c8; stroke-width: 1.2; }
.wx-sunarc path { fill: none; stroke: #e9c46a; stroke-width: 1.2; stroke-dasharray: 2 3; }
#wx-sun-dot { fill: #ffbf2e; stroke: #fff; stroke-width: 1.2; transition: cx 1s ease, cy 1s ease; }
#wx-sun-dot.is-night { fill: #c9c4b8; }

.wx-moon {
    position: absolute;
    right: 0;
    top: -18px;
    width: 26px;
    height: 26px;
}
.wx-moon-dark { fill: #2a2d3a; }
.wx-moon-lit  { fill: #f4efdf; }

.wx .wx-credit {
    padding: 12px 18px 14px;
    font-size: 0.72rem;
    color: var(--wx-faint);
}
.wx-credit a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
    .wx-hero::before, .wx-live i, .wx-nc-bar, .wx-day-more { animation: none !important; }
    .wx-fx { display: none; }
    .wx-arrow, .wx-uvbar i { transition: none; }
}