/*
 * yoviral sources card + citation chips. scoop-child, 17 Oct 2026 (senior).
 * Loaded only on single posts whose content contains "yv-src-" or "yv-sources"
 * (see functions.php). Kill switch: delete or rename this file.
 *
 * Markup (classic editor):
 *   <h2>...</h2>
 *   <ol class="yv-sources">            class optional: ol:has(> li[id^="yv-src-"]) works too
 *     <li id="yv-src-1">Ref. <em>Journal</em>, 2010. <a href="..." target="_blank" rel="noopener">PubMed</a></li>
 *   </ol>
 *   text<sup class="yv-cite"><a href="#yv-src-1" aria-label="...">1</a></sup>
 * A Hebrew reference: <li id="yv-src-N" dir="rtl"> flips its row to RTL.
 * Old plain source lists (no yv-src ids, no class) are not matched.
 */

/* ---------- card ---------- */
.entry-content :is(ol.yv-sources, ol:has(> li[id^="yv-src-"])) {
	--yv-accent: #217c36;
	--yv-accent-ink: #17612a;
	--yv-tint: #e6f1e8;
	--yv-card: #f8faf8;
	--yv-line: #e1e8e2;
	--yv-ink: #1f2a24;
	--yv-muted: #56635b;
	list-style: none;
	counter-reset: yv-src;
	margin: 0 0 32px;
	padding: 4px 8px 6px;
	background: var(--yv-card);
	border: 1px solid var(--yv-line);
	border-radius: 16px;
	box-shadow: 0 10px 28px -22px rgba(16, 40, 24, .35);
}

/* heading joined to the card (needs :has; without it the heading stays as is) */
@supports selector(:has(+ *)) {
	.entry-content h2:has(+ ol.yv-sources, + ol > li[id^="yv-src-"]) {
		display: flex;
		align-items: center;
		gap: 12px;
		margin: 36px 0 0;
		padding: 18px 18px 14px;
		background: #f8faf8;
		border: 1px solid #e1e8e2;
		border-bottom: 0;
		border-radius: 16px 16px 0 0;
		color: #1f2a24;
		font-size: 22px;
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: 0;
	}
	.entry-content h2:has(+ ol.yv-sources, + ol > li[id^="yv-src-"])::before {
		content: "";
		flex: 0 0 auto;
		width: 34px;
		height: 34px;
		border-radius: 10px;
		background: #217c36 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4h6a4 4 0 0 1 4 4v13a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 4h-6a4 4 0 0 0-4 4v13a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
	}
	.entry-content h2 + :is(ol.yv-sources, ol:has(> li[id^="yv-src-"])) {
		margin-top: 0;
		border-top: 0;
		border-radius: 0 0 16px 16px;
		padding-top: 0;
	}
	.entry-content h2 + :is(ol.yv-sources, ol:has(> li[id^="yv-src-"]))::before {
		content: "";
		display: block;
		height: 1px;
		margin: 0 10px;
		background: var(--yv-line);
	}
}

