/* ═══════════════════════════════════════════════════
   CW Content Brand System
   The visual signature for all blog/article content.
   Palette: Deep Green (#1A2E28), Emerald (#4CAF82), White, Slate tones.
   ═══════════════════════════════════════════════════ */

/* ─── Article Meta Bar ─── */
.cw-article-meta-bar {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 2rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--cw-border);
	font-family: var(--cw-font-ui);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--cw-muted);
}

.cw-meta-category {
	background: var(--cw-deep-green);
	color: #fff;
	padding: 4px 12px;
	border-radius: 4px;
	font-weight: 600;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
}

.cw-meta-reading-time::before {
	content: '';
	display: inline-block;
	width: 4px;
	height: 4px;
	background: var(--cw-emerald);
	border-radius: 50%;
	margin-right: 8px;
	vertical-align: middle;
}

.cw-meta-date::before {
	content: '';
	display: inline-block;
	width: 4px;
	height: 4px;
	background: var(--cw-border);
	border-radius: 50%;
	margin-right: 8px;
	vertical-align: middle;
}

/* ─── Content Typography Refinements ─── */
.single-post .entry-content {
	max-width: 700px;
}

.single-post .entry-content h2 {
	font-family: var(--cw-font-heading) !important;
	font-weight: 800 !important;
	font-size: 1.75rem !important;
	line-height: 1.2 !important;
	color: var(--cw-deep-green) !important;
	margin-top: 3rem !important;
	margin-bottom: 1rem !important;
	padding-top: 1.5rem;
	border-top: 2px solid var(--cw-border);
}

.single-post .entry-content h2:first-of-type {
	border-top: none;
	padding-top: 0;
}

.single-post .entry-content h3 {
	font-family: var(--cw-font-heading) !important;
	font-weight: 700 !important;
	font-size: 1.375rem !important;
	color: var(--cw-dark-green) !important;
	margin-top: 2rem !important;
}

/* ─── Blockquotes — Brand Signature ─── */
.single-post .entry-content blockquote {
	border-left: 4px solid var(--cw-emerald) !important;
	background: linear-gradient(135deg, rgba(76, 175, 130, 0.06), rgba(26, 46, 40, 0.03)) !important;
	padding: 1.5rem 1.5rem 1.5rem 2rem !important;
	margin: 2rem 0 !important;
	border-radius: 0 8px 8px 0 !important;
	font-size: 1.125rem !important;
	position: relative;
}

.single-post .entry-content blockquote::before {
	content: '\201C';
	position: absolute;
	top: -8px;
	left: 12px;
	font-size: 3rem;
	color: var(--cw-emerald);
	opacity: 0.3;
	font-family: Georgia, serif;
	line-height: 1;
}

/* ─── Key Takeaway / Callout Boxes ─── */
.cw-callout,
.single-post .entry-content .cw-callout {
	background: var(--cw-deep-green) !important;
	color: #fff !important;
	padding: 1.5rem 2rem !important;
	border-radius: 8px !important;
	margin: 2rem 0 !important;
	border-left: none !important;
	position: relative;
	font-style: normal !important;
}

.cw-callout strong,
.cw-callout b {
	color: var(--cw-bright-green) !important;
}

.cw-callout::before {
	content: 'KEY TAKEAWAY';
	display: block;
	font-family: var(--cw-font-ui);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--cw-emerald);
	margin-bottom: 0.75rem;
}

/* ─── Stat Callouts ─── */
.cw-stat-callout {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 1.5rem 0;
	border-top: 1px solid var(--cw-border);
	border-bottom: 1px solid var(--cw-border);
	margin: 2rem 0;
}

.cw-stat-number {
	font-family: var(--cw-font-heading);
	font-size: 3rem;
	font-weight: 800;
	color: var(--cw-emerald);
	line-height: 1;
}

.cw-stat-label {
	font-family: var(--cw-font-body);
	font-size: 1.0625rem;
	color: var(--cw-muted);
}

