/*
 * paragraph-toc.css — Page table-of-contents paragraph (Bucket C #2, 2026-05-19).
 *
 * Pairs with paragraph--page-toc.html.twig and js/paragraph-toc.js. The JS
 * hydrates the <ol> at runtime by scanning surrounding headings; CSS here
 * styles the card chrome + list density + sticky variant.
 *
 * Sticky behavior caveat: `position: sticky` requires that no ancestor in
 * the chain has `overflow: hidden` (see feedback_stop_iterating_when_signal_
 * says_deeper.md from Bucket B). On the standard article layout the chain
 * is `.article-body > .field--name-field-content > .field__item > aside.para`
 * which is clear — confirmed in dev. If a future container introduces
 * overflow:hidden, the TOC stays in flow gracefully (no broken layout, just
 * loses follow-on-scroll).
 */

.para--page-toc {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem 1.1rem;
  background: color-mix(in srgb, var(--color-primary, #01491f) 4%, #fff);
  border-left: 4px solid var(--color-primary, #01491f);
  border-radius: 0 0.5rem 0.5rem 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  font-size: 0.95rem;
  line-height: 1.45;
}

.para-toc__heading {
  margin: 0 0 0.6rem;
  padding: 0;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary, #01491f);
  border: none;
}

.para-toc__list {
  list-style: decimal inside;
  margin: 0;
  padding: 0;
  counter-reset: para-toc-h2;
}

/* Top-level (H2) items */
.para-toc__list > li {
  margin: 0.25rem 0;
}

.para-toc__list > li > a {
  color: var(--color-link, #0c5a92);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.para-toc__list > li > a:hover,
.para-toc__list > li > a:focus {
  text-decoration-thickness: 2px;
  color: var(--color-link-hover, var(--color-primary, #01491f));
}

/* Nested (H3) items when mode = h2-h3 */
.para-toc__sublist {
  list-style: lower-alpha inside;
  margin: 0.15rem 0 0.35rem 1.25rem;
  padding: 0;
}

.para-toc__sublist > li {
  margin: 0.1rem 0;
}

.para-toc__sublist > li > a {
  color: var(--color-link, #0c5a92);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  font-size: 0.92em;
}

.para-toc__sublist > li > a:hover,
.para-toc__sublist > li > a:focus {
  text-decoration-thickness: 2px;
  color: var(--color-link-hover, var(--color-primary, #01491f));
}

.para-toc__noscript {
  margin: 0;
  font-style: italic;
  color: #555;
}

/* Sticky variant — opts in when editor flips the field on, AND viewport is
 * wide enough for it to make sense, AND user hasn't asked for reduced motion
 * (we don't ALSO use smooth scrolling for sticky; reduced-motion still gets
 * the sticky positioning — only smooth-scroll is disabled in JS).
 */
/* Compact side-rail (feedback #24). The old sticky TOC was a full-width block
 * pinned to the top, up to 100vh tall — it took over the screen, and other
 * pinned elements (sticky table headers, callout badges) collided with it.
 *
 * Now, on wide screens, the article body becomes a two-column grid: content in
 * a wide left column, and the TOC docked as a narrow, height-capped rail in a
 * right column that spans the full height so the sticky TOC follows the scroll.
 * A real grid column (not a float) means content and the rail never overlap and
 * there is no float clearing to leave gaps. Scoped via :has() so ONLY an
 * article that actually carries a sticky TOC gets the two-column treatment. */
@media (min-width: 1024px) {
  /* The article body wraps each paragraph in a class-less <div>; the class-less
   * container holding all those wrappers becomes the two-column grid when it
   * carries a sticky TOC. Identified via the wrapper→TOC :has() pattern (that
   * grandchild shape is unique to the container). */
  .article-body :has(> * > .para--page-toc--sticky) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    column-gap: 2.5rem;
    align-items: start;
  }
  /* Everything sits in the wide content column by default … */
  .article-body :has(> * > .para--page-toc--sticky) > * {
    grid-column: 1;
    min-width: 0;
  }
  /* … except the TOC's wrapper, which takes the rail column and spans every
   * row so the sticky element inside has the full body height to travel. */
  .article-body :has(> * > .para--page-toc--sticky) > :has(> .para--page-toc--sticky) {
    grid-column: 2;
    grid-row: 1 / span 9999;
    /* Stretch the (invisible) wrapper to the full column height so the sticky
     * TOC inside has room to travel the whole scroll — overrides align-items:
     * start on the grid. */
    align-self: stretch;
  }
  .para--page-toc--sticky {
    position: sticky;
    top: 1rem;
    max-height: 40vh;
    overflow-y: auto;
    z-index: 5; /* above sticky table headers (z-index: 1) so it never hides */
  }
}

/* Narrower viewports: no room for a rail — single column, TOC in normal flow
 * (the base .para--page-toc rules apply; no pin, no cap). */
@media (max-width: 1023px) {
  .para--page-toc--sticky {
    position: static;
    max-height: none;
  }
}

/* Print — no need to show the TOC in print output; the document itself
 * carries the headings, and the in-page anchors don't function on paper. */
@media print {
  .para--page-toc {
    display: none;
  }
}

/* Highlight current section while reading (JS toggles .is-current) */
.para-toc__list .is-current > a,
.para-toc__sublist .is-current > a {
  font-weight: 700;
  background: color-mix(in srgb, var(--color-accent, #f5a623) 18%, transparent);
  border-radius: 0.25rem;
  padding: 0 0.2rem;
}

/* High-contrast mode */
@media (forced-colors: active) {
  .para--page-toc {
    border-left: 4px solid CanvasText;
    background: Canvas;
  }
  .para-toc__heading {
    color: CanvasText;
  }
}

/* ── Page-TOC "collapse into accordion" toggle (field_para_toc_collapsible) ── */
.para--page-toc--accordion { display: block; }
.para--page-toc--accordion > summary.para-toc__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
}
.para--page-toc--accordion > summary.para-toc__summary::-webkit-details-marker { display: none; }
.para--page-toc--accordion > summary.para-toc__summary::after {
  content: '';
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex: none;
  opacity: 0.7;
}
.para--page-toc--accordion[open] > summary.para-toc__summary::after { transform: rotate(-135deg); }
.para--page-toc--accordion > .para-toc__list { margin-top: 0.85rem; margin-bottom: 0; }