/* ===== Surrender School — Enneagram Step Pages =====
 * Body class: .enneagram-step-page
 * Applies to Type 1–9, Step 1–12. Excludes Going Deeper pages.
 * ==================================================== */

/* ── Strip legacy inline fonts ───────────────────────── */

.enneagram-step-page .entry-content p,
.enneagram-step-page .entry-content li,
.enneagram-step-page .entry-content span {
  font-family: var(--font-body) !important;
}

/* Strip inline font-size overrides from spans — normalize to parent size */
.enneagram-step-page .entry-content p span,
.enneagram-step-page .entry-content li span {
  font-size: inherit !important;
}

.enneagram-step-page .entry-content h2,
.enneagram-step-page .entry-content h3,
.enneagram-step-page .entry-content h4 {
  font-family: var(--font-body) !important;
}

/* ── Collapse   spacer paragraphs ───────────────── */

.enneagram-step-page .entry-content p:empty {
  display: none;
}

/* ── Back to Supercharge → small outline pill button ─── */

.enneagram-step-page .entry-content a[href*="supercharge"] {
  display: inline-block;
  font-size: 0.82rem !important;
  font-family: var(--font-body) !important;
  font-weight: 500;
  color: #fff !important;
  text-decoration: none !important;
  background: var(--color-purple);
  border: 1.5px solid var(--color-purple);
  padding: 5px 14px;
  border-radius: 20px;
  letter-spacing: 0.01em;
  transition: background 0.2s ease, color 0.2s ease;
}

.enneagram-step-page .entry-content a[href*="supercharge"]:hover {
  background: transparent;
  color: var(--color-purple) !important;
}

/* ── Step title H3 ("STEP X: ...") ───────────────────── */
/* Only matches H3s that contain a <span> or <strong> child —
   the step title is always formatted; plain section headings are not. */

.enneagram-step-page .entry-content h3:first-of-type:has(> span, > strong) {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: var(--color-slate) !important;
  background: linear-gradient(135deg, rgba(130,95,215,0.07) 0%, rgba(164,184,245,0.13) 100%) !important;
  border-left: 4px solid var(--color-purple) !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 14px 18px !important;
  margin: 1rem 0 1rem 0 !important;
  line-height: 1.4 !important;
}

.enneagram-step-page .entry-content h3:first-of-type:has(> span, > strong) span {
  color: var(--color-slate) !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
}

/* Suppress stray <br> tags inside step title so it stays on one line */
.enneagram-step-page .entry-content h3:first-of-type:has(> span, > strong) br {
  display: none;
}

/* Also suppress stray <strong> extra weight — keep consistent with h3 weight */
.enneagram-step-page .entry-content h3:first-of-type strong {
  font-weight: inherit !important;
  color: inherit !important;
  font-size: inherit !important;
}

/* ── Congratulations / closing H3 (h3 > em:only-child) → body text color */

.enneagram-step-page .entry-content h3:has(> em:only-child) {
  color: var(--color-text) !important;
  background: none !important;
  border-left: none !important;
  padding: 0 !important;
}

.enneagram-step-page .entry-content h3:has(> em:only-child) em,
.enneagram-step-page .entry-content h3:has(> em:only-child) strong {
  color: inherit !important;
}

/* ── Section subheadings (all other H3s and H4s) ─────── */

.enneagram-step-page .entry-content h3,
.enneagram-step-page .entry-content h4 {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--color-purple) !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0.35rem !important;
  line-height: 1.35 !important;
}

.enneagram-step-page .entry-content h3:not(:first-of-type) span,
.enneagram-step-page .entry-content h3:not(:first-of-type) strong,
.enneagram-step-page .entry-content h4 span,
.enneagram-step-page .entry-content h4 strong {
  color: inherit !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
}

/* ── Mantra quote H3 (e.g. "It isn't always my responsibility.")
 * H3 containing only a span > em — should be italic body text, not purple */
.enneagram-step-page .entry-content h3:has(> span:only-child > em) {
  color: var(--color-text) !important;
  background: none !important;
  border-left: none !important;
  padding: 0 0 0 2.5rem !important;
  font-style: italic;
}

/* ── Lists ───────────────────────────────────────────── */

/* Remove browser default bullets/numbers; all li get a purple bullet via ::before */
.enneagram-step-page .entry-content ul,
.enneagram-step-page .entry-content ol {
  list-style: none !important;
  padding: 0 !important;
  margin: 0.6rem 0 0.6rem 0 !important;
}

.enneagram-step-page .entry-content ul li {
  position: relative;
  padding: 3px 0 3px 1.4rem !important;
  font-size: inherit !important;
  color: var(--color-text) !important;
  line-height: 1.6;
  margin-bottom: 0.35rem;
}

