/* ============================================================
   Salesforce Integration Series — Shared Stylesheet
   Use this file across all article HTML files.
   Served at /css/styles.css — reference: <link rel="stylesheet" href="/css/styles.css" />
   (href="styles.css" is rewritten in the CMS iframe to the absolute URL.)
   ============================================================ */

/* ------------------------------------------------------------
   1. FONTS & BASE RESET
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
  font-size: 16px;
  line-height: 1.7;
  background-color: var(--bg-page);
  color: var(--text-primary);
  transition:
    background-color 0.2s,
    color 0.2s;
}

/* ------------------------------------------------------------
   2. CSS VARIABLES — LIGHT MODE
   ------------------------------------------------------------ */
:root {
  /* Page backgrounds */
  --bg-page: #f5f5f3;
  --bg-primary: #ffffff;
  --bg-secondary: #f1efe8;

  /* Text */
  --text-primary: #1a1a18;
  --text-secondary: #5f5e5a;
  --text-tertiary: #888780;

  /* Borders */
  --border-light: rgba(0, 0, 0, 0.1);
  --border-medium: rgba(0, 0, 0, 0.18);

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Green palette */
  --green-bg: #e1f5ee;
  --green-text: #085041;
  --green-border: #9fe1cb;
  --green-mid: #1d9e75;

  /* Blue palette */
  --blue-bg: #e6f1fb;
  --blue-text: #0c447c;
  --blue-border: #b5d4f4;
  --blue-mid: #185fa5;

  /* Amber palette */
  --amber-bg: #faeeda;
  --amber-text: #633806;
  --amber-border: #fac775;
  --amber-mid: #ba7517;

  /* Red palette */
  --red-bg: #fcebeb;
  --red-text: #501313;
  --red-border: #f7c1c1;
  --red-mid: #a32d2d;

  /* Purple palette */
  --purple-bg: #eeedfe;
  --purple-text: #3c3489;
  --purple-border: #cecbf6;
  --purple-mid: #534ab7;

  /* Code block */
  --code-bg: #2c2c2a;
  --code-keyword: #5dcaa5;
  --code-string: #fac775;
  --code-comment: #888780;
  --code-function: #85b7eb;
  --code-class: #ed93b1;
  --code-text: #f0ede6;
}

/* ------------------------------------------------------------
   3. CSS VARIABLES — DARK MODE (OS preference)
   When the site or iframe sets data-theme="light", that must win over
   prefers-color-scheme so the article matches the theme toggle.
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg-page: #1a1a18;
    --bg-primary: #232320;
    --bg-secondary: #2c2c2a;
    --text-primary: #e8e5de;
    --text-secondary: #b4b2a9;
    --text-tertiary: #888780;
    --border-light: rgba(255, 255, 255, 0.08);
    --border-medium: rgba(255, 255, 255, 0.15);

    --green-bg: #04342c;
    --green-text: #9fe1cb;
    --green-border: #0f6e56;

    --blue-bg: #042c53;
    --blue-text: #b5d4f4;
    --blue-border: #185fa5;

    --amber-bg: #412402;
    --amber-text: #fac775;
    --amber-border: #854f0b;

    --red-bg: #501313;
    --red-text: #f7c1c1;
    --red-border: #a32d2d;

    --purple-bg: #26215c;
    --purple-text: #cecbf6;
    --purple-border: #534ab7;
  }
}

html[data-theme='dark'] {
  --bg-page: #1a1a18;
  --bg-primary: #232320;
  --bg-secondary: #2c2c2a;
  --text-primary: #e8e5de;
  --text-secondary: #b4b2a9;
  --text-tertiary: #888780;
  --border-light: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.15);

  --green-bg: #04342c;
  --green-text: #9fe1cb;
  --green-border: #0f6e56;

  --blue-bg: #042c53;
  --blue-text: #b5d4f4;
  --blue-border: #185fa5;

  --amber-bg: #412402;
  --amber-text: #fac775;
  --amber-border: #854f0b;

  --red-bg: #501313;
  --red-text: #f7c1c1;
  --red-border: #a32d2d;

  --purple-bg: #26215c;
  --purple-text: #cecbf6;
  --purple-border: #534ab7;
}

/* ------------------------------------------------------------
   4. PAGE LAYOUT
   ------------------------------------------------------------ */
