/**
 * SEO Enhancements — Component Styles
 *
 * Covers: reading progress bar, article meta bar, table of contents,
 * related posts, FAQ accordion, highlight boxes, inline CTAs,
 * key takeaways, newsletter block, and copy-link interaction.
 *
 * Design: premium, minimal, calm. Every element earns its place.
 * Performance: no animations that trigger layout/paint. Transform + opacity only.
 * AMP: no styles depend on JS — progressive enhancement only.
 */

/* ─────────────────────────────────────────────
   1. READING PROGRESS BAR
   Fixed at top of viewport. Pure CSS width
   driven by JS via CSS custom property.
───────────────────────────────────────────── */
.sw-progress-bar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	z-index: 10000;
	background: transparent;
	pointer-events: none;
}

.sw-progress-bar__fill {
	height: 100%;
	width: 0%;
	background: var(--sw-coral, #D37975);
	transition: width 60ms linear;
	will-change: width;
	transform-origin: left;
}

/* ─────────────────────────────────────────────
   2. ARTICLE META BAR
   Reading time • Last updated • Copy link
───────────────────────────────────────────── */
.sw-meta-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 0;
	margin-bottom: 1.5rem;
	border-top: 1px solid var(--sw-gray-light, #e5e7eb);
	border-bottom: 1px solid var(--sw-gray-light, #e5e7eb);
	font-size: 0.8125rem;
	color: var(--sw-gray-mid, #6b7280);
}

.sw-meta-bar__left {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.sw-meta-bar__right {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.sw-reading-time {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-weight: 500;
	color: var(--sw-charcoal, #3A4247);
}

.sw-reading-time::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E") center/contain no-repeat;
	opacity: 0.6;
}

.sw-last-updated {
	color: var(--sw-gray-mid, #6b7280);
}

.sw-last-updated::before {
	content: "\b7\a0"; /* middle dot + space */
}

/* ─── Copy Link Button ─── */
.sw-copy-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: var(--sw-gray-xlight, #f7f7f7);
	border: 1px solid var(--sw-gray-light, #e5e7eb);
	border-radius: 6px;
	padding: 0.35rem 0.625rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--sw-charcoal, #3A4247);
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
	line-height: 1;
}

.sw-copy-link:hover {
	background: var(--sw-coral-xlight, #fdf4f4);
	border-color: var(--sw-coral, #D37975);
	color: var(--sw-coral, #D37975);
}

.sw-copy-link.is-copied {
	background: var(--sw-coral, #D37975);
	border-color: var(--sw-coral, #D37975);
	color: #fff;
}

.sw-copy-link svg {
	flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   3. TABLE OF CONTENTS
───────────────────────────────────────────── */
.sw-toc {
	background: var(--sw-gray-xlight, #f7f7f7);
	border: 1px solid var(--sw-gray-light, #e5e7eb);
	border-radius: var(--sw-radius-lg, 16px);
	padding: 1.25rem 1.5rem;
	margin: 2rem 0 2.5rem;
	max-width: 680px;
}

.sw-toc__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.75rem;
}

.sw-toc__title {
	font-size: 0.6875rem !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--sw-gray-mid, #6b7280) !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}

.sw-toc__toggle {
	background: none;
	border: none;
	font-size: 0.75rem;
	color: var(--sw-coral, #D37975);
	cursor: pointer;
	font-weight: 500;
	padding: 0.125rem 0.375rem;
}

.sw-toc__toggle:hover {
	color: var(--sw-coral-dark, #B96360);
}

.sw-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: toc;
}

.sw-toc__list[hidden] {
	display: none;
}

.sw-toc__item {
	counter-increment: toc;
	margin: 0;
	padding: 0;
}

.sw-toc__link {
	display: block;
	padding: 0.375rem 0;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--sw-charcoal, #3A4247);
	text-decoration: none;
	border-left: 2px solid transparent;
	padding-left: 0.75rem;
	transition: color 0.15s, border-color 0.15s;
	line-height: 1.35;
}

.sw-toc__link::before {
	content: counter(toc) ". ";
	color: var(--sw-coral, #D37975);
	font-weight: 600;
	font-size: 0.8125rem;
}

.sw-toc__link:hover,
.sw-toc__link.is-active {
	color: var(--sw-coral, #D37975);
	border-left-color: var(--sw-coral, #D37975);
}

.sw-toc__item--sub .sw-toc__link {
	padding-left: 1.75rem;
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--sw-gray-mid, #6b7280);
}

.sw-toc__item--sub .sw-toc__link::before {
	content: "\2013\a0"; /* en dash */
	color: var(--sw-gray-light, #e5e7eb);
}

/* ─────────────────────────────────────────────
   4. RELATED POSTS
───────────────────────────────────────────── */
.sw-related-posts {
	margin-top: 3rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--sw-gray-light, #e5e7eb);
}

.sw-related-posts__title {
	font-size: 0.6875rem !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--sw-gray-mid, #6b7280) !important;
	margin-bottom: 1.25rem !important;
}

.sw-related-posts__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

@media (max-width: 767px) {
	.sw-related-posts__grid {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
}

.sw-related-posts__card {
	display: flex;
	flex-direction: column;
}

.sw-related-posts__image {
	display: block;
	border-radius: var(--sw-radius, 8px);
	overflow: hidden;
	margin-bottom: 0.75rem;
	aspect-ratio: 16 / 10;
}

.sw-related-posts__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sw-related-posts__body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.sw-related-posts__cat {
	font-size: 0.625rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sw-coral, #D37975);
}

.sw-related-posts__heading {
	font-size: 0.9375rem !important;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 !important;
}

.sw-related-posts__heading a {
	color: var(--sw-ink, #1a1a1a) !important;
	text-decoration: none;
}

.sw-related-posts__heading a:hover {
	color: var(--sw-coral, #D37975) !important;
}

.sw-related-posts__time {
	font-size: 0.6875rem;
	color: var(--sw-gray-mid, #6b7280);
}

/* ─────────────────────────────────────────────
   5. FAQ ACCORDION
   Works with core/details block + Yoast FAQ.
   Pure CSS open/close — no JS dependency.
───────────────────────────────────────────── */
.sw-faq,
.entry-content details,
.wp-block-yoast-faq-block {
	margin: 2rem 0;
}

.entry-content details {
	border: 1px solid var(--sw-gray-light, #e5e7eb);
	border-radius: var(--sw-radius, 8px);
	padding: 0;
	margin-bottom: 0.5rem;
	overflow: hidden;
	transition: border-color 0.15s;
}

.entry-content details[open] {
	border-color: var(--sw-coral, #D37975);
}

.entry-content details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	font-weight: 600;
	font-size: 1rem;
	color: var(--sw-charcoal, #3A4247);
	cursor: pointer;
	list-style: none;
	background: var(--sw-gray-xlight, #f7f7f7);
	transition: background 0.15s;
}

.entry-content details summary::-webkit-details-marker {
	display: none;
}

.entry-content details summary::after {
	content: "+";
	font-size: 1.25rem;
	font-weight: 300;
	color: var(--sw-coral, #D37975);
	transition: transform 0.15s;
	flex-shrink: 0;
	margin-left: 1rem;
}

.entry-content details[open] summary::after {
	content: "\2013"; /* en dash as minus */
}

.entry-content details[open] summary {
	background: var(--sw-coral-xlight, #fdf4f4);
}

.entry-content details > *:not(summary) {
	padding: 0 1.25rem;
}

.entry-content details > p:last-child {
	padding-bottom: 1rem;
}

/* ─────────────────────────────────────────────
   6. HIGHLIGHT / KEY TAKEAWAY BOX
   Use with: <div class="sw-highlight"> in the editor
   or via a reusable block / custom block style.
───────────────────────────────────────────── */
.sw-highlight,
.wp-block-group.is-style-sw-highlight {
	background: var(--sw-coral-xlight, #fdf4f4);
	border-left: 4px solid var(--sw-coral, #D37975);
	border-radius: 0 var(--sw-radius, 8px) var(--sw-radius, 8px) 0;
	padding: 1.25rem 1.5rem;
	margin: 2rem 0;
	font-size: 0.9375rem;
}

.sw-highlight strong:first-child,
.wp-block-group.is-style-sw-highlight strong:first-child {
	display: block;
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sw-coral-dark, #B96360);
	margin-bottom: 0.5rem;
}

/* Key Takeaways variant */
.sw-key-takeaways,
.wp-block-group.is-style-sw-key-takeaways {
	background: var(--sw-gray-xlight, #f7f7f7);
	border: 1px solid var(--sw-gray-light, #e5e7eb);
	border-radius: var(--sw-radius-lg, 16px);
	padding: 1.5rem 1.75rem;
	margin: 2.5rem 0;
}

.sw-key-takeaways h3,
.wp-block-group.is-style-sw-key-takeaways h3 {
	font-size: 0.6875rem !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--sw-gray-mid, #6b7280);
	margin-bottom: 1rem !important;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--sw-coral, #D37975);
}

.sw-key-takeaways ul,
.wp-block-group.is-style-sw-key-takeaways ul {
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.sw-key-takeaways li,
.wp-block-group.is-style-sw-key-takeaways li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.625rem;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.sw-key-takeaways li::before,
.wp-block-group.is-style-sw-key-takeaways li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--sw-coral, #D37975);
}

/* ─────────────────────────────────────────────
   7. INLINE CTA
───────────────────────────────────────────── */
.sw-cta,
.wp-block-group.is-style-sw-cta {
	background: var(--sw-charcoal, #3A4247);
	color: #ffffff;
	border-radius: var(--sw-radius-lg, 16px);
	padding: 2rem 2.25rem;
	margin: 2.5rem 0;
	text-align: center;
}

.sw-cta h3,
.wp-block-group.is-style-sw-cta h3 {
	color: #ffffff !important;
	font-size: 1.25rem !important;
	font-weight: 600;
	margin-bottom: 0.5rem !important;
}

.sw-cta p,
.wp-block-group.is-style-sw-cta p {
	color: #cbd5e1;
	font-size: 0.9375rem;
	margin-bottom: 1.25rem;
	max-width: 100%;
}

.sw-cta .wp-block-button__link,
.wp-block-group.is-style-sw-cta .wp-block-button__link {
	background: var(--sw-coral, #D37975) !important;
	font-weight: 600 !important;
}

/* ─────────────────────────────────────────────
   8. NEWSLETTER / SUBSCRIBE BLOCK
───────────────────────────────────────────── */
.sw-newsletter,
.newspack-newsletters-subscribe {
	background: var(--sw-gray-xlight, #f7f7f7);
	border: 1px solid var(--sw-gray-light, #e5e7eb);
	border-radius: var(--sw-radius-lg, 16px);
	padding: 2rem;
	margin: 2.5rem 0;
	text-align: center;
}

/* ─────────────────────────────────────────────
   9. BREADCRUMBS (native fallback)
───────────────────────────────────────────── */
.sw-breadcrumbs {
	padding: 0.625rem 0;
	font-size: 0.75rem;
	color: var(--sw-gray-mid, #6b7280);
}

.sw-breadcrumbs__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
}

.sw-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
}

.sw-breadcrumbs__item a {
	color: var(--sw-gray-mid, #6b7280);
	text-decoration: none;
}

.sw-breadcrumbs__item a:hover {
	color: var(--sw-coral, #D37975);
	text-decoration: underline;
}

.sw-breadcrumbs__sep {
	margin: 0 0.375rem;
	color: var(--sw-gray-light, #e5e7eb);
}

.sw-breadcrumbs__item [aria-current="page"] {
	color: var(--sw-charcoal, #3A4247);
	font-weight: 500;
}

/* ─────────────────────────────────────────────
   10. TAG & CATEGORY PILLS (enhanced)
───────────────────────────────────────────── */
.entry-footer .tags-links a {
	display: inline-block;
	background: var(--sw-gray-xlight, #f7f7f7);
	color: var(--sw-charcoal, #3A4247);
	border: 1px solid var(--sw-gray-light, #e5e7eb);
	border-radius: 100px;
	padding: 0.2em 0.65em;
	font-size: 0.75rem;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.entry-footer .tags-links a:hover {
	background: var(--sw-coral-xlight, #fdf4f4);
	border-color: var(--sw-coral, #D37975);
	color: var(--sw-coral, #D37975);
}

/* ─────────────────────────────────────────────
   11. AUTHOR BIO ENHANCEMENT
───────────────────────────────────────────── */
.single .author-bio .accent-header a {
	color: var(--sw-ink, #1a1a1a) !important;
	font-size: 1.0625rem;
}

.single .author-bio .accent-header a:hover {
	color: var(--sw-coral, #D37975) !important;
}

.single .author-bio .author-link {
	color: var(--sw-coral, #D37975) !important;
	font-weight: 600;
	font-size: 0.8125rem;
}

/* ─────────────────────────────────────────────
   12. PERFORMANCE — CLS PREVENTION
   Reserve space for elements that load async.
───────────────────────────────────────────── */
.post-thumbnail img,
.wp-post-image {
	aspect-ratio: attr(width) / attr(height);
}

/* Reserve vertical space for featured images */
.single .featured-image-large {
	min-height: 200px;
}

/* Prevent layout shift from web fonts */
body {
	font-synthesis: none;
}