/*
 * taikinapoika/quick-search (the companion plugin's block) in the header.
 *
 * The magnifier is a round button like the language pills. It opens a panel
 * that lies under the whole header, across the page: cream like the page,
 * an ink rule at its foot, and inside it the field, the button and the list
 * of posts at the width of the wide column. The plugin's own sheet gives the
 * structure (the panel covers the page, `hidden` hides); this gives the look
 * and the place. Nothing here applies unless the block is on the page.
 */

/* The panel is placed against the header, not against the button. */
header.wp-block-template-part {
	position: relative;
}

.tpt-header > .tp-quick-search {
	display: flex;
	flex: none;
	margin-inline-start: auto;
	position: static;
}

.tpt-header > .tp-quick-search + .tpt-header__tools {
	margin-inline-start: 0;
}

@media (max-width: 599px) {

	.tpt-header > .tp-quick-search {
		margin-inline-start: 0;
	}
}

/* The magnifier, as a link (no JavaScript) or as the button that opens the panel. */
.tp-quick-search .tp-quick-search__link,
.tp-quick-search .tp-quick-search__toggle {
	background: transparent;
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: 999px;
	color: var(--wp--preset--color--contrast);
	height: 2.75rem;
	padding: 0;
	width: 2.75rem;
}

.tp-quick-search .tp-quick-search__link:hover,
.tp-quick-search .tp-quick-search__link:focus,
.tp-quick-search .tp-quick-search__toggle:hover,
.tp-quick-search .tp-quick-search__toggle:focus,
.tp-quick-search .tp-quick-search__toggle[aria-expanded="true"] {
	background: var(--wp--preset--color--butter);
}

/* The panel: under the header, the full width of the page. */
.tpt-header .tp-quick-search__panel {
	background: var(--wp--preset--color--base);
	border-block-end: 2px solid var(--wp--preset--color--contrast);
	box-shadow: 0 10px 24px rgba(42, 26, 18, 0.14);
	color: var(--wp--preset--color--contrast);
	inline-size: auto;
	inset-inline: 0;
	padding-block: 0.75rem 1.25rem;
	padding-inline: var(--wp--style--root--padding-left, 1.125rem) var(--wp--style--root--padding-right, 1.125rem);
}

/* Its contents line up with the header above it. */
.tp-quick-search .tp-quick-search__form {
	margin-inline: auto;
	max-inline-size: var(--wp--style--global--wide-size, 70rem);
}

.tp-quick-search .tp-quick-search__label {
	color: var(--wp--preset--color--tomato-text);
	font-family: var(--wp--preset--font-family--hand);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.1;
}

.tp-quick-search .tp-quick-search__close {
	background: transparent;
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: 999px;
	color: var(--wp--preset--color--contrast);
	height: 2.75rem;
	padding: 0;
	width: 2.75rem;
}

.tp-quick-search .tp-quick-search__close:hover,
.tp-quick-search .tp-quick-search__close:focus {
	background: var(--wp--preset--color--butter);
}

.tp-quick-search .tp-quick-search__row {
	gap: 0.625rem;
	margin-block-start: 0.5rem;
}

/* The field, larger than the one on the search page: this one is typed in on a phone, at once. */
.tp-quick-search .tp-quick-search__input {
	background: var(--wp--preset--color--paper);
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: 999px;
	color: var(--wp--preset--color--contrast);
	font-size: 1.25rem;
	min-height: 3.5rem;
	padding: 0.5rem 1.375rem;
}

/* The field's own clear button in Chromium and Safari: Escape and the close button do that job. */
.tp-quick-search .tp-quick-search__input::-webkit-search-cancel-button {
	appearance: none;
}

.tp-quick-search .tp-quick-search__submit {
	background: var(--wp--preset--color--tomato);
	border: 0;
	border-radius: 999px;
	color: var(--wp--preset--color--paper);
	flex: none;
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.2;
	min-height: 3.5rem;
	padding: 0.5rem 1.5rem;
}

.tp-quick-search .tp-quick-search__submit:hover,
.tp-quick-search .tp-quick-search__submit:focus {
	background: var(--wp--preset--color--tomato-dark);
}

.tp-quick-search .tp-quick-search__status {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	margin-block-start: 0.625rem;
	padding-inline: 1.375rem;
}

.tp-quick-search .tp-quick-search__list {
	display: grid;
	gap: 0.25rem;
	margin-block-start: 0.375rem;
	/* Room for the outline of the active option, which the list's scrolling would otherwise cut. */
	padding: 3px;
}

.tp-quick-search .tp-quick-search__option {
	border-radius: 1rem;
	font-weight: 600;
	line-height: 1.3;
	min-height: 3.5rem;
	padding: 0.375rem 0.75rem 0.375rem 0.375rem;
}

.tp-quick-search .tp-quick-search__option:hover {
	background: rgba(246, 201, 69, 0.45);
}

/* The option the arrow keys have reached. DOM focus stays in the field, so this is the focus ring. */
.tp-quick-search .tp-quick-search__option[aria-selected="true"] {
	background: var(--wp--preset--color--butter);
	outline: 3px solid var(--tpt-focus-color);
	outline-offset: -3px;
}

.tp-quick-search .tp-quick-search__thumb,
.tp-quick-search .tp-quick-search__nothumb {
	border: 3px solid var(--wp--preset--color--paper);
	border-radius: 0.5rem;
	box-shadow: 0 2px 6px rgba(42, 26, 18, 0.18);
	box-sizing: border-box;
	height: 3rem;
	width: 3rem;
}

/* A post without a picture: a pat of butter in its place, so the titles stay in line. */
.tp-quick-search .tp-quick-search__nothumb {
	background: var(--wp--preset--color--butter);
}

.tp-quick-search .tp-quick-search__all {
	color: var(--wp--preset--color--tomato-text);
	font-weight: 800;
	padding-inline-start: 1rem;
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.2em;
}

.tp-quick-search .tp-quick-search__all[aria-selected="true"] {
	color: var(--wp--preset--color--contrast);
}

@media (max-width: 599px) {

	.tp-quick-search .tp-quick-search__label {
		font-size: 1.5rem;
	}

	.tp-quick-search .tp-quick-search__submit {
		padding-inline: 1.125rem;
	}

	.tp-quick-search .tp-quick-search__input {
		padding-inline: 1.125rem;
	}
}