/* 404 and search results: the page head comes from layout.css, the rows from blog.css.
   Here: the search field, the body spacing and the "Niets gevonden" state. */
.search-404-body {
	display: grid;
	gap: var(--sp-block);
	padding-bottom: var(--sp-section);
}

/* Search field: a pill like the buttons, the button sits inside it. */
.search-form { max-width: 640px; }
.search-form-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 6px 6px 22px;
	background: var(--beige);
	border: 1px solid var(--line);
	border-radius: 999px;
	transition: border-color .2s, box-shadow .2s;
}
.search-form-row:focus-within { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.search-form-field {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	font: 300 var(--fs-body)/1.4 var(--sans);
	color: var(--green);
	-webkit-appearance: none;
	appearance: none;
}
.search-form-field::placeholder { color: var(--ink-soft); opacity: 1; }
.search-form-field:focus,
.search-form-field:focus-visible { outline: none; box-shadow: none; }
.search-form-field::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-form-submit { flex: none; }

/* Result and next-step lists. */
.search-404-body .post-list { margin: 0; }
.search-404-body .post-list.next-steps { margin-top: 0; }

/* Empty state. */
.no-results { display: grid; gap: var(--sp-block); }
.search-none { display: grid; gap: 14px; max-width: 40em; }
.search-none-title { margin: 0; }
.search-none p { color: var(--ink-soft); }

@media (max-width: 900px) {
	.search-404-body { gap: 40px; }
	/* On narrow screens the band runs over the search field's column: give the field air so the
	   band ends in open space, not flat on the beige field (system.css, "the band"). */
	.page-head + .search-404-body { padding-top: 40px; }
}
@media (max-width: 480px) {
	.search-form-row { padding-left: 16px; }
	.search-form-submit { padding: 13px 18px; }
}