/* ==========================================================================
   Article (single.html). Hero, share rail, reading column, cite/download card,
   footnote side-note rail. Colors + fonts use theme.json tokens.
   ========================================================================== */

/* ---- Sticky reading bar (revealed by article.js after the masthead) ---- */
.wulr-stickybar {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 899; /* below the header (900); the header scrolls away first */
	/* Gutter on the OUTER element (matches .wulr-article-layout) so the inner
	   1200 container aligns flush with the site container / share rail. */
	padding-inline: clamp(1.5rem, 4vw, 48px);
	background: var(--wp--preset--color--white);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	transform: translateY(-100%);
	visibility: hidden;
	transition: transform 0.25s ease, visibility 0.25s;
}
.wulr-stickybar.is-visible { transform: translateY(0); visibility: visible; }
/* Clear the WP admin bar (fixed, z-index 99999) for logged-in users — a
   fixed element ignores the admin bar's html margin-top, so offset it here. */
.admin-bar .wulr-stickybar { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .wulr-stickybar { top: 46px; }
}
.wulr-stickybar-inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-block: 9px;
	display: flex;
	align-items: center;
	gap: 16px;
}
.wulr-stickybar-title {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--wp--preset--font-family--primary);
	font-size: 18px;
	font-weight: 600;
	color: var(--wp--preset--color--body);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.wulr-stickybar-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.wulr-stickybar-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	/* 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: 3px;
	background: transparent;
	color: var(--wp--preset--color--body);
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.wulr-stickybar-btn svg { width: 17px; height: 17px; }
/* Reading-progress indicator along the bar's bottom edge (JS sets scaleX). */
.wulr-stickybar-progress {
	position: absolute;
	bottom: 0;
	/* Escape the bar's inline padding so the progress bar stays edge-to-edge. */
	left: calc(-1 * clamp(1.5rem, 4vw, 48px));
	right: calc(-1 * clamp(1.5rem, 4vw, 48px));
	height: 3px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.1s linear;
}
@media (max-width: 600px) {
	.wulr-stickybar-title { font-size: 16px; }
	.wulr-stickybar-btn { width: 34px; height: 34px; }
}

/* ---- Hero ---- */
.wulr-eyebrow-row { align-items: center; gap: 22px; }
.wulr-type-badge {
	display: inline-block;
	width: fit-content;
	padding: 4px 10px;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.4;
}
/* Volume · Issue masthead links beside the badge — dark ink, underlined,
   accent on hover (mirrors the homepage hero masthead behavior). */
.wulr-article-masthead {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--body);
}
.wulr-am-link {
	color: inherit;
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	transition: color 0.15s, border-color 0.15s;
}
.wulr-am-sep { color: var(--wp--preset--color--stone); }

/* Headline — size comes from the `xxxl` preset (clamp 2.5–4rem) set on the
   post-title block in single.html, not a custom override, so it stays editable
   via the theme.json scale. The theme.json h1 default ("display", 48–80px)
   overwhelmed the hero. Only leading/margin are tuned here. */
.wulr-article-title {
	line-height: 1.15;
	margin-bottom: 0;
}

.wulr-article-meta {
	align-items: center;
	gap: 14px;
	color: var(--wp--preset--color--stone);
	font-family: var(--wp--preset--font-family--primary);
	font-size: 17px;
}
/* Author reads as a red link (author archive); date stays stone with a dot
   separator before it. */
.wulr-article-meta .wulr-byline,
.wulr-article-meta .wulr-byline a {
	font-style: italic;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}
