/* ============================================================================
   cosmos-design-system.css — creative alignment + visual system
   Loaded site-wide via head.php after cosmos-polish.css (overrides it where
   needed). Adds personality to the alignment baseline:
     - Numbered section headers (01 — Title)
     - Vertical accent line beside H2 sections
     - Dot-grid + soft-gradient backgrounds
     - Section dividers with brand accent rule
     - Underline-sweep on H2 reveal
     - Card edge-light borders (premium signal)
     - Reading-width clamp on body copy
     - Vertical TOC anchor scroll on long pages
   Brand: #E8622A (accent), #0a2540 (text), #f6f8fb (subtle gray)
   ============================================================================ */

/* ---------- A. DESIGN TOKENS as CSS variables ---------- */
:root {
  --cf-brand-primary: #E8622A;
  --cf-brand-primary-2: #ff7f47;
  --cf-text: #0a2540;
  --cf-text-soft: #324054;
  --cf-text-muted: #56616f;
  --cf-bg: #ffffff;
  --cf-bg-soft: #f6f8fb;
  --cf-bg-card: #fafbfd;
  --cf-line: #e3e8ef;
  --cf-line-strong: #d6dce5;
  --cf-shadow-card: 0 6px 18px rgba(10, 37, 64, 0.06);
  --cf-shadow-lift: 0 12px 28px rgba(10, 37, 64, 0.10);
  --cf-shadow-brand: 0 8px 24px rgba(232, 98, 42, 0.30);

  --cf-radius: 12px;
  --cf-radius-lg: 18px;
  --cf-radius-pill: 999px;

  --cf-rhythm-1: 8px;
  --cf-rhythm-2: 16px;
  --cf-rhythm-3: 24px;
  --cf-rhythm-4: 36px;
  --cf-rhythm-5: 56px;
  --cf-rhythm-6: 80px;
}

/* ---------- B. READING-WIDTH CLAMP on body copy ---------- */
[class*="cf-pg-"] p,
.cf-el-form-card p,
.cf-q-form-card p,
[class*="cf-pg-"] li,
[class*="cf-pg-"] [class*="-body"] {
  max-width: 68ch;
}
[class*="cf-pg-"] [class*="-hero"] p {
  max-width: 56ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------- C. NUMBERED SECTION HEADERS ---------- */
/* Pages with cf-pg-* sections can opt in by adding data-cf-num="01" on the H2.
   Or auto-numbered via the JS in /js/cosmos-interactivity.js. */
[class*="cf-pg-"] h2[data-cf-num]::before,
[class*="cf-pg-"] h2.cf-numbered::before {
  content: attr(data-cf-num);
  display: inline-block;
  font-family: ui-monospace, "SF Mono", "Roboto Mono", "Menlo", "Consolas", monospace;
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cf-brand-primary);
  background: linear-gradient(135deg, rgba(232,98,42,0.10), rgba(232,98,42,0.03));
  padding: 4px 10px;
  border-radius: 999px;
  margin-right: 14px;
  vertical-align: middle;
  position: relative;
  top: -4px;
  border: 1px solid rgba(232,98,42,0.22);
}

/* ---------- D. VERTICAL ACCENT LINE next to H2 ---------- */
[class*="cf-pg-"] section h2,
.cf-el-faq h2 {
  position: relative;
  padding-left: 18px;
}
[class*="cf-pg-"] section h2::before,
.cf-el-faq h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  bottom: 0.1em;
  width: 3px;
  background: linear-gradient(180deg, var(--cf-brand-primary), var(--cf-brand-primary-2));
  border-radius: 3px;
}
/* H2s already marked .cf-numbered get the chip but skip the line (avoid stacking) */
[class*="cf-pg-"] h2.cf-numbered,
[class*="cf-pg-"] h2[data-cf-num] {
  padding-left: 0;
}
[class*="cf-pg-"] h2.cf-numbered::before,
[class*="cf-pg-"] h2[data-cf-num]::before {
  background: linear-gradient(135deg, rgba(232,98,42,0.10), rgba(232,98,42,0.03));
}

/* ---------- E. SECTION DIVIDERS (decorative) ---------- */
.cf-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: var(--cf-rhythm-5) auto;
  max-width: 880px;
}
.cf-divider::before,
.cf-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cf-line) 50%, transparent);
}
.cf-divider span {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--cf-brand-primary);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(232,98,42,0.12);
  flex: 0 0 auto;
}

/* Auto-inject divider between sections that use .cf-pg-section (opt-in) */
section.cf-pg-section + section.cf-pg-section::before {
  content: "";
  display: block;
  height: 1px;
  margin: var(--cf-rhythm-5) auto var(--cf-rhythm-4);
  max-width: 880px;
  background: linear-gradient(90deg, transparent, var(--cf-line) 50%, transparent);
}

