/**
 * viewNexa Blogs — single blog post shortcodes.
 *
 * Fonts are inherited from the theme. Colors are CSS variables; override them
 * in Divi > Theme Options > Custom CSS, e.g.:
 *   body .vnb-single-header { --vnb-primary: #35d0f0; }
 */

/* [single-blog-header] */
.vnb-single-header {
	--vnb-primary: #35d0f0;
	--vnb-text: #ffffff;
	--vnb-muted: rgba(255, 255, 255, 0.7);

	max-width: 1200px;
	margin: 0 auto;
	color: var(--vnb-text);
	font-family: inherit;
	text-align: center;
}

.vnb-single-header .vnb-single-header__title {
	margin: 0 0 32px;
	padding: 0;
	color: var(--vnb-text);
	font-size: clamp(28px, 1.2rem + 2.4vw, 48px);
	font-weight: 700;
	line-height: 1.2;
}

.vnb-single-header__highlight {
	color: var(--vnb-primary);
}

.vnb-single-header__author {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	text-align: left;
}

.vnb-single-header__avatar {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: linear-gradient(135deg, #1EC8F5, #C13EE0);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	border: 2px solid #1EC8F5;
}

.vnb-single-header__info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.vnb-single-header__name {
	color: var(--vnb-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.vnb-single-header__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	color: var(--vnb-muted);
	font-size: 13px;
	font-weight: 300;
	line-height: 1.3;
}

.vnb-single-header__dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--vnb-primary);
}

/* [single-blog-related] — cards match the [viewnexa_blogs] listing cards. */
.vnb-related {
	--vnb-primary: #35d0f0;
	--vnb-text: #ffffff;
	--vnb-muted: rgba(255, 255, 255, 0.7);

	color: var(--vnb-text);
	font-family: inherit;
}

.vnb-related *,
.vnb-related *::before,
.vnb-related *::after {
	box-sizing: border-box;
}

.vnb-related__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: clamp(24px, 3vw, 40px);
}

.vnb-related .vnb-related__title {
	position: relative;
	margin: 0;
	padding: 20px 0 0;
	color: var(--vnb-text);
	font-size: clamp(24px, 3vw, 36px);
	font-weight: 700;
	line-height: 1.2;
}

.vnb-related .vnb-related__title::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: clamp(50px, 5vw, 64px);
	height: clamp(2px, 0.2vw, 3px);
	border-radius: 2px;
	background: var(--vnb-primary);
}

.vnb-related__highlight {
	color: var(--vnb-primary);
}

.vnb-related .vnb-related__all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--vnb-primary);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.vnb-related__all span {
	display: inline-flex;
	transition: transform 0.2s;
}

.vnb-related__all:hover span {
	transform: translateX(4px);
}

.vnb-related__all svg {
	display: block;
	width: 13px;
	height: 13px;
}

/* Grid until Swiper starts (it only does on mobile). The :not(.swiper-initialized)
   selector also outranks Swiper's own ".swiper-wrapper { display: flex }". */
.vnb-related__slider:not(.swiper-initialized) {
	overflow: visible; /* Don't clip the cards' hover lift. */
}

.vnb-related__slider:not(.swiper-initialized) .vnb-related__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

/* Controls (arrows + dots) are only used on mobile; see the 600px media query. */
.vnb-related .vnb-related__controls {
	display: none;
}

/* Swiper's ".swiper-slide" sets display:block, height:100% and its own
   transition; keep the card's flex layout (footer at the bottom) and hover effect. */
.vnb-related .vnb-related-card.swiper-slide {
	display: flex;
	height: auto;
	transition: all 0.5s ease-in-out;
}

/* Mobile carousel (Swiper running). The core carousel rules are repeated here
   so the slider is clipped to its own width even if Swiper's stylesheet loads
   late or is deferred by an optimizer — otherwise the slides overflow and the
   whole section scrolls sideways. */
.vnb-related .vnb-related__slider.swiper-initialized {
	position: relative;
	overflow: hidden;
	width: 100%;
	touch-action: pan-y;
}

.vnb-related .vnb-related__slider.swiper-initialized .vnb-related__grid {
	display: flex;
	box-sizing: content-box;
	width: 100%;
	height: 100%;
	transition-property: transform;
}

.vnb-related .vnb-related__slider.swiper-initialized .vnb-related-card {
	flex-shrink: 0;
}

.vnb-related__slider.swiper-initialized .vnb-related-card {
	height: auto; /* Equal-height slides. */
}

