/* Sidenotes — Tufte-style margin notes */

/*
 * Approach: .tufte-article uses CSS Grid for the overall layout (content +
 * margin columns). Sidenotes inside .article-content use float:right with
 * negative margin to position into the margin column. This is the battle-tested
 * Tufte-CSS approach and works correctly with inline content from the_content().
 *
 * CSS Grid's grid-column would require sidenotes to be direct children of the
 * grid container, which is incompatible with WordPress's inline HTML output.
 */

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

/* Reference in main text */
.sidenote-ref {
    position: relative;
}

/* Superscript number in the main text */
.sidenote-ref::before {
    counter-increment: sidenote-counter;
    content: counter(sidenote-counter);
    font-size: var(--text-xs);
    vertical-align: super;
    line-height: 0;
    margin-right: 0.1em;
    color: var(--color-accent);
    font-weight: 700;
}

/* The sidenote itself — desktop: floated into margin */
.sidenote {
    display: block;
    float: right;
    clear: right;
    width: var(--margin-width);
    margin-right: calc(-1 * (var(--margin-width) + var(--gutter)));
    margin-bottom: 1em;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-muted);
    position: relative;
}

/* Number in the margin */
.sidenote::before {
    content: counter(sidenote-counter) ". ";
    font-weight: 700;
    color: var(--color-accent);
}

/* === Mobile: collapse to inline footnotes === */

@media (max-width: 768px) {
    .sidenote {
        display: none;
        float: none;
        width: 100%;
        margin: 0.5em 0 1em 0;
        padding: 0.75em 1em;
        background: #f5f5f0;
        border-radius: 4px;
        font-size: var(--text-sm);
    }

    /* Show sidenote when toggled */
    .sidenote.is-visible {
        display: block;
    }

    /* Make the superscript number tappable on mobile */
    .sidenote-ref::before {
        cursor: pointer;
        text-decoration: underline;
        padding: 0.2em;
    }
}