/* BoulderCAST homepage "By the Numbers" cards (home-numbers.js builds them):
   six cards of the same size in two rows, each led by a graphic with a label
   (and a gear where the card shows one city or resort), then a few lines that
   follow the site's light and dark mode. Three across on desktop, two on
   tablets, one per row on phones.
   The WP Dark Mode plugin rewrites the colors of every rule it can read but
   leaves rules inside @container alone, so .bchn is a container and the
   styles sit in container queries, with the dark colors under the plugin's
   marker on the page. */

.bchn {
  container-type: inline-size;
  position: relative;
  width: 100%;
  min-width: 0;
}

/* Snow falling across the snowfall card's graphic */
@keyframes bchn-fall {
  from { transform: translate(0, 0); }
  to { transform: translate(16px, 205px); }
}

@container (min-width: 0px) {

/* The cards' grid (inside the box, since @container can't style the box itself) */
.bchn .bchn-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* ---------- The card ---------- */

.bchn .bchn-card {
  --text: #1E2A36;
  --muted: #5F6E7C;
  --line: rgba(20, 40, 60, 0.10);
  --surface: #FFFFFF;
  --chip: #F2F5F8;
  --link: #0B57A4;
  --nhi: #E8590C;
  --nlo: #1C6FD1;
  --rhi: #C81E1E;
  --rlo: #5B2BB5;
  --dry: #C2410C;
  --wet: #1C6FD1;
  --near: #2E8B23;
  --nino: #E03131;
  --nina: #1C6FD1;
  --dawn: #E8590C;
  --dusk: #7B3FBF;
  --land: #EEF2EA;
  --mapbg: #DCE7F1;

  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 372px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(20, 40, 60, 0.06), 0 8px 22px rgba(20, 40, 60, 0.08);
  font-family: "Barlow Semi Condensed", "Barlow", Ubuntu, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.2;
  text-align: left;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.bchn .bchn-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(20, 40, 60, 0.08), 0 16px 32px rgba(20, 40, 60, 0.16);
}
html[data-wp-dark-mode-active] .bchn .bchn-card {
  --text: #EEF2F6;
  --muted: #A3B1BF;
  --line: rgba(255, 255, 255, 0.09);
  --surface: #262B31;
  --chip: #30363E;
  --link: #8FD0FF;
  --nhi: #FF8A5B;
  --nlo: #7CB8FF;
  --rhi: #FF5A5A;
  --rlo: #B49CFF;
  --dry: #FF8A5B;
  --wet: #7CB8FF;
  --near: #6FD66A;
  --nino: #FF6B6B;
  --nina: #7CB8FF;
  --dawn: #FFB35C;
  --dusk: #C49BFF;
  --land: #2E363F;
  --mapbg: #1B2633;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.bchn .bchn-card * { box-sizing: border-box; }

/* ---------- The graphic ---------- */

.bchn .bchn-hero {
  position: relative;
  flex: none;
  height: 190px;
  overflow: hidden;
  background: #0B1E3A;
}
.bchn .bchn-snowpack .bchn-hero { background: var(--mapbg); }
.bchn .bchn-card[data-state="loading"] .bchn-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.14) 50%, transparent 70%);
}
.bchn .bchn-art, .bchn .bchn-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.bchn .bchn-svg { transition: transform 0.4s ease; }
/* The graphics' colors, kept as custom properties (see keepColors in the
   script) so WP Dark Mode can't darken them */
.bchn .bchn-svg [style*="--f:"] { fill: var(--f); }
.bchn .bchn-svg [style*="--k:"] { stroke: var(--k); }
.bchn .bchn-svg [style*="--s:"] { stop-color: var(--s); }
.bchn .bchn-card:hover .bchn-svg { transform: scale(1.03); }

