/*
 * editorial.css — Inwestout Research: McKinsey-Inspired Editorial Design
 *
 * Loaded after each page's inline <style> block so it cascades on top.
 * Applies only to light-theme report pages (not DIMO's dark theme).
 *
 * Design pillars:
 *   1. Playfair Display serif for h1/h2 — the fastest signal of "editorial not SaaS"
 *   2. Body at line-height 1.74 — print-quality readability
 *   3. De-boxed components — shadow removal, minimal radius, border lines over cards
 *   4. Uppercase tracking on labels and table headers — financial print convention
 *   5. Chart container de-chrome — no border box around canvas
 */

/* ── FONT IMPORTS ─────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,500;1,600&family=Inter:wght@300;400;500;600;700&display=swap');


/* ══════════════════════════════════════════════════════════════════════
   1. TYPOGRAPHY — Serif headings
   ══════════════════════════════════════════════════════════════════════ */

/* Primary report title — h1 */
h1,
h1.title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.1 !important;
}

/* Research index hero title */
.hero-title,
.featured-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* Section headings — h2 */
h2,
h2.h,
h2.section-title,
.methodology-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.22 !important;
}

/* Sub-headings — h3: keep sans-serif but tighten */
h3,
h3.sh,
h3.rt {
  font-family: 'Inter', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* h4 — chart titles, card headings: tighter weight */
h4,
.chart-card h4,
.seg h4,
.callout h4,
.risk-card .rt,
.dossier-name {
  font-family: 'Inter', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.005em;
}


/* ══════════════════════════════════════════════════════════════════════
   2. BODY TEXT — print-quality readability
   ══════════════════════════════════════════════════════════════════════ */

body {
  line-height: 1.74 !important;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p,
.narrative,
.hero-sub,
.hero-desc,
.hero-dek,
.subtitle {
  line-height: 1.74;
}


/* ══════════════════════════════════════════════════════════════════════
   3. LABELS & TABLE HEADERS — editorial uppercase tracking
   ══════════════════════════════════════════════════════════════════════ */

/* Section eyebrow labels */
.section-label,
.section-num,
.section-kicker,
.crumb,
.hero-eyebrow {
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
}

/* Verdict / callout interior labels */
.v-label,
.verdict-label,
.callout-label,
.callout .ch,
.rh,
.chart-card .desc {
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Chart card subtitle (source line) */
.chart-card .desc {
  letter-spacing: 0 !important;  /* keep source line readable, not all-caps */
  text-transform: none !important;
  font-size: 11px;
  color: #94A3B8;
  margin-bottom: 18px;
}

/* Table headers */
th,
.pd-row.head .pd-cell,
.compare th,
.data-table th {
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
}


/* ══════════════════════════════════════════════════════════════════════
   4. CHART CARDS — remove the SaaS "floating box" look
   ══════════════════════════════════════════════════════════════════════ */

.chart-card {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 0 32px !important;
  margin-bottom: 8px;
}

.chart-card.full {
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
  margin-bottom: 24px;
}

.chart-card h4 {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1E293B !important;
  margin-bottom: 4px !important;
  letter-spacing: 0.005em;
}

.chart-grid {
  gap: 40px !important;
}


/* ══════════════════════════════════════════════════════════════════════
   5. VERDICT / OBSERVATION BOXES — strip shadows, minimal radius
   ══════════════════════════════════════════════════════════════════════ */

/* All verdict variants: remove shadow, sharpen corners */
.verdict {
  box-shadow: none !important;
  border-radius: 2px !important;
}

/* JKH-style light verdicts (.verdict .v-label = JKH, not LOLC dark variant)
   We detect JKH light verdicts via the gradient background pattern and strip it.
   LOLC's dark verdict is left alone since stripping would make white text invisible. */
.verdict .v-label ~ *,
.verdict .v-title {
  /* Interior text styling */
}

/* Verdict card: only transform if it has the light gradient background (JKH style) */
/* Use border-left approach for the green/mixed/flag verdicts */
.verdict:has(.v-label) {
  background: transparent !important;
  border: none !important;
  border-left: 3px solid currentColor !important;
  border-radius: 0 !important;
  padding: 10px 0 10px 22px !important;
  box-shadow: none !important;
}
.verdict:has(.v-label) .v-label {
  color: #059669;
}
.verdict.mixed:has(.v-label) .v-label {
  color: #D97706;
}
.verdict.flag:has(.v-label) .v-label {
  color: #DC2626;
}

/* Left border color drives the accent */
.verdict:has(.v-label) {
  border-left-color: #059669 !important;
}
.verdict.mixed:has(.v-label) {
  border-left-color: #D97706 !important;
}
.verdict.flag:has(.v-label) {
  border-left-color: #DC2626 !important;
}


/* ══════════════════════════════════════════════════════════════════════
   6. CALLOUT BOXES — subtle left-border editorial style
   ══════════════════════════════════════════════════════════════════════ */

/* JKH-style callouts with .ch label: strip card look */
.callout:has(.ch) {
  background: transparent !important;
  border: none !important;
  border-left: 3px solid #2962ff !important;
  border-left-color: var(--blue, #2962ff) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 8px 0 8px 22px !important;
}

/* Other callout variants — strip shadow and radius, keep color background subtle */
.callout {
  box-shadow: none !important;
  border-radius: 2px !important;
}

/* Multi-color callout variants — soften backgrounds */
.callout:not(.green):not(.orange):not(.red):has(.callout-label) {
  background: #F8FAFF !important;
  border-color: rgba(26, 86, 255, 0.2) !important;
}
.callout.green:has(.callout-label) {
  background: #F0FDF9 !important;
  border-color: rgba(5, 150, 105, 0.2) !important;
}
.callout.orange:has(.callout-label) {
  background: #FFFBF0 !important;
  border-color: rgba(217, 119, 6, 0.2) !important;
}
.callout.red:has(.callout-label) {
  background: #FFF8F8 !important;
  border-color: rgba(220, 38, 38, 0.2) !important;
}


/* ══════════════════════════════════════════════════════════════════════
   7. STAT / KPI CARDS — flatten, remove shadow
   ══════════════════════════════════════════════════════════════════════ */

.stat {
  box-shadow: none !important;
  border-radius: 4px !important;
}

/* Stats grid: tighter left-border accent instead of side color block */
.stat::before {
  width: 2px !important;
}


/* ══════════════════════════════════════════════════════════════════════
   8. RISK CARDS — clean top-border, no box
   ══════════════════════════════════════════════════════════════════════ */

.risk-card {
  box-shadow: none !important;
  border-radius: 0 !important;
  border: none !important;
  border-top: 2px solid #DC2626 !important;
  border-top-color: var(--red, #DC2626) !important;
  background: transparent !important;
  padding: 18px 0 4px !important;
}

.risk-card.amber {
  border-top-color: var(--orange, #D97706) !important;
}


/* ══════════════════════════════════════════════════════════════════════
   9. SEGMENT CARDS — minimal, editorial
   ══════════════════════════════════════════════════════════════════════ */

.seg {
  box-shadow: none !important;
  border-radius: 2px !important;
  border: 1px solid rgba(0, 0, 0, 0.07) !important;
  background: transparent !important;
}


/* ══════════════════════════════════════════════════════════════════════
   10. PROMISE VS DELIVERY TABLE — cleaner borders
   ══════════════════════════════════════════════════════════════════════ */

.pd-table {
  border-radius: 2px !important;
  box-shadow: none !important;
}

.pd-row.head {
  background: #FAFBFC !important;
}


/* ══════════════════════════════════════════════════════════════════════
   11. FINAL VERDICT (dark block at end of JKH) — sharpen
   ══════════════════════════════════════════════════════════════════════ */

.final {
  border-radius: 4px !important;
}


/* ══════════════════════════════════════════════════════════════════════
   12. PULLQUOTE — editorial accent
   ══════════════════════════════════════════════════════════════════════ */

.pullquote {
  font-size: 17px !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: italic !important;
  border-left-width: 3px !important;
  color: #334155 !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
}

.pullquote .src {
  font-family: 'Inter', 'Source Sans 3', sans-serif !important;
  font-style: normal !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
}


/* ══════════════════════════════════════════════════════════════════════
   13. RESEARCH INDEX — editorial card treatments
   ══════════════════════════════════════════════════════════════════════ */

/* Research index card: keep shadow but soften */
.rc {
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03) !important;
  border-radius: 8px !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}
.rc:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04) !important;
  transform: translateY(-2px) !important;
}

/* Featured card on research index */
.featured-card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04) !important;
  border-radius: 8px !important;
}
.featured-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.10), 0 3px 8px rgba(0,0,0,0.05) !important;
  transform: translateY(-2px) !important;
}