.wulr-article-meta .wulr-byline a { border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.wulr-article-meta .wulr-byline a:hover { color: var(--wp--preset--color--red-dk); }
.wulr-article-meta .wulr-article-date { color: var(--wp--preset--color--stone); }
.wulr-article-meta .wulr-article-date::before {
	content: "\00B7"; /* dot separator */
	margin-right: 14px;
	color: var(--wp--preset--color--stone);
}

/* Topics | Cite | Download strip in the hero — ruled top and bottom, with
   vertical dividers between the columns. */
.wulr-taxonomies {
	gap: 0;
	padding-top: 22px;
	padding-bottom: 22px;
	border-top: 1px solid var(--wp--preset--color--rule);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	align-items: stretch;
	flex-wrap: nowrap;
}
/* Dividers sit BETWEEN columns only, so an absent column (e.g. a post with no
   Topics) never leaves a stray leading rule. Non-last columns get right
   padding so their text can't touch the next divider. */
.wulr-tx + .wulr-tx { border-left: 1px solid var(--wp--preset--color--rule); padding-left: 40px; }
.wulr-tx:not(:last-child) { padding-right: 40px; }
/* The two action buttons (Copy Citation + Download PDF) read as a pair — no
   divider between them, tighter gap (keep the divider only before the first
   action column, i.e. after Topics). */
.wulr-tx-action + .wulr-tx-action { border-left: 0; padding-left: 18px; }
.wulr-tx-action:not(:last-child) { padding-right: 18px; }
/* Columns stay full-height (align-items:stretch on the row) so the dividers
   span the strip, while each column's content is centered vertically. */
.wulr-tx { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.wulr-tx-topics { flex: 1 1 auto; min-width: 0; }
.wulr-tx-topic-links {
	font-family: var(--wp--preset--font-family--primary);
	font-size: 17px;
	line-height: 1.7;
	color: var(--wp--preset--color--body);
}
.wulr-tx-topic-links a {
	color: var(--wp--preset--color--body);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--rule);
	text-underline-offset: 3px;
	transition: color 0.12s, text-decoration-color 0.12s;
}
.wulr-tx-topic-links a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration-color: var(--wp--preset--color--accent);
}
.wulr-tx-action { flex: 0 0 auto; }
/* No Topics → Cite/Download align left with the title (flex-start default).
   When Topics IS present it takes flex:1 and pushes the actions to the right on
   its own, so no explicit alignment rule is needed here. */
/* Outlined pill — pairs with the filled Download pill, matching the
   outlined/filled button pair in the bottom cite card. */
.wulr-action-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px; /* shared with .wulr-action-pill so the two match exactly */
	box-sizing: border-box; /* keep the 1px border from adding to the height */
	padding: 0 20px;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 999px;
	background: none;
	cursor: pointer;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	/* Instant hover swap: the red-text -> white crossfade over a transparent ->
	   accent fill has no legible midpoint (~1:1), same as the cite-card button. */
	transition: border-color 0.15s;
}
.wulr-action-link svg,
.wulr-action-pill svg { width: 14px; height: 14px; }
.wulr-action-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px; /* matches .wulr-action-link */
	box-sizing: border-box;
	padding: 0 20px;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.wulr-action-pill:hover { background: var(--wp--preset--color--red-dk); color: var(--wp--preset--color--white); }

/* ---- Body layout + share rail ----
   Full-bleed outer + centered inner (mirrors the header) so the share rail
   aligns to the site content container at every width instead of floating out
   into the gutter. Share is a sticky left column; the reading body fills the
   rest. */
.wulr-article-layout {
	padding-inline: clamp(1.5rem, 4vw, 48px);
	/* Clear the red cite strip below. Also applies under the footnote rail:
	   sidenotes.js grows .wulr-article-layout-inner to the rail's height, so this
	   padding sits below whichever is taller — the body or the margin notes. */
	padding-bottom: clamp(3rem, 6vw, 6rem);
}
.wulr-article-layout-inner {
	position: relative;
	max-width: 1200px; /* matches the header/footer content width */
	margin-inline: auto;
	display: flex;
	align-items: flex-start;
	gap: clamp(28px, 4vw, 64px);
}
.wulr-share {
	position: sticky;
	top: 100px;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
/* Vertical "SHARE" label above the icons. */
.wulr-share-label {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	padding-bottom: 14px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--body);
}
/* Square, outlined icon buttons. */
.wulr-share-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	/* stone (>=3:1) — the outline is the button's only boundary; rule token was 1.8:1 (1.4.11). */
	border: 1px solid var(--wp--preset--color--stone);
	border-radius: 2px;
	color: var(--wp--preset--color--body);
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
/* Hover label — dark chip that fades in to the right of the button. */
.wulr-share-tip {
	position: absolute;
	left: calc(100% + 10px);
	background: var(--wp--preset--color--body);
	color: var(--wp--preset--color--white);
	padding: 5px 10px;
	border-radius: 3px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	/* Hide with visibility, not opacity alone: opacity:0 text stays in the render
	   + a11y tree, so WAVE scores the faded-out white label against its own dark
	   chip (~1:1). visibility:hidden removes it from both; the fade is preserved
	   by delaying the visibility switch until after the opacity transition. */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s, visibility 0s linear 0.15s;
}
.wulr-share-btn:hover .wulr-share-tip,
.wulr-share-btn:focus-visible .wulr-share-tip {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.15s, visibility 0s;
}
/* lint-allow: coincidental generic flex-fill; not a shared component with .wulr-tx-topics */
.wulr-article-body { flex: 1 1 auto; min-width: 0; }

/* ---- Reading column ----
   20px reading size is a deliberate long-form choice for post_content prose
   (client request); post paragraphs don't carry per-block fontSize, so it is
   set here rather than via a block attribute. */
