/* =========================================================
   NETWOVEN ARTICLE WITH TOC – STYLES
   Scoped to #NWBlog so existing posts are not affected
   ========================================================= */

/* ---------- Global colour tokens (variables only, no visual effect on their own) ---------- */
:root {
	--nw-brand-primary: #1f4ea3;
	--nw-brand-primary-hover: #0449d5;
	--nw-brand-blue: #1f6fdb;
	--nw-brand-blue-dark: #1558b5;

	--nw-text-heading: #0f172a;
	--nw-text-primary: #334155;
	--nw-text-secondary: #475569;
	--nw-text-muted: #64748b;
	--nw-text-light: #94a3b8;

	--nw-bg-white: #ffffff;
	--nw-bg-soft: #f8fafc;
	--nw-bg-subtle: #f5f6f7;
	--nw-bg-blue-soft: #eff6ff;
	--nw-bg-blue-hover: #f6f9fd;

	--nw-border: #e2e8f0;
	--nw-border-light: #e5e7eb;

	--nw-shadow-blue: 0 6px 18px #155ab640;

	--nw-radius-small: 7px;
	--nw-radius: 10px;
	--nw-radius-large: 16px;
}

/* ---------- Article tokens ---------- */
#NWBlog {
	--article-primary: var(--nw-brand-primary);
	--article-primary-hover: var(--nw-brand-primary-hover);
	--article-heading: var(--nw-text-heading);
	--article-text: var(--nw-text-secondary);
	--article-muted: var(--nw-text-muted);
	--article-surface: var(--nw-bg-white);
	--article-surface-soft: var(--nw-bg-soft);
	--article-surface-blue: var(--nw-bg-blue-soft);
	--article-surface-blue-hover: var(--nw-bg-blue-hover);
	--article-border: var(--nw-border);
	--article-border-light: var(--nw-border-light);
	--article-radius: var(--nw-radius);
	--article-radius-small: var(--nw-radius-small);
	--article-sidebar-width: 300px;
	--article-gap: 44px;
	--article-sticky-top: 135px;
}

/* ---------- Two-column layout ---------- */
#NWBlog .article-two-column {
	display: flex;
	align-items: flex-start;
	gap: var(--article-gap);
	width: 100%;
	margin: 45px 0 0;
}
#NWBlog .article-main-content {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
}
#NWBlog .article-sidebar {
	flex: 0 0 var(--article-sidebar-width);
	width: var(--article-sidebar-width);
	min-width: 0;
	align-self: flex-start;
	position: sticky;
	top: var(--article-sticky-top);
	display: flex;
	flex-direction: column;
	gap: 18px;
	box-sizing: border-box;
}
/* Keeps sticky sidebar working */
#NWBlog .holder { overflow: visible; }
#NWBlog .article-content { width: 100%; margin: 0; }

/* ---------- In-content CTA ---------- */
#NWBlog .article-content-cta {
	width: 100%;
	margin: 40px 0;
	padding: 30px 32px;
	box-sizing: border-box;
	background: var(--nw-text-heading);
	border: 1px solid #1e293b;
	border-radius: var(--article-radius);
	box-shadow: 0 8px 24px #0f172a1a;
}
#NWBlog .article-content-cta h4 {
	margin: 0 0 10px !important;
	padding: 0 !important;
	border: 0 !important;
	color: #fff !important;
	font-size: 22px !important;
	line-height: 1.35 !important;
	font-weight: 600 !important;
}
#NWBlog .article-content-cta p {
	margin: 0 0 20px;
	color: #cbd5e1;
	font-size: 15px;
	line-height: 1.6;
}
#NWBlog .article-content-cta .cta-three a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	color: #fff !important;
	background: var(--article-primary);
	border: none;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.4;
	font-weight: 600;
	text-decoration: none !important;
	box-shadow: none;
	transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
#NWBlog .article-content-cta .cta-three a:hover {
	color: #fff !important;
	background: var(--article-primary-hover) !important;
	text-decoration: none !important;
	box-shadow: 0 6px 16px #1f4ea340;
}