.enneagram-step-page .entry-content ul li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-purple);
  font-weight: bold;
}

/* Strip bold from <strong> inside list items (bold labels handled inline) */
.enneagram-step-page .entry-content ul li strong {
  font-weight: normal !important;
}

/* Nested list indent */
.enneagram-step-page .entry-content ul ul {
  margin: 0.3rem 0 0.3rem 0 !important;
}

/* Reflection questions: plain bullet points — no callout box */

/* ── Section headings as bold paragraphs ─────────────────
 * Pages use different nesting levels for section headings:
 *   Step 3:  <p><strong>Heading</strong></p>
 *   Step 4:  <p><span style="..."><strong>Heading</strong></span></p>
 * Both patterns get the same purple heading treatment.         */

.enneagram-step-page .entry-content p:has(> strong:only-child):not(:has(a)):not([style*="text-align"]),
.enneagram-step-page .entry-content p:has(> span:only-child > strong):not(:has(a)):not(:has(> span > strong > span)) {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: var(--color-purple) !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0.35rem !important;
  line-height: 1.35 !important;
}

.enneagram-step-page .entry-content p:has(> strong:only-child):not(:has(a)) strong,
.enneagram-step-page .entry-content p:has(> span:only-child > strong):not(:has(a)) strong,
.enneagram-step-page .entry-content p:has(> span:only-child > strong):not(:has(a)) span {
  color: inherit !important;
  font-size: inherit !important;
  font-family: var(--font-body) !important;
  font-weight: inherit !important;
}

/* ── Reflection questions as standalone <p><em>...</em> ──
 * Some pages use <p><em>Reflection question:</em> "..."</p>
 * instead of <ul><li> — apply the same callout style.        */

.enneagram-step-page .entry-content p:has(> em:first-child) {
  background: rgba(164, 184, 245, 0.14);
  border-left: 3px solid var(--color-periwinkle);
  border-radius: 0 6px 6px 0;
  padding: 10px 16px !important;
  font-style: italic;
  font-size: 1rem !important;
  color: var(--color-slate) !important;
  line-height: 1.6;
  margin-bottom: 0.4rem;
}

.enneagram-step-page .entry-content p:has(> em:first-child) em {
  font-family: var(--font-body) !important;
  font-size: inherit !important;
  color: inherit !important;
}

/* Suppress callout box inside blockquotes — blockquote already has its own styling */
.enneagram-step-page .entry-content blockquote p:has(> em:first-child) {
  background: none !important;
  border-left: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  font-size: inherit !important;
  color: inherit !important;
}

/* ── Table titles (H3 near a table) → large slate blue H2 ─ */

.enneagram-step-page .entry-content h3:has(+ table),
.enneagram-step-page .entry-content h3:has(+ p + table),
.enneagram-step-page .entry-content h3:has(+ p + p + table),
.enneagram-step-page .entry-content h3:has(+ div table),
.enneagram-step-page .entry-content div:has(+ div table) > h3 {
  font-family: var(--font-heading) !important;
  font-size: var(--font-size-2xl) !important;
  font-weight: 700 !important;
  color: var(--color-slate) !important;
  text-align: center !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0.5rem !important;
}

.enneagram-step-page .entry-content h3:has(+ table) span,
.enneagram-step-page .entry-content h3:has(+ table) strong,
.enneagram-step-page .entry-content h3:has(+ p + table) span,
.enneagram-step-page .entry-content h3:has(+ p + table) strong,
.enneagram-step-page .entry-content h3:has(+ p + p + table) span,
.enneagram-step-page .entry-content h3:has(+ p + p + table) strong,
.enneagram-step-page .entry-content h3:has(+ div table) span,
.enneagram-step-page .entry-content h3:has(+ div table) strong,
.enneagram-step-page .entry-content div:has(+ div table) > h3 span,
.enneagram-step-page .entry-content div:has(+ div table) > h3 strong {
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
  font-weight: inherit !important;
}

/* ── Links → purple, italic, not bold ───────────────── */

.enneagram-step-page .entry-content a:not([href*="supercharge"]):not([href*="going-deeper"]) {
  color: var(--color-purple) !important;
  font-size: inherit !important;
  font-weight: normal !important;
  font-family: var(--font-body) !important;
  font-style: italic;
}

.enneagram-step-page .entry-content a:not([href*="supercharge"]):not([href*="going-deeper"]):hover {
  color: var(--color-slate) !important;
}

