/* ==========================================================================
   WordPress surfaces - the templates the static design never covered:
   archive / single / page / search / 404 / comments.

   This file used to carry the scaffold theme's own palette, type scale and
   buttons in a private --color-* / --step-* set. Those are gone: everything
   below is expressed in the design tokens from tokens.css and reuses the
   global typography.css and buttons.css, so a WordPress page and a ported
   section cannot drift apart. Nothing here may restate a font size, a colour
   or a button.
   ========================================================================== */

/* --- Accessibility ------------------------------------------------------ */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* The focus ring itself is set once, in reset.css. */
.skip-link {
	position: absolute; left: -9999px; top: 0;
	z-index: 100;
	padding: var(--space-sm) var(--space-md);
	background: var(--c-primary);
	color: var(--c-on-dark);
}

.skip-link:focus { left: 0; }

/* --- Page header -------------------------------------------------------- */
.page-header { margin-bottom: var(--space-xl); }
.page-title { margin-bottom: var(--space-sm); }
.archive-description { color: var(--c-ink-70); }

/* --- Post card ---------------------------------------------------------- */
.card {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding: var(--space-sm) var(--space-sm) var(--space-lg);
	border-radius: var(--radius-lg);
	background: var(--c-surface);
	box-shadow: var(--shadow-card);
	transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-card-hover);
}

.card__media { display: block; }

.card__image {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	border-radius: var(--radius-md);
	object-fit: cover;
	background: var(--c-media-placeholder);
}

.card__title { font-size: var(--fs-h4); }
.card__title a { color: var(--c-ink); }
.card__title a:hover { color: var(--c-primary); }

.card__meta {
	font-family: var(--font-num);
	font-size: var(--fs-sm);
	color: var(--c-ink-50);
	font-variation-settings: "wdth" 100;
}

.card__text {
	font-size: var(--fs-sm);
	line-height: var(--lh-body);
	color: var(--c-ink-70);
}

/* --- Placeholder (disappears once real content exists) ------------------ */
.placeholder {
	display: grid;
	place-items: center;
	border-radius: var(--radius-md);
	background: repeating-linear-gradient(
		45deg,
		var(--c-media-placeholder), var(--c-media-placeholder) 10px,
		var(--c-bg) 10px, var(--c-bg) 20px
	);
	color: var(--c-ink-50);
	font-size: var(--fs-sm);
}

.placeholder--hero { aspect-ratio: 4 / 3; }
.placeholder--card { aspect-ratio: 3 / 2; }
.placeholder--icon { width: 48px; height: 48px; margin-bottom: var(--space-md); }

/* --- Entry (single / page) ---------------------------------------------- */
.entry--single,
.entry--page { max-width: var(--measure); margin-inline: auto; }

.entry__header { margin-bottom: var(--space-lg); }

.entry__meta {
	margin-top: var(--space-sm);
	font-family: var(--font-num);
	font-size: var(--fs-sm);
	color: var(--c-ink-50);
	font-variation-settings: "wdth" 100;
}

.entry__sep { margin-inline: var(--space-3xs); }

.entry__thumbnail { margin: 0 0 var(--space-lg); }
.entry__thumbnail img { border-radius: var(--radius-md); }

.entry__content img { border-radius: var(--radius-md); }
.entry__footer { margin-top: var(--space-lg); }

.entry__tags {
	font-size: var(--fs-sm);
	color: var(--c-ink-50);
}

.no-results { grid-column: 1 / -1; }

/* --- Search form -------------------------------------------------------- */
.search-form { display: flex; gap: var(--space-sm); flex-wrap: wrap; }

.search-form__input {
	flex: 1 1 200px;
	min-height: var(--field-h);
	padding: 10px var(--space-md);
	border: 1px solid var(--c-border-light);
	border-radius: var(--radius-pill);
	background: var(--c-field-bg);
	box-shadow: var(--shadow-field);
	font: inherit;
	color: var(--c-field-text);
}

.search-form__input::placeholder { color: var(--c-placeholder); }

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

/* --- Pagination --------------------------------------------------------- */
.pagination { margin-top: var(--space-xl); }

.pagination .nav-links {
	display: flex;
	gap: var(--space-xs);
	flex-wrap: wrap;
	justify-content: center;
}

.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 40px;
	min-height: 40px;
	padding-inline: var(--space-sm);
	border: 1px solid var(--c-border-light);
	border-radius: var(--radius-pill);
	font-size: var(--fs-sm);
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.pagination .page-numbers:hover { background: var(--c-primary-soft); }

.pagination .page-numbers.current {
	background: var(--c-primary);
	border-color: var(--c-primary);
	color: var(--c-on-dark);
}

/* --- Post navigation ---------------------------------------------------- */
.post-navigation { max-width: var(--measure); margin: var(--space-xl) auto 0; }

.post-navigation .nav-links {
	display: flex;
	justify-content: space-between;
	gap: var(--space-md);
	font-weight: var(--fw-medium);
	color: var(--c-primary);
}

.page-links { margin-top: var(--space-md); }

/* --- Comments ----------------------------------------------------------- */
.comments {
	max-width: var(--measure);
	margin: var(--space-section) auto 0;
	padding-top: var(--space-xl);
	border-top: 1px solid var(--c-border);
}

.comments__title { font-size: var(--fs-h4); }

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

.comment-list .children { padding-left: var(--space-lg); }

.comment-list li article,
.comment-list li .comment-body {
	padding: var(--space-lg) 0;
	border-bottom: 1px solid var(--c-border);
}

.comment-author {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	font-weight: var(--fw-semibold);
}

.comment-author img { border-radius: var(--radius-pill); }

.comment-metadata {
	margin-bottom: var(--space-xs);
	font-size: var(--fs-sm);
	color: var(--c-ink-50);
}

.comment-metadata a { color: var(--c-ink-50); }
.reply { font-size: var(--fs-sm); }
.no-comments { color: var(--c-ink-50); }

.comment-form { margin-top: var(--space-xl); }

.comment-form label {
	display: block;
	font-family: var(--font-display);
	font-weight: var(--fw-medium);
	font-size: var(--fs-sm);
	margin-bottom: var(--space-3xs);
	color: var(--c-label);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	margin-bottom: var(--space-md);
	padding: 10px var(--space-md);
	border: 1px solid var(--c-border-light);
	border-radius: var(--radius-input);
	background: var(--c-field-bg);
	box-shadow: var(--shadow-field);
	font: inherit;
	color: var(--c-field-text);
}

.comment-form textarea { min-height: 140px; resize: vertical; }
.comment-form .form-submit { margin: 0; }