/**
 * Case Study Builder — section styles (Classic Editor builder).
 * Loaded on the front-end single AND inside the Visual editor (add_editor_style),
 * so sections look identical while editing. RTL-safe via logical properties.
 *
 * All classes are prefixed `.csb-` and inner elements are scoped under their
 * section root so they reliably override the global `.page-content` typography.
 */

/* Tokens redefined here so colors resolve inside the editor iframe too. */
.csb-stathero,
.csb-meta,
.csb-numhead,
.csb-ba,
.csb-phase,
.csb-rtable,
.csb-bars,
.csb-insights,
.csb-btable,
.csb-services,
.csb-why,
.csb-lead,
.csb-quote,
.csb-callout {
  --csb-green: #0A882E;
  --csb-green-soft: #E8F5E9;
  --csb-green-border: #BEE3C5;
  --csb-red: #ef4444;
  --csb-red-soft: #fef2f2;
  --csb-red-border: #fecaca;
  --csb-dark: #0f172a;
  --csb-gray: #64748B;
  --csb-border: #E2E8F0;
  --csb-radius: 16px;
  font-family: inherit;
}

/* ------------------------------------------------------------
 * Font matching: the theme forces fonts with !important on a
 * fixed element list (body, p, span, td, th...) and rtl.css forces
 * Cairo on div/span/p but NOT on td/th. That leaves table cells on
 * the wrong font in Arabic. Force EVERY builder element to inherit
 * the site body font so tables match the rest of the site exactly,
 * in both LTR and RTL.
 * ------------------------------------------------------------ */
.csb-stathero, .csb-stathero *,
.csb-meta, .csb-meta *,
.csb-numhead, .csb-numhead *,
.csb-ba, .csb-ba *,
.csb-phase, .csb-phase *,
.csb-rtable, .csb-rtable *,
.csb-bars, .csb-bars *,
.csb-insights, .csb-insights *,
.csb-btable, .csb-btable *,
.csb-services, .csb-services *,
.csb-why, .csb-why *,
.csb-lead, .csb-quote, .csb-callout {
  font-family: inherit !important;
}

/* Shared spacing between inserted sections */
.csb-stathero,
.csb-meta,
.csb-ba,
.csb-phase,
.csb-rtable,
.csb-bars,
.csb-insights,
.csb-btable,
.csb-services,
.csb-why,
.csb-callout {
  margin: 32px 0;
}
.csb-numhead { margin: 48px 0 20px; }

/* ============================================================
 * 1. Stat Hero
 * ============================================================ */
.csb-stathero {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.csb-stathero__item {
  background: #fff;
  border: 1px solid var(--csb-border);
  border-radius: var(--csb-radius);
  padding: 26px 20px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}
.csb-stathero__value {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--csb-green);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.csb-stathero__label {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--csb-dark);
  margin-bottom: 6px;
}
.csb-stathero__sub {
  display: block;
  font-size: 0.85rem;
  color: var(--csb-green);
  font-weight: 600;
}

/* ============================================================
 * 2. Meta strip
 * ============================================================ */
.csb-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  padding: 18px 24px;
  background: var(--csb-green-soft);
  border: 1px solid var(--csb-green-border);
  border-radius: 12px;
}
.csb-meta__item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.csb-meta__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--csb-green);
}
.csb-meta__value {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--csb-dark);
}

/* ============================================================
 * 3. Numbered heading
 * ============================================================ */
.csb-numhead {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
}
/* Guard against wpautop wrapping the number span in a <p> */
.csb-numhead > p {
  margin: 0 !important;
  padding: 0 !important;
  display: contents;
}
.csb-numhead .csb-numhead__num {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--csb-green);
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  border-radius: 12px;
}
.csb-numhead .csb-numhead__title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1.7rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: #000 !important;
  letter-spacing: -0.02em;
  text-align: start !important;
}

/* ============================================================
 * 4. Before / After table
 * ============================================================ */
