/* =========================================================
   City of Richfield, Idaho — Site #1 (Flex-first)
   - No JS, mobile-first CSS, system fonts only
   - Utility-leaning classes to vary from other sites
   - Single external stylesheet across all pages
   ========================================================= */

/* Base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: #1b2632;
  background: #f7f9fb;
  font: 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
img { max-width: 100%; height: auto; display: block; }
a { color: #143d6b; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }
p { margin: .5em 0 1em; }
ul { margin: .5em 0 1em 1.25em; }

/* Layout wrappers */
.page { display: flex; flex-direction: column; min-height: 100dvh; }
.wrap { width: min(100% - 2rem, 74rem); margin-inline: auto; padding: 1.25rem 0 2rem; }
.top { background: #ffffff; border-bottom: 1px solid #e3e9f0; position: sticky; top: 0; z-index: 10; }
.foot { margin-top: auto; background: #ffffff; border-top: 1px solid #e3e9f0; }
.muted { color: #6d7b8a; }

/* Brandline */
.brandline { display: flex; align-items: center; min-height: 46px; }
.brandline__text {
  width: min(100% - 2rem, 74rem);
  margin-inline: auto;
  padding: .5rem 0;
  font-weight: 700;
  letter-spacing: .2px;
}

/* Nav */
.nav {
  width: min(100% - 2rem, 74rem);
  margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding: .5rem 0 .75rem;
}
.nav__link {
  padding: .5rem .8rem;
  border-radius: 999px;
  background: #eef3f8;
  color: #123a63;
  border: 1px solid #e0e7ef;
}
.nav__link--current {
  background: #d8e7f7;
  border-color: #cfe0f2;
  font-weight: 700;
}

/* Hero & sections */
.hero { padding: 1.25rem 0 1.5rem; }
.hero__title { font-size: clamp(1.6rem, 3.8vw, 2.4rem); }
.lead { font-size: clamp(1rem, 2.2vw, 1.125rem); color: #344a60; }

/* Cards & grids */
.card {
  background: #ffffff; border: 1px solid #e3e9f0; border-radius: 14px;
  padding: 1rem;
}
.grid-3 {
  display: grid; gap: 1rem;
  grid-template-columns: 1fr;
}
.grid-2 {
  display: grid; gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 44rem) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}

/* Stacks & lists */
.stack { margin: 1.25rem 0; }
.info { margin: 1rem 0; }
.list li { margin: .25rem 0; }

/* Notices */
.notice {
  margin-top: 1rem;
  border: 1px dashed #cfd8e3;
  background: #f0f5fb;
  border-radius: 12px;
}
.notice__text { padding: .75rem 1rem; color: #3a4f66; }

/* Footer */
.foot p { width: min(100% - 2rem, 74rem); margin: .9rem auto; }