/**
 * Research Article Styles
 *
 * All rules scoped under .purma-article-container to avoid
 * conflicts with OceanWP parent theme styles.
 */

/* ============================================
   CSS Custom Properties
   ============================================ */
.purma-article-container {
	--color-bg: #fafaf8;
	--color-text: #1a1a2e;
	--color-text-secondary: #4a4a5a;
	--color-accent-red: #c0392b;
	--color-accent-blue: #042157;
	--color-accent-green: #166441;
	--color-accent-teal: #1a7a6d;
	--color-border: #e2e2dd;
	--color-highlight: #fff3cd;
	--color-card-bg: #ffffff;
	--max-width: 780px;
}

/* ============================================
   Base / Reset (scoped)
   ============================================ */
.purma-article-container,
.purma-article-container * {
	box-sizing: border-box;
}

.purma-article-container {
	font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
	color: var(--color-text);
	line-height: 1.8;
	font-size: 17px;
	-webkit-font-smoothing: antialiased;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 20px 24px 60px;
}

/* ============================================
   Featured Image
   ============================================ */
.purma-article-container .featured-image-wrap {
	margin: 0 -24px 40px;
}

.purma-article-container .featured-image-wrap img {
	width: 100%;
	height: auto;
	display: block;
}

/* ============================================
   Article Header
   ============================================ */
.purma-article-container .article-category {
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 12px;
	display: inline-block;
	padding: 4px 12px;
	border-radius: 3px;
}

.purma-article-container h1 {
	font-family: 'Merriweather', Georgia, serif;
	font-size: 2.2em;
	font-weight: 900;
	line-height: 1.25;
	color: var(--color-accent-blue);
	margin-bottom: 16px;
	letter-spacing: -0.5px;
}

.purma-article-container .article-subtitle {
	font-size: 1.2em;
	color: var(--color-text-secondary);
	font-weight: 300;
	line-height: 1.6;
	margin-bottom: 24px;
	border-left: 3px solid var(--subtitle-border-color, var(--color-accent-red));
	padding-left: 16px;
}

.purma-article-container .article-meta {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 16px 0;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	margin-bottom: 36px;
	font-size: 14px;
	color: var(--color-text-secondary);
	flex-wrap: wrap;
}

.purma-article-container .meta-item {
	display: flex;
	align-items: center;
	gap: 6px;
}

.purma-article-container .meta-dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--color-border);
}

.purma-article-container .reading-time {
	background: var(--color-accent-green);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 20px;
}

/* ============================================
   Key Takeaways Box
   ============================================ */
