/* BoulderCAST forecast banner (banner-widget.js builds it): a slice of the
   hourly forecast page, its 3-hour tiles and tomorrow's high and low.
   The WP Dark Mode plugin rewrites the colors of every rule it can read but
   leaves rules inside @container alone, so the banner is a container and its
   styles sit in one query that always matches, with its own dark colors
   under html[data-wp-dark-mode-active], as on the hourly forecast page. */

/* Out here because @container rules reach only what's inside the box, not
   the box itself (no colors, so nothing for the plugin to change) */
.bcbn {
  container-type: inline-size;
  position: relative;
  margin: 0 0 1.5em;
}

/* data-wide="breakout": as wide as the screen allows rather than the spot
   it's in, up to 1800px, centered on that spot. It stays 56px in from each
   edge, clear of the theme's share buttons along the left side (48px wide).
   --bcbn-vw is the page's width without its scrollbar (set by the JS;
   100vw would count the scrollbar). More room means more tiles: every hour
   once 24 fit. */
.bcbn[data-wide="breakout"] {
  --bcbn-w: min(1800px, calc(var(--bcbn-vw, 100vw) - 112px));
  width: var(--bcbn-w);
  max-width: none;
  margin-left: calc((100% - var(--bcbn-w)) / 2);
}
/* Phones and tablets: the share buttons aren't down the side, so 12px */
@media (max-width: 900px) {
  .bcbn[data-wide="breakout"] { --bcbn-w: calc(var(--bcbn-vw, 100vw) - 24px); }
}

@container (min-width: 0px) {

/* ---------- Colors: the hourly forecast page's ---------- */

.bcbn .bcbn-card {
  --bcbn-panel: #FFFFFF;
  --bcbn-text: #1F2D3A;
  --bcbn-muted: #56677A;
  --bcbn-line: #DCE3EA;
  --bcbn-strong: #0E1A26;
  --bcbn-shade: rgba(16, 32, 48, 0.035);   /* night tiles */
  --bcbn-strongline: rgba(16, 32, 48, 0.3);
  --bcbn-link: #1A5DAD;
  --bcbn-hover: rgba(16, 32, 48, 0.06);
  --bcbn-wind: #1F6FD1;
  --bcbn-gust: #A86200;
  --bcbn-rain: #2E9E5B;
  --bcbn-snow: #1A5FD6;
  --bcbn-rasn: #0E8C80;
  --bcbn-ice: #D23B2E;
  --bcbn-sleet: #C06A00;
  --bcbn-mix: #8A3FD1;
  --bcbn-pop-bg: #FFFFFF;
}

html[data-wp-dark-mode-active] .bcbn .bcbn-card {
  --bcbn-panel: rgba(255, 255, 255, 0.035);
  --bcbn-text: #E3E9EF;
  --bcbn-muted: #A3B3C2;
  --bcbn-line: rgba(255, 255, 255, 0.1);
  --bcbn-strong: #FFFFFF;
  --bcbn-shade: rgba(0, 0, 0, 0.18);
  --bcbn-strongline: rgba(255, 255, 255, 0.32);
  --bcbn-link: #8AB4F8;
  --bcbn-hover: rgba(255, 255, 255, 0.08);
  --bcbn-wind: #8AB4F8;
  --bcbn-gust: #D9B26F;
  --bcbn-rain: #81C995;
  --bcbn-snow: #6EA8FE;
  --bcbn-rasn: #7FD1C7;
  --bcbn-ice: #FF8A80;
  --bcbn-sleet: #E8A65D;
  --bcbn-mix: #D7A6F5;
  --bcbn-pop-bg: #2A2F35;
}

/* ---------- Frame and the bar over it ---------- */

.bcbn .bcbn-card {
  position: relative;
  overflow: visible;
  border: 1px solid var(--bcbn-line);
  border-radius: 10px;
  background: var(--bcbn-panel);
  color: var(--bcbn-text);
  font-family: inherit;
  line-height: 1.3;
}

.bcbn .bcbn-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--bcbn-line);
}

.bcbn .bcbn-name {
  color: var(--bcbn-strong);
  font-size: 1rem;
  font-weight: 800;
}

