/**
 * Article 2026 — scoped styles for the redesigned single.html template.
 *
 * Every selector starts with .telyrx-article-2026. No exceptions.
 * Loads only on non-medication post pages; never on single-medication.html
 * or any other template.
 *
 * @package TelyRx_Blog
 */

/* =========================================================================
   Foundation — body class, layout grid, max widths
   ========================================================================= */

.telyrx-article-2026 {
	/* Opt out of Chrome's Auto Dark Mode (chrome://flags/enable-force-dark)
	   which silently rewrites color/background-color on a/heading/etc.
	   and ignores even inline !important. This template is designed
	   light-only; declaring it explicitly preserves our colors. */
	color-scheme: light only;
	/* Inherits theme.json's contentSize (1344px) so header logo,
	   hero, and related-articles all share a left edge. */
	--article-content-max: 1344px;
	--article-sidebar-width: 327px;
	--article-gutter: 48px;
	--article-text-color: var(--wp--preset--color--neutral-dark);
	--article-link-color: var(--wp--preset--color--indigo-light);
	/* Editorial serif stack — system fonts only, zero bytes loaded.
	   Mirrors Hedvig Letters Serif character (humanist, editorial). */
	--article-serif: "Charter", "Iowan Old Style", "Sitka Text", Cambria, Georgia, serif;

	background: var(--wp--preset--color--background);
	color: var(--article-text-color);
}

/* Body content zone — two-column grid on desktop, stacked on mobile.
   Matches the hero/related-articles container math so the sidebar's
   left edge aligns with the hero breadcrumbs/H1 and the header logo:
   outer box is contentSize+(gutter*2) wide centered, gutter applied
   as padding inside, so inner content (sidebar) sits at the same
   horizontal position as content inside the hero. */
.telyrx-article-2026 .article-body {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
	max-width: calc(var(--article-content-max) + (var(--article-gutter) * 2));
	margin: 0 auto;
	padding-inline: var(--article-gutter);
}

/* Grid items default to min-width: auto, so a descendant with
   min-width: max-content (the mobile horizontal TOC list) forces
   the track wider than the viewport. Pin both tracks to min-width: 0
   so the TOC's internal overflow-x: auto can contain the scroll. */
.telyrx-article-2026 .article-body__sidebar,
.telyrx-article-2026 .article-body__main {
	min-width: 0;
}

@media (min-width: 960px) {
	.telyrx-article-2026 .article-body {
		grid-template-columns: var(--article-sidebar-width) 1fr;
		gap: clamp(40px, 5vw, 96px);
	}
}

/* Print: hide chrome, keep body content */
@media print {
	.telyrx-article-2026 .telyrx-toc-sidebar,
	.telyrx-article-2026 .related-articles-2026 {
		display: none;
	}
}

/* Focus rings for all interactive elements inside the scope */
.telyrx-article-2026 a:focus-visible,
.telyrx-article-2026 button:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* =========================================================================
   Hero — attribution cards (overlapping avatars + stacked lines)
   ========================================================================= */

.telyrx-article-2026 .article-hero__attribution {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
}

.telyrx-article-2026 .article-hero__avatars {
	display: flex;
	flex-shrink: 0;
}

.telyrx-article-2026 .article-hero__avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--background);
	object-fit: cover;
}

@media (min-width: 768px) {
	.telyrx-article-2026 .article-hero__avatar {
		width: 48px;
		height: 48px;
	}
}

.telyrx-article-2026 .article-hero__avatar--reviewer {
	margin-inline-start: -12px;
}

.telyrx-article-2026 .article-hero__attribution-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.telyrx-article-2026 .article-hero__attribution-line {
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	color: var(--article-text-color);
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}

.telyrx-article-2026 .article-hero__attribution-link {
	color: var(--article-link-color);
	text-decoration: none;
}

.telyrx-article-2026 .article-hero__attribution-link:hover {
	text-decoration: underline;
}

.telyrx-article-2026 .article-hero__verified {
	flex-shrink: 0;
}

.telyrx-article-2026 .article-hero__attribution-line--date {
	color: var(--article-text-color);
}

/* Mobile byline tidy-up: stack label above name+suffix so long suffixes
   (e.g. "Reviewed by: Ashley Robinson, PharmD, Pharmacy Manager, TelyRx")
   read as a clean two-row block instead of wrapping mid-sentence. The
   "Last updated" line keeps its inline label since the date is always
   short. */
