/* Deliberate fixes over the live-site CSS. Each rule documents the bug it fixes.
   Loaded last on affected routes so it wins the cascade. */

/* Live-site bug (reported by Lawmence 2026-07-08): the blog post table of
   contents is position:sticky (top:120px, z-index:999) inside a full-width
   text column, so it floats over the article text while scrolling.
   Keep it in flow at its natural position instead. Since 2026-07-27 this
   applies below 1200px only — on desktop the ToC is a proper sticky left
   rail (rules below). */
@media (max-width: 1199px) {
  #brxe-otticj {
    position: static;
  }
}

/* Lawmence 2026-07-27: sticky table-of-contents rail on the left of the
   article (like the Lawnise blog layout). Desktop-only: the body section
   becomes a 3-track grid whose middle track is the existing 60ch article
   column, and the ToC moves into the left gutter as an always-open sticky
   card. Below 1200px the original collapsible ToC bar is unchanged. */
@media (min-width: 1200px) {
  .fr-blog-post-delta__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(var(--article-width, 60ch), 100%) minmax(0, 1fr);
    justify-items: start;
  }
  .fr-blog-post-delta__body > .fr-blog-post-delta__featured-image {
    grid-column: 2;
    grid-row: 1;
  }
  .fr-blog-post-delta__body > .brxe-post-content {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
  }
  .fr-blog-post-delta__body > #brxe-otticj.brxe-fr-table-of-contents {
    grid-column: 1;
    grid-row: 2;
    justify-self: end;
    align-self: start;
    position: sticky;
    top: 130px;
    /* Below the sticky header (z-index 998): the live-site CSS gives the ToC
       z-index 999, which made the card paint OVER the blue header while
       scrolling out at the end of the article. */
    z-index: 1;
    width: min(320px, calc(100% - 56px));
    margin-right: 32px;
    background: #fff;
    border: 1px solid #e1e8f8;
    border-radius: 12px;
    padding: 22px 22px 24px;
  }
  /* Always open on desktop: beat the accordion script's inline max-height
     and the widget CSS's collapsed-state visibility:hidden. */
  .brxe-fr-table-of-contents .fr-toc__body {
    max-height: none !important;
    overflow: visible;
    visibility: visible !important;
  }
  /* The header keeps its accordion-bar styling (primary background, white
     text) from the theme; restyle as a plain card heading. */
  .brxe-fr-table-of-contents .fr-toc__header {
    pointer-events: none;
    background: none !important;
    color: #14213d !important;
    padding: 0 !important;
  }
  .brxe-fr-table-of-contents .fr-toc__icon {
    display: none;
  }
  .brxe-fr-table-of-contents h4.fr-toc__heading {
    font-size: 16px;
    font-weight: 700;
    color: #14213d !important;
  }
  .brxe-fr-table-of-contents .fr-toc__body,
  .brxe-fr-table-of-contents .fr-toc__list-wrapper {
    background: transparent !important;
  }

  .brxe-fr-table-of-contents .fr-toc__list-wrapper {
    margin-top: 14px;
    max-height: calc(100vh - 320px);
    overflow-y: auto;
  }
  .brxe-fr-table-of-contents .fr-toc__list-link {
    font-size: 14px;
    line-height: 1.45;
    padding: 5px 0;
    color: #5a6478;
    text-align: left;
  }
  .brxe-fr-table-of-contents .fr-toc__list-link:hover {
    color: #14319c;
  }
  .brxe-fr-table-of-contents .fr-toc__list-link--active {
    color: #14319c;
    font-weight: 600;
  }
}

/* Lawmence 2026-07-27: no decimal/letter counters in the table of contents
   at any width — plain labels read cleaner, and the article's own step
   headings already carry their numbers. */
.brxe-fr-table-of-contents .fr-toc__list-link::before {
  content: none !important;
}

/* Team request 2026-07-15: .fr-toc__heading changed from <span> to <h4> for
   heading semantics. Neutralize the browser's default h4 styling so the
   rendering stays identical to the original span. */
h4.fr-toc__heading {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}