.article-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
  background: var(--bg-primary);
  min-height: 100vh;
}

@media (max-width: 600px) {
  .article-wrap {
    padding: 1.5rem 1rem 3rem;
  }
}

/* ------------------------------------------------------------
   5. HERO SECTION
   ------------------------------------------------------------ */
.hero {
  margin-bottom: 2.5rem;
}

.hero-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  color: var(--green-text);
  background: var(--green-bg);
  border: 0.5px solid var(--green-border);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
}

.hero-title {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
  margin-bottom: 0.9rem;
}

.hero-sub {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 2rem;
}

.hero-divider {
  border: none;
  border-top: 0.5px solid var(--border-light);
  margin-bottom: 2rem;
}

/* ------------------------------------------------------------
   6. PILLS / BADGES
   ------------------------------------------------------------ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  border: 0.5px solid transparent;
}

.pill-green {
  background: var(--green-bg);
  color: var(--green-text);
  border-color: var(--green-border);
}
.pill-blue {
  background: var(--blue-bg);
  color: var(--blue-text);
  border-color: var(--blue-border);
}
.pill-amber {
  background: var(--amber-bg);
  color: var(--amber-text);
  border-color: var(--amber-border);
}
.pill-purple {
  background: var(--purple-bg);
  color: var(--purple-text);
  border-color: var(--purple-border);
}
.pill-red {
  background: var(--red-bg);
  color: var(--red-text);
  border-color: var(--red-border);
}

/* Interview question level badges */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  margin-left: 8px;
  vertical-align: middle;
}
.badge-core {
  background: var(--green-bg);
  color: var(--green-text);
}
.badge-senior {
  background: var(--amber-bg);
  color: var(--amber-text);
}
.badge-advanced {
  background: var(--red-bg);
  color: var(--red-text);
}

/* ------------------------------------------------------------
   7. SECTIONS
   ------------------------------------------------------------ */
.section {
  margin-bottom: 2.25rem;
}

.section-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 0.4rem;
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  line-height: 1.35;
}

.body-text {
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-secondary);
  margin-bottom: 0.9rem;
}

/* ------------------------------------------------------------
   8. CALLOUT BOXES
   ------------------------------------------------------------ */
.box {
  padding: 1.1rem 1.4rem;
  border-radius: var(--radius-lg);
  margin: 1.25rem 0;
  border: 0.5px solid;
}

.box-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  opacity: 0.8;
}

.box p,
.box-body {
  font-size: 14px;
  line-height: 1.75;
  margin-top: 0.3rem;
}

/* Box colour variants */
.box-analogy {
  background: var(--green-bg);
  border-color: var(--green-border);
  color: var(--green-text);
}

.box-info {
  background: var(--blue-bg);
  border-color: var(--blue-border);
  color: var(--blue-text);
}

.box-tip {
  background: var(--amber-bg);
  border-color: var(--amber-border);
  color: var(--amber-text);
}

.box-warn {
  background: var(--red-bg);
  border-color: var(--red-border);
  color: var(--red-text);
}

.box-purple {
  background: var(--purple-bg);
  border-color: var(--purple-border);
  color: var(--purple-text);
}

/* ------------------------------------------------------------
   9. FLOW ROW (green → blue → amber pipeline)
   ------------------------------------------------------------ */
.flow-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 1.5rem 0;
}

.flow-node {
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  flex: 1;
  min-width: 110px;
  line-height: 1.5;
  border: 0.5px solid;
}

.flow-node small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  opacity: 0.75;
  margin-top: 2px;
}

.fn-green {
  background: var(--green-bg);
  color: var(--green-text);
  border-color: var(--green-border);
}
.fn-blue {
  background: var(--blue-bg);
  color: var(--blue-text);
  border-color: var(--blue-border);
}
.fn-amber {
  background: var(--amber-bg);
  color: var(--amber-text);
  border-color: var(--amber-border);
}
.fn-purple {
  background: var(--purple-bg);
  color: var(--purple-text);
  border-color: var(--purple-border);
}
.fn-red {
  background: var(--red-bg);
  color: var(--red-text);
  border-color: var(--red-border);
}

.flow-arrow {
  font-size: 18px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

/* ------------------------------------------------------------
   10. CARD GRIDS (two-column)
   ------------------------------------------------------------ */
.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.25rem 0;
}

