/**
 * ContentForge AI - Frontend AEO & Schema Components Styling
 *
 * Fully responsive, cross-theme, with comprehensive Light & Dark Mode support.
 * Compatible with SpeedBlog Pro, Astra, GeneratePress, Kadence, and default WP themes.
 *
 * Developed by W3Techy Enterprise (https://w3techy.com)
 */

/* ========================================================
   1. Theme Variables & Base Settings (Light Default)
   ======================================================== */
:root {
	--cf-da-bg: #f0fdf4;
	--cf-da-border: #16a34a;
	--cf-da-badge: #15803d;
	--cf-da-question: #14532d;
	--cf-da-text: #166534;

	--cf-card-bg: #f8fafc;
	--cf-card-border: #e2e8f0;
	--cf-card-accent: #4f46e5;
	--cf-card-title: #1e1b4b;
	--cf-card-text: #334155;

	--cf-toc-bg: #ffffff;
	--cf-toc-border: #e2e8f0;
	--cf-toc-title: #0f172a;
	--cf-toc-text: #334155;
	--cf-toc-num: #4f46e5;
	--cf-toc-hover: #4f46e5;
	--cf-toc-toggle: #64748b;

	--cf-faq-bg: #ffffff;
	--cf-faq-border: #e2e8f0;
	--cf-faq-question: #0f172a;
	--cf-faq-text: #475569;

	--cf-table-th-bg: #0f172a;
	--cf-table-th-text: #ffffff;
	--cf-table-border: #e2e8f0;
	--cf-table-text: #334155;
	--cf-table-alt-bg: #f8fafc;

	--cf-check-bg: #fdf4ff;
	--cf-check-border: #c026d3;
	--cf-check-title: #701a75;
	--cf-check-text: #4a044e;

	--cf-rel-bg: #f8fafc;
	--cf-rel-border: #e2e8f0;
	--cf-rel-accent: #06b6d4;
	--cf-rel-title: #0e7490;
	--cf-rel-link: #0284c7;

	--cf-internal-link: #4f46e5;
	--cf-internal-link-hover: #3730a3;
}

/* ========================================================
   2. Dark Mode Variable Overrides
   Supports: [data-theme="dark"] (Speedblog Pro), body.dark-mode,
   body.dark, [data-bs-theme="dark"], and OS prefers-color-scheme
   ======================================================== */
[data-theme="dark"],
body.dark-mode,
body.dark,
[data-bs-theme="dark"] {
	--cf-da-bg: #062817;
	--cf-da-border: #22c55e;
	--cf-da-badge: #4ade80;
	--cf-da-question: #86efac;
	--cf-da-text: #dcfce7;

	--cf-card-bg: #151b28;
	--cf-card-border: #283347;
	--cf-card-accent: #818cf8;
	--cf-card-title: #e0e7ff;
	--cf-card-text: #cbd5e1;

	--cf-toc-bg: #161e2e;
	--cf-toc-border: #2a374f;
	--cf-toc-title: #f1f5f9;
	--cf-toc-text: #cbd5e1;
	--cf-toc-num: #818cf8;
	--cf-toc-hover: #38bdf8;
	--cf-toc-toggle: #94a3b8;

	--cf-faq-bg: #161e2e;
	--cf-faq-border: #2a374f;
	--cf-faq-question: #f1f5f9;
	--cf-faq-text: #cbd5e1;

	--cf-table-th-bg: #1e293b;
	--cf-table-th-text: #f8fafc;
	--cf-table-border: #334155;
	--cf-table-text: #e2e8f0;
	--cf-table-alt-bg: #0f172a;

	--cf-check-bg: #2a122e;
	--cf-check-border: #e879f9;
	--cf-check-title: #f5d0fe;
	--cf-check-text: #fae8ff;

	--cf-rel-bg: #0f232e;
	--cf-rel-border: #164e63;
	--cf-rel-accent: #22d3ee;
	--cf-rel-title: #67e8f9;
	--cf-rel-link: #38bdf8;

	--cf-internal-link: #818cf8;
	--cf-internal-link-hover: #a5b4fc;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]):not(.light-mode) {
		--cf-da-bg: #062817;
		--cf-da-border: #22c55e;
		--cf-da-badge: #4ade80;
		--cf-da-question: #86efac;
		--cf-da-text: #dcfce7;

		--cf-card-bg: #151b28;
		--cf-card-border: #283347;
		--cf-card-accent: #818cf8;
		--cf-card-title: #e0e7ff;
		--cf-card-text: #cbd5e1;

		--cf-toc-bg: #161e2e;
		--cf-toc-border: #2a374f;
		--cf-toc-title: #f1f5f9;
		--cf-toc-text: #cbd5e1;
		--cf-toc-num: #818cf8;
		--cf-toc-hover: #38bdf8;
		--cf-toc-toggle: #94a3b8;

		--cf-faq-bg: #161e2e;
		--cf-faq-border: #2a374f;
		--cf-faq-question: #f1f5f9;
		--cf-faq-text: #cbd5e1;

		--cf-table-th-bg: #1e293b;
		--cf-table-th-text: #f8fafc;
		--cf-table-border: #334155;
		--cf-table-text: #e2e8f0;
		--cf-table-alt-bg: #0f172a;

		--cf-check-bg: #2a122e;
		--cf-check-border: #e879f9;
		--cf-check-title: #f5d0fe;
		--cf-check-text: #fae8ff;

		--cf-rel-bg: #0f232e;
		--cf-rel-border: #164e63;
		--cf-rel-accent: #22d3ee;
		--cf-rel-title: #67e8f9;
		--cf-rel-link: #38bdf8;

		--cf-internal-link: #818cf8;
		--cf-internal-link-hover: #a5b4fc;
	}
}

