/*
 * Scoped CSS overrides for the /strategy/[slug] template only.
 * Loaded AFTER webflow-page-strategy-template.css so cascade order wins.
 * Every rule MUST be scoped under classes unique to this page to prevent
 * leakage to other pages sharing the same CSS load path.
 */

/* ─────────────────────────────────────────────────────────────────────────
 * Pin link colors INSIDE rich-text content blocks only.
 *
 * Browser default `a:link { color: blue; text-decoration: underline }` beats
 * webflow-styleguide's `color: inherit` on specificity. We must NOT target
 * `.strategy-content-wrapper a` blanket — that destroys button text colors.
 * Only target plain anchors inside rich text wrappers + specific text rows.
 * ─────────────────────────────────────────────────────────────────────── */

/* Non-rich-text links (sidebar nav, step description) — inherit parent color */
.main-wrapper .strategy-step-desc a:link,
.main-wrapper .strategy-step-desc a:visited,
.main-wrapper .strategy-nav-link:link,
.main-wrapper .strategy-nav-link:visited {
  color: inherit;
  text-decoration: inherit;
}

/* Rich-text body links — brand blue, no underline by default, underline on hover */
.main-wrapper .book-summary a:link,
.main-wrapper .book-summary a:visited,
.main-wrapper .description-rich-block a:link,
.main-wrapper .description-rich-block a:visited,
.main-wrapper .benefits-rich-list a:link,
.main-wrapper .benefits-rich-list a:visited {
  color: #1239ff;
  text-decoration: none;
}
.main-wrapper .book-summary a:hover,
.main-wrapper .description-rich-block a:hover,
.main-wrapper .benefits-rich-list a:hover {
  color: #1239ff;
  text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Run Prompt button — remove default anchor underline on the button text.
 * Production resets this via global styleguide, but our browser-default
 * underline creeps in when we don't have a matching blanket override.
 * ─────────────────────────────────────────────────────────────────────── */
.main-wrapper .ai-prompt-button,
.main-wrapper .ai-prompt-button:link,
.main-wrapper .ai-prompt-button:visited,
.main-wrapper .ai-prompt-button:hover {
  text-decoration: none;
}

/* ─────────────────────────────────────────────────────────────────────────
 * .ai-prompt.linear-border-box-custom — gradient-border box.
 *
 * Uses the double-background trick: an inner solid fill (padding-box) over
 * a gradient (border-box), with a 1px transparent border letting the
 * gradient show through as a "border". Values pulled from production
 * computed style verbatim.
 * ─────────────────────────────────────────────────────────────────────── */
.main-wrapper .ai-prompt.linear-border-box-custom {
  background-image:
    linear-gradient(#f6faff, #f6faff),
    linear-gradient(179deg, #fc00ff 0%, #00b6de 100%);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  border: 1px solid transparent;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Scorecard wrap must be the positioning context for .image-128 and
 * .image-keep-st (both are position: absolute in the production page CSS).
 * Without this they anchor to the next positioned ancestor (page root).
 * ─────────────────────────────────────────────────────────────────────── */
.main-wrapper .acc-scorecard-wrap {
  position: relative;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Sticky sidebar (siblings list + TOC).
 * Only applies when the strategy-content-wrapper is in row layout.
 * Production CSS already sets `.book-sidebar { position: sticky; top: 150px }`
 * and flips it to static at max-width: 991px. We only need to add
 * align-self + max-height so the TOC scrolls internally on desktop.
 * ─────────────────────────────────────────────────────────────────────── */
@media screen and (min-width: 992px) {
  .main-wrapper .book-sidebar {
    align-self: flex-start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Read tab — TOC sidebar styling
 * ─────────────────────────────────────────────────────────────────────── */
.main-wrapper #book-navigation .strategy-toc {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.75rem;
}

.main-wrapper #book-navigation .strategy-toc-link {
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: #4b5563;
  border-left: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease,
    background-color 0.15s ease;
}

.main-wrapper #book-navigation .strategy-toc-link:hover {
  color: #1239ff;
  border-left-color: #1239ff;
  background-color: #f0f4ff;
}

.main-wrapper #book-navigation .strategy-toc-empty {
  padding: 0.75rem;
  color: #9ca3af;
  font-size: 0.875rem;
  font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Tab fade transitions
 * ─────────────────────────────────────────────────────────────────────── */
.main-content .fade-block {
  transition: opacity 0.2s ease-in-out;
}
.main-content .fade-block.show {
  opacity: 1;
}