.purma-article-container .key-takeaways {
	background: linear-gradient(135deg, var(--takeaway-gradient-start, #042157) 0%, var(--takeaway-gradient-end, #0a3a7e) 100%);
	color: #fff;
	padding: 32px;
	border-radius: 8px;
	margin-bottom: 40px;
	position: relative;
	overflow: hidden;
}

.purma-article-container .key-takeaways::before {
	content: '';
	position: absolute;
	top: -40px;
	right: -40px;
	width: 120px;
	height: 120px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 50%;
}

.purma-article-container .key-takeaways h2 {
	font-family: 'Merriweather', serif;
	font-size: 1.15em;
	font-weight: 700;
	margin-bottom: 18px;
	color: var(--takeaway-accent, #ffd166);
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 0;
}

.purma-article-container .key-takeaways ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.purma-article-container .key-takeaways li {
	padding: 8px 0 8px 24px;
	position: relative;
	font-size: 15px;
	line-height: 1.6;
	color: #ffffff;
}

.purma-article-container .key-takeaways li::before {
	content: var(--takeaway-bullet, '▹');
	position: absolute;
	left: 0;
	color: var(--takeaway-accent, #ffd166);
	font-weight: bold;
}

.purma-article-container .key-takeaways strong {
	color: var(--takeaway-accent, #ffd166);
	font-weight: 700;
}

.purma-article-container .key-takeaways em {
	color: var(--takeaway-em, #a8dadc);
	font-style: normal;
}

/* Override p/span color inside key takeaways (WYSIWYG wraps text in <p> tags) */
.purma-article-container .key-takeaways p,
.purma-article-container .key-takeaways span,
.purma-article-container .key-takeaways li > * {
	color: #ffffff;
}

.purma-article-container .key-takeaways p {
	margin-bottom: 0;
}

.purma-article-container .key-takeaways strong,
.purma-article-container .key-takeaways p strong {
	color: var(--takeaway-accent, #ffd166);
	font-weight: 700;
}

.purma-article-container .key-takeaways em,
.purma-article-container .key-takeaways p em {
	color: var(--takeaway-em, #a8dadc);
	font-style: normal;
}

/* ============================================
   Content Typography
   ============================================ */
.purma-article-container h2 {
	font-family: 'Merriweather', Georgia, serif;
	font-size: 1.55em;
	font-weight: 700;
	color: var(--color-accent-blue);
	margin: 48px 0 18px;
	line-height: 1.35;
}

.purma-article-container h3 {
	font-family: 'Source Sans 3', sans-serif;
	font-size: 1.2em;
	font-weight: 700;
	color: var(--color-text);
	margin: 32px 0 12px;
}

.purma-article-container p {
	margin-bottom: 20px;
	color: var(--color-text);
}

.purma-article-container strong {
	color: var(--color-text);
	font-weight: 600;
}

.purma-article-container a {
	color: var(--color-accent-green);
	text-decoration: underline;
	text-decoration-color: rgba(22, 100, 65, 0.3);
	text-underline-offset: 3px;
	transition: all 0.2s;
}

.purma-article-container a:hover {
	color: var(--color-accent-blue);
	text-decoration-color: var(--color-accent-blue);
}

/* ============================================
   Callout Boxes
   ============================================ */
.purma-article-container .callout-warning {
	background: #fff8f0;
	border-left: 4px solid var(--color-accent-red);
	padding: 20px 24px;
	margin: 28px 0;
	border-radius: 0 6px 6px 0;
}

.purma-article-container .callout-warning .callout-title {
	font-weight: 700;
	color: var(--color-accent-red);
	font-size: 15px;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.purma-article-container .callout-warning p {
	margin-bottom: 0;
	font-size: 15px;
	color: #5a4a3a;
}

.purma-article-container .callout-info {
	background: #f0f7ff;
	border-left: 4px solid var(--color-accent-blue);
	padding: 20px 24px;
	margin: 28px 0;
	border-radius: 0 6px 6px 0;
}

.purma-article-container .callout-info .callout-title {
	font-weight: 700;
	color: var(--color-accent-blue);
	font-size: 15px;
	margin-bottom: 8px;
}

.purma-article-container .callout-info p {
	margin-bottom: 0;
	font-size: 15px;
	color: #3a4a5a;
}

.purma-article-container .callout-success {
	background: #f0faf5;
	border-left: 4px solid var(--color-accent-green);
	padding: 20px 24px;
	margin: 28px 0;
	border-radius: 0 6px 6px 0;
}

.purma-article-container .callout-success .callout-title {
	font-weight: 700;
	color: var(--color-accent-green);
	font-size: 15px;
	margin-bottom: 8px;
}

.purma-article-container .callout-success p {
	margin-bottom: 0;
	font-size: 15px;
	color: #2a4a3a;
}

/* ============================================
   Inline Images / Figures
   ============================================ */
.purma-article-container .article-image {
	margin: 32px -24px;
	text-align: center;
}

.purma-article-container .article-image img {
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: 0;
}

.purma-article-container .article-image figcaption {
	font-size: 13px;
	color: var(--color-text-secondary);
	margin-top: 8px;
	font-style: italic;
	padding: 0 24px;
}

/* ============================================
   Product Cards
   ============================================ */
.purma-article-container .product-card {
	background: var(--color-card-bg);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	padding: 24px;
	margin: 24px 0;
	display: flex;
	gap: 20px;
	align-items: flex-start;
	transition: box-shadow 0.2s;
}

.purma-article-container .product-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.purma-article-container .product-icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	background: var(--color-accent-green);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
}

.purma-article-container .product-card h4 {
	font-size: 1em;
	color: var(--color-accent-blue);
	margin-bottom: 6px;
}

.purma-article-container .product-card .product-sku {
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px;
	color: var(--color-text-secondary);
	background: #f4f4f0;
	padding: 2px 8px;
	border-radius: 3px;
	display: inline-block;
	margin-bottom: 8px;
}

.purma-article-container .product-card p {
	font-size: 15px;
	margin-bottom: 8px;
	color: var(--color-text-secondary);
}

.purma-article-container .product-card a.product-link {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-accent-green);
}

/* ============================================
   Step Cards
   ============================================ */
.purma-article-container .step-card {
	background: var(--color-card-bg);
	border: 1px solid var(--color-border);
	border-radius: 10px;
	padding: 0;
	margin: 32px 0;
	overflow: hidden;
	transition: box-shadow 0.2s;
}

.purma-article-container .step-card:hover {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.purma-article-container .step-header {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 24px;
	border-bottom: 1px solid var(--color-border);
}

.purma-article-container .step-number {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Merriweather', serif;
	font-weight: 900;
	font-size: 1.2em;
	color: #fff;
	flex-shrink: 0;
}

.purma-article-container .step-number.red    { background: var(--color-accent-red); }
.purma-article-container .step-number.amber  { background: #d4890a; }
.purma-article-container .step-number.green  { background: var(--color-accent-green); }
.purma-article-container .step-number.blue   { background: #1a6fa8; }
.purma-article-container .step-number.purple { background: #6b3fa0; }

.purma-article-container h2.step-title {
	font-family: 'Merriweather', serif;
	font-size: 1.15em;
	font-weight: 700;
	color: var(--color-accent-blue);
	margin: 0;
	line-height: 1.35;
}

.purma-article-container .step-body {
	padding: 24px;
}

.purma-article-container .step-body p {
	margin-bottom: 16px;
	font-size: 16px;
}

.purma-article-container .step-body p:last-child {
	margin-bottom: 0;
}

/* ============================================
   Table of Contents
   ============================================ */
.purma-article-container .toc {
	background: #f8f8f5;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	padding: 24px 28px;
	margin: 0 0 40px;
}

.purma-article-container .toc h3 {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--color-text-secondary);
	margin: 0 0 14px;
	font-family: 'JetBrains Mono', monospace;
}

.purma-article-container .toc ol {
	padding-left: 20px;
	margin: 0;
}

.purma-article-container .toc li {
	padding: 4px 0;
	font-size: 15px;
}

.purma-article-container .toc a {
	color: var(--color-accent-blue);
	text-decoration: none;
}

.purma-article-container .toc a:hover {
	text-decoration: underline;
}

/* ============================================
   Blockquote
   ============================================ */
.purma-article-container blockquote {
	border-left: 3px solid var(--color-accent-teal);
	margin: 28px 0;
	padding: 12px 20px;
	background: #f6faf8;
	border-radius: 0 6px 6px 0;
	font-style: italic;
	color: var(--color-text-secondary);
}

/* ============================================
   FAQ Section
   ============================================ */
.purma-article-container .faq-section {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 2px solid var(--color-accent-blue);
}

.purma-article-container .faq-item {
	border-bottom: 1px solid var(--color-border);
	padding: 20px 0;
}

.purma-article-container .faq-item:last-child {
	border-bottom: none;
}

.purma-article-container .faq-question {
	font-family: 'Source Sans 3', sans-serif;
	font-weight: 700;
	font-size: 1.05em;
	color: var(--color-accent-blue);
	margin-bottom: 10px;
	display: flex;
	gap: 10px;
}

.purma-article-container .faq-question .q-mark {
	color: var(--color-accent-red);
	font-weight: 900;
	flex-shrink: 0;
}

.purma-article-container .faq-answer {
	padding-left: 28px;
	color: var(--color-text-secondary);
	font-size: 15.5px;
	line-height: 1.75;
}

.purma-article-container .faq-answer p {
	margin-bottom: 8px;
}

.purma-article-container .faq-answer p:last-child {
	margin-bottom: 0;
}

/* ============================================
   References Section
   ============================================ */
.purma-article-container .references-section {
	margin-top: 48px;
	padding: 28px;
	background: #f8f8f5;
	border-radius: 8px;
}

.purma-article-container .references-section h2 {
	font-size: 1.2em;
	margin: 0 0 18px;
}

.purma-article-container .references-section ol {
	padding-left: 20px;
}

.purma-article-container .references-section li {
	font-size: 14px;
	color: var(--color-text-secondary);
	margin-bottom: 10px;
	line-height: 1.6;
}

.purma-article-container .references-section a {
	font-size: 13px;
	word-break: break-all;
}

/* ============================================
   Responsive (640px)
   ============================================ */
@media (max-width: 640px) {
	.purma-article-container h1 {
		font-size: 1.7em;
	}

	.purma-article-container h2 {
		font-size: 1.3em;
	}

	.purma-article-container {
		padding: 16px 18px 40px;
	}

	.purma-article-container .key-takeaways {
		padding: 24px 20px;
	}

	.purma-article-container .product-card {
		flex-direction: column;
		gap: 12px;
	}

	.purma-article-container .article-meta {
		gap: 12px;
	}

	.purma-article-container .step-header {
		flex-direction: column;
		gap: 10px;
		text-align: center;
	}

	.purma-article-container .featured-image-wrap {
		margin: 0 -18px 30px;
	}

	.purma-article-container .article-image {
		margin: 24px -18px;
	}
}