/*
General
 */


/*
Page Header
 */
.PageHeader {
	--Background-Height:           375px;

	/* 44px total below the header; 24px of that now comes from main's own
	   padding-top. */
	margin-top:                    20px;
	position:                      relative;
}

.PageHeaderInner {
	margin-inline:                 auto;
	max-width:                     var(--Content-MaxWidth);
	position:                      relative;
	z-index:                       10;
}

.PageHeaderInnerContent {
	display:                       flex;
	flex-direction:                column;
	justify-content:               start;
	min-height:                    var(--Background-Height);
	padding:                       28px var(--Viewport-InlinePadding) 265px;
	text-align:                    center;
}

.PageHeaderInnerContent h1 {
	--Typeface-FontWght:           800;
	font-family:                   var(--Typeface02-FontFamily);
	font-size:                     54px;
	font-variation-settings:       var(--Typeface02-FontVariationSettings);
	font-weight:                   var(--Typeface-FontWght);
	line-height:                   40px;
	margin:                        0;
	text-transform:                uppercase;
}


.PageHeaderBackgroundImageArea {
	align-items:                   center;
	background:                    transparent url("/Images/PageHeaderBackgroundStar.svg") no-repeat scroll center center;
	background-size:               var(--Background-Height);
	display:                       flex;
	height:                        100%;
	justify-content:               center;
	left:                          0;
	position:                      absolute;
	top:                           0;
	width:                         100%;
	z-index:                       1;
}

.PageHeaderBackgroundIconImage {
	height:                        126px;
	margin-left:                   -9px;
	margin-top:                    33px;
	max-width:                     100%;
	object-fit:                    contain;
	z-index:                       1;
}

/*
Page Content
 */
.PageContentInner,
.PageFormInner {
	margin-inline:                 auto;
	max-width:                     calc(var(--ReadableContent-MaxWidth) + 2 * var(--Viewport-InlinePadding));
	padding-inline:                var(--Viewport-InlinePadding);
}

.ChallengeTitle {
	font-size:                     32px;
	line-height:                   26px;
	margin-bottom:                 9px;
}

.ChallengeCreatedBy {
	color:                         #CCD5E2;
	font-size:                     14px;
	font-weight:                   500;
	line-height:                   18px;
	margin-bottom:                 16px;
}

.ChallengeDescriptionArea {
	font-size:                     14px;
	line-height:                   21px;
	margin-bottom:                 40px;
}

/*
Form
 */
.FormRow {
	margin-bottom:                 24px;
}

.FormFieldGroupLabel {
	--Typeface-FontWght:           700;
	align-items:                   center;
	display:                       flex;
	font-family:                   var(--Typeface01-FontFamily);
	font-size:                     24px;
	font-variation-settings:       var(--Typeface01-FontVariationSettings);
	font-weight:                   var(--Typeface-FontWght);
	gap:                           8px;
	line-height:                   22px;
	margin-bottom:                 16px;
	text-transform:                uppercase;
}

.FormFieldGroupLabel > .StepCounter {
	background-color:              var(--Colors-Brand-Primary);
	border-radius:                 13px;
	color:                         var(--Colors-Brand-Secondary);
	display:                       inline-block;
	font-size:                     22.58px;
	height:                        25px;
	line-height:                   1;
	min-width:                     25px;
	text-align:                    center;
}

/*
Form:                          Pick A Side
 */
.FormRowPickASide {
	margin-bottom:                 42px;
}

.FormRowPickASide .FormFieldRadioGroup {
	display:                       flex;
	gap:                           16px;
}

.FormRowPickASide .FormFieldRadio {
	flex:                          1 1 50%;
	position:                      relative;
}

.FormRowPickASide .FormFieldRadioInput {
	appearance:                    none;
	background-color:              var(--Colors-Brand-Secondary);
	border-radius:                 16px;
	display:                       block;
	height:                        120px;
	margin:                        0;
	position:                      relative;
	transition:                    0.25s;
	width:                         100%;
	z-index:                       1;
}

.FormRowPickASide .ThemeAccent01 .FormFieldRadioInput:checked {
	background-color:              var(--Colors-Secondary-Accent01);
}

.FormRowPickASide .ThemeAccent03 .FormFieldRadioInput:checked {
	background-color:              var(--Colors-Secondary-Accent03);
}

.FormRowPickASide .FormFieldLabel {
	--Typeface-FontWght:           700;
	font-family:                   var(--Typeface01-FontFamily);
	font-size:                     18px;
	font-variation-settings:       var(--Typeface01-FontVariationSettings);
	font-weight:                   var(--Typeface-FontWght);
	left:                          0;
	line-height:                   20px;
	position:                      absolute;
	text-align:                    center;
	top:                           50%;
	transform:                     translateY(-50%);
	transition:                    0.25s;
	width:                         100%;
	z-index:                       10;
}

