/*
 * FLO — Donate: the routes, "Giving directly to FLO" (amounts, PayPal,
 * offline, enquiry form) and the giving partners.
 * Values from design/source/Donate.dc.html.
 */

/* ---- Hero ---- */

.p-donate-hero {
	padding: 76px var(--gutter) 88px;
}

.p-donate-hero .c-glow--top {
	top: -320px;
	width: 900px;
	height: 900px;
	background: radial-gradient(circle, rgba(245, 163, 4, .14), transparent 62%);
}

.p-donate-hero .c-hero-navy__eyebrow {
	font-size: 12px;
	letter-spacing: .22em;
}

.p-donate-hero .c-hero-navy__title {
	margin-top: 18px;
	font-size: clamp(34px, 4.8vw, 60px);
	letter-spacing: -.03em;
}

.p-donate-hero .c-hero-navy__lead {
	max-width: 58ch;
	line-height: 1.6;
}

/* ---- Routes ---- */

.p-rcards-sec {
	padding: 56px var(--gutter) 20px;
}

.p-rcards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	align-items: stretch;
}

.p-rcard {
	display: flex;
	flex-direction: column;
	padding: 30px 32px 32px;
	border: 1.5px solid var(--line);
	border-radius: 24px;
	background: var(--white);
	box-shadow: 0 26px 56px -46px rgba(0, 27, 66, .45);
	color: inherit;
	text-decoration: none;
	transition: border-color .22s, transform .22s, box-shadow .22s;
}

.p-rcard:hover {
	border-color: var(--gold-text);
	transform: translateY(-4px);
	box-shadow: 0 34px 66px -42px rgba(0, 27, 66, .5);
	color: inherit;
}

.p-rcard--direct {
	border-color: var(--navy);
	background: var(--navy);
	box-shadow: 0 26px 56px -42px rgba(0, 27, 66, .7);
}

.p-rcard--direct:hover {
	border-color: var(--navy);
	box-shadow: 0 34px 66px -40px rgba(0, 27, 66, .75);
}

.p-rcard__label {
	font-weight: 700;
	font-size: 11px;
	line-height: 1;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--muted-2);
}

.p-rcard__region {
	margin-top: 9px;
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-weight: 800;
	font-size: clamp(26px, 2.6vw, 32px);
	line-height: 1.02;
	letter-spacing: -.025em;
	color: var(--navy);
}

.p-rcard__note {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 11px;
	font-weight: 700;
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--gold-text);
}

.p-rcard__dot {
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.p-rcard__logo {
	display: flex;
	align-items: center;
	height: 82px;
	margin-top: 22px;
	padding: 12px 18px;
	border: 1px solid #F0EBE1;
	border-radius: 15px;
	background: var(--paper);
}

.p-rcard__logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}

.p-rcard__text {
	margin-top: 18px;
	font-size: 15px;
	line-height: 1.62;
	color: var(--muted);
}

.p-rcard__text strong {
	color: var(--navy);
}

/* the partner's tax note: small print under the route text (WP-06b) */
.p-rcard__tax {
	display: block;
	margin-top: 12px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--muted);
}

.p-rcard__spacer {
	flex: 1;
	min-height: 22px;
}

.p-rcard__btn {
	align-self: stretch;
	padding: 14px 24px;
	border-radius: var(--r-pill);
	background: var(--gold);
	font-weight: 700;
	font-size: 13.5px;
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: center;
	color: var(--navy);
}

/* "Donate via kleine herzen": the partner's name stays lowercase and italic (CLAUDE.md; WP-10b, answer 34) */
.p-rcard__btn em {
	text-transform: none;
}

.p-rcard--direct .p-rcard__label {
	color: rgba(255, 255, 255, .55);
}

.p-rcard--direct .p-rcard__region {
	color: var(--paper);
}

.p-rcard--direct .p-rcard__note {
	color: var(--gold);
}

.p-rcard--direct .p-rcard__logo {
	border-color: rgba(255, 255, 255, .14);
	background: rgba(255, 255, 255, .07);
}

.p-rcard--direct .p-rcard__text {
	color: rgba(255, 255, 255, .75);
}

