/*
 * wasatchgov.org portal pages. The palette is the valley, not the county brand: sage, slate, and sand.
 * The hero sky has four sets of colors. sky.js picks one from the visitor's local time.
 */

@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --paper: #f6f2ea;
  --card: #ffffff;
  --ink: #1f2b30;
  --muted: #56656a;
  --line: #ddd5c6;
  --sage: #4f7a5c;
  --sage-dark: #36593f;
  --sage-tint: #e3ede5;
  --slate: #3c5566;
  --slate-tint: #e3eaf0;
  --sand: #eadfc9;
  --sand-tint: #f4ecdc;
  --amber-tint: #fbebcc;
  --violet-tint: #e7e5f4;
  --link: #2f5d74;
  --focus: #e8b04b;
  --radius: 16px;
  --display: "Bricolage Grotesque", "Source Sans 3", system-ui, sans-serif;

  /* Day sky. sky.js changes the set for dawn, dusk, and night. */
  --sky-1: #7fb6dd;
  --sky-2: #b9dbee;
  --sky-3: #e3f0f2;
  --far: #9fb6c1;
  --mid: #7f9c8c;
  --near: #5c7c66;
  --snow: #ffffff;
  --sun: #fff1b8;
  --river: #8fc3d9;
  --hero-ink: #1f2b30;
  --hero-muted: #34454b;
  --stars: 0;
  --lights: 0;
  --sun-show: 1;
  --moon-show: 0;
}
:root[data-sky="dawn"] {
  --sky-1: #7f97c4;
  --sky-2: #e9b9a4;
  --sky-3: #f7dcc0;
  --far: #a88ea6;
  --mid: #87778f;
  --near: #625f7a;
  --snow: #fbe9dc;
  --sun: #ffd08a;
  --river: #f2c7a8;
  --hero-ink: #1f2b30;
  --hero-muted: #2f3a3f;
  --lights: 0.35;
}
:root[data-sky="dusk"] {
  --sky-1: #2e3a6b;
  --sky-2: #b8648a;
  --sky-3: #f09a63;
  --far: #6f557a;
  --mid: #4e3f63;
  --near: #35304c;
  --snow: #f1c8b8;
  --sun: #ffb46b;
  --river: #e59a7c;
  --hero-ink: #fff8ef;
  --hero-muted: #f6e4d8;
  --stars: 0.35;
  --lights: 0.8;
}
:root[data-sky="night"] {
  --sky-1: #0b1526;
  --sky-2: #16294a;
  --sky-3: #2a3f63;
  --far: #2b3d55;
  --mid: #213149;
  --near: #18263a;
  --snow: #8ea3bf;
  --river: #3d5a80;
  --hero-ink: #f4f1ea;
  --hero-muted: #cbd4de;
  --stars: 1;
  --lights: 1;
  --sun-show: 0;
  --moon-show: 1;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 18px/1.55 "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
}

a { color: var(--link); text-underline-offset: 3px; }
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip:focus {
  left: 16px;
  top: 16px;
  z-index: 2000;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}

