/**
 * marketing.css — shared styles for FreightCoreTMS + OverSizeTMS
 * marketing surfaces (landing pages + permits hub + calculators +
 * guides + comparison pages).
 *
 * Loaded BEFORE inline <style> blocks so page-specific rules can
 * override. Update this file to change the chrome across every page
 * in one shot — header style, brand orange, footer divider, etc.
 *
 * What's in here:
 *   - CSS reset
 *   - Color tokens (--orange, --navy, etc.)
 *   - Body + base link styles
 *   - Sticky frosted header (header.site)
 *   - Breadcrumb
 *   - Common typography (h2, h3, .lede)
 *   - .cta gradient block + .btn
 *   - .disclaimer / .last-updated patterns
 *   - Footer + .footer-divider + .footer-product-of
 *
 * What's NOT in here (stays inline per-page):
 *   - h1 (page-specific font-size)
 *   - main { max-width } (varies 880px / 920px / 960px / 1100px by page)
 *   - Calculator-specific UI (.calculator, .calc-grid, .result-box, etc.)
 *   - Table styles that vary (.compare, .holidays, .matrix, .programs)
 *   - Guide-specific layouts
 *
 * Updated 2026-06-05.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Pre-SEO palette (restored 2026-06-06 from f5c883b).
     Single source of truth for both domains. Do not redefine these
     tokens in page inline <style> blocks or in scripts/build-permit-hub.ts. */
  --orange: #f97316;
  --orange-h: #ea6c0a;
  --orange-dark: #ea6c0a; /* legacy alias — same value */
  --orange-light: #fff7ed;
  --navy: #0f172a;
  --navy-800: #1e293b;
  --navy-700: #334155;
  --navy-600: #475569;
  --slate: #94a3b8;
  --slate-l: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-50: #f8fafc;
  --white: #f8fafc;
  --green: #22c55e;
  --green-h: #16a34a;
  --red: #dc2626;
  --amber: #f59e0b;
  --radius: 10px;
}

/* Dark navy is the default for every marketing surface.
   Pages with body.hub-dark inherit the same colors (kept as a
   no-op class so existing markup keeps working). Authors no
   longer need to opt into dark mode per page. */
body {
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
  color: var(--white);
  background: var(--navy);
  line-height: 1.55;
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* ────────── Sticky frosted header ────────── */

header.site {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Solid fallback for browsers without backdrop-filter support
     (Safari < 9, Chrome Android < 76, Firefox < 103, all older
     embedded WebViews). The rgba(0.92) frosted look depends on
     backdrop-blur to read correctly — without blur, the rgba is
     just a slightly-transparent navy that lets body content bleed
     through unreadably. Solid navy is the safe default. */
  background: var(--navy);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 62px;
}
@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  header.site {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}
header.site a.brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
}
header.site a.brand img {
  height: 38px;
  width: auto;
  display: block;
}
header.site nav {
  display: flex;
  gap: 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}
header.site nav a {
  color: #cbd5e1;
  text-decoration: none;
  margin-left: 0;
}
header.site nav a:hover {
  color: #fff;
}
@media (max-width: 640px) {
  header.site {
    padding: 0 1.25rem;
  }
  header.site a.brand img {
    height: 30px;
  }
  header.site nav {
    gap: 1rem;
    font-size: 0.825rem;
  }
}

/* ────────── Breadcrumb ────────── */

.breadcrumb {
  font-size: 0.875rem;
  color: var(--slate);
  margin-bottom: 1.5rem;
}
.breadcrumb a {
  color: var(--slate);
}

/* ────────── Page hero (hub pages — matches landing-page navy rhythm) ────────── */

.page-hero {
  background: var(--navy);
  padding: 4.5rem 1.5rem 3.5rem;
  text-align: center;
  color: #fff;
}
.page-hero-inner {
  max-width: 880px;
  margin: 0 auto;
}
.page-hero h1 {
  color: #fff;
  margin-bottom: 1rem;
}
.page-hero .lede {
  color: #cbd5e1;
  margin: 0 auto;
  max-width: 65ch;
}
.page-hero .lede a {
  color: #fff;
  text-decoration: underline;
}
.page-hero .breadcrumb {
  color: #94a3b8;
  margin-bottom: 1.25rem;
}
.page-hero .breadcrumb a {
  color: #94a3b8;
}
.page-hero .breadcrumb a:hover {
  color: #fff;
}
@media (max-width: 640px) {
  .page-hero {
    padding: 3rem 1.25rem 2.5rem;
  }
}

/* ────────── Hub pages — full dark theme matching landings ────────── */

