/* Family Weather Polish overrides (additive only) */
:root {
  --fw-ui-accent: #9fd0ff;
  --fw-font-color: #e8f3ff;
  --fw-hero-box-color: #1b2942;
}

/* Daily soft overlay */
#fw-day-overlay {
  display: none !important;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: var(--fw-day-overlay, rgba(120, 160, 255, 0.006));
  mix-blend-mode: normal;
  opacity: 0.9;
}

#fw-day-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(1200px 700px at 10% -10%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06) 38%, transparent 68%);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  #fw-day-overlay {
    -webkit-backdrop-filter: saturate(104%) blur(1px);
    backdrop-filter: saturate(104%) blur(1px);
  }
}

/* Keep content above overlay */
#wrapper,
header,
section,
footer {
  position: relative;
  z-index: 2;
}

/* Site-wide font color control */
body,
body p,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body span,
body a,
body li,
body label,
body .small,
body .lead {
  color: var(--fw-font-color);
}

/* Option A: standalone hourly card near weather area */
.fw-hourly-card {
  border-radius: 12px;
}

.fw-hourly-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 0 2px;
}

.fw-hourly-tile {
  min-width: 88px;
  flex: 0 0 auto;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 10px 8px;
  background: rgba(255, 255, 255, 0.04);
}

.fw-hourly-time {
  font-size: 12px;
  opacity: 0.88;
}

.fw-hourly-icon img {
  width: 22px;
  height: 22px;
}

.fw-hourly-temp {
  font-size: 13px;
  font-weight: 700;
}

.fw-hourly-precip {
  font-size: 11px;
  opacity: 0.9;
}

/* Use only new hourly card: hide old inline hourly in Right Now */
#fw-rightnow .rn-hourly-block {
  display: none;
}

/* Diorama polish */
#fw-rightnow .rn-scene {
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
}

#fw-rightnow .rn-scene.fw-scene-upgraded::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 48%);
  pointer-events: none;
}

/* Fab Five vertical list */
#fw-forecast .fw-favorites-strip.fw-fab5-vertical {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  overflow: visible;
}

/* Hero/weather box background color control */
#section-weather .bg-dark-2,
#section-weather-extras .bg-dark-2,
#section-flows .bg-dark-2,
#section-form .bg-dark-2,
.fw-hourly-card {
  background-color: var(--fw-hero-box-color) !important;
}

.fw-fab5-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  padding: 8px 10px;
  color: #fff;
  text-align: left;
}

.fw-fab5-row:hover {
  background: rgba(255, 255, 255, 0.08);
}

.fw-fab5-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--fw-ui-accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fw-fab5-temp {
  font-size: 12px;
  font-weight: 700;
}

.fw-fab5-updated {
  font-size: 10px;
  opacity: 0.72;
}

/* Right Now location text emphasis */
.fw-rn-location {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--fw-ui-accent);
  margin-bottom: 4px;
}

/* Accent color across weather cards + hero style boxes */
#fw-rightnow .subtitle,
#fw-rightnow .small,
#fw-forecast .subtitle,
#fw-forecast .small,
#fw-hourly-polish .subtitle,
#fw-hourly-polish .fw-hourly-time,
#fw-hourly-polish .fw-hourly-temp,
#fw-hourly-polish .fw-hourly-precip,
#section-weather-extras .subtitle,
#section-weather-extras .small,
#section-flows .bg-dark-2 h3,
#section-flows .bg-dark-2 h4,
#section-flows .bg-dark-2 p {
  color: var(--fw-ui-accent);
}

/* Slightly bigger + bolder weather/hero headings */
#fw-rightnow .subtitle,
#fw-forecast .subtitle,
#fw-hourly-polish .subtitle,
#section-weather-extras .subtitle,
#section-flows .bg-dark-2 h3,
#section-flows .bg-dark-2 h4 {
  font-size: 1.08em;
  font-weight: 800;
}

#section-flows .bg-dark-2 p,
#section-weather-extras .small,
#fw-forecast .small,
#fw-rightnow .small {
  font-weight: 600;
}

/* Icons in forecast and hero boxes */
#fw-rightnow .fw-rightnow-icon img,
#fw-forecast .fw-forecast-icon img,
#fw-hourly-polish .fw-hourly-icon img,
#section-weather-extras img,
#section-flows .bg-dark-2 img,
#section-flows .bg-dark-2 i,
#section-weather-extras i {
  filter: drop-shadow(0 0 5px var(--fw-ui-accent));
}

#section-flows .bg-dark-2 img,
#section-flows .bg-dark-2 i,
#section-weather-extras i {
  transform: scale(1.08);
  transform-origin: center;
}

@media (max-width: 767px) {
  .fw-fab5-row {
    grid-template-columns: 1fr auto auto;
  }

  .fw-fab5-updated {
    display: none;
  }
}