/* Chemyx Citations — research hub page (cross-product, grouped by topic).
 * A different visual family from citations.css (the per-product card grid):
 * this is a single, long-form reference page, styled like a bibliography /
 * journal contents page rather than a card grid. Fully scoped under
 * .cx-citations-hub so it never leaks into the surrounding theme. */

.cx-citations-hub,
.cx-citations-hub *,
.cx-citations-hub *::before,
.cx-citations-hub *::after {
	box-sizing: border-box;
}

.cx-citations-hub {
	--cxh-ink: #14243e;
	--cxh-blue: #1d4e89;
	--cxh-cyan: #0e8fa8;
	--cxh-rule: #d9e0ea;
	--cxh-wash: #edf3fa;
	--cxh-muted: #5b6b82;

	color: var(--cxh-ink);
	font-size: 1rem;
	line-height: 1.65;
	max-width: 100%;
}

.cx-citations-hub a {
	color: var(--cxh-blue);
	text-decoration-color: rgba(29, 78, 137, 0.35);
	text-underline-offset: 3px;
}

.cx-citations-hub a:hover {
	color: var(--cxh-cyan);
}

/* ---------- page title (theme template, not this shortcode's markup) ----------
 * This stylesheet is only enqueued when [chemyx_citations_hub] actually
 * renders (see CX_Citations_Hub::render()), so this rule can never reach
 * any other page even though .entry-title itself is a theme-wide class —
 * no :has()/page-id scoping needed on top of that. Confirmed against the
 * live theme markup: <header class="entry-header"><h1 class="entry-title">,
 * with exactly one .entry-title per page. */
/* .common-content h1.entry-title: the theme sets font-size/weight/colour with
 * ".common-content h1", which outranks a bare ".entry-title", so this
 * selector is deliberately one step more specific. */
.entry-title,
.common-content h1.entry-title,
main.common-content .entry-header h1.entry-title {
	text-align: center;
	/* Same H1 style as https://chemyx.com/syringe-pump/ (measured there:
	 * Roboto 700, font-size clamp(2.6rem, 6vw, 4.2rem), line-height 40.8px, letter-spacing -0.416px,
	 * uppercase, black, 22px bottom margin). */
	font-family: Roboto, sans-serif;
	font-size: clamp(2.6rem, 6vw, 4.2rem);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: #000;
	margin: 0 0 22px;
}


/* ---------- intro text (page content, edited in the WP editor) ----------
 * The intro paragraph and the "Browse by research topic" link are ordinary
 * paragraphs an admin edits in the page content, not shortcode output, so
 * admins can change the wording (link them to #cx-citations-hub-topics).
 * Scoped to direct-child paragraphs of the page content: this stylesheet
 * only loads on pages carrying the shortcode, and paragraphs inside the
 * hub widget itself are nested deeper so they're unaffected. */
.entry-content > p {
	text-align: center;
	font-size: 1.1rem;
	line-height: 1.65;
	color: #243756;
	max-width: 70ch;
	margin-left: auto;
	margin-right: auto;
}

.entry-content > p a {
	color: #1d4e89;
	text-underline-offset: 3px;
}

.entry-content > p a:hover {
	color: #0e8fa8;
}

/* ---------- toolbar ---------- */

/* The toolbar's controls stay at the page's normal content width (so they
 * line up with the hero/topic sections above and below), but its
 * background band needs to reach the actual browser edges regardless of
 * how narrow the theme's own content container is. A fixed-width wrapper
 * can't do that without knowing that container's width, which we don't —
 * so the band is a ::before pseudo-element that breaks out using the
 * standard "100vw + negative margin" full-bleed technique, positioned
 * behind the (unmoved, still-aligned) toolbar content. */
.cx-citations-hub__toolbar {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	align-items: center;
	padding: 0.85rem 0;
	margin: 1.5rem 0;
}

.cx-citations-hub__toolbar::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	background: rgba(250, 251, 253, 0.95);
	backdrop-filter: blur(4px);
	border-top: 1px solid var(--cxh-rule);
	border-bottom: 1px solid var(--cxh-rule);
	z-index: -1;
}

.cx-citations-hub__toolbar label {
	font-size: 0.85rem;
	color: var(--cxh-muted);
}

.cx-citations-hub__toolbar input[type="search"] {
	flex: 1;
	min-width: 140px;
	max-width: 340px;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--cxh-rule);
	background: #fff;
	font-size: 0.9rem;
	border-radius: 4px;
	color: var(--cxh-ink);
}

.cx-citations-hub__toolbar select {
	padding: 0.5rem 0.6rem;
	border: 1px solid var(--cxh-rule);
	background: #fff;
	font-size: 0.9rem;
	border-radius: 4px;
	color: var(--cxh-ink);
}

.cx-citations-hub__count {
	margin-left: auto;
	font-size: 0.85rem;
	color: var(--cxh-muted);
	font-variant-numeric: tabular-nums;
}

/* ---------- body grid ---------- */

.cx-citations-hub__body {
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr);
	gap: 2.5rem;
	align-items: start;
}

