/* Drake KB — right-rail region (Table Of Contents).
 * Targets real BetterDocs markup confirmed on
 * http://localhost:8090/kb/Banking/10763.htm:
 *   .betterdocs-toc.collapsible-sm.toc-list-number  (panel)
 *     .toc-title                                    (heading + collapse arrows)
 *     ul.toc-list.betterdocs-hierarchial-toc > li > a  (anchor links)
 *   .sticky-toc-block-wrapper .sticky-toc-container  (floating/sticky variant)
 *     .close-toc
 */

/* Panel */
.betterdocs-toc {
  background-color: var(--drake-bg-alt);
  border: 1px solid var(--drake-line);
  border-radius: 4px;
  padding: 18px 20px;
  font-family: var(--drake-font);
}

/* Heading */
.betterdocs-toc .toc-title {
  color: var(--drake-ink);
  font-family: var(--drake-font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--drake-blue);
}

.betterdocs-toc .toc-title svg.angle-icon {
  color: var(--drake-blue);
}

/* List */
.betterdocs-toc ul.toc-list {
  padding: 0;
  margin: 0;
}

.betterdocs-toc .toc-list.betterdocs-hierarchial-toc {
  padding-left: 0;
}

.betterdocs-toc .toc-list li {
  display: block;
  border-bottom: 1px solid var(--drake-line);
}

.betterdocs-toc .toc-list li:last-child {
  border-bottom: none;
}

/* Links */
.betterdocs-toc .toc-list li a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 9px 4px;
  color: var(--drake-blue);
  font-family: var(--drake-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  transition: color .15s ease-in-out, background-color .15s ease-in-out;
}

.betterdocs-toc.toc-list-number ul li a::before {
  color: var(--drake-blue);
  font-weight: 700;
  margin-right: 6px;
}

.betterdocs-toc .toc-list li a:hover,
.betterdocs-toc .toc-list li a:focus {
  color: var(--drake-blue-dark);
  background-color: var(--drake-blue-tint);
  text-decoration: underline;
}

/* Current section */
.betterdocs-toc .toc-list li a.active {
  color: var(--drake-blue-dark);
  background-color: var(--drake-blue-tint);
  font-weight: 700;
  border-radius: 3px;
}

.betterdocs-toc.toc-list-number ul li a.active::before {
  color: var(--drake-blue-dark);
}

/* ── Right column layout ────────────────────────────────────────────────
 * right-rail.php filters the_content to wrap the article body + a right
 * <aside class="drake-right-rail"> in this 2-column flex. The aside holds the
 * CTA pills (top) then the in-article section-navigator card. On narrow
 * viewports it collapses to a single column (rail below the article). */