.bcbn .bcbn-sub {
  color: var(--bcbn-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bcbn .bcbn-more {
  margin-left: auto;
  color: var(--bcbn-link);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.bcbn .bcbn-more:hover { text-decoration: underline; }

.bcbn .bcbn-gear {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--bcbn-muted);
  cursor: pointer;
}
.bcbn .bcbn-gear svg { width: 17px; height: 17px; }
.bcbn .bcbn-gear:hover,
.bcbn .bcbn-gear[aria-expanded="true"] { background: var(--bcbn-hover); color: var(--bcbn-strong); }
.bcbn button:focus-visible,
.bcbn a:focus-visible,
.bcbn select:focus-visible {
  outline: 2px solid var(--bcbn-link);
  outline-offset: 2px;
}

/* The city picker drops down under the bar */
.bcbn .bcbn-panel {
  position: absolute;
  top: 40px;
  left: 8px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 250px;
  max-width: calc(100% - 16px);
  padding: 10px 12px 12px;
  border: 1px solid var(--bcbn-line);
  border-radius: 10px;
  background: var(--bcbn-pop-bg);
  box-shadow: 0 8px 24px rgba(10, 22, 34, 0.25);
}
.bcbn .bcbn-panel[hidden] { display: none; }
.bcbn .bcbn-panel-k {
  color: var(--bcbn-muted);
  font-size: 0.78rem;
  font-weight: 700;
}
.bcbn .bcbn-panel select {
  width: 100%;
  margin: 0;
  padding: 7px 8px;
  border: 1px solid var(--bcbn-line);
  border-radius: 8px;
  background: var(--bcbn-pop-bg);
  color: var(--bcbn-strong);
  font: 600 0.95rem/1.2 inherit;
}

.bcbn .bcbn-msg {
  margin: 0;
  padding: 40px 16px;
  color: var(--bcbn-muted);
  font-size: 0.9rem;
  text-align: center;
}

/* ---------- Tiles (the hourly page's "Every 3 hours") ---------- */

.bcbn .bcbn-body {
  display: flex;
  align-items: stretch;
}

.bcbn .bcbn-tiles {
  display: grid;
  flex: 1 1 auto;
  grid-auto-columns: minmax(68px, 1fr);   /* MIN_TILE in the JS */
  grid-auto-flow: column;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: thin;
}

.bcbn .bcbn-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin: 0;
  padding: 10px 2px 9px;
  border-left: 1px solid var(--bcbn-line);
  font-size: 0.8rem;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  list-style: none;
}
.bcbn .bcbn-tile::before { content: none; }
.bcbn .bcbn-tile:first-child { border-left: 0; border-radius: 0 0 0 10px; }
.bcbn .bcbn-tile.is-night { background: var(--bcbn-shade); }
.bcbn .bcbn-tile.is-newday { border-left: 2px solid var(--bcbn-strongline); }

.bcbn .bcbn-day {
  color: var(--bcbn-muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bcbn .bcbn-tile.is-newday .bcbn-day,
.bcbn .bcbn-tile:first-child .bcbn-day { color: var(--bcbn-strong); }

.bcbn .bcbn-time {
  color: var(--bcbn-strong);
  font-weight: 700;
}

.bcbn .bcbn-tile img,
.bcbn .bcbn-next img {
  display: block;
  width: 40px;
  height: 40px;
  margin: 4px 0 2px;
  padding: 0;
  border: 0;
  box-shadow: none;
}

/* Temperatures on a chip in the temperature's color (set by the JS) */
.bcbn .bcbn-temp {
  min-width: 46px;
  padding: 2px 6px;
  border-radius: 7px;
  background: var(--bcbn-chip, transparent);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  color: var(--bcbn-chip-text, var(--bcbn-strong));
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}

.bcbn .bcbn-wind {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
  color: var(--bcbn-wind);
  font-weight: 600;
}

.bcbn .bcbn-arrow {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bcbn .bcbn-gust {
  color: var(--bcbn-gust);
  font-size: 0.72rem;
  font-weight: 600;
}

.bcbn .bcbn-pop {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--bcbn-muted);
  font-size: 0.76rem;
}
.bcbn .bcbn-pop svg { fill: currentColor; }

.bcbn .bcbn-amt {
  color: var(--bcbn-muted);
  font-size: 0.72rem;
}

.bcbn .bcbn-snow {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--bcbn-snow);
  font-size: 0.76rem;
  font-weight: 700;
}

/* Likely precipitation (30% or more), in its type's color */
.bcbn .is-likely { color: var(--bcbn-rain); font-weight: 700; }
.bcbn .is-likely.is-snow { color: var(--bcbn-snow); }
.bcbn .is-likely.is-rasn { color: var(--bcbn-rasn); }
.bcbn .is-likely.is-ice { color: var(--bcbn-ice); }
.bcbn .is-likely.is-sleet { color: var(--bcbn-sleet); }
.bcbn .is-likely.is-mix { color: var(--bcbn-mix); }

/* Hourly tiles (when 24 fit): a little more compact (MIN_HOURLY in the JS) */
.bcbn .bcbn-tiles.is-every1 { grid-auto-columns: minmax(48px, 1fr); }
.bcbn .is-every1 .bcbn-tile img { width: 34px; height: 34px; }
.bcbn .is-every1 .bcbn-temp { min-width: 38px; padding: 2px 3px; font-size: 1.05rem; }

/* ---------- Tomorrow, on the right ---------- */

.bcbn .bcbn-next {
  display: flex;
  flex: 0 0 150px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 10px 9px;
  border-left: 2px solid var(--bcbn-strongline);
  font-size: 0.8rem;
  text-align: center;
}

.bcbn .bcbn-next-k {
  color: var(--bcbn-muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bcbn .bcbn-next-day {
  color: var(--bcbn-strong);
  font-size: 0.95rem;
  font-weight: 800;
}

.bcbn .bcbn-next-wx {
  color: var(--bcbn-text);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: normal;
}

.bcbn .bcbn-next-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.bcbn .bcbn-next-l {
  min-width: 34px;
  color: var(--bcbn-muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: right;
  text-transform: uppercase;
}

/* ---------- Phones ---------- */

@container (max-width: 560px) {
  .bcbn .bcbn-sub { display: none; }
  .bcbn .bcbn-tiles { grid-auto-columns: 68px; }
  .bcbn .bcbn-next { flex-basis: 108px; padding: 8px 6px; }
  .bcbn .bcbn-next-wx { display: none; }
  .bcbn .bcbn-next-l { min-width: 0; }
}

}   /* @container */