/* =====================================================
   Wygard — blog post stylesheet
   Loaded only on single posts (is_singular('post')).

   Structure:
     1. Entry header (category pill, title, meta)
     2. Entry content typography
     3. Reading progress bar
     4. Table of contents (desktop only)
     5. Author card
     6. Responsive
   ===================================================== */


/* 1. ENTRY HEADER ====================================== */

/* Category pill — used on single posts and on every loop card. */
.entry-taxonomies {
	margin-bottom: var(--space-16);
}
.entry-taxonomies .category-links {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
}
.entry-taxonomies a {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	background: var(--color-bg-alt-2);
	color: var(--color-text-secondary);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--radius-full);
	transition: background var(--trans-fast), color var(--trans-fast), transform var(--trans-fast);
}
.entry-taxonomies a:hover {
	background: var(--color-border);
	color: var(--color-text);
	transform: translateY(-1px);
}

/* Article H1 — between Kadence's tiny 32px default and the homepage hero
 * size. 40px keeps long blog titles to two lines on desktop without
 * fighting for attention with the H2 section accents. */
.single-entry .entry-header .entry-title {
	font-size: 40px;
	line-height: 1.2;
	font-weight: 600;
	margin-bottom: var(--space-16);
}

/* Entry meta (author + date) — subtler styling */
.single-entry .entry-meta {
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
}
.single-entry .entry-meta a {
	color: var(--color-text-secondary);
	text-decoration: none;
}
.single-entry .entry-meta a:hover {
	color: var(--color-green);
}

/* Inline author avatar — applies on single posts and loop cards alike.
 * Make the author link an inline-flex so the avatar and the name sit on
 * the same baseline without depending on inline-block vertical-align
 * (Kadence's .author.vcard is display:block, which made the name wrap
 * under the avatar in narrow flex contexts).
 *
 * Also force the surrounding flex meta rows to center-align — the
 * default stretch made "By" / date sit at the top while the 20px avatar
 * pushed the link's vertical center down. */
.entry-meta,
.entry-meta .posted-by,
.entry-meta .posted-on {
	align-items: center;
}
/* Kadence renders .author.vcard as display:block, which let it stretch to
 * the meta row height while the link inside stayed at the top — visible
 * as the name sitting a few pixels above center. Forcing both vcard and
 * link to inline-flex with center alignment keeps everything on one
 * baseline. */
.entry-meta .author.vcard {
	display: inline-flex;
	align-items: center;
}
.entry-meta .author.vcard a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
}
.entry-meta .entry-meta-avatar {
	width: 20px;
	height: 20px;
	border-radius: var(--radius-full);
	flex-shrink: 0;
	display: block;
}


/* 2. ENTRY CONTENT TYPOGRAPHY ========================== */

.single-entry .entry-content {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	font-size: var(--fs-lg); /* 18px — bumped from 16px for readability */
	line-height: 1.6;
	color: var(--color-text);
}

/* Vertical rhythm — consistent gap between block-level children */
.single-entry .entry-content > * + * {
	margin-top: var(--space-24);
}

.single-entry .entry-content p {
	font-size: var(--fs-lg);
	line-height: 1.6;
}

/* H2 — section heading with short green accent bar underneath */
.single-entry .entry-content h2 {
	font-size: var(--fs-3xl); /* 32px */
	font-weight: 600;
	line-height: 1.26;
	margin-top: var(--space-56);
	margin-bottom: var(--space-16);
	padding-bottom: var(--space-12);
	position: relative;
}
.single-entry .entry-content h2::after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 48px;
	height: 3px;
	background: var(--color-green);
	border-radius: 2px;
}
/* First h2 — no top margin (avoid huge gap right after title) */
.single-entry .entry-content > h2:first-child {
	margin-top: 0;
}

.single-entry .entry-content h3 {
	font-size: var(--fs-2xl); /* 24px */
	font-weight: 600;
	line-height: 1.3;
	margin-top: var(--space-40);
	margin-bottom: var(--space-12);
}