/* ---------- Sidebar: TOC ---------- */
#NWBlog .article-sidebar .toc-box {
	width: 100%;
	margin: 0;
	padding: 20px;
	box-sizing: border-box;
	background: linear-gradient(135deg, #1f6fdb 0%, #1558b5 100%);
	border: 1px solid var(--article-border);
	border-radius: var(--article-radius);
}
#NWBlog .article-sidebar .toc-box > p:empty { display: none; }
#NWBlog .article-sidebar .toc-box .yoast-table-of-contents {
	width: 100%;
	margin: 0;
	padding: 0;
}
#NWBlog .article-sidebar .toc-box .yoast-table-of-contents > h4 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px !important;
	padding: 0 0 12px !important;
	border: 0 !important;
	border-bottom: 1px solid rgb(255 255 255 / 45%) !important;
	color: #f2f2f2 !important;
	font-size: 18px !important;
	line-height: 1.35 !important;
	font-weight: 600 !important;
}
#NWBlog .article-sidebar .toc-box .yoast-table-of-contents > h4 .toc-icon {
	color: var(--article-surface-blue);
	font-size: 17px;
	line-height: 1;
	font-weight: 600;
	flex-shrink: 0;
}
#NWBlog .article-sidebar .toc-box .yoast-table-of-contents ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#NWBlog .article-sidebar .toc-box .yoast-table-of-contents ul li {
	margin: 0;
	padding: 0;
}
#NWBlog .article-sidebar .toc-box .yoast-table-of-contents ul li > a {
	display: block !important;
	margin: 0 !important;
	padding: 9px 12px !important;
	color: #f2f2f2 !important;
	background: transparent !important;
	border: 0 !important;
	border-left: 2px solid transparent !important;
	border-radius: 0 !important;
	/*font-size: 13.5px !important;*/
	line-height: 1.5 !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
#NWBlog .article-sidebar .toc-box .yoast-table-of-contents ul li > a:hover {
	color: var(--article-primary) !important;
	background: #ffffff !important;
	border-left-color: var(--article-primary) !important;
}
#NWBlog .article-sidebar .toc-box .yoast-table-of-contents ul li > a.active {
	color: var(--article-primary) !important;
	background: var(--article-surface-blue) !important;
	border-left-color: var(--article-primary) !important;
	font-weight: 600 !important;
}
#NWBlog .article-sidebar .toc-box .yoast-table-of-contents ul li > a:focus-visible {
	outline: 2px solid var(--article-primary);
	outline-offset: -2px;
	border-radius: 0 !important;
}

/* ---------- Sidebar: CTA ---------- */
#NWBlog .article-sidebar .cta-box {
	width: 100%;
	margin: 0;
	padding: 22px;
	box-sizing: border-box;
	background: linear-gradient(180deg, #102041 0%, #0F1B34 100%);
	border: none;
	border-radius: var(--article-radius);
	box-shadow: var(--nw-shadow-blue);
	color: #fff;
}
#NWBlog .article-sidebar .cta-box h4 {
	margin: 0 0 8px !important;
	padding: 0 !important;
	border: 0 !important;
	color: #fff !important;
	font-size: 19px !important;
	line-height: 1.35 !important;
	font-weight: 600 !important;
}
#NWBlog .article-sidebar .cta-box p {
	margin: 0 0 18px;
	color: #ffffffeb;
	font-size: 14px;
	line-height: 1.6;
}
#NWBlog .article-sidebar .cta-box .wp-block-buttons,
#NWBlog .article-sidebar .cta-box .wp-block-button { margin: 0; }
#NWBlog .article-sidebar .cta-box .cta-three a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	background: #fff;
	color: var(--article-primary) !important;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.4;
	font-weight: 600;
	text-decoration: none !important;
	box-shadow: none;
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
#NWBlog .article-sidebar .cta-box .cta-three a:hover {
	background: #f1f5f9 !important;
	color: var(--article-primary-hover) !important;
	text-decoration: none !important;
	box-shadow: 0 4px 10px #0000001a;
}

