/* ============================================================================
   NordMove - the weather in the top right corner.
   Loaded by every public page that shows the widget.

   The colours are the site's own tokens, not new ones:
     --accent  #ffd700   gold   - the temperature, the bars, nothing else
     --page-ink        - the number itself
     --muted   #a99f92  - the date, the wind, the source line
     --line    #2a2c33  - the divider between the days

   Curves are written out rather than using the built-in keywords: the CSS
   presets are too soft and the widget then feels like it is thinking.
   ============================================================================ */

.wx {
    --wx-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    display: inline-block;
    font: inherit;
}

/* ---------------------------------------------------------------- the pill */
.wx-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 11px 5px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 215, 0, 0.26);
    background: rgba(255, 215, 0, 0.05);
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease-out;
}
.wx-pill:active { transform: scale(0.97); }
.wx-pill:focus-visible { outline: 2px solid #ffd700; outline-offset: 2px; }

.wx-temp {
    font-size: 15px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px;
    line-height: 1;
}
.wx-deg { color: #ffd700; font-weight: 650; }

.wx-glyph { color: #ffd700; display: inline-flex; width: 22px; height: 22px; }
.wx-glyph svg { display: block; }
.wx-glyph-lg { width: 42px; height: 42px; }
.wx-glyph-sm { width: 18px; height: 18px; color: #a99f92; }
/* The colour of the icon says what kind of weather it is. These are icon
   colours only - a name used for BOTH an icon colour and a row box was a real
   mistake (found 2026-10-15 by photographing the panel: the box rules landed on
   the 18px icon and it became a grey square). The row is called wx-precip now. */
.wx-sky { color: #bfe3ff; }
.wx-rain { color: #8fc6ff; }
.wx-storm { color: #ffd0a0; }

.wx-caret {
    width: 7px;
    height: 7px;
    margin-left: 1px;
    border-right: 1.5px solid #a99f92;
    border-bottom: 1.5px solid #a99f92;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 180ms var(--wx-ease-out);
}
.wx-pill[aria-expanded="true"] .wx-caret { transform: rotate(-135deg) translateY(-1px); }

/* the name and temperature for a screen reader, invisible on screen */
.wx-sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* An older reading is dimmed and says its age - never dressed up as current. */
.wx[data-stale="1"] .wx-temp { opacity: 0.72; }

/* --------------------------------------------------------------- the panel */
.wx-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 60;
    width: 330px;
    max-width: calc(100vw - 32px);
    padding: 13px 14px 9px;
    border: 1px solid #2a2c33;
    border-radius: 11px;
    background: #2e2929;
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.9);
    text-align: left;
    /* a popover grows out of its own button, not out of the middle of the screen */
    transform-origin: top right;
    transition: opacity 170ms var(--wx-ease-out), transform 170ms var(--wx-ease-out);
}
.wx-panel[hidden] { display: none; }

/* never appears from nothing: a barely-visible scale plus opacity */
.wx-panel {
    opacity: 1;
    transform: scale(1) translateY(0);
}
@starting-style {
    .wx-panel:not([hidden]) { opacity: 0; transform: scale(0.96) translateY(-4px); }
}

.wx-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 11px;
}
.wx-place {
    font-size: 12px;
    color: #a99f92;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.wx-big {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
.wx-big span { color: #ffd700; font-size: 18px; font-weight: 650; }
.wx-facts { font-size: 12px; color: #a99f92; }

.wx-row {
    display: grid;
    grid-template-columns: 96px 20px 1fr 72px auto;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.045);
    font-size: 13px;
}

/* sunrise, sunset, UV - one quiet line under the temperature */
.wx-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    padding: 9px 0 3px;
    margin-bottom: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.045);
}
.wx-metric {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #a99f92;
    white-space: nowrap;
}
.wx-metric-icon { width: 15px; height: 15px; color: #e0a327; }
.wx-metric-label { color: #a99f92; }
.wx-metric-value { color: #f6f2ea; font-weight: 600; font-variant-numeric: tabular-nums; }
.wx-glyph-xs { width: 15px; height: 15px; }

/* the snow line: drawn only when the week really carries snow */
.wx-precip {
    margin-top: 7px;
    padding: 6px 9px;
    border-radius: 7px;
    background: rgba(191, 227, 255, 0.09);
    border: 1px solid rgba(191, 227, 255, 0.22);
    color: #dceeff;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}
.wx-precip::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 7px;
    border-radius: 50%;
    background: #bfe3ff;
    vertical-align: 1px;
}
.wx-row:first-of-type { border-top: 0; }
.wx-day { color: #a99f92; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wx-row.is-today .wx-day { color: #ffd700; font-weight: 650; }

.wx-bar {
    position: relative;
    height: 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}
.wx-bar i {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 4px;
    background: linear-gradient(90deg, #e0a327, #ffd700);
    transition: left 300ms var(--wx-ease-out), width 300ms var(--wx-ease-out);
}
.wx-t { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wx-t b { font-weight: 650; }
.wx-t s { color: #a99f92; text-decoration: none; margin-left: 6px; }

.wx-rain {
    font-size: 11.5px;
    color: #8fc6ff;
    font-variant-numeric: tabular-nums;
}

.wx-foot {
    margin-top: 8px;
    font-size: 11.5px;
    color: #a99f92;
    letter-spacing: 0.2px;
}

/* ---------------------------------------------------------- how it behaves */
/* A hover effect that also fires on a tap is a lie on a phone. */
@media (hover: hover) and (pointer: fine) {
    .wx-pill:hover { border-color: rgba(255, 215, 0, 0.5); background: rgba(255, 215, 0, 0.09); }
}

/* Narrow screens: the panel must not run off the side, and the pill must not
   push the language switch and the button out of the header. */
@media (max-width: 900px) {
    .wx-panel { width: 300px; }
    .wx-row { grid-template-columns: 58px 20px 1fr 70px auto; gap: 7px; font-size: 13px; }
}
@media (max-width: 560px) {
    .wx-panel { position: fixed; left: 12px; right: 12px; width: auto; top: auto; }
    .wx-temp { font-size: 14px; }
    .wx-pill { padding: 5px 9px 5px 7px; gap: 6px; }
    .wx-rain { display: none; }
}

/* Motion is decoration here, not information: with reduced motion the panel
   still fades (it helps understanding) but nothing moves. */
@media (prefers-reduced-motion: reduce) {
    .wx-pill, .wx-caret, .wx-panel, .wx-bar i { transition-duration: 1ms; }
    @starting-style {
        .wx-panel:not([hidden]) { opacity: 1; transform: none; }
    }
}