.single-entry .entry-content h4 {
	font-size: var(--fs-xl); /* 20px */
	font-weight: 600;
	margin-top: var(--space-32);
	margin-bottom: var(--space-12);
}

/* Links in article body — visible green underline */
.single-entry .entry-content a {
	color: var(--color-text);
	text-decoration: underline;
	text-decoration-color: var(--color-green);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: color var(--trans-fast), text-decoration-thickness var(--trans-fast);
}
.single-entry .entry-content a:hover {
	color: var(--color-green);
	text-decoration-thickness: 3px;
}

/* Inline code — subtle gray pill, monospace */
.single-entry .entry-content :not(pre) > code {
	display: inline-block;
	padding: 2px 6px;
	background: var(--color-bg-alt);
	color: var(--color-black);
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.9em;
	border-radius: 4px;
	line-height: 1.3;
}

/* Code blocks (pre) */
.single-entry .entry-content pre {
	background: var(--color-bg-alt);
	padding: var(--space-24);
	border-radius: var(--radius-md);
	overflow-x: auto;
	font-size: var(--fs-base);
}
.single-entry .entry-content pre code {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	background: transparent;
	padding: 0;
	display: block;
}

/* Gutenberg button block — match the brand .btn--primary inside prose, so
 * CTAs added via the editor pick up our look without custom HTML. */
.single-entry .entry-content .wp-block-buttons {
	margin: var(--space-40) 0;
}
.single-entry .entry-content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	background: var(--color-green);
	color: var(--color-black);
	font-family: var(--font-family);
	font-weight: 600;
	font-size: var(--fs-base);
	line-height: 1.26;
	border: 2px solid var(--color-green);
	border-radius: var(--radius-2xl);
	text-decoration: none;
	transition: background var(--trans-fast), border-color var(--trans-fast), transform var(--trans-fast);
}
.single-entry .entry-content .wp-block-button__link:hover {
	background: #3BC266;
	border-color: #3BC266;
	color: var(--color-black);
	text-decoration: none;
	transform: translateY(-1px);
}

/* Blockquote — green left border, larger italic text */
.single-entry .entry-content blockquote {
	margin: var(--space-32) 0;
	padding: var(--space-16) var(--space-32);
	border-left: 4px solid var(--color-green);
	font-style: italic;
	font-size: var(--fs-xl); /* 20px */
	line-height: 1.5;
	color: var(--color-text);
	background: transparent;
}
.single-entry .entry-content blockquote p {
	font-size: inherit;
	line-height: inherit;
}
.single-entry .entry-content blockquote > * + * {
	margin-top: var(--space-12);
}

/* Lists — bump font size to match body, keep green markers from main.css */
.single-entry .entry-content ul,
.single-entry .entry-content ol {
	font-size: var(--fs-lg);
	line-height: 1.6;
}
.single-entry .entry-content li {
	margin-bottom: var(--space-12);
}

/* Images in content — soft rounding to match brand */
.single-entry .entry-content img {
	border-radius: var(--radius-md);
}


/* 3. READING PROGRESS BAR ============================== */

.reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	background: var(--color-green);
	z-index: 200;
	transition: width 80ms linear;
	pointer-events: none;
}


/* 4. TABLE OF CONTENTS (desktop only ≥1280px) ========== */

.toc { display: none; }