/* ---------- Headings / anchor offset ---------- */
#NWBlog .article-main-content h2,
#NWBlog .article-main-content h3,
#NWBlog .article-main-content h4:not(.toc-ignore),
#NWBlog #faqs,
#NWBlog #sources {
	scroll-margin-top: var(--article-sticky-top);
}
#NWBlog .article-main-content h2 {
	margin-bottom: 35px;
	padding-bottom: 15px;
	border-bottom: 3px solid var(--article-border-light);
}
#NWBlog .article-main-content h2:not(:first-of-type) { margin-top: 35px; }

/* Smooth scroll, only on TOC-layout posts */
html:has(#NWBlog) { scroll-behavior: smooth; }

/* ---------- Reading progress (sidebar) ---------- */
#NWBlog .article-progress {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid rgb(255 255 255 / 45%) !important;
}
#NWBlog .article-progress-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
	color: var(--article-surface-blue);
	font-size: 12px;
	line-height: 1.4;
	font-weight: 500;
}
#NWBlog .article-progress-percent { color: #ffffff; font-weight: 600; }
#NWBlog .article-progress-track {
	width: 100%;
	height: 4px;
	background: var(--article-border-light);
	border-radius: 999px;
	overflow: hidden;
}
#NWBlog .article-progress-bar {
	width: 0;
	height: 100%;
	background: #39d639;
	border-radius: inherit;
	transition: width .15s ease;
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
	#NWBlog {
		--article-gap: 30px;
		--article-sidebar-width: 280px;
	}
	#NWBlog .article-sidebar .toc-box,
	#NWBlog .article-sidebar .cta-box { padding: 20px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
	body:has(.article-two-column) #InnerBanner {
	background: var(--nw-bg-blue);
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    #NWBlog .entry-content {font-size: 16px;line-height: 26px; }
	#NWBlog { --article-gap: 30px; }
	#NWBlog .cta-box { display: none; }
	#NWBlog .article-main-content h2 { font-size: 25px!important; line-height: 35px; }
	#NWBlog .article-main-content h3 { font-size: 20px!important; line-height: 30px; }

	#NWBlog .article-two-column { flex-direction: column; gap: var(--article-gap); }
	#NWBlog .article-main-content { order: 1; width: 100%; flex: 1 1 100%; }
	#NWBlog .article-sidebar {
		order: -1;
		width: 100%;
		flex: 1 1 100%;
		position: static;
		gap: 16px;
	}
	#NWBlog .article-sidebar .toc-box { width: 100%; padding: 18px; }
	#NWBlog .article-sidebar .toc-box .yoast-table-of-contents ul li > a {
		padding: 8px 10px !important;
		font-size: 12px !important;
		line-height: 1.30 !important;
	}
	#NWBlog .article-sidebar .cta-box { width: 100%; padding: 20px; }
	#NWBlog .article-content-cta { margin: 35px 0; padding: 24px 22px; }
	#NWBlog .article-content-cta h4 { font-size: 20px !important; }

	#NWBlog .article-main-content h2,
	#NWBlog .article-main-content h3,
	#NWBlog .article-main-content h4:not(.toc-ignore),
	#NWBlog #faqs,
	#NWBlog #sources { scroll-margin-top: 80px; }

	/* Fixed reading progress bar on mobile */
	#NWBlog .article-progress {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		width: 100%;
		box-sizing: border-box;
		margin: 0;
		padding: 8px 16px 9px;
		background: var(--nw-bg-white);
		border-bottom: 1px solid var(--article-border-light);
		box-shadow: 0 2px 8px #0000000d;
	}
	#NWBlog .article-progress-header {
		width: 100%;
		margin: 0 0 6px;
		color: var(--article-muted);
		font-size: 11px;
		line-height: 1.3;
	}
	#NWBlog .article-progress-percent { color: var(--article-primary); font-size: 11px; }
	#NWBlog .article-progress-track {
		position: static;
		height: 3px;
		margin: 0;
		background: var(--article-border-light);
		box-shadow: none;
	}
	#NWBlog .article-progress-bar { background: var(--article-primary); }
}

