/* =========================================================================
   Roberts Limbrick Home — Weather widget styles
   Reuses the design tokens from styles.css (--card-bg, --shadow, etc.).
   If you drop this widget onto a page that doesn't load styles.css, the
   :root fallbacks below keep it looking right.
   ========================================================================= */

#weather-widget {outline: none;width: 60%;}

/* ===== Slideshow shell ===== */
.wx-slideshow:hover .wx-nav {visibility: visible}
.wx-slideshow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "prev viewport next"
    "dots dots dots";
  align-items: center;
  gap: 8px 0px;
  justify-content: end;
  max-width: 300px;
  margin-left: auto; /* keep it right-aligned like the mockup */
  min-width: 245px;
  /* background: #f1f1f1; */
}

.wx-viewport { grid-area: viewport; }

/* Prev / next arrows */
.wx-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 34px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--accent);
  background: transparent;
  /* box-shadow: var(--shadow); */
  transition: transform 0.12s ease, background 0.12s ease;
  visibility: hidden;
}

.wx-nav:hover { transform: scale(1.08); }
.wx-nav:active { transform: scale(0.96); }
.wx-nav svg { width: 18px; height: 18px; }
.wx-prev { grid-area: prev; }
.wx-next { grid-area: next; }

/* Dots */
.wx-dots {
  grid-area: dots;
  display: flex;
  gap: 8px;
  justify-content: center;
  padding-top: 2px;
  visibility: hidden;
}

.wx-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: var(--dot-idle, rgba(16, 21, 28, 0.22));
  transition: background 0.12s ease, transform 0.12s ease;
}

.wx-dot:hover { transform: scale(1.2); }
.wx-dot.is-active { background: var(--accent); }

/* One office card */
.wx-card {
  /* background: var(--card-bg); */
  /* border-radius: var(--radius); */
  /* box-shadow: var(--shadow); */
  padding: 0;
  flex-direction: column;
  gap: 2px;
}

/* Only the active card is shown */
.wx-card { display: none; }
.wx-card.is-active { display: flex; }

/* Current conditions: icon + city + temp */
.wx-head {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
}

.wx-now-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.wx-now-icon svg {
  width: 36px;
  height: 36px;
}

.wx-now-main {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  text-align: right;
}

.wx-city {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--link);
}

.wx-temp {
  font-size: 22px;
  /* font-weight: 800; */
  color: var(--ink);
}

.wx-desc {
  font-size: clamp(14px, 1.5vw, 17px);
  /* color: var(--muted); */
  margin: 0;
  text-align: right;
  padding: 0;
}

/* 3-day forecast strip */
.wx-forecast {
  display: flex;
  gap: 6px;
  border-top: 1px solid var(--border-soft, rgba(16, 21, 28, 0.08));
  padding-top: 10px;
  margin-top: auto;
  display: none;
}

.wx-day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.wx-day-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--link);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wx-day-icon {
  color: var(--accent);
  display: inline-flex;
}

.wx-day-icon svg {
  width: 24px;
  height: 24px;
}

.wx-day-temp {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.wx-day-temp strong {
  color: var(--ink);
  font-weight: 700;
}

/* Loading + error states */
.wx-loading {
  font-size: 14px;
  color: var(--muted);
  padding: 12px 4px;
}

.wx-card--error {
  opacity: 0.7;
}

.wx-card--error .wx-now-icon { color: var(--muted); }

/* Responsive: let the slideshow fill the width on narrow screens */
@media (max-width: 900px) {
  #weather-widget { width: auto; }
  .wx-slideshow {
    max-width: none;
    margin-left: 0;
  }
}

@media (max-width: 600px) {
  .wx-slideshow { margin-left: auto; max-width: 260px; }
}