/* ─── Pull Quotes ─── */
.cw-pull-quote {
	text-align: center;
	padding: 2rem 1.5rem;
	margin: 2.5rem 0;
	border-top: 2px solid var(--cw-emerald);
	border-bottom: 2px solid var(--cw-emerald);
}

.cw-pull-quote p {
	font-family: var(--cw-font-heading) !important;
	font-size: 1.5rem !important;
	font-weight: 700 !important;
	color: var(--cw-deep-green) !important;
	line-height: 1.4 !important;
	font-style: normal !important;
}

.cw-pull-quote cite {
	display: block;
	margin-top: 0.75rem;
	font-family: var(--cw-font-ui);
	font-size: 0.8125rem;
	font-style: normal;
	color: var(--cw-muted);
	letter-spacing: 0.02em;
}

/* ─── Author Box ─── */
.cw-author-box {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	background: var(--cw-light-surface);
	border: 1px solid var(--cw-border);
	border-radius: 12px;
	padding: 2rem;
	margin: 3rem 0 2rem;
}

.cw-author-photo img {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--cw-emerald);
}

.cw-author-label {
	font-family: var(--cw-font-ui);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--cw-muted);
	margin-bottom: 4px;
}

.cw-author-name {
	font-family: var(--cw-font-heading) !important;
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	margin: 0 0 8px !important;
}

.cw-author-name a {
	color: var(--cw-deep-green) !important;
	text-decoration: none !important;
}

.cw-author-name a:hover {
	color: var(--cw-emerald) !important;
}

.cw-author-bio {
	font-size: 0.9375rem !important;
	line-height: 1.5 !important;
	color: var(--cw-muted) !important;
	margin: 0 0 12px !important;
}

