/**
 * Nordplast — Page / Archive / Search / 404 template styles.
 * Tokens only — same rule as components.css: every margin/padding/gap
 * is var(--space-*), every colour is a Global Style colour variable.
 */

/* =========================================================================
 * PAGE TEMPLATE — content wrapper for the WYSIWYG/editor body
 * ====================================================================== */

.page-content {
	max-width: var(--container-narrow);
	margin-inline: auto;
	padding-block: var(--space-6);
}
@media (min-width: 1024px) { .page-content { padding-block: var(--space-7); } }

/* "Prose" spacing for raw post_content HTML — headings/paragraphs/lists
   coming out of the editor have no BEM classes of their own to hook, so
   these are deliberately plain-tag selectors, scoped under .prose only. */
.prose > * + * { margin-top: var(--space-3); }
.prose h2 { font-size: var(--font-size-h2); margin-top: var(--space-6); }
.prose h3 { font-size: var(--font-size-h3); margin-top: var(--space-4); }
.prose ul, .prose ol { padding-left: var(--space-4); }
.prose li + li { margin-top: var(--space-1); }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose img { border-radius: var(--radius-card); margin-block: var(--space-3); }

/* =========================================================================
 * ARCHIVE TEMPLATE
 * ====================================================================== */

.archive-header {
	background-color: var(--color-cool-gray);
	padding: var(--space-5) var(--space-3);
}
@media (min-width: 1024px) { .archive-header { padding: var(--space-7) var(--space-4); } }

.archive-list {
	padding-block: var(--space-6);
}
@media (min-width: 1024px) { .archive-list { padding-block: var(--space-7); } }

.archive-empty {
	text-align: center;
	color: var(--color-text-muted);
	padding-block: var(--space-6);
}

/* =========================================================================
 * SEARCH FORM (Archive header + Search Results + 404)
 * ====================================================================== */

.search-form {
	display: flex;
	gap: var(--space-2);
	max-width: var(--container-narrow);
}
.search-form__input {
	flex: 1;
	min-height: 48px;
	padding: 0 var(--space-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-button);
	font-family: var(--font-family-base);
	font-size: var(--font-size-body);
	background-color: var(--color-white);
}
.search-form__input:focus-visible { border-color: var(--color-steel-blue); }

/* =========================================================================
 * PAGINATION
 * ====================================================================== */

.pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-1);
	margin-top: var(--space-6);
	list-style: none;
	padding: 0;
}
.pagination__link,
.pagination__current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--space-2);
	border-radius: var(--radius-button);
	border: 1px solid var(--color-border);
	color: var(--color-text);
	font-weight: var(--font-weight-medium);
	transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.pagination__link:hover,
.pagination__link:focus-visible {
	border-color: var(--color-steel-blue);
	background-color: var(--color-cool-gray);
}
.pagination__current {
	background-color: var(--color-steel-blue);
	border-color: var(--color-steel-blue);
	color: var(--color-white);
}
.pagination__current[aria-current="page"] { cursor: default; }

/* =========================================================================
 * 404
 * ====================================================================== */

.error-404 {
	text-align: center;
	padding: var(--space-8) var(--space-3);
	max-width: var(--container-narrow);
	margin-inline: auto;
}
.error-404__eyebrow {
	font-size: 4rem;
	font-weight: var(--font-weight-heading);
	color: var(--color-steel-blue);
	line-height: 1;
	margin-bottom: var(--space-3);
}
.error-404__title { margin-bottom: var(--space-2); }
.error-404__text { color: var(--color-text-muted); margin-bottom: var(--space-4); }
.error-404__actions { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }