/**
 * PCG Footnote Layout
 *
 * Loads only on posts and pages using the "Page with Footnotes" template (template-footnotes.php).
 */
body.pcg-footnote-layout .entry-content {
    --wp--style--global--content-size:800px; /* Narrower inner content so the footnotes have space to float right. */
}
body.pcg-footnote-layout sup > a {
    /* The note itself, a purple number inside a purple circle. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65em;
    aspect-ratio: 1;
    margin-left: 2px;
    padding: 0;
    border: 1px solid var(--purple);
    border-radius: 50%;
    font-size: 0.75rem;
    line-height: 1;
    text-decoration: none;
    color: var(--purple);
}
body.pcg-footnote-layout sup > a:hover,
body.pcg-footnote-layout sup > a:focus-visible {
    background-color: var(--purple);
    color: var(--white);
}

/* ===========================================================================
 * Sidenotes
 *
 * Above the breakpoint each note is lifted out of the bottom list and placed
 * in the right margin, aligned to the reference citing it.
 *
 * The required per-note CSS (anchor-name/position-anchor) are generated by
 * core/inc/footnote-sidenotes.php by ... PHP.
 * ======================================================================== */
@supports (anchor-name: --a) {
  /* Where a centred 800px column first leaves a readable note:
     (1360 - 800) / 2 - 80 = 200px. Below this the notes stay in the bottom
     list. */
  @media (min-width: 1360px) {

    /* Containing block for the positioned notes. */
    body.pcg-footnote-layout .entry-content {
      position: relative;
    }

    body.pcg-footnote-layout .wp-block-footnotes {
      /* The <ol> is position:relative by default in the parent theme, which makes 
      the <ol> the containing block for the notes rather than .entry-content. This undoes the parent rule. */
      position: static;

      --pcg-note-gutter: 40px;
      /* Covers everything between the column edge and the viewport edge that
         halving does not account for: the gutter, the layout's side padding,
         and the scrollbar 100vw includes. */
      --pcg-note-inset: 80px;
      /* The usable margin is (100vw - var(--wp--style--global--content-size)) / 2 */
      --pcg-note-width: min(
        260px,
        calc((100vw - var(--wp--style--global--content-size)) / 2 - var(--pcg-note-inset))
      );
      padding-inline-start: 0;
    }

    body.pcg-footnote-layout .wp-block-footnotes > li {
      position: absolute;
      box-sizing: border-box;
      left: calc(50% + var(--wp--style--global--content-size) / 2 + var(--pcg-note-gutter));
      width: var(--pcg-note-width);
      margin: 0;
      top: anchor(top);

      /* Hidden until revealed. visibility rather than display so the box still
         resolves its anchor position while hidden. */
      opacity: 0;
      visibility: hidden;
      transition: opacity 120ms ease;
      padding: var(--min-gap) var(--sm-gap);
      border-left: 2px solid var(--purple);
      background-color: var(--pcg-bg-white);
      font-size:0.9em;
      line-height: 1.45;

      /* Visually hide the return link when "sidenotes" are active, but reveal if someone tabs to it. Larger screens only . */
      a[href^="#pcg-fn-"], /* PCG's custom notes. */ 
      .wp-block-footnotes li a[aria-label^="Jump to footnote reference"], /* Core's notes */
      a[href$="-link"] /* fallback if core's the label text ever changes */
      {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip-path: inset(50%);
      }
      a[href^="#pcg-fn-"]:focus-visible,
      .wp-block-footnotes li a[aria-label^="Jump to footnote reference"]:focus-visible, 
      a[href$="-link"]:focus-visible
      {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip-path: none;
      }

    }

    /* Activating a reference pins its note open. Without this, following the link moves focus off the reference, the generated :has() reveal stops matching, and the note hides again - and because visibility:hidden also removes it from the accessibility tree, the text becomes unreachable rather than merely invisible. :target clears itself when the return arrow is followed. */
    body.pcg-footnote-layout .wp-block-footnotes > li:target {
      opacity: 1;
      visibility: visible;
    }

    /* Reaching for a different marker unpins whatever was pinned, so only one
       note is ever on screen. */
    body.pcg-footnote-layout .entry-content:has(sup.fn > a:hover, sup.fn > a:focus-visible)
      .wp-block-footnotes > li:target {
      opacity: 0;
      visibility: hidden;
    }

    @media (prefers-reduced-motion: reduce) {
      body.pcg-footnote-layout .wp-block-footnotes > li {
        transition: none;
      }
    }
  }
}
/* Print Styles Polish */
@media print {
  body.pcg-footnote-layout .wp-block-footnotes {
    padding-top: 2em !important;
  }
  body.pcg-footnote-layout sup > a {
    display: inline;
    width: auto;
    aspect-ratio: auto;
    margin-left: 0;
    border: 0;
    color: #000;
  }
}