.wulr-article-body,
.wulr-article-body p { font-size: 20px; line-height: 1.7; }
.wulr-article-body a { color: var(--wp--preset--color--accent); }

/* Article-body heading scale — shifted up one preset step. In a post the H1 is
   the article title, so authored content starts at H2; bumping each level up one
   makes the content H2 read at the old H1 size and the rest cascade down. Values
   are theme.json fontSize slugs (via var), not raw sizes, and line-heights shift
   up with them; lint-allow marks the sanctioned contextual override — a typed
   content heading carries no per-block fontSize attribute to hold this. */
.wulr-article-body h2 { font-size: var(--wp--preset--font-size--xxl); line-height: 1.15; } /* lint-allow: preset slug via var, article-scoped heading scale */
.wulr-article-body h3 { font-size: var(--wp--preset--font-size--xl); line-height: 1.25; } /* lint-allow: preset slug via var, article-scoped heading scale */
.wulr-article-body h4 { font-size: var(--wp--preset--font-size--lg); line-height: 1.3; } /* lint-allow: preset slug via var, article-scoped heading scale */
.wulr-article-body h5 { font-size: var(--wp--preset--font-size--md); line-height: 1.35; } /* lint-allow: preset slug via var, article-scoped heading scale */
.wulr-article-body h6 { font-size: var(--wp--preset--font-size--sm); line-height: 1.4; } /* lint-allow: preset slug via var, article-scoped heading scale */
.wulr-smallcaps,
.wulr-sn-body .small-caps,
.wulr-sn-body .wulr-smallcaps { font-variant-caps: small-caps; letter-spacing: 0.02em; }
.wulr-article-body sup a {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

/* ---- Footnote rail (JS-built for content with footnotes) ---- */
.wulr-cite-rail {
	font-family: var(--wp--preset--font-family--primary);
	max-width: 840px;
	margin: 72px auto 0;
	padding-top: 24px;
	border-top: 2px solid var(--wp--preset--color--body);
}
.wulr-cite-rail::before {
	content: "Footnotes";
	display: block;
	margin-bottom: 12px;
	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-cite-text a { color: var(--wp--preset--color--accent); }
.wulr-cite {
	display: grid;
	grid-template-columns: 28px 1fr;
	gap: 10px;
	padding: 12px 0;
	border-bottom: 1px solid var(--wp--preset--color--rule-soft);
}
.wulr-cite-num {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--accent);
}
.wulr-cite-text { font-size: 15px; line-height: 1.55; color: var(--wp--preset--color--ink-2); }
.wulr-cite:not(.is-expanded) .wulr-cite-text {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.wulr-cite-toggle {
	grid-column: 2;
	justify-self: start;
	display: none;
	align-items: center;
	justify-content: center;
	margin-top: 8px;
	background: none;
	cursor: pointer;
}
.wulr-cite.is-clamped .wulr-cite-toggle { display: inline-flex; }
.wulr-cite:not(.is-expanded) .wulr-cite-toggle {
	width: 34px;
	height: 30px;
	padding: 0 0 6px;
	/* 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: 6px;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--display);
	font-size: 22px;
	line-height: 1;
}
.wulr-cite.is-expanded .wulr-cite-toggle {
	border: 0;
	padding: 4px 2px;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* ---- Cite / Download card ---- */
.wulr-action-card {
	max-width: 1200px;
	margin: 0 auto;
	background: var(--wp--preset--color--white);
	border-radius: 2px;
	padding: 44px 48px;
	display: grid;
	grid-template-columns: 1fr minmax(260px, 320px);
	gap: 48px;
	align-items: stretch;
}
.wulr-ac-cite { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.wulr-ac-label { color: var(--wp--preset--color--accent); font-size: 12px; }
.wulr-citation-box {
	background: var(--wp--preset--color--muted);
	padding: 24px 28px;
	border-left: 3px solid var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--primary);
	font-size: 22px;
	line-height: 1.4;
	color: var(--wp--preset--color--body);
	user-select: all;
}
.wulr-citation-box em { font-style: italic; }
.wulr-ac-buttons {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	padding-left: 48px;
	border-left: 1px solid var(--wp--preset--color--rule);
}
.wulr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	padding: 18px 24px;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--accent);
	cursor: pointer;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
/* Outline variant only: on hover the red text and white->green fill transition
   together, and the crossfade has no legible midpoint (pink-on-half-green ~1:1).
   Swap it instantly. The filled .wulr-btn-primary keeps its fade -- white text
   stays legible across the whole red->green sweep. */
.wulr-btn:not(.wulr-btn-primary) { transition: border-color 0.15s; }
.wulr-btn svg,
.wulr-featured-playpause svg { width: 16px; height: 16px; }
/* Hover unified with the native core/button pattern (global.css): dark-green
   fill, white text, green border — for BOTH the outline (.wulr-btn) and filled
   (.wulr-btn-primary) variants, since both carry .wulr-btn. The old split
   (outline→accent-fill, primary→red-dk) was the last button hover on the site
   that didn't go green. */
.wulr-btn:hover,
.wulr-btn:focus-visible,
.wulr-contact-form .gform_footer .gform_button:hover,
.wulr-contact-form .gform_footer .gform_button:focus-visible {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--primary);
}

/* ---- Toast ---- */
.wulr-toast {
	position: fixed;
	left: 50%;
	bottom: 32px;
	transform: translateX(-50%) translateY(20px);
	background: var(--wp--preset--color--body);
	color: var(--wp--preset--color--white);
	padding: 12px 22px;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	/* visibility (not opacity alone) keeps the resting toast out of the a11y tree
	   and contrast tools; the fade survives via the delayed visibility switch. */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s, transform 0.2s, visibility 0s linear 0.2s;
	z-index: 1300;
}
.wulr-toast.is-visible { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); transition: opacity 0.2s, transform 0.2s, visibility 0s; }

