/*
@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;
	--Colors-Muted: #4D6D99;

	--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;

	--AnchorTargetBlankIcon-Size: 0.833em;

	--Header-Height: 85px;

	/*
	Interactions
	 */
	--InteractiveFocusVisible-BoxShadow: 0 0 8px var(--Colors-Brand-Primary);
	--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 {
	/* Decoded from Sketch's SVG export of the Homepage Background instance (r 1.076476,
	   aspectRatio 1.8942, 375px frame): ry = r * 375, rx = aspectRatio * ry. Absolute
	   radii keep the gradient one fixed size at every browser size. Its final stop
	   matches --Content-BackgroundColor, which continues past it.
	   See ai-docs/sketch-gotchas/gradients-to-css.md — do not translate as a circle.

	   Lives on body rather than main so the header and footer share the same
	   background rather than sitting on bare black; the site design is now unified
	   rather than main being the only themed region. */
	background-color: var(--Content-BackgroundColor);
	background-image: radial-gradient(ellipse 765px 404px at 52.61% -97px, #00C389 0%, #005BA6 39.08%, #002E6D 75.02%, #00204C 100%);
	color: #ffffff;
	flex: 1 1 100%;
	flex-direction: column;
	margin: 0;
	padding: 0 0 env(safe-area-inset-bottom);
	width: 100%;
}

main {
	/* A consistent minimum gap below the header, so every page starts the same
	   distance down rather than each page picking its own (or none). Pages that
	   need more space of their own reduce their own top margin/padding by this
	   amount rather than adding to it, so the two don't stack. */
	flex: 1 1 auto;
	padding-top: 24px;
}

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

a {
	color:                         var(--Colors-Brand-Primary);
}

/*
The external link marker is masked rather than embedded, so one rule covers every
_blank anchor and the icon still takes its colour from the link via currentColor.
 */
a[target="_blank"]::after {
	background-color: currentColor;
	content: "";
	display: inline-block;
	height: var(--AnchorTargetBlankIcon-Size);
	margin-left: 8px;
	mask: url("/Images/IconAnchorTargetBlank.svg") no-repeat center / contain;
	vertical-align: -0.125em;
	width: var(--AnchorTargetBlankIcon-Size);
}

/*
Buttons

Split three ways so a control takes only what it needs:

  .FEButton         structure, plus the --ThisButton* contract it reads. No palette
                    colours of its own.
  state rules       :hover / :focus-visible / :active / :disabled, reading the contract.
                    Each falls back to the resting token, so a palette that defines no
                    hover simply keeps its resting appearance.
  .FEButtonPrimary  palette — Buttons/Primary Button in Sketch.
  .FEButtonOutline  palette — Buttons/Outline Button in Sketch.

Markup pairs a structure class with a palette class:

  class="FEButton FEButtonPrimary"

A page-level class can override individual tokens on top of a palette; it wins because
page stylesheets load after Base.css.

Controls that are not text buttons should read the contract rather than take .FEButton,
whose box model (min-height, padding, typography) is specific to text buttons. See
.FEIconButton below.
 */
.FEButton {
	--Typeface-FontWght: 700;

	/* Shape — shared by every palette. */
	--ThisButton-BorderRadiusLength:                 12px;
	--ThisButton-BorderStyle:                        solid;
	--ThisButton-BorderWidth:                        1px;

	/* Focus indicator and disabled treatment are palette-agnostic. */
	--ThisButtonDisabled-BackgroundColor:            #919191;
	--ThisButtonDisabled-BorderColor:                var(--ThisButton-BorderColor, transparent);
	--ThisButtonDisabled-Color:                      #CCCCCC;
	--ThisButtonFocusVisible-BoxShadow:              var(--InteractiveFocusVisible-BoxShadow);

	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;
	box-shadow:                    none;
	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, var(--ThisButton-BackgroundColor));
	border-color:                  var(--ThisButtonHover-BorderColor, var(--ThisButton-BorderColor));
	color:                         var(--ThisButtonHover-Color, var(--ThisButton-Color));
}

