/*
@todo review env() function for browser safe areas https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/env
 */

:root {
	--Colors-Brand-Primary: #69B3E7;
	--Colors-Brand-Secondary: #002E6D;

	--Colors-Secondary-Accent01: #97D700;
	--Colors-Secondary-Accent02: #154734;
	--Colors-Secondary-Accent03: #00C389;

	--Colors-Error: #FF3A3A;

	--Content-BackgroundColor: #00204C;
	--Content-MaxWidth: 1440px;
	--ReadableContent-MaxWidth: 640px;

	/*
	Fonts
	 */
	--Typeface-FontItal: 0;
	--Typeface-FontWght: 400;

	--Typeface01-FontFamily: "degular-variable", sans-serif;
	--Typeface02-FontFamily: var(--Typeface01-FontFamily);
	--Typeface03-FontFamily: "Poppins", sans-serif;

	--Viewport-InlinePadding: 24px;

	--Header-Height: 100px;

	/*
	Interactions
	 */
	--InteractiveTransitionDuration: 0.25s;
}

*, *:before, *:after {
	/* by putting these in "*" any selector can update FontItal or FontWght and not have to redefine FontVariationSettings */
	/* opsz values: Degular Text: 6, Degular: 14, Degular Display: 72 */
	--Typeface01-FontVariationSettings: "ital" var(--Typeface-FontItal, 0), "opsz" 14, "wght" var(--Typeface-FontWght);
	--Typeface02-FontVariationSettings: "ital" var(--Typeface-FontItal), "opsz" 72, "wght" var(--Typeface-FontWght);

	box-sizing: inherit;
}

html,
body {
	display: flex;
}

html {
	box-sizing: border-box;
	color-scheme: dark;
	font-family: var(--Typeface03-FontFamily);
	min-height: 100%;
}

body {
	flex: 1 1 100%;
	flex-direction: column;
	margin: 0;
	padding: 0 0 env(safe-area-inset-bottom);
	width: 100%;
}

main {
	background-color: var(--Content-BackgroundColor);
	color: #ffffff;
	flex: 1 1 auto;
	margin-top: calc(0px - var(--Header-Height));
	padding-block: var(--Header-Height) 60px;
}

/*
Basic Elements
 */
h1, h2, h3, h4, h5, h6, p {
	margin-top: unset;
}

h1, h2, h3, h4, h5, h6 {
	--Typeface-FontWght: 700;

	font-family: var(--Typeface01-FontFamily);
	font-variation-settings: var(--Typeface01-FontVariationSettings);
	font-weight: var(--Typeface-FontWght);
}

/*
Buttons
 */
