/* ==========================================================================
   BallotBase Civic — components.
   Loads AFTER brand.css and uses only its tokens. Nothing here redefines a
   brand colour; if a shade is missing, add it to brand.css so the marketing
   site can have it too, rather than inventing a civic-only one.

   Alert colours map onto tokens the brand already had — --red-* for a passed
   or urgent deadline, --amber-* for a caution, --green-* for a clear. No new
   palette was invented for civic.
   ========================================================================== */

/* ==========================================================================
   LAYOUT — two widths, site-wide. There are no per-page containers.
   ==========================================================================
   .wrap  the page frame. Every page uses it, so every page has the same left
          edge, the same top padding, and the same gutters. It matches --shell
          (1200px), the width the nav bar aligns to, so content lines up with
          the logo above it.

   .col   the content column inside the frame. Any run of text, any form, any
          results list. One value everywhere, so a paragraph on /why wraps at
          exactly the same measure as a paragraph on /about.

   Full-frame elements (the tool-card grid) simply skip .col and use the whole
   1200px. That is the ONLY intentional exception, and it reads as deliberate
   because everything else agrees.

   NOT the nav's `padding: 0 max(40px, calc((100% - 1200px)/2))` trick — that
   works only on a full-bleed element with no max-width. Combining the two
   makes the padding eat the content box.
   ========================================================================== */
:root { --col: 880px; }

.wrap { max-width: var(--shell); margin: 0 auto; padding: 88px 24px 72px; }
.col  { max-width: var(--col); }
@media (max-width: 640px) { .wrap { padding: 44px 18px 48px; } }

/* ---- page heads --------------------------------------------------------- */
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--blue);
  margin: 0 0 14px; display: flex; align-items: center; gap: 12px;
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--border); }

h1 {
  font-size: clamp(30px, 5vw, 44px); font-weight: 700; color: var(--navy);
  line-height: 1.14; letter-spacing: -0.02em; margin: 0 0 10px; text-wrap: balance;
}
h1 em { font-style: normal; color: var(--blue); }
h2 { font-size: 26px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; margin: 40px 0 12px; line-height: 1.25; }
h3 { font-size: 18px; font-weight: 600; color: var(--navy); margin: 0 0 6px; }

.lede { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: var(--col); margin: 12px 0 0; }
/* Body copy. Same measure as .col — one wrap width across the whole site. */
.prose { max-width: var(--col); color: var(--gray); }
.prose li { margin-bottom: 8px; }
.hint { color: var(--gray-light); font-size: 13px; font-weight: 400; }
.k { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-light); }
hr.rule { height: 1px; background: var(--border); border: 0; margin: 44px 0; }

/* ---- surfaces ----------------------------------------------------------- */
.card {
  background: var(--white); border: 1px solid var(--border); border-radius: 12px;
  padding: 22px; margin-bottom: 20px;
}
.note { border-radius: 10px; padding: 14px 16px; margin: 0 0 22px; font-size: 14px; border: 1px solid; }
.note.warn { background: var(--amber-bg); border-color: var(--amber-border); color: var(--amber-text); }
.note.stop { background: var(--red-bg);   border-color: var(--red-border);   color: var(--red-text); }
.note.calm { background: var(--blue-light); border-color: var(--flag-border); color: var(--ink-2); }
.note strong { color: inherit; }

/* ---- tool index --------------------------------------------------------- */
.tools { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); margin-top: 26px; }
.tool {
  display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--border); border-radius: 12px; padding: 22px;
  text-decoration: none; color: inherit; transition: border-color 0.15s, box-shadow 0.15s;
}
a.tool:hover { border-color: var(--blue); box-shadow: 0 4px 16px rgba(26,86,219,0.08); }
.tool.soon { background: var(--paper); border-style: dashed; }
.tool.soon h3, .tool.soon p { color: var(--gray-light); }
.tool-badge {
  align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 999px; margin-bottom: 12px;
  background: var(--blue-light); color: var(--blue); border: 1px solid var(--flag-border);
}
.tool.soon .tool-badge { background: transparent; color: var(--gray-light); border-color: var(--border); }
.tool p { margin: 0 0 14px; color: var(--gray); font-size: 14px; line-height: 1.55; }
.tool .go { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--blue); }

/* ---- footer content ----------------------------------------------------- */
.foot-grid {
  max-width: var(--shell); margin: 0 auto;
  display: grid; gap: 26px 48px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
footer p { margin: 0 0 8px; line-height: 1.6; }
footer a { color: rgba(255,255,255,0.75); }
footer a:hover { color: #fff; }
.foot-lead { font-weight: 600; color: #fff; }
.foot-k { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 6px; }
.foot-side { border-left: 1px solid rgba(255,255,255,0.1); padding-left: 26px; }
@media (max-width: 700px) { .foot-side { border-left: 0; padding-left: 0; } }

/* The "Civic" mark beside the logo — a sub-brand lockup, so it reads as part
   of BallotBase rather than a separate product with a borrowed logo. */
.nav-civic {
  font-size: 15px; font-weight: 500; color: var(--gray);
  padding-left: 10px; margin-left: 2px;
  border-left: 1px solid var(--border); line-height: 1;
}
@media (max-width: 720px) { .nav-civic { font-size: 13px; padding-left: 8px; } }

/* The question a person would actually type into a search box. Sits above the
   description because it's what someone scanning is matching against — they
   know their situation, not our product names. */
.tool-asks {
  font-size: 14px !important; font-weight: 500; font-style: italic;
  color: var(--navy) !important; margin: 0 0 8px !important;
}
.tool.soon .tool-asks { color: var(--gray) !important; }
.planned-head { font-size: 20px; margin: 48px 0 6px; }