.drake-doc-layout {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.drake-doc-main {
  flex: 1 1 auto;
  min-width: 0;
}

.drake-right-rail {
  flex: 0 0 240px;
  width: 240px;
  position: sticky;
  top: 24px;
  align-self: flex-start;
}

@media (max-width: 900px) {
  .drake-doc-layout {
    flex-direction: column;
  }
  .drake-right-rail {
    flex-basis: auto;
    width: 100%;
    position: static;
  }
}

/* Drake marketing CTA pills — rendered at the TOP of the right column via
 * mu-plugins/drake-brand/right-rail.php, ONLY on pages whose source had them
 * (drake_has_cta post meta). Rounded solid Drake-blue pills, stacked. */
.drake-cta-pills {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 20px;
}

.drake-cta {
  display: block;
  background-color: var(--drake-blue);
  color: #fff !important;
  font-family: var(--drake-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-decoration: none !important;
  border-radius: 999px;
  padding: 14px 22px;
  transition: background-color .15s ease-in-out, transform .15s ease-in-out;
}

.drake-cta:hover,
.drake-cta:focus {
  background-color: var(--drake-blue-dark);
  transform: scale(1.02);
  color: #fff !important;
}

/* ── In-article section navigator ───────────────────────────────────────
 * Built in PHP from the article's <h2> headings. Card with a blue left
 * border, the post title as a bold blue heading, then centered blue
 * jump-links to each section (#anchor) separated by thin rules. */
.drake-section-nav {
  background-color: var(--drake-bg-alt);
  border: 1px solid var(--drake-line);
  border-left: 4px solid var(--drake-blue);
  border-radius: 4px;
  padding: 16px 18px;
  font-family: var(--drake-font);
}

.drake-section-nav .drake-sn-title {
  margin: 0 0 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--drake-blue);
  /* --drake-blue is 4.41:1 on --drake-bg-alt, just under WCAG AA's 4.5:1 for
   * body-size text. The darker brand blue is 6.18:1 and visually near-identical.
   * The border above keeps the primary blue: WCAG contrast applies to text. */
  color: var(--drake-blue-dark, #155e97);
  font-family: var(--drake-font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.drake-section-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.drake-section-nav li {
  border-bottom: 1px solid #edf0f3;
}

.drake-section-nav li:last-child {
  border-bottom: none;
}

.drake-section-nav li a {
  display: block;
  padding: 5px 4px;
  /* Darker brand blue for the same reason as .drake-sn-title above: the panel
   * sits on --drake-bg-alt, where --drake-blue is 4.41:1 against AA's 4.5:1. */
  color: var(--drake-blue-dark, #155e97);
  font-family: var(--drake-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  transition: color .15s ease-in-out, background-color .15s ease-in-out;
}

.drake-section-nav li a:hover,
.drake-section-nav li a:focus {
  color: var(--drake-blue-dark);
  background-color: var(--drake-blue-tint);
  text-decoration: underline;
}

/* Nested H3/H4 links (drake-kb-section-nav.php) */
.drake-section-nav > ul > li > a {
  text-align: left;
}
.drake-section-nav ul ul {
  margin: 0;
  padding: 0 0 0 14px;
}
.drake-section-nav ul ul li a {
  text-align: left;
  font-size: 13px;
  padding: 4px 4px;
}
.drake-section-nav ul ul ul li a {
  font-size: 12px;
}

/* ── Topic toolbar ──────────────────────────────────────────────────────
 * Row of four small square icon buttons rendered by right-rail.php directly
 * BELOW the section-nav card: previous topic, next topic, print, expand-all.
 * Mixed element types (<a> for the nav links, <button> for print/expand) all
 * share .drake-rt-btn, so the button reset below has to neutralize UA styles
 * for both. Glyphs are inline SVG on currentColor. */
.drake-rail-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
}

.drake-rail-toolbar .drake-rt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  background-color: var(--drake-bg-alt);
  border: 1px solid var(--drake-line);
  border-radius: 4px;
  color: var(--drake-gray);
  font-family: var(--drake-font);
  line-height: 1;
  text-decoration: none !important;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .15s ease-in-out, color .15s ease-in-out,
              border-color .15s ease-in-out;
}

.drake-rail-toolbar .drake-rt-btn .drake-rt-icon {
  display: block;
  width: 18px;
  height: 18px;
  pointer-events: none;
}

.drake-rail-toolbar a.drake-rt-btn:hover,
.drake-rail-toolbar a.drake-rt-btn:focus,
.drake-rail-toolbar button.drake-rt-btn:hover,
.drake-rail-toolbar button.drake-rt-btn:focus {
  background-color: #e4e8ec;
  border-color: var(--drake-blue);
  color: var(--drake-blue);
}

.drake-rail-toolbar .drake-rt-btn:focus-visible {
  outline: 2px solid var(--drake-blue);
  outline-offset: 1px;
}

/* No adjacent doc — greyed out, not clickable (matches the source KB, which
 * shows disabled arrows rather than omitting them). */
.drake-rail-toolbar .drake-rt-btn.is-disabled {
  opacity: .4;
  cursor: default;
  pointer-events: none;
  background-color: var(--drake-bg-alt);
  border-color: var(--drake-line);
  color: var(--drake-gray);
}

/* Expand-all button carries BOTH glyphs; data-expanded picks which shows. */
.drake-rail-toolbar .drake-rt-toggle .drake-rt-ico-collapse,
.drake-rail-toolbar .drake-rt-toggle[data-expanded="1"] .drake-rt-ico-expand {
  display: none;
}

.drake-rail-toolbar .drake-rt-toggle[data-expanded="1"] .drake-rt-ico-collapse {
  display: block;
}

.drake-rail-toolbar .drake-rt-toggle[data-expanded="1"] {
  border-color: var(--drake-blue);
  color: var(--drake-blue);
}

/* The toolbar is on-screen chrome only. */
@media print {
  .drake-rail-toolbar { display: none; }
}

/* Hide the empty sticky-TOC shell.
 *
 * BetterDocs' sidebar block emits `.sticky-toc-block-wrapper > .sticky-toc-container`
 * unconditionally, even when the TOC itself is switched off — so with
 * betterdocs_settings.enable_toc = false (our setting; Drake uses the right-rail
 * section nav instead) the wrapper still renders, containing nothing but its ✕
 * close button. That draws a stray empty white box under the left rail.
 *
 * :not(:has()) keeps this narrow: the box is only hidden while it holds no TOC, so
 * if enable_toc is ever turned back on the styling below still applies. Browsers
 * without :has() support simply keep the current (visible) behaviour.
 */
.sticky-toc-block-wrapper:not(:has(.betterdocs-toc)) {
  display: none;
}

/* Sticky / floating TOC (mobile + scroll-follow variant) */
.sticky-toc-container {
  background-color: var(--drake-bg);
}

.sticky-toc-container .betterdocs-toc {
  background-color: var(--drake-bg-alt);
  border: 1px solid var(--drake-line);
}

.sticky-toc-container .close-toc svg path {
  fill: var(--drake-gray);
}

.sticky-toc-container .close-toc:hover svg path {
  fill: var(--drake-blue);
}