@media (max-width: 560px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

.card {
  padding: 1.2rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--border-light);
  background: var(--bg-secondary);
}

.card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.card-body {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* Coloured card variants */
.card-green {
  background: var(--green-bg);
  border-color: var(--green-border);
}
.card-blue {
  background: var(--blue-bg);
  border-color: var(--blue-border);
}
.card-amber {
  background: var(--amber-bg);
  border-color: var(--amber-border);
}
.card-red {
  background: var(--red-bg);
  border-color: var(--red-border);
}
.card-purple {
  background: var(--purple-bg);
  border-color: var(--purple-border);
}

.card-green .card-title {
  color: var(--green-text);
}
.card-blue .card-title {
  color: var(--blue-text);
}
.card-amber .card-title {
  color: var(--amber-text);
}
.card-red .card-title {
  color: var(--red-text);
}
.card-purple .card-title {
  color: var(--purple-text);
}

.card-green .card-body {
  color: var(--green-text);
}
.card-blue .card-body {
  color: var(--blue-mid);
}
.card-amber .card-body {
  color: var(--amber-text);
}
.card-red .card-body {
  color: var(--red-text);
}
.card-purple .card-body {
  color: var(--purple-mid);
}

/* Three-column variant */
.card-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.85rem;
  margin: 1.25rem 0;
}

@media (max-width: 560px) {
  .card-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------
   11. DECISION GRID (green / red two-column)
   ------------------------------------------------------------ */
.decision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.25rem 0;
}

@media (max-width: 520px) {
  .decision-grid {
    grid-template-columns: 1fr;
  }
}

.dcard {
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 0.5px solid;
}

.dcard-green {
  background: var(--green-bg);
  border-color: var(--green-border);
}
.dcard-red {
  background: var(--red-bg);
  border-color: var(--red-border);
}

.dcard-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 0.65rem;
}

.dcard-green .dcard-title {
  color: var(--green-text);
}
.dcard-red .dcard-title {
  color: var(--red-text);
}

.dcard ul {
  padding-left: 1rem;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dcard-green li {
  font-size: 13px;
  color: var(--green-text);
  line-height: 1.55;
}
.dcard-red li {
  font-size: 13px;
  color: var(--red-text);
  line-height: 1.55;
}

/* ------------------------------------------------------------
   12. TABLE
   ------------------------------------------------------------ */
.ctable {
  width: 100%;
  border-collapse: collapse;
  margin: 1.1rem 0;
  font-size: 13px;
}

.ctable th {
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-weight: 600;
  padding: 9px 12px;
  text-align: left;
  border-bottom: 0.5px solid var(--border-medium);
}

.ctable td {
  padding: 9px 12px;
  border-bottom: 0.5px solid var(--border-light);
  color: var(--text-secondary);
  line-height: 1.55;
}

.ctable tr:last-child td {
  border-bottom: none;
}

.ctable tr:hover td {
  background: var(--bg-secondary);
}

.text-good,
.ctable .good {
  color: var(--green-mid);
  font-weight: 500;
}
.text-bad,
.ctable .bad {
  color: var(--red-mid);
  font-weight: 500;
}

/* ------------------------------------------------------------
   13. CODE BLOCKS
   ------------------------------------------------------------ */
.code-wrap {
  margin: 1.25rem 0;
}

.code-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--code-comment);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.code-block {
  background: var(--code-bg);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
}

.code-block pre {
  font-family:
    'SF Mono',
    'Fira Code',
    'Cascadia Code',
    Consolas,
    'Courier New',
    monospace;
  font-size: 13px;
  line-height: 1.8;
  white-space: pre;
  color: var(--code-text);
}

/* Syntax highlight spans */
.ck {
  color: var(--code-keyword);
} /* keywords */
.cs {
  color: var(--code-string);
} /* strings */
.cc {
  color: var(--code-comment);
} /* comments */
.cf {
  color: var(--code-function);
} /* functions / methods */
.ccl {
  color: var(--code-class);
} /* class names */
.cw {
  color: #ffffff;
} /* white / default */

/* ------------------------------------------------------------
   14. CHUNK / TIMELINE VISUAL
   ------------------------------------------------------------ */
.chunk-wrap {
  margin: 1.25rem 0;
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--border-light);
  background: var(--bg-secondary);
}

.chunk-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 0.85rem;
}