@media (max-width: 781px) {
	.telyrx-article-2026 .article-hero__attribution-line:not(.article-hero__attribution-line--date) {
		flex-direction: column;
		align-items: flex-start;
		row-gap: 0;
	}
}

/* Keep the verified badge glued to the end of the name+suffix string
   (now lives inside .article-hero__attribution-name as inline content). */
.telyrx-article-2026 .article-hero__attribution-name .article-hero__verified {
	display: inline-block;
	vertical-align: -3px;
	margin-left: 2px;
}

/* =========================================================================
   Hero — outer group, columns, title, image
   ========================================================================= */

.telyrx-article-2026 .article-hero {
	background: var(--wp--preset--color--indigo-bg);
}

.telyrx-article-2026 .article-hero__title.wp-block-post-title {
	font-family: var(--article-serif);
	font-size: clamp(2rem, 4vw + 1rem, 3.5rem);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--primary);
}

.telyrx-article-2026 .article-hero__columns {
	gap: var(--wp--preset--spacing--50);
}

@media (max-width: 781px) {
	.telyrx-article-2026 .article-hero__columns {
		flex-direction: column;
	}
	.telyrx-article-2026 .article-hero__image-col {
		order: 2;
	}
	.telyrx-article-2026 .article-hero__text {
		order: 1;
	}
}

.telyrx-article-2026 .article-hero__image .wp-post-image {
	border-radius: 16px 16px 16px 0;
	object-fit: cover;
	width: 100%;
	height: auto;
}

/* Yoast breadcrumbs spacing within hero — sized to match Figma. */
.telyrx-article-2026 .article-hero .yoast-breadcrumbs,
.telyrx-article-2026 .article-hero .wp-block-yoast-seo-breadcrumbs {
	font-size: 16px;
	line-height: 24px;
	margin-bottom: var(--wp--preset--spacing--50);
	color: var(--article-text-color);
}

.telyrx-article-2026 .article-hero .yoast-breadcrumbs a,
.telyrx-article-2026 .article-hero .wp-block-yoast-seo-breadcrumbs a {
	color: var(--article-text-color);
	text-decoration: none;
}

.telyrx-article-2026 .article-hero .yoast-breadcrumbs a:hover,
.telyrx-article-2026 .article-hero .wp-block-yoast-seo-breadcrumbs a:hover {
	text-decoration: underline;
}

/* Current-page crumb (Yoast renders it as <span class="breadcrumb_last">)
   in primary indigo so the user sees where they are. */
.telyrx-article-2026 .article-hero .yoast-breadcrumbs .breadcrumb_last,
.telyrx-article-2026 .article-hero .wp-block-yoast-seo-breadcrumbs .breadcrumb_last {
	color: var(--wp--preset--color--primary);
	font-weight: 500;
}

/* =========================================================================
   TOC Sidebar — desktop vertical / mobile horizontal sub-nav
   ========================================================================= */

.telyrx-article-2026 .telyrx-toc-sidebar {
	background: var(--wp--preset--color--background);
}

.telyrx-article-2026 .telyrx-toc-sidebar__heading {
	margin: 0 0 var(--wp--preset--spacing--20) 0;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
}

.telyrx-article-2026 .telyrx-toc-sidebar__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.telyrx-article-2026 .telyrx-toc-sidebar__list li {
	margin: 0;
}

.telyrx-article-2026 .telyrx-toc-sidebar__link {
	display: block;
	padding: 8px 16px;
	font-size: 16px;
	line-height: 1.4;
	color: var(--article-text-color);
	text-decoration: none;
	border-inline-start: 4px solid transparent;
	transition: background-color 200ms, border-color 200ms, color 200ms;
}

.telyrx-article-2026 .telyrx-toc-sidebar__link:hover {
	background: var(--wp--preset--color--indigo-bg);
	color: var(--wp--preset--color--primary);
}

