.library-search-form {
	container-type: inline-size;
	--focusBorderColor: hsl( 186 97% 30% );
	/* // border color complements overlay filters */
	border: 2px solid hsl(162 32% 13%); 
	padding: 1.2em;
	background-image:  url('/wp-content/plugins/bates-library-search-dashboard/assets/171022_Campus_0024.jpg');
	background-size: cover;
	background-position-y: 60%;
	position: relative;

	& > * {
		/* Was at 50, but that collided with site-nav dropdowns */
		z-index: 40;
		position: relative;
	}

	&::after {
		content: '';
		position: absolute;
		z-index: 0;
		inset: 0;
		background: hsl(174 100% 9% / .7 );
		backdrop-filter: blur(2px) saturate(0.4);
	}

	.library-search-header {
		display: flex;
		justify-content: space-between;
		gap: 1em;
		margin-block: 1em;
	}

	& h1 {
		color: white;
		font-family: var(--fontSansSerif);
		font-weight: 800;
		letter-spacing: -1px;
		margin: 0;
	}

	.circle-link {
		background: hsl(0 0% 100% / .4);
		border-radius: 100%;
		padding: 3px;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 24px;
		width: 24px;
		
		& svg {
			width: 100%;
			/* // mix-blend-mode: difference; */
		}
	}


	.extra-link {
		font-size: .9em;
	}

	& a {
		color: white;
	}

	& form {
		margin-bottom: .5em;
	}

	& input.main-input {
		border-radius: 0;
		border: 2px solid black;
		box-sizing: border-box;
		width: 100%;

		&::placeholder {
			color: hsl(0 0% 50%);
		}

		&:focus {
			box-shadow: none;
			outline: none;
			background: hsl( 186 100% 97% );
			color: hsl( 186 97% 14% );
		}
	}

	& select.dropdown {
		display: block;
		cursor: pointer;
		overflow: hidden;
		background: hsl(0 0% 88%);
		color: black;
		background-image: url(/wp-content/plugins/bates-library-search-dashboard/assets/noun-arrow-2335640.svg);
		background-size: 1.1em;
		background-position: 95% center;
		background-repeat: no-repeat;
		font-weight: bold;
		padding-inline: .5em 3em; 
		/* // remove the browser's dropdown arrow */
		appearance: none;
		border: none; /* remove default browser style */

		& option {
			background: hsl(0 0% 88%);
		}

		&:focus, &:focus-visible {
			box-shadow: none;
			outline: 2px solid hsl( 186 97% 30% );
		}
	}

	& input.main-input:focus , 
	& input.main-input:focus ~ .other-input select.dropdown {
		border-color: var(--focusBorderColor);
	}

	& input[type="submit"] {
		text-transform: uppercase;
		background: #881124;
		color: white;
		padding: .5em 1em;
		border-radius: 0;
		opacity: 1 !important; /* overide theme */
		margin: 0; /* override theme */

		&:focus {
			outline: 2px solid #881124;
			outline-offset: 2px;
		}
	}
	
	
	.other-input {
		margin-block: .8em;
		display: flex;
		gap: 1em;
		justify-content: space-between;
	}
	
	@container (min-width:550px) {
		& input.main-input {
			border-right: none;
			padding: .8em;
		}
		.other-input {
			margin: 0;
		}
		& select.dropdown {
			border-top: 2px solid black;
			border-right: 2px solid black;
			border-bottom: 2px solid black;
			padding-inline-start: 1em;
		}
		& form {
			display: flex;
			justify-content: stretch;
		}
		& input[type="submit"] {
			/* align button edges with inside of input borders
			   so it reads as the same size */
			margin-block: 2px;
		}
	}

}