/* ---------- rows ---------- */
.entry-content :is(ol.yv-sources > li, li[id^="yv-src-"]) {
	counter-increment: yv-src;
	position: relative;
	direction: ltr;
	text-align: start;
	list-style: none;
	margin: 0;
	padding: 14px 10px 14px 52px;
	padding-inline: 52px 10px;
	border-radius: 10px;
	color: #1f2a24;
	font-size: 15.5px;
	line-height: 1.6;
	letter-spacing: 0;
	overflow-wrap: break-word;
	hyphens: manual;
	scroll-margin-top: 120px;
	transition: background-color .25s ease;
}
.entry-content :is(ol.yv-sources > li, li[id^="yv-src-"])[dir="rtl"] {
	direction: rtl;
}
.entry-content :is(ol.yv-sources > li, li[id^="yv-src-"]) + :is(ol.yv-sources > li, li[id^="yv-src-"]) {
	background-image: linear-gradient(#e1e8e2, #e1e8e2);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: calc(100% - 20px) 1px;
}

/* number badge */
.entry-content :is(ol.yv-sources > li, li[id^="yv-src-"])::before {
	content: counter(yv-src);
	position: absolute;
	top: 14px;
	inset-inline-start: 12px;
	min-width: 28px;
	height: 28px;
	padding: 0 4px;
	box-sizing: border-box;
	border-radius: 999px;
	background: #e6f1e8;
	border: 1px solid rgba(33, 124, 54, .22);
	color: #17612a;
	font-size: 13px;
	font-weight: 700;
	line-height: 26px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* journal */
.entry-content :is(ol.yv-sources > li, li[id^="yv-src-"]) em {
	font-style: italic;
	color: #56635b;
}

/* link pill (overrides the global "li a" green box from Additional CSS) */
.entry-content :is(ol.yv-sources > li, li[id^="yv-src-"]) > a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-inline-start: 2px;
	padding: 1px 11px 2px;
	border: 1px solid rgba(33, 124, 54, .38);
	border-radius: 999px;
	background: #ffffff;
	color: #217c36;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.6;
	text-decoration: none;
	white-space: nowrap;
	vertical-align: baseline;
	box-shadow: none;
	transform: none;
	hyphens: manual;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.entry-content :is(ol.yv-sources > li, li[id^="yv-src-"]) > a::after {
	content: "\2197";
	font-size: 12px;
	line-height: 1;
}
.entry-content :is(ol.yv-sources > li, li[id^="yv-src-"]) > a::before {
	content: none;
}
.entry-content :is(ol.yv-sources > li, li[id^="yv-src-"]) > a:hover,
.entry-content :is(ol.yv-sources > li, li[id^="yv-src-"]) > a:focus-visible {
	background: #217c36;
	border-color: #217c36;
	color: #ffffff;
	box-shadow: none;
	transform: none;
}
.entry-content :is(ol.yv-sources > li, li[id^="yv-src-"]) > a:focus-visible,
.entry-content sup.yv-cite > a:focus-visible {
	outline: 2px solid #217c36;
	outline-offset: 2px;
}
.entry-content :is(ol.yv-sources > li, li[id^="yv-src-"]) > a:focus:not(:focus-visible),
.entry-content sup.yv-cite > a:focus:not(:focus-visible) {
	outline: none;
}
.entry-content :is(ol.yv-sources > li, li[id^="yv-src-"]) > a:active {
	background: #17612a;
	border-color: #17612a;
	color: #ffffff;
	transform: none;
}

/* row reached from a chip */
.entry-content :is(ol.yv-sources > li, li[id^="yv-src-"]):target {
	background-color: #eaf4ec;
	box-shadow: inset 3px 0 0 #217c36;
	animation: yv-src-flash 1.8s ease-out 1;
}
.entry-content :is(ol.yv-sources > li, li[id^="yv-src-"])[dir="rtl"]:target {
	box-shadow: inset -3px 0 0 #217c36;
}
@keyframes yv-src-flash {
	0%, 35% { background-color: #d3ead8; }
	100% { background-color: #eaf4ec; }
}

/* ---------- in-text chips ---------- */
.entry-content sup.yv-cite {
	position: relative;
	top: -.45em;
	vertical-align: baseline;
	font-size: 100%;
	line-height: 0;
	margin-inline-start: 2px;
}
.entry-content sup.yv-cite > a {
	position: relative;
	display: inline; /* inline-block would allow a line break between the word and its chip */
	padding: 1px 6px;
	border: 1px solid rgba(33, 124, 54, .22);
	border-radius: 999px;
	background: #e6f1e8;
	color: #17612a;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	direction: ltr;
	unicode-bidi: isolate;
	box-shadow: none;
	transform: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
/* bigger tap area, no visual change */
.entry-content sup.yv-cite > a::before {
	content: "";
	position: absolute;
	inset: -8px -4px;
	background: none;
	opacity: 1;
}
.entry-content sup.yv-cite > a:hover,
.entry-content sup.yv-cite > a:focus-visible,
.entry-content sup.yv-cite > a:active {
	background: #217c36;
	border-color: #217c36;
	color: #ffffff;
	box-shadow: none;
	transform: none;
}

/* smooth jump only while a chip is being used, so the theme's jQuery
   scroll-to-top and menu anchors are not slowed by a global smooth scroll */
@media (prefers-reduced-motion: no-preference) {
	html:has(.entry-content sup.yv-cite > a:is(:hover, :active, :focus-visible)) {
		scroll-behavior: smooth;
	}
}
@media (prefers-reduced-motion: reduce) {
	.entry-content :is(ol.yv-sources > li, li[id^="yv-src-"]):target {
		animation: none;
	}
	.entry-content :is(ol.yv-sources > li, li[id^="yv-src-"]),
	.entry-content :is(ol.yv-sources > li, li[id^="yv-src-"]) > a,
	.entry-content sup.yv-cite > a {
		transition: none;
	}
}

/* ---------- mobile ---------- */
@media (max-width: 600px) {
	.entry-content :is(ol.yv-sources, ol:has(> li[id^="yv-src-"])) {
		padding-inline: 4px;
		border-radius: 14px;
	}
	@supports selector(:has(+ *)) {
		.entry-content h2:has(+ ol.yv-sources, + ol > li[id^="yv-src-"]) {
			gap: 10px;
			padding: 16px 14px 12px;
			border-radius: 14px 14px 0 0;
			font-size: 20px;
		}
		.entry-content h2:has(+ ol.yv-sources, + ol > li[id^="yv-src-"])::before {
			width: 30px;
			height: 30px;
			border-radius: 9px;
			background-size: 16px 16px;
		}
		.entry-content h2 + :is(ol.yv-sources, ol:has(> li[id^="yv-src-"])) {
			border-radius: 0 0 14px 14px;
		}
	}
	.entry-content :is(ol.yv-sources > li, li[id^="yv-src-"]) {
		padding: 12px 8px 12px 44px;
		padding-inline: 44px 8px;
		font-size: 15px;
	}
	.entry-content :is(ol.yv-sources > li, li[id^="yv-src-"])::before {
		top: 12px;
		inset-inline-start: 8px;
		min-width: 26px;
		height: 26px;
		line-height: 24px;
		font-size: 12.5px;
	}
}