/**
 * WhatIs Theme — Single Post Styles
 *
 * Only loaded on singular post views.
 *
 * @package WhatIs
 * @since   1.0.0
 */

/* Entry Header */
.entry-header {
	margin-bottom: var(--space-6);
	padding-bottom: var(--space-6);
	border-bottom: 1px solid var(--border-color);
}

.entry-header .category-badges {
	margin-bottom: var(--space-3);
}

.entry-title {
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-extrabold);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	margin-bottom: var(--space-3);
}

.entry-subtitle {
	font-size: var(--font-size-xl);
	color: var(--text-secondary);
	line-height: var(--line-height-relaxed);
	margin-bottom: var(--space-4);
}

.entry-meta {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.entry-meta-author {
	font-weight: var(--font-weight-semibold);
}

.entry-author-link {
	color: var(--color-primary);
}

.entry-meta-details {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

.entry-meta-item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--font-size-sm);
	color: var(--text-muted);
}

/* Featured Image */
.entry-featured-image {
	margin-bottom: var(--space-6);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.entry-featured-image .featured-img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
}

.featured-img-caption {
	font-size: var(--font-size-sm);
	color: var(--text-muted);
	text-align: center;
	margin-top: var(--space-2);
	font-style: italic;
}

/* Entry Content — long-form optimized */
.entry-content {
	font-size: var(--font-size-md);
	line-height: var(--line-height-body);
	color: var(--text-primary);
	max-width: var(--container-narrow);
}

.entry-content h2 {
	font-size: var(--font-size-3xl);
	margin-top: var(--space-10);
	margin-bottom: var(--space-4);
	padding-top: var(--space-4);
	scroll-margin-top: calc(var(--header-height) + 20px);
}

.entry-content h3 {
	font-size: var(--font-size-2xl);
	margin-top: var(--space-8);
	margin-bottom: var(--space-3);
	scroll-margin-top: calc(var(--header-height) + 20px);
}

.entry-content h4 {
	font-size: var(--font-size-xl);
	margin-top: var(--space-6);
	margin-bottom: var(--space-3);
	scroll-margin-top: calc(var(--header-height) + 20px);
}

.entry-content p {
	margin-bottom: var(--space-5);
}

.entry-content ul,
.entry-content ol {
	margin: var(--space-4) 0;
	padding-left: var(--space-6);
}

.entry-content ul {
	list-style-type: disc;
}

.entry-content ol {
	list-style-type: decimal;
}

.entry-content li {
	margin-bottom: var(--space-2);
	line-height: var(--line-height-relaxed);
}

.entry-content img {
	border-radius: var(--radius-md);
	margin: var(--space-6) 0;
}

.entry-content a {
	color: var(--color-primary);
	text-decoration: underline;
	text-decoration-color: rgba(37, 99, 235, 0.3);
	text-underline-offset: 2px;
	transition: text-decoration-color var(--transition-fast);
}

.entry-content a:hover {
	text-decoration-color: var(--color-primary);
}

/* Table of Contents */
.table-of-contents {
	background: var(--bg-surface);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	margin-bottom: var(--space-6);
}

.toc-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.toc-title {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	margin: 0;
}

.toc-toggle {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--text-muted);
	padding: var(--space-1);
	transition: transform var(--transition-fast);
}

.toc-toggle[aria-expanded="false"] svg {
	transform: rotate(-90deg);
}

.toc-list {
	margin-top: var(--space-3);
	padding-left: var(--space-5);
	list-style: none;
	counter-reset: toc-counter;
}

.toc-list li {
	counter-increment: toc-counter;
	margin-bottom: var(--space-2);
}

.toc-list li::before {
	content: counters(toc-counter, ".") ". ";
	color: var(--color-primary);
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-sm);
}

.toc-list a {
	color: var(--text-secondary);
	font-size: var(--font-size-sm);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.toc-list a:hover,
.toc-list a.active {
	color: var(--color-primary);
}

.toc-list ol {
	margin-top: var(--space-2);
	padding-left: var(--space-4);
	counter-reset: toc-counter;
	list-style: none;
}

/* Sticky TOC (side) — desktop only */
@media (min-width: 1280px) {
	.table-of-contents.sticky {
		position: sticky;
		top: calc(var(--header-height) + 20px);
	}
}

/* Social Share */
.social-share {
	padding: var(--space-6) 0;
	border-top: 1px solid var(--border-color);
	border-bottom: 1px solid var(--border-color);
	margin: var(--space-6) 0;
}

.social-share-title {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	margin-bottom: var(--space-3);
}

.social-share-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.share-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	color: var(--text-secondary);
	background: var(--bg-surface);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	cursor: pointer;
	text-decoration: none;
	transition: all var(--transition-fast);
}