.csb-ba {
  border: 1px solid var(--csb-border);
  border-radius: var(--csb-radius);
  overflow: hidden;
}
.csb-ba__head,
.csb-ba__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.csb-ba__head-cell {
  padding: 14px 20px;
  font-weight: 700;
  font-size: 0.95rem;
}
.csb-ba__head-cell--before { background: var(--csb-red-soft); color: var(--csb-red); }
.csb-ba__head-cell--after  { background: var(--csb-green); color: #fff; }
.csb-ba__row { border-top: 1px solid var(--csb-border); }
.csb-ba__cell {
  padding: 16px 20px;
  font-size: 0.92rem;
  color: var(--csb-dark);
  line-height: 1.55;
}
.csb-ba__cell--before { background: #fff; }
.csb-ba__cell--after  { background: #f6fbf7; border-inline-start: 1px solid var(--csb-border); }
.csb-ba__cell--before::before { content: "\2717\00a0\00a0"; color: var(--csb-red); font-weight: 700; }
.csb-ba__cell--after::before  { content: "\2713\00a0\00a0"; color: var(--csb-green); font-weight: 700; }

/* ============================================================
 * 5. Phase card
 * ============================================================ */
.csb-phase {
  background: #fff;
  border: 1px solid var(--csb-border);
  border-inline-start: 4px solid var(--csb-green);
  border-radius: var(--csb-radius);
  padding: 28px 30px;
}
.csb-phase__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.csb-phase .csb-phase__title {
  margin: 0 !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: #000 !important;
  text-align: start !important;
}
.csb-phase__pill {
  background: var(--csb-green-soft);
  color: var(--csb-green);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 50px;
}
.csb-phase__intro {
  color: var(--csb-gray);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 16px !important;
}
.csb-phase .csb-phase__list {
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
}
.csb-phase .csb-phase__list li {
  position: relative;
  padding-inline-start: 28px;
  margin-bottom: 10px;
  color: var(--csb-dark);
  font-size: 0.95rem;
  line-height: 1.6;
}
.csb-phase .csb-phase__list li::before {
  content: "\2713";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  color: var(--csb-green);
  font-weight: 700;
}
.csb-phase__callout {
  margin-top: 18px;
  background: var(--csb-green-soft);
  border: 1px solid var(--csb-green-border);
  border-radius: 10px;
  padding: 14px 18px;
  color: #14532d;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ============================================================
 * 6. Results table  &  9. Business-types table
 * ============================================================ */
.csb-rtable,
.csb-btable {
  overflow-x: auto;
  border: 1px solid var(--csb-border);
  border-radius: var(--csb-radius);
}
.csb-rtable table,
.csb-btable table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 560px;
  font-family: inherit;
}
.csb-rtable th,
.csb-btable th {
  background: var(--csb-green-soft);
  color: var(--csb-green);
  font-weight: 700;
  font-family: inherit;
  text-align: start;
  padding: 14px 18px;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  border-bottom: 2px solid var(--csb-green-border);
}
.csb-rtable td,
.csb-btable td {
  padding: 15px 20px;
  border-top: 1px solid var(--csb-border);
  color: var(--csb-dark);
  vertical-align: top;
  line-height: 1.7;
  font-family: inherit;
  font-weight: 600;
}
.csb-rtable tbody tr:nth-child(even),
.csb-btable tbody tr:nth-child(even) { background: #f8fafc; }
.csb-rtable .csb-rtable__growth {
  color: var(--csb-green);
  font-weight: 700;
  white-space: nowrap;
}

/* ============================================================
 * 7. Monthly bar chart
 * ============================================================ */
.csb-bars {
  border: 1px solid var(--csb-border);
  border-radius: var(--csb-radius);
  padding: 28px 24px 18px;
  background: #fff;
}
.csb-bars__chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 240px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.csb-bars__col {
  flex: 1 0 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 6px;
}
.csb-bars__val {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--csb-dark);
}
.csb-bars__bar {
  width: 70%;
  max-width: 30px;
  border-radius: 6px 6px 0 0;
  background: #93c5fd; /* default */
  transition: filter 0.2s;
}
.csb-bars__bar--p1 { background: #bfdbfe; }   /* baseline (light) */
.csb-bars__bar--p2 { background: #3b82f6; }   /* momentum (medium) */
.csb-bars__bar--p3 { background: #0a2540; }   /* compound growth (navy) */
.csb-bars__label {
  font-size: 0.62rem;
  color: var(--csb-gray);
  white-space: nowrap;
}
.csb-bars__note {
  margin: 14px 0 0 !important;
  font-size: 0.8rem !important;
  color: var(--csb-gray) !important;
  line-height: 1.5;
}
/* Scroll affordance (only added by JS when the chart overflows) */
.csb-bars { position: relative; }
.csb-bars--scrollable::after {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 56px;
  inset-inline-end: 12px;
  width: 36px;
  background: linear-gradient(to left, #fff 10%, rgba(255,255,255,0));
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease;
}
[dir="rtl"] .csb-bars--scrollable::after,
body.rtl .csb-bars--scrollable::after {
  background: linear-gradient(to right, #fff 10%, rgba(255,255,255,0));
}
.csb-bars__hint {
  position: absolute;
  top: 10px;
  inset-inline-end: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--csb-green-soft);
  color: var(--csb-green);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 50px;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease;
  animation: csbHintPulse 1.6s ease-in-out infinite;
}
.csb-bars__hint-ic { font-size: 0.85rem; line-height: 1; }
.csb-bars--scrolled::after,
.csb-bars--scrolled .csb-bars__hint {
  opacity: 0;
}
@keyframes csbHintPulse {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-3px); }
}
[dir="rtl"] .csb-bars__hint, body.rtl .csb-bars__hint {
  animation-name: csbHintPulseRTL;
}
@keyframes csbHintPulseRTL {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .csb-bars__hint { animation: none; }
}

/* ============================================================
 * 8. Key Insights
 * ============================================================ */
.csb-insights {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.csb-insights__item {
  display: flex;
  gap: 18px;
  background: #fff;
  border: 1px solid var(--csb-border);
  border-radius: var(--csb-radius);
  padding: 22px 24px;
}
.csb-insights__num {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--csb-green-soft);
  color: var(--csb-green);
  font-weight: 800;
  border-radius: 50%;
}
.csb-insights .csb-insights__title {
  margin: 0 0 6px !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #000 !important;
  text-align: start !important;
}
.csb-insights__body p {
  margin: 0 !important;
  color: var(--csb-gray);
  font-size: 0.95rem;
  line-height: 1.65;
}

/* ============================================================
 * 10. Services Delivered (chips)
 * ============================================================ */
.csb-services {
  background: #f8fafc;
  border: 1px solid var(--csb-border);
  border-radius: var(--csb-radius);
  padding: 28px 26px;
}
.csb-services .csb-services__title {
  margin: 0 0 18px !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: #000 !important;
  text-align: start !important;
}
.csb-services__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.csb-services__chip {
  background: #fff;
  border: 1px solid var(--csb-green-border);
  color: var(--csb-green);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 50px;
}

/* ============================================================
 * 11. Why-us cards
 * ============================================================ */
.csb-why {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.csb-why__card {
  background: #fff;
  border: 1px solid var(--csb-border);
  border-radius: var(--csb-radius);
  padding: 26px;
}
.csb-why__icon {
  display: inline-block;
  color: var(--csb-green);
  font-size: 1.3rem;
  margin-bottom: 12px;
}
.csb-why .csb-why__title {
  margin: 0 0 8px !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #000 !important;
  text-align: start !important;
}
.csb-why__card p {
  margin: 0 !important;
  color: var(--csb-gray);
  font-size: 0.95rem;
  line-height: 1.65;
}

/* ============================================================
 * Helper boxes: Lead, Pull-quote, Callout
 * ============================================================ */
.csb-lead {
  font-size: 1.2rem !important;
  line-height: 1.7 !important;
  color: var(--csb-dark) !important;
  font-weight: 500;
}
.csb-quote {
  margin: 28px 0;
  padding: 8px 0 8px 22px;
  border-inline-start: 4px solid var(--csb-green);
  font-size: 1.3rem;
  font-style: italic;
  color: var(--csb-dark);
  line-height: 1.5;
}
.csb-callout {
  background: var(--csb-green-soft);
  border: 1px solid var(--csb-green-border);
  border-radius: 12px;
  padding: 20px 24px;
  color: #14532d;
  font-size: 1rem;
  line-height: 1.7;
}

/* ============================================================
 * Responsive
 * ============================================================ */
@media (max-width: 900px) {
  .csb-stathero { grid-template-columns: repeat(2, 1fr); }
  .csb-why { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .csb-stathero { grid-template-columns: 1fr; }
  .csb-numhead .csb-numhead__title { font-size: 1.4rem !important; }
}

/* ============================================================
 * Mobile: stacked-card tables + improved bar-chart scrolling
 * ============================================================ */
@media (max-width: 640px) {

  /* ---- Tables become stacked cards (best practice for data tables) ---- */
  .csb-rtable,
  .csb-btable {
    overflow: visible;
    border: 0;
    border-radius: 0;
  }
  .csb-rtable table,
  .csb-btable table { min-width: 0; }

  /* Visually hide the header row but keep it for screen readers */
  .csb-rtable thead,
  .csb-btable thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
  }

  .csb-rtable tr,
  .csb-btable tr {
    display: block;
    background: #fff !important;
    border: 1px solid var(--csb-border);
    border-radius: 12px;
    margin-bottom: 14px;
    overflow: hidden;
  }
  .csb-rtable td,
  .csb-btable td {
    border-top: 0;
    border-bottom: 1px solid var(--csb-border);
  }
  .csb-rtable td:last-child,
  .csb-btable td:last-child { border-bottom: 0; }

  /* Results-style: fixed-width label + value aligned right after it (balanced) */
  .csb-rtable td {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 14px 18px;
    line-height: 1.6;
    text-align: start;
  }
  .csb-rtable td::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--csb-gray);
    flex: 0 0 38%;
    text-align: start;
  }
  .csb-rtable td:first-child {
    background: var(--csb-green-soft);
    color: var(--csb-green);
    font-weight: 700;
    justify-content: flex-start;
  }
  .csb-rtable td:first-child::before { display: none; }

  /* Business-types: label stacked above the (long) value */
  .csb-btable td { display: block; padding: 14px 18px; line-height: 1.7; }
  .csb-btable td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--csb-green);
    margin-bottom: 6px;
  }
  .csb-btable td:first-child {
    background: var(--csb-green-soft);
    color: var(--csb-green);
    font-size: 1rem;
    font-weight: 700;
  }
  .csb-btable td:first-child::before { display: none; }

  /* ---- Before/After: paired problem + fix cards ---- */
  .csb-ba { border: 0; border-radius: 0; overflow: visible; }
  .csb-ba__head { display: none; }
  .csb-ba__row {
    display: block;
    grid-template-columns: 1fr;
    border: 1px solid var(--csb-border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 14px;
  }
  .csb-ba__cell { display: block; padding: 14px 16px; }
  .csb-ba__cell--before {
    background: var(--csb-red-soft);
    border-bottom: 1px solid var(--csb-border);
  }
  .csb-ba__cell--after {
    background: #f1faf3;
    border-inline-start: 0;
  }
  .csb-ba__cell--before::before {
    content: "\2717\00a0 Before";
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--csb-red);
    margin-bottom: 6px;
  }
  .csb-ba__cell--after::before {
    content: "\2713\00a0 After";
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--csb-green);
    margin-bottom: 6px;
  }

  /* ---- Bar chart: keep vertical (time series) but smoother to scroll ---- */
  .csb-bars { padding: 20px 12px 14px; }
  .csb-bars__chart {
    height: 200px;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .csb-bars__col {
    flex: 0 0 38px;
    scroll-snap-align: start;
  }
  .csb-bars__bar { max-width: 24px; }
}

/* ============================================================
 * RTL adjustments
 * ============================================================ */
body.rtl .csb-bars__chart,
[dir="rtl"] .csb-bars__chart { direction: rtl; }