/* ---------- F. DOT GRID + SOFT GRADIENT backgrounds ---------- */
[class*="cf-el-hero"],
[class*="cf-q-hero"],
[class*="cf-pg-"][class*="-hero"] {
  position: relative;
  overflow: hidden;
  background-image:
    radial-gradient(circle at 22% 24%, rgba(232,98,42,0.10) 0%, transparent 35%),
    radial-gradient(circle at 78% 76%, rgba(232,98,42,0.06) 0%, transparent 40%),
    radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(135deg, #0a2540 0%, #102d50 100%) !important;
  background-size: auto, auto, 22px 22px, auto;
  background-position: 0 0, 0 0, 0 0, 0 0;
}

/* The form-wrap soft section also gets a faint dot pattern */
[class*="cf-el-form-wrap"],
[class*="cf-pg-"][class*="-form-wrap"] {
  position: relative;
  background:
    radial-gradient(circle at 12% 8%, rgba(232,98,42,0.06), transparent 30%),
    radial-gradient(circle at 92% 92%, rgba(10,37,64,0.04), transparent 30%),
    var(--cf-bg-soft) !important;
}

/* ---------- G. CARD EDGE-LIGHT (premium signal) ---------- */
.cf-el-form-card,
.cf-q-form-card,
[class*="cf-pg-"][class*="-form-card"],
.cf-q-verdict-card {
  position: relative;
  background: var(--cf-bg) !important;
  border: 1px solid var(--cf-line);
  border-radius: var(--cf-radius-lg) !important;
  box-shadow: var(--cf-shadow-card);
}
.cf-el-form-card::before,
.cf-q-form-card::before,
[class*="cf-pg-"][class*="-form-card"]::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(232,98,42,0.32), transparent 30%, transparent 70%, rgba(232,98,42,0.20));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
  opacity: 0.7;
}

/* ---------- H. H2 UNDERLINE-SWEEP on reveal ---------- */
.cf-rev-in[class*="cf-pg-"] h2,
.cf-rev-in.cf-el-faq h2 {
  /* nothing here — the line below handles it via ::after pseudo */
}

[class*="cf-pg-"] h2.cf-sweep,
[class*="cf-pg-"] section > h2:first-child {
  position: relative;
}
[class*="cf-pg-"] h2.cf-sweep::after,
[class*="cf-pg-"] section > h2:first-child::after {
  content: "";
  position: absolute;
  left: 18px;        /* offset for the vertical accent line */
  right: 0;
  bottom: -8px;
  height: 2px;
  background: linear-gradient(90deg, var(--cf-brand-primary), transparent 60%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 620ms cubic-bezier(.2,.8,.2,1);
}
.cf-rev-in[class*="cf-pg-"] h2.cf-sweep::after,
.cf-rev-in[class*="cf-pg-"] section > h2:first-child::after {
  transform: scaleX(1);
}

/* ---------- I. STAT BLOCK (re-usable) ---------- */
.cf-stat-block {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin: var(--cf-rhythm-4) 0;
}
.cf-stat-block .cf-stat {
  text-align: center;
  padding: 18px 14px;
  background: var(--cf-bg);
  border: 1px solid var(--cf-line);
  border-radius: var(--cf-radius);
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), border-color 220ms ease, box-shadow 240ms ease;
}
.cf-stat-block .cf-stat:hover {
  transform: translateY(-3px);
  border-color: rgba(232,98,42,0.30);
  box-shadow: var(--cf-shadow-lift);
}
.cf-stat-block .cf-stat .cf-stat-num {
  display: block;
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 800;
  color: var(--cf-brand-primary);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 6px;
}
.cf-stat-block .cf-stat .cf-stat-label {
  font-size: 13px;
  color: var(--cf-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* ---------- J. TYPOGRAPHY UPGRADE — Mulish + Public Sans
       (loaded via Google Fonts include below in head.php) ---------- */
[class*="cf-el-"],
[class*="cf-q-"],
[class*="cf-pg-"] {
  font-family: 'Public Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
[class*="cf-el-"] h1, [class*="cf-el-"] h2, [class*="cf-el-"] h3,
[class*="cf-q-"]  h1, [class*="cf-q-"]  h2, [class*="cf-q-"]  h3,
[class*="cf-pg-"] h1, [class*="cf-pg-"] h2, [class*="cf-pg-"] h3 {
  font-family: 'Mulish', 'Public Sans', system-ui, -apple-system, sans-serif;
  font-feature-settings: "ss01" on, "cv11" on;
  letter-spacing: -0.018em;
}

/* ---------- K. LINK STYLE — subtle brand underline ---------- */
[class*="cf-pg-"] a:not(.btn):not(.btn-primary):not(.btn-ghost):not(.btn-ghost1):not([class*="cf-el-submit"]):not([class*="cf-q-btn"]) {
  color: var(--cf-text);
  text-decoration: none;
  background-image: linear-gradient(90deg, var(--cf-brand-primary), var(--cf-brand-primary));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: color 180ms ease, background-size 220ms ease;
  padding-bottom: 1px;
}
[class*="cf-pg-"] a:not(.btn):not(.btn-primary):not(.btn-ghost):not(.btn-ghost1):not([class*="cf-el-submit"]):not([class*="cf-q-btn"]):hover {
  color: var(--cf-brand-primary);
  background-size: 100% 2px;
}

/* ---------- L. RESPONSIVE GUARDS ---------- */
@media (max-width: 640px) {
  [class*="cf-pg-"] h2[data-cf-num]::before,
  [class*="cf-pg-"] h2.cf-numbered::before {
    display: inline-block;
    margin-right: 8px;
    padding: 3px 8px;
    font-size: 0.58em;
  }
  .cf-stat-block { gap: 10px; }
  .cf-stat-block .cf-stat { padding: 12px 10px; }
}