.FEButton:focus-visible {
	background-color:              var(--ThisButtonFocusVisible-BackgroundColor, var(--ThisButton-BackgroundColor));
	border-color:                  var(--ThisButtonFocusVisible-BorderColor, var(--ThisButton-BorderColor));
	box-shadow:                    var(--ThisButtonFocusVisible-BoxShadow);
	color:                         var(--ThisButtonFocusVisible-Color, var(--ThisButton-Color));
	outline:                       none;
}

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

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

/*
Primary palette — Buttons/Primary Button in Sketch. The default treatment.
 */
.FEButtonPrimary {
	--ThisButton-BackgroundColor:                    #ffffff;
	--ThisButton-BorderColor:                        transparent;
	--ThisButton-Color:                              #191919;

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

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

	--ThisButtonActive-BackgroundColor:              #B4D9F3;
	--ThisButtonActive-BorderColor:                  var(--ThisButton-BorderColor);
	--ThisButtonActive-Color:                        var(--ThisButton-Color);
}

/*
Outline palette — Buttons/Outline Button in Sketch. For the dark page and menu
backgrounds.
 */
.FEButtonOutline {
	--ThisButton-BackgroundColor:                    transparent;
	--ThisButton-BorderColor:                        #ffffff;
	--ThisButton-BorderWidth:                        2px;
	--ThisButton-Color:                              #ffffff;

	--ThisButtonHover-BackgroundColor:               rgb(255 255 255 / 0.25);
	--ThisButtonHover-BorderColor:                   var(--ThisButton-BorderColor);
	--ThisButtonHover-Color:                         var(--ThisButton-Color);

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

	--ThisButtonActive-BackgroundColor:              #ffffff;
	--ThisButtonActive-BorderColor:                  var(--ThisButton-BorderColor);
	--ThisButtonActive-Color:                        var(--Colors-Brand-Secondary);
}

/*
Icon Button

For controls that are not text buttons — a bare 24px icon in a 40px hit area. Promoted
from Navigation.css's .NavigationActionButton, which had the same rule under a
panel-specific name; see HeaderInner.tpl's open button and Navigation.tpl's close
button for the two call sites. States follow Buttons/Outline Button in Sketch with no
border drawn: a white wash on hover, a solid white fill with a Brand Secondary icon on
active, and the shared focus glow.

Colours are hardcoded rather than tokenised because every surface this appears on today
is dark. A light-surface instance should get its own --ThisIconButton* prefix rather than
reusing --ThisButton*, which is reserved for .FEButton.
 */
.FEIconButton {
	align-items:                   center;
	appearance:                    none;
	background-color:              transparent;
	border:                        none;
	border-radius:                 12px;
	color:                         #ffffff;
	cursor:                        pointer;
	display:                       flex;
	height:                        40px;
	justify-content:               center;
	padding:                       0;
	transition:                    var(--InteractiveTransitionDuration);
	width:                         40px;
}

.FEIconButton:hover {
	background-color:              rgb(255 255 255 / 0.25);
}

.FEIconButton:active {
	background-color:              #ffffff;
	color:                         var(--Colors-Brand-Secondary);
}

.FEIconButton:focus-visible {
	box-shadow:                    var(--InteractiveFocusVisible-BoxShadow);
	outline:                       none;
}

.FEIconButtonIcon {
	height:                        24px;
	width:                         24px;
}

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

/*
Masked rather than an <img> so the icon takes the button's colour through every palette
and state, instead of needing an asset per treatment. The mask reads shape only, so the
fill in the source file is irrelevant. This stands in for the SVG auto-inlining the PHP
engine did; Turbo has no equivalent yet.
 */
.ButtonIconLink {
	background-color:              currentColor;
	mask:                          url("/Images/IconLink.svg") no-repeat center / contain;
	width:                         16px;
}

/*
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-visible {
	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-size: 12px;
	font-weight: var(--Typeface-FontWght);
	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;
}

.TCExternalLink, .TCExternalLinkText {
	display: inline-block;
	font-size: 12px;
	/*text-decoration: none;*/
}