/* ========================================================
   3. Single Post View Theme Safeguards
   Guarantees entry content text is never invisible black-on-black in dark mode
   ======================================================== */
[data-theme="dark"] .entry-content,
body.dark-mode .entry-content,
body.dark .entry-content {
	color: #e2e8f0;
}

[data-theme="dark"] .entry-content p,
body.dark-mode .entry-content p,
[data-theme="dark"] .entry-content li,
body.dark-mode .entry-content li {
	color: #e2e8f0;
}

/* ========================================================
   4. Direct Answer Box (AEO Snippet Target)
   Block: contentforge/direct-answer-block
   ======================================================== */
.contentforge-aeo-box {
	margin: 28px 0;
	padding: 24px 28px;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.contentforge-direct-answer,
.wp-block-contentforge-direct-answer-block {
	background: var(--cf-da-bg);
	border: 1px solid var(--cf-card-border);
	border-left: 6px solid var(--cf-da-border);
}

.contentforge-aeo-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--cf-da-badge);
	margin-bottom: 12px;
}

.contentforge-direct-question {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 10px;
	color: var(--cf-da-question);
	line-height: 1.4;
}

.contentforge-direct-text p,
.contentforge-direct-answer p {
	font-size: 17px;
	line-height: 1.65;
	color: var(--cf-da-text);
	margin: 0;
}

/* ========================================================
   5. Key Takeaways Card
   Block: contentforge/takeaways-block
   ======================================================== */
.contentforge-takeaways-card,
.wp-block-contentforge-takeaways-block {
	background: var(--cf-card-bg);
	border: 1px solid var(--cf-card-border);
	border-left: 6px solid var(--cf-card-accent);
}

.contentforge-takeaways-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.contentforge-takeaways-header h3,
.wp-block-contentforge-takeaways-block h3 {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	color: var(--cf-card-title) !important;
}

.contentforge-takeaways-list {
	margin: 0;
	padding-left: 20px;
}

.contentforge-takeaways-list li {
	margin-bottom: 8px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--cf-card-text) !important;
}

/* ========================================================
   6. Table of Contents - Integrated Gutenberg Block
   Block: contentforge/toc-block
   ======================================================== */
.wp-block-contentforge-toc-block {
	margin: 32px 0;
}

.contentforge-toc-container {
	padding: 24px;
	background: var(--cf-toc-bg);
	border: 1px solid var(--cf-toc-border);
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
	transition: all 0.25s ease;
}

.contentforge-toc-container.is-collapsed {
	padding-bottom: 16px;
}

.contentforge-toc-header {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 800;
	font-size: 19px;
	color: var(--cf-toc-title);
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--cf-toc-border);
}

.contentforge-toc-container.is-collapsed .contentforge-toc-header {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.contentforge-toc-icon {
	font-size: 20px;
	line-height: 1;
}

.contentforge-toc-title {
	font-weight: 700;
	color: var(--cf-toc-title) !important;
}

.contentforge-toc-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.contentforge-toc-item {
	padding: 6px 0;
	list-style: none !important;
}

.contentforge-toc-num {
	display: inline-block;
	color: var(--cf-toc-num);
	font-weight: 700;
	margin-right: 8px;
	font-size: 13.5px;
}

.contentforge-toc-item a {
	color: var(--cf-toc-text) !important;
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
	transition: color 0.2s ease;
}

.contentforge-toc-item a:hover {
	color: var(--cf-toc-hover) !important;
	text-decoration: underline;
}

.contentforge-toc-subitem {
	padding-left: 22px;
}

.contentforge-toc-subitem .contentforge-toc-num {
	opacity: 0.85;
	font-size: 12.5px;
}

.contentforge-toc-subitem a {
	font-size: 14px;
	opacity: 0.9;
}

.contentforge-toc-toggle {
	background: none;
	border: none;
	font-size: 13px;
	color: var(--cf-toc-toggle) !important;
	cursor: pointer;
	margin-left: auto;
	font-weight: 600;
	padding: 2px 6px;
	transition: color 0.15s ease;
}

.contentforge-toc-toggle:hover {
	color: var(--cf-toc-hover) !important;
}

/* ========================================================
   7. FAQ Section Block (with Schema markup)
   Block: contentforge/faq-block
   ======================================================== */
.contentforge-faq-wrapper,
.wp-block-contentforge-faq-block {
	margin: 40px 0;
}

.contentforge-faq-wrapper h2,
.wp-block-contentforge-faq-block h2 {
	margin-bottom: 24px;
}

.contentforge-faq-item {
	margin-bottom: 16px;
	padding: 20px 24px;
	background: var(--cf-faq-bg);
	border: 1px solid var(--cf-faq-border);
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
	transition: background 0.2s ease, border-color 0.2s ease;
}

.contentforge-faq-question {
	margin: 0 0 10px;
	font-size: 18px;
	font-weight: 700;
	color: var(--cf-faq-question) !important;
}

.contentforge-faq-answer p {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--cf-faq-text) !important;
}