/* ---- Giving directly: hidden until opened (route card or /donate/#direct) ---- */

.p-direct-sec {
	padding: 40px var(--gutter) 96px;
}

.p-direct {
	display: none;
}

#direct:target .p-direct {
	display: block;
}

.p-direct__top {
	padding: clamp(32px, 4vw, 48px) clamp(26px, 3.4vw, 48px) clamp(30px, 3.6vw, 42px);
	border-radius: 30px 30px 0 0;
	background: var(--navy);
	color: var(--paper);
}

.p-direct__eyebrow {
	letter-spacing: .2em;
}

.p-direct__title {
	margin: 14px 0 0;
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-weight: 800;
	font-size: clamp(28px, 3.4vw, 42px);
	line-height: 1.03;
	letter-spacing: -.025em;
	color: var(--paper);
}

.p-direct__lead {
	max-width: 62ch;
	margin: 14px 0 0;
	font-size: 16.5px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .78);
}

.p-dtiers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
	gap: 18px;
	align-items: stretch;
	margin-top: 34px;
}

.p-dtier {
	display: flex;
	flex-direction: column;
	padding: 24px;
	border: 1.5px solid rgba(255, 255, 255, .14);
	border-radius: 20px;
	background: rgba(255, 255, 255, .05);
}

.p-dtier__badge {
	align-self: flex-start;
	margin-bottom: 13px;
	padding: 6px 12px;
	border-radius: var(--r-pill);
	background: var(--gold);
	font-weight: 700;
	font-size: 10px;
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--navy);
}

.p-dtier__row {
	display: flex;
	align-items: baseline;
	gap: 9px;
}

.p-dtier__amount {
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-weight: 800;
	font-size: clamp(30px, 3vw, 38px);
	line-height: .9;
	letter-spacing: -.03em;
	color: var(--gold);
}

.p-dtier__per {
	font-weight: 700;
	font-size: 10.5px;
	line-height: 1;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}

.p-dtier__title {
	margin-top: 18px;
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.2;
	color: var(--paper);
}

.p-dtier__text {
	margin: 9px 0 0;
	font-size: 14px;
	line-height: 1.58;
	color: rgba(255, 255, 255, .7);
}

.p-dproject {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 26px;
	margin-top: 18px;
	padding: 22px 26px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 20px;
	background: rgba(255, 255, 255, .05);
}

.p-dproject__main {
	flex: 1 1 320px;
	min-width: 250px;
}

.p-dproject__title {
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-weight: 700;
	font-size: 18px;
	line-height: normal;
	color: var(--paper);
}

.p-dproject__text {
	margin: 6px 0 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .7);
}

.p-dproject__hint {
	flex: none;
	max-width: 34ch;
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .72);
}

.p-dproject__hint strong {
	font-weight: 700;
	color: var(--paper);
}

.p-direct__bottom {
	padding: clamp(32px, 4vw, 48px) clamp(26px, 3.4vw, 48px);
	border: 1px solid var(--line);
	border-top: 0;
	border-radius: 0 0 30px 30px;
	background: var(--white);
	box-shadow: 0 40px 86px -60px rgba(0, 27, 66, .5);
}

/* The form comes first in the markup (it is first in the reading and Tab
   order, WCAG 2.4.3) and sits on the left; the design reached the same
   picture with row-reverse and the aside first in the source. */
.p-direct__split {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 26px clamp(28px, 4vw, 52px);
}

.p-direct__aside {
	flex: 1 1 330px;
	min-width: 284px;
	max-width: 520px;
}

/* PayPal */
.p-paypal {
	padding: 28px 30px;
	border: 1.5px dashed #D8CEB6;
	border-radius: 22px;
	background: #FCFBF8;
}

.p-paypal__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
}

.p-paypal__title {
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-weight: 800;
	font-size: 19px;
	line-height: normal;
	white-space: nowrap;
	color: var(--navy);
}

.p-paypal__soon {
	flex: none;
	padding: 6px 12px;
	border-radius: var(--r-pill);
	background: #F1EDE3;
	font-weight: 700;
	font-size: 10.5px;
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted-2);
}

