/* GracePress Local Weather. Theme-agnostic: inherits fonts and text color, no literal black or white (dark mode
   adapts the whole page and re-inverts <img> icons, so the full-color weather icons stay natural). */
.gp-weather { --gpw-line: rgba(127, 127, 127, .4); --gpw-soft: rgba(127, 127, 127, .12); font: inherit; color: inherit; line-height: 1.4; }
.gp-weather__title { margin: 0 0 .5em; font-size: 1.15em; }
.gp-weather__status { margin: 0; opacity: .75; }
.gp-weather__icon { display: inline-block; flex: none; vertical-align: middle; }
.gp-weather a { color: inherit; text-decoration: underline; text-decoration-color: var(--gpw-line); text-underline-offset: .15em; }

/* Header: place and tools */
.gp-weather__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4em 1em; padding-bottom: .6em; border-bottom: 1px solid var(--gpw-line); }
.gp-weather__place strong { font-size: 1.05em; }
.gp-weather__region { font-weight: 400; opacity: .8; }
.gp-weather__note { margin: 0; font-size: .78em; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.gp-weather__place .gp-weather__note { display: inline-block; margin-left: .8em; }
.gp-weather__tools { display: flex; flex-wrap: wrap; gap: .4em; }
.gp-weather__btn { font: inherit; font-size: .8em; color: inherit; background: transparent; border: 1px solid var(--gpw-line); border-radius: 999px; padding: .2em .8em; cursor: pointer; }
.gp-weather__btn:hover, .gp-weather__btn:focus-visible { background: var(--gpw-soft); outline: none; }

/* Now */
.gp-weather__now { display: flex; align-items: center; gap: 1em; padding: .8em 0; }
.gp-weather__now-icon { width: 132px; height: 132px; margin: -10px -6px; }
.gp-weather__temp { font-size: 3.2em; line-height: 1; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gp-weather__temp small { font-size: .4em; font-weight: 400; margin-left: .05em; opacity: .75; letter-spacing: 0; vertical-align: .95em; }
.gp-weather__cond { font-size: 1.2em; margin-top: .15em; }
.gp-weather__sub { font-size: .9em; opacity: .8; margin-top: .3em; }

/* Facts */
.gp-weather__facts { list-style: none; margin: 0; padding: .4em 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(8em, 1fr)); gap: .1em .8em; border-top: 1px solid var(--gpw-line); border-bottom: 1px solid var(--gpw-line); }
.gp-weather__fact { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .4em; align-items: center; padding: .15em 0; }
.gp-weather__fact-icon { grid-row: 1 / span 2; width: 32px; height: 32px; }
.gp-weather__fact-label { font-size: .72em; letter-spacing: .06em; text-transform: uppercase; opacity: .7; align-self: end; }
.gp-weather__fact-value { font-variant-numeric: tabular-nums; align-self: start; }

/* Hour by hour */
.gp-weather__hourly { display: flex; gap: .3em; overflow-x: auto; padding: .7em 0; scrollbar-width: thin; }
.gp-weather__hour { flex: 0 0 auto; min-width: 4.2em; display: flex; flex-direction: column; align-items: center; gap: .1em; padding: .35em .3em; border-radius: .6em; background: var(--gpw-soft); }
.gp-weather__hour-time { font-size: .78em; opacity: .8; white-space: nowrap; }
.gp-weather__hour-icon { width: 44px; height: 44px; }
.gp-weather__hour-temp { font-variant-numeric: tabular-nums; }
.gp-weather__hour-precip { font-size: .7em; opacity: .75; white-space: nowrap; }

/* Day by day */
.gp-weather__days { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gpw-line); }
.gp-weather__day { display: grid; grid-template-columns: 4em 40px 3.6em 2.4em minmax(3em, 1fr) 2.4em; align-items: center; gap: .5em; padding: .25em 0; border-bottom: 1px solid var(--gpw-line); font-variant-numeric: tabular-nums; }
.gp-weather__day-name { font-weight: 600; white-space: nowrap; }
.gp-weather__day-icon { width: 38px; height: 38px; padding: 3px; box-sizing: border-box; border-radius: 50%; background: var(--gpw-soft); }
.gp-weather__day-precip { font-size: .78em; opacity: .75; text-align: right; }
.gp-weather__day-lo { text-align: right; opacity: .75; }
.gp-weather__bar { position: relative; height: .5em; border-radius: 999px; background: var(--gpw-soft); }
.gp-weather__bar i { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #4aa3ff, #ffb347); }
.gp-weather__credit { margin: .8em 0 0; font-size: .72em; opacity: .7; }

/* Compact: one line, details in a collapsed box */
.gp-weather--compact .gp-weather__line { display: flex; flex-wrap: wrap; align-items: center; gap: .2em .8em; }
.gp-weather--compact .gp-weather__now-icon { width: 56px; height: 56px; margin: -6px -4px; }
.gp-weather--compact .gp-weather__temp { font-size: 1.8em; }
.gp-weather--compact .gp-weather__cond { font-size: 1em; margin: 0; }
.gp-weather__where { opacity: .8; }
.gp-weather__box { margin-top: .4em; border-top: 1px solid var(--gpw-line); border-bottom: 1px solid var(--gpw-line); }
.gp-weather__summary { display: flex; align-items: center; gap: .6em; padding: .45em 0; cursor: pointer; list-style: none; font-size: .92em; }
.gp-weather__summary::-webkit-details-marker { display: none; }
.gp-weather__hint { flex: 1; min-width: 0; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-weather__summary::after { content: ""; flex: none; width: .45em; height: .45em; margin: 0 .3em 0 auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
.gp-weather__box[open] > .gp-weather__summary::after { transform: rotate(-135deg); }
.gp-weather__summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.gp-weather__more { padding-bottom: .5em; }
.gp-weather__more > .gp-weather__note { margin: .2em 0 .3em; }
.gp-weather--compact .gp-weather__tools { margin-bottom: .5em; }

@media (max-width: 520px) {
  .gp-weather__now-icon { width: 104px; height: 104px; margin: -8px -6px; }
  .gp-weather__temp { font-size: 2.6em; }
  .gp-weather__day { grid-template-columns: 3.7em 34px 3em 2.1em minmax(2em, 1fr) 2.1em; gap: .3em; }
  .gp-weather__day-precip { font-size: .7em; }
}
@media (prefers-reduced-motion: reduce) { .gp-weather__summary::after { transition: none; } }