.telyrx-article-2026 .telyrx-toc-sidebar__link.is-active {
	background: var(--wp--preset--color--indigo-bg);
	border-inline-start-color: var(--wp--preset--color--indigo-light);
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

/* Desktop: sticky vertical sidebar.
   Sticky is applied to the grid item so the TOC and the newsletter CTA
   pin together as a single unit. The TOC has its own max-height that
   reserves --sidebar-cta-reserve px below for the newsletter card, so
   long TOCs scroll internally instead of running under the card. */
@media (min-width: 960px) {
	.telyrx-article-2026 .article-body__sidebar {
		--sidebar-cta-reserve: 240px;
		position: sticky;
		top: var(--wp--preset--spacing--40);
		align-self: start;
	}

	.telyrx-article-2026 .article-body__sidebar > .telyrx-toc-sidebar {
		max-height: calc(100vh - var(--wp--preset--spacing--40) * 2 - var(--sidebar-cta-reserve));
		overflow-y: auto;
	}
}

/* Mobile: sticky horizontal sub-nav.
   Sticky is on the grid item, not the inner <nav>. The <nav>'s parent box
   on mobile (.article-body__sidebar) is only as tall as the nav itself, so
   sticky on the <nav> has no room to actually stick. Promoting sticky to the
   grid item gives it .article-body as the containing block — that's tall
   enough to keep the nav pinned through the article body. */
@media (max-width: 959px) {
	.telyrx-article-2026 .article-body__sidebar {
		position: sticky;
		top: 0;
		z-index: 10;
	}

	.telyrx-article-2026 .telyrx-toc-sidebar {
		margin-inline: calc(var(--article-gutter) * -1);
		padding-inline: var(--article-gutter);
		padding-block: var(--wp--preset--spacing--20);
		border-bottom: 1px solid var(--wp--preset--color--border);
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
	}

	.telyrx-article-2026 .telyrx-toc-sidebar__heading {
		display: none;
	}

	.telyrx-article-2026 .telyrx-toc-sidebar__list {
		display: flex;
		flex-direction: row;
		gap: 0;
		min-width: max-content;
	}

	.telyrx-article-2026 .telyrx-toc-sidebar__link {
		white-space: nowrap;
		padding: 8px 16px;
		border-inline-start: 0;
		border-bottom: 4px solid transparent;
		scroll-snap-align: center;
	}

	.telyrx-article-2026 .telyrx-toc-sidebar__link.is-active {
		border-bottom-color: var(--wp--preset--color--indigo-light);
		border-inline-start-color: transparent;
		background: transparent;
	}
}

/* =========================================================================
   Sidebar CTA — newsletter card below the TOC
   =========================================================================
   The email-signup block (sidebar layout) sits beneath the TOC sidebar on
   desktop. On mobile the sidebar collapses into a sticky horizontal TOC
   sub-nav (overflow-x scroller), so the CTA hides — mobile users see the
   identical newsletter form in the footer. */
.telyrx-article-2026 .article-body__sidebar > .telyrx-email-cta--sidebar {
	margin-block-start: var(--wp--preset--spacing--40);
}

@media (max-width: 959px) {
	.telyrx-article-2026 .article-body__sidebar > .telyrx-email-cta--sidebar {
		display: none;
	}
}

/* =========================================================================
   Our Experts — bio cards
   ========================================================================= */

.telyrx-article-2026 .our-experts {
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--border);
}

.telyrx-article-2026 .our-experts__heading {
	font-family: var(--article-serif);
	font-size: 24px;
	line-height: 32px;
	color: var(--wp--preset--color--primary);
	margin: 0 0 var(--wp--preset--spacing--40) 0;
	font-weight: 400;
	letter-spacing: -0.01em;
}

.telyrx-article-2026 .our-experts__card {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	margin-block-end: var(--wp--preset--spacing--40);
}

.telyrx-article-2026 .our-experts__avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
}

.telyrx-article-2026 .our-experts__body {
	flex: 1;
}

.telyrx-article-2026 .our-experts__role {
	margin: 0;
	font-size: 14px;
	color: var(--wp--preset--color--muted);
}

.telyrx-article-2026 .our-experts__name {
	margin: 0 0 4px 0;
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
}

.telyrx-article-2026 .our-experts__name a {
	color: var(--wp--preset--color--indigo-light);
	text-decoration: none;
}

.telyrx-article-2026 .our-experts__bio {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--article-text-color);
}

/* =========================================================================
   Inline Related Callout — author-insertable yellow inline pill
   ========================================================================= */

/* Background uses amber-light (#ffe8bf) — darker / more saturated
   than amber-bg (#fff7e8) per Eric review. !important forces this
   on existing inserted instances that still carry the older
   has-amber-bg-background-color class. */
.telyrx-article-2026 .inline-related-callout {
	background: var(--wp--preset--color--amber-light) !important;
}