.cx-citations-hub__toc {
	position: sticky;
	top: 4.5rem;
	/* A long topic list must never outgrow the screen (its bottom entries
	 * would be unreachable while the sidebar is stuck): scroll inside it. */
	max-height: calc(100vh - 6rem);
	overflow-y: auto;
}

.cx-citations-hub__toc h2 {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--cxh-muted);
	margin: 0 0 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.cx-citations-hub__toc ol,
.cx-citations-hub__toc ol li {
	list-style: none !important;
	list-style-type: none !important;
	list-style-image: none !important;
	margin: 0;
	padding: 0;
}

.cx-citations-hub__toc li {
	border-top: 1px solid var(--cxh-rule);
}

.cx-citations-hub__toc li:last-child {
	border-bottom: 1px solid var(--cxh-rule);
}

.cx-citations-hub__toc a {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.55rem 0.1rem;
	font-size: 0.9rem;
	text-decoration: none;
	color: var(--cxh-ink);
}

.cx-citations-hub__toc a:hover {
	color: var(--cxh-cyan);
}

.cx-citations-hub__toc-n {
	color: var(--cxh-muted);
	font-variant-numeric: tabular-nums;
}

/* ---------- topic sections ---------- */

.cx-citations-hub__topic {
	margin-bottom: 3rem;
}

.cx-citations-hub__topic.hidden {
	display: none;
}

.cx-citations-hub__topic-head {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	border-bottom: 2px solid var(--cxh-ink);
	padding-bottom: 0.6rem;
	margin-bottom: 0.4rem;
}

.cx-citations-hub__topic-head h2 {
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0;
}

.cx-citations-hub__apply {
	font-size: 0.85rem;
	color: var(--cxh-muted);
	margin-left: auto;
	white-space: nowrap;
	text-decoration: none;
}

.cx-citations-hub__scope {
	font-size: 0.95rem;
	color: var(--cxh-muted);
	max-width: 70ch;
	margin: 0.6rem 0 0.4rem;
}

/* !important on list-style: this widget renders inside arbitrary theme
 * content areas, and theme stylesheets commonly reset "ol/li" numbering
 * with a selector specific enough to beat a plain class here — leaving the
 * browser's native decimal marker showing alongside our own ::before
 * counter (the reported "numbers appear twice" bug). Suppressing it
 * unconditionally is required, not optional, since the counter below is
 * how numbering is meant to work. */
.cx-citations-hub__reflist,
.cx-citations-hub__reflist li {
	list-style: none !important;
	list-style-type: none !important;
	list-style-image: none !important;
}

.cx-citations-hub__reflist {
	counter-reset: cxh-ref var(--cxh-offset, 0);
	margin: 0;
	padding: 0;
}

.cx-citations-hub__ref {
	counter-increment: cxh-ref;
	position: relative;
	padding: 1rem 0.5rem 1rem 3.2rem;
	border-bottom: 1px solid var(--cxh-rule);
}

.cx-citations-hub__ref.hidden {
	display: none;
}

.cx-citations-hub__ref::before {
	content: counter(cxh-ref);
	position: absolute;
	left: 0.35rem;
	top: 1.1rem;
	font-size: 0.8rem;
	color: var(--cxh-muted);
	font-variant-numeric: tabular-nums;
}

.cx-citations-hub__ref:hover {
	background: var(--cxh-wash);
}

.cx-citations-hub__ref-title {
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.45;
	margin: 0;
	overflow-wrap: anywhere;
}

.cx-citations-hub__ref-title a {
	text-decoration: none;
}

.cx-citations-hub__ref-title a:hover {
	text-decoration: underline;
	text-decoration-color: rgba(14, 143, 168, 0.5);
}

.cx-citations-hub__ref-meta {
	font-size: 0.9rem;
	color: var(--cxh-muted);
	margin: 0.2rem 0 0;
	font-style: italic;
	overflow-wrap: anywhere;
}

.cx-citations-hub__ref-year {
	font-style: normal;
}

.cx-citations-hub__ref-foot {
	margin: 0.5rem 0 0;
	font-size: 0.8rem;
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
	align-items: center;
}

.cx-citations-hub__doi {
	color: var(--cxh-muted);
	text-decoration: none;
}

.cx-citations-hub__doi:hover {
	color: var(--cxh-cyan);
}

.cx-citations-hub__model {
	display: inline-block;
	padding: 0.15rem 0.6rem;
	border: 1px solid var(--cxh-rule);
	border-radius: 99px;
	background: #fff;
	color: var(--cxh-blue);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.8rem;
}

.cx-citations-hub__model:hover {
	border-color: var(--cxh-cyan);
	color: var(--cxh-cyan);
}

.cx-citations-hub__showmore {
	margin: 0.75rem 0 0;
	background: none;
	border: 1px solid var(--cxh-rule);
	border-radius: 4px;
	padding: 0.4rem 0.9rem;
	font-size: 0.85rem;
	color: var(--cxh-blue);
	cursor: pointer;
}

.cx-citations-hub__showmore:hover {
	border-color: var(--cxh-cyan);
	color: var(--cxh-cyan);
}

/* ---------- how to cite / FAQ ---------- */