/* ========================================================
   8. Responsive Tables
   ======================================================== */
.contentforge-table {
	width: 100%;
	border-collapse: collapse;
	margin: 24px 0;
	font-size: 15px;
	overflow-x: auto;
	display: block;
}

.contentforge-table th {
	background: var(--cf-table-th-bg);
	color: var(--cf-table-th-text) !important;
	padding: 12px 16px;
	text-align: left;
	font-weight: 700;
}

.contentforge-table td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--cf-table-border);
	color: var(--cf-table-text) !important;
}

.contentforge-table tr:nth-child(even) td {
	background: var(--cf-table-alt-bg);
}

/* ========================================================
   9. Action Checklist Block
   Block: contentforge/checklist-block
   ======================================================== */
.contentforge-checklist,
.wp-block-contentforge-checklist-block {
	background: var(--cf-check-bg);
	border: 1px solid var(--cf-card-border);
	border-left: 6px solid var(--cf-check-border);
	padding: 24px 28px;
	border-radius: 12px;
	margin: 32px 0;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.contentforge-checklist h3,
.wp-block-contentforge-checklist-block h3 {
	margin-top: 0;
	color: var(--cf-check-title) !important;
	font-weight: 800;
}

.contentforge-checklist ol,
.wp-block-contentforge-checklist-block ol {
	margin-bottom: 0;
	padding-left: 20px;
}

.contentforge-checklist li,
.wp-block-contentforge-checklist-block li {
	margin-bottom: 8px;
	color: var(--cf-check-text) !important;
	font-size: 16px;
	line-height: 1.6;
}

/* ========================================================
   10. Recommended Related Guides Block
   Block: contentforge/related-guides-block
   ======================================================== */
.contentforge-related-posts-card,
.wp-block-contentforge-related-guides-block {
	background: var(--cf-rel-bg);
	border: 1px solid var(--cf-rel-border);
	border-left: 5px solid var(--cf-rel-accent);
	padding: 20px 24px;
	border-radius: 10px;
	margin: 32px 0;
}

.related-posts-header {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 700;
	color: var(--cf-rel-title) !important;
	margin-bottom: 12px;
}

.related-posts-list {
	margin: 0;
	padding-left: 20px;
}

.related-posts-list li {
	margin-bottom: 6px;
	font-size: 15px;
}

.related-posts-list a {
	color: var(--cf-rel-link) !important;
	font-weight: 600;
	text-decoration: underline;
}

/* ========================================================
   11. Auto In-Site Internal Links
   ======================================================== */
.contentforge-internal-link {
	color: var(--cf-internal-link) !important;
	text-decoration: underline !important;
	text-decoration-thickness: 1.5px !important;
	text-underline-offset: 3px !important;
	transition: color 0.15s ease;
}

.contentforge-internal-link:hover {
	color: var(--cf-internal-link-hover) !important;
}

/* ========================================================
   12. Image Figures (Scoped & Protected)
   ======================================================== */
.contentforge-inline-figure,
figure.wp-block-image.contentforge-inline-figure {
	margin: 32px auto;
	text-align: center;
}

.contentforge-inline-figure img {
	border-radius: 10px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	max-width: 100%;
	height: auto;
	display: inline-block;
}

.contentforge-inline-figure figcaption {
	text-align: center;
	font-size: 13px;
	color: #64748b;
	margin-top: 8px;
	font-style: italic;
}

[data-theme="dark"] .contentforge-inline-figure figcaption,
body.dark-mode .contentforge-inline-figure figcaption {
	color: #94a3b8;
}

/* ========================================================
   13. ContentForge AI Page Generator Responsive Components
   ======================================================== */
.wp-block-group.contentforge-page-section {
	width: 100%;
	box-sizing: border-box;
}

.wp-block-columns.contentforge-feature-grid,
.wp-block-columns.contentforge-stats-grid,
.wp-block-columns.contentforge-pricing-grid {
	margin-top: 32px !important;
	margin-bottom: 32px !important;
}

.wp-block-column.contentforge-card-column {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-column.contentforge-card-column:hover {
	transform: translateY(-4px);
}

.contentforge-legal-notice-box {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-left: 6px solid #3b82f6;
	border-radius: 8px;
	padding: 20px 24px;
	margin: 24px 0 32px;
	font-size: 15px;
	line-height: 1.6;
	color: #1e293b;
}

.contentforge-legal-notice-box strong {
	color: #0f172a;
}