/**
 * root Design System - documentation styles: heading anchors
 *
 * Linked by `scripts/_docs-shell.mjs` on every page. The clickable-heading affordance
 * `scripts/_docs-shell.mjs` wraps every `h2`/`h3` in (ADR-029). Same constraints as the
 * rest of the shell: zero CSS classes - element, `[data-part]` and attribute selectors
 * only - zero inline styles, and every value a root foundation token.
 */

/* The link wraps the heading, so it must not look like a link: no underline, the prose's
   own color, and nothing beside the title until the reader goes looking. */
[data-part="heading-anchor"] {
  text-decoration: none;

  display: block;
  color: inherit;

  /* The affordance. Absent rather than transparent would take the glyph out of the line box
     and shift the title as it appears, so it is drawn and hidden. */
  :is(h2, h3)::after {
    /* biome-ignore lint/a11y/useGenericFontNames: declared by the foundations' font-face */
    font-family: "root-icons";
    content: "\e975"; /* link-simple */
    margin-inline-start: var(--root-s--2xs);
    /* Two steps down from the heading it marks, not from the base: the glyph is punctuation on
       an `h2` and on an `h3`, and those are two different sizes. */
    font-size: calc(1em / pow(var(--root-t--ratio), 2));
    font-weight: 400;
    color: light-dark(var(--root-c--default-400--light), var(--root-c--default-300--dark));
    opacity: 0;
    vertical-align: middle;
  }

  &:focus-visible {
    outline: var(--root-f--outline-width) solid
      light-dark(var(--root-c--default-400--light), var(--root-c--default-300--dark));
    outline-offset: var(--root-f--outline-offset);
    border-radius: var(--root-r--3xs);
  }
}

[data-part="heading-anchor"]:hover :is(h2, h3)::after,
[data-part="heading-anchor"]:focus-visible :is(h2, h3)::after {
  opacity: 1;
}

/* The scroller is `main`, so an anchor lands the heading at the very top of the column
   with nothing above it. A little room reads as a section starting rather than as a page
   cut off. */
[data-part="heading-anchor"] {
  scroll-margin-block-start: var(--root-s--xl);
}