/* ===== Surrender School — Going Deeper Pages =====
 * Body class: .going-deeper-page
 * Applied to all pages with "going-deeper" in slug.
 * Distinct from regular enneagram step pages — signals
 * deeper, returning-participant content.
 * ================================================= */

/* ── Page background — cool blue tint ── */
.going-deeper-page #page,
.going-deeper-page #content,
.going-deeper-page .site-content {
  background: #EEF4FF;
}

/* ── Font normalization ── */
.going-deeper-page .entry-content p,
.going-deeper-page .entry-content li,
.going-deeper-page .entry-content span,
.going-deeper-page .entry-content td,
.going-deeper-page .entry-content th {
  font-family: var(--font-body) !important;
}

.going-deeper-page .entry-content p span {
  font-size: inherit !important;
}

/* ── Collapse empty spacer paragraphs ── */
.going-deeper-page .entry-content p:empty {
  display: none;
}

/* ── Hide stray <br> tags inside links ── */
.going-deeper-page .entry-content a br {
  display: none;
}

/* ── Depth badge — top of content area ── */
.going-deeper-page .entry-content::before {
  content: '⬇  Going Deeper  ⬇';
  display: block;
  background: linear-gradient(135deg, #1F3A6E 0%, #2C4EA0 100%);
  color: #A4B8F5;
  text-align: center;
  font-family: var(--font-body) !important;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 10px 0;
  margin-bottom: 20px;
  border-radius: 6px;
}

/* ── Back to Supercharge — small navy pill ── */
.going-deeper-page .entry-content a[href*="supercharge"] {
  display: inline-block;
  background: #1F3A6E;
  color: #ffffff !important;
  text-decoration: none !important;
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  font-weight: 500;
  padding: 6px 18px;
  border-radius: 20px;
  letter-spacing: 0.02em;
  transition: background 0.2s ease;
}
.going-deeper-page .entry-content a[href*="supercharge"]:hover {
  background: #825FD7;
}

/* ── Type image — circular navy frame ── */
.going-deeper-page .entry-content img.aligncenter {
  border-radius: 50%;
  border: 4px solid #1F3A6E;
  box-shadow: 0 6px 24px rgba(31, 58, 110, 0.22);
  margin-top: 8px;
}

/* ── Main content card ── */
.going-deeper-page .entry-content > div[style] {
  background: #ffffff !important;
  border: none !important;
  border-top: 6px solid #1F3A6E !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 40px rgba(31, 58, 110, 0.14) !important;
}

/* ── Going Deeper title H3 (first in card) ── */
.going-deeper-page .entry-content > div > h3:first-child {
  background: linear-gradient(135deg, #1F3A6E 0%, #2C4EA0 65%, #5F6C8F 100%);
  color: #ffffff !important;
  padding: 22px 28px !important;
  border-radius: 6px;
  margin-top: 0 !important;
  margin-bottom: 24px !important;
  text-align: center !important;
  letter-spacing: 0.04em;
  font-family: var(--font-body) !important;
  font-size: 1.1rem !important;
}
.going-deeper-page .entry-content > div > h3:first-child span,
.going-deeper-page .entry-content > div > h3:first-child strong {
  color: #A4B8F5 !important;
  font-size: inherit !important;
}

/* ── Section H3 headings ── */
.going-deeper-page .entry-content > div h3:not(:first-child) {
  color: #1F3A6E !important;
  font-family: var(--font-body) !important;
  font-weight: 700;
  font-size: 1.05rem !important;
  border-left: 4px solid #825FD7;
  padding-left: 12px;
  margin-top: 28px;
  margin-bottom: 10px;
}
.going-deeper-page .entry-content > div h3:not(:first-child) span {
  color: inherit !important;
  font-size: inherit !important;
}

/* ── "Aim:" / "Gentle reminder:" bold labels — navy ── */
.going-deeper-page .entry-content p > strong:first-child {
  color: #1F3A6E;
}

/* ── HR dividers — soft gradient line ── */
.going-deeper-page .entry-content hr {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(31, 58, 110, 0.28),
    transparent
  ) !important;
  margin: 28px auto !important;
  width: 85% !important;
}

/* ── Tables ── */
.going-deeper-page .entry-content table {
  border-radius: 8px !important;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(31, 58, 110, 0.1) !important;
  border: none !important;
}

/* Override global.css #8aadd4 → slate; replace with deep navy */
.going-deeper-page .entry-content [style*="background-color: #8aadd4"],
.going-deeper-page .entry-content thead tr {
  background: linear-gradient(135deg, #1F3A6E 0%, #2C4EA0 100%) !important;
  color: #ffffff !important;
}
.going-deeper-page .entry-content thead th {
  background: transparent !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  font-family: var(--font-body) !important;
  font-weight: 600;
}
.going-deeper-page .entry-content tbody td {
  border-color: #D6E0F0 !important;
  font-family: var(--font-body) !important;
}
.going-deeper-page .entry-content tbody tr:nth-child(even) td {
  background-color: #F0F5FF !important;
}

/* ── Return to Step page — large gradient pill button ── */
.going-deeper-page .entry-content a[href*="enneagram-type-"] {
  display: inline-block;
  background: linear-gradient(135deg, #1F3A6E 0%, #825FD7 100%);
  color: #ffffff !important;
  text-decoration: none !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  font-weight: 600;
  padding: 14px 40px;
  border-radius: 50px;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 20px rgba(31, 58, 110, 0.3);
  transition: all 0.25s ease;
}
.going-deeper-page .entry-content a[href*="enneagram-type-"]:hover {
  background: linear-gradient(135deg, #825FD7 0%, #1F3A6E 100%);
  box-shadow: 0 6px 28px rgba(130, 95, 215, 0.4);
  transform: translateY(-2px);
}

/* ── Mobile ── */
@media (max-width: 767px) {
  .going-deeper-page .entry-content > div[style] {
    padding: 20px 18px !important;
  }
  .going-deeper-page .entry-content > div > h3:first-child {
    padding: 16px 18px !important;
    font-size: 1rem !important;
  }
  .going-deeper-page .entry-content a[href*="enneagram-type-"] {
    padding: 12px 28px;
    font-size: 0.95rem !important;
  }

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