.p-paypal__text {
	margin: 12px 0 0;
	font-size: 14.5px;
	line-height: 1.62;
	color: var(--muted);
}

.p-paypal__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	margin-top: 18px;
	border-radius: var(--r-pill);
	background: #EFEADF;
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	color: var(--muted-2);
}

.p-paypal__btn {
	margin-top: 18px;
}

/* Offline */
.p-offline {
	margin-top: 16px;
	padding: 24px 26px;
	border: 1px solid #EBE4D6;
	border-radius: 20px;
	background: var(--cream);
}

.p-offline__title {
	font-weight: 700;
	font-size: 11px;
	line-height: 1;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--muted-2);
}

.p-offline__text {
	margin: 10px 0 0;
	font-size: 14.5px;
	line-height: 1.62;
	color: var(--text);
}

.p-offline__contact {
	margin-top: 12px;
	font-weight: 700;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--navy);
}

.p-offline__mail {
	color: inherit;
	text-decoration: none;
	border-bottom: 1.5px solid rgba(245, 163, 4, .5);
}

.p-offline__mail:hover {
	color: var(--gold-text);
}

.p-offline__phone {
	font-weight: 600;
	color: var(--muted);
}

.p-offline__hint {
	margin-top: 7px;
	font-weight: 500;
	font-size: 12px;
	line-height: 1.5;
	color: var(--muted-2);
}

/* Enquiry form */
.p-enquiry {
	flex: 1 1 420px;
	min-width: 290px;
}

.p-enquiry__title {
	margin: 12px 0 0;
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-weight: 800;
	font-size: clamp(24px, 2.6vw, 30px);
	line-height: 1.06;
	letter-spacing: -.02em;
	color: var(--navy);
}

.p-enquiry__lead {
	max-width: 52ch;
	margin: 12px 0 0;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--muted);
}

.p-form {
	display: flex;
	flex-direction: column;
	gap: 17px;
	margin-top: 24px;
}

.p-form__pair {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 17px;
}

.p-form .c-label {
	line-height: 1;
	letter-spacing: .12em;
}

.p-form .c-label__optional {
	letter-spacing: 0;
	color: var(--muted-2);
}

.p-form .c-input,
.p-form .c-select,
.p-form .c-textarea {
	font-size: 15.5px;
	line-height: normal;
}

.p-form .c-textarea {
	min-height: 0;
}

.p-form__req {
	color: var(--gold-text);
}

.p-form__error {
	font-weight: 600;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--error);
}

/* a field with an error (the design: the border turns red) */
.p-form .c-input.is-invalid,
.p-form .c-select.is-invalid,
.p-form .c-textarea.is-invalid,
.p-form__check.is-invalid {
	border-color: var(--error);
}

.p-form .is-invalid:focus {
	box-shadow: 0 0 0 3px rgba(179, 38, 30, .12);
}

/* outcome of a submission (system-styled: not in the design) */
.p-form__status {
	margin: 0;
	font-weight: 600;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--muted-2);
}

.p-form__status.is-error {
	color: var(--error);
}

.p-form__fail {
	display: flex;
	gap: 14px;
	padding: 16px 18px;
	border: 1px solid #EBE4D6;
	border-radius: 14px;
	background: var(--cream);
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--navy);
}

.p-form__fail::before {
	content: "";
	flex: none;
	width: 3px;
	border-radius: 2px;
	background: var(--error);
}

.p-form__fail a {
	color: var(--navy-ink);
	border-bottom: 1.5px solid rgba(245, 163, 4, .5);
}

.p-form__btn.is-sending,
.p-form__btn:disabled {
	opacity: .6;
	cursor: default;
}

.p-form__check {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
}

.p-form__check input {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: var(--gold-text);
	cursor: pointer;
}

.p-form__check--news {
	padding: 13px 18px;
	border: 1px dashed #E7E1D5;
	border-radius: 14px;
	font-weight: 500;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--muted-2);
}

.p-form__check--consent {
	padding: 16px 18px;
	border: 1px solid #EFE9DD;
	border-radius: 14px;
	background: var(--paper);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.6;
	color: var(--muted);
}

