/* =========================================================================
   Base reset inherited from the original site's parent theme (Hello
   3.4.1 style.css): border-box sizing and the form-control defaults.

   Every legacy shortcode this theme still renders (contact form, Shelf
   category cards, search filters, resource popup) was laid out on top of
   these rules, so they're restated here verbatim. Each selector is wrapped
   in :where() -- zero specificity -- so any class rule in main.css or the
   legacy CSS wins, and the reset can't, say, tint the menu buttons pink on
   hover the way its original `button:hover` would have.
   ========================================================================= */

:where(*, *::before, *::after) {
	box-sizing: border-box;
}

:where(label) {
	display: inline-block;
	line-height: 1;
	vertical-align: middle;
}

:where(button, input, optgroup, select, textarea) {
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	margin: 0;
}

:where(input[type=text], input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=url], select, textarea) {
	width: 100%;
	border: solid 1px #666666;
	border-radius: 3px;
	padding: 0.5rem 1rem;
	transition: all 0.3s;
}

:where(input[type=text], input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=url], select, textarea):focus {
	border-color: #333333;
}

:where(button, input) {
	overflow: visible;
}

:where(button, select) {
	text-transform: none;
}

:where(button, [type=button], [type=reset], [type=submit]) {
	width: auto;
	-webkit-appearance: button;
}

:where(button, [type=submit], [type=button]) {
	display: inline-block;
	font-weight: 400;
	color: #CC3366;
	text-align: center;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	background-color: transparent;
	border: 1px solid #CC3366;
	padding: 0.5rem 1rem;
	font-size: 1rem;
	border-radius: 3px;
	transition: all 0.3s;
}

:where(button, [type=submit], [type=button]):focus:not(:focus-visible) {
	outline: none;
}

:where(button, [type=submit], [type=button]):where(:hover, :focus) {
	color: #ffffff;
	background-color: #CC3366;
	text-decoration: none;
}

:where(button, [type=submit], [type=button]):not(:disabled) {
	cursor: pointer;
}

:where(textarea) {
	overflow: auto;
	resize: vertical;
}

:where([type=checkbox], [type=radio]) {
	box-sizing: border-box;
	padding: 0;
}

:where(img) {
	border-style: none;
	height: auto;
	max-width: 100%;
}