body.hub-dark {
  background: var(--navy);
  color: #f8fafc;
}
body.hub-dark main {
  background: var(--navy);
  color: #cbd5e1;
}
body.hub-dark h2,
body.hub-dark h3 {
  color: #f8fafc;
}
body.hub-dark .lede {
  color: #cbd5e1;
}
body.hub-dark p {
  color: #cbd5e1;
}
body.hub-dark main a {
  color: #f8fafc;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.hub-dark main a:hover {
  color: var(--orange);
}

/* Cards across all hub variants (.card on calculators/vs/guides/fc-guides) */
body.hub-dark .card,
body.hub-dark .guides > a.card,
body.hub-dark .grid > a.card,
body.hub-dark .comparisons > a.card {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}
body.hub-dark .card:hover,
body.hub-dark .guides > a.card:hover,
body.hub-dark .grid > a.card:hover,
body.hub-dark .comparisons > a.card:hover {
  border-color: rgba(249, 115, 22, 0.55);
}
body.hub-dark .card h3,
body.hub-dark .card h3 a,
body.hub-dark .guides > a.card h3,
body.hub-dark .grid > a.card h3,
body.hub-dark .comparisons > a.card h3 {
  color: #f8fafc;
}
body.hub-dark .card p,
body.hub-dark .guides > a.card p,
body.hub-dark .grid > a.card p,
body.hub-dark .comparisons > a.card p {
  color: #cbd5e1;
}
body.hub-dark .read {
  color: var(--orange);
}

/* States list on /permits/by-state/ — dark variant */
body.hub-dark ul.states li {
  color: #cbd5e1;
}
body.hub-dark ul.states a {
  color: #f8fafc;
}
body.hub-dark .stats {
  color: #cbd5e1;
}
body.hub-dark .stats .number {
  color: var(--orange);
}
body.hub-dark .legend {
  color: #94a3b8;
}

/* Footer transitions cleanly from dark content */
body.hub-dark footer {
  background: var(--navy);
  border-top-color: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}
body.hub-dark footer a {
  color: #cbd5e1;
}
body.hub-dark footer a:hover {
  color: var(--orange);
}
body.hub-dark .footer-divider {
  color: rgba(255, 255, 255, 0.2);
}

/* ── State-page specific elements in dark theme ── */

body.hub-dark .breadcrumb,
body.hub-dark .breadcrumb a {
  color: #94a3b8;
}
body.hub-dark .breadcrumb a {
  text-decoration: none;
}
body.hub-dark .breadcrumb a:hover {
  color: var(--orange);
}

