/*
 * Supporting views — WordPress Pages, 404, and search results.
 * Loaded only on is_page() || is_404() || is_search() (see inc/enqueue.php).
 * Depends on the shared cascade: tokens -> base -> layout -> components.
 * Uses existing tokens only. Introduced in Phase 3B-5. Mobile-first.
 *
 * Dark, cinematic, restrained, editorial — generous negative space, no
 * boxed cards, no bright buttons, no unnecessary borders. Reuses the shared
 * primitives .schusei-prose (base.css), .schusei-empty /
 * .schusei-pagination (components.css) and the global focus styles.
 */

/* ================================================================== PAGE */
/* .schusei-page__header carries no rules — the following block owns the gap. */

.schusei-page__title {
	margin: 0;
	font-size: var(--sch-text-title);
	font-weight: 400;
	line-height: var(--sch-leading-tight);
	overflow-wrap: anywhere;
}

/* About / Contact adopt the site-wide section-label heading language
   (small, uppercase, secondary colour) that the Film and Journal archives
   use — see .schusei-section-label in components.css. The single semantic
   <h1> is unchanged; only its appearance. Scoped by the page-{slug} body
   class (inc/setup.php). Other Pages keep the larger title. */
.page-about .schusei-page__title,
.page-contact .schusei-page__title {
	font-size: var(--sch-text-micro);
	letter-spacing: var(--sch-tracking-wider);
	text-transform: uppercase;
	color: var(--sch-text-secondary);
}

.schusei-page__image {
	margin: var(--sch-space-xl) 0 0;
}

/* Natural aspect ratio preserved — no object-fit, no crop. A max-height
   keeps a tall portrait image from dominating the page. */
.schusei-page__image-el {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 75vh;
}

.schusei-page__body {
	margin-top: var(--sch-space-xl);
	font-size: var(--sch-text-body);
}

.schusei-page__pages {
	margin-top: var(--sch-space-lg);
	font-size: var(--sch-text-micro);
	letter-spacing: var(--sch-tracking-wide);
	text-transform: uppercase;
	color: var(--sch-text-secondary);
}

/* About — the two recurring lines in the biography ("What did it feel like
   to be there?" and the closing line). Set apart from the surrounding prose
   by a little extra space and Medium weight only: no size change, still well
   below the heading scale, left-aligned, not italic. Applied with an editor
   CSS class on exactly those two paragraphs. Outdents the shared
   .schusei-prose sibling margin via higher specificity. */
.page-about .schusei-about__statement {
	margin-block: var(--sch-space-lg);
	font-weight: 500;
}

/* =================================================================== 404 */
.schusei-404.schusei-main {
	max-width: var(--sch-width-wide);
	padding-block: var(--sch-space-3xl);
}

.schusei-404__code {
	margin: 0;
	font-size: var(--sch-text-micro);
	letter-spacing: var(--sch-tracking-wider);
	text-transform: uppercase;
	color: var(--sch-text-secondary);
}

.schusei-404__title {
	margin: var(--sch-space-md) 0 0;
	font-size: var(--sch-text-display);
	font-weight: 400;
	line-height: var(--sch-leading-tight);
}

.schusei-404__message {
	margin: var(--sch-space-lg) 0 0;
	max-width: var(--sch-measure);
	color: var(--sch-text-secondary);
	font-size: var(--sch-text-body);
}

.schusei-404__links {
	margin-top: var(--sch-space-2xl);
}

.schusei-404__links ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sch-space-sm) var(--sch-space-lg);
	font-size: var(--sch-text-micro);
	letter-spacing: var(--sch-tracking-wide);
	text-transform: uppercase;
}

.schusei-404__links a {
	color: var(--sch-text-secondary);
	text-decoration: none;
}

.schusei-404__links a:hover,
.schusei-404__links a:focus-visible {
	color: var(--sch-text);
}

.schusei-404__search {
	margin-top: var(--sch-space-2xl);
	max-width: var(--sch-width-text);
}

/* ================================================================ SEARCH */
/* Header-to-content gap matches the Film / Photography / Store archive
   headers (--sch-space-xl), so a results page shares their rhythm. */
.schusei-search__header {
	margin-bottom: var(--sch-space-xl);
}

.schusei-search__title {
	margin: 0;
	font-size: var(--sch-text-title);
	font-weight: 400;
	line-height: var(--sch-leading-tight);
	overflow-wrap: anywhere;
}

.schusei-search__count {
	margin: var(--sch-space-sm) 0 0;
	font-size: var(--sch-text-micro);
	letter-spacing: var(--sch-tracking-wide);
	text-transform: uppercase;
	color: var(--sch-text-secondary);
}

.schusei-search__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sch-space-xl);
}

.schusei-search__item {
	max-width: var(--sch-measure);
}

.schusei-search__type {
	margin: 0 0 var(--sch-space-2xs);
	font-size: var(--sch-text-micro);
	letter-spacing: var(--sch-tracking-wide);
	text-transform: uppercase;
	color: var(--sch-text-secondary);
}

.schusei-search__result-title {
	margin: 0;
	font-size: var(--sch-text-heading);
	font-weight: 400;
	line-height: var(--sch-leading-snug);
	overflow-wrap: anywhere;
}