.cw-author-credentials {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.cw-credential {
	font-family: var(--cw-font-ui);
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 3px 10px;
	border-radius: 4px;
	background: rgba(76, 175, 130, 0.1);
	color: var(--cw-dark-green);
	border: 1px solid rgba(76, 175, 130, 0.2);
}

/* ─── Post Opt-In Section ─── */
.cw-post-optin {
	background: var(--cw-deep-green);
	border-radius: 16px;
	padding: 3rem;
	margin: 2rem 0 3rem;
	color: #fff;
}

.cw-post-optin-inner {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 3rem;
	align-items: center;
}

.cw-optin-badge {
	display: inline-block;
	font-family: var(--cw-font-ui);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 4px 12px;
	border-radius: 4px;
	background: rgba(76, 175, 130, 0.15);
	color: var(--cw-bright-green);
	border: 1px solid rgba(76, 175, 130, 0.25);
	margin-bottom: 1rem;
}

.cw-optin-headline {
	font-family: var(--cw-font-heading) !important;
	font-size: 1.5rem !important;
	font-weight: 800 !important;
	color: #fff !important;
	margin: 0 0 0.75rem !important;
	line-height: 1.25 !important;
}

.cw-optin-desc {
	font-size: 1rem !important;
	color: rgba(232, 240, 236, 0.8) !important;
	line-height: 1.6 !important;
	margin: 0 0 1rem !important;
}

.cw-optin-benefits {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.cw-optin-benefits li {
	font-family: var(--cw-font-ui);
	font-size: 0.875rem;
	color: rgba(232, 240, 236, 0.7);
	padding: 4px 0;
	padding-left: 20px;
	position: relative;
}

.cw-optin-benefits li::before {
	content: '\2713';
	position: absolute;
	left: 0;
	color: var(--cw-emerald);
	font-weight: 700;
}

.cw-post-optin-form .gform_wrapper {
	margin: 0 !important;
}

.cw-post-optin-form .gform_wrapper input[type="text"],
.cw-post-optin-form .gform_wrapper input[type="email"],
.cw-post-optin-form .gform_wrapper select {
	background: rgba(255, 255, 255, 0.1) !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	color: #fff !important;
	border-radius: 8px !important;
	padding: 12px 16px !important;
	font-size: 1rem !important;
}

.cw-post-optin-form .gform_wrapper input::placeholder {
	color: rgba(255, 255, 255, 0.4) !important;
}

.cw-post-optin-form .gform_wrapper .gform_button,
.cw-post-optin-form .gform_wrapper input[type="submit"] {
	background: var(--cw-emerald) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 14px 32px !important;
	font-family: var(--cw-font-ui) !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	width: 100% !important;
	transition: background 0.2s ease !important;
}

.cw-post-optin-form .gform_wrapper .gform_button:hover,
.cw-post-optin-form .gform_wrapper input[type="submit"]:hover {
	background: var(--cw-bright-green) !important;
}

.cw-post-optin-form .gform_wrapper label {
	color: rgba(232, 240, 236, 0.6) !important;
	font-family: var(--cw-font-ui) !important;
	font-size: 0.8125rem !important;
}

.cw-optin-privacy {
	font-family: var(--cw-font-ui);
	font-size: 0.75rem;
	color: rgba(232, 240, 236, 0.4);
	margin-top: 8px;
	text-align: center;
}

/* ─── Related Posts ─── */
.cw-related-posts {
	margin: 2rem 0 3rem;
}

.cw-related-heading {
	font-family: var(--cw-font-heading) !important;
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	color: var(--cw-deep-green) !important;
	margin-bottom: 1.25rem !important;
}

.cw-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.cw-related-card {
	display: block;
	background: var(--cw-light-surface);
	border: 1px solid var(--cw-border);
	border-radius: 10px;
	padding: 1.25rem;
	text-decoration: none !important;
	transition: all 0.2s ease;
}

.cw-related-card:hover {
	border-color: var(--cw-emerald);
	box-shadow: 0 4px 12px rgba(26, 46, 40, 0.08);
	transform: translateY(-2px);
}

.cw-related-category {
	font-family: var(--cw-font-ui);
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--cw-emerald);
}

.cw-related-title {
	font-family: var(--cw-font-heading) !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: var(--cw-deep-green) !important;
	line-height: 1.3 !important;
	margin: 6px 0 8px !important;
}

.cw-related-meta {
	font-family: var(--cw-font-ui);
	font-size: 0.75rem;
	color: var(--cw-muted);
}

/* ═══════════════════════════════════════════════════════════════
   Brand Infographic Overrides
   Fixes: text visibility, brand colors, mobile responsiveness
   ═══════════════════════════════════════════════════════════════ */

/* --- Container --- */
.cw-infographic {
	border: 1px solid var(--cw-border) !important;
	border-radius: 12px !important;
	background: var(--cw-light-surface) !important;
	padding: clamp(24px, 4vw, 56px) clamp(16px, 3vw, 48px) !important;
}

/* --- Header text: make visible on light background --- */
.cw-ig-label {
	color: var(--cw-emerald) !important;
	background: rgba(76, 175, 130, 0.1) !important;
	border-color: rgba(76, 175, 130, 0.2) !important;
}
.cw-ig-title {
	color: var(--cw-deep-green) !important;
}
.cw-ig-subtitle {
	color: var(--cw-muted) !important;
}

/* --- Callout box: brand colors --- */
.cw-ig-callout {
	background: rgba(76, 175, 130, 0.06) !important;
	border-color: rgba(76, 175, 130, 0.2) !important;
}
.cw-ig-callout p {
	color: var(--cw-dark-green) !important;
}

/* --- Pipeline nodes: fix number visibility --- */
.cw-pipe-num {
	color: rgba(255, 255, 255, 0.9) !important;
}
.cw-pipe-node-1 {
	background: linear-gradient(135deg, var(--cw-emerald), #5CDB95) !important;
}
.cw-pipe-node-2 {
	background: linear-gradient(135deg, #3D8B67, var(--cw-emerald)) !important;
}
.cw-pipe-node-3 {
	background: linear-gradient(135deg, var(--cw-deep-green), #2A4A3E) !important;
}
.cw-pipe-connector::before {
	background: linear-gradient(90deg, transparent, var(--cw-emerald), transparent) !important;
}
.cw-pipe-connector-2::before {
	background: linear-gradient(90deg, transparent, #3D8B67, transparent) !important;
}

/* --- Cycle nodes: brand colors --- */
.cw-infographic .cw-cycle-node:nth-child(1) { background: var(--cw-emerald) !important; }
.cw-infographic .cw-cycle-node:nth-child(2) { background: #3D8B67 !important; }
.cw-infographic .cw-cycle-node:nth-child(3) { background: var(--cw-deep-green) !important; }
.cw-infographic .cw-cycle-node:nth-child(4) { background: #2A4A3E !important; }

/* --- Badge --- */
.cw-infographic .cw-infographic-badge {
	background: var(--cw-deep-green) !important;
	color: var(--cw-bright-green) !important;
}

/* --- Bar charts: brand palette --- */
.cw-bar-chart .cw-bar:nth-child(1) { background: var(--cw-deep-green) !important; }
.cw-bar-chart .cw-bar:nth-child(2) { background: #2A4A3E !important; }
.cw-bar-chart .cw-bar:nth-child(3) { background: #3D8B67 !important; }
.cw-bar-chart .cw-bar:nth-child(4) { background: var(--cw-emerald) !important; }

/* --- Waterfall bars: brand colors --- */
.cw-waterfall-bar:nth-child(1) { background: var(--cw-deep-green) !important; }
.cw-waterfall-bar:nth-child(2) { background: #2A4A3E !important; }
.cw-waterfall-bar:nth-child(3) { background: #3D8B67 !important; }
.cw-waterfall-bar:nth-child(4) { background: var(--cw-emerald) !important; }
.cw-waterfall-bar:nth-child(5) { background: var(--cw-muted) !important; }
.cw-wf-label, .cw-wf-pct {
	color: #fff !important;
	font-weight: 700 !important;
}

/* --- Gauge labels: ensure readable --- */
.cw-gauge-labels {
	color: var(--cw-muted) !important;
}
.cw-gauge-label-item {
	font-size: 13px !important;
	line-height: 1.4 !important;
}

/* --- Orbital: ensure labels readable --- */
.cw-orbital-center {
	color: var(--cw-deep-green) !important;
	background: rgba(76, 175, 130, 0.12) !important;
	border-color: var(--cw-emerald) !important;
}
.cw-orbital-label-text strong {
	color: var(--cw-deep-green) !important;
}
.cw-orbital-label-text span {
	color: var(--cw-muted) !important;
}

/* --- Stack layers: brand colors --- */
.cw-stack-layer:nth-child(1) { background: var(--cw-deep-green) !important; }
.cw-stack-layer:nth-child(2) { background: #2A4A3E !important; }
.cw-stack-layer:nth-child(3) { background: #3D8B67 !important; }
.cw-stack-layer:nth-child(4) { background: var(--cw-emerald) !important; }
.cw-stack-layer:nth-child(5) { background: var(--cw-bright-green) !important; color: var(--cw-deep-green) !important; }

/* --- Scorecard rows: readable --- */
.cw-scorecard-row {
	border-color: var(--cw-border) !important;
}

/* --- Ensure animated elements are visible even without JS --- */
.cw-infographic .cw-chart-area,
.cw-infographic .cw-chart-label,
.cw-infographic .cw-cascade-node,
.cw-infographic .cw-flow-arrow,
.cw-infographic .cw-venn-circle,
.cw-infographic .cw-stack-layer,
.cw-infographic .cw-timeline-node,
.cw-infographic .cw-funnel-stage,
.cw-infographic .cw-radar-area,
.cw-infographic .cw-scorecard-row,
.cw-infographic .cw-cycle-node,
.cw-infographic .cw-waterfall-bar,
.cw-infographic .cw-schedule-block,
.cw-infographic .cw-matrix-dot {
	opacity: 1 !important;
	transform: none !important;
}

/* ─── Infographic Mobile Responsive ─── */
@media (max-width: 768px) {
	.cw-infographic {
		padding: 20px 16px !important;
		margin: 32px 0 !important;
	}

	.cw-ig-title {
		font-size: 20px !important;
	}
	.cw-ig-subtitle {
		font-size: 13px !important;
	}

	/* Pipeline: stack vertically on mobile */
	.cw-pipeline {
		flex-direction: column !important;
		align-items: center !important;
		gap: 12px !important;
	}
	.cw-pipe-node {
		width: 100% !important;
		max-width: 280px !important;
		flex-direction: row !important;
		padding: 16px 20px !important;
		gap: 12px !important;
	}
	.cw-pipe-num {
		font-size: 24px !important;
	}
	.cw-pipe-connector {
		width: 3px !important;
		height: 20px !important;
	}
	.cw-pipe-desc {
		font-size: 12px !important;
	}

	/* Orbital: stack labels below */
	.cw-orbital {
		transform: scale(0.7) !important;
		margin: 0 auto !important;
	}
	.cw-orbital-labels {
		margin-top: 16px !important;
	}

	/* Gauge: scale down */
	.cw-gauge-wrap {
		max-width: 100% !important;
	}
	.cw-gauge-svg {
		max-width: 260px !important;
		margin: 0 auto !important;
		display: block !important;
	}
	.cw-gauge-labels {
		flex-direction: column !important;
		gap: 8px !important;
		font-size: 12px !important;
	}

	/* Waterfall: ensure bars don't overflow */
	.cw-waterfall {
		gap: 8px !important;
	}
	.cw-waterfall-bar {
		min-height: 40px !important;
	}
	.cw-wf-label {
		font-size: 11px !important;
	}

	/* Chart SVGs: ensure they scale */
	.cw-chart-container,
	.cw-chart-svg {
		max-width: 100% !important;
		height: auto !important;
	}

	/* Stacked layouts: single column */
	.cw-infographic [style*="grid-template-columns"] {
		grid-template-columns: 1fr !important;
	}
	.cw-infographic [style*="display:flex"][style*="gap"] {
		flex-wrap: wrap !important;
	}

	/* Callout: tighter padding */
	.cw-ig-callout {
		padding: 14px 16px !important;
	}
	.cw-ig-callout p {
		font-size: 13px !important;
	}

	/* Footer */
	.cw-ig-footer {
		margin-top: 16px !important;
	}
}

@media (max-width: 480px) {
	.cw-infographic {
		padding: 16px 12px !important;
		border-radius: 8px !important;
	}
	.cw-ig-title {
		font-size: 18px !important;
	}
	.cw-orbital {
		transform: scale(0.55) !important;
	}
	.cw-pipe-node {
		padding: 12px 16px !important;
	}
}

/* ─── FAQ Section Styling ─── */
.cw-faq-section {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 2px solid var(--cw-border);
}

.cw-faq-section h2 {
	font-size: 1.5rem !important;
}

.cw-faq-section h3 {
	font-family: var(--cw-font-heading) !important;
	font-weight: 700 !important;
	font-size: 1.125rem !important;
	color: var(--cw-deep-green) !important;
	padding: 1rem 0 0.5rem;
	margin-top: 1.5rem !important;
	border-top: 1px solid var(--cw-border);
}

.cw-faq-section h3:first-of-type {
	border-top: none;
	margin-top: 1rem !important;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
	.cw-author-box {
		flex-direction: column;
		text-align: center;
		align-items: center;
	}

	.cw-author-credentials {
		justify-content: center;
	}

	.cw-post-optin-inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.cw-related-grid {
		grid-template-columns: 1fr;
	}

	.cw-article-meta-bar {
		flex-wrap: wrap;
		gap: 8px;
	}

	.cw-stat-callout {
		flex-direction: column;
		gap: 4px;
		text-align: center;
	}
}