/* ========================================
   Semantic SEO Components Styles
   ======================================== */

/* Meta Excerpt Title (H2 - Question Format) */
.meta-excerpt-title {
	font-size: 28px;
	font-weight: 700;
	color: #212529;
	margin: 30px 0 20px 0;
	line-height: 1.3;
	min-height: 40px;
	contain: layout;
}

/* Meta Excerpt */
.meta-excerpt {
	background: #f8f9fa;
	border-left: 4px solid #007bff;
	padding: 20px;
	margin: 20px 0;
	font-size: 18px;
	line-height: 1.6;
	min-height: 120px;
	contain: layout;
}

.meta-excerpt p {
	margin: 0;
	font-weight: 500;
}

/* Trust Signals */
.trust-signals {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin: 20px 0;
	padding: 15px 0 15px 20px;
	border-top: 1px solid #e9ecef;
	border-bottom: 1px solid #e9ecef;
	min-height: 50px;
	contain: layout;
}

.trust-signal {
	display: inline-flex;
	align-items: center;
	font-size: 14px;
	color: #6c757d;
	padding: 5px 12px 5px 16px;
	background: #f8f9fa;
	border-radius: 4px;
}

.trust-signal:before {
	content: "✓";
	margin-right: 8px;
	margin-left: 4px;
	color: #28a745;
	font-weight: bold;
}

/* Key Takeaways (Semantic Version) */
.key-takeaways-semantic {
	background: #fff3cd;
	border: 2px solid #ffc107;
	border-radius: 8px;
	padding: 25px;
	margin: 30px 0;
	min-height: 150px;
	contain: layout;
}

.key-takeaways-semantic h2 {
	margin-top: 0;
	margin-bottom: 15px;
	font-size: 24px;
	color: #856404;
}

.key-takeaways-semantic ol {
	margin: 0;
	padding-left: 25px;
}

.key-takeaways-semantic li {
	margin-bottom: 10px;
	line-height: 1.6;
	font-weight: 500;
}

/* Context Block */
.context-block {
	margin: 40px 0;
	padding: 30px 0;
	min-height: 200px;
	contain: layout;
}

.context-block h2 {
	font-size: 28px;
	margin-bottom: 15px;
	color: #212529;
}

.context-excerpt {
	font-size: 18px;
	line-height: 1.6;
	margin-bottom: 20px;
	padding: 15px;
	background: #e7f3ff;
	border-left: 4px solid #007bff;
	min-height: 60px;
	contain: layout;
}

.context-content {
	font-size: 16px;
	line-height: 1.8;
	contain: layout;
}

/* Callout Components */
.callout {
	display: flex;
	gap: 15px;
	padding: 20px;
	margin: 25px 0;
	border-radius: 8px;
	border-left: 4px solid;
}

.callout-icon {
	font-size: 28px;
	flex-shrink: 0;
	line-height: 1;
}

.callout-content {
	flex: 1;
	font-size: 16px;
	line-height: 1.6;
}

.callout-content strong {
	display: block;
	margin-bottom: 5px;
	font-size: 17px;
}

/* Pro Tip Callout */
.callout-tip {
	background: #d1ecf1;
	border-color: #0c5460;
}

.callout-tip .callout-content strong {
	color: #0c5460;
}

/* Warning Callout */
.callout-warning {
	background: #fff3cd;
	border-color: #856404;
}

.callout-warning .callout-content strong {
	color: #856404;
}

/* Info Callout */
.callout-info {
	background: #e7f3ff;
	border-color: #004085;
}

.callout-info .callout-content strong {
	color: #004085;
}

/* Watch Out Callout (red - for pitfalls/warnings) */
.callout-watch-out {
	background: #fee;
	border-color: #dc2626;
}

.callout-watch-out .callout-icon {
	color: #dc2626;
}

.callout-watch-out .callout-content strong {
	color: #dc2626;
}

.callout-watch-out .callout-content h4 {
	color: #dc2626;
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 18px;
}

