/*
 * Gutenberg Sidenotes — gs-sidenotes.css
 *
 * Tufte-style right-margin sidenotes on desktop (> 768px).
 * Below 768px the original footnotes block renders normally.
 *
 * Customise with CSS variables — safe to override in your
 * theme's Additional CSS without touching this file.
 */

:root {
    --gs-width:        200px;   /* sidenote column width          */
    --gs-gap:          1.75rem; /* gap between content and note   */
    --gs-stack-gap:    0.75rem; /* gap between stacked sidenotes  */
    --gs-font-size:    0.78em;
    --gs-line-height:  1.5;
    --gs-color:        #666;
    --gs-number-color: #aaa;
    --gs-border-color: #d0d0d0;
}


/* ── Wrapper ──────────────────────────────────────────────
   Each block element (p, heading, blockquote) that contains
   a footnote ref gets wrapped in this div. It becomes the
   positioning context for the absolutely-placed sidenotes.
   ──────────────────────────────────────────────────────── */
.gs-sidenote-wrapper {
    position: relative;
    /* margin-bottom is set inline by JS, mirroring the
       wrapped element's own computed margin before wrapping. */
}

/* Strip margin from the wrapped element itself so spacing
   is controlled by the wrapper instead. */
.gs-sidenote-wrapper > p,
.gs-sidenote-wrapper > h1,
.gs-sidenote-wrapper > h2,
.gs-sidenote-wrapper > h3,
.gs-sidenote-wrapper > h4,
.gs-sidenote-wrapper > h5,
.gs-sidenote-wrapper > h6,
.gs-sidenote-wrapper > blockquote {
    margin-bottom: 0;
}


/* ── Sidenote ─────────────────────────────────────────────
   Positioned absolutely to the right of the content column,
   outside the normal text flow (Tufte style).
   top is adjusted per-sidenote by JS to handle stacking.
   ──────────────────────────────────────────────────────── */
.gs-sidenote {
    position: absolute;
    left: calc(100% + var(--gs-gap));
    top: 0; /* overridden by JS */
    width: var(--gs-width);

    font-size: var(--gs-font-size);
    line-height: var(--gs-line-height);
    color: var(--gs-color);

    border-left: 1px solid var(--gs-border-color);
    padding-left: 0.6rem;

    /* Prevent runaway words in a narrow column */
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Superscript-style number at the start of each sidenote */
.gs-sidenote-number {
    color: var(--gs-number-color);
    font-size: 0.72em;
    vertical-align: super;
    line-height: 0;
    margin-right: 0.1em;
    user-select: none;
}

/* Links inside sidenotes — inherit muted color, underline for clarity */
.gs-sidenote a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* ── Desktop: hide the original footnotes block ───────────
   The body class is added by JS only when sidenotes were
   successfully built, so footnotes are never lost if JS
   fails or the block isn't present.
   ──────────────────────────────────────────────────────── */
body.gs-initialized .wp-block-footnotes {
    display: none;
}


/* ── Mobile (≤ 768px) ────────────────────────────────────
   Collapse the wrapper, hide sidenotes, restore footnotes.
   Use !important on min-height reset to beat the inline
   style set by JS.
   ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    .gs-sidenote-wrapper {
        position: static;
        min-height: unset !important;
    }

    /* Restore each element's natural bottom margin */
    .gs-sidenote-wrapper > p,
    .gs-sidenote-wrapper > h1,
    .gs-sidenote-wrapper > h2,
    .gs-sidenote-wrapper > h3,
    .gs-sidenote-wrapper > h4,
    .gs-sidenote-wrapper > h5,
    .gs-sidenote-wrapper > h6,
    .gs-sidenote-wrapper > blockquote {
        margin-bottom: revert;
    }

    .gs-sidenote {
        display: none;
    }

    /* Restore the standard footnotes block */
    body.gs-initialized .wp-block-footnotes {
        display: revert;
    }
}