/* ==========================================================================
   Margin sidenotes (Tufte cite-rail) for single articles with footnotes.

   Matches the approved article-b comp: each footnote is lifted beside its
   reference marker, truncated to two lines, and expands via a "…" / "Close"
   toggle (Columbia-style). Clicking a marker highlights + expands its note.

   Wired up by sidenotes.js, which lifts the post's footnotes into a single
   gutter column (`.wulr-sidenote-col`, one `.wulr-sidenote` per note) and
   presents it two ways:

     >= 1200px : the gutter floats right of the reading column; each note is
                 absolutely positioned (top set by JS) beside its marker,
                 pushed down only to clear the previous note, and clamped to
                 two lines.
     <  1200px : no room for a margin — the same notes fall back to a full
                 (un-clamped) numbered list at the article end.

   Loads after article.css (assets/css/*.css glob is alphabetical). Colors +
   fonts use theme.json tokens only.
   ========================================================================== */

.wulr-sidenote-col {
	position: relative;
	font-family: var(--wp--preset--font-family--primary);
}

/* ---- A single note (shared shell for both presentations) ---- */
.wulr-sidenote {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: 8px;
	align-items: baseline; /* number sits on the note's first-line baseline */
	color: var(--wp--preset--color--ink-2);
	transition: background 0.15s;
}
.wulr-sn-num {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.55; /* match the body so the baseline lands on line 1 */
	color: var(--wp--preset--color--accent);
	font-variant-numeric: tabular-nums;
}
/* Author "*" note — rendered at the end of the article body (bottom of the
   post), ruled off from the article text. Not a numbered footnote. */
.wulr-author-note {
	display: block;
	margin-top: 48px;
	padding-top: 20px;
	border-top: 1px solid var(--wp--preset--color--rule);
	font-family: var(--wp--preset--font-family--primary);
}
.wulr-author-note-label {
	display: block;
	margin-bottom: 10px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}
