/*
 * Weather summary card — surfaces current conditions + today's forecast
 * for a single PlaceName, linking to /<state>/<place_tag>.
 *
 * The whole element is a single <a> link. The selector `a.weather-summary`
 * is intentional — it's needed to override the SD radar legacy stylesheet's
 * `.animation-meta-element a { text-decoration: underline }` (same
 * specificity, mine wins by cascade order). All inner spans inherit no
 * underline once the parent <a> has none, so no per-span overrides needed.
 *
 * 2-column grid (Now | Today) inside, centered within each cell so small
 * data points read as a single weather glance, not a fragmented bullet
 * list. Collapses to one column under 320 px.
 */

a.weather-summary {
  display: block;
  text-decoration: none;
  color: var(--fg-text);
  line-height: 1.3;
}

a.weather-summary:hover,
a.weather-summary:focus {
  background: var(--bg-muted-hover);
  text-decoration: none;
}

a.weather-summary:visited {
  color: var(--fg-text);
}

/* ---- 2-column body ---- */

.weather-summary-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
  margin-bottom: 6px;
}

.weather-summary-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1px;
  min-width: 0;
}

.weather-summary-label {
  color: var(--fg-muted);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}

.weather-summary-temp {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--fg-strong);
  line-height: 1.1;
}

.weather-summary-wind {
  color: var(--fg-muted);
  font-size: 0.75rem;
}

.weather-summary-hilo {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.1;
}

.weather-summary-hilo .hi { color: #dc2626; }
.weather-summary-hilo .lo { color: var(--brand-blue); }

.weather-summary-rain {
  color: var(--brand-blue);
  font-size: 0.75rem;
}

/* Icon inline with section title (e.g. "Melbourne Conditions & Forecast") */
.weather-summary-title-icon {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
  vertical-align: -3px;
}

.weather-summary-title-icon img,
.weather-summary-title-icon svg {
  height: 18px;
  width: 18px;
}

.weather-summary-desc {
  color: var(--fg-muted);
  font-size: 0.75rem;
  font-style: italic;
}

@media (max-width: 320px) {
  .weather-summary-body {
    grid-template-columns: 1fr;
    gap: 4px 0;
  }
}

/* ---- CTA ---- */

.weather-summary-cta {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  color: var(--brand-blue);
  font-weight: 500;
}

/* ---- variant: :sidebar (default) — flush inside .animation-meta-element ---- */

/* Tag-qualified selector (a.weather-summary-sidebar, 0,1,1) so this beats the
 * inherited HD-radar `.configure-sub a` action-button rule in radar.css that
 * paints any anchor inside .configure-sub light-blue / white-text. */
a.weather-summary-sidebar {
  padding: 8px 10px;
  border-radius: 4px;
  background: transparent;
  border: 0;
}

/* ---- variant: :card — standalone with its own chrome ---- */

a.weather-summary-card {
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  transition: background 120ms ease, border-color 120ms ease;
}

/* ---- HD radar section titles ----
 * Custom class because `.configure-header` is `display:none` inside the HD
 * radar mobile sidebar (map_shared.css hides standard sidebar control labels
 * on mobile to save space). Our weather + Quick Links headings need to
 * persist on every viewport. */
.hd-section-title,
.hd-quick-links-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--fg-strong);
  margin-bottom: 6px;
  text-align: left;
}

/* ---- HD radar Quick Links (mirrors SD's Quick Links pattern) ---- */
.hd-quick-links {
  padding: 10px 12px;
}

.hd-quick-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 0.85rem;
}

.hd-quick-link img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.hd-quick-link span {
  color: var(--fg-muted);
}

/* Higher specificity than radar.css `.configure-sub a` (0,1,1) so simple
 * text-link styling wins instead of action-button pill paint. */
.hd-quick-link a {
  color: var(--brand-blue);
  text-decoration: none;
  font-weight: 500;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
}

.hd-quick-link a:hover {
  text-decoration: underline;
}

a.weather-summary-card:hover,
a.weather-summary-card:focus {
  border-color: var(--brand-blue);
}