/* ---------- Very small mobile ---------- */
@media (max-width: 480px) {
	#NWBlog { --article-gap: 24px; }
	#NWBlog .article-sidebar .toc-box,
	#NWBlog .article-sidebar .cta-box { padding: 18px; }
	#NWBlog .article-content-cta { padding: 22px 18px; }
	#NWBlog .article-content-cta h4 { font-size: 19px !important; }
	#NWBlog .article-content-cta p,
	#NWBlog .article-sidebar .cta-box p { font-size: 14px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	html:has(#NWBlog) { scroll-behavior: auto; }
	#NWBlog .article-sidebar .toc-box .yoast-table-of-contents ul li > a { transition: none; }
}

/* ---------- TOC: stepper style ---------- */
#NWBlog .article-sidebar .toc-box {
	background: #fff;
	border: 1px solid var(--article-border);
	box-shadow: 0 4px 14px #0000000f;
}
#NWBlog .article-sidebar .toc-box .yoast-table-of-contents > h4 {
	color: var(--article-heading) !important;
	border-bottom: 1px solid var(--article-border-light) !important;
}
#NWBlog .article-sidebar .toc-box .yoast-table-of-contents > h4 .toc-icon { color: var(--article-primary); }
#NWBlog .article-sidebar .toc-box .yoast-table-of-contents ul ul { display: none; }
#NWBlog .article-sidebar .toc-box .yoast-table-of-contents > ul > li { position: relative; }
#NWBlog .article-sidebar .toc-box .yoast-table-of-contents > ul > li::before,
#NWBlog .article-sidebar .toc-box .yoast-table-of-contents > ul > li::after {
	content: ""; position: absolute; left: 8px; width: 2px; background: #dbe4f0;
}
#NWBlog .article-sidebar .toc-box .yoast-table-of-contents > ul > li::before { top: 0; height: 50%; }
#NWBlog .article-sidebar .toc-box .yoast-table-of-contents > ul > li::after  { top: 50%; bottom: 0; }
#NWBlog .article-sidebar .toc-box .yoast-table-of-contents > ul > li:first-child::before,
#NWBlog .article-sidebar .toc-box .yoast-table-of-contents > ul > li:last-child::after { display: none; }
#NWBlog .article-sidebar .toc-box .yoast-table-of-contents > ul > li.is-done::before { background: var(--article-primary); }
#NWBlog .article-sidebar .toc-box .yoast-table-of-contents > ul > li.is-done:not(.is-current)::after { background: var(--article-primary); }
#NWBlog .article-sidebar .toc-box .yoast-table-of-contents ul li > a {
	position: relative; padding: 10px 0 10px 36px !important; color: #1e2a4a !important;
	font-size: 14.5px; font-weight: 500 !important; border-left: 0 !important;
}
#NWBlog .article-sidebar .toc-box .yoast-table-of-contents ul li > a:hover,
#NWBlog .article-sidebar .toc-box .yoast-table-of-contents ul li > a.active {
	color: var(--article-primary) !important; background: transparent !important;
}
#NWBlog .article-sidebar .toc-box .yoast-table-of-contents ul li > a.active { font-weight: 600 !important; }
#NWBlog .article-sidebar .toc-box .yoast-table-of-contents > ul > li > a::before {
	content: ""; position: absolute; left: 0; top: 50%; z-index: 1; width: 18px; height: 18px;
	box-sizing: border-box; transform: translateY(-50%); display: flex; align-items: center; justify-content: center;
	background: #fff; border: 2px solid #94a3b8; border-radius: 50%; color: #fff; font-size: 10px; line-height: 1;
	transition: background-color .2s ease, border-color .2s ease;
}
#NWBlog .article-sidebar .toc-box .yoast-table-of-contents > ul > li.is-done > a::before {
	content: "\2713"; background: var(--article-primary); border-color: var(--article-primary);
}

/* progress label on the light TOC box (desktop) */
#NWBlog .article-progress { border-top: 1px solid var(--article-border-light) !important; }
#NWBlog .article-progress-header { color: var(--article-muted); }
#NWBlog .article-progress-percent { color: var(--article-primary); }
@media (max-width: 768px) {
	#NWBlog .article-progress { border-top: 0 !important; border-bottom: 1px solid var(--article-border-light); }
}