/* ==========================================================================
   Header search

   A bar that drops out of the header on a dimmed page, with the answers in a
   white sheet directly under it. The panel is anchored to the top rather than
   centred: it belongs to the button that opened it, and a box floating in the
   middle of the screen does not.
   ========================================================================== */

.search-toggle {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 45%);
	border-radius: 50%;
	background: none;
	color: #fff;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.search-toggle:hover {
	background: #fff;
	border-color: #fff;
	color: var(--c-brand);
	transform: translateY(-1px);
}

.search-toggle__icon {
	width: 21px;
	height: 21px;
}

/* The same translucent fill the pill and the cart take over the photograph,
   for the same reason: a hairline ring disappears into pale rock. */
.site-header--overlay .search-toggle {
	background: rgb(8 50 88 / 42%);
	border-color: rgb(255 255 255 / 72%);
	backdrop-filter: blur(6px);
}

.site-header--overlay .search-toggle:hover {
	background: #fff;
	border-color: #fff;
	color: var(--c-brand);
}

.site-header.is-stuck .search-toggle {
	background: none;
	backdrop-filter: none;
	border-color: rgb(255 255 255 / 45%);
}

/* --- The overlay ----------------------------------------------------------- */

.search-overlay {
	position: fixed;
	inset: 0;
	z-index: 1200;
}

.search-overlay__scrim {
	position: absolute;
	inset: 0;
	background: rgb(8 50 88 / 45%);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.search-overlay.is-open .search-overlay__scrim { opacity: 1; }

.search-overlay__panel {
	position: relative;
	width: min(760px, calc(100% - var(--gutter) * 2));
	/* Directly under the bar it belongs to. The number is the header's own
	   height, so the panel reads as having come out of the button rather than
	   as a box that happened to land on top of the logo. */
	margin: calc(92px + var(--sp-5)) auto 0;
	opacity: 0;
	transform: translateY(-14px);
	transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.search-overlay.is-open .search-overlay__panel {
	opacity: 1;
	transform: none;
}

/* --- The field ------------------------------------------------------------- */

.search-bar {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2);
	border-radius: var(--radius-md);
	background: #fff;
	box-shadow: 0 18px 44px rgb(8 50 88 / 26%);
}

.search-bar__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--sp-3) var(--sp-3);
	border: 0;
	background: none;
	color: var(--c-ink);
	font: inherit;
	font-size: clamp(var(--fs-base), 0.95rem + 0.4vw, var(--fs-lg));
	font-weight: 600;
}

.search-bar__input:focus { outline: none; }

/* The browser's own clear button sits where the close button already is. */
.search-bar__input::-webkit-search-cancel-button { display: none; }

.search-bar__close {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--c-brand);
	cursor: pointer;
	transition: background 0.16s ease;
}

.search-bar__close:hover { background: var(--c-panel); }

.search-bar__close svg { width: 20px; height: 20px; }

.search-bar__spinner {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 2px solid var(--c-panel);
	border-block-start-color: var(--c-logo-teal);
	border-radius: 50%;
	animation: tm-search-spin 0.7s linear infinite;
}

@keyframes tm-search-spin {
	to { transform: rotate(360deg); }
}

/* --- The answers ----------------------------------------------------------- */

.search-results {
	margin-block-start: var(--sp-3);
	max-height: min(58vh, 520px);
	overflow-y: auto;
	overscroll-behavior: contain;
	border-radius: var(--radius-md);
	background: #fff;
	box-shadow: 0 18px 44px rgb(8 50 88 / 20%);
}

.search-results:empty { display: none; }

.search-list {
	margin: 0;
	padding: var(--sp-2);
	list-style: none;
}

.search-hit {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--sp-4);
	padding: var(--sp-3);
	border-radius: var(--radius-sm);
	color: inherit;
	text-decoration: none;
	transition: background 0.14s ease;
}

.search-hit:hover,
.search-hit:focus-visible {
	background: var(--c-panel);
	outline: none;
}

.search-hit__thumb {
	overflow: hidden;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-sm);
	background: var(--c-panel);
}

.search-hit__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.search-hit__text { min-width: 0; }

.search-hit__title {
	color: var(--c-brand);
	font-weight: 700;
	line-height: 1.35;

	/* Two lines at most: a long tour name should not push the next result out
	   of the panel. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.search-hit__meta {
	display: block;
	margin-block-start: 3px;
	color: var(--c-ink-soft);
	font-size: var(--fs-sm);
}

.search-hit__price {
	flex: 0 0 auto;
	color: var(--c-brand);
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: 900;
	white-space: nowrap;
}

/* --- Before anything is typed, and when nothing was found ------------------ */

.search-popular {
	padding: var(--sp-5) var(--sp-6) var(--sp-6);
}

.search-popular__title {
	margin: 0 0 var(--sp-3);
	padding-block-end: var(--sp-3);
	border-block-end: 1px solid var(--c-line);
	color: var(--c-ink-soft);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
}

.search-popular__list {
	display: grid;
	gap: var(--sp-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.search-popular__item {
	display: block;
	width: 100%;
	padding: var(--sp-3) var(--sp-3);
	border: 0;
	border-radius: var(--radius-sm);
	background: none;
	color: var(--c-brand);
	font: inherit;
	font-weight: 600;
	text-align: start;
	cursor: pointer;
	transition: background 0.14s ease;
}

.search-popular__item:hover,
.search-popular__item:focus-visible {
	background: var(--c-panel);
	outline: none;
}

.search-empty {
	margin: 0;
	padding: var(--sp-6) var(--sp-6) 0;
	color: var(--c-ink-soft);
	line-height: 1.6;
}

/* The page behind should not scroll away under the panel. */
body.has-search-open { overflow: hidden; }

@media (max-width: 700px) {
	.search-overlay__panel {
		width: calc(100% - var(--sp-4) * 2);
		/* The bar is shorter here, so the panel comes up to meet it. */
		margin-block-start: calc(76px + var(--sp-3) + env(safe-area-inset-top, 0px));
	}

	.search-results { max-height: 62vh; }

	.search-hit {
		grid-template-columns: 48px minmax(0, 1fr) auto;
		gap: var(--sp-3);
	}

	.search-hit__thumb { width: 48px; height: 48px; }

	/* One line for the region and the date: on a column this narrow they wrap
	   to two, and a four-line result row pushes the next one off the screen. */
	.search-hit__meta {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

@media (prefers-reduced-motion: reduce) {
	.search-overlay__scrim,
	.search-overlay__panel { transition: none; }

	.search-bar__spinner { animation-duration: 2s; }
}

/* Three circles, a hamburger and a wide logo do not all fit across a phone at
   full size. Shrinking the ring rather than dropping a control: the search is
   more use on a phone than anywhere else. */
@media (max-width: 700px) {
	.site-header__actions { gap: var(--sp-2); }

	.search-toggle,
	.cart-link {
		width: 40px;
		height: 40px;
	}

	.search-toggle__icon { width: 19px; height: 19px; }
}