/* Pricing Note Callout (for cost-specific callouts) */
.callout-pricing {
	background: #f0fdf4;
	border-color: #16a34a;
}

.callout-pricing .callout-icon {
	color: #16a34a;
}

.callout-pricing .callout-content strong {
	color: #16a34a;
}

.callout-pricing .callout-content h4 {
	color: #16a34a;
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 18px;
}

/* Editor's Choice Banner */
.editors-choice-banner {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	padding: 20px 25px;
	margin: 30px 0;
	border-radius: 8px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.1);
	min-height: 100px;
	contain: layout;
}

.editors-choice-banner .badge {
	display: inline-block;
	background: rgba(255,255,255,0.2);
	padding: 5px 15px;
	border-radius: 20px;
	font-size: 14px;
	margin-right: 10px;
	margin-bottom: 10px;
}

.editors-choice-banner strong {
	font-weight: 700;
	margin-right: 5px;
}

/* Methodology Section */
.methodology-section {
	background: #f8f9fa;
	padding: 40px;
	margin: 50px 0;
	border-radius: 8px;
	border: 1px solid #dee2e6;
	min-height: 200px;
	contain: layout;
}

.methodology-section h2 {
	font-size: 28px;
	margin-bottom: 20px;
	color: #212529;
}

.methodology-content {
	font-size: 16px;
	line-height: 1.8;
	contain: layout;
}

.methodology-content ul,
.methodology-content ol {
	margin: 15px 0;
	padding-left: 25px;
}

.methodology-content li {
	margin-bottom: 10px;
}

/* Key Statistics Section - For Informational Posts */
.key-statistics-section {
	margin: 40px 0;
	padding: 30px 0;
	min-height: 250px;
	contain: layout;
}

.key-statistics-section h2 {
	font-size: 28px;
	margin-bottom: 25px;
	color: #212529;
	text-align: center;
}

.key-statistics-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 20px;
}

.statistic-item {
	text-align: center;
	padding: 25px;
	background: #f8f9fa;
	border-radius: 8px;
	border: 2px solid #e9ecef;
	transition: transform 0.2s, box-shadow 0.2s;
}

.statistic-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 4px 15px rgba(0,0,0,0.1);
	border-color: #007bff;
}

.statistic-value {
	font-size: 48px;
	font-weight: 700;
	color: #007bff;
	line-height: 1.2;
	margin-bottom: 10px;
}

.statistic-label {
	font-size: 16px;
	font-weight: 500;
	color: #495057;
	margin-bottom: 8px;
}

.statistic-source {
	font-size: 13px;
	color: #6c757d;
	font-style: italic;
}

/* Sub-topic Checklist - For Informational Posts */
.subtopic-checklist-section {
	background: #e7f3ff;
	border-left: 4px solid #007bff;
	padding: 25px 30px;
	margin: 30px 0;
	border-radius: 4px;
	min-height: 120px;
	contain: layout;
}

.subtopic-checklist-section h3 {
	font-size: 20px;
	margin-bottom: 15px;
	color: #004085;
}

.subtopic-checklist ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.subtopic-checklist li {
	padding: 8px 0;
	font-size: 16px;
	line-height: 1.6;
	color: #212529;
	display: flex;
	align-items: center;
}

