/* GitHub-style anchor links on headings, with no JavaScript.
 *
 * The whole heading text is wrapped server-side in an in-page link to the
 * heading's own id, so the entire heading is clickable and deep links work.
 * The link looks like plain heading text; the "#" affordance is drawn as a
 * ::before hung into the left gutter (so revealing it does not shift the text)
 * and inherits the link colour, so it matches the heading.
 */

.heading-anchor {
  color: inherit;
  text-decoration: none;
}

/* The "#" hangs in the left gutter: an inline-block (so it stays on the
 * heading's baseline) two characters wide, pulled two characters left. The
 * first cell holds the "#" and the second is the gap, so the gutter is a
 * consistent width in the character grid for every heading level. */
.heading-anchor::before {
  content: "#";
  display: inline-block;
  width: 2ch;
  margin-left: -2ch;
  opacity: 0;
  font-weight: normal;
  transition: opacity 0.15s ease-in-out;
}

h2:hover > .heading-anchor::before,
h3:hover > .heading-anchor::before,
h4:hover > .heading-anchor::before,
h5:hover > .heading-anchor::before,
h6:hover > .heading-anchor::before,
.heading-anchor:hover::before {
  opacity: 1;
}

/* The negative-margin gutter only exists on wider viewports. On narrow screens
 * there is no gutter to hang into (and hover is not a real affordance), so
 * hide the "#" rather than let it spill off the left edge. Below Bulma's
 * tablet breakpoint (769px). */
@media screen and (max-width: 768px) {
  .heading-anchor::before {
    display: none;
  }
}