/* ==========================================================================
   Article detail pages — Article Single template (post 2386).
   Loaded by cg_article_single_assets() (after blog.css, which styles the
   related-article cards). Behaviour: article.js (progress bar, contents).

   Template structure (element ids, since this template is edited in
   Elementor): art0hero (navy band: breadcrumb art0brdcr, topic art0cat,
   title art0title, meta art0meta) → art0box (photo art0imgwrap overlapping
   the band; art0body = art0main [art0content + art0end] + art0aside
   [art0tocbox, art0sharebox, art0cta]) → art0related ("Keep reading").
   ========================================================================== */

body.single-article {
	--ar-navy: #07111F;
	--ar-ink: #0C1825;
	--ar-body: #3D4A5C;
	--ar-muted: #7B8799;
	--ar-line: #E1E5EB;
	--ar-mist: #F4F6F9;
	--ar-accent: #1B3FA0;
	--ar-accent-2: #3563E0;
	--ar-ice: #9DB8FF;
	--ar-tint: #EAF0FD;
	--ar-head: "Space Grotesk", Inter, sans-serif;
	--ar-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--ar-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ── Reading progress ─────────────────────────────────────────────────── */
.cgart-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10000;
	height: 3px;
	pointer-events: none;
	opacity: 0;
	transition: opacity .3s ease;
}
.cgart-progress.is-on { opacity: 1; }
.cgart-progress span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--ar-accent), var(--ar-accent-2) 60%, var(--ar-ice));
	transform: scaleX(0);
	transform-origin: 0 50%;
}

