/* ═══════════════════════════════════════════════════════
   PSR METALS — theme-extras.css
   Additive-only styles for WordPress-native templates that did
   not exist in the original static design (blog index, single
   post, page, archive, search, 404, comments, sidebar).
   Reuses the exact design tokens (CSS variables) from main.css.
   Nothing in this file overrides or redesigns the original
   homepage sections.
   ═══════════════════════════════════════════════════════ */

.generic-content {
	padding: var(--section-v) var(--section-h);
	background: var(--bg-elevated);
}
.generic-content-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
}
.generic-content-inner:has(.generic-sidebar) {
	grid-template-columns: 2fr 1fr;
}
.generic-content-inner--centered { max-width: 700px; margin: 0 auto; }
.generic-content-main--full { max-width: 820px; }

.generic-post-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.75rem;
}
@media (max-width: 700px) { .generic-post-list { grid-template-columns: 1fr; } }

.generic-post-card {
	background: var(--bg-elevated);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.generic-post-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 48px rgba(62, 64, 149, 0.14);
}
.generic-post-thumb { display: block; aspect-ratio: 16/10; overflow: hidden; background: #fff; }
.generic-post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.generic-post-body { padding: 1.5rem; }
.generic-post-title { font-size: 1.1rem; margin-bottom: 0.5rem; }
.generic-post-title a { text-decoration: none; color: var(--text-primary); }
.generic-post-title a:hover { color: var(--accent); }
.generic-post-meta { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 0.75rem; }
.generic-post-excerpt { color: var(--text-secondary); font-size: 0.925rem; line-height: 1.65; margin-bottom: 1.25rem; }

.generic-post-single .generic-page-entry,
.generic-page-entry {
	color: var(--text-secondary);
	font-size: 1rem;
	line-height: 1.8;
}
.generic-page-entry p { margin-bottom: 1.25rem; }
.generic-page-entry h2 { margin: 2rem 0 1rem; }
.generic-page-entry h3 { margin: 1.5rem 0 0.75rem; }
.generic-page-entry img { border-radius: var(--radius-card); }
.generic-page-entry a { color: var(--accent); }
.generic-page-thumb { border-radius: var(--radius-card); overflow: hidden; margin-bottom: 2rem; }
.generic-page-thumb img { width: 100%; height: auto; display: block; }

.generic-pagination { margin-top: 2.5rem; display: flex; justify-content: center; gap: 0.5rem; }
.generic-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 0.75rem;
	border-radius: var(--radius-sm); border: 1px solid var(--border-medium);
	color: var(--text-secondary); text-decoration: none; font-weight: 600; font-size: 0.875rem;
	transition: all 0.2s ease;
}
.generic-pagination .page-numbers.current,
.generic-pagination .page-numbers:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.generic-sidebar .widget { margin-bottom: 2.5rem; }
.generic-sidebar .widget-title {
	font-family: var(--font-heading); font-size: 1rem; font-weight: 800;
	margin-bottom: 1rem; color: var(--text-primary);
}

.generic-search-form { display: flex; gap: 0.6rem; max-width: 440px; margin: 1.5rem auto 0; }
.generic-search-input {
	flex: 1; padding: 0.75rem 1rem; border-radius: var(--radius-sm);
	border: 1px solid var(--border-medium); font-family: var(--font-body); font-size: 0.9rem;
}
.generic-search-input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }

.generic-comments { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--border-subtle); }
.comments-title { font-family: var(--font-heading); margin-bottom: 1.5rem; }
.comment-list { list-style: none; }
.comment-list .children { list-style: none; margin-left: 2rem; }
.comment-body { padding: 1.25rem 0; border-bottom: 1px solid var(--border-subtle); }
.comment-author .fn { font-weight: 700; font-style: normal; }
.comment-metadata { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 0.5rem; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%; padding: 0.75rem 1rem; margin-bottom: 1rem;
	border-radius: var(--radius-sm); border: 1px solid var(--border-medium); font-family: var(--font-body);
}

@media (max-width: 900px) {
	.generic-content-inner:has(.generic-sidebar) { grid-template-columns: 1fr; }
}