/**
 * Component: Entry content chrome
 * Covers markup emitted by inc/template-tags.php and WordPress core
 * (post meta, thumbnails, pagination, comments, captions/galleries)
 * that doesn't have its own dedicated component file.
 */

.entry-header {
	text-align: left;
	margin-bottom: var(--space-4);
}

/*
 * Deck/lead-in line — the bold teaser sentence originally migrated
 * post content led with (see single-portfolio.php/single-book.php),
 * now pulled into the real WP excerpt field so it can also drive card
 * previews (get_the_excerpt() in card-portfolio.php/card-book.php)
 * instead of duplicating it as plain body text.
 */
.entry-lead {
	font-family: var(--font-serif);
	font-size: var(--font-size-lg);
	color: var(--color-ink-soft);
	margin-top: var(--space-2);
	font-weight: 600;
}

.entry-meta,
.entry-footer {
	font-family: var(--font-sans);
	font-size: var(--font-size-sm);
	color: var(--color-ink-soft);
}

.entry-meta > span:not(:last-child)::after,
.entry-footer > span:not(:last-child)::after {
	content: '\2014';
	margin-inline: var(--space-2);
}

.post-thumbnail {
	display: block;
	margin-bottom: var(--space-4);
}


/* Post navigation (prev/next) */
.navigation.post-navigation {
	max-width: var(--content-width);
	margin: var(--space-6) auto 0;
	padding-inline: var(--space-4);
}

.post-navigation .nav-links {
	display: flex;
	justify-content: space-between;
	gap: var(--space-4);
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-4);
}

.post-navigation .nav-subtitle {
	display: block;
	font-family: var(--font-sans);
	font-size: var(--font-size-sm);
	color: var(--color-ink-soft);
}

.post-navigation .nav-title {
	font-family: var(--font-sans);
	font-weight: 600;
	text-wrap: pretty;
}

/* Matches the site's unified mobile threshold (nav.css, article-layout.css) —
   below it, a fixed 35% column is too narrow to hold a full title without
   wrapping into a near-vertical stack of single words. */
@media (min-width: 40rem) {
	.post-navigation .nav-next,
	.post-navigation .nav-previous {
		width: 35%;
	}
}

.post-navigation .nav-next {
	text-align: right;
	margin-left: auto;
}

/* Comments */
.comments-area {
	max-width: var(--content-width);
	margin: var(--space-6) auto 0;
	padding-inline: var(--space-4);
}

.comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.comment-list .comment-body {
	border-top: 1px solid var(--color-border);
	padding-block: var(--space-4);
}

.comment-list .comment-author,
.comment-list .comment-metadata {
	font-family: var(--font-sans);
	font-size: var(--font-size-sm);
	color: var(--color-ink-soft);
}

.comment-form label {
	display: block;
	font-family: var(--font-sans);
	font-size: var(--font-size-sm);
	font-weight: 600;
	margin-bottom: var(--space-1);
}

.comment-form input[type='text'],
.comment-form input[type='email'],
.comment-form input[type='url'],
.comment-form textarea {
	width: 100%;
	padding: var(--space-2);
	margin-bottom: var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-family: var(--font-sans);
	font-size: var(--font-size-base);
	background: var(--color-paper);
	color: var(--color-ink);
	transition: border-color var(--transition-base);
}

.comment-form input[type='text']:focus-visible,
.comment-form input[type='email']:focus-visible,
.comment-form input[type='url']:focus-visible,
.comment-form textarea:focus-visible {
	border-color: var(--color-primary);
}

.comment-form #submit {
	font: inherit;
}

/* WordPress core image alignment classes — applied directly in migrated
   post content (e.g. book covers, the About page photo) via the classic
   editor's align toolbar. Never added by this theme's own markup. */
.alignright {
	float: right;
	margin: 0 0 var(--space-4) var(--space-4);
}

.alignleft {
	float: left;
	margin: 0 var(--space-4) var(--space-4) 0;
}

/* Same "mobile" threshold as .article-layout__thumbnail — below it, a
   floated book cover/photo squeezes surrounding text (e.g. a heading)
   into an unreadably narrow column instead of wrapping normally. */
@media (max-width: 40rem) {
	.alignright,
	.alignleft {
		float: none;
		width: 100%;
		max-width: 100%;
		margin-inline: 0;
	}
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.alignnone {
	margin: 0 0 var(--space-4);
}

/* Captions, galleries (core block/classic markup) */
.wp-caption,
figure {
	margin: 0;
}

.wp-caption-text,
figcaption {
	font-family: var(--font-sans);
	font-size: var(--font-size-sm);
	color: var(--color-ink-soft);
	margin-top: var(--space-2);
}

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
	gap: var(--space-3);
}

/* Tables inside post content */
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--space-4);
}

.entry-content th,
.entry-content td {
	border: 1px solid var(--color-border);
	padding: var(--space-2) var(--space-3);
	text-align: left;
}

/* Pagination links (archives, wp_link_pages, paginate_links) */
.page-links,
.pagination,
.nav-links {
	font-family: var(--font-sans);
	font-size: var(--font-size-sm);
	margin-top: var(--space-5);
}

/*
 * .pagination specifically (see home.php): Newer/Older pinned to the
 * outer edges, numbered pages centered between them.
 */
.pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}

.pagination__edge {
	flex: 1;
}

.pagination__edge--next {
	text-align: right;
}

.pagination__numbers {
	flex: 0 0 auto;
	display: flex;
	gap: var(--space-1);
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding-inline: var(--space-2);
	margin-right: var(--space-1);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--color-ink-soft);
	transition: background var(--transition-base), color var(--transition-base);
}

.page-numbers:hover,
.page-numbers:focus-visible {
	background: var(--color-paper-dim);
	color: var(--color-primary);
}

.page-numbers.current {
	background: var(--color-primary);
	color: var(--color-paper);
}

/* Core search form (get_search_form()) — 404 page, search/archive
   zero-results fallback (template-parts/content-none.php). */
.search-form {
	display: flex;
	gap: var(--space-2);
	max-width: 24rem;
	margin-top: var(--space-3);
}

/*
 * The actual flex item here is the <label> WordPress core wraps the
 * field in (get_search_form()'s HTML5 markup: <label><span
 * class="screen-reader-text">…</span><input …></label>), not the
 * <input> itself — flex: 1 + min-width: 0 on .search-field alone did
 * nothing, since the label (default min-width: auto, sized to the
 * input's non-trivial browser-default intrinsic width, ~293px in
 * Chrome) was what needed to shrink and never did, pushing
 * .search-submit off the right edge of the page at narrow widths.
 */
.search-form label {
	flex: 1;
	min-width: 0;
}

.search-field {
	width: 100%;
	padding: var(--space-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-family: var(--font-sans);
	font-size: var(--font-size-base);
	background: var(--color-paper);
	color: var(--color-ink);
	transition: border-color var(--transition-base);
}

.search-field:focus-visible {
	border-color: var(--color-primary);
}

.search-submit {
	display: inline-flex;
	align-items: center;
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius);
	background: var(--color-primary);
	color: var(--color-paper);
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: var(--font-size-sm);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background var(--transition-base);
}

.search-submit:hover,
.search-submit:focus-visible {
	background: var(--color-primary-dark);
}

/* Search results, grouped by content type (search.php) */
.search-group {
	margin-bottom: var(--space-6);
}

.search-group__title {
	margin-top: 0;
}