@charset "UTF-8";

/**
 * forms.css 1.2.0
 * Author: hybrid.
 *
 * Base form styles — inputs, labels, checkboxes, containers, search, file upload.
 * Submit button and nav buttons defined in navigations.css.
 * Choices.js overrides in choices.css.
 * Brevo newsletter overrides in brevo.css.
 * Search autocomplete in forms-autocomplete.css.
 *
 * Tokens
 * --form-font-size        font size of form elements
 * --form-gap              gap between form elements
 * --input-padding         input padding
 * --input-text-color      input text color
 * --input-background-color input background
 * --input-border          input border shorthand
 * --input-border-radius   input border radius
 *
 * Dependencies
 * --font-size         defined in fonts.css
 * --font-weight-*     defined in fonts.css
 * --stroke-width      defined in structure.css
 * --content-spacing   defined in spacing.css
 * --dark-color        defined in colors.css
 * --bright-color      defined in colors.css
 * --accent-color      defined in colors.css
 * --alert-color       defined in colors.css
 * --dark-rgb          defined in colors.css
 */



/* ================================================================================================== */
/* ============================================= CONFIG ============================================= */
/* ================================================================================================== */


/* ============================== DEFAULT ============================== */

:root {
	/* forms */
	--form-font-size: var(--font-size);
	--form-font-weight: var(--font-weight-normal);
	--form-title-font-weight: var(--font-weight-bold);
	--form-title-text-transform: uppercase;
	--form-gap: 1em;

	/* inputs */
	--input-height: 3em;
	--input-padding: 1em;
	--input-placeholder-opacity: .5;
	--input-text-color: var(--text-color);
	--input-background-color: var(--bright-color);
	--input-hover-text-color: var(--bright-color);
	--input-hover-background-color: var(--accent-color);
	--input-active-text-color: var(--accent-color);
	--input-border: solid var(--stroke-width);
	--input-border-width: var(--stroke-width);
	--input-border-radius: calc(var(--font-size) * 1.5);

	/* checkboxes */
	--input-checkbox-width: .25em;

	--form-filter: drop-shadow(0 0 .25em rgba(var(--dark-rgb), .5));
}



/* ====================================================================================================== */
/* ============================================= ANIMATIONS ============================================= */
/* ====================================================================================================== */

/* here for form transitions */



/* ================================================================================================ */
/* ============================================= CORE ============================================= */
/* ================================================================================================ */


/* ============================== FIELDSET ============================== */

fieldset {
	width: 100%;
}
fieldset legend {
	position: absolute;
	width: 0;
	height: 0;
	font-size: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	border: 0;
}


/* ============================== FORM ============================== */

form {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	font-size: var(--form-font-size);
	text-align: left;
	width: 100%;
}


/* =============== IN FORM =============== */

form input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
form textarea,
form button,
form select {
	width: 100%;
}
form hr + * {
	margin-top: 0;
}


/* ============================== INPUTS ============================== */

input, textarea, select {
	display: inline-flex;
	width: auto;
	font-family: inherit;
	font-size: var(--form-font-size);
	line-height: 1;
	font-weight: var(--form-font-weight);
	padding: var(--input-padding) calc(var(--input-padding) * 1.5);
	color: inherit;
	border: var(--input-border);
	border-radius: var(--input-border-radius);
	background: var(--input-background-color);
}
input, select {
	height: var(--input-height);
}
textarea {
	resize: none;
}
select, input[type="submit"], button {
	cursor: pointer;
}
input[type="submit"], button {
	height: auto;
}

/* ============================== BROWSERS ============================== */

input,
textarea,
select,
button {
	appearance: none;
	-webkit-appearance: none;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
}
input::placeholder,
textarea::placeholder {
	color: inherit;
	opacity: var(--input-placeholder-opacity);
}


/* ============================== ERRORS ============================== */

.error-message {
	font-size: .75em;
	font-weight: var(--font-weight-bold);
	color: var(--alert-color);
}
.error-message + form {
	margin-top: calc(var(--content-spacing) / 2);
}


/* ============================== AUTOFILL ============================== */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active {
	-webkit-text-fill-color: var(--input-text-color) !important;
	-webkit-box-shadow: 0 0 0px 1000px var(--input-background-color) inset;
	background-color: transparent;
}


/* ============================== CHECKBOX / RADIO ============================== */