.telyrx-article-2026 .inline-related-callout p {
	margin: 0;
	/* Override block-attr inline font-size on existing instances so
	   they pick up the larger Figma size (was 16px, now 18px). */
	font-size: 18px !important;
	line-height: 28px !important;
}

/* Match Figma's Inter SemiBold (600) for the "Related:" label.
   Targets both the new <span class="...__label"> emitted by the
   updated pattern AND the legacy <strong> emitted by pre-update
   pattern instances that already live in author content, so existing
   posts pick up the visual change without re-insertion. */
.telyrx-article-2026 .inline-related-callout .inline-related-callout__label,
.telyrx-article-2026 .inline-related-callout strong {
	font-weight: 600;
}

/* Link color uses primary indigo (#1d2e8a — dark) instead of the
   article body's lighter --article-link-color. Selector uses the
   #article-content ID to outweigh the generic .wp-block-post-content
   a rule that lives later in the cascade. Underline preserved. */
#article-content .inline-related-callout a {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

/* =========================================================================
   Mid-Content CTA — author-insertable boxed call-to-action
   ========================================================================= */

.telyrx-article-2026 .mid-content-cta {
	text-align: left;
}

.telyrx-article-2026 .mid-content-cta .mid-content-cta__headline {
	font-family: var(--article-serif);
	color: var(--wp--preset--color--primary);
	margin-block-start: 0;
	text-align: left;
}

.telyrx-article-2026 .mid-content-cta .wp-block-buttons {
	justify-content: flex-start;
}

/* Override-with-!important for existing block instances that were
   inserted from an earlier pattern version. WordPress block attrs
   serialize as inline styles which beat normal class selectors —
   only !important can pull them back. New insertions from the
   updated pattern file emit the larger values directly. */
.telyrx-article-2026 .mid-content-cta {
	padding-inline: 32px !important;
}

.telyrx-article-2026 .mid-content-cta .mid-content-cta__headline {
	font-size: 32px !important;
	line-height: 44px !important;
}

.telyrx-article-2026 .mid-content-cta .wp-block-button__link {
	padding: 8px 16px !important;
	line-height: 20px !important;
	/* Figma button text color — brownish amber-dark (#7a5a12) that
	   harmonizes with the amber-yellow background. Not in theme.json's
	   palette so it's hardcoded. !important required because the
	   block emits has-text-color + has-neutral-dark-color classes that
	   set color with !important via WP core. */
	color: #7a5a12 !important;
	text-decoration: none !important;
	transition: background-color 200ms ease;
}

/* Hover + keyboard-focus state — lightens the background to amber-light
   for clear affordance. !important required to beat WP core's
   .has-accent-amber-background-color !important rule. */
.telyrx-article-2026 .mid-content-cta .wp-block-button__link:hover,
.telyrx-article-2026 .mid-content-cta .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--amber-light) !important;
}

/* =========================================================================
   Related Articles 2026 — light-blue rounded section, 6-card grid
   ========================================================================= */

.telyrx-article-2026 + .related-articles-2026,
.telyrx-article-2026 .related-articles-2026 {
	background: var(--wp--preset--color--indigo-bg);
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}

.telyrx-article-2026 .related-articles-2026__heading {
	font-family: var(--article-serif);
	font-size: 2.5rem;
	line-height: 1.15;
	font-weight: 400;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--primary);
	margin: 0 0 var(--wp--preset--spacing--50) 0;
}

.telyrx-article-2026 .related-articles-2026__card {
	background: transparent;
	gap: 16px;
	align-items: flex-start;
}

/* Clear the default block-flow top margin WP applies to <li>+<li>.
   In a grid, that margin offsets the second column down so row tops
   don't line up across cards. */
.telyrx-article-2026 .related-articles-2026__list > li {
	margin: 0;
}

.telyrx-article-2026 .related-articles-2026__thumb img {
	border-radius: 8px 0 8px 8px;
	object-fit: cover;
	width: 192px;
	height: 144px;
	flex-shrink: 0;
}

.telyrx-article-2026 .related-articles-2026__meta {
	flex: 1;
	min-width: 0;
	gap: 8px;
}

.telyrx-article-2026 .related-articles-2026__badge.wp-block-post-terms {
	display: inline-block;
	background: var(--wp--preset--color--indigo-bg-alt);
	color: var(--wp--preset--color--primary);
	font-size: 14px;
	font-weight: 500;
	padding: 0 12px;
	border-radius: 20px;
	line-height: 24px;
	/* Hug the term text, but never wider than the card column. `width: max-content`
	   used to be here — it made the badge force a min-content track wider than the
	   viewport when a post was in multiple categories (now also filtered to the
	   primary category by telyrx_post_terms_primary_category_only()). */
	align-self: flex-start;
	max-width: 100%;
	overflow-wrap: anywhere;
}

