/* ==========================================================================
   Class Action Experts — styles.css
   Design: "the recovery brief" — Franklin-style headings, serif body,
   docket-timeline motif, forest/ink palette. WCAG 2.2 AA contrast pairs.
   ========================================================================== */

:root {
  --bg: #FAFAF7;
  --bg-2: #F1F2EC;
  --ink: #16211B;        /* 15.4:1 on bg */
  --ink-soft: #46534B;   /* 7.2:1 */
  --forest: #1B5E43;     /* 5.9:1 on bg; white text on it 5.9:1 */
  --forest-deep: #0E3B29;
  --link: #17568C;       /* 6.3:1 */
  --amber-ink: #7A5200;  /* 5.9:1 */
  --rule: #D9DCD2;
  --card: #FFFFFF;
  --footer-bg: #10231A;
  --footer-ink: #D8E4DC; /* 12.5:1 on footer-bg */
  --footer-link: #A7CDB8;
  --focus: #B34700;

  --font-display: "Libre Franklin", "Franklin Gothic Medium", Arial, sans-serif;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "Spline Sans Mono", Consolas, Menlo, monospace;

  --measure: 66ch;
  --radius: 10px;
  --radius-sm: 6px;
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2.5rem; --s5: 4rem; --s6: 6rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-body); font-size: 1.0925rem; line-height: 1.68; color: var(--ink); background: var(--bg); }
img, svg { max-width: 100%; height: auto; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 .55em; color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(2.15rem, 4.6vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.55rem, 3vw, 2.2rem); }
h3 { font-size: 1.28rem; }
h4 { font-size: 1.05rem; }
p, ul, ol, dl { margin: 0 0 1em; max-width: var(--measure); }
li { margin-bottom: .35em; }
a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--forest-deep); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
a:focus-visible, button:focus-visible { text-decoration: none; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--forest-deep); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--radius-sm) 0; font-family: var(--font-display); font-weight: 600; }
.skip-link:focus { left: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.container { max-width: 74rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
.narrow { max-width: 50rem; }
.section { padding-block: var(--s6); }
.section-alt { background: var(--bg-2); }
.section-header { max-width: 50rem; margin-bottom: var(--s4); }

.eyebrow { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--forest); margin-bottom: var(--s1); }

/* ---------- Header ---------- */
.site-header { background: var(--bg); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 50; }
.header-inner { display: flex; align-items: center; gap: var(--s3); padding-block: .85rem; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand img { width: 46px; height: 46px; }
.brand-name { font-family: var(--font-display); font-weight: 800; font-size: 1.08rem; line-height: 1.15; letter-spacing: -0.01em; }
.brand-name span { display: block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); font-weight: 400; }
.nav-toggle { display: none; background: none; border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: .6rem .9rem; font: inherit; font-family: var(--font-display); font-weight: 600; color: var(--ink); cursor: pointer; min-height: 44px; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: inline-block; padding: .55rem .1rem; color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: .98rem; border-bottom: 2px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--forest); color: var(--forest-deep); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--forest); }

.button { display: inline-block; background: var(--forest); color: #fff; font-family: var(--font-display); font-weight: 700; text-decoration: none; padding: .8rem 1.45rem; border-radius: var(--radius-sm); border: 2px solid var(--forest); min-height: 44px; cursor: pointer; font-size: 1rem; }
.button:hover { background: var(--forest-deep); border-color: var(--forest-deep); color: #fff; }
.button-secondary { background: transparent; color: var(--forest); }
.button-secondary:hover { background: var(--forest); color: #fff; }

/* ---------- Hero ---------- */
.hero { padding-block: var(--s5) var(--s6); border-bottom: 1px solid var(--rule); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s5); align-items: center; }
.hero .lede { font-size: 1.22rem; color: var(--ink-soft); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }

/* Stat band */
.stat-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s3); border-block: 2px solid var(--ink); padding-block: var(--s3); }
.stat .num { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 3.4vw, 2.6rem); letter-spacing: -0.02em; display: block; }
.stat .lbl { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- Docket timeline (signature) ---------- */
.docket { list-style: none; margin: 0; padding: 0; max-width: 50rem; border-left: 3px solid var(--forest); }
.docket li { position: relative; padding: 0 0 var(--s3) var(--s3); }
.docket li::before { content: ""; position: absolute; left: calc(-.5rem - 1.5px); top: .42em; width: 1rem; height: 1rem; border-radius: 50%; background: var(--bg); border: 3px solid var(--forest); }
.docket li.done::before { background: var(--forest); }
.docket li.flag::before { border-color: var(--amber-ink); background: var(--amber-ink); }
.docket .d-date { font-family: var(--font-mono); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); display: block; }
.docket .d-title { font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; }
.docket p { margin: .2em 0 0; color: var(--ink-soft); font-size: .98rem; }