input[type="radio"],
input[type="checkbox"] {
	position: relative;
	display: inline-flex;
	height: 1.25em;
	width: 1.25em;
	padding: 0 !important;
	cursor: pointer;
	border: var(--input-border);
	min-height: auto;
	aspect-ratio: 1/1;
}
input[type="radio"] {
	border-radius: 50%;
}
input[type="checkbox"] {
	border-radius: .25em;
}
input[type="radio"] + label,
input[type="checkbox"] + label {
	cursor: pointer;
}
input[type="radio"]:before,
input[type="checkbox"]:before {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transform: scale(.75);
}
input[type="radio"]:before {
	content: '';
	border-radius: 50%;
	background: var(--dark-color);
}
input[type="checkbox"]:before {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='var(--dark-color)' d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
}
input[type="radio"]:hover:before,
input[type="radio"]:checked:before,
input[type="checkbox"]:hover:before,
input[type="checkbox"]:checked:before {
	opacity: 1;
}


/* ============================== CONTAINERS ============================== */

/**
 * .form-container — custom input wrapper
 */


/* =============== DEFAULT =============== */

.form-container {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--form-gap);
	width: 100%;
}
.form-container > * {
	margin: 0;
}


/* =============== INLINE =============== */

form .inline {
	flex-wrap: wrap;
	align-items: flex-start;
	width: 100%;
}
form .inline > * {
	flex-grow: 1;
	flex-basis: 0;
}


/* ============================== LABEL ============================== */

/**
 * Container for input
 */

label {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--form-gap) / 2);
}


/* ============================== INPUT SEARCH ============================== */

.form-container input[type="search"] {
	padding-right: 3em;
}
.form-container input[type="search"] + button:not(.reset-search) {
	position: absolute;
	z-index: 10;
	inset: 0 0 0 auto;
	aspect-ratio: 1/1;
	text-align: center;
	margin: 0;
	border: 0;
	height: 100%;
	width: auto;
	border-radius: 50%;
	transform: scale(.75);
}
.form-container input[type="search"] + button:not(.reset-search):hover {
	transform: scale(1);
}

/* =============== RESET SEARCH =============== */

button.reset-search {
	position: absolute;
	top: 50%;
	right: 1em;
	display: flex;
	height: 3em;
	width: 3em;
	aspect-ratio: 1/1;
	font-size: .625em;
	padding: 0;
	color: var(--button-text-color);
	background: var(--dark-color);
	border-color: var(--dark-color);
	transform: translateY(-50%) scale(.9);
	opacity: 0;
	pointer-events: none;
}
button.reset-search.active {
	transform: translateY(-50%) scale(1);
	opacity: 1;
	pointer-events: auto;
}
button.reset-search [class^="icon-"] {
	pointer-events: none;
}

/* Hide native clear button in search input */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-ms-clear,
input[type="search"]::-ms-reveal {
	display: none;
}


/* ============================== INPUT FILE ============================== */

/**
 * WIP — unused for now.
 * Hide input, use <label> as button.
 */

.form-container input[type="file"] {
	opacity: 0;
	position: absolute;
	inset: 0;
	z-index: 10;
	cursor: pointer;
}
.form-container input[type="file"] + label {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
	font-size: var(--font-size);
	padding: 1em;
	color: var(--dark-color);
	background: var(--accent-color);
	border-radius: 2em;
	cursor: pointer;
	white-space: nowrap;
}
.form-container input[type="file"]:hover + label {
	color: var(--accent-color);
	background: var(--dark-color);
}
.form-container input[type="file"] + label > * {
	margin: 0;
}


/* ============================== SELECT ============================== */

/* Altered by choices.js */

.form-container select {
	padding-right: calc(var(--form-font-size) * 3 + var(--input-border-width) * 3);
}


/* ============================== ICONS ============================== */

/* Icon on .form-container */

.form-container[class^="icon-"]:before,
.form-container[class*=" icon-"]:before {
    content: "";
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
	width: auto;
    aspect-ratio: 1/1;
    background: currentColor;
    mask-size: 1em;
    mask-repeat: no-repeat;
    mask-position: center;
    transform: translate3d(0, -50%, 0);
    opacity: .5;
    pointer-events: none;
}
.form-container[class^="icon-"] input,
.form-container[class*=" icon-"] input {
	padding-left: calc(var(--form-font-size) * 3 + (var(--input-border-width) * 3));
}


/* ============================== RECAPTCHA ============================== */

.grecaptcha-badge {
	visibility: hidden;
}


/* ============================== WP CONTACT FORM 7 ============================== */

.wpcf7 form > p {
	width: 100%;
}
.wpcf7 form label {
	display: flex;
	flex-wrap: wrap;
}
.wpcf7-form-control-wrap {
	position: relative;
	width: 100%;
}


/* ================================================================================================= */
/* ============================================= THEME ============================================= */
/* ================================================================================================= */

/* here for project-specific media overrides */

/* ============================== LOGIN ============================== */

/**
 * WP login form
 */

.login-username,
.login-password {
	width: 100%;
}


form.searchbar * + .radio-buttons {
	justify-content: center;
	margin-top: calc(var(--content-spacing) / 2);
}