.wulr-author-note-body { font-size: 15px; line-height: 1.6; color: var(--wp--preset--color--ink-2); }
.wulr-author-note-body p { font-size: 15px; line-height: 1.6; }
.wulr-author-note-body a { color: var(--wp--preset--color--accent); }
.wulr-author-note-body em,
.wulr-author-note-body i { font-style: italic; }
.wulr-sn-body {
	min-width: 0;
	font-size: 14px;
	line-height: 1.55;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.wulr-sn-body em,
.wulr-sn-body i { font-style: italic; }
.wulr-sn-body a:not(.wulr-sn-back) {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	transition: border-color 0.15s;
}
.wulr-sn-body a:not(.wulr-sn-back):hover { border-bottom-color: var(--wp--preset--color--accent); }
/* Return-to-text arrow. Muted at rest via a real color (stone = 7.3:1 on
   white), never opacity — opacity makes contrast depend on the backdrop and
   dropped this below 4.5:1 (WCAG 1.4.3). */
.wulr-sn-back {
	color: var(--wp--preset--color--stone);
	margin-left: 4px;
	text-decoration: none;
	transition: color 0.15s;
}
.wulr-sn-back:hover,
.wulr-sn-back:focus-visible {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

/* Expand / collapse toggle (JS-injected; only shown when a note is clamped). */
.wulr-sn-toggle {
	grid-column: 2;
	justify-self: start;
	margin-top: 0; /* the grid row-gap already spaces it below the note text */
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background: transparent;
	color: var(--wp--preset--color--accent);
}
.wulr-sn-toggle:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }
/* Collapsed: bordered rounded square with a "…" glyph. 24x24 is the WCAG 2.5.8
   (AA) minimum target size — do not go smaller without relying on the spacing
   exception. */
.wulr-sidenote:not(.is-expanded) .wulr-sn-toggle {
	width: 24px;
	height: 24px;
	padding: 0 0 4px; /* nudge the low "…" toward optical center */
	/* stone (>=3:1) interactive-control boundary; rule token was 1.8:1 (1.4.11). */
	border: 1px solid var(--wp--preset--color--stone);
	border-radius: 5px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 17px;
	line-height: 1;
}
/* Expanded: the word "Close" in the red label type. */
.wulr-sidenote.is-expanded .wulr-sn-toggle {
	min-height: 24px;
	padding: 4px 2px;
	border: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.wulr-sidenote.is-expanded .wulr-sn-toggle:hover { color: var(--wp--preset--color--red-dk); }

/* Active pairing: clicking a marker highlights both it and its note. */
.wulr-sidenote.is-active {
	background: linear-gradient(to right, var(--wp--preset--color--muted) 0%, transparent 100%);
}
.wulr-article-body sup a.is-active { background: var(--wp--preset--color--muted); }

/* In-text reference markers: sized to match the rail numbers rather than the
   larger double-superscript the importer left. */
.wulr-article-body sup a { font-size: 11px; }
/* Underline affordance on hover/focus only (resting look stays clean) — signals
   the marker is a link and strengthens the keyboard focus state (SC 2.4.7). */
.wulr-article-body sup a:hover,
.wulr-article-body sup a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ==========================================================================
   Wide: the margin presentation
   ========================================================================== */
@media (min-width: 1200px) {
	/* Give the gutter room: cap the reading measure and left-align it so the
	   right-hand space is real, not centered slack. margin-inline only —
	   defeats WP constrained-layout's auto-center (hard-constraints #2); never
	   touch margin-block or blockGap breaks. */
	.wulr-has-sidenotes .wulr-article-body > * {
		max-width: 840px;
		margin-inline-start: 0 !important; /* defeat constrained auto-center */
		margin-inline-end: auto !important; /* defeat constrained auto-center */
	}
	/* Tighten the share -> reading-column gap (article.css sets a wide
	   clamp(28px,4vw,64px) between the sticky share rail and the body). The
	   class is ON .wulr-article-layout-inner, so this is a compound selector. */
	.wulr-article-layout-inner.wulr-has-sidenotes { column-gap: 24px; }

	/* Reading body is capped (not flex:1) so it can't grow into the gutter; it
	   shrinks below its basis only when the viewport is tight, so the in-flow
	   gutter can never be overlapped. The leftover width falls to the right
	   margin. */
	.wulr-article-layout-inner.wulr-has-sidenotes .wulr-article-body {
		flex: 0 1 840px;
	}
	/* Gutter is an IN-FLOW flex column immediately right of the reading body — NOT
	   position:absolute. The old `right:80px` anchored it to the inner's right edge,
	   so at viewports ~1200–1320px (inner too narrow) it slid left over the 780px
	   reading column and overlapped the text. As a flex item it can never overlap;
	   notes stay absolute WITHIN it (base rule sets position:relative), placed by JS.
	   margin-left widens the body→notes gap beyond the 24px inter-column gap. */
	.wulr-has-sidenotes .wulr-sidenote-col {
		flex: 0 0 300px;
		width: 300px;
		margin-left: 16px;
	}
	.wulr-has-sidenotes .wulr-sidenote {
		position: absolute;
		left: 0;
		width: 300px;
		padding: 2px 0 2px 4px;
	}
	.wulr-has-sidenotes .wulr-sidenote.is-active {
		padding-left: 12px;
		margin-left: -8px; /* let the active highlight bleed left of the column */
	}
	/* Clamp to two lines until expanded. */
	.wulr-has-sidenotes .wulr-sidenote:not(.is-expanded) .wulr-sn-body {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.wulr-has-sidenotes .wulr-sidenote.is-clamped .wulr-sn-toggle { display: inline-flex; }
}

/* ==========================================================================
   Narrow: the fallback list at the article end
   ========================================================================== */
@media (max-width: 1199px) {
	/* Let the column wrap full-width below the reading body (scoped to our
	   container class so non-footnote articles are untouched). The class is ON
	   .wulr-article-layout-inner, so this is a compound selector. */
	.wulr-article-layout-inner.wulr-has-sidenotes { flex-wrap: wrap; }
	.wulr-sidenote-col {
		flex-basis: 100%;
		width: 100%;
		margin-top: 64px; /* separate the notes from the article body */
		padding-top: 24px;
		border-top: 2px solid var(--wp--preset--color--body);
	}
	.wulr-sidenote-col::before {
		content: "Footnotes";
		display: block;
		margin-bottom: 16px;
		font-family: var(--wp--preset--font-family--sans);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: var(--wp--preset--color--accent);
	}
	.wulr-sidenote {
		padding: 10px 0;
		border-bottom: 1px solid var(--wp--preset--color--rule-soft);
	}
	/* No clamp/toggle in the stacked list — the full note is shown. */
	.wulr-sidenote .wulr-sn-toggle { display: none; }
}