/* The BillFix Guide — styles layered on top of styles.css.

   A separate file, not edits to styles.css, so the five existing marketing
   pages are byte-for-byte unaffected by anything the blog needs.

   Typography follows the content pack: Fraunces for titles, IBM Plex Mono for
   dollar figures and codes. Both are the *same font files the app bundles*
   (app/assets/fonts), subsetted to woff2 and self-hosted — 77KB + 4KB, no CDN,
   no third-party request. The site's stated rule is "no external fonts or CDNs
   so it loads fast and hosts anywhere for free"; self-hosting keeps that rule
   while still honouring the pack. */

@font-face {
  font-family: 'Fraunces';
  /* Variable font: one file covers the whole 400-700 range we use. */
  src: url('/fonts/fraunces-subset.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: 'PlexMono';
  src: url('/fonts/plexmono-subset.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Mint highlight for the short-answer box. Derived from the existing
     --accent-bg rather than introduced as a new brand colour. */
  --sa-bg: #E3F5F0;
  --sa-border: rgba(10, 122, 99, 0.28);

  /* The site's --muted (#9A9A91) scores 2.62:1 on the paper background, below
     the 4.5:1 WCAG AA floor for small text. It carries the dates and the
     disclaimer — the two things a reader most needs to be able to read, since
     every state-law claim here is only as good as its date.

     Overridden here rather than in styles.css because this file loads only on
     /guide pages: the five existing marketing pages keep their current
     rendering exactly. They inherit the same problem and should be fixed too,
     but that is a change to the live site, not to this feature. */
  --muted: #6E6E66;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sa-bg: #10352C;
    --sa-border: rgba(79, 224, 188, 0.30);
    --muted: #9C9B92;
  }
}

/* ---- layout ---- */
.guide { padding: 40px 0 72px; }
.guide .prose { max-width: 720px; }

.guide h1 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin-bottom: 18px;
}

.guide h2 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.3;
  margin: 36px 0 12px;
}

.guide h3 { font-size: 1.05rem; margin: 24px 0 8px; }

.guide-crumb { font-size: 0.85rem; color: var(--text-2); margin-bottom: 10px; }

/* Links sitting inside a run of text must be distinguishable by more than
   colour: the accent green against --text-2 is only 1.09:1, so someone who
   doesn't perceive that hue difference sees no link at all. Underline carries
   it instead. (Standalone links — nav, cards, headings — are fine on colour,
   because there is no surrounding text to confuse them with.) */
.guide-crumb a, .guide-related a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.guide-sub { font-size: 1.1rem; color: var(--text-2); margin-bottom: 26px; }

/* ---- the short answer: the featured-snippet target ---- */
.short-answer {
  background: var(--sa-bg);
  border: 1px solid var(--sa-border);
  border-left-width: 4px;
  border-radius: var(--card-radius);
  padding: 18px 20px;
  margin: 0 0 20px;
}
.short-answer-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 6px;
}
.short-answer p { font-size: 1.05rem; }
.short-answer p + p { margin-top: 10px; }

/* ---- attribution ---- */
.guide-byline { font-size: 0.92rem; color: var(--text-2); margin-bottom: 2px; }
.guide-dates { font-size: 0.85rem; color: var(--muted); margin-bottom: 28px; }

/* ---- body ---- */
.guide-body p { margin-bottom: 16px; }
.guide-body ul, .guide-body ol { margin: 0 0 18px 1.25rem; }
.guide-body li { margin-bottom: 8px; }
.guide-body strong { color: var(--text); font-weight: 650; }
.guide-body a { text-decoration: underline; text-underline-offset: 2px; }

/* Dollar figures and billing codes, per the pack. Applied via <code> in
   markdown so authors get it with backticks and nothing else to remember. */
.guide-body code, .guide-faq code {
  font-family: 'PlexMono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.94em;
  background: var(--accent-bg);
  color: var(--accent-text);
  padding: 1px 5px;
  border-radius: 5px;
}

/* ---- FAQ ---- */
.guide-faq { margin-top: 36px; }
.guide-faq details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 8px;
  background: var(--card);
}
.guide-faq summary { cursor: pointer; font-weight: 600; }
.guide-faq details p { margin-top: 8px; color: var(--text-2); }

/* ---- related + CTA + disclaimer ---- */
.guide-related { margin: 28px 0 0; font-size: 0.95rem; }

.guide-cta {
  margin: 28px 0 0;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
}
.guide-cta p { margin-bottom: 12px; }
.guide-cta .btn {
  display: inline-block;
  background: var(--teal);
  color: var(--on-teal);
  padding: 10px 18px;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
}
.guide-cta .btn:hover { text-decoration: none; opacity: 0.92; }

.guide-disclaimer {
  margin-top: 24px;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.55;
}

/* ---- index ---- */
.guide-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.chip {
  font-size: 0.85rem;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--text-2);
  text-decoration: none;
}
.chip:hover { text-decoration: none; border-color: var(--teal); color: var(--accent-text); }
/* A category with nothing published yet is shown but not linked — a chip that
   leads nowhere is worse than one that plainly isn't ready. Distinguished by a
   dashed border rather than by opacity: dimming text to 45% put it at 1.9:1
   contrast, which is unreadable, and "not yet available" is a state a border
   can carry without hiding the word. */
.chip-empty {
  border-style: dashed;
  color: var(--muted);
  cursor: default;
}

.guide-list { list-style: none; margin: 0; padding: 0; }
.guide-item {
  padding: 22px 0;
  border-top: 1px solid var(--border);
}
.guide-item:first-child { border-top: none; padding-top: 0; }
.guide-item-cat {
  font-size: 0.74rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 6px;
}
.guide-item h2 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-size: 1.3rem;
  margin: 0 0 8px;
}
.guide-item h2 a { color: var(--text); text-decoration: none; }
.guide-item h2 a:hover { color: var(--accent-text); }
.guide-item-answer { color: var(--text-2); margin-bottom: 8px; }
.guide-item-date { font-size: 0.82rem; color: var(--muted); }