/* Research card title: serif upgrade */
.rc-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  font-size: 17px !important;
  line-height: 1.28 !important;
}


/* ══════════════════════════════════════════════════════════════════════
   14. DOSSIER COMPONENTS (LOLC-style analysis sections)
   ══════════════════════════════════════════════════════════════════════ */

.dossier {
  box-shadow: none !important;
  border-radius: 2px !important;
}


/* ══════════════════════════════════════════════════════════════════════
   15. SECTION HEAD (LOLC/NDB border-bottom style) — clean divider
   ══════════════════════════════════════════════════════════════════════ */

.section-head {
  border-bottom-color: rgba(0, 0, 0, 0.07) !important;
  padding-bottom: 14px !important;
}

.section-title {
  font-size: 22px !important;
}


/* ══════════════════════════════════════════════════════════════════════
   16. COMPLIANCE / DISCLAIMER BANNERS — no radius, clean left accent
   ══════════════════════════════════════════════════════════════════════ */

.compliance,
.disclaimer-banner {
  border-radius: 0 !important;
  box-shadow: none !important;
}


/* ══════════════════════════════════════════════════════════════════════
   17. SMOKING GUN COMPONENT (LOLC) — editorial treatment
   ══════════════════════════════════════════════════════════════════════ */

.smoking-gun {
  border-radius: 2px !important;
  box-shadow: none !important;
}


/* ══════════════════════════════════════════════════════════════════════
   18. METHODOLOGY SECTION (research index) — refined dark block
   ══════════════════════════════════════════════════════════════════════ */

.methodology {
  border-radius: 6px !important;
}

.methodology-title {
  color: #fff !important;
  font-size: 22px !important;
}


/* ══════════════════════════════════════════════════════════════════════
   19. REPORT HEADER SECTION — cleaner separator
   ══════════════════════════════════════════════════════════════════════ */

header.report-head {
  border-bottom: 2px solid rgba(0, 0, 0, 0.08) !important;
  padding-bottom: 36px !important;
}

.meta-row {
  border-top-color: rgba(0, 0, 0, 0.07) !important;
}


/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE: preserve editorial feel on mobile
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  h1, h1.title {
    letter-spacing: -0.015em !important;
  }

  h2, h2.h, h2.section-title {
    font-size: 20px !important;
    letter-spacing: -0.005em !important;
  }

  .chart-card {
    padding: 0 0 24px !important;
  }

  .risk-card {
    padding: 16px 0 4px !important;
  }
}