/*
 * 404 and search results (404.php, search.php, searchform.php). No Figma
 * design: the lime head is proof/hero-features (as on the legal pages),
 * below it one centred 1041 column (the width of the FAQ / article lists)
 * with the search form and the hits as white cards (r 8, pad 32, like
 * proof/post-grid's cards: mono type label in blue, title in the Ratgeber
 * H3 size, excerpt in body text). Loaded on these views only
 * (proof_system_view_assets() in inc/chrome.php).
 */

/* Short pages: the footer ends at the viewport bottom, the main column
   takes the rest (no body background below the footer). */
body.pf-chrome.error404,
body.pf-chrome.search {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
}
body.pf-chrome.error404 .pf-main,
body.pf-chrome.search .pf-main {
	flex: 1 0 auto;
}
body.pf-chrome.error404 .pf-site-footer,
body.pf-chrome.search .pf-site-footer {
	flex: none;
}

/* A long search term must not widen the page. */
.pf-sys .pf-hfeat-title {
	overflow-wrap: anywhere;
}

.pf-block.pf-sys-body {
	padding-top: calc(80 * var(--pf-u));
	padding-bottom: calc(160 * var(--pf-u));
}
.pf-block .pf-sys-col {
	display: flex;
	flex-direction: column;
	align-self: center;
	width: calc(1041 * var(--pf-u));
	max-width: 100%;
}
/* Content without blocks (page.php): plain text in the column. */
.pf-block .pf-sys-text {
	display: block;
	font-size: max(16px, calc(18 * var(--pf-t)));
	line-height: 1.6;
	color: var(--pf-ink);
}
.pf-block .pf-sys-text > * + * {
	margin-top: 1em;
}
.pf-block .pf-sys-text :is(h2, h3) {
	margin-top: 1.6em;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.03em;
}
.pf-block .pf-sys-text a {
	color: var(--pf-blue);
	text-decoration: underline;
}
.pf-block .pf-sys-h2 {
	margin-bottom: calc(24 * var(--pf-u));
	font-weight: 500;
	font-size: calc(28 * var(--pf-t));
	line-height: 1.2;
	letter-spacing: -0.03em;
}

/* Search form: white field + the blue CTA (proof/shared .pf-btn). */
.pf-block .pf-sform {
	display: flex;
	gap: calc(16 * var(--pf-u));
	margin: 0;
}
.pf-block .pf-sform-input {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	height: calc(64 * var(--pf-u));
	padding: 0 calc(24 * var(--pf-u));
	border: 1px solid rgba(0, 0, 0, 0.09);
	border-radius: 0;
	background: #fff;
	box-shadow: none;
	font-family: var(--pf-sans);
	font-weight: 500;
	font-size: max(16px, calc(18 * var(--pf-t)));
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: #000;
	-webkit-appearance: none;
	appearance: none;
}
.pf-block .pf-sform-input::placeholder {
	color: rgba(0, 0, 0, 0.49);
	opacity: 1;
}
.pf-block .pf-sform-input:focus {
	border-color: var(--pf-blue);
	outline: 1px solid var(--pf-blue);
	outline-offset: 0;
}
/* Hello's button reset (pink border, centred text, rounded). */
.pf-block .pf-sform .pf-btn {
	border: 0;
	cursor: pointer;
	text-align: left;
	white-space: nowrap;
}
.pf-block .pf-sform .pf-btn:focus-visible {
	outline: 2px solid var(--pf-blue);
	outline-offset: 2px;
}