/* ── Navy header band ─────────────────────────────────────────────────── */
.elementor-element.elementor-element-art0hero {
	position: relative;
	overflow: hidden;
	background-image:
		radial-gradient(760px 420px at 12% 0%, rgba(59, 99, 214, .30), rgba(59, 99, 214, 0) 70%),
		radial-gradient(560px 380px at 95% 100%, rgba(59, 99, 214, .18), rgba(59, 99, 214, 0) 70%),
		linear-gradient(rgba(157, 184, 255, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(157, 184, 255, .05) 1px, transparent 1px) !important;
	background-size: auto, auto, 56px 56px, 56px 56px !important;
}
/* Breadcrumb on navy */
.elementor-element-art0brdcr .elementor-heading-title,
.elementor-element-art0brdcr .elementor-heading-title a {
	font: 500 13px/1.4 Inter, sans-serif !important;
	color: rgba(214, 224, 245, .6) !important;
	text-decoration: none !important;
	transition: color .2s ease;
}
.elementor-element-art0brdcr .elementor-heading-title a:hover { color: #fff !important; }
.elementor-element-art0bc5 { min-width: 0; max-width: 60ch; }
.elementor-element-art0bc5 .elementor-heading-title {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: rgba(255, 255, 255, .9) !important;
}
/* Topic pill */
.elementor-element-art0cat { width: auto !important; }
.elementor-element-art0cat .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px 7px 12px;
	border: 1px solid rgba(157, 184, 255, .3);
	border-radius: 999px;
	background: rgba(157, 184, 255, .1);
	font: 500 12px/1 var(--ar-mono) !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	color: var(--ar-ice) !important;
}
.elementor-element-art0cat .elementor-heading-title::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ar-ice);
	box-shadow: 0 0 0 3px rgba(157, 184, 255, .2);
}
.elementor-element-art0title { max-width: 880px; }
.elementor-element-art0title .elementor-heading-title { letter-spacing: -.025em; text-wrap: balance; }
/* Meta row on navy: avatar, author, date, read time */
.elementor-element-art0metaleft { gap: 10px 14px !important; }
.elementor-element-art0hero .elementor-element-art0av img {
	border: 2px solid rgba(157, 184, 255, .35);
	border-radius: 50% !important;
}
.elementor-element-art0hero .elementor-element-art0nm .elementor-heading-title { font: 600 14px/1.3 Inter, sans-serif !important; color: #fff !important; }
.elementor-element-art0hero :is(.cgart-meta-text, .cgblog-date, .cgblog-date time, .elementor-element-art0rt, .elementor-element-art0dt) {
	font: 400 14px/1.3 Inter, sans-serif !important;
	color: rgba(214, 224, 245, .72) !important;
}
.elementor-element-art0hero .cgart-dot { background: rgba(157, 184, 255, .45); }

/* ── Photo overlapping the band ───────────────────────────────────────── */
.elementor-element.elementor-element-art0imgwrap { position: relative; z-index: 2; }
.elementor-element-art0img img {
	width: 100%;
	object-fit: cover;
	box-shadow: 0 50px 90px -50px rgba(7, 17, 31, .6);
}

/* ── Two columns: article + sticky sidebar ────────────────────────────── */
.elementor-element.elementor-element-art0main { flex: 1 1 auto; min-width: 0; max-width: 780px; }
.elementor-element.elementor-element-art0aside {
	flex: 0 0 300px;
	margin-left: auto; /* sidebar sits on the right content edge */
	position: sticky;
	top: 110px;
	align-self: flex-start;
}

/* ── Article prose ────────────────────────────────────────────────────── */
.elementor-element-art0content { font-family: Inter, sans-serif; }
.elementor-element-art0content p,
.elementor-element-art0content li {
	font-size: 18px;
	line-height: 1.8;
	color: var(--ar-body);
}
.elementor-element-art0content p { margin: 0 0 24px; }
/* Opening paragraph reads as the standfirst */
.elementor-element-art0content .elementor-widget-container > p:first-child,
.elementor-element-art0content > p:first-child {
	margin-bottom: 32px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--ar-line);
	font-size: 21px;
	line-height: 1.6;
	color: var(--ar-ink);
	letter-spacing: -.005em;
}
.elementor-element-art0content h2 {
	margin: 52px 0 18px;
	font: 600 30px/1.2 var(--ar-head);
	letter-spacing: -.02em;
	color: var(--ar-ink);
	scroll-margin-top: 110px;
}
.elementor-element-art0content h3 {
	margin: 36px 0 12px;
	font: 600 21px/1.3 var(--ar-head);
	color: var(--ar-ink);
	scroll-margin-top: 110px;
}
.elementor-element-art0content strong { color: var(--ar-ink); font-weight: 600; }
.elementor-element-art0content a { color: var(--ar-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.elementor-element-art0content a:hover { color: var(--ar-accent-2); }
/* Lists as a clean checklist panel (overrides inline li styles in older posts) */
.elementor-element-art0content ul {
	margin: 0 0 28px !important;
	padding: 20px 24px !important;
	list-style: none;
	border: 1px solid var(--ar-line);
	border-radius: 14px;
	background: #FAFBFD;
}
.elementor-element-art0content ul li {
	position: relative;
	display: block !important;
	margin: 0 !important;
	padding: 9px 0 9px 34px;
	border-top: 1px solid #EDF0F4;
	line-height: 1.6 !important;
}
.elementor-element-art0content ul li:first-child { border-top: 0; }
.elementor-element-art0content ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	width: 20px;
	height: 20px;
	border-radius: 6px;
	background: var(--ar-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3FA0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.elementor-element-art0content ol { margin: 0 0 28px; padding-left: 24px; }
.elementor-element-art0content ol li { padding-left: 6px; margin-bottom: 8px; }
.elementor-element-art0content ol li::marker { font-weight: 600; color: var(--ar-accent); }
.elementor-element-art0content blockquote {
	margin: 36px 0;
	padding: 24px 28px;
	border: 0;
	border-left: 3px solid var(--ar-accent);
	border-radius: 0 14px 14px 0;
	background: var(--ar-mist);
}
.elementor-element-art0content blockquote p { margin: 0; font: 500 20px/1.55 var(--ar-head); color: var(--ar-ink); }
.elementor-element-art0content img { max-width: 100%; height: auto; border-radius: 14px; }
.elementor-element-art0content > .elementor-widget-container > *:last-child { margin-bottom: 0; }

/* End of article */
.elementor-element.elementor-element-art0end { border-top: 1px solid var(--ar-line); }
.elementor-element-art0back .elementor-button {
	padding: 12px 18px !important;
	border: 1px solid var(--ar-line) !important;
	border-radius: 10px !important;
	background: #fff !important;
	font: 600 14px/1 Inter, sans-serif !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--ar-ink) !important;
	transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.elementor-element-art0back .elementor-button:hover { border-color: var(--ar-accent) !important; color: var(--ar-accent) !important; background: var(--ar-tint) !important; }
.elementor-element-art0back .elementor-button-icon { transition: transform .3s var(--ar-ease); }
.elementor-element-art0back .elementor-button:hover .elementor-button-icon { transform: translateX(-3px); }
.elementor-element-art0endnote .elementor-heading-title { font: 400 14px/1.5 Inter, sans-serif !important; color: var(--ar-muted) !important; }

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.cgart-aside-label .elementor-heading-title {
	font: 500 11.5px/1.3 var(--ar-mono) !important;
	letter-spacing: .18em !important;
	text-transform: uppercase !important;
	color: var(--ar-muted) !important;
}
.elementor-element.elementor-element-art0tocbox,
.elementor-element.elementor-element-art0sharebox {
	padding: 20px 20px 18px !important;
	border: 1px solid var(--ar-line);
	border-radius: 16px;
	background: #fff;
}
/* Contents list */
.cgart-toc__list { margin: 0; padding: 0; list-style: none; counter-reset: cgtoc; }
.cgart-toc__list li { margin: 0; counter-increment: cgtoc; }
.cgart-toc__list a {
	position: relative;
	display: flex;
	gap: 12px;
	padding: 8px 10px 8px 12px;
	border-radius: 8px;
	font: 500 14px/1.45 Inter, sans-serif;
	color: var(--ar-body) !important;
	text-decoration: none !important;
	transition: background-color .2s ease, color .2s ease;
}
.cgart-toc__list a::before {
	content: counter(cgtoc, decimal-leading-zero);
	flex: none;
	padding-top: 2px;
	font: 500 11px/1.45 var(--ar-mono);
	color: #A9B3C1;
	transition: color .2s ease;
}
.cgart-toc__list a::after {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	bottom: 8px;
	width: 2px;
	border-radius: 2px;
	background: var(--ar-accent);
	transform: scaleY(0);
	transition: transform .3s var(--ar-ease);
}
.cgart-toc__list a:hover { background: var(--ar-mist); color: var(--ar-ink) !important; }
.cgart-toc__list a.is-active { background: var(--ar-tint); color: var(--ar-accent) !important; }
.cgart-toc__list a.is-active::before { color: var(--ar-accent); }
.cgart-toc__list a.is-active::after { transform: scaleY(1); }
/* Share buttons in the sidebar (the heading above replaces their own label) */
.elementor-element-art0sharebox .cgart-share { gap: 8px; }
.elementor-element-art0sharebox .cgart-share-label { display: none; }
.elementor-element-art0sharebox .cgart-share-btn {
	width: 40px;
	height: 40px;
	border: 1px solid var(--ar-line);
	border-radius: 10px;
	background: #fff;
	color: var(--ar-body);
}
.elementor-element-art0sharebox .cgart-share-btn:hover { border-color: var(--ar-accent); background: var(--ar-accent); color: #fff; }
/* Quote CTA card */
.elementor-element.elementor-element-art0cta {
	position: relative;
	overflow: hidden;
	background-image:
		radial-gradient(260px 200px at 100% 0%, rgba(59, 99, 214, .45), rgba(59, 99, 214, 0) 70%),
		linear-gradient(rgba(157, 184, 255, .06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(157, 184, 255, .06) 1px, transparent 1px) !important;
	background-size: auto, 28px 28px, 28px 28px !important;
}
.elementor-element-art0ctaeb .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font: 500 11.5px/1.3 var(--ar-mono) !important;
	letter-spacing: .18em !important;
	text-transform: uppercase !important;
	color: var(--ar-ice) !important;
}
.elementor-element-art0ctaeb .elementor-heading-title::before { content: ""; width: 20px; height: 1px; background: currentColor; }
.elementor-element-art0ctah .elementor-heading-title { font: 600 22px/1.25 var(--ar-head) !important; letter-spacing: -.01em; color: #fff !important; }
.elementor-element-art0ctatx p { margin: 0; font: 400 14.5px/1.6 Inter, sans-serif; color: rgba(214, 224, 245, .78); }
.elementor-element-art0ctabtn { margin-top: 6px; }
.elementor-element-art0ctabtn .elementor-button {
	width: 100%;
	padding: 14px 18px !important;
	border-radius: 10px !important;
	background: var(--ar-accent) !important;
	font: 600 13px/1 Inter, sans-serif !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	color: #fff !important;
	transition: background-color .25s ease, transform .25s var(--ar-ease);
}
.elementor-element-art0ctabtn .elementor-button:hover { background: var(--ar-accent-2) !important; transform: translateY(-1px); }

/* ── Keep reading ─────────────────────────────────────────────────────── */
.elementor-element-art0releb .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font: 500 12px/1.3 var(--ar-mono) !important;
	letter-spacing: .18em !important;
	text-transform: uppercase !important;
	color: var(--ar-accent) !important;
}
.elementor-element-art0releb .elementor-heading-title::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.elementor-element-art0relh .elementor-heading-title { font: 600 clamp(28px, 1.2rem + 1.5vw, 40px)/1.15 var(--ar-head) !important; letter-spacing: -.02em !important; color: var(--ar-ink) !important; }
.elementor-element-art0relall .elementor-button {
	padding: 13px 20px !important;
	border: 1px solid var(--ar-line) !important;
	border-radius: 10px !important;
	background: #fff !important;
	font: 600 13px/1 Inter, sans-serif !important;
	letter-spacing: .06em !important;
	text-transform: uppercase !important;
	color: var(--ar-ink) !important;
	transition: border-color .2s ease, color .2s ease;
}
.elementor-element-art0relall .elementor-button:hover { border-color: var(--ar-accent) !important; color: var(--ar-accent) !important; }
.elementor-element-art0relgrid .elementor-element-bloggrid01 { background: #fff !important; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	/* Article, then the sidebar underneath (a row squeezed the text to one word per line) */
	.elementor-element.elementor-element-art0body { --flex-direction: column !important; flex-direction: column !important; }
	.elementor-element.elementor-element-art0body > .e-con-inner { flex-direction: column !important; }
	.elementor-element.elementor-element-art0main { max-width: none; width: 100%; }
	.elementor-element.elementor-element-art0aside { position: static; flex-basis: auto; width: 100%; }
	/* On tablet/phone the contents list is redundant below the article */
	.elementor-element.elementor-element-art0tocbox { display: none !important; }
}
@media (max-width: 767px) {
	.elementor-element-art0content p,
	.elementor-element-art0content li { font-size: 17px; }
	.elementor-element-art0content .elementor-widget-container > p:first-child,
	.elementor-element-art0content > p:first-child { font-size: 19px; }
	.elementor-element-art0content h2 { font-size: 25px; margin-top: 40px; }
	.elementor-element-art0content ul { padding: 14px 16px !important; }
	.elementor-element-art0bc5 { display: none; }
	.elementor-element-art0bc4 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.cgart-progress { display: none; }
}

/* Button icons take the text colour */
:is(.elementor-element-art0back, .elementor-element-art0relall, .elementor-element-art0ctabtn) .elementor-button-icon svg { width: 12px; height: 12px; fill: currentColor !important; }
:is(.elementor-element-art0back, .elementor-element-art0relall, .elementor-element-art0ctabtn) .elementor-button-content-wrapper { align-items: center; gap: 8px; }

/* No author display name: Elementor drops the name widget, so hide the
   placeholder avatar and the separator that would lead the row. */
.elementor-element-art0metaleft:not(:has(.elementor-element-art0nm)) :is(.elementor-element-art0av, .elementor-element-art0dot1) { display: none !important; }