@media (min-width: 1280px) {
	.toc {
		display: block;
		position: fixed;
		top: 120px;
		left: 24px;
		width: 220px;
		max-height: calc(100vh - 160px);
		overflow-y: auto;
		padding: var(--space-16);
		font-size: var(--fs-sm);
		z-index: 50;
	}
	.toc__heading {
		font-size: var(--fs-xs);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: var(--color-text-subtle);
		margin-bottom: var(--space-12);
	}
	.toc__list {
		display: flex;
		flex-direction: column;
		gap: 2px;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.toc__item--h3 { padding-left: var(--space-16); }
	.toc__link {
		display: block;
		color: var(--color-text-secondary);
		text-decoration: none;
		line-height: 1.4;
		padding: 6px 0 6px 12px;
		border-left: 2px solid transparent;
		transition: color var(--trans-fast), border-color var(--trans-fast);
	}
	.toc__link:hover { color: var(--color-black); }
	.toc__link.is-active {
		color: var(--color-black);
		border-left-color: var(--color-green);
		font-weight: 600;
	}
}


/* 5. AUTHOR CARD ======================================= */

.author-card {
	max-width: 720px;
	margin: var(--space-64) auto var(--space-32);
	padding: var(--space-32);
	background: var(--color-bg-alt);
	border-radius: var(--radius-lg);
	display: flex;
	gap: var(--space-24);
	align-items: flex-start;
}
.author-card__avatar { flex-shrink: 0; }
.author-card__avatar img,
.author-card__avatar .avatar {
	width: 80px;
	height: 80px;
	border-radius: var(--radius-full);
	display: block;
}
.author-card__body { flex: 1; }
.author-card__label {
	font-size: var(--fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-subtle);
	margin-bottom: 4px;
}
.author-card__name {
	font-size: var(--fs-xl);
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: var(--space-8);
}
.author-card__bio {
	font-size: var(--fs-base);
	line-height: 1.5;
	color: var(--color-text-secondary);
}
.author-card__bio p { margin: 0; }
.author-card__bio p + p { margin-top: var(--space-8); }


/* 6. RELATED POSTS ("Missed these?" carousel) ========== */

.entry-related {
	padding: var(--space-64) 0;
	margin-top: var(--space-80);
	border-top: 1px solid var(--color-border);
}

.entry-related-title {
	font-size: var(--fs-3xl);
	font-weight: 600;
	text-align: center;
	margin: 0 0 var(--space-40);
}

/* Center a lone slide. Splide's list uses CSS Grid with 3 explicit
 * columns — `justify-content: center` doesn't help because the columns
 * already span the track. Switch to flex so the single slide can sit
 * centered without empty grid cells beside it. */
.entry-related .splide__list:has(> .splide__slide:only-child) {
	display: flex;
	justify-content: center;
	grid-template-columns: none;
}
.entry-related .splide__list:has(> .splide__slide:only-child) > .splide__slide {
	max-width: 360px;
	width: 100%;
}

/* Card chrome — Kadence ships none by default */
.entry-related .splide__slide article {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: transform var(--trans-med), box-shadow var(--trans-med);
	height: 100%;
	display: flex;
	flex-direction: column;
}
.entry-related .splide__slide article:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card);
}

/* Image — fixed 16:9 ratio with cover crop, no distortion */
.entry-related .post-thumbnail {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	flex-shrink: 0;
}
.entry-related .post-thumbnail-inner {
	width: 100%;
	height: 100%;
}
.entry-related .post-thumbnail-inner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Title — smaller, clamped to 3 lines for predictable card height */
.entry-related .splide__slide article .entry-title {
	font-size: var(--fs-lg); /* 18px */
	line-height: 1.35;
	font-weight: 600;
	padding: var(--space-16) var(--space-16) var(--space-8);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.entry-related .splide__slide article .entry-title a {
	color: var(--color-text);
	text-decoration: none;
}
.entry-related .splide__slide article .entry-title a:hover {
	color: var(--color-green);
}

/* Meta line under the title */
.entry-related .splide__slide article .entry-meta {
	padding: 0 var(--space-16) var(--space-16);
	margin: 0;
	font-size: var(--fs-xs);
	color: var(--color-text-secondary);
	margin-top: auto; /* push to card bottom for even alignment */
}
.entry-related .splide__slide article .entry-meta a {
	color: var(--color-text-secondary);
	text-decoration: none;
}
.entry-related .splide__slide article .entry-meta a:hover {
	color: var(--color-green);
}

/* Carousel controls */
.entry-related .splide__arrow {
	background: var(--color-white);
	border: 1.5px solid var(--color-border);
	color: var(--color-black);
	opacity: 1;
	transition: background var(--trans-fast), border-color var(--trans-fast), color var(--trans-fast);
}
.entry-related .splide__arrow:hover:not(:disabled) {
	background: var(--color-black);
	border-color: var(--color-black);
	color: var(--color-white);
}
.entry-related .splide__arrow svg { fill: currentColor; }
.entry-related .splide__pagination__page.is-active {
	background: var(--color-green);
}


/* 7. BLOG LIST / ARCHIVE =============================== */

/* Archive page title ("Blog", category name, etc.) */
.archive-title,
.page-title.post-home-title {
	font-size: 40px;
	line-height: 1.2;
	font-weight: 600;
	text-align: center;
	margin: 0 auto var(--space-48);
}

/* Loop card chrome */
.loop-entry {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform var(--trans-med), box-shadow var(--trans-med);
}
.loop-entry:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card);
}