.telyrx-article-2026 .related-articles-2026__badge a {
	color: inherit;
	text-decoration: none;
}

.telyrx-article-2026 .related-articles-2026__title.wp-block-post-title {
	font-size: 18px;
	line-height: 24px;
	font-weight: 600;
	margin: 0;
	/* Allow long single words (medication names, compound terms) to break
	   so they cannot widen the card past its grid column on narrow viewports. */
	overflow-wrap: anywhere;
	hyphens: auto;
}

.telyrx-article-2026 .related-articles-2026__title a {
	color: var(--article-text-color);
	text-decoration: none;
}

.telyrx-article-2026 .related-articles-2026__date {
	font-size: 14px;
	color: var(--wp--preset--color--muted);
}

/* 2-column grid on desktop, single column on mobile.
   Uses minmax(0, 1fr) instead of bare 1fr so the track can shrink below
   its content's min-content width — otherwise a single oversized child
   (long badge, unbreakable title word) would expand the track past the
   viewport and the page-level overflow-x: clip would silently chop it. */
.telyrx-article-2026 .related-articles-2026__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 781px) {
	.telyrx-article-2026 .related-articles-2026__list {
		grid-template-columns: minmax(0, 1fr);
		/* Figma mobile spec: 24px between cards (desktop preset --spacing--40 is 16px). */
		gap: 24px;
	}
}

/* Left-align the "All articles" CTA — overrides existing instances with justifyContent:center */
.telyrx-article-2026 .related-articles-2026 .wp-block-buttons {
	justify-content: flex-start;
}

/* ---------------------------------------------------------------------------
   Mobile spec — Figma node 2288:8601 (TelyRx Blog → Related Articles, mobile)
   - Section padding tightens from 48px to 20px so the cards have room
   - Thumbnail shrinks from 192×144 to a 100×100 square
   - Card gap from 16px to 12px
   - "All articles" button stretches full-width
   --------------------------------------------------------------------------- */
@media (max-width: 781px) {
	/* Override the inline padding-left/right:48px set by the pattern's block markup. */
	.telyrx-article-2026 .related-articles-2026.wp-block-group {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/* Heading switches from the desktop serif treatment (40px Charter, indigo)
	   to the Figma mobile spec: 28px / 36px sans-serif semibold, gray-80, with
	   a 36px gap to the card grid. */
	.telyrx-article-2026 .related-articles-2026__heading {
		font-family: var(--wp--preset--font-family--urbanist, "Urbanist", sans-serif);
		font-size: 28px;
		line-height: 36px;
		font-weight: 600;
		letter-spacing: -0.04em;
		color: #2f3335;
		margin: 0 0 36px 0;
	}

	.telyrx-article-2026 .related-articles-2026__card {
		gap: 12px;
	}

	/* Featured-image block sets inline width:192px/height:144px and
	   aspect-ratio:4/3 on the figure. Override to a 100px square on mobile and
	   clip the inner img — WP's inline `width:100%;height:100%` on the img
	   loses to the desktop selector's explicit `height: 144px` (same
	   specificity, later source wins), so the img would otherwise render
	   100×144 and bleed into the gap below, squishing the cards together.
	   Top-right corner stays sharp to match the desktop notched look. */
	.telyrx-article-2026 .related-articles-2026__thumb.wp-block-post-featured-image {
		width: 100px !important;
		height: 100px !important;
		aspect-ratio: 1 / 1 !important;
		flex-shrink: 0;
		overflow: hidden;
	}

	.telyrx-article-2026 .related-articles-2026__thumb img {
		/* Explicit pixels (not %) — WP's inline `height:100%` on the img
		   was resolving to the image's intrinsic 144px height instead of
		   the figure's 100px height, even with !important. */
		width: 100px !important;
		height: 100px !important;
		border-radius: 8px 0 8px 8px;
	}

	/* Full-bleed CTA on mobile, matching the Figma button. */
	.telyrx-article-2026 .related-articles-2026__cta,
	.telyrx-article-2026 .related-articles-2026__cta .wp-block-button,
	.telyrx-article-2026 .related-articles-2026__cta .wp-block-button__link {
		width: 100%;
	}

	.telyrx-article-2026 .related-articles-2026__cta .wp-block-button__link {
		text-align: center;
	}
}

/* All articles button — match mid-content-cta hover affordance.
   amber-yellow → amber-light on hover/keyboard-focus. !important
   beats WP core's .has-accent-amber-background-color !important. */
.telyrx-article-2026 .related-articles-2026 .wp-block-button__link {
	color: #7a5a12 !important;
	text-decoration: none !important;
	transition: background-color 200ms ease;
}

.telyrx-article-2026 .related-articles-2026 .wp-block-button__link:hover,
.telyrx-article-2026 .related-articles-2026 .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--amber-light) !important;
}

