/* Rankzix Content System — single post stylesheet
   Loaded only on single posts (is_singular('post')).
   Brand colors: Blue #2563EB · Deep Navy #0F172A · White #FFFFFF
   Light Background #F8FAFC · Border #E2E8F0
   Brand font: Manrope (already loaded site-wide via the Elementor Kit's
   global typography — this file does NOT enqueue any Google Fonts of
   its own, it only reuses the family that's already on the page).
   Mobile-first. Breakpoints: mobile <768px, tablet 768-1199px,
   desktop >=1200px. No `order` property is used anywhere in this file. */

.rzcs-article {
	--rzcs-blue: #2563EB;
	--rzcs-navy: #0F172A;
	--rzcs-white: #FFFFFF;
	--rzcs-bg: #F8FAFC;
	--rzcs-border: #E2E8F0;
	--rzcs-font: Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-family: var(--rzcs-font);
	color: var(--rzcs-navy);
	background: var(--rzcs-white);
	scroll-behavior: smooth;
}

.rzcs-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/* ---------- Focus states (accessibility) ---------- */
.rzcs-article a:focus-visible,
.rzcs-article button:focus-visible {
	outline: 2px solid var(--rzcs-blue);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---------- Rank Math breadcrumb (styling only — the plugin never
   generates this markup itself; Rank Math renders its own <p> with
   class "rank-math-breadcrumb" by default, which this just re-styles
   to match the article's typography and spacing). ---------- */
.rzcs-breadcrumb-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px 20px 0;
	font-family: var(--rzcs-font);
}
.rzcs-breadcrumb-wrap p,
.rzcs-breadcrumb-wrap .rank-math-breadcrumb {
	font-size: 14px;
	color: #94A3B8;
	margin: 0;
	line-height: 1.6;
}
.rzcs-breadcrumb-wrap a {
	color: #93C5FD;
	text-decoration: none;
}
.rzcs-breadcrumb-wrap a:hover {
	color: #FFFFFF;
}

/* ---------- Header block ---------- */
.rzcs-article-header {
	padding: 20px 0 24px;
	background-color: #0B0F19;
	background-image: radial-gradient(circle at center, rgba(37,99,235,0.18) 0%, transparent 70%);
}

.rzcs-category-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: #EFF6FF;
	color: var(--rzcs-blue);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 4px 10px;
	border-radius: 999px;
	text-decoration: none;
	margin-bottom: 12px;
}
.rzcs-eyebrow-icon {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	stroke: var(--rzcs-blue);
}

.rzcs-article-title {
	font-size: 28px;
	line-height: 1.25;
	font-weight: 700;
	color: #FFFFFF;
	margin: 0 0 16px;
}

.rzcs-article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: #94A3B8;
}
.rzcs-meta-author {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #E2E8F0;
	text-decoration: none;
	min-height: 32px;
}
.rzcs-meta-author:hover {
	color: #93C5FD;
}
.rzcs-author-avatar {
	border-radius: 50%;
	width: 32px;
	height: 32px;
}
.rzcs-meta-dot {
	color: #475569;
}

/* ---------- Featured image (aspect-ratio reserved to avoid layout shift) ---------- */
.rzcs-featured-image {
	margin-bottom: 32px;
}
.rzcs-featured-img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}

/* ---------- Layout: sidebar wrapper + body (mobile/tablet defaults) ----------
   .rzcs-sidebar is ONE wrapper containing both the TOC and the sidebar
   CTA. Sticky positioning is applied to this wrapper only (see the
   desktop breakpoint) — never independently to the TOC and CTA inside
   it, which is what previously let the CTA drift above the TOC while
   scrolling. Keeping them as one sticky unit guarantees TOC-then-CTA
   order and zero overlap at every scroll position. */
.rzcs-article-layout {
	display: block;
	width: auto;
	max-width: none;
	padding-bottom: 48px;
}

.rzcs-sidebar {
	position: static;
}

