/* ============================================================================
   CheckMyTotalLoss — shared design system
   ----------------------------------------------------------------------------
   One source of truth for the tokens and shell components that every page has
   in common: the dark page header, the eyebrow/label treatments, the button
   set, cards, the footer, and the mobile safety rules.

   Load order on every page:
     1. Google Fonts
     2. assets/nav.css   (header / drawer — owns everything .cmtl-*)
     3. assets/site.css  (this file)
     4. the page's own <style> block, for content that is genuinely unique

   Because this sheet loads before the page's inline <style>, any page can
   still override a rule locally. The intent is that it rarely needs to: when
   a page redefines .page-header or footer, the two drift apart, which is how
   the site ended up with three different h1 weights and two eyebrow styles.
   ========================================================================= */

/* ── TOKENS ───────────────────────────────────────────────────────────────
   Kept identical to the values the landing page already used, so adopting
   this sheet is not a colour change anywhere — only a consistency change. */
:root {
  --ink: #0f1117;
  --paper: #f5f3ef;
  --white: #ffffff;
  --accent: #d4460f;
  --accent-dark: #b83a0c;
  --accent-light: #fde8e0;
  --mid: #6b7280;
  --border: #e2ddd6;

  --green: #166534;
  --green-bg: #dcfce7;
  --yellow: #854d0e;
  --yellow-bg: #fef9c3;
  --red: #991b1b;
  --red-bg: #fee2e2;

  /* Text colours for use on the dark ink background. */
  --on-ink: #ffffff;
  --on-ink-mid: #9ca3af;
  --on-ink-faint: #6b7280;

  --serif: 'DM Serif Display', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;

  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;

  /* Horizontal page gutter. One value so every band lines up with the next. */
  --gutter: 40px;
  --gutter-mobile: 20px;
}

/* ── BASE ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── PAGE HEADER (dark ink band) ──────────────────────────────────────────
   The standard entry block for every section page: About, FAQ, Contact,
   State Laws, Guides index. Guide *articles* deliberately do not use it —
   long-form reading wants a light page from the first line. */
.page-header {
  background: var(--ink);
  padding: 72px var(--gutter) 64px;
  text-align: center;
}

.page-header .ph-inner { max-width: 760px; margin: 0 auto; }

.page-header .breadcrumb {
  font-size: .78rem;
  color: var(--on-ink-faint);
  padding: 0 0 18px;
}
.page-header .breadcrumb a { color: var(--on-ink-mid); text-decoration: none; }
.page-header .breadcrumb a:hover { color: var(--on-ink); }

/* The label above the headline. On the dark band it is bare orange caps —
   a pill here reads as a muddy brown smudge, which is what the FAQ and
   State Laws pages were doing before. */
.page-header .section-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--accent);
  margin-bottom: 14px;
}

.page-header h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.6vw, 3rem);
  font-weight: 800;
  color: var(--on-ink);
  letter-spacing: -1px;
  line-height: 1.08;
  margin-bottom: 16px;
}
/* <em> is the accent phrase, not italics. */
.page-header h1 em { font-style: normal; color: var(--accent); }

/* Existing pages write the subhead as a bare <p>; .ph-sub is the explicit
   alias for new markup. Both are styled so no page has to change its HTML. */
.page-header p,
.page-header .ph-sub {
  color: var(--on-ink-mid);
  font-size: 1.02rem;
  line-height: 1.65;
  max-width: 620px;
  margin: 0 auto;
}

/* FAQ and State Laws used a translucent-orange pill here, which renders as a
   muddy brown block against the ink background and fails contrast. Inside the
   dark band the eyebrow collapses to the same bare orange caps as
   .section-label, so all five section pages read identically. */
.page-header .eyebrow {
  display: block;
  background: none;
  padding: 0;
  border-radius: 0;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* Optional inset panel inside the header (State Laws uses one for the DOI
   prompt). Defined here so any page can reuse it rather than inventing one. */
.page-header .ph-panel {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  background: #1b1e28;
  border: 1px solid #2a2e3a;
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  margin: 30px auto 0;
  max-width: 640px;
  flex-wrap: wrap;
}

/* ── EYEBROW (light pill, for use on paper backgrounds) ───────────────── */
.eyebrow {
  display: inline-block;
  background: var(--accent-light);
  color: var(--accent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 16px;
}

/* Section label on paper: same typographic role, no pill. */
.section-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--accent);
  margin-bottom: 12px;
}

/* ── HEADINGS ─────────────────────────────────────────────────────────── */
.h-serif,
.section-body h2 {
  font-family: var(--serif);
  font-weight: 800;
  letter-spacing: -.5px;
}

/* ── BUTTONS ──────────────────────────────────────────────────────────────
   One radius (8px) and one padding scale across the site. The nav CTA is
   deliberately excluded — nav.css owns .cmtl-cta and its own smaller scale. */
