/* Swag Weather widget – override the --sw-* variables to match the brand. */
.swag-weather {
  --sw-font: inherit;
  --sw-color: #1f2a24;
  --sw-muted: #5d6b63;
  --sw-accent: #2f5d3a;
  --sw-bg: transparent;
  --sw-border: rgba(0, 0, 0, .12);
  --sw-radius: 8px;
  --sw-pad: 1rem;
  --sw-temp-size: 3rem;

  font-family: var(--sw-font);
  color: var(--sw-color);
  background: var(--sw-bg);
  padding: var(--sw-pad);
  border-radius: var(--sw-radius);
  line-height: 1.35;
  max-width: 28rem;
}
.swag-weather *, .swag-weather *::before, .swag-weather *::after { box-sizing: border-box; }
.swag-weather p, .swag-weather ul { margin: 0; padding: 0; }

.swag-weather__now { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.swag-weather__icon img { width: calc(var(--sw-temp-size) * 1.1); height: calc(var(--sw-temp-size) * 1.1); display: block; }
.swag-weather__icon { display: inline-flex; }
.swag-weather__day-icon img { width: 2rem; height: 2rem; display: block; }
.swag-weather__temp { font-size: var(--sw-temp-size); font-weight: 700; line-height: 1; color: var(--sw-accent); }
.swag-weather__cond { font-size: 1.1rem; }
.swag-weather__meta { margin-top: .4rem; font-size: .9rem; color: var(--sw-muted); }

.swag-weather__days { list-style: none; margin-top: .9rem; border-top: 1px solid var(--sw-border); }
.swag-weather__day {
  display: grid; grid-template-columns: 4.5rem 2.2rem 1fr auto; align-items: center; gap: .5rem;
  padding: .5rem 0; border-bottom: 1px solid var(--sw-border);
}
.swag-weather__day-name { font-weight: 600; }
.swag-weather__range { display: inline-flex; gap: .6rem; }
.swag-weather__hi { font-weight: 700; }
.swag-weather__lo { color: var(--sw-muted); }
.swag-weather__pop { font-size: .8rem; color: var(--sw-muted); text-align: right; }

.swag-weather__foot { margin-top: .6rem; font-size: .8rem; color: var(--sw-muted); }
.swag-weather__foot a { color: var(--sw-accent); }
.swag-weather__error { color: var(--sw-muted); }

.swag-weather.is-loading .swag-weather__loading { color: var(--sw-muted); animation: swag-weather-pulse 1.4s ease-in-out infinite; }
@keyframes swag-weather-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .swag-weather.is-loading .swag-weather__loading { animation: none; } }

@media (max-width: 380px) {
  .swag-weather__day { grid-template-columns: 4rem 1.8rem 1fr; }
  .swag-weather__pop { grid-column: 1 / -1; text-align: left; }
}