.rzcs-toc {
	background: var(--rzcs-bg);
	border: 1px solid var(--rzcs-border);
	border-left: 3px solid var(--rzcs-blue);
	border-radius: 12px;
	padding: 18px 20px;
	margin-bottom: 32px;
}
.rzcs-toc-title {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--rzcs-navy);
	margin: 0 0 12px;
}
.rzcs-toc ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.rzcs-toc-h3 {
	padding-left: 16px;
}
.rzcs-toc a {
	color: #475569;
	text-decoration: none;
	font-size: 14px;
	line-height: 1.4;
	display: inline-block;
	padding: 2px 0;
	transition: color .12s ease;
}
.rzcs-toc a:hover,
.rzcs-toc a:focus-visible {
	color: var(--rzcs-blue);
}

.rzcs-article-body {
	min-width: 0;
	width: auto;
	max-width: none;
}

/* ---------- Article body content ---------- */
.rzcs-content {
	font-size: 17px;
	line-height: 1.75;
	color: #334155;
}
.rzcs-content h2 {
	font-size: 24px;
	font-weight: 700;
	color: var(--rzcs-navy);
	margin: 40px 0 16px;
	scroll-margin-top: 24px;
}
.rzcs-content h3 {
	font-size: 20px;
	font-weight: 700;
	color: var(--rzcs-navy);
	margin: 32px 0 14px;
	scroll-margin-top: 24px;
}
.rzcs-content h4 {
	font-size: 17px;
	font-weight: 700;
	color: var(--rzcs-navy);
	margin: 28px 0 12px;
}
.rzcs-content p {
	margin: 0 0 20px;
}
.rzcs-content a {
	color: var(--rzcs-blue);
	text-decoration: underline;
}
.rzcs-content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 24px 0;
}
.rzcs-content ul,
.rzcs-content ol {
	margin: 0 0 20px;
	padding-left: 24px;
}
.rzcs-content li {
	margin-bottom: 8px;
}
.rzcs-content blockquote {
	margin: 24px 0;
	padding: 16px 20px;
	border-left: 3px solid var(--rzcs-blue);
	background: var(--rzcs-bg);
	color: #475569;
	font-style: italic;
}
.rzcs-content code {
	background: var(--rzcs-bg);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 0.9em;
}
.rzcs-content pre {
	background: var(--rzcs-navy);
	color: #E2E8F0;
	padding: 16px 20px;
	border-radius: 8px;
	overflow-x: auto;
	margin: 24px 0;
}
.rzcs-content pre code {
	background: none;
	padding: 0;
	color: inherit;
}
.rzcs-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 24px 0;
	font-size: 15px;
}
.rzcs-content th,
.rzcs-content td {
	border: 1px solid var(--rzcs-border);
	padding: 10px 12px;
	text-align: left;
}
.rzcs-content th {
	background: var(--rzcs-bg);
	font-weight: 700;
}

/* ---------- Compact author card — redesigned to read as a distinct
   branded component, not a generic grey row: left accent bar, a ring
   around the avatar, and the card title spaced like a small byline. ---------- */
.rzcs-author-card {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--rzcs-white);
	border: 1px solid var(--rzcs-border);
	border-left: 3px solid var(--rzcs-blue);
	border-radius: 12px;
	padding: 18px 22px;
	margin: 40px 0;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.rzcs-author-card-avatar-link {
	flex-shrink: 0;
	display: block;
	border-radius: 50%;
	box-shadow: 0 0 0 3px #EFF6FF;
}
.rzcs-author-card-avatar {
	border-radius: 50%;
	display: block;
}
.rzcs-author-card-info {
	min-width: 0;
}
.rzcs-author-card-name {
	display: block;
	font-weight: 700;
	color: var(--rzcs-navy);
	text-decoration: none;
	font-size: 15px;
}
.rzcs-author-card-name:hover {
	color: var(--rzcs-blue);
}
.rzcs-author-card-role {
	font-size: 13px;
	color: #64748B;
	margin: 2px 0 6px;
}
.rzcs-author-card-link {
	font-size: 13px;
	font-weight: 600;
	color: var(--rzcs-blue);
	text-decoration: none;
}
.rzcs-author-card-link:hover {
	text-decoration: underline;
}