.p-form__check--consent input {
	width: 19px;
	height: 19px;
}

.p-form__check--consent a {
	color: var(--navy-ink);
	text-decoration: none;
	border-bottom: 1.5px solid rgba(245, 163, 4, .5);
}

.p-form__check--consent a:hover {
	color: var(--gold-text);
}

.p-form__submit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 22px;
}

.p-form__btn {
	flex: none;
	padding: 16px 34px;
	font-size: 15.5px;
	line-height: 1.2;
	box-shadow: 0 18px 38px -18px rgba(245, 163, 4, .75);
}

.p-form__note {
	flex: 1 1 200px;
	font-weight: 600;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--muted-2);
}

.p-thanks {
	margin-top: 24px;
	padding: 34px 32px;
	border: 1px solid #EBE4D6;
	border-radius: 20px;
	background: var(--cream);
}

.p-thanks__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--gold);
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 24px;
	color: var(--navy);
}

.p-thanks__title {
	margin: 20px 0 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 24px;
	line-height: 1.1;
	color: var(--navy);
}

.p-thanks__text {
	max-width: 44ch;
	margin: 12px 0 0;
	font-size: 15.5px;
	line-height: 1.68;
	color: var(--text);
}

/* ---- Giving partners ---- */

.p-givers {
	padding: 88px var(--gutter) 96px;
}

.p-givers__head {
	max-width: 60ch;
}

.p-givers__eyebrow {
	font-size: 12px;
	letter-spacing: .2em;
}

.p-givers__title {
	margin: 16px 0 0;
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-weight: 800;
	font-size: clamp(28px, 3.4vw, 42px);
	line-height: 1.04;
	letter-spacing: -.025em;
	color: var(--navy);
}

.p-givers__lead {
	margin: 16px 0 0;
	font-size: 16.5px;
	line-height: 1.66;
	color: var(--text);
}

.p-givers__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: 22px;
	margin-top: 44px;
}

.p-giver {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line);
	border-radius: 24px;
	overflow: hidden;
	background: var(--white);
	box-shadow: 0 22px 50px -40px rgba(0, 27, 66, .35);
}

.p-giver__photo {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #EDE7DB;
}

.p-giver__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.p-giver__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 30px 32px 32px;
}

.p-giver__logo {
	display: block;
	align-self: flex-start;
	width: auto;
	height: 38px;
}

.p-giver__logo--tall {
	height: 52px;
}

.p-giver__region {
	margin-top: 20px;
	font-weight: 700;
	font-size: 11px;
	line-height: 1;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gold-text);
}

.p-giver__name {
	margin: 8px 0 0;
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-weight: 800;
	font-size: clamp(23px, 2.3vw, 28px);
	line-height: 1.04;
	letter-spacing: -.02em;
	color: var(--navy);
}

.p-giver__text {
	margin: 12px 0 0;
	font-size: 15px;
	line-height: 1.62;
	color: var(--text);
}

.p-giver__text strong {
	color: var(--navy);
}

.p-giver__spacer {
	flex: 1;
	min-height: 20px;
}

.p-giver__link {
	align-self: flex-start;
	margin-top: 18px;
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	color: var(--navy-ink);
	text-decoration: none;
}

.p-giver__link:hover {
	color: var(--gold-text);
}

/* ---- Responsive ---- */

@media (max-width: 768px) {
	.p-rcards,
	.p-dtiers,
	.p-givers__grid,
	.p-form__pair--stack {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

@media (max-width: 480px) {
	.p-form__pair {
		grid-template-columns: 1fr;
	}
}

/* 320px (WCAG reflow): the project block and the PayPal aside of the open
   panel keep their minimum widths down to 360px; below that they go fluid,
   otherwise the panel pushed the page 33px wider than the screen. */
@media (max-width: 360px) {
	.p-dproject {
		padding: 18px;
	}

	.p-dproject__main,
	.p-direct__aside,
	.p-enquiry {
		min-width: 0;
	}

	.p-dproject__hint {
		flex: 1 1 100%;
		max-width: 100%;
	}
}