@charset "UTF-8";

/**
 * forms.css 1.0.0
 *
 * Base form styles — inputs, labels, checkboxes, containers, search, file upload.
 * Submit button and nav buttons defined in navigation.css.
 * Choices.js overrides in choices.css.
 * Brevo newsletter overrides in brevo.css.
 * Search autocomplete in forms-autocomplete.css.
 *
 * TODO
 * error-message (vars)
 * checkboxes, radios (vars)
 * label: to fix
 * choices / input: padding
 */


/* ============================================== */
/* ==================== VARS ==================== */
/* ============================================== */


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

:root {
	--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: inherit;
	--form-gap: 1em;
	--form-filter: drop-shadow(0 0 .25em rgba(var(--dark-rgb), .5));

	--input-padding: 1em;

	--input-text-color: var(--text-color);
	--input-background-color: var(--light-color);
	--input-hover-text-color: var(--bright-color);
	--input-hover-background-color: var(--accent-color);
	--input-border: 0;
	--input-border-width: 0px;
	--input-border-radius: calc(var(--font-size) * 1.5);

	--input-checkbox-width: .25em;
}


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


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

/* here for form transitions */


/* ========== CUSTOM ========== */

/* here for custom animation overrides */


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

fieldset {
	position: relative;
	border: none;
	width: 100%;
	margin: 0;
	padding: 0;
}
fieldset legend {
	position: absolute;
	width: 0;
	height: 0;
	font-size: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	border: 0;
	white-space: nowrap;
}


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

form {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	font-size: var(--form-font-size);
	text-align: left;
	margin: 0 auto;
	width: 100%;
}


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

form input,
form textarea,
form button,
form select {
	width: 100%;
}
form hr + * {
	margin-top: 0;
}


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

input,
textarea,
select {
	position: relative;
	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) * 2);
	color: inherit;
	border: var(--input-border);
	border-radius: var(--input-border-radius);
	background: var(--input-background-color);
}
input,
select {
	height: 3em;
	/*min-height: var(--input-min-height);*/
}
textarea {
	resize: none;
	/*min-height: calc(var(--input-min-height) * 2);*/
}
select {
	cursor: pointer;
}
input[type=submit],
button {
	cursor: pointer;
	min-height: auto;
}


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

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
input,
textarea,
button {
	-webkit-appearance: none;
	-moz-appearance: none;
}
input::placeholder,
textarea::placeholder {
	color: inherit;
	opacity: .5;
}


/* ================================================ */
/* ==================== 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"] {
	display: inline-flex;
	height: 1.25em;
	width: 1.25em;
	padding: 0 !important;
	cursor: pointer;
	border: solid 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;
}
button.reset-search.active {
	transform: translateY(-50%) scale(1);
	opacity: 1;
}

/* 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) * 3);
}


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

/* Icon on .form-container */

.form-container[class^="icon-"]:before,
.form-container[class*=" icon-"]:before {
	font-family: "icomoon";
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	aspect-ratio: 1/1;
	text-align: center;
	margin: 0;
	border: 0;
	background: none;
	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: block;
}


/* ================================================ */
/* ==================== CUSTOM ==================== */
/* ================================================ */


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

/**
 * WP login form
 */

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


/* ========== CUSTOM ========== */

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