/**
 * 行程搜索 — the header magnifier.
 *
 * The field is laid out beside the button and hidden by width rather than by
 * `display: none`, so opening it is an animation and the input keeps its place in
 * the tab order the whole time.
 *
 * `.is-ready` is added by the script. Until then the field is simply visible: if
 * JavaScript never arrives, an open search box is a working search box, and hiding
 * it by default would leave a button that does nothing.
 */

.tc-search {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.tc-search__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 40px of target around a 20px glyph. */
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: inherit;
	cursor: pointer;
}

.tc-search__toggle svg {
	width: 20px;
	height: 20px;
}

.tc-search__toggle:hover {
	color: var(--wp--preset--color--primary-dark, #152A40);
}

.tc-search__form {
	display: flex;
	align-items: center;
}

.tc-search__form input[type="search"] {
	box-sizing: border-box;
	width: 200px;
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--wp--preset--color--border, #D8DCE5);
	border-radius: 4px;
	background: #fff;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--wp--preset--color--primary, #1D3653);
	transition: width 0.2s ease, opacity 0.15s ease;
}

/* Collapsed. Zero width rather than display:none — the transition needs something
   to animate, and a removed element cannot be tabbed to and then revealed. */
.tc-search.is-ready:not(.is-open) .tc-search__form input[type="search"] {
	width: 0;
	padding-inline: 0;
	border-color: transparent;
	opacity: 0;
	/* Nothing to type into while it is closed, so nothing to land on when tabbing. */
	pointer-events: none;
}

/* On the homepage hero the header is transparent and everything in it is white; the
   input keeps its own white background, so only the icon needs telling. */
.home .site-header:not(.is-scrolled) .tc-search__toggle {
	color: #fff;
}

@media (max-width: 599px) {
	/* Beside the burger there is no room for a field, so it opens across the row
	   underneath instead of squeezing the logo out. */
	.tc-search {
		position: static;
	}

	.tc-search__form {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		padding: 0 var(--wp--style--root--padding-left, 1rem) 0.75rem;
		background: inherit;
	}

	.tc-search.is-ready:not(.is-open) .tc-search__form {
		display: none;
	}

	.tc-search__form input[type="search"] {
		width: 100%;
	}
}