/**
 * Header (Elementor header template 22): the search button and drawer, the
 * full-screen menu on tablets and phones, and the two-tab search
 * ([tgbp_search], also on the home page). Behaviour in custom.js.
 *
 * Loaded on every front-end request, including the Elementor preview. In the
 * editor the drawer and the full-screen menu show open below the header, so
 * they can be edited.
 */

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

/* Above the page, so the drawer and the full-screen menu cover it. */
.tgbp-header.e-con {
	position: relative;
	z-index: 1000;
}

/* The menu sits on the right, next to the buttons, which never shrink. */
.tgbp-header__nav {
	margin-inline-start: auto;
}

.tgbp-header__buttons.elementor-widget {
	flex-shrink: 0;
}

/* Narrow phones (the design is 390px wide): the site title shrinks so the
   buttons still fit next to it. Two classes on the header, to win over the
   size Elementor sets on the widget. */
@media (max-width: 389px) {
	.tgbp-header.tgbp-header .elementor-widget-theme-site-title .elementor-heading-title {
		font-size: 7.5vw;
	}
}

/* --- Buttons ([tgbp_header_buttons], [tgbp_menu_close]) ----------------- */

.tgbp-header-buttons {
	display: flex;
	align-items: center;
	gap: 6px; /* 16px to the menu icon, which has 10px of padding. */
}

/* Class names doubled: the kit and the theme style every button (and colour
   it on hover and focus), these win over them. */
.tgbp-header-button.tgbp-header-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	line-height: 0;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s;
	-webkit-tap-highlight-color: transparent;
}

.tgbp-header-button.tgbp-header-button:is(:hover, :focus, :active) {
	background-color: transparent;
	color: inherit;
}

.tgbp-header-button.tgbp-header-button:focus-visible {
	outline: 2px solid #000;
	outline-offset: 2px;
}

/* Search: a black circle with a magnifier, a cross while the drawer is open. */
.tgbp-header-button--search.tgbp-header-button {
	width: 40px;
	height: 40px;
	border: 1px solid #000;
	border-radius: 20px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.tgbp-header-button--search.tgbp-header-button,
.tgbp-header-button--search.tgbp-header-button:is(:hover, :focus, :active) {
	border-color: #000;
	background-color: #000;
}

@media (hover: hover) {
	.tgbp-header-button--search.tgbp-header-button:hover {
		border-color: #333;
		background-color: #333;
	}
}

.tgbp-header-button--search svg {
	width: 20px;
	height: 20px;
}

.tgbp-header-button--search[aria-expanded="true"] svg:first-child,
.tgbp-header-button--search:not([aria-expanded="true"]) svg:last-child {
	display: none;
}

/* Menu (tablets and phones) and the full-screen menu's close button: a
   bigger tap area than the icon, which stays where the design has it. */
.tgbp-header-button--menu.tgbp-header-button {
	display: none;
}

.tgbp-header-button--close.tgbp-header-button {
	width: 44px;
	height: 44px;
	margin-inline-end: -7.5px;
}

.tgbp-header-button--close.tgbp-header-button:focus-visible {
	outline-color: #fff;
}

@media (max-width: 1024px) {
	.tgbp-header-button--menu.tgbp-header-button {
		display: inline-flex;
		width: 44px;
		height: 44px;
		margin-inline-end: -10px;
	}
}

@media (max-width: 767px) {
	.tgbp-header-button--search.tgbp-header-button {
		width: 36px;
		height: 36px;
		border-radius: 18px;
	}
}

/* --- Search drawer ------------------------------------------------------ */

/* Under the header, over the page. It clips the panel, which slides down
   from the header's bottom edge, and leaves room below for its shadow.
   Hidden (so out of the tab order too) once the panel is up again. Below the
   header's 1px bottom border. */
.tgbp-search-drawer.e-con {
	position: absolute;
	top: calc(100% + 1px);
	left: 0;
	right: 0;
	padding: 0 0 48px;
	overflow: hidden;
	pointer-events: none;
	visibility: hidden;
	transition: visibility 0s linear 0.3s;
}

.tgbp-header.is-search-open .tgbp-search-drawer.e-con {
	visibility: visible;
	transition-delay: 0s;
}

.tgbp-search-drawer .tgbp-search-drawer__panel {
	padding: 22px 40px 27px;
	background-color: #fff;
	box-shadow: 0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03);
	pointer-events: auto;
	transform: translateY(-100%);
	transition: transform 0.3s ease;
}

.tgbp-header.is-search-open .tgbp-search-drawer__panel {
	transform: none;
}

@media (max-width: 767px) {
	.tgbp-search-drawer .tgbp-search-drawer__panel {
		padding: 20px;
	}
}

/* --- Full-screen menu (tablets and phones) ------------------------------ */

/* Over the whole screen (below the admin bar when logged in), the page
   behind it doesn't scroll. */
