/* ==========================================================================
   The Transformation Advantage -- browsable HTML edition
   Scoped entirely under .wp-root so it can drop into an existing site
   without leaking styles onto the surrounding header/footer/nav.
   Intentionally neutral -- this is a functional pass, not a design pass.
   ========================================================================== */

.wp-root {
  --wp-text: #1a1a1a;
  --wp-muted: #5a6472;
  --wp-border: #dfe2e8;
  --wp-accent: #0e2a55;
  --wp-bg-soft: #f6f7f9;
  --wp-focus: #2563eb;

  color: var(--wp-text);
  line-height: 1.55;
  max-width: 860px;
  margin: 0 auto;
  padding: 1rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.wp-root img { max-width: 100%; height: auto; }

.wp-root ul, .wp-root ol { margin: 0.5rem 0; }
.wp-root ul.wp-sub-indent { margin-left: 1.5rem; }
.wp-root li { margin: 0.15rem 0; }
.wp-root li p { margin: 0.15rem 0; }
.wp-root table li { margin: 0.05rem 0; }
.wp-root table ul, .wp-root table ol { margin: 0.25rem 0; }
.wp-root table td p { margin: 0.15rem 0; }
.wp-root table td p:first-child { margin-top: 0; }
.wp-root table td p:last-child { margin-bottom: 0; }
.wp-root table td p.wp-subbullet { margin-left: 1em; }

.wp-root .wp-cover { text-align: center; padding: 2.5rem 1rem 2rem; margin-bottom: 2rem; border-bottom: 3px solid var(--wp-accent); }
.wp-root .wp-cover-title { margin: 0 0 0.5rem; font-size: 2.2rem; font-weight: 700; color: var(--wp-accent); line-height: 1.15; }
.wp-root .wp-cover-sub { margin: 0 0 1rem; font-size: 1rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp-muted); }
.wp-root .wp-cover-hook { margin: 0 auto; max-width: 620px; font-size: 1.05rem; line-height: 1.5; color: var(--wp-text); }
body.wp-dark .wp-root .wp-cover { border-bottom-color: #FCB600; }
body.wp-dark .wp-root .wp-cover-title { color: #FCB600; }

/* ---- controls bar ------------------------------------------------- */
.wp-root .wp-controls {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fff;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--wp-border);
  margin-bottom: 1.5rem;
}
.wp-root .wp-toggle-all {
  font: inherit;
  color: var(--wp-text);
  font-size: 0.9rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--wp-border);
  border-radius: 999px;
  background: var(--wp-bg-soft);
  cursor: pointer;
}
.wp-root .wp-toggle-all:hover { background: #eef0f4; }

/* ---- TOC / List of Figures / List of Tables ------------------------ */
.wp-root .wp-toc,
.wp-root .wp-lof,
.wp-root .wp-lot {
  border: 1px solid var(--wp-border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.wp-root .wp-toc p, .wp-root .wp-lof p, .wp-root .wp-lot p { margin: 0.25rem 0; }
.wp-root .wp-toc h1, .wp-root .wp-lof h1, .wp-root .wp-lot h1 {
  font-size: 1.1rem;
  margin: 0 0 0.75rem;
}
.wp-root details.wp-section > summary .TOC-Heading { display: inline; margin: 0; }
.wp-root details.wp-toc, .wp-root details.wp-lof, .wp-root details.wp-lot {
  border-left: none;
  padding-left: 0;
}
.wp-root details.wp-toc > summary,
.wp-root details.wp-lof > summary,
.wp-root details.wp-lot > summary { align-items: center; }

/* nested TOC / LOF / LOT entries, and Part groupings within LOF/LOT */
.wp-root .wp-toc-group-label {
  font-weight: 600;
  color: var(--wp-accent);
  margin: 0 !important;
}
.wp-root .wp-toc details.wp-toc-node.wp-toc-level-1 > summary p {
  font-weight: 600;
  color: var(--wp-accent);
  margin: 0 !important;
}
.wp-root details.wp-toc-node > summary { align-items: center; }
.wp-root details.wp-toc-node > summary a { text-decoration: none; }
.wp-root details.wp-toc-node > summary a:hover { text-decoration: underline; }

/* ---- Part titles ----------------------------------------------------- */
.wp-root .wp-part-title {
  font-size: 1.6rem;
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 3px solid var(--wp-accent);
}
.wp-root details.wp-section > summary .wp-part-title { display: inline; border: none; }
.wp-root details.wp-part { border-left: none; padding-left: 0; margin: 1rem 0; }
.wp-root details.wp-part > summary { align-items: center; }

/* ---- collapsible sections -------------------------------------------- */
.wp-root details.wp-section {
  border-left: 2px solid transparent;
  padding-left: 1rem;
  margin: 0.75rem 0;
}
.wp-root details.wp-section > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.25rem 0;
}
.wp-root details.wp-section > summary::-webkit-details-marker { display: none; }
.wp-root details.wp-section > summary::before {
  content: "▸";
  color: var(--wp-muted);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.wp-root details.wp-section[open] > summary::before { transform: rotate(90deg); }
.wp-root details.wp-section > summary h2,
.wp-root details.wp-section > summary h3,
.wp-root details.wp-section > summary h4,
.wp-root details.wp-section > summary h5,
.wp-root details.wp-section > summary h6 { margin: 0; display: inline; }
.wp-root .section-body { padding-top: 0.25rem; }
.wp-root details.wp-level-2 > summary {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #9aa4b5;
  margin-bottom: 0.5rem;
}
body.wp-dark .wp-root details.wp-level-2 > summary { border-bottom-color: #6b7690; }
.wp-root details.wp-level-3 > summary {
  background: #eef1f6;
  padding: 0.4rem 0.6rem;
  margin: 0 -0.6rem;
  border-radius: 4px;
}
body.wp-dark .wp-root details.wp-level-3 > summary { background: #232d42; }

/* never hide keyboard focus -- Design pass should preserve this rule */
.wp-root summary:focus-visible,
.wp-root button:focus-visible,
.wp-root a:focus-visible {
  outline: 2px solid var(--wp-focus);
  outline-offset: 2px;
}

/* ---- pull-quotes --------------------------------------------------------
   Deliberate callout statements from the original document (as opposed to
   regular body copy). Bare functional styling here -- a design pass should
   feel free to replace this entirely, the .wp-pullquote class is the hook. */
.wp-root .wp-pullquote {
  margin: 1.5rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 3px solid var(--wp-accent);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--wp-accent);
}
body.wp-dark .wp-root .wp-pullquote { color: var(--wp-text); border-left-color: #FCB600; }
.wp-root .wp-pullquote p { margin: 0.35rem 0; }

/* ---- figures ----------------------------------------------------------- */
.wp-root figure.wp-figure,
.wp-root p:has(> img) {
  margin: 1.5rem 0;
  text-align: center;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 24px 0;
  box-sizing: border-box;
  background: linear-gradient(to bottom, transparent 0, #FFFFFF 20px, #FFFFFF calc(100% - 20px), transparent 100%);
}
body.wp-dark .wp-root figure.wp-figure,
body.wp-dark .wp-root p:has(> img) {
  background: linear-gradient(to bottom, transparent 0, #E3EAF2 20px, #E3EAF2 calc(100% - 20px), transparent 100%);
}
.wp-root p.wp-icon-plain,
body.wp-dark .wp-root p.wp-icon-plain {
  background: none;
  width: auto;
  max-width: 100%;
  margin: 1.5rem auto;
  padding: 0;
}
.wp-root figure.wp-figure figcaption {
  font-size: 0.9rem;
  color: var(--wp-muted);
  margin-top: 0.5rem;
}
.wp-root p.fig-caption { font-size: 0.9rem; color: var(--wp-muted); text-align: center; }
body.wp-dark .wp-root figure.wp-figure figcaption,
body.wp-dark .wp-root p.fig-caption { color: #0A1730; }

/* ---- tables -------------------------------------------------------------- */
.wp-root p:has(+ .table-scroll) { text-align: center; }
.wp-root .table-scroll {
  overflow-x: auto;
  margin: 1.25rem auto;
  text-align: center;
  border: 1px solid var(--wp-border);
  border-radius: 6px;
}
.wp-root table {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  font-size: 0.92rem;
}
.wp-root table th, .wp-root table td {
  border: 1px solid var(--wp-border);
  padding: 0.5rem 0.65rem;
  text-align: left;
  vertical-align: top;
}
.wp-root table th { background: var(--wp-bg-soft); }
body.wp-dark .wp-root .table-scroll { border-color: #3C5A87; }
body.wp-dark .wp-root table th, body.wp-dark .wp-root table td { border-color: #3C5A87; }

/* ---- cross-reference links --------------------------------------------- */
.wp-root a.xref { color: var(--wp-accent); text-decoration: underline; }
body.wp-dark .wp-root a { color: #FCB600; }
body.wp-dark .wp-root a.xref { color: #FCB600; }
body.wp-dark .wp-root details.wp-toc-node > summary a { color: #FCB600; }
body.wp-dark .wp-root .wp-toc-group-label { color: #FCB600; }
body.wp-dark .wp-root .wp-toc details.wp-toc-node.wp-toc-level-1 > summary p { color: #FCB600; }
.wp-root .wp-hl-red { color: #C00000; }
.wp-root .wp-hl-green { color: #00B050; }
.wp-root .wp-hl-orange { color: #B8860B; }
body.wp-dark .wp-root .wp-hl-red { color: #FF8A80; }
body.wp-dark .wp-root .wp-hl-green { color: #6FE0A0; }
body.wp-dark .wp-root .wp-hl-orange { color: #FFD866; }

/* ---- footnote / endnote markers + popup --------------------------------- */
.wp-root button.note-ref {
  font: inherit;
  vertical-align: super;
  font-size: 0.7em;
  line-height: 0;
  color: var(--wp-accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0.1em;
  text-decoration: underline;
}
.wp-root .wp-endnotes ol { padding-left: 1.5rem; }
.wp-root .wp-endnotes li { margin-bottom: 0.6rem; font-size: 0.92rem; }
.wp-root .footnote-back { margin-left: 0.35rem; text-decoration: none; }

.wp-note-popup {
  position: absolute;
  z-index: 100;
  max-width: 360px;
  background: #fff;
  border: 1px solid var(--wp-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(20, 25, 40, 0.18);
  padding: 0.9rem 1.1rem;
  font-size: 0.88rem;
  line-height: 1.45;
}
.wp-note-popup .wp-note-popup-close {
  position: absolute;
  top: 0.35rem;
  right: 0.4rem;
  border: none;
  background: none;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--wp-muted);
  padding: 0.2rem 0.4rem;
}
.wp-note-popup .wp-note-popup-close:hover { color: var(--wp-text); }
.wp-note-popup p:first-child { margin-top: 0; }
.wp-note-popup p:last-child { margin-bottom: 0; }
.wp-note-popup a { color: var(--wp-accent); }
body.wp-dark .wp-note-popup a { color: #FCB600; }
body.wp-dark .wp-root .wp-endnotes a { color: #FCB600; }

@media (max-width: 480px) {
  .wp-note-popup { max-width: calc(100vw - 2rem); }
}