.schusei-search__result-title a {
	color: var(--sch-text);
	text-decoration: none;
}

.schusei-search__result-title a:hover,
.schusei-search__result-title a:focus-visible {
	color: var(--sch-accent-warm);
}

.schusei-search__excerpt {
	margin: var(--sch-space-2xs) 0 0;
	color: var(--sch-text-secondary);
	font-size: var(--sch-text-small);
	line-height: var(--sch-leading-snug);
}

.schusei-search__form {
	margin-top: var(--sch-space-lg);
	max-width: var(--sch-width-text);
}

/* --------------------------------- get_search_form() (core html5 markup) */
/* Scoped: this stylesheet only loads on Page / 404 / search views. */
.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sch-space-2xs);
}

.search-form label {
	flex: 1 1 12rem;
	min-width: 0;
}

.search-field {
	width: 100%;
	padding: var(--sch-space-2xs) var(--sch-space-xs);
	background-color: var(--sch-bg-raised);
	border: 1px solid var(--sch-border);
	color: var(--sch-text);
	font: inherit;
}

.search-field:focus-visible {
	outline: 2px solid var(--sch-accent-warm);
	outline-offset: 2px;
	border-color: var(--sch-accent-warm);
}

.search-submit {
	padding: var(--sch-space-2xs) var(--sch-space-sm);
	background: none;
	border: 1px solid var(--sch-border);
	color: var(--sch-text-secondary);
	font-size: var(--sch-text-micro);
	letter-spacing: var(--sch-tracking-wide);
	text-transform: uppercase;
	cursor: pointer;
}

.search-submit:hover,
.search-submit:focus-visible {
	color: var(--sch-text);
	border-color: var(--sch-text);
}

/* =============================================================== CONTACT */
/* The [schusei_contact_form] shortcode (theme inc/contact.php); submissions
   are handled by schusei-core. Sits inside the Contact Page body. Restrained:
   hairline fields, a text-style submit, no colour block, no rounded button —
   the same treatment as the search form above. Introduced in Phase 8. */

.schusei-contact {
	margin-top: var(--sch-space-xl);
	max-width: var(--sch-width-text);
}

.schusei-contact__status {
	margin: 0 0 var(--sch-space-lg);
	padding: var(--sch-space-sm) var(--sch-space-md);
	border-left: 2px solid var(--sch-accent-warm);
	color: var(--sch-text);
	font-size: var(--sch-text-body);
	line-height: var(--sch-leading-normal);
}

.schusei-contact__status:focus-visible {
	outline: 2px solid var(--sch-accent-warm);
	outline-offset: 3px;
}

.schusei-contact__status--error {
	border-left-color: var(--sch-text-secondary);
}

.schusei-contact__status p {
	margin: 0;
}

.schusei-contact__status ul {
	margin: var(--sch-space-2xs) 0 0;
	padding-left: var(--sch-space-md);
}

.schusei-contact__status a {
	color: var(--sch-text);
}

.schusei-contact__field {
	margin: 0 0 var(--sch-space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--sch-space-2xs);
}

.schusei-contact__field label {
	font-size: var(--sch-text-micro);
	letter-spacing: var(--sch-tracking-wide);
	text-transform: uppercase;
	color: var(--sch-text-secondary);
}

.schusei-contact__req {
	margin-left: var(--sch-space-3xs);
	text-transform: none;
	letter-spacing: normal;
}

.schusei-contact__field input,
.schusei-contact__field textarea {
	width: 100%;
	padding: var(--sch-space-2xs) var(--sch-space-xs);
	background-color: var(--sch-bg-raised);
	border: 1px solid var(--sch-border);
	color: var(--sch-text);
	font: inherit;
	line-height: var(--sch-leading-normal);
}

.schusei-contact__field textarea {
	min-height: 8rem;
	resize: vertical;
}

.schusei-contact__field input:focus-visible,
.schusei-contact__field textarea:focus-visible {
	outline: 2px solid var(--sch-accent-warm);
	outline-offset: 2px;
	border-color: var(--sch-accent-warm);
}

.schusei-contact__field input[aria-invalid="true"],
.schusei-contact__field textarea[aria-invalid="true"] {
	border-color: var(--sch-text-secondary);
}

.schusei-contact__field input::placeholder,
.schusei-contact__field textarea::placeholder {
	color: var(--sch-text-muted);
}

.schusei-contact__error {
	font-size: var(--sch-text-small);
	color: var(--sch-text);
}

/* Off-screen honeypot — kept in the accessibility tree with an instructive
   label; never display:none (bots fill those in regardless). */
.schusei-contact__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.schusei-contact__actions {
	margin: 0;
}

.schusei-contact__submit {
	padding: var(--sch-space-2xs) var(--sch-space-md);
	background: none;
	border: 1px solid var(--sch-border);
	color: var(--sch-text-secondary);
	font-size: var(--sch-text-micro);
	letter-spacing: var(--sch-tracking-wide);
	text-transform: uppercase;
	cursor: pointer;
}

.schusei-contact__submit:hover,
.schusei-contact__submit:focus-visible {
	color: var(--sch-text);
	border-color: var(--sch-text);
}