/* Hits. */
.pf-block .pf-sys-results {
	display: flex;
	flex-direction: column;
	gap: calc(16 * var(--pf-u));
	margin-top: calc(48 * var(--pf-u));
}
.pf-block .pf-sys-hit {
	position: relative;
	padding: calc(32 * var(--pf-u));
	border-radius: calc(8 * var(--pf-u));
	background: #fff;
	transition: transform 0.25s, box-shadow 0.25s;
}
.pf-block .pf-sys-hit:hover,
.pf-block .pf-sys-hit:focus-within {
	transform: translateY(calc(-2 * var(--pf-u)));
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}
.pf-block .pf-sys-hit:focus-within {
	outline: 2px solid var(--pf-blue);
	outline-offset: 2px;
}
.pf-block .pf-sys-hit-type {
	font-family: var(--pf-mono);
	font-size: calc(14 * var(--pf-t));
	line-height: 1.3;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--pf-blue);
}
.pf-block .pf-sys-hit-title {
	margin-top: calc(12 * var(--pf-u));
	font-weight: 500;
	font-size: calc(28 * var(--pf-t));
	line-height: 1.2;
	letter-spacing: -0.03em;
	overflow-wrap: break-word;
}
.pf-block .pf-sys-hit-link {
	color: var(--pf-ink);
	text-decoration: none;
	transition: color 0.2s;
}
/* The title link covers the card. */
.pf-block .pf-sys-hit-link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.pf-block .pf-sys-hit-link:focus-visible {
	outline: none;
}
.pf-block .pf-sys-hit:hover .pf-sys-hit-link {
	color: var(--pf-blue);
}
.pf-block .pf-sys-hit-text {
	margin-top: calc(12 * var(--pf-u));
	font-size: calc(16 * var(--pf-t));
	line-height: 1.5;
	color: rgba(0, 0, 0, 0.64);
}
.pf-block .pf-sys-hit-url {
	display: block;
	margin-top: calc(16 * var(--pf-u));
	font-family: var(--pf-mono);
	font-size: calc(13 * var(--pf-t));
	line-height: 1.3;
	color: rgba(0, 0, 0, 0.48);
	overflow-wrap: anywhere;
}

/* Pagination (the_posts_pagination()): mono numbers in square tiles. */
.pf-block .pf-sys-pages {
	margin-top: calc(48 * var(--pf-u));
}
.pf-block .pf-sys-pages .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: calc(8 * var(--pf-u));
}
.pf-block .pf-sys-pages .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: calc(48 * var(--pf-u));
	height: calc(48 * var(--pf-u));
	padding: 0 calc(14 * var(--pf-u));
	border: 1px solid rgba(0, 0, 0, 0.16);
	background: #fff;
	font-family: var(--pf-mono);
	font-size: calc(15 * var(--pf-t));
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--pf-ink);
	text-decoration: none;
	transition: border-color 0.2s, color 0.2s;
}
.pf-block .pf-sys-pages a.page-numbers:hover,
.pf-block .pf-sys-pages a.page-numbers:focus-visible {
	border-color: var(--pf-blue);
	color: var(--pf-blue);
}
.pf-block .pf-sys-pages .page-numbers.current {
	border-color: var(--pf-blue);
	background: var(--pf-blue);
	color: #fff;
}
.pf-block .pf-sys-pages .page-numbers.dots {
	border-color: transparent;
	background: none;
}

@media (prefers-reduced-motion: reduce) {
	.pf-block .pf-sys-hit {
		transition: none;
	}
	.pf-block .pf-sys-hit:hover,
	.pf-block .pf-sys-hit:focus-within {
		transform: none;
	}
}

@media (max-width: 1024px) {
	.pf-block.pf-sys-body {
		padding-top: 56px;
		padding-bottom: 104px;
	}
	.pf-block .pf-sys-col {
		width: 100%;
		max-width: 760px;
	}
	.pf-block .pf-sys-h2 {
		margin-bottom: 16px;
		font-size: 24px;
	}
	.pf-block .pf-sform {
		gap: 12px;
	}
	.pf-block .pf-sform-input {
		height: 58px;
		padding: 0 18px;
	}
	.pf-block .pf-sys-results {
		gap: 12px;
		margin-top: 32px;
	}
	.pf-block .pf-sys-hit {
		padding: 24px;
		border-radius: 8px;
	}
	.pf-block .pf-sys-hit-type {
		font-size: 13px;
	}
	.pf-block .pf-sys-hit-title {
		margin-top: 10px;
		font-size: 24px;
	}
	.pf-block .pf-sys-hit-text {
		margin-top: 10px;
		font-size: 16px;
	}
	.pf-block .pf-sys-hit-url {
		margin-top: 12px;
		font-size: 12px;
	}
	.pf-block .pf-sys-pages {
		margin-top: 32px;
	}
	.pf-block .pf-sys-pages .nav-links {
		gap: 8px;
	}
	.pf-block .pf-sys-pages .page-numbers {
		min-width: 44px;
		height: 44px;
		padding: 0 12px;
		font-size: 14px;
	}
}

@media (max-width: 767px) {
	.pf-block.pf-sys-body {
		padding-top: 40px;
		padding-bottom: 80px;
	}
	.pf-block .pf-sform {
		flex-direction: column;
	}
	.pf-block .pf-sys-hit {
		padding: 20px;
	}
	.pf-block .pf-sys-hit-title {
		font-size: 22px;
	}
}