/**
 * SVT search - our own markup, our own styles.
 *
 * Nothing here extends, overrides or depends on a Rehub component, and no Rehub
 * icon font is used. Colour tokens are stated rather than inherited, so a parent
 * theme update cannot move them.
 *
 * Breakpoint 1200: above it the header field is permanent, below it a right-hand
 * pane. The figure is measured, not chosen - at 1440 the live header leaves 188px
 * between the last nav item and the search cell, and that margin is gone by 1200.
 */

:root {
	--svt-ink: #1d1a15;
	--svt-cream: #f7f4ee;
	--svt-line: #e3ded2;
	--svt-mute: #8a8272;
}

/* ---------------------------------------------------------------
 * Header field
 * --------------------------------------------------------------- */

.svt-hs {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.svt-hs__form {
	display: none;
	width: 0;
}

.svt-hs__input {
	width: 100%;
	height: 36px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var( --svt-line );
	border-radius: 18px;
	background: #fff;
	color: var( --svt-ink );
	font-size: 14px;
	line-height: 36px;
	box-shadow: none;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.svt-hs__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.svt-hs__input:focus {
	border-color: var( --svt-mute );
}

.svt-hs__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: currentColor;
	cursor: pointer;
	line-height: 0;
}

.svt-hs__trigger:hover,
.svt-hs__trigger:focus-visible {
	background: rgba( 255, 255, 255, 0.12 );
}

/* Desktop: the field is simply there. */
@media ( min-width: 1200px ) {
	.svt-hs__form {
		display: block;
		width: 210px;
	}

	.rh-search-icon .svt-hs__trigger {
		display: none;
	}
}

/* ---------------------------------------------------------------
 * The right-hand pane, under 1200
 * --------------------------------------------------------------- */

.svt-pane {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	width: min( 88vw, 380px );
	background: #fff;
	color: var( --svt-ink );
	box-shadow: -14px 0 40px rgba( 29, 26, 21, 0.22 );
	transform: translateX( 100% );
	transition: transform 0.22s ease;
	will-change: transform;
}

.svt-pane.is-open {
	transform: translateX( 0 );
}

@media ( prefers-reduced-motion: reduce ) {
	.svt-pane {
		transition: none;
	}
}

.svt-pane__head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px;
	border-bottom: 1px solid var( --svt-line );
}

.svt-pane__form {
	flex: 1 1 auto;
	min-width: 0;
}

.svt-pane__form .svt-hs__input {
	height: 40px;
	line-height: 40px;
	border-radius: 20px;
	font-size: 16px; /* 16px stops iOS zooming the page on focus. */
}

.svt-pane__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var( --svt-ink );
	cursor: pointer;
	line-height: 0;
}

.svt-pane__list {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

html.svt-pane-open,
html.svt-pane-open body {
	overflow: hidden;
}

@media ( min-width: 1200px ) {
	.svt-pane {
		display: none;
	}
}

/* ---------------------------------------------------------------
 * Results - shared by the panel and the pane
 * --------------------------------------------------------------- */

.svt-sg {
	position: absolute;
	z-index: 9999;
	max-height: 70vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #fff;
	border: 1px solid var( --svt-line );
	border-radius: 8px;
	box-shadow: 0 16px 40px rgba( 29, 26, 21, 0.16 );
	padding: 4px;
	color: var( --svt-ink );
}

/* In the pane it is not a floating card. */
.svt-sg--flat {
	position: static;
	max-height: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 6px;
}

.svt-sg[hidden] {
	display: none;
}

.svt-sg__lead {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 11px 10px;
	margin-bottom: 2px;
	border-radius: 5px;
	background: var( --svt-cream );
	text-decoration: none;
	color: inherit;
}

.svt-sg__lead:hover,
.svt-sg__lead.is-active {
	background: #efe9dc;
}

.svt-sg__leadk {
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --svt-mute );
}

.svt-sg__leadt {
	font-size: 14px;
	font-weight: 700;
}

.svt-sg__row {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 8px 10px;
	border-radius: 5px;
	text-decoration: none;
	color: inherit;
}

.svt-sg__row:hover,
.svt-sg__row.is-active {
	background: var( --svt-cream );
}

.svt-sg__img {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 4px;
	overflow: hidden;
}

.svt-sg__img img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.svt-sg__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.svt-sg__eye {
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --svt-mute );
}

.svt-sg__t {
	font-size: 13px;
	line-height: 1.3;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.svt-sg--flat .svt-sg__t {
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: 14px;
}

.svt-sg__s {
	font-size: 12px;
	color: #4a463e;
}

.svt-sg__all {
	display: block;
	padding: 11px 10px;
	margin-top: 2px;
	border-top: 1px solid #efeade;
	border-radius: 5px;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	color: inherit;
}

.svt-sg__all:hover,
.svt-sg__all.is-active {
	background: var( --svt-cream );
}

.svt-sg__none {
	padding: 14px 12px;
	font-size: 13px;
	color: #6b665c;
}

/* Comparison rows in the dropdown: no media box, these have no photo. */
.svt-sg__vs {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 9px 10px;
	border-radius: 5px;
	text-decoration: none;
	color: inherit;
}

.svt-sg__vs:hover,
.svt-sg__vs.is-active {
	background: var( --svt-cream );
}

.svt-sg__kind {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #a4632a;
}

.svt-sg__vst {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

/* SVT-BLOCK-10 */

/* One heading for the comparisons, instead of a label on every row. */
.svt-sg__group {
	padding: 10px 10px 4px;
	margin-top: 4px;
	border-top: 1px solid #efeade;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --svt-mute );
}

.svt-sg__vst {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* SVT-BLOCK-20 */

/* The header field was a full pill - 18px of radius on a 36px box - and the
   pane's field went further at 20px on 40px. 8px is the radius this work
   already uses: the dropdown below the field is 8px, the result cards 8 to 10.
   One shape, stated here rather than left to whichever rule wrote it last. */

.svt-hs__input,
.svt-pane__form .svt-hs__input {
	border-radius: 8px;
}

/* SVT-BLOCK-22 */

/* The header field and the pane's field are controls; the dropdown is a surface
   sitting inside one. Literals replaced with the site tokens - see the note in
   svt-search.css for the audit this came from. */

.svt-hs__input,
.svt-pane__form .svt-hs__input {
	border-radius: var( --svt-radius-control, 8px );
}

.svt-sg {
	border-radius: var( --svt-radius-inner, 8px );
}