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

.PageContentInner h2 {
	font-family:                   var(--Typeface02-FontFamily);
	font-size:                     24px;
	font-variation-settings:       var(--Typeface02-FontVariationSettings);
	line-height:                   24px;
	margin:                        0 0 16px;
}

/*
Actions Row — back arrow and the Menu component, both .FEIconButton (Base.css). Same
negative-margin correction as CampaignDetail.css's .CampaignActionsArea.
 */
.OrganizationDetailActionsArea {
	align-items:                   center;
	display:                       flex;
	justify-content:               space-between;
	margin-bottom:                 24px;
	margin-inline:                 -8px;
}

.OrganizationDetailBackButtonIcon {
	background-color:              currentColor;
	mask:                          url("/Images/IconBackArrow.svg") no-repeat center / contain;
}

/*
Heading
 */
.OrganizationDetailHeadingArea {
	margin-bottom:                 24px;
}

.OrganizationDetailTitle {
	font-family:                   var(--Typeface02-FontFamily);
	font-size:                     32px;
	font-variation-settings:       var(--Typeface02-FontVariationSettings);
	line-height:                   32px;
	margin:                        0 0 8px;
}

.OrganizationDetailLink {
	color:                         var(--Colors-Brand-Primary);
	font-size:                     16px;
	font-weight:                   400;
	line-height:                   24px;
	word-break:                    break-word;
}

/* Base.css's a[target="_blank"]::after defaults to 0.833em, tuned for
   .NavigationLink's own font-size; this link needs its own fixed size. */
.OrganizationDetailLink[target="_blank"]::after {
	--AnchorTargetBlankIcon-Size:  16px;
}

/*
Logo — same white rounded card treatment as the browse listing's card art
(CSS/Listing.css's .ListingCardImageArea), so the two pages read as one system.
 */
.OrganizationDetailLogoArea {
	align-items:                   center;
	background-color:              #ffffff;
	border-radius:                 24px;
	display:                       flex;
	height:                        180px;
	justify-content:               center;
	margin-bottom:                 24px;
	overflow:                      hidden;
	padding:                       24px;
}

.OrganizationDetailLogo {
	max-height:                    100%;
	max-width:                     100%;
	object-fit:                    contain;
}

/*
Donate / Share mini buttons
 */
.OrganizationDetailButtonsArea {
	display:                       flex;
	gap:                           9px;
	margin-bottom:                 24px;
}

.OrganizationDetailMiniButton {
	flex:                          1 1 0;
	font-size:                     18px;
	min-height:                    40px;
	padding:                       0.25em 0.5em;
}

/*
Sketch's Mini Button - Primary is its own accent palette (Secondary Accent01 fill,
Accent02 border/text), not .FEButtonPrimary's white — Base.css has no shared class for
it yet, so this overrides tokens on top of .FEButtonPrimary the documented way (page CSS
loads after Base.css). Hover/focus-visible keep .FEButtonPrimary's own tokens; only the
resting state is confirmed against the Sketch frame.
 */
.OrganizationDetailButtonsArea .FEButtonPrimary {
	--ThisButton-BackgroundColor:  var(--Colors-Secondary-Accent01);
	--ThisButton-BorderColor:      var(--Colors-Secondary-Accent02);
	--ThisButton-Color:            var(--Colors-Secondary-Accent02);
}

/*
Overview
 */
.OrganizationDetailDescriptionArea {
	margin-bottom:                 40px;
}

.OrganizationDetailDescriptionArea p {
	font-size:                     14px;
	line-height:                   21px;
	margin:                        0;
}

/*
Raised — Component:Parameters component="TCOrganizationProvider" markup is JR's, copied
verbatim (LocalTemp/organizations-detail-page-raised-total-component-example.md); only
the surrounding rule/spacing is this page's own.
 */
.OrganizationRaised {
	border-bottom:                 1px solid #33588A;
	border-top:                    1px solid #33588A;
	margin-bottom:                 40px;
	padding:                       25px 0;
	text-align:                    center;
}

.OrganizationRaisedAmount {
	color:                         var(--Colors-Brand-Primary);
	display:                       block;
	font-family:                   var(--Typeface02-FontFamily);
	font-size:                     32px;
	font-variation-settings:       var(--Typeface02-FontVariationSettings);
	font-weight:                   700;
	line-height:                   32px;
	margin-bottom:                 8px;
}

/* Exact values read from the exported SVG (fontSize/fontWeight are null on the shared
   text style in the JS API — see LocalTemp for the sketch-gotchas export method):
   Poppins-Regular 16/24, #FFFFFF. Not var(--Typeface01-FontFamily) — this is Poppins
   (Typeface03), not the body default. */
.OrganizationRaisedLabel {
	color:                         #ffffff;
	font-family:                   var(--Typeface03-FontFamily);
	font-size:                     16px;
	font-weight:                   400;
	line-height:                   24px;
}

/*
Donate Now — Templates/DonationAmountEntry.tpl. Same .FormRowPledgeAmount family
CSS/CampaignDetail.css and CSS/ChallengeAccept.css each carry their own copy of; this
page's copy stands alone the same way.
 */
.OrganizationDetailDonateArea {
	margin-bottom:                 40px;
}

.OrganizationDetailDonateButton {
	width:                         100%;
}

.FormRowPledgeAmount {
	margin-bottom:                 48px;
}

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

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

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