/* =========================================================================
   Post Content — typography overrides scoped to the article body
   ========================================================================= */

.telyrx-article-2026 .article-body__main .wp-block-post-content {
	font-size: 16px;
	line-height: 1.5;
}

.telyrx-article-2026 .article-body__main .wp-block-post-content h2 {
	font-size: 2.5rem;
	line-height: 1.2;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
	scroll-margin-top: 120px;
}

.telyrx-article-2026 .article-body__main .wp-block-post-content h3 {
	font-family: var(--article-serif);
	font-size: 2rem;
	line-height: 1.25;
	font-weight: 400;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--primary);
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

.telyrx-article-2026 .article-body__main .wp-block-post-content p {
	margin-block: 0 var(--wp--preset--spacing--30);
}

/* Generic post-content links — indigo + underlined.
   Exclude button anchors so they keep their block-attr styling
   (background color, padding, etc.) without getting the inline
   indigo/underline that body links use. */
.telyrx-article-2026 .article-body__main .wp-block-post-content a:not(.wp-element-button):not(.wp-block-button__link) {
	color: var(--article-link-color);
	text-decoration: underline;
}

.telyrx-article-2026 .article-body__main .wp-block-post-content blockquote {
	font-family: var(--article-serif);
	font-size: 24px;
	line-height: 36px;
	color: var(--wp--preset--color--primary);
	font-weight: 400;
	letter-spacing: -0.01em;
	margin-inline: 0;
	padding-inline: 0;
	border: none;
	font-style: normal;
}

.telyrx-article-2026 .article-body__main .wp-block-post-content blockquote cite {
	display: block;
	margin-top: var(--wp--preset--spacing--30);
	font-size: 16px;
	font-weight: 600;
	color: var(--article-text-color);
	font-style: normal;
}

/* Constrain ALL post-content images to the column width.
   Targets <img> directly (not just figure.wp-block-image img) because
   some imported/legacy posts render images inside <figure> elements
   with no class, or as bare <img> tags. */
.telyrx-article-2026 .article-body__main .wp-block-post-content img {
	max-width: 100%;
	height: auto;
}

.telyrx-article-2026 .article-body__main .wp-block-post-content figure img {
	border-radius: 16px;
}

.telyrx-article-2026 .article-body__main .wp-block-post-content figure.wp-block-image figcaption {
	color: var(--wp--preset--color--muted);
	font-size: 14px;
	font-style: italic;
	margin-block-start: 8px;
}

.telyrx-article-2026 .article-body__main .wp-block-post-content h4 {
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

.telyrx-article-2026 .article-body__main .wp-block-post-content ul,
.telyrx-article-2026 .article-body__main .wp-block-post-content ol {
	margin-block: 0 var(--wp--preset--spacing--30);
	padding-inline-start: 24px;
}

.telyrx-article-2026 .article-body__main .wp-block-post-content li {
	margin-block: 0 8px;
	font-size: 16px;
	line-height: 24px;
}

.telyrx-article-2026 .article-body__main .wp-block-post-content li::marker {
	color: var(--wp--preset--color--neutral-dark);
}

/* Tables — see assets/css/custom.css `Blog content tables` section for
   the shared styles used by both this template and single-medication.html. */

/* =========================================================================
   Section ID wrappers — hide when their pattern returned nothing
   =========================================================================
   #hero-excerpt and #hero-subtitle are wrapper groups around their respective
   patterns (which can return empty if post_excerpt / telyrx_subtitle aren't
   set). The wrapper would render as an empty <div> on those posts; hide it.
   ========================================================================= */

.telyrx-article-2026 #hero-excerpt:not(:has(*)),
.telyrx-article-2026 #hero-subtitle:not(:has(*)) {
	display: none;
}