/* ---------- Cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s3); }
.card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--s3); }
.card h3 { margin-top: 0; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card .step-num { font-family: var(--font-mono); font-size: 1rem; color: var(--forest); display: block; margin-bottom: .3rem; }
.card-feature { border-top: 4px solid var(--forest); }

/* Notices */
.notice { border: 1px solid var(--rule); border-left: 4px solid var(--forest); background: var(--card); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: var(--s2) var(--s3); max-width: var(--measure); }
.notice p:last-child { margin-bottom: 0; }
.notice-caution { border-left-color: var(--amber-ink); }
.deadline-banner { background: #FBF3E3; border: 1.5px solid var(--amber-ink); border-radius: var(--radius-sm); padding: var(--s2) var(--s3); max-width: var(--measure); }
.deadline-banner p { margin: 0; }
.deadline-banner strong { color: var(--amber-ink); }

/* FAQ */
.faq details { border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--card); margin-bottom: var(--s1); max-width: 50rem; }
.faq summary { cursor: pointer; font-family: var(--font-display); font-weight: 600; padding: .9rem 1.1rem; list-style-position: inside; }
.faq summary:hover { color: var(--forest-deep); }
.faq details > div { padding: 0 1.1rem 1rem; }
.faq details > div p:last-child { margin-bottom: 0; }

/* ---------- Forms ---------- */
.form-shell { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2.5rem); max-width: 50rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s3); }
.form-field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: var(--s2); }
.form-field.full { grid-column: 1 / -1; }
label { font-family: var(--font-display); font-weight: 600; font-size: .98rem; }
.hint { font-size: .88rem; color: var(--ink-soft); margin: 0; }
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], select, textarea {
  font: inherit; font-size: 1rem; color: var(--ink); background: #fff;
  border: 1.5px solid #7E8A80; border-radius: var(--radius-sm);
  padding: .65rem .75rem; min-height: 44px; width: 100%;
}
textarea { min-height: 7.5rem; resize: vertical; }
.form-field.has-error input, .form-field.has-error select, .form-field.has-error textarea { border-color: #A33000; border-width: 2px; }
.error-text { color: #A33000; font-weight: 600; font-size: .9rem; font-family: var(--font-display); }
.required-mark { color: #A33000; }
.checkbox-row { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; max-width: var(--measure); margin-bottom: var(--s2); }
.checkbox-row input[type="checkbox"] { width: 24px; height: 24px; margin-top: .2rem; accent-color: var(--forest); }
.checkbox-row label { font-weight: 500; font-family: var(--font-body); font-size: .98rem; }
.error-summary { border: 2px solid #A33000; border-radius: var(--radius-sm); background: #FCF3EF; padding: var(--s2) var(--s3); margin-bottom: var(--s3); }
.error-summary h2 { font-size: 1.08rem; margin-bottom: .4em; }
.error-summary ul { margin-bottom: 0; }
.error-summary a { color: #A33000; font-weight: 600; }
[hidden] { display: none !important; }
.tel-wrap { display: flex; align-items: center; gap: .5rem; }
.tel-wrap .tel-prefix { font-family: var(--font-display); font-weight: 600; color: var(--ink-soft); }
.tel-wrap input { flex: 1; }

/* ---------- Contact block ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); gap: var(--s4); align-items: start; }
.contact-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--s3); }
.contact-card p { margin-bottom: .6em; }
.contact-card .mono { font-family: var(--font-mono); font-size: .95rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--footer-bg); color: var(--footer-ink); margin-top: var(--s6); }
.site-footer a { color: var(--footer-link); }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s4); padding-block: var(--s5) var(--s3); }
.footer-grid h2 { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .13em; text-transform: uppercase; color: var(--footer-ink); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: .5rem; }
.footer-bottom { border-top: 1px solid rgba(216, 228, 220, .25); padding-block: var(--s3); font-size: .9rem; }
.footer-bottom p { max-width: none; }

/* ---------- Legal pages ---------- */
.legal-page h2 { margin-top: var(--s4); }
.legal-meta { font-family: var(--font-mono); font-size: .85rem; color: var(--ink-soft); }

/* ---------- Motion & prefs ---------- */
@media (prefers-reduced-motion: no-preference) {
  a, .button, .site-nav a, input, select, textarea { transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease; }
  html:focus-within { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .docket li::before { forced-color-adjust: none; background: CanvasText; border-color: CanvasText; }
}

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .hero-grid, .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--s3); }
  .form-grid { grid-template-columns: 1fr; }
  .nav-toggle { display: inline-block; }
  .site-nav { display: none; width: 100%; }
  .site-nav.open { display: block; }
  .header-inner { flex-wrap: wrap; }
  .site-nav ul { flex-direction: column; gap: 0; padding-block: var(--s1); }
  .site-nav a { display: block; padding: .7rem .25rem; min-height: 44px; }
  .no-js .nav-toggle { display: none; }
  .no-js .site-nav { display: block; }
}
@media (max-width: 480px) {
  .hero-ctas .button { width: 100%; text-align: center; }
}
@media print {
  .site-header, .site-footer, .hero-ctas, .nav-toggle { display: none; }
}