/* ---- Responsive ---- */
/* Hero Topics|Cite|Download strip: the three ruled columns stack full-width
   below their comfortable width. Drop the vertical dividers/indents (they only
   read as columns side by side) in favor of stacked rows with spacing. */
@media (max-width: 720px) {
	.wulr-taxonomies { flex-wrap: wrap; row-gap: 26px; }
	.wulr-taxonomies .wulr-tx { flex-basis: 100%; }
	.wulr-taxonomies .wulr-tx + .wulr-tx { border-left: 0; padding-left: 0; }
	.wulr-taxonomies .wulr-tx:not(:last-child) { padding-right: 0; }
	.wulr-taxonomies .wulr-tx-action:first-child { margin-left: 0; }
}
/* Stack the share rail into a horizontal row ABOVE the reading column before
   the vertical sticky rail would collide with the body. The reading column is
   constrained/flush-left, so between ~981-1110px its left edge sits at the
   container edge (no room reserved for the 48px rail) and the sticky rail
   overlapped the text; only at >=~1120px does the flush-left margin open a gap.
   So the stack breakpoint is 1120px, not 980. */
@media (max-width: 1120px) {
	.wulr-article-layout-inner { display: block; }
	.wulr-share {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		gap: 12px;
		margin-bottom: 28px;
	}
	.wulr-share-label {
		writing-mode: horizontal-tb;
		transform: none;
		padding-bottom: 0;
		padding-right: 6px;
	}
	/* Tooltips would overlap adjacent buttons in the horizontal row. */
	.wulr-share-tip { display: none; }
	/* Stacked: post-content's has-global-padding gutter is redundant here —
	   .wulr-article-layout already provides the gutter — and doubling it indents
	   the body deeper than the share row and rule. Drop the inner gutter so the
	   reading column matches the container edge. */
	.wulr-article-body.has-global-padding { padding-left: 0; padding-right: 0; }
}
@media (max-width: 980px) {
	.wulr-action-card { grid-template-columns: 1fr; gap: 32px; padding: 28px 24px; }
	.wulr-ac-buttons { border-left: 0; border-top: 1px solid var(--wp--preset--color--rule); padding-left: 0; padding-top: 32px; }
	.wulr-citation-box { font-size: 19px; }
}

/* ---- "More from the Review" — static 4-up grid (replaces the card rail; the
   related section is no longer a carousel). Cards reuse the shared .wulr-card
   styling from home.css; only the layout container differs from .wulr-card-track. */
.wulr-card-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.wulr-card-grid > li { display: flex; flex-direction: column; }
.wulr-card-grid > li > .wulr-card,
.wulr-card-track > li > .wulr-card { flex: 1 1 auto; width: 100%; }
@media (max-width: 980px) {
	.wulr-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.wulr-card-grid { grid-template-columns: 1fr; }
	/* The `xxxl` preset floors at 2.5rem (40px), so the headline never shrinks on
	   phones. Drop it to a smaller mobile scale — title only, so other xxxl
	   headings keep the preset. */
	/* WP emits the `xxxl` preset as `.has-xxxl-font-size { ... !important }`, so
	   this override must also be !important to win the cascade. */
	.wulr-article-title { font-size: clamp(1.625rem, 7vw, 2.125rem) !important; }
}

/* The related section sits flush under the red "Cite This Article" callout —
   both are nested in <main>, so the root section-flush reset doesn't reach them
   and a block-gap margin was leaving a white strip between the red and the bone. */
.wulr-article-actions + .wulr-related { margin-top: 0; }