/* Label, top left, and the city gear, top right, on frosted glass */
.bchn .bchn-kicker, .bchn .bchn-gear {
  position: absolute;
  z-index: 3;
  top: 10px;
  background: rgba(8, 18, 32, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #FFFFFF;
}
.bchn .bchn-kicker {
  left: 10px;
  max-width: calc(100% - 60px);
  overflow: hidden;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.bchn .bchn-gear {
  right: 10px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
}
.bchn .bchn-gear:hover { background: rgba(8, 18, 32, 0.8); }
.bchn .bchn-gear:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.bchn .bchn-gear svg { width: 16px; height: 16px; }

/* The big number laid over the graphic */
.bchn .bchn-over {
  position: absolute;
  z-index: 2;
  left: 12px;
  bottom: 12px;
  display: flex;
  align-items: flex-end;
  gap: 7px;
  color: #FFFFFF;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.bchn .bchn-over b { font-size: 50px; font-weight: 800; line-height: 0.85; letter-spacing: -0.02em; }
.bchn .bchn-over span { padding-bottom: 2px; font-size: 13px; font-weight: 700; line-height: 1.1; }
.bchn .bchn-over .is-nino { color: #FF6B6B; }
.bchn .bchn-over .is-nina { color: #7CB8FF; }
.bchn :is(.bchn-snow, .bchn-enso) .bchn-over { top: 42px; bottom: auto; }

/* 1. Climate stripes */
.bchn .bchn-years {
  position: absolute;
  z-index: 2;
  right: 10px;
  bottom: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  /* On frosted glass like the label, so it reads over any stripes */
  background: rgba(8, 18, 32, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* 2. Snow season */
.bchn .bchn-normarea { fill: rgba(156, 200, 255, 0.10); }
.bchn .bchn-normcurve { fill: none; stroke: #9CC8FF; stroke-width: 2; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.bchn .bchn-sofar { stroke: #FFFFFF; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.bchn .bchn-today { stroke: rgba(255, 255, 255, 0.55); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.bchn .bchn-normdot { fill: #9CC8FF; stroke: #0B1E3A; stroke-width: 1.5; }
.bchn .bchn-nowdot { fill: #FFFFFF; stroke: #2F7FD8; stroke-width: 2; }
.bchn .bchn-ground { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bchn .bchn-tick { fill: rgba(255, 255, 255, 0.65); font-size: 9px; font-weight: 700; }
.bchn .bchn-flakes { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.bchn .bchn-flakes i {
  position: absolute;
  top: -8px;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #FFFFFF;
  opacity: 0.85;
  animation: bchn-fall var(--d) linear var(--t) infinite;
}

/* 3. Colorado, tilted back in 3D */
.bchn .bchn-tilt { position: absolute; inset: 0; perspective: 600px; }
.bchn .bchn-tilt .bchn-svg {
  inset: 34px 8px 12px;
  width: calc(100% - 16px);
  height: calc(100% - 46px);
  transform: rotateX(32deg) scale(1.16);
  transform-origin: 50% 50%;
  filter: drop-shadow(0 14px 10px rgba(0, 0, 0, 0.3));
}
.bchn .bchn-card:hover .bchn-tilt .bchn-svg { transform: rotateX(26deg) scale(1.18); }
.bchn .bchn-land { fill: var(--land); }
.bchn .bchn-bline { fill: none; stroke: rgba(10, 24, 43, 0.45); stroke-width: 0.7; }
.bchn .bchn-road { fill: none; stroke: rgba(40, 40, 40, 0.55); stroke-width: 1.1; }
html[data-wp-dark-mode-active] .bchn .bchn-road { stroke: rgba(255, 255, 255, 0.55); }
.bchn .bchn-state { fill: none; stroke: var(--text); stroke-opacity: 0.7; stroke-width: 1.4; }
.bchn .bchn-capital { fill: #D9342B; stroke: #FFFFFF; stroke-width: 1; }
.bchn .bchn-town { fill: var(--text); stroke: var(--surface); stroke-width: 1; }
.bchn .bchn-townname {
  fill: var(--text);
  font-size: 9.5px;
  font-weight: 700;
  paint-order: stroke;
  stroke: color-mix(in srgb, var(--surface) 85%, transparent);
  stroke-width: 2.5px;
}
.bchn .bchn-townname.is-big { font-size: 11px; font-weight: 800; }

/* 4. Raindrop */
.bchn .bchn-streak { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1.5; stroke-linecap: round; }
.bchn .bchn-normline { stroke: #FFB347; stroke-width: 2.5; stroke-dasharray: 5 3; }
.bchn .bchn-normtext { fill: #FFFFFF; font-size: 11px; font-weight: 800; paint-order: stroke; stroke: rgba(10, 30, 60, 0.6); stroke-width: 3px; }
/* Past a normal year: water running over the drop */
.bchn .bchn-spill { fill: none; stroke: #7DF0FF; stroke-width: 6; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(125, 240, 255, 0.8)); }
.bchn .bchn-mound { fill: #4FE3E0; stroke: #FFFFFF; stroke-width: 2; }
.bchn .bchn-splash { fill: #9FF3FF; }
.bchn .bchn-puddle { fill: #4FE3E0; stroke: #FFFFFF; stroke-width: 1.5; opacity: 0.95; }
.bchn .bchn-overtext { font-size: 16px; fill: #9FF3FF; }

/* 5. El Niño bars */
.bchn .bchn-zero { stroke: rgba(255, 255, 255, 0.45); }
.bchn .bchn-thresh { stroke: rgba(255, 255, 255, 0.18); stroke-dasharray: 3 4; }
.bchn .bchn-threshtext { fill: rgba(255, 255, 255, 0.85); font-size: 8px; font-weight: 700; paint-order: stroke; stroke: rgba(5, 24, 43, 0.85); stroke-width: 2.5px; }

/* 4b. PowderCAST: six days across the graphic, the last four locked for
   non-members (nothing but weekdays behind the blur) */
.bchn .bchn-pc .bchn-hero { background: #13204A; }
.bchn .bchn-strip {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  padding: 44px 6px 8px;
  background: linear-gradient(180deg, #13204A, #2C4F9E);
  color: #FFFFFF;
}
.bchn .bchn-day { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; font-size: 12px; font-weight: 700; }
.bchn .bchn-dow { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; }
.bchn .bchn-dicon { display: block; width: 28px; height: 28px; margin: 2px 0; }
.bchn .bchn-col { position: relative; display: block; flex: 1; width: 14px; margin: 3px 0; border-radius: 4px; background: rgba(255, 255, 255, 0.12); }
.bchn .bchn-col i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 4px; background: linear-gradient(180deg, #FFFFFF, #7FD3F5); }
.bchn .bchn-in { font-size: 14px; font-weight: 800; }
.bchn .bchn-hl { font-size: 11px; white-space: nowrap; opacity: 0.8; }
.bchn .bchn-hl b { color: #FFC08A; }
.bchn .bchn-day.is-locked > * { filter: blur(4px); opacity: 0.6; }
.bchn .bchn-lock {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: calc(33.3% + 6px);
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 8px;
  border-radius: 10px;
  background: rgba(8, 18, 32, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #FFFFFF !important;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none !important;
  white-space: nowrap;
  border: 0;
  box-shadow: none;
  transform: translateY(-50%);
}
.bchn .bchn-lock:hover { background: rgba(8, 18, 32, 0.88); }
/* The site's yellow Premium P */
.bchn .bchn-p {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #F9C802;
  color: #1E1A00;
  font-size: 13px;
  font-weight: 800;
}

/* 6. Temperatures now: the hourly map, its hour, the map switch and color bar */
.bchn .bchn-temp .bchn-hero { background: #2A2D2E; }
.bchn .bchn-maplink { position: absolute; inset: 0; display: block; border: 0; box-shadow: none; }
.bchn .bchn-temp .bchn-over { left: auto; right: 10px; bottom: 10px; }
.bchn .bchn-over .bchn-time {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(8, 18, 32, 0.6);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-shadow: none;
}
.bchn :is(.bchn-temp, .bchn-pc) .bchn-title { min-height: 0; }
.bchn .bchn-seg { display: inline-flex; margin: 10px 0 9px; padding: 3px; border-radius: 999px; background: var(--chip); }
.bchn .bchn-seg button {
  margin: 0;
  padding: 5px 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font: 700 13px "Barlow Semi Condensed", "Barlow", Ubuntu, Arial, sans-serif;
  cursor: pointer;
}
.bchn .bchn-seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
.bchn .bchn-seg button:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
/* The color bar: each label centered under its spot, a tick at 32 degrees */
.bchn .bchn-scale { position: relative; height: 26px; margin: 0 6px 8px; }
.bchn .bchn-ramp { position: absolute; top: 0; left: 0; right: 0; height: 9px; border-radius: 5px; background: var(--ramp); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.bchn .bchn-frz { position: absolute; top: -2px; width: 2px; height: 13px; margin-left: -1px; border-radius: 1px; background: var(--text); opacity: 0.55; }
.bchn .bchn-scale b { position: absolute; top: 12px; font-size: 11px; font-weight: 700; white-space: nowrap; color: var(--muted); transform: translateX(-50%); }

/* ---------- The card's lines ---------- */

.bchn .bchn-body { display: flex; flex: 1; flex-direction: column; min-height: 0; padding: 11px 13px 9px; }
/* Two lines at most, so the cards line up */
.bchn .bchn-title {
  display: -webkit-box;
  min-height: 2.5em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--text);
}
.bchn .bchn-wait { font-size: 14px; font-weight: 600; color: var(--muted); }
.bchn .bchn-pct { display: block; font-size: 24px; line-height: 1.05; color: var(--pc); }
html[data-wp-dark-mode-active] .bchn .bchn-pct { color: var(--pcd); }
.bchn .bchn-snowpack .bchn-title { display: block; }
.bchn .bchn-sub { display: block; margin-top: 3px; font-size: 14px; font-weight: 600; color: var(--muted); }

/* Climate: a one-line title, then the four numbers, fitting under the
   same size graphic as the other cards */
.bchn .bchn-climate .bchn-title { min-height: 0; }
.bchn .bchn-four { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 6px 0 8px; }
.bchn .bchn-four div { display: flex; flex-direction: column; }
.bchn .bchn-k { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.bchn .bchn-v { font-size: 28px; font-weight: 800; line-height: 1; }
/* The day's normals lead; the records sit smaller under them */
.bchn .bchn-v:is(.is-nhi, .is-nlo) { font-size: 36px; }
.bchn .bchn-v:is(.is-rhi, .is-rlo) { font-size: 22px; }
.bchn .bchn-v small { margin-left: 5px; font-size: 13px; font-weight: 600; color: var(--muted); }
.bchn .is-nhi { color: var(--nhi); }
.bchn .is-nlo { color: var(--nlo); }
.bchn .is-rhi { color: var(--rhi); }
.bchn .is-rlo { color: var(--rlo); }
.bchn .is-dry { color: var(--dry); }
.bchn .is-wet { color: var(--wet); }
.bchn .is-near { color: var(--near); }
.bchn .is-nino { color: var(--nino); }
.bchn .is-nina { color: var(--nina); }
.bchn .is-dawn { color: var(--dawn); }
.bchn .is-dusk { color: var(--dusk); }

.bchn .bchn-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 9px 0 10px; }
.bchn .bchn-chip { display: flex; flex-direction: column; min-width: 0; padding: 7px 9px; border-radius: 10px; background: var(--chip); }
.bchn .bchn-chip-k { display: flex; align-items: center; gap: 4px; overflow: hidden; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; color: var(--muted); }
.bchn .bchn-chip-v { font-size: 19px; font-weight: 800; line-height: 1.2; white-space: nowrap; color: var(--text); }
.bchn .bchn-chip-s { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.bchn .bchn-ico { display: inline-flex; }
.bchn .bchn-ico svg { width: 15px; height: 15px; }
.bchn .bchn-arrow { display: inline-block; width: 12px; height: 12px; margin-right: 2px; vertical-align: -1px; }
.bchn .bchn-arrow svg { display: block; width: 100%; height: 100%; }
.bchn .bchn-arrow.is-up svg { transform: rotate(180deg); }

.bchn .bchn-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}
.bchn .bchn-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.bchn .bchn-more { flex: none; font-weight: 700; color: var(--link) !important; text-decoration: none !important; border: 0; box-shadow: none; }
.bchn .bchn-more:hover { text-decoration: underline !important; }

/* ---------- The city picker ---------- */

.bchn .bchn-pick {
  position: absolute;
  z-index: 10;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(10, 18, 30, 0.45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.bchn .bchn-pick[hidden] { display: none; }
.bchn .bchn-pick-box {
  width: min(320px, calc(100% - 32px));
  padding: 16px;
  border-radius: 14px;
  background: var(--surface, #FFFFFF);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  color: #1E2A36;
  font-family: "Barlow Semi Condensed", "Barlow", Ubuntu, Arial, sans-serif;
}
html[data-wp-dark-mode-active] .bchn .bchn-pick-box { background: #262B31; color: #EEF2F6; }
.bchn .bchn-pick-t { margin: 0 0 10px; font-size: 16px; font-weight: 800; }
.bchn .bchn-pick select {
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(127, 127, 127, 0.4);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 16px;
}
html[data-wp-dark-mode-active] .bchn .bchn-pick select option { background: #262B31; }
.bchn .bchn-pick-n { margin: 8px 0 12px; font-size: 13px; opacity: 0.75; }
.bchn .bchn-pick-b { display: flex; justify-content: flex-end; gap: 8px; }
.bchn .bchn-pick-b button {
  margin: 0;
  padding: 7px 14px;
  border: 0;
  border-radius: 8px;
  background: rgba(127, 127, 127, 0.18);
  box-shadow: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.bchn .bchn-pick-b .bchn-pick-done { background: #0B57A4; color: #FFFFFF; }

@media (prefers-reduced-motion: reduce) {
  .bchn .bchn-card, .bchn .bchn-svg { transition: none; }
  .bchn .bchn-card:hover, .bchn .bchn-card:hover .bchn-svg { transform: none; }
  .bchn .bchn-card:hover .bchn-tilt .bchn-svg { transform: rotateX(32deg) scale(1.16); }
  .bchn .bchn-flakes { display: none; }
}

} /* end @container */

/* Two across on tablets, three on the homepage's desktop column */
@container (min-width: 560px) {
  .bchn .bchn-grid { grid-template-columns: repeat(2, 1fr); }
}
@container (min-width: 820px) {
  .bchn .bchn-grid { grid-template-columns: repeat(3, 1fr); }
}