/* ==========================================================================
   SUNDIAL ACCOUNTING — BLOG
   Loaded on the blog listing, single posts, archives and search results.
   Shared pieces (page head, prose, pagination, post cards, search form)
   live in style.css.

   1. Single post header
   2. Tags
   3. Post navigation
   4. Paginated post links
   ========================================================================== */


/* ==========================================================================
   1. SINGLE POST HEADER
   Extra bottom padding leaves room for the featured image to overlap up
   into the band. Without an image the section just reads as generous.
   ========================================================================== */

.single__head {
	padding-bottom: clamp(4rem, 9vw, 7rem);
}

.single__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: var(--space-4);
	margin-bottom: 0;
}

.single__head .eyebrow a {
	color: inherit;
	text-decoration: none;
}

.single__head .eyebrow a:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.single__body {
	padding-top: clamp(2.5rem, 6vw, 4rem);
}


/* ==========================================================================
   2. TAGS
   ========================================================================== */

.single__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-top: var(--space-5);
	border-top: 1px solid var(--line);
}

.single__tags .meta {
	margin-inline-end: 0.25rem;
}

.single__tags a {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	padding: 0.35rem 0.9rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.06em;
	text-decoration: none;
	transition: border-color var(--dur) var(--ease),
	            background-color var(--dur) var(--ease);
}

.single__tags a:hover {
	border-color: var(--accent-line);
	background-color: rgba(217, 164, 65, 0.1);
}


/* ==========================================================================
   3. POST NAVIGATION
   ========================================================================== */

.post-nav {
	display: grid;
	gap: var(--space-4);
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 640px) {
	.post-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.post-nav__link {
	display: block;
	padding: var(--space-5);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	text-decoration: none;
	transition: border-color var(--dur) var(--ease),
	            transform var(--dur) var(--ease);
}

.post-nav__link:hover {
	border-color: var(--accent-line);
	transform: translateY(-3px);
}

/* When there is no previous post, keep the next link in the right column. */
.post-nav__link--next:only-child {
	grid-column: -2;
	text-align: end;
}

.post-nav__title {
	display: block;
	margin-top: var(--space-2);
	font-family: var(--font-display);
	font-size: var(--h4);
	line-height: var(--leading-snug);
	color: var(--text);
}


/* ==========================================================================
   4. PAGINATED POST LINKS (wp_link_pages)
   ========================================================================== */

.page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: var(--space-6);
	font-family: var(--font-mono);
	font-size: var(--text-sm);
}

.page-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	min-height: 2.25rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	text-decoration: none;
}

.page-links a:hover {
	border-color: var(--accent-line);
}


@media (prefers-reduced-motion: reduce) {
	.post-nav__link:hover {
		transform: none;
	}
}