.FormRowPickASide .FormFieldRadio:has(.FormFieldRadioInput:checked) .FormFieldLabel {
	color:                         var(--Colors-Secondary-Accent02);
}

/*
Form:                          Pledge Amount
 */
.FormRowPledgeAmount {
	margin-bottom:                 40px;
}

.FormRowPledgeAmount .FormFieldInputArea {
	align-items:                   center;
	appearance:                    none;
	border-bottom:                 1px solid #33588A;
	display:                       flex;
	font-size:                     48px;
	font-weight:                   300;
	line-height:                   1;
	transition:                    0.25s;
}

.FormRowPledgeAmount .FormFieldInputArea:has(:focus-visible) {
	border-color:                  #ffffff;
}

.FormRowPledgeAmount .FormFieldInputArea:has(:user-invalid) {
	border-color:                  var(--Colors-Error);
}

.FormRowPledgeAmount .FormFieldInputPrefix {
	flex:                          0 0 30px;
	text-align:                    right;
}

/* Matches the "0" placeholder's colour while the field is empty. */
.FormRowPledgeAmount .FormFieldInputArea:has(.FormFieldTextInput:placeholder-shown) .FormFieldInputPrefix {
	color:                         var(--Colors-Muted);
}

.FormRowPledgeAmount .FormFieldTextInput {
	appearance:                    none;
	background:                    none;
	border:                        none;
	color:                         inherit;
	flex:                          1 1 auto;
	font-size:                     45px;
	height:                        50px;
	padding:                       0 30px 0 0;
	text-align:                    center;
}

.FormRowPledgeAmount .FormFieldInput {
	outline:                       none;
}

.FormRowPledgeAmount .FormFieldInput::placeholder {
	color:                         var(--Colors-Muted);
}

.FormFieldModifierButtons {
	display:                       flex;
	flex-wrap:                     wrap;
	gap:                           10px;
	margin-top:                    18px;
}

.FormFieldModifierButton {
	--Typeface-FontWght:           600;

	--ThisButton-BackgroundColor:  #1A437C;
	--ThisButton-Color:            #ffffff;

	--ThisButtonHover-BackgroundColor: var(--Colors-Brand-Primary);
	--ThisButtonHover-Color:       var(--Colors-Brand-Secondary);

	--ThisButtonFocusVisible-BackgroundColor: var(--Colors-Brand-Primary);
	--ThisButtonFocusVisible-Color: var(--Colors-Brand-Secondary);

	border-radius:                 19px;
	flex:                          1 1 calc(25% - 10px);
	font-family:                   var(--Typeface03-FontFamily);
	font-size:                     16px;
	min-height:                    38px;
	padding:                       8px 12px 2px;
}

/*
Form:                          Organization Information
 */
.FormRowOrganizationInformation {
	margin-bottom:                 40px;
}

.FormOrganizationInformation {
	display:                       flex;
	gap:                           12px;
}

.FormOrganizationInformation .OrganizationImageArea {
	flex:                          0 0 100px;
}

.FormOrganizationInformation .OrganizationImage {
	aspect-ratio:                  100 / 68;
	display:                       block;
	width:                         100%;
}

.FormOrganizationInformation .OrganizationContentArea {
	font-size:                     14px;
	line-height:                   18px;
	padding:                       7px 0 5px;
}

.FormOrganizationInformation .OrganizationTitle {
	--Typeface-FontWght:           700;
	font-weight:                   var(--Typeface-FontWght);
}

/*
Create Account Checkbox — Sketch "Checkbox/Selector" instance on Challenges - Accept.
.FormFieldForCheckBox (Base.css) already lays out the box beside the label; this is just
the two-line label content, read off the exported SVG (fontSize/fontWeight are null via
the JS API for these shared styles).
 */
.FormFieldForCreateAccount .FormFieldLabelText {
	display:                       flex;
	flex-direction:                column;
	gap:                           4px;
}

.CreateAccountCheckboxTitle {
	color:                         #ffffff;
	font-size:                     16px;
	font-weight:                   700;
	line-height:                   24px;
}

.CreateAccountCheckboxDescription {
	color:                         #ccd5e2;
	font-size:                     14px;
	font-weight:                   500;
	line-height:                   18px;
}

/*
Form Error Messages
 */
.FormErrorMessages {
	margin-block:                  -8px -28px;
}

/*
Form Buttons
 */
.ChallengeAcceptForm .FormButtons {
	margin-top:                    40px;
}

.ChallengeAcceptForm .FormSubmitButton {
	width:                         100%;
}