.cx-citations-hub__cite {
	border: 1px solid var(--cxh-rule);
	background: #fff;
	padding: 1.4rem 1.6rem;
	max-width: 760px;
	margin: 0 0 3rem;
}

.cx-citations-hub__cite h2 {
	font-size: 1.2rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
}

.cx-citations-hub__cite p {
	font-size: 0.95rem;
	color: #243756;
	max-width: 65ch;
	margin: 0;
}

.cx-citations-hub__cite code {
	font-size: 0.85rem;
	background: var(--cxh-wash);
	padding: 0.1rem 0.35rem;
	border-radius: 3px;
}

.cx-citations-hub__faq {
	max-width: 760px;
}

.cx-citations-hub__faq h2 {
	font-size: 1.5rem;
	font-weight: 600;
	border-bottom: 2px solid var(--cxh-ink);
	padding-bottom: 0.6rem;
	margin: 0 0 0.4rem;
}

.cx-citations-hub__faq details {
	border-bottom: 1px solid var(--cxh-rule);
}

.cx-citations-hub__faq summary {
	cursor: pointer;
	padding: 0.9rem 0.2rem;
	font-size: 1.05rem;
	font-weight: 500;
	list-style: none;
}

.cx-citations-hub__faq summary::-webkit-details-marker {
	display: none;
}

.cx-citations-hub__faq summary::after {
	content: "+";
	float: right;
	color: var(--cxh-muted);
}

.cx-citations-hub__faq details[open] summary::after {
	content: "\2013";
}

.cx-citations-hub__faq details p {
	padding: 0 0.2rem 1rem;
	font-size: 0.95rem;
	color: #243756;
	max-width: 68ch;
	margin: 0;
}

@media (max-width: 900px) {
	.cx-citations-hub__body {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.cx-citations-hub__toc {
		position: static;
	}
	.cx-citations-hub__toc ol {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
	}
	.cx-citations-hub__toc li,
	.cx-citations-hub__toc li:last-child {
		border: 1px solid var(--cxh-rule);
		border-radius: 99px;
	}
	.cx-citations-hub__toc a {
		padding: 0.4rem 0.9rem;
	}
	.cx-citations-hub__toc-n {
		display: none;
	}
	.cx-citations-hub__apply {
		display: none;
	}
}

/* ---------- source-type badge, unspecified model, preprint link ---------- */

.cx-citations-hub__badge {
	display: inline-block;
	padding: 0.1rem 0.5rem;
	border: 1px solid var(--cxh-rule);
	border-radius: 4px;
	background: #fff;
	color: var(--cxh-muted);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.cx-citations-hub__badge--journal {
	color: var(--cxh-blue);
	border-color: #c8d9ee;
	background: var(--cxh-wash);
}

.cx-citations-hub__badge--preprint {
	color: #8a5a00;
	border-color: #ecd9a8;
	background: #fdf6e3;
}

.cx-citations-hub__badge--thesis {
	color: #4b3f8f;
	border-color: #d8d3f0;
	background: #f3f1fb;
}

.cx-citations-hub__model--none {
	color: var(--cxh-muted);
	border-style: dashed;
	font-weight: 400;
}

.cx-citations-hub__preprint {
	font-size: 0.8rem;
	color: var(--cxh-muted);
}

/* ---------- filter button, subline, topic intro, pager ---------- */
.cx-citations-hub__go {
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--cxh-rule);
	background: #fff;
	font-size: 0.9rem;
	border-radius: 4px;
	color: var(--cxh-ink);
	cursor: pointer;
}

.cx-citations-hub__clear {
	font-size: 0.85rem;
	color: var(--cxh-muted);
}

/* Same look as the page's own intro paragraph (.entry-content > p above). */
.cx-citations-hub__subline {
	text-align: center;
	font-size: 1.1rem;
	line-height: 1.65;
	color: #243756;
	max-width: 70ch;
	margin: 0 auto 1rem;
}

.cx-citations-hub__subline a {
	color: #1d4e89;
	text-underline-offset: 3px;
}

.cx-citations-hub__intro {
	max-width: 70ch;
	margin: 0.6rem 0 1rem;
	color: var(--cxh-ink);
}

.cx-citations-hub__viewall {
	margin: 1rem 0 0;
	font-weight: 600;
}

.cx-citations-hub__empty {
	color: var(--cxh-muted);
	margin: 1.5rem 0;
}

.cx-citations-hub__pager {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
	margin: 1.5rem 0 0;
}

.cx-citations-hub__pager a,
.cx-citations-hub__pager-current {
	min-width: 2.1rem;
	padding: 0.35rem 0.6rem;
	border: 1px solid var(--cxh-rule);
	border-radius: 4px;
	text-align: center;
	text-decoration: none;
	font-size: 0.9rem;
}

.cx-citations-hub__pager-current {
	background: var(--cxh-ink);
	color: #fff;
	border-color: var(--cxh-ink);
}

.cx-citations-hub__pager-gap {
	color: var(--cxh-muted);
}

/* Topic pages and empty filter results have no topic index: use the full width. */
.cx-citations-hub__body--single {
	grid-template-columns: minmax(0, 1fr);
}