/* .wrap sets only the side padding, so a section can set its own top and bottom padding. */
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 52%, var(--sky-3) 78%);
  color: var(--hero-ink);
}
.hero__inner {
  position: relative;
  z-index: 2;
  padding-top: clamp(44px, 9vh, 104px);
}
.eyebrow {
  margin: 0 0 14px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hero-muted);
}
/* The hero text spans the same width as the tool cards below it (Erik, 2026-10-22). */
.hero h1 {
  margin: 0 0 18px;
  text-wrap: balance;
  font: 700 clamp(2.6rem, 7vw, 5.2rem)/0.98 var(--display);
  letter-spacing: -0.025em;
}
.hero .lead {
  margin: 0 0 26px;
  font-size: clamp(1.08rem, 1.7vw, 1.3rem);
  color: var(--hero-muted);
}
:root[data-sky="dusk"] .hero h1,
:root[data-sky="night"] .hero h1,
:root[data-sky="dusk"] .hero .lead,
:root[data-sky="night"] .hero .lead { text-shadow: 0 1px 12px rgba(8, 14, 26, 0.35); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(20, 28, 32, 0.18);
}
.btn:hover { background: #10181b; }
:root[data-sky="dusk"] .btn,
:root[data-sky="night"] .btn { background: #f4f1ea; color: var(--ink); }
.btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* The drawing sits below the text. Its top third is open sky, so it moves up under the text by that much.
   The peaks start at 36 percent of the drawing height, so the text never covers them. */
.hero__art {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1600 / 520;
  min-height: 230px;
  max-height: 540px;
  margin-top: -8vw;
}
.hero__art svg {
  display: block;
  width: 100%;
  height: 100%;
}
.sky-far { fill: var(--far); }
.sky-mid { fill: var(--mid); }
.sky-near { fill: var(--near); }
.sky-snow { fill: var(--snow); }
.sky-floor { fill: var(--paper); }
.sky-river { fill: none; stroke: var(--river); stroke-width: 5; stroke-linecap: round; opacity: 0.75; }
.sky-stars { fill: #ffffff; opacity: var(--stars); }
.sky-lights { fill: #ffd27a; opacity: var(--lights); }
.sky-glow { fill: #ffd27a; opacity: calc(var(--lights) * 0.25); }
.sky-sun { opacity: var(--sun-show); }
.sky-sun circle { fill: var(--sun); }
.sky-sun .halo { opacity: 0.35; }
.sky-moon { opacity: var(--moon-show); }
.sky-moon circle { fill: #f3eedc; }

/* The sun position for each sky, in the units of the drawing. */
.sky-sun { transform: translate(1240px, 120px); }
:root[data-sky="dawn"] .sky-sun { transform: translate(300px, 262px); }
:root[data-sky="dusk"] .sky-sun { transform: translate(1330px, 262px); }
.sky-moon { transform: translate(1250px, 108px); }

/* ---------- Tools ---------- */

.tools {
  position: relative;
  padding-top: 8px;
  padding-bottom: 64px;
}
.tools h2,
.section-title {
  margin: 0 0 6px;
  font: 600 clamp(1.8rem, 3.4vw, 2.5rem)/1.1 var(--display);
  letter-spacing: -0.015em;
}
.tools .intro {
  margin: 0 0 30px;
  color: var(--muted);
}

.group { margin: 0 0 34px; }
.group__title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.group__title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 24px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card:hover,
.card:focus-within {
  transform: translateY(-3px);
  border-color: var(--sage);
  box-shadow: 0 14px 30px rgba(31, 43, 48, 0.12);
}
.card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--tint, var(--sage-tint));
  color: var(--accent, var(--sage-dark));
}
.card__icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card--slate { --tint: var(--slate-tint); --accent: var(--slate); }
.card--sand { --tint: var(--sand-tint); --accent: #8a5a1c; }
.card__ask {
  margin: 6px 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
}
.card h3 {
  margin: 0;
  font: 600 1.4rem/1.2 var(--display);
  letter-spacing: -0.01em;
}
.card h3 a {
  color: var(--ink);
  text-decoration: none;
}
/* The title link covers the whole card. The extra links sit above it. */
.card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}
.card h3 a:focus-visible { outline: none; }
.card:has(h3 a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.card__text {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}
.card__more {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  font-weight: 600;
}
.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
}
.card__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--sage-dark);
}
.card__go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.18s ease; }
.card:hover .card__go svg { transform: translateX(3px); }

.pill {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}
.pill--live { background: var(--sage-tint); color: #2c5a3a; }
.pill--draft { background: var(--amber-tint); color: #774a05; }
.pill--proto { background: var(--violet-tint); color: #403b78; }

/* ---------- How it works ---------- */

.how {
  padding: 56px 0;
  border-top: 1px solid var(--line);
  background: var(--card);
}
.how__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.how__grid h3 {
  margin: 12px 0 6px;
  font: 600 1.2rem/1.25 var(--display);
}
.how__grid p { margin: 0; color: var(--muted); font-size: 1rem; }
.how__num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sand);
  font: 700 1.05rem/1 var(--display);
}

/* ---------- Official band and footer ---------- */

.official {
  padding: 44px 0;
  background: var(--sand-tint);
  border-top: 1px solid var(--line);
}
.official__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
}
.official h2 {
  margin: 0 0 4px;
  font: 600 1.5rem/1.2 var(--display);
}
.official p { margin: 0; color: var(--muted); max-width: 40rem; }
.official__links { display: flex; flex-wrap: wrap; gap: 10px; }
.btn--light {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: none;
}
.btn--light:hover { background: #fbf8f2; }

.site-foot {
  padding: 30px 0 40px;
  background: var(--ink);
  color: #c9d3cf;
  font-size: 0.95rem;
}
.site-foot a { color: #f4f1ea; }
.site-foot p { margin: 4px 0; }
.site-foot .credits { font-size: 0.82rem; color: #9fb0ab; }

/* ---------- About page ---------- */

.page-head {
  position: relative;
  overflow: hidden;
  padding: 56px 0 120px;
  background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 60%, var(--sky-3) 100%);
  color: var(--hero-ink);
}
.page-head h1 {
  position: relative;
  z-index: 2;
  margin: 0;
  font: 700 clamp(2.2rem, 5vw, 3.6rem)/1.02 var(--display);
  letter-spacing: -0.02em;
}
/* The About text spans the full content width, the same as the landing page (Erik, 2026-10-22). */
.page-head .lead {
  position: relative;
  z-index: 2;
  margin: 12px 0 0;
  font-size: 1.15rem;
  color: var(--hero-muted);
}
.page-head .hero__art {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  min-height: 0;
  margin: 0;
  aspect-ratio: auto;
}
.prose {
  padding-top: 24px;
  padding-bottom: 64px;
}
.prose h2 {
  margin: 34px 0 8px;
  font: 600 1.5rem/1.2 var(--display);
}
.prose p,
.prose li { color: #2f3c41; }
.prose dl { margin: 0; }
.prose dt { margin-top: 12px; }
.prose dd { margin: 4px 0 0; color: #2f3c41; }

@media (max-width: 640px) {
  body { font-size: 17px; }
  .wrap { padding-left: 18px; padding-right: 18px; }
  .hero__art { margin-top: 0; }
  .card { padding: 20px 18px 18px; }
  .official__links .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .card__go svg { transition: none; }
  .card:hover,
  .card:focus-within { transform: none; }
}