body.hub-dark table {
  color: #cbd5e1;
}
body.hub-dark table th,
body.hub-dark table td {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.hub-dark table th {
  background: #1e293b;
  color: #f8fafc;
}
body.hub-dark table td.threshold {
  color: #f8fafc;
}
body.hub-dark table td.detail {
  color: #94a3b8;
}
body.hub-dark table td.empty {
  color: #94a3b8;
}

body.hub-dark .meta {
  color: #94a3b8;
}
body.hub-dark .badge.verified {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}
body.hub-dark .badge.unverified {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

body.hub-dark .related {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
body.hub-dark .related h3 {
  color: #f8fafc;
}
body.hub-dark .related a {
  color: #cbd5e1;
}
body.hub-dark .related a:hover {
  color: var(--orange);
}

body.hub-dark .disclaimer {
  background: rgba(249, 115, 22, 0.08);
  border-left-color: var(--orange);
  color: #cbd5e1;
}

body.hub-dark .muted {
  color: #94a3b8;
}

/* Stats panel on /permits/by-state/ index */
body.hub-dark .stats {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
body.hub-dark .stat .label {
  color: #94a3b8;
}

/* CTA gradient still pops on dark — keep .cta as-is. */

/* ── Calculator pages (bridge-formula-b, detention-charge, fuel-surcharge) ── */

body.hub-dark .calculator {
  background: var(--navy-800);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--slate-l);
}
body.hub-dark .calculator h2 {
  color: var(--white);
}
body.hub-dark .calc-grid,
body.hub-dark .input-group,
body.hub-dark .result-box,
body.hub-dark .results {
  color: var(--slate-l);
}
body.hub-dark .input-group label {
  color: #f8fafc;
}
body.hub-dark .input-group small {
  color: #94a3b8;
}
body.hub-dark .input-group input,
body.hub-dark .input-group select,
body.hub-dark .input-group textarea {
  background: #0f172a;
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
body.hub-dark .input-group input:focus,
body.hub-dark .input-group select:focus,
body.hub-dark .input-group textarea:focus {
  border-color: var(--orange);
}
body.hub-dark .result-box,
body.hub-dark .result,
body.hub-dark .results {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
body.hub-dark .result-label {
  color: #94a3b8;
}
body.hub-dark .result-value {
  color: #f8fafc;
}
body.hub-dark .result-value.charge {
  color: var(--orange);
}
body.hub-dark .result-value .unit {
  color: #94a3b8;
}
body.hub-dark .formula-box {
  background: #0a1322;
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
body.hub-dark .breakdown {
  background: var(--navy-800);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--slate-l);
}
body.hub-dark .breakdown th {
  background: var(--navy);
  color: var(--white);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.hub-dark .breakdown td,
body.hub-dark .breakdown th {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.hub-dark .example {
  background: var(--navy-800);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--slate-l);
}
body.hub-dark .example .heading {
  color: var(--white);
}
body.hub-dark .table-axles th {
  background: var(--navy-800);
  color: var(--white);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.hub-dark .table-axles td,
body.hub-dark .table-axles th {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.hub-dark .constraint.green {
  background: rgba(34, 197, 94, 0.12);
  border-left-color: var(--green);
  color: var(--slate-l);
}
body.hub-dark .lineitem {
  background: rgba(249, 115, 22, 0.08);
  border-color: rgba(249, 115, 22, 0.35);
  color: var(--white);
}
body.hub-dark .lineitem .label {
  color: var(--orange);
}
body.hub-dark .formula-box .var {
  color: var(--orange);
}
body.hub-dark .constraint {
  background: rgba(249, 115, 22, 0.1);
  color: #cbd5e1;
}
body.hub-dark .constraint.green {
  background: rgba(34, 197, 94, 0.1);
  border-color: #22c55e;
  color: #cbd5e1;
}
body.hub-dark .lineitem {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}
body.hub-dark .lineitem .label {
  color: var(--orange);
}

/* ── Guide-page tinted boxes (caution, flag, ok, tip, checklist) ── */

body.hub-dark blockquote.tip,
body.hub-dark .tip {
  background: rgba(249, 115, 22, 0.1);
  color: #cbd5e1;
  border-left-color: var(--orange);
}
body.hub-dark .caution {
  background: rgba(245, 158, 11, 0.12);
  color: #cbd5e1;
  border-left-color: #f59e0b;
}
body.hub-dark .flag {
  background: rgba(220, 38, 38, 0.12);
  color: #cbd5e1;
  border-left-color: #ef4444;
}
body.hub-dark .ok {
  background: rgba(34, 197, 94, 0.12);
  color: #cbd5e1;
  border-left-color: #22c55e;
}
body.hub-dark .checklist {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}

/* ── Compare tables on /vs/ pages ── */

body.hub-dark .compare,
body.hub-dark .compare-table {
  background: transparent;
}
body.hub-dark .compare thead th {
  background: #1e293b;
  color: #f8fafc;
}
body.hub-dark .compare th,
body.hub-dark .compare td {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}
body.hub-dark .compare .fc,
body.hub-dark .compare .tms {
  background: rgba(249, 115, 22, 0.1);
  color: #f8fafc;
}
body.hub-dark .compare .a,
body.hub-dark .compare .t,
body.hub-dark .compare .sheets {
  background: rgba(255, 255, 255, 0.03);
  color: #cbd5e1;
}

/* ── Reciprocity matrix on pilot-car-certification-reciprocity.html ── */

body.hub-dark .matrix,
body.hub-dark .matrix-wrap {
  background: transparent;
  color: #cbd5e1;
}
body.hub-dark .matrix th,
body.hub-dark .matrix td {
  border-color: rgba(255, 255, 255, 0.08);
}
body.hub-dark .matrix th.state-row {
  background: #1e293b;
  color: #f8fafc;
}
body.hub-dark .matrix thead th {
  background: #1e293b;
  color: #f8fafc;
}
body.hub-dark .matrix td.dot-yes {
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
}
body.hub-dark .matrix td.dot-no {
  background: transparent;
  color: #64748b;
}

/* ── Holiday legend dots (red/amber/clear) ── */

body.hub-dark .legend .dot.no-move {
  background: rgba(220, 38, 38, 0.25);
  border-color: rgba(220, 38, 38, 0.5);
}
body.hub-dark .legend .dot.partial {
  background: rgba(245, 158, 11, 0.25);
  border-color: rgba(245, 158, 11, 0.5);
}
body.hub-dark .legend .dot.ok {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.25);
}

/* ── Glossary section / programs / holidays generic table rows ── */

body.hub-dark .glossary-section,
body.hub-dark .programs,
body.hub-dark .holidays {
  background: transparent;
  color: #cbd5e1;
}

/* ────────── Common typography ────────── */

h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 3rem;
  margin-bottom: 1rem;
  color: var(--white);
}
h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.lede {
  font-size: 1.2rem;
  color: var(--slate-l);
  margin-bottom: 2rem;
  max-width: 65ch;
}
p + p,
p + ul,
ul + p {
  margin-top: 1rem;
}
ul {
  margin: 1rem 0 1rem 1.5rem;
}
ul li + li {
  margin-top: 0.4rem;
}
/* Reset list spacing inside flex nav rows — the article-list rule above
   would otherwise shift items 2+ off-axis in horizontal navs. */
nav ul,
.nav-links {
  margin: 0;
}
nav ul li,
.nav-links li,
nav ul li + li,
.nav-links li + li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ────────── CTA box ────────── */

.cta {
  background: var(--navy-800);
  color: var(--white);
  padding: 2.5rem;
  border: 1px solid var(--orange);
  border-radius: 12px;
  margin: 3rem 0;
  text-align: center;
}
.cta h2 {
  color: var(--white);
  margin-top: 0;
}
.cta p {
  color: var(--slate-l);
  max-width: 55ch;
  margin: 0.5rem auto 0;
}
.cta a.btn {
  display: inline-block;
  margin-top: 1.2rem;
  background: var(--orange);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 700;
  transition: background 0.15s;
}
.cta a.btn:hover {
  text-decoration: none;
  background: var(--orange-h);
}

/* ────────── Inline note blocks ────────── */

.disclaimer {
  background: rgba(249, 115, 22, 0.08);
  border-left: 3px solid var(--orange);
  padding: 0.875rem 1rem;
  margin: 1.5rem 0;
  font-size: 0.875rem;
  color: var(--slate-l);
}

.last-updated {
  font-size: 0.85rem;
  color: var(--slate);
  margin-top: 3rem;
  font-style: italic;
}

/* ────────── Footer ────────── */

footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--slate);
  font-size: 0.875rem;
  margin-top: 4rem;
}
footer p + p {
  margin-top: 0.5rem;
}
.footer-divider {
  color: rgba(255, 255, 255, 0.2);
  margin: 0 0.4rem;
}
.footer-product-of {
  font-size: 0.825rem;
  font-style: italic;
  color: var(--slate);
}

/* ────────── Sub-page inline-CSS override shim ──────────
   Sub-pages (guides, calculators, vs, fc-guides, etc.) were authored
   with light-mode inline styles before the dark theme shipped. Their
   inline <style> blocks load AFTER marketing.css, so equal-specificity
   selectors lose. These overrides win because they're more specific. */

body.hub-dark dt {
  color: var(--white);
}
body.hub-dark dd {
  color: var(--slate-l);
}
body.hub-dark dd + dd {
  color: var(--slate);
}
body.hub-dark .glossary-section h2 {
  color: var(--white);
}
body.hub-dark .checklist h4 {
  color: var(--white);
}
body.hub-dark .programs td.cert {
  color: var(--white);
}

/* .who-wins / .when-to-switch are LIGHT boxes (background var(--slate-50))
   inside dark pages. Force dark text inside them. */
body.hub-dark .who-wins,
body.hub-dark .when-to-switch {
  color: var(--navy);
}
body.hub-dark .who-wins h3,
body.hub-dark .who-wins p,
body.hub-dark .who-wins li,
body.hub-dark .when-to-switch h3,
body.hub-dark .when-to-switch p,
body.hub-dark .when-to-switch li {
  color: var(--navy);
}

/* Link color rescue for any LIGHT-background card-style block that
   sits inside body.hub-dark. The main rule (body.hub-dark main a
   → #f8fafc white) is correct on dark page bg but renders unreadable
   on light cards. These selectors force a dark link color so emails
   and inline references stay visible on yellow / orange-light /
   slate-50 callouts that appear across vs/ + guides/ + calculators/. */
body.hub-dark .disclaimer-top a,
body.hub-dark .who-wins a,
body.hub-dark .when-to-switch a,
body.hub-dark blockquote.tip a,
body.hub-dark .disclaimer a {
  color: var(--orange-dark);
  text-decoration: underline;
}
body.hub-dark .disclaimer-top a:hover,
body.hub-dark .who-wins a:hover,
body.hub-dark .when-to-switch a:hover,
body.hub-dark blockquote.tip a:hover,
body.hub-dark .disclaimer a:hover {
  color: var(--navy);
}

/* Glossary TOC and any other .slate-50 / .slate-200-background card-style
   blocks that survive light-mode in inline styles need a dark text rescue. */
body.hub-dark .toc {
  background: var(--navy-800);
  border-color: rgba(255, 255, 255, 0.08);
}
body.hub-dark .toc strong,
body.hub-dark .toc a {
  color: var(--slate-l);
}
body.hub-dark .toc a:hover {
  background: var(--orange);
  color: #fff;
}

/* ── Comparison-table responsive wrapper.
   Wrap any wide .compare-table or .matrix in .compare-scroll so the
   table preserves layout but the wrapper scrolls horizontally on
   narrow viewports. */
.compare-scroll,
.matrix-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.compare-scroll .compare-table,
.compare-scroll table.compare-table {
  min-width: 640px;
}
@media (max-width: 640px) {
  .compare-table {
    font-size: 0.85rem;
  }
}