.share-btn:hover {
	color: var(--color-primary);
	border-color: var(--color-primary);
	background: var(--color-primary-light);
}

.share-btn.copied {
	color: var(--color-success);
	border-color: var(--color-success);
}

/* Author Box */
.author-box {
	display: flex;
	gap: var(--space-5);
	padding: var(--space-6);
	background: var(--bg-surface);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	margin: var(--space-8) 0;
}

.author-box-avatar,
.author-box-photo img {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.author-box-label {
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-wider);
	color: var(--text-muted);
	font-weight: var(--font-weight-semibold);
}

.author-box-name {
	font-size: var(--font-size-lg);
	margin: var(--space-1) 0;
}

.author-box-name a {
	color: var(--text-primary);
}

.author-box-name a:hover {
	color: var(--color-primary);
}

.author-box-role {
	font-size: var(--font-size-sm);
	color: var(--color-primary);
}

.author-box-bio {
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	line-height: var(--line-height-relaxed);
	margin: var(--space-3) 0;
}

.author-box-links {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.author-box-links a {
	color: var(--text-muted);
	transition: color var(--transition-fast);
}

.author-box-links a:hover {
	color: var(--color-primary);
}

.author-box-desktop {
	display: none;
}

.author-box-mobile {
	display: block;
}

@media (min-width: 1024px) {
	.author-box-desktop {
		display: block;
		margin-bottom: var(--space-6);
	}
	.author-box-mobile {
		display: none;
	}
}

/* Post Navigation */
.post-navigation {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	margin: var(--space-8) 0;
}

.post-nav-link {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-5);
	background: var(--bg-surface);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	text-decoration: none;
	transition: all var(--transition-fast);
}

.post-nav-link:hover {
	border-color: var(--color-primary);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.post-nav-label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-wider);
	color: var(--text-muted);
	font-weight: var(--font-weight-semibold);
}

.post-nav-title {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	color: var(--text-primary);
	line-height: var(--line-height-snug);
}

.post-nav-next {
	text-align: right;
}

/* Related Posts */
.related-posts,
.related-guides {
	margin: var(--space-8) 0;
	padding-top: var(--space-8);
	border-top: 1px solid var(--border-color);
}

/* Post FAQ Section */
.post-faq-section {
	margin: var(--space-8) 0;
	padding-top: var(--space-8);
	border-top: 1px solid var(--border-color);
}

/* Newsletter CTA Inline */
.newsletter-cta-inline {
	padding: var(--space-6);
	background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--bg-surface) 100%);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	text-align: center;
	margin: var(--space-8) 0;
}

.newsletter-cta-inline h3 {
	font-size: var(--font-size-xl);
	margin-bottom: var(--space-2);
}

.newsletter-cta-inline p {
	color: var(--text-secondary);
	font-size: var(--font-size-sm);
	margin-bottom: var(--space-4);
}

.newsletter-form-inline {
	display: flex;
	gap: var(--space-2);
	max-width: 400px;
	margin: 0 auto;
}

.newsletter-form-inline input {
	flex: 1;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	background: var(--bg-card);
	font-size: var(--font-size-sm);
}

.newsletter-form-inline input:focus {
	border-color: var(--color-primary);
	outline: none;
}

/* Entry Footer */
.entry-footer {
	padding: var(--space-6) 0;
	border-bottom: 1px solid var(--border-color);
}

/* In-Content Ad */
.in-content-ad-top {
	margin-bottom: var(--space-6);
}

/* Comments Area */
.comments-area {
	margin-top: var(--space-8);
	padding-top: var(--space-8);
	border-top: 1px solid var(--border-color);
}

/* Responsive */
@media (min-width: 640px) {
	.post-navigation {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1024px) {
	.entry-title {
		font-size: var(--font-size-5xl);
	}

	.author-box {
		align-items: flex-start;
	}
}