.FEButton {
	--Typeface-FontWght: 700;

	/* Default Button Theme */
	--ThisButton-BackgroundColor:                    #ffffff;
	--ThisButton-BorderColor:                        transparent;
	--ThisButton-BorderRadiusLength:                 12px;
	--ThisButton-BorderStyle:                        solid;
	--ThisButton-BorderWidth:                        1px;
	--ThisButton-Color:                              #191919;

	--ThisButtonHover-BackgroundColor:               var(--ThisButton-BackgroundColor);
	--ThisButtonHover-BorderColor:                   var(--ThisButton-BorderColor);
	--ThisButtonHover-Color:                         var(--ThisButton-Color);

	--ThisButtonFocus-BackgroundColor:               var(--ThisButton-BackgroundColor);
	--ThisButtonFocus-BorderColor:                   var(--ThisButton-BorderColor);
	--ThisButtonFocus-Color:                         var(--ThisButton-Color);

	--ThisButtonActive-BackgroundColor:              var(--ThisButton-BackgroundColor);
	--ThisButtonActive-BorderColor:                  var(--ThisButton-BorderColor);
	--ThisButtonActive-Color:                        var(--ThisButton-Color);

	--ThisButtonDisabled-BackgroundColor:            #919191;
	--ThisButtonDisabled-BorderColor:                var(--ThisButton-BorderColor);
	--ThisButtonDisabled-Color:                      #CCCCCC;

	align-items:                   center;
	appearance:                    none;
	background-color:              var(--ThisButton-BackgroundColor, #ffffff);
	border:                        var(--ThisButton-BorderWidth, 1px) var(--ThisButton-BorderStyle, solid) var(--ThisButton-BorderColor, transparent);
	border-radius:                 12px;
	color:                         var(--ThisButton-Color);
	cursor:                        pointer;
	display:                       inline-flex;
	font-family:                   var(--Typeface01-FontFamily);
	font-size:                     18px;
	font-variation-settings:       var(--Typeface01-FontVariationSettings);
	font-weight:                   var(--Typeface-FontWght);
	gap:                           8px;
	justify-content:               center;
	line-height:                   1;
	min-height:                    60px;
	padding:                       0.25em 1em;
	position:                      relative;
	text-align:                    center;
	text-decoration:               var(--ThisButton-TextDecoration, none);
	text-transform:                none;
	transition:                    var(--InteractiveTransitionDuration);
	z-index:                       1;
}

.FEButton:hover {
	background-color:              var(--ThisButtonHover-BackgroundColor);
	border-color:                  var(--ThisButtonHover-BorderColor);
	color:                         var(--ThisButtonHover-Color);
}

.FEButton:focus {
	background-color:              var(--ThisButtonFocus-BackgroundColor);
	border-color:                  var(--ThisButtonFocus-BorderColor);
	color:                         var(--ThisButtonFocus-Color);
}

.FEButton:active {
	background-color:              var(--ThisButtonActive-BackgroundColor);
	border-color:                  var(--ThisButtonActive-BorderColor);
	color:                         var(--ThisButtonActive-Color);
}

.FEButton:disabled {
	background-color:              var(--ThisButtonDisabled-BackgroundColor);
	border-color:                  var(--ThisButtonDisabled-BorderColor);
	color:                         var(--ThisButtonDisabled-Color);
	cursor:                        not-allowed;
}

.ButtonIcon {
	aspect-ratio: 1 / 1;
}

/*
Page Buttons
 */
.PageButtons {
	padding-inline: var(--Viewport-InlinePadding);
}

.PageButtonsInner {
	display: flex;
	flex-direction: column;
	gap: 24px 17px;
	margin-inline: auto;
	max-width: calc(var(--ReadableContent-MaxWidth));
}

.PageButton {
	flex: 1 1 auto;
}

/*
Form
 */
input:is([type=radio], [type=checkbox]),
label[for] {
	cursor: pointer;
}

input {
	font: inherit;
	transition: 0.25s;
}

.FormRow {
	display: flex;
	gap: 24px 17px;
}

.FormField {
	flex: 1 1 100%;
	position: relative;
}

.FormRow:has(> .FormField:nth-child(2):last-child) .FormField {
	flex-basis: 50%;
}

.FormFieldLabel {
	font-size: 14px;
	line-height: 18px;
}

.FormFieldLabel:has(+ input) {
	display: flex;
	gap: 4px;
	margin-bottom: 2px;
}

.FormFieldRequired {
	color: var(--Colors-Error);
	content: " *";
	order: 10;
}

.FormFieldInputArea {
	position: relative;
}

.FormFieldInput:user-invalid {
	outline: 1px solid var(--Colors-Error);
}

/* any input that accepts any form of text */
.FormFieldTextInput {
	background: #002962;
	border: none;
	border-radius: 8px;
	color: inherit;
	font-size: 16px;
	height: 56px;
	outline: 1px solid transparent;
	padding: 8px 16px 4px;
	transition: var(--InteractiveTransitionDuration);
	width: 100%;
}

.FormFieldTextInput:focus {
	outline: 1px solid var(--Colors-Brand-Primary);
}

.FormFieldTextInput::placeholder {
	color: #99ABC5;
}

.FormFieldForCheckBox {
	align-items: start;
	display: flex;
	gap: 0 8px;
}

.FormFieldCheckbox {
	margin: 0;
}

.FormFieldErrorMessage {
	--Typeface-FontWght: 500;
	color: var(--Colors-Error);
	font-size: 12px;
	font-weight: var(--Typeface-FontWght);
	line-height: 12px;
	margin-top: 4px;
	position: absolute;
	right: 0;
	text-align: right;
	top: 100%;
}

.FormErrorMessages {
	--Typeface-FontWght: 500;

	color: var(--Colors-Error);
	font-weight: var(--Typeface-FontWght);
	font-size: 12px;
	line-height: 12px;
	overflow: visible;
}

/*
Toast
 */
#ToastDialog {
	--Typeface-FontWght: 500;
	background: var(--Colors-Brand-Primary);
	border-radius: 22px;
	bottom: calc(env(safe-area-inset-bottom) + 24px);
	color: var(--Colors-Brand-Secondary);
	font-size: 14px;
	font-weight: var(--Typeface-FontWght);
	left: 50%;
	line-height: 18px;
	max-width: calc(100vw - var(--Viewport-InlinePadding));
	min-width: 212px;
	opacity: 0;
	padding: 12px 22px 8px;
	position: fixed;
	text-align: center;
	transform: translateX(-50%);
	transition: opacity 0.25s, z-index 0s;
	transition-delay: 0s, 0.25s; /* delay z-index when .Open is removed */
	z-index: -200;
}

#ToastDialog.ThemeError {
	background: var(--Colors-Error);
	color: #ffffff;
}

#ToastDialog.Open {
	opacity: 1;
	transition-delay: 0s, 0s; /* z-index should be instant when .Open is added */
	z-index: 200;
}

#ToastDialog a {
	color: inherit;
	text-decoration: none;
}