.vnb-related__slider.swiper-initialized .vnb-related-card:hover {
	transform: none;
}

/* Controls below the slides: ← dots → */
.vnb-related__controls {
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 20px;
}

.vnb-related .vnb-related__prev,
.vnb-related .vnb-related__next {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid #28336C;
	border-radius: 50%;
	background: transparent;
	color: var(--vnb-primary);
	cursor: pointer;
	transition: border-color 0.2s, opacity 0.2s;
}

.vnb-related .vnb-related__prev:hover,
.vnb-related .vnb-related__next:hover {
	border-color: var(--vnb-primary);
}

/* Swiper marks the arrows disabled at the first/last slide. */
.vnb-related .vnb-related__prev.swiper-button-disabled,
.vnb-related .vnb-related__next.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
}

.vnb-related .vnb-related__pagination {
	position: static;
	display: flex; /* gap only works on flex/grid containers. */
	align-items: center;
	gap: 4px;
	width: auto;
	line-height: 0;
}

.vnb-related .vnb-related__pagination .swiper-pagination-bullet {
	margin: 0 !important; /* Swiper's side margins would add to the gap. */
}

/* Swiper's own stylesheet isn't loaded (see single-blog.php), so the few pieces
   of it the carousel uses are defined here, scoped to this section. */
.vnb-related .swiper-notification { /* Screen-reader announcements only. */
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1000;
	opacity: 0;
	pointer-events: none;
}

.vnb-related .swiper-pagination-lock,
.vnb-related .swiper-button-lock {
	display: none !important; /* Only one slide: nothing to navigate. */
}

.vnb-related .vnb-related__pagination .swiper-pagination-bullet {
	display: inline-block;
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: none;
	appearance: none;
	width: 8px;
	height: 8px;
	background: rgba(255, 255, 255, 0.35);
	opacity: 1;
	transition: width 0.2s, background-color 0.2s;
}

.vnb-related .vnb-related__pagination .swiper-pagination-bullet-active {
	width: 24px;
	border-radius: 4px;
	background: var(--vnb-primary);
}

.vnb-related-card {
	display: flex;
	flex-direction: column;
	padding: 16px;
	border: 1.5px solid #28336C;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.03);
	transition: all 0.5s ease-in-out;
}

.vnb-related-card:hover {
	border-color: var(--vnb-primary);
	transform: translateY(-4px);
}

.vnb-related .vnb-related-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	max-height: 260px;
	overflow: hidden;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.05);
}

.vnb-related .vnb-related-card__img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s;
}

.vnb-related-card:hover .vnb-related-card__img {
	transform: scale(1.04);
}

.vnb-related-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 18px 0;
}

.vnb-related-card__badge {
	padding: 8px 12px;
	border-radius: 50px;
	background: #04779E;
	color: #fff;
	font-size: clamp(12px, 0.75rem + 0.3vw, 14px);
	font-weight: 400;
	line-height: 1.3;
}

.vnb-related .vnb-related-card__title {
	display: -webkit-box;
	margin: 0 0 18px;
	padding: 0;
	overflow: hidden;
	font-size: clamp(16px, 1rem + 0.5vw, 20px);
	font-weight: 700;
	line-height: 1.35;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
}

.vnb-related .vnb-related-card__title a {
	color: var(--vnb-text);
	text-decoration: none;
	transition: color 0.2s;
}

.vnb-related .vnb-related-card__title a:hover {
	color: var(--vnb-primary);
}

/* Footer: date · read time ... Read → (matches the listing cards) */
.vnb-related-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid #27336C;
	color: var(--vnb-muted);
	font-size: 14px;
	font-weight: 300;
}

.vnb-related-card__info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.vnb-related-card__dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--vnb-primary);
}

.vnb-related .vnb-related-card__read {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 6px;
	color: var(--vnb-primary);
	font-weight: 600;
	text-decoration: none;
}

.vnb-related-card__read span {
	display: inline-flex;
	transition: transform 0.2s;
}

.vnb-related-card__read svg {
	display: block;
	width: 11px;
	height: 11px;
}

.vnb-related-card__read:hover span {
	transform: translateX(4px);
}