.chunk-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.chunk-tag {
  font-size: 11px;
  font-weight: 500;
  width: 90px;
  flex-shrink: 0;
  color: var(--text-tertiary);
}

.chunk {
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  border: 0.5px solid;
}

.ch-blue {
  background: var(--blue-bg);
  color: var(--blue-text);
  border-color: var(--blue-border);
}
.ch-green {
  background: var(--green-bg);
  color: var(--green-text);
  border-color: var(--green-border);
}
.ch-amber {
  background: var(--amber-bg);
  color: var(--amber-text);
  border-color: var(--amber-border);
}
.ch-purple {
  background: var(--purple-bg);
  color: var(--purple-text);
  border-color: var(--purple-border);
}

.chunk-note {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 0.5rem;
  font-style: italic;
}

/* ------------------------------------------------------------
   15. ONE-LINER (dark callout box)
   ------------------------------------------------------------ */
.oneliner {
  background: var(--code-bg);
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
  margin: 1.75rem 0;
  text-align: center;
}

.oneliner-label {
  font-size: 11px;
  color: var(--code-comment);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.oneliner-text {
  font-size: 17px;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.65;
}

/* ------------------------------------------------------------
   16. INTERVIEW QUESTIONS SECTION
   ------------------------------------------------------------ */
.iq-section {
  background: var(--purple-bg);
  border-radius: var(--radius-xl);
  padding: 2rem;
  margin-top: 3rem;
  border: 0.5px solid var(--purple-border);
}

.iq-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--purple-text);
  margin-bottom: 0.3rem;
}

.iq-sub {
  font-size: 13px;
  color: var(--purple-mid);
  margin-bottom: 1.5rem;
}

.iq-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.iq-card {
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  padding: 0.9rem 1.1rem;
  border: 0.5px solid var(--purple-border);
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.iq-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--purple-bg);
  color: var(--purple-text);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  border: 0.5px solid var(--purple-border);
}

.iq-q {
  font-size: 14px;
  color: var(--purple-text);
  line-height: 1.6;
  flex: 1;
}

/* ------------------------------------------------------------
   17. DIAGRAM WRAPPER (for SVG diagrams)
   ------------------------------------------------------------ */
.diagram-wrap {
  margin: 1.5rem 0;
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--border-light);
  background: var(--bg-secondary);
  overflow-x: auto;
}

.diagram-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 1rem;
}

/* ------------------------------------------------------------
   18. UTILITY CLASSES
   ------------------------------------------------------------ */
.mt-sm {
  margin-top: 0.5rem;
}
.mt-md {
  margin-top: 1rem;
}
.mt-lg {
  margin-top: 1.5rem;
}
.mb-sm {
  margin-bottom: 0.5rem;
}
.mb-md {
  margin-bottom: 1rem;
}
.mb-lg {
  margin-bottom: 1.5rem;
}

.text-small {
  font-size: 13px;
}
.text-xs {
  font-size: 11px;
}
.text-muted {
  color: var(--text-tertiary);
}
.text-italic {
  font-style: italic;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}

/* ------------------------------------------------------------
   19. CMS HTML — inline code inside tinted callouts (dark theme)
   ------------------------------------------------------------ */
html[data-theme='dark'] .article-html-guide .blog .box code {
  background: rgba(255, 255, 255, 0.12);
  color: inherit;
}

/* ------------------------------------------------------------
   20. LEGACY CMS (optional — older articles used cms-html-shared names)
   ------------------------------------------------------------ */
.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem 1.25rem;
}

.body {
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-secondary);
  margin-bottom: 0.85rem;
}

hr.divider {
  border: none;
  border-top: 0.5px solid var(--border-light);
  margin-bottom: 2rem;
}

h1.hero-title {
  font-size: 26px;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 0.9rem;
  color: var(--text-primary);
}

h2.section-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.iq-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  margin-left: 6px;
  vertical-align: middle;
}

.iq-badge.badge-core {
  background: var(--green-bg);
  color: var(--green-text);
}

.iq-badge.badge-senior {
  background: var(--amber-bg);
  color: var(--amber-text);
}

.iq-badge.badge-advanced {
  background: var(--red-bg);
  color: var(--red-text);
}

/* ------------------------------------------------------------
   END OF styles.css (sections 1–20)
   ------------------------------------------------------------ */