/* ── Body paragraphs with links — strip bold from surrounding text ── */
/* Paragraphs that have links often wrap all text in <strong> as legacy
   formatting. Un-bold those so only headings carry bold weight.        */

.enneagram-step-page .entry-content p:has(a) strong {
  font-weight: normal !important;
}

/* ── Tables ───────────────────────────────────────────── */

.enneagram-step-page .entry-content table th,
.enneagram-step-page .entry-content thead td,
.enneagram-step-page .entry-content thead tr {
  background-color: #5F6C8F !important;
  color: #ffffff !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
}

.enneagram-step-page .entry-content table th span,
.enneagram-step-page .entry-content table th strong,
.enneagram-step-page .entry-content thead td span,
.enneagram-step-page .entry-content thead td strong {
  color: inherit !important;
  font-size: inherit !important;
}

.enneagram-step-page .entry-content table td {
  font-size: 0.875rem !important;
  line-height: 1.3 !important;
}

.enneagram-step-page .entry-content table td span,
.enneagram-step-page .entry-content table td p,
.enneagram-step-page .entry-content table td strong,
.enneagram-step-page .entry-content table td em {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* ── Hide topmost HR on each step page ───────────────── */

.enneagram-step-page .entry-content hr:first-of-type {
  display: none !important;
}

/* ── Horizontal rules → purple, centered ─────────────── */

.enneagram-step-page .entry-content hr {
  border: none !important;
  border-top: 2px solid var(--color-purple) !important;
  width: 60% !important;
  margin: 1.75rem auto !important;
  opacity: 0.45;
}

/* ── Type Reminder box ───────────────────────────────── */

.enneagram-step-page .entry-content .type-reminder-box {
  background: linear-gradient(135deg, rgba(130,95,215,0.10) 0%, rgba(164,184,245,0.06) 100%);
  border-left: 4px solid var(--color-purple);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin: 1.5rem 0;
}

.enneagram-step-page .entry-content .type-reminder-box p {
  margin: 0;
  color: inherit;
}

/* ── Going Deeper section card ───────────────────────── */

.enneagram-step-page .entry-content p:has(a[href*="going-deeper"]) {
  background: linear-gradient(160deg, var(--color-periwinkle) 0%, var(--color-white) 100%);
  border: 1px solid rgba(130, 95, 215, 0.25);
  border-top: 4px solid var(--color-purple);
  border-radius: 12px;
  padding: 20px 24px 24px 24px;
  margin-top: 0.5rem;
  text-align: center;
  box-shadow: 0 8px 32px rgba(130, 95, 215, 0.12);
}

.enneagram-step-page .entry-content p:has(a[href*="going-deeper"]) strong {
  display: block;
  font-family: var(--font-body) !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: #2D2D2D !important;
  margin-bottom: 10px;
  letter-spacing: 0.01em;
}

/* ── Going Deeper button — purple gradient, distinctive ── */

.enneagram-step-page .entry-content a[href*="going-deeper"] {
  display: inline-block;
  background: linear-gradient(135deg, #1F3A6E 0%, #2C4EA0 100%);
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 14px 40px;
  border-radius: 50px;
  font-family: var(--font-body) !important;
  font-weight: 600;
  font-size: 1rem !important;
  letter-spacing: 0.03em;
  box-shadow: 0 4px 18px rgba(31, 58, 110, 0.3);
  transition: all 0.25s ease;
  margin-top: 4px;
}

.enneagram-step-page .entry-content a[href*="going-deeper"]:hover {
  background: linear-gradient(135deg, var(--color-purple) 0%, #5e3aaa 100%);
  box-shadow: 0 6px 24px rgba(130, 95, 215, 0.45);
  transform: translateY(-2px);
}

/* Hide <br> tags inside the going-deeper link (content artifact) */
.enneagram-step-page .entry-content a[href*="going-deeper"] br {
  display: none;
}

/* ── Blockquote — purple gradient callout ────────────── */

.enneagram-step-page .entry-content blockquote {
  background: linear-gradient(135deg, rgba(130,95,215,0.07) 0%, rgba(164,184,245,0.18) 100%);
  border-left: 4px solid var(--color-purple);
  border-radius: 0 8px 8px 0;
  padding: 14px 20px;
  margin: 1rem 0;
  font-family: var(--font-body) !important;
  font-style: italic;
  color: var(--color-slate) !important;
}

.enneagram-step-page .entry-content blockquote p {
  margin: 0;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  color: inherit !important;
}

/* ── ChatGPT .prose/.markdown wrapper overrides ──────────
 * Step 6 (and similar AI-generated pages) wraps sections
 * in div.markdown.prose — force all enneagram styles to
 * apply inside those wrapper divs.
 * ─────────────────────────────────────────────────────── */

/* Font — all inline elements */
.enneagram-step-page .entry-content [class*="prose"] p,
.enneagram-step-page .entry-content [class*="markdown"] p,
.enneagram-step-page .entry-content [class*="prose"] span,
.enneagram-step-page .entry-content [class*="markdown"] span {
  font-family: var(--font-body) !important;
  font-size: inherit !important;
}

/* Section H3 headings — purple, body size, no box */
.enneagram-step-page .entry-content [class*="prose"] h3,
.enneagram-step-page .entry-content [class*="markdown"] h3 {
  font-family: var(--font-body) !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: var(--color-purple) !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0.35rem !important;
  line-height: 1.35 !important;
  background: none !important;
  border-left: none !important;
  padding: 0 !important;
}

.enneagram-step-page .entry-content [class*="prose"] h3 span,
.enneagram-step-page .entry-content [class*="markdown"] h3 span,
.enneagram-step-page .entry-content [class*="prose"] h3 strong,
.enneagram-step-page .entry-content [class*="markdown"] h3 strong {
  color: inherit !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
}

/* Table title H3s inside prose divs — preserve large centered slate style */
.enneagram-step-page .entry-content [class*="prose"] h3:has(+ table),
.enneagram-step-page .entry-content [class*="markdown"] h3:has(+ table) {
  font-family: var(--font-heading) !important;
  font-size: var(--font-size-2xl) !important;
  color: var(--color-slate) !important;
  text-align: center !important;
}

/* Lists — remove prose default styles, apply enneagram bullet style */
.enneagram-step-page .entry-content [class*="prose"] ul,
.enneagram-step-page .entry-content [class*="markdown"] ul,
.enneagram-step-page .entry-content [class*="prose"] ol,
.enneagram-step-page .entry-content [class*="markdown"] ol {
  list-style: none !important;
  padding: 0 !important;
  margin: 0.6rem 0 !important;
}

.enneagram-step-page .entry-content [class*="prose"] ul li,
.enneagram-step-page .entry-content [class*="markdown"] ul li {
  position: relative !important;
  padding: 3px 0 3px 1.4rem !important;
  font-size: inherit !important;
  color: var(--color-text) !important;
  line-height: 1.6 !important;
  margin-bottom: 0.35rem !important;
  background: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  font-style: normal !important;
}

.enneagram-step-page .entry-content [class*="prose"] ul li::before,
.enneagram-step-page .entry-content [class*="markdown"] ul li::before {
  content: '•' !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--color-purple) !important;
  font-weight: bold !important;
}

.enneagram-step-page .entry-content [class*="prose"] ul li strong,
.enneagram-step-page .entry-content [class*="markdown"] ul li strong {
  font-family: var(--font-body) !important;
  color: var(--color-text) !important;
}

/* Nested ol inside prose ul li */
.enneagram-step-page .entry-content [class*="prose"] ul li ol,
.enneagram-step-page .entry-content [class*="markdown"] ul li ol {
  margin: 0.3rem 0 0.3rem 0 !important;
}

/* ── Mobile ───────────────────────────────────────────── */

@media (max-width: 768px) {
  .enneagram-step-page .entry-content h3:first-of-type {
    font-size: 1.1rem !important;
  }

  .enneagram-step-page .entry-content a[href*="going-deeper"] {
    padding: 13px 28px;
    font-size: 0.95rem !important;
  }

  .enneagram-step-page .entry-content hr {
    width: 80% !important;
  }

  /* Restore table display — mobile.css Fix 1 forces display:block on all
   * .entry-content tables (for homepage layout tables). Override here so
   * step-page data tables stay as actual tables and scroll sideways. */
  .enneagram-step-page .entry-content table {
    display: table !important;
    width: auto !important;
    min-width: 480px;
  }
  .enneagram-step-page .entry-content thead {
    display: table-header-group !important;
  }
  .enneagram-step-page .entry-content tbody {
    display: table-row-group !important;
  }
  .enneagram-step-page .entry-content tr {
    display: table-row !important;
    width: auto !important;
  }
  .enneagram-step-page .entry-content th {
    display: table-cell !important;
    width: auto !important;
  }
  .enneagram-step-page .entry-content td {
    display: table-cell !important;
    width: auto !important;
  }
  /* Scroll wrapper and compact cell sizing */
  .enneagram-step-page .entry-content div[style*="overflow-x"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .enneagram-step-page .entry-content thead th,
  .enneagram-step-page .entry-content tbody td {
    padding: 8px 6px !important;
    font-size: 0.82rem !important;
  }
}