@media (max-width: 980px) {
	.vnb-related__slider:not(.swiper-initialized) .vnb-related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobile: carousel layout from the start (one full-width card in a flex row),
   the same layout Swiper uses, so nothing shifts when it starts. These
   selectors come after the grid rules above and override them. */
@media (max-width: 600px) {
	.vnb-related .vnb-related__slider {
		overflow: hidden;
	}

	.vnb-related .vnb-related__slider .vnb-related__grid {
		display: flex;
		gap: 0;
	}

	/* Before Swiper starts: same 16px gap it will use. Once running, Swiper
	   sets the gap itself (margin-right on each slide). */
	/* .vnb-related .vnb-related__slider:not(.swiper-initialized) .vnb-related__grid {
		gap: 16px;
	} */

	.vnb-related .vnb-related__slider .vnb-related-card {
		flex: 0 0 100%;
	}

	/* Shown on mobile even while Swiper is still loading (NitroPack may delay scripts). */
	.vnb-related .vnb-related__controls {
		display: flex;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vnb-related *,
	.vnb-related-card {
		transition: none !important;
	}
}

/* Shared by the sidebar and the post content: distance below the fixed Divi header. */
:root {
	--vnb-sticky-top: 120px;
}

/* [single-blog-sidebar]
   Template: a row with the sidebar shortcode in the left column and Divi's
   Post Content module (CSS class "vnb-post-content") in the right column. */
.vnb-sidebar {
	--vnb-primary: #35d0f0;
	--vnb-text: #ffffff;
	--vnb-muted: rgba(255, 255, 255, 0.7);

	display: flex;
	flex-direction: column;
	gap: 32px;
	min-width: 0; /* Width comes from its Divi column (300px on desktop, see below). */
	color: var(--vnb-text);
	font-family: inherit;
	/* Long tables of contents scroll inside the sidebar instead of running off-screen. */
	max-height: calc(100vh - var(--vnb-sticky-top) - 24px);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #212D68 transparent;
}

/* The Divi column holding the sidebar is what sticks: the sidebar itself can
   only move inside its own module, which is no taller than the sidebar. */
.et_pb_column:has(.vnb-sidebar) {
	position: -webkit-sticky;
	position: sticky;
	top: var(--vnb-sticky-top);
	align-self: flex-start; /* Don't stretch when "Equalize column heights" is on. */
}

/* Sticky breaks when an ancestor has overflow: hidden, which Divi sets on its
   wrappers. "clip" still hides sideways overflow without breaking sticky. */
body:has(.vnb-sidebar) #page-container,
body:has(.vnb-sidebar) #et-boc,
body:has(.vnb-sidebar) #et-main-area,
body:has(.vnb-sidebar) #main-content,
body:has(.vnb-sidebar) .et-l,
body:has(.vnb-sidebar) .et_pb_section:has(.vnb-sidebar),
body:has(.vnb-sidebar) .et_pb_row:has(.vnb-sidebar) {
	overflow-x: clip !important;
	overflow-y: visible !important;
}

.vnb-sidebar .vnb-sidebar__label {
	margin: 0 0 12px;
	padding: 0;
	color: #1EC8F5;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.vnb-sidebar .vnb-sidebar__toc ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.vnb-sidebar .vnb-sidebar__toc li {
	margin: 0;
	padding: 0;
}

.vnb-sidebar .vnb-sidebar__toc a {
	display: block;
	padding: 8px 0 8px 14px;
	border-left: 2px solid #212D68;
	color: var(--vnb-muted);
	font-size: 14px;
	line-height: 1.4;
	text-decoration: none;
	transition: color 0.2s, border-color 0.2s;
}


.vnb-sidebar .vnb-sidebar__toc li:not(.vnb-sidebar__toc-h2) a {
	font-size: 13px;
}

.vnb-sidebar .vnb-sidebar__toc a:hover,
.vnb-sidebar .vnb-sidebar__toc a.is-active {
	border-left-color: var(--vnb-primary);
	color: #fff;
}

.vnb-sidebar__share-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.vnb-sidebar .vnb-sidebar__share-links a,
.vnb-sidebar .vnb-sidebar__copy {
	display: inline-block;
	margin: 0;
	padding: 9px 14px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 999px;
	background: transparent;
	color: var(--vnb-text);
	font: inherit;
	font-size: 13px;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s;
}

.vnb-sidebar .vnb-sidebar__share-links a:hover,
.vnb-sidebar .vnb-sidebar__copy:hover {
	border-color: var(--vnb-primary);
	color: var(--vnb-primary);
}

/* Post content: Divi Post Content module with the CSS class "vnb-post-content". */
.vnb-post-content {
	--vnb-primary: #35d0f0;
	--vnb-text: #ffffff;

	color: rgba(255, 255, 255, 0.8);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.75;
}

/* Posts built with the Divi Builder: drop the white background and the
   section/row/column spacing so the content fills the column.
   Divi prints per-section rules such as
   ".et_pb_section_0.et_pb_section { background-color: #fff !important }" after
   this file, so these selectors are deliberately more specific (and also match
   Divi's Post Content module directly, in case the CSS class isn't set). */
body.single .vnb-post-content .et_pb_section.et_pb_section,
body.single .et_pb_post_content .et_pb_section.et_pb_section {
	padding: 0 !important;
	background-color: transparent !important;
}

body.single .vnb-post-content .et_pb_section .et_pb_row.et_pb_row,
body.single .et_pb_post_content .et_pb_section .et_pb_row.et_pb_row {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.single .vnb-post-content .et_pb_row .et_pb_column.et_pb_column,
body.single .et_pb_post_content .et_pb_row .et_pb_column.et_pb_column {
	margin-right: 0 !important;
	margin-bottom: 0 !important;
	padding: 0 !important;
}

body.single .vnb-post-content .et_pb_column .et_pb_module:last-child,
body.single .et_pb_post_content .et_pb_column .et_pb_module:last-child {
	margin-bottom: 0 !important;
}

/* Empty paragraphs left behind by the editor. */
.vnb-post-content p:empty {
	display: none;
}

.vnb-post-content p {
	margin: 0 0 1.4em;
	padding: 0;
}

.vnb-post-content h2,
.vnb-post-content h3,
.vnb-post-content h4,
.vnb-post-content h5,
.vnb-post-content h6 {
	color: var(--vnb-text);
	font-weight: 700;
	line-height: 1.3;
	scroll-margin-top: var(--vnb-sticky-top);
}

/* Heading spacing: space above each heading, and a clear gap between a heading
   and the paragraph below it. Also matches Divi's Post Content module directly
   (in case the "vnb-post-content" class isn't set), and is specific enough to
   beat Divi's heading padding and Text module styles. */
body.single :is(.vnb-post-content, .et_pb_post_content) :is(h2, h3, h4, h5, h6):not(.et_pb_toggle_title) {
	margin: 1.6em 0 16px;
	padding: 0;
}

body.single :is(.vnb-post-content, .et_pb_post_content) :is(p, ul, ol, blockquote) {
	margin: 0 0 1.4em;
	padding: 0;
}

.vnb-post-content h2 {
	font-size: clamp(24px, 1rem + 1.4vw, 32px);
}

.vnb-post-content h3 {
	font-size: clamp(20px, 1rem + 0.8vw, 24px);
}

.vnb-post-content h4 {
	font-size: 18px;
}

/* No top gap above a heading that starts the content, and no extra gap after
   the last element of a text block. */
body.single :is(.vnb-post-content, .et_pb_post_content) .et_pb_text_inner > :first-child {
	margin-top: 0;
}

body.single :is(.vnb-post-content, .et_pb_post_content) .et_pb_text_inner > :last-child {
	margin-bottom: 0;
}

.vnb-post-content a {
	color: var(--vnb-primary);
	text-decoration: none;
}

.vnb-post-content a:hover {
	text-decoration: underline;
}

.vnb-post-content strong,
.vnb-post-content b {
	color: var(--vnb-text);
	font-weight: 600;
}

.vnb-post-content ul,
.vnb-post-content ol {
	margin: 0 0 1.4em;
	padding: 0 0 0 1.4em;
}

.vnb-post-content li {
	margin-bottom: 0.4em;
}

.vnb-post-content blockquote {
	margin: 0 0 1.4em;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--vnb-primary);
	color: var(--vnb-text);
	font-style: italic;
}

.vnb-post-content img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

/* Divi Accordion / Toggle modules in the post content (FAQ cards).
   body.single + doubled classes outrank Divi's defaults and per-module styles. */
body.single :is(.vnb-post-content, .et_pb_post_content) .et_pb_toggle.et_pb_toggle {
	margin: 0 0 16px !important;
	padding: 0 !important; /* The padding lives on the title so the whole card is clickable. */
	border: 1px solid #28336C !important;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.03) !important;
	transition: border-color 0.2s;
}

body.single :is(.vnb-post-content, .et_pb_post_content) .et_pb_toggle.et_pb_toggle:last-child {
	margin-bottom: 0 !important;
}

body.single :is(.vnb-post-content, .et_pb_post_content) .et_pb_toggle.et_pb_toggle:hover {
	border-color: #3a4785 !important;
}

body.single :is(.vnb-post-content, .et_pb_post_content) .et_pb_toggle .et_pb_toggle_title.et_pb_toggle_title {
	position: relative;
	margin: 0 !important;
	padding: 30px 70px 30px 30px !important; /* Card padding + room for the chevron. */
	color: #fff !important;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
}

/* Chevron SVG (replaces Divi's +/- icon): points down, rotates up when open.
   Divi only adds .et_pb_toggle_open after its slide animation, so
   assets/js/single-blog.js adds .vnb-opening / .vnb-closing on click to turn
   the arrow immediately. */
body.single :is(.vnb-post-content, .et_pb_post_content) .et_pb_toggle .et_pb_toggle_title.et_pb_toggle_title::before {
	content: "" !important;
	display: block !important; /* Divi hides the icon on an accordion's open item. */
	position: absolute;
	top: 50%;
	right: 30px;
	width: 12px;
	height: 12px;
	margin-top: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='13' viewBox='0 0 23 13' fill='none'%3E%3Cpath d='M1.5 1.5L11.5 11.5L21.5 1.5' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transform: translateY(-50%);
	transition: transform 0.3s ease;
}

body.single :is(.vnb-post-content, .et_pb_post_content) .et_pb_toggle_open:not(.vnb-closing) .et_pb_toggle_title.et_pb_toggle_title::before,
body.single :is(.vnb-post-content, .et_pb_post_content) .vnb-opening .et_pb_toggle_title.et_pb_toggle_title::before {
	transform: translateY(-50%) rotate(180deg);
}

body.single :is(.vnb-post-content, .et_pb_post_content) .et_pb_toggle .et_pb_toggle_content {
	margin-top: -16px; /* Keeps a 14px gap below the title's 30px bottom padding. */
	padding: 0 30px 30px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	line-height: 1.7;
}

body.single :is(.vnb-post-content, .et_pb_post_content) .et_pb_toggle .et_pb_toggle_content > :last-child {
	margin-bottom: 0;
}

/* Featured image: Divi Image module with the CSS class "post-featured-image".
   Divi makes the image wrapper inline-block, so it shrinks to the image's size. */
.post-featured-image .et_pb_image_wrap {
	display: block;
	width: 100%;
}

.post-featured-image .et_pb_image_wrap {
    display: flex !important;
    justify-content: center;
}

/* .post-featured-image img {
	width: 100% !important;
} */

/* Desktop: the sidebar's Divi column is a fixed 300px and the content column
   takes the rest, so the sidebar can never overlap the content (a min-width on
   the sidebar itself spills out whenever Divi's 1/3 column is narrower). */
@media (min-width: 981px) {
	.et_pb_row:has(> .et_pb_column .vnb-sidebar) {
		display: flex;
	}

	.et_pb_row:has(> .et_pb_column .vnb-sidebar) > .et_pb_column:has(.vnb-sidebar) {
		flex: 0 0 300px;
		width: 300px !important;
	}

	.et_pb_row:has(> .et_pb_column .vnb-sidebar) > .et_pb_column:not(:has(.vnb-sidebar)) {
		flex: 1 1 auto;
		width: auto !important;
		min-width: 0;
		margin-right: 0 !important;
	}
}

/* Tablet/mobile: Divi stacks the columns; the sidebar sits above the content
   and no longer sticks. */
@media (max-width: 980px) {
	.et_pb_column:has(.vnb-sidebar) {
		position: static;
	}

	.vnb-sidebar {
		gap: 24px;
		max-height: none;
		overflow: visible;
	}

	/* Long tables of contents scroll in a box instead of pushing the article far down. */
	.vnb-sidebar .vnb-sidebar__toc ul {
		max-height: 320px;
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: #212D68 transparent;
	}
}

/* Tablet (768–980px): "On this page" and "Share" side by side. */
@media (min-width: 768px) and (max-width: 980px) {
	.vnb-sidebar {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		align-items: start;
		gap: 32px;
	}
}

/* Phones: share buttons fill the row in equal widths. */
@media (max-width: 767px) {
	.vnb-sidebar .vnb-sidebar__share-links a,
	.vnb-sidebar .vnb-sidebar__copy {
		flex: 1 1 0;
		text-align: center;
		white-space: nowrap;
	}
}