/* Tufte-style Sidenotes */

/* Counter for automatic numbering */
article.post {
  counter-reset: sidenote-counter;
}

/* Wrapper keeps elements together inline */
.sidenote-wrapper {
  display: inline;
}

/* The sidenote number (superscript in text) */
.sidenote-number {
  counter-increment: sidenote-counter;
  cursor: pointer;
}

.sidenote-number::after {
  content: counter(sidenote-counter);
  font-size: 0.75em;
  position: relative;
  top: -0.5em;
  left: 0.1em;
  color: var(--primary-color);
}

/* Hide the checkbox toggle */
.sidenote-toggle {
  display: none;
}

/* The sidenote content - float left with clear to prevent overlap */
/* Uses calc() to dynamically fill available left margin space, capped at 320px */
.sidenote {
  float: left;
  clear: left;
  margin-bottom: 0.5em;
  font-size: 0.85em;
  line-height: 1.4;
  color: var(--muted-color);
  text-align: right;

  --extra-indent: 0px;
  --wrapper-width: var(--small-screen-threshold);

  --space-left: min(
    calc((100vw - var(--wrapper-width)) / 2 + var(--post-margin-left)),
    var(--max-sidenote-width)
  );
  width: calc(var(--space-left) - 60px);
  margin-left: calc(-1 * var(--space-left) + -1 * var(--extra-indent) + 25px);
}

/* Fix alignment when sidenote is inside indented content */
blockquote .sidenote,
li .sidenote {
  --extra-indent: 40px;
}

/* max-width changes to */
@media (min-width: 1152px) {
  .sidenote {
    --wrapper-width: var(--wrapper-max-width);
  }
}

/* Sidenote number prefix in the margin */
.sidenote::before {
  content: counter(sidenote-counter) ". ";
  color: var(--primary-color);
}

/* Links in sidenotes */
.sidenote a {
  color: var(--muted-color);
  text-decoration: underline;
}

.sidenote a:hover {
  color: var(--primary-color);
}

/* Scale down KaTeX math in sidenotes */
.sidenote .katex {
  font-size: 0.85em;
}

/* Mobile and summarized: show sidenotes inline when toggled */
@media (max-width: 768px) {
  .sidenote {
    display: none;
    float: none;
    width: auto;
    text-align: left;
    margin: 0.5em 0 0.5em 1em;
    padding: 0.5em;
    background-color: var(--menu-background-color);
    border-left: 3px solid var(--primary-color);
  }

  blockquote .sidenote,
  li .sidenote {
    margin-left: 1em;
  }

  .sidenote .katex {
    font-size: 1em;
  }

  .sidenote-number {
    color: var(--primary-color);
    text-decoration: underline;
  }

  .sidenote-toggle:checked + .sidenote {
    display: block;
  }
}

/* Summarized view: same as mobile */
.summarized .sidenote {
  display: none;
  float: none;
  width: auto;
  text-align: left;
  margin: 0.5em 0 0.5em 1em;
  padding: 0.5em;
  background-color: var(--menu-background-color);
  border-left: 3px solid var(--primary-color);
}

.summarized blockquote .sidenote,
.summarized li .sidenote {
  margin-left: 1em;
}

.summarized .sidenote .katex {
  font-size: 1em;
}

.summarized .sidenote-number {
  color: var(--primary-color);
  text-decoration: underline;
}

.summarized .sidenote-toggle:checked + .sidenote {
  display: block;
}

/* Print: show original footnotes */
@media print {
  .sidenote {
    display: none;
  }

  .sidenote-toggle {
    display: none;
  }
}