.subtopic-checklist .checkmark {
	color: #28a745;
	font-weight: bold;
	font-size: 20px;
	margin-right: 10px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.meta-excerpt {
		padding: 15px;
		font-size: 16px;
	}

	.trust-signals {
		gap: 10px;
	}

	.trust-signal {
		font-size: 13px;
		padding: 4px 10px;
	}

	.key-takeaways-semantic {
		padding: 20px;
	}

	.key-takeaways-semantic h2 {
		font-size: 20px;
	}

	.context-block {
		margin: 30px 0;
		padding: 20px 0;
	}

	.context-block h2 {
		font-size: 24px;
	}

	.callout {
		gap: 12px;
		padding: 15px;
	}

	.callout-icon {
		font-size: 24px;
	}

	.editors-choice-banner {
		padding: 15px 20px;
	}

	.methodology-section {
		padding: 25px 20px;
		margin: 30px 0;
	}

	.methodology-section h2 {
		font-size: 24px;
	}

	.key-statistics-grid {
		grid-template-columns: 1fr;
		gap: 15px;
	}

	.statistic-item {
		padding: 20px;
	}

	.statistic-value {
		font-size: 36px;
	}

	.statistic-label {
		font-size: 14px;
	}

	.subtopic-checklist-section {
		padding: 20px;
	}

	.subtopic-checklist-section h3 {
		font-size: 18px;
	}

	.subtopic-checklist li {
		font-size: 14px;
	}
}

/* ========================================
   CLS (Cumulative Layout Shift) Fixes
   ======================================== */

/* Featured/Default Images - Prevent layout shift */
.default-image-wrapper {
	width: 300px;
	height: 196px;
	max-width: 100%;
	display: block;
	overflow: hidden;
	position: relative;
}

.default-image,
.post-thumbnail img,
.featured-image img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

/* Ensure aspect ratio is preserved */
.default-image {
	aspect-ratio: 300 / 196;
}

/* Responsive images while preserving aspect ratio from attributes */
article img,
.post-content img,
.entry-content img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* WordPress images - let browser use width/height attributes for aspect ratio */
.wp-post-image,
.attachment-medium,
.size-medium,
.attachment-large,
.size-large {
	max-width: 100%;
	height: auto;
}

/* Prevent layout shift when TOC is populated */
.sidebar-toc,
.tableof-contents {
	min-height: 200px;
}

/* Reserve space for sticky sidebar ad */
#blog-sticky-sidebar {
	display: block;
	min-height: 600px;
}

/* Reserve space for comparison tables */
.comparison-table-wrapper {
	min-height: 300px;
}

/* Reserve space for app review cards */
.app-review-card {
	min-height: 250px;
}

/* Prevent shift from callout boxes */
.callout {
	contain: layout;
}

/* Prevent shift from dynamic content */
/* Removed contain: layout to allow dynamic height when content is filtered */
/* .content-sidebar-wrapper {
	contain: layout;
} */

/* Post container - prevent massive layout shift */
/* Removed excessive min-heights to allow dynamic content height */
/* .post-container {
	min-height: 2800px;
	contain: layout;
} */

/* Article wrapper */
/* article.post,
article.single,
article[id^="post-"] {
	min-height: 3200px;
	contain: layout;
} */

/* Main content area */
/* main.col-md-12,
main[role="main"] {
	min-height: 2800px;
	contain: layout;
} */

/* Row wrapper inside post-container */
/* Removed min-height to allow dynamic content height when filtering */
/* .post-container .row {
	min-height: 2600px;
	contain: layout;
} */

/* Reduce font loading CLS with fallback font adjustments */
body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	min-height: 100vh;
}

/* Prevent body-level shifts */
/* Note: Removed 'contain: layout' from body as it breaks position:fixed elements like sticky footer */
body.wp-singular,
body.single,
body.post-template-default {
	min-height: 100vh;
}

/* Adjust fallback font metrics to match Montserrat */
@font-face {
	font-family: 'Montserrat-fallback';
	src: local('Arial');
	size-adjust: 105%;
	ascent-override: 92%;
	descent-override: 24%;
	line-gap-override: 0%;
}

/* Apply fallback font with metrics */
h1, h2, h3, h4, h5, h6,
.meta-excerpt-title,
.trust-signal,
.key-takeaways-semantic h2 {
	font-family: 'Montserrat', 'Montserrat-fallback', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ========================================
   Filter Buttons Fix
   ======================================== */

/* Fix white text on filter buttons */
#filterfree,
#filterpremium,
#filterall,
#filter .btn {
	color: #fff !important;
}