.btn-primary,
.btn-secondary,
.btn-white,
.btn-ink {
  display: inline-block;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  padding: 15px 32px;
  border-radius: var(--radius);
  cursor: pointer;
  border: 2px solid transparent;
  transition: background .2s, border-color .2s, color .2s, transform .15s;
}

.btn-primary { background: var(--accent); color: var(--white); }
.btn-primary:hover { background: var(--accent-dark); color: var(--white); transform: translateY(-1px); }

.btn-secondary { background: transparent; color: var(--ink); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--ink); color: var(--ink); }

/* On the dark band / accent band. */
.btn-white { background: var(--white); color: var(--accent); font-weight: 700; }
.btn-white:hover { color: var(--accent-dark); transform: translateY(-2px); }

.btn-ink { background: var(--ink); color: var(--white); }
.btn-ink:hover { background: #23262f; color: var(--white); }

/* ── CARD ─────────────────────────────────────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.card-link { text-decoration: none; color: inherit; display: block; transition: border-color .2s, transform .15s; }
.card-link:hover { border-color: var(--accent); transform: translateY(-1px); }

/* ── CTA BLOCK (dark panel inside a paper page) ───────────────────────── */
.cta {
  background: var(--ink);
  border-radius: var(--radius-xl);
  padding: 34px 28px;
  margin: 34px 0;
  text-align: center;
}
.cta h2 { font-family: var(--serif); font-weight: 800; color: var(--white); font-size: 1.5rem; letter-spacing: -.4px; margin: 0 0 10px; padding: 0; }
.cta p { color: #c9cdd3; margin: 0 0 20px; font-size: 1rem; }
.cta small { display: block; color: #8b9099; margin-top: 12px; font-size: .78rem; }

/* Full-bleed accent band. */
.cta-band { background: var(--accent); padding: 72px var(--gutter); text-align: center; }
.cta-band h2 { font-family: var(--serif); font-weight: 800; color: var(--white); font-size: clamp(1.8rem, 4vw, 2.8rem); letter-spacing: -1px; margin-bottom: 14px; }
.cta-band p { color: rgba(255,255,255,.78); font-size: 1.05rem; margin-bottom: 32px; }

/* ── FOOTER ───────────────────────────────────────────────────────────── */
footer {
  background: var(--ink);
  color: var(--on-ink-mid);
  padding: 40px var(--gutter);
  text-align: center;
  font-size: .85rem;
}
footer p { max-width: 680px; margin: 0 auto; }
footer a { color: var(--on-ink-mid); text-decoration: none; }
footer a:hover { color: var(--white); }

footer .footer-logo {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--white);
  margin-bottom: 10px;
}
footer .footer-logo span { color: var(--accent); }

footer .footer-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin: 16px 0 18px;
  flex-wrap: wrap;
}

footer .disc,
footer .footer-disclaimer {
  font-size: .75rem;
  opacity: .55;
  line-height: 1.6;
  max-width: 680px;
  margin: 10px auto 0;
}

/* ── UTILITIES ────────────────────────────────────────────────────────── */
.wrap { max-width: 960px; margin: 0 auto; padding: 0 22px; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 22px; }
.text-center { text-align: center; }
.divider { border: none; border-top: 1px solid var(--border); }

/* ── MOBILE ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .page-header { padding: 46px var(--gutter-mobile) 42px; }
  .page-header h1 { font-size: 1.95rem; letter-spacing: -.5px; }
  .page-header .ph-sub { font-size: .95rem; }
  .page-header .ph-panel { flex-direction: column; align-items: flex-start; padding: 16px 18px; }

  .btn-primary, .btn-secondary, .btn-white, .btn-ink { padding: 14px 22px; font-size: .95rem; }

  .cta { padding: 26px 20px; }
  .cta h2 { font-size: 1.3rem; }
  .cta-band { padding: 48px var(--gutter-mobile); }
  .cta-band h2 { font-size: 1.7rem; }
  .cta-band .btn-white { width: 100%; }

  footer { padding: 32px var(--gutter-mobile); }
  footer .footer-links { gap: 14px 18px; }
}

/* ── MOBILE SAFETY NET ────────────────────────────────────────────────────
   Deliberately last. Nothing on a phone may push the document wider than the
   viewport: a single element that does makes the browser zoom the whole page
   out, which is what produced the "text off the screen with a blank column"
   symptom. These rules stop any one long string, wide table or oversized
   image from doing that on any page. */
@media (max-width: 768px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  img, svg, video, canvas, iframe, table, pre { max-width: 100%; }
  pre { overflow-x: auto; }
  /* Tables are the usual culprit — let them scroll inside their own box
     rather than stretching the page. */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  h1, h2, h3, p, li, td, th, a { overflow-wrap: break-word; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}