.tgbp-mobile-menu.e-con {
	display: none;
	position: fixed;
	inset: var(--wp-admin--admin-bar--height, 0px) 0 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

@media (max-width: 1024px) {
	.tgbp-header.is-menu-open .tgbp-mobile-menu.e-con {
		display: flex;
		animation: tgbp-fade-in 0.25s ease;
	}

	html.tgbp-menu-open {
		overflow: hidden;
	}
}

@keyframes tgbp-fade-in {
	from {
		opacity: 0;
	}
}

/* The links, centred. */
.tgbp-mobile-menu__nav.elementor-widget {
	align-self: stretch;
}

.tgbp-mobile-menu__nav .elementor-nav-menu--main .elementor-item {
	justify-content: center;
	text-align: center;
}

/* --- In the Elementor editor --------------------------------------------- */

.elementor-editor-active .tgbp-search-drawer.e-con,
.elementor-editor-active .tgbp-mobile-menu.e-con {
	display: flex;
	position: static;
	padding-bottom: 0;
	pointer-events: auto;
	visibility: visible;
}

.elementor-editor-active .tgbp-search-drawer__panel {
	transform: none;
}

/* --- Two-tab search ([tgbp_search]) ------------------------------------- */

.tgbp-search {
	--tgbp-search-orange: #faa92c;
	max-width: 725px;
	margin-inline: auto;
}

.tgbp-search__tabs {
	display: flex;
	gap: 6px;
	padding-inline-start: 53px;
}

/* Class names doubled to win over the kit's button styles, as above. The
   selected tab is orange, joined to the orange border of the search box. */
.tgbp-search__tab.tgbp-search__tab,
.tgbp-search__tab.tgbp-search__tab:is(:hover, :focus, :active) {
	min-width: 103px;
	height: 36px;
	margin: 0;
	padding: 6px 19.5px;
	border: 0;
	border-radius: 8px 8px 0 0;
	background-color: #ffe8c5;
	color: #000;
	font-family: "Roboto Mono", monospace;
	font-size: 14px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0.28px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s;
}

@media (hover: hover) {
	.tgbp-search__tab.tgbp-search__tab:hover {
		background-color: #ffd9a1;
	}
}

.tgbp-search__tab.tgbp-search__tab[aria-selected="true"] {
	background-color: var(--tgbp-search-orange);
	cursor: default;
}

.tgbp-search__tab.tgbp-search__tab:focus-visible {
	outline: 2px solid #000;
	outline-offset: 2px;
}

.tgbp-search__form {
	display: flex;
	align-items: center;
	height: 64px;
	margin: 0;
	padding: 0 24px 0 4px;
	border: 8px solid var(--tgbp-search-orange);
	border-radius: 100px;
	background-color: #fff;
}

.tgbp-search__submit.tgbp-search__submit,
.tgbp-search__submit.tgbp-search__submit:is(:hover, :focus, :active) {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	line-height: 0;
	cursor: pointer;
	transition: none;
}

.tgbp-search__submit.tgbp-search__submit:focus-visible {
	outline: 2px solid #000;
	outline-offset: -2px;
}

.tgbp-search__submit svg {
	width: 20px;
	height: 20px;
}

/* The caret is the focus cue: an outline around the orange border would
   clash with it. No transition: the theme's "all .3s" would also delay its
   visibility, and the drawer focuses it as soon as it opens. */
.tgbp-search__input.tgbp-search__input {
	transition: none;
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	outline: none;
	background: none;
	color: #000;
	font-family: "Roboto", sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 24px;
	text-overflow: ellipsis;
	-webkit-appearance: none;
	appearance: none;
}

.tgbp-search__input::placeholder {
	color: #5b5b5b;
	font-style: italic;
	text-overflow: ellipsis;
	opacity: 1;
}

.tgbp-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

/* Home page ([tgbp_search variant="home"], Figma Home 872:5937): bigger,
   with a thicker orange frame, and the footer's crow standing on it left of
   the tabs, blinking, wondering and following the cursor with its eyes like
   in the footer, but staying put (css/footer.css, custom.js). On phones it's
   the standard search without the crow (Figma Home - Mobile). */
.tgbp-search__crow {
	display: none;
}

@media (min-width: 768px) {
	.tgbp-search--home {
		position: relative;
		max-width: 962px;
	}

	.tgbp-search--home .tgbp-search__tabs {
		gap: 7px;
		padding-inline-start: 113px;
	}

	.tgbp-search--home .tgbp-search__tab.tgbp-search__tab {
		height: 45px;
		padding: 10px 19px 11px;
		font-size: 16px;
		letter-spacing: 0.32px;
	}

	.tgbp-search--home .tgbp-search__form {
		height: 100px;
		padding: 0 32px 0 8px;
		border-width: 17px 18px;
		border-radius: 68px;
	}

	.tgbp-search--home .tgbp-search__submit.tgbp-search__submit {
		width: 56px;
		height: 56px;
	}

	.tgbp-search--home .tgbp-search__submit svg {
		width: 34px;
		height: 34px;
	}

	.tgbp-search--home .tgbp-search__input.tgbp-search__input {
		font-size: 19px;
		line-height: 26px;
	}

	/* The crow's feet 3px into the orange frame, under the tabs' 45px. */
	.tgbp-search--home .tgbp-search__crow {
		display: block;
		position: absolute;
		top: -85px;
		left: 6px;
		width: 71px;
		height: 133px;
		pointer-events: none;
	}
}

@media (max-width: 767px) {
	.tgbp-search__tabs {
		padding-inline-start: 38px;
	}

	.tgbp-search__form {
		box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tgbp-search-drawer .tgbp-search-drawer__panel {
		transition: none;
	}

	.tgbp-header.is-menu-open .tgbp-mobile-menu.e-con {
		animation: none;
	}
}