/* ---------- Previous / Next navigation ---------- */
.rzcs-prev-next {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 32px 0;
}
.rzcs-prev-next-link {
	display: block;
	background: var(--rzcs-bg);
	border: 1px solid var(--rzcs-border);
	border-radius: 12px;
	padding: 16px 18px;
	text-decoration: none;
	color: var(--rzcs-navy);
	transition: background-color .15s ease, border-color .15s ease;
}
.rzcs-prev-next-link:hover {
	background: #EFF6FF;
	border-color: var(--rzcs-blue);
}
.rzcs-prev-next-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #64748B;
	margin-bottom: 6px;
}
.rzcs-prev-next-title {
	display: block;
	font-weight: 600;
	font-size: 14px;
}
.rzcs-next {
	text-align: right;
}

/* ---------- CTA cards — ONE design family shared by the sidebar (compact)
   and article-end (wide) variants: same colors, radius, button style,
   and accent language. Only size/layout differs between them.
   Richer navy-to-deep-blue tonal background (no bright gradient, no
   purple, no glow) replaces the previous flat navy fill. ---------- */
.rzcs-cta-card {
	position: relative;
	overflow: hidden;
	background: linear-gradient(155deg, var(--rzcs-navy) 0%, #172554 100%);
	color: var(--rzcs-white);
	border: 1px solid rgba(37,99,235,0.3);
	border-radius: 16px;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12), 0 0 32px rgba(37,99,235,0.10);
}
/* Subtle CSS-only geometric accent on the right — a faint dotted
   diagonal, no illustration, no image asset. */
.rzcs-cta-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(96,165,250,0.35) 1.5px, transparent 1.5px);
	background-size: 26px 26px;
	background-position: right -6px top -6px;
	background-repeat: no-repeat;
	width: 45%;
	height: 100%;
	left: auto;
	right: 0;
	opacity: 0.4;
	pointer-events: none;
}
.rzcs-cta-title {
	position: relative;
	font-weight: 700;
	color: var(--rzcs-white);
}
.rzcs-cta-text {
	position: relative;
	color: #CBD5E1;
}
.rzcs-cta-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--rzcs-blue);
	color: var(--rzcs-white);
	font-weight: 600;
	padding: 15px 28px;
	border-radius: 8px;
	text-decoration: none;
	min-height: 56px;
	box-sizing: border-box;
	transition: transform 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}
.rzcs-cta-arrow {
	display: inline-block;
	transition: transform 200ms ease;
}
.rzcs-cta-button:visited {
	color: var(--rzcs-white);
}
.rzcs-cta-button:hover,
.rzcs-cta-button:focus-visible,
.rzcs-cta-button:active {
	background: #1D4ED8;
	color: var(--rzcs-white);
}
.rzcs-cta-button:hover,
.rzcs-cta-button:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(37,99,235,0.3);
}
.rzcs-cta-button:hover .rzcs-cta-arrow,
.rzcs-cta-button:focus-visible .rzcs-cta-arrow {
	transform: translateX(3px);
}
.rzcs-cta-button:active {
	transform: translateY(0);
	box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
	.rzcs-cta-button {
		transition: background-color 200ms ease;
	}
	.rzcs-cta-button:hover,
	.rzcs-cta-button:focus-visible,
	.rzcs-cta-button:active {
		transform: none;
	}
	.rzcs-cta-arrow {
		transition: none;
	}
	.rzcs-cta-button:hover .rzcs-cta-arrow,
	.rzcs-cta-button:focus-visible .rzcs-cta-arrow {
		transform: none;
	}
}

/* Sidebar CTA — compact */
.rzcs-sidebar-cta {
	display: none;
	padding: 20px;
}
.rzcs-sidebar-cta .rzcs-cta-title {
	font-size: 16px;
	margin: 0 0 6px;
}
.rzcs-sidebar-cta .rzcs-cta-text {
	font-size: 13px;
	margin: 0 0 14px;
	line-height: 1.5;
}
.rzcs-sidebar-cta .rzcs-cta-button {
	width: 100%;
	text-align: center;
	font-size: 14px;
	padding: 10px 16px;
	min-height: 48px;
}