/* Card image — fixed 16:9 ratio, cover crop for consistent thumbnails */
.loop-entry .post-thumbnail {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	flex-shrink: 0;
}
.loop-entry .post-thumbnail-inner {
	width: 100%;
	height: 100%;
}
.loop-entry .post-thumbnail-inner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Inner padding for text content (Kadence ships none) */
.loop-entry .entry-header,
.loop-entry .entry-meta,
.loop-entry .entry-summary,
.loop-entry .entry-footer {
	padding-left: var(--space-24);
	padding-right: var(--space-24);
}
.loop-entry .entry-header {
	padding-top: var(--space-24);
}
.loop-entry .entry-summary {
	padding-bottom: var(--space-24);
}

/* Loop title — clamped to 3 lines so cards have a predictable height */
.loop-entry .entry-title {
	font-size: var(--fs-2xl); /* 24px */
	line-height: 1.3;
	font-weight: 600;
	margin: 0 0 var(--space-12);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.loop-entry .entry-title a {
	color: var(--color-text);
	text-decoration: none;
}
.loop-entry .entry-title a:hover {
	color: var(--color-green);
}

/* Loop meta line (By [author] • date) */
.loop-entry .entry-meta {
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	margin-bottom: var(--space-12);
}
.loop-entry .entry-meta a {
	color: var(--color-text-secondary);
	text-decoration: none;
}
.loop-entry .entry-meta a:hover {
	color: var(--color-green);
}

/* Excerpt — clamped to 3 lines, pushed to card bottom for even alignment */
.loop-entry .entry-summary {
	font-size: var(--fs-base);
	line-height: 1.5;
	color: var(--color-text-secondary);
	margin-top: auto;
}
.loop-entry .entry-summary p {
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Pagination (numeric or prev/next) */
.archive .pagination,
.blog .pagination {
	margin-top: var(--space-48);
	text-align: center;
}
.archive .pagination a,
.blog .pagination a,
.archive .pagination span,
.blog .pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--space-12);
	margin: 0 4px;
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text);
	text-decoration: none;
	font-weight: 500;
	transition: background var(--trans-fast), border-color var(--trans-fast), color var(--trans-fast);
}
.archive .pagination a:hover,
.blog .pagination a:hover {
	background: var(--color-black);
	border-color: var(--color-black);
	color: var(--color-white);
}
.archive .pagination .current,
.blog .pagination .current {
	background: var(--color-green);
	border-color: var(--color-green);
	color: var(--color-black);
}


/* 8. RESPONSIVE ======================================== */

@media (max-width: 1024px) {
	.single-entry .entry-header .entry-title {
		font-size: var(--fs-3xl); /* 32px */
	}
	.single-entry .entry-content h2 {
		font-size: var(--fs-2xl); /* 24px */
		margin-top: var(--space-40);
	}
	.single-entry .entry-content h3 {
		font-size: var(--fs-xl); /* 20px */
	}
}

@media (max-width: 640px) {
	.single-entry .entry-content blockquote {
		padding: var(--space-12) var(--space-16);
		font-size: var(--fs-lg);
		margin: var(--space-24) 0;
	}
	.author-card {
		flex-direction: column;
		padding: var(--space-24);
		gap: var(--space-16);
	}
	.author-card__avatar img,
	.author-card__avatar .avatar {
		width: 64px;
		height: 64px;
	}
}