@import url('font-sizes.css');

/*-----------------------------------------------------------------*\
  LAYOUT: formatting of Revinate forms (typically in HTML module)
\*-----------------------------------------------------------------*/
form[id^="revinate"] {
	font-style: normal;
	font-weight: bold;
	color: #212722;
	margin-block-end: 50px !important;

	sup {
		color: #9b2743;
	}

	fieldset {
		border: none !important;
		display: grid;
		gap: 20px;
		margin-inline: auto;
		padding: 0;
		width: 100% !important;

		legend {
			border: none !important;
			color: #212722;
			font-family: oswald, sans-serif;
			font-weight: 600;
			font-style: normal;
			font-size: 36px;
			letter-spacing: 0.03em;
			margin-block: 18px;
			text-transform: uppercase;
		}

		:is(input, select) {
			border: 1px solid #003349;
			border-radius: 4px;
			color: #606060;
			font-family: lato,sans-serif;
			font-size: 18px;
			line-height: 32px;
			letter-spacing: 0.03em;
			height: 70px;
			padding: 12px 16px;

			&:focus {
				outline: none;
			}

			&:focus-visible {
				outline: 2px solid #003349;
				outline-offset: 3px;
			}
		}

		select {
			padding: 5px 17px 5px 3px;
		}

		& > div {
			label {
				color: #212722;
				font-family: lato,sans-serif;
				font-size: 16px;
				font-style: normal;
				letter-spacing: 0.06em;
				line-height: 21px;
				margin-bottom: 6px;
				width: auto;
			}
		}
		& > div:not(.button, :has(input:first-child)) {
			display: grid;
			grid-template-rows: auto 1fr;

			&:has(label ~ input ~ input) {
				column-gap: 10px;
				grid-template-areas:
					"label label"
					"input1 input2";
			}

			&:not(:has(.checkbox-group)) label {
				grid-area: label;
			}
			input:not([type="checkbox"],[type="radio"]) {
				margin: 0;
				width: 100%;
			}
			input:is([type="checkbox"],[type="radio"]) {
				margin: 0;
				width: auto;
			}
		}
		& > div:has(input:first-child) {
			column-gap: 20px;
			display: grid;
			grid-template-columns: auto 1fr;
			grid-template-rows: 1fr;
			grid-template-areas: 
				"input label";

			input[type="checkbox"] {
				grid-area: input;
				margin: 0;
				width: auto;
			}
		}
		& div.button {
			display: grid;
			grid-template-columns: 1fr auto 1fr;
			grid-template-rows: 1fr;
			grid-template-areas: 
				"space1 button space2";

			button[type="submit"] {
				background-color: #e40046;
				border: 1px solid #003349;
				border-radius: 4px;
				display: block;
				color: #fff;
				cursor: pointer;
				font-family: oswald,sans-serif;
				font-size: 24px;
				font-weight: 700;
				font-style: normal;
				line-height: 36px;
				letter-spacing: 0.002em;
				padding: 9px 44px 11px;
				width: max-content;
				position: relative;
				text-transform: uppercase;
				transition: background-color 0.25s ease, color 0.25s ease;

				&::before {
					content: '';
					background-color: transparent;
					border: 1px solid #003349;
					border-radius: 4px;
					display: block;
					inset: 4px;
					position: absolute;
				}

				&:is(:hover, :focus-visible) {
					background-color: #fff;
					border: 1px solid #e40046;
					color: #385171;
					
					&::before {
						border: 1px solid #e40046;
					}
				}
			}
		}
		& > div:has(label + input:not([type="hidden"]):last-child),
		& > div:has(label + select:last-child),
		& > div:has(label + .checkbox-group) {
			grid-template-columns: 1fr;
			grid-template-areas: 
				"label"
				"input";

			input, select, .checkbox-group {
				grid-area: input;
				margin: 0 !important;
				text-align: left;
				width: 100% !important;
			}
			.checkbox-group {
				display: grid;
				grid-template-columns: 1fr;

				label {
					align-items: baseline;
					column-gap: 10px;
					display: grid;
					grid-template-columns: auto 1fr;
					grid-template-areas: "input label";
				}

				input[type="checkbox"] {
					margin: 0;
					width: auto;
				}
			}
		}
		& > div:has(input[type="hidden"] + label + select + label + select:last-child) {
			grid-template-columns: auto auto 1fr;
			grid-template-areas: 
				"label label label"
				"select1 select2 other";

			select:first-of-type {
				grid-area: select1;
			}
			select:last-of-type {
				grid-area: select2;
			}
		}
	}
}
section:not(.background--color-bluish, .background--color-green) {
	form[id^="revinate"] {
		color: #212722;
	
		fieldset {
			legend {
				color: #212722;
			}
	
			& > div {
				label {
					color: #212722;
				}
			}
			
			& div.button {
				button[type="submit"] {
					border: 1px solid #003349;
					color: #fff;
	
					&::before {
						border: 1px solid #003349;
					}
	
					&:is(:hover, :focus-visible) {
						border: 1px solid #e40046;
						color: #e40046;
	
						&::before {
							border: 1px solid #e40046;
						}
					}
				}
			}
		}
	}
}

section:is(.background--color-bluish, .background--color-green) {
	form[id^="revinate"] {
		color: #fff;
	
		fieldset {
			legend {
				color: #fff;
			}
	
			& > div {
				label {
					color: #fff;
				}
			}
			
			& div.button {
				button[type="submit"] {
					border: 1px solid #fff;
					color: #fff;
	
					&::before {
						border: 1px solid #fff;
					}
	
					&:is(:hover, :focus-visible) {
						border: 1px solid #e40046;
						color: #e40046;
						
						&::before {
							border: 1px solid #e40046;
						}
					}
				}
			}
		}
	}
}