/* Article-end CTA — wide, stronger. Full-width button on mobile/tablet;
   becomes a horizontal layout (content left, button right) on desktop. */
.rzcs-cta-end {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 32px 0;
	padding: 28px 24px;
}
.rzcs-cta-end .rzcs-cta-title {
	font-size: 20px;
	margin: 0 0 10px;
}
.rzcs-cta-end .rzcs-cta-text {
	font-size: 15px;
	margin: 0 0 20px;
	line-height: 1.6;
}
.rzcs-cta-end .rzcs-cta-button {
	width: 100%;
	text-align: center;
	font-size: 15px;
	padding: 13px 26px;
}

/* ---------- Related articles section wrapper ---------- */
.rzcs-related {
	background: var(--rzcs-bg);
	padding: 48px 0;
	border-top: 1px solid var(--rzcs-border);
}
.rzcs-related-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--rzcs-navy);
	margin: 0 0 20px;
}


/* =========================================================
   BREAKPOINT 1 — MOBILE, below 768px
   Base rules above apply as-is: block-stacked, TOC above content,
   sidebar CTA hidden, exactly one CTA (rzcs-cta-end), 20px padding,
   no sticky positioning anywhere.
   ========================================================= */


/* =========================================================
   BREAKPOINT 2 — TABLET / SMALL LAPTOP, 768px through 1199px
   Explicitly its own block — does not reuse or extend the desktop
   grid below. Keeps the same single-column stacked layout as
   mobile with larger type and more padding. Sidebar CTA stays
   hidden; only the end CTA shows. Sidebar wrapper stays static
   (not sticky) here.
   ========================================================= */
@media (min-width: 768px) and (max-width: 1199px) {
	.rzcs-container,
	.rzcs-breadcrumb-wrap {
		padding-left: 32px;
		padding-right: 32px;
	}
	.rzcs-article-title {
		font-size: 32px;
	}
	.rzcs-article-layout {
		display: block;
	}
	.rzcs-sidebar {
		position: static;
	}
	.rzcs-sidebar-cta {
		display: none;
	}
}


/* =========================================================
   BREAKPOINT 3 — DESKTOP, 1200px and above
   True 2-column layout. Every property mobile/tablet set on these
   elements is explicitly reset here, then desktop values applied.
   Container is already at its max-width (1200px) the instant this
   activates, so content resolves to a flat 800px immediately —
   no narrow transition zone at the low end of the range.

   TOC + sidebar CTA are sticky as ONE wrapper (.rzcs-sidebar), not
   independently — this guarantees the CTA can never drift above or
   overlap the TOC while scrolling. A max-height + internal scroll
   is set as a safety net for the rare case where sidebar content is
   taller than the viewport, so it degrades gracefully instead of
   overlapping the footer.
   ========================================================= */
@media (min-width: 1200px) {
	.rzcs-container,
	.rzcs-breadcrumb-wrap {
		max-width: 1200px;
		padding-left: 24px;
		padding-right: 24px;
	}

	.rzcs-article-title {
		font-size: 36px;
	}

	.rzcs-article-layout {
		display: grid;
		width: auto;
		max-width: none;
		grid-template-columns: minmax(0, 1fr) 320px;
		grid-template-areas: "body sidebar";
		column-gap: 32px;
		align-items: start;
	}

	.rzcs-article-body {
		grid-area: body;
		width: auto;
		max-width: none;
		min-width: 0;
	}

	.rzcs-sidebar {
		grid-area: sidebar;
		position: sticky;
		top: 96px;
		max-height: calc(100vh - 120px);
		overflow-y: auto;
		display: flex;
		flex-direction: column;
	}
	.rzcs-toc {
		margin-bottom: 20px;
	}
	.rzcs-sidebar-cta {
		display: block;
	}

	.rzcs-cta-end {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
		padding: 32px 36px;
	}
	.rzcs-cta-end-text {
		max-width: 460px;
	}
	.rzcs-cta-end .rzcs-cta-button {
		width: auto;
		flex-shrink: 0;
	}

	.rzcs-prev-next {
		flex-direction: row;
	}
	.rzcs-prev-next-link {
		flex: 1;
	}
}