/* 1. Variables/design tokens */
:root {
	--primary-color: #173658;
	--accent-color: #B34949;
	--accent-color-2: #C7DC36;
	--accent-color-3: #56D6EB;
	--accent-color-3-light: #F2F9F6;
	--neutral-color: #fefefe;
	--teal-color: #167487;
	--page-color: #fefefa;
	--text-color: #34393f;
	--nav-color: #222830;
	--border-color: #def0f0;
	--heading-color: var(--accent-color);
	--link-color: var(--primary-color);
	--heading-font: "Roboto Slab", Georgia, serif;
	--body-font: "Inter", sans-serif;
	--base-font-size: 16px;
	--shell-width: min(83.333%, 1440px);
	--inner-width: 84%;
	--column-gap: 7%;
	--space-xs: .25rem;
	--space-sm: .5rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--section-padding: var(--space-xl);
	--radius-sm: 4px;
	--button-background: var(--accent-color);
	--button-color: #ffffff;
	--control-color: #222;
	--pico-font-family: var(--body-font);
	--pico-font-size: var(--base-font-size);
	--pico-background-color: var(--page-color);
	--pico-color: var(--text-color);
	--pico-primary: var(--primary-color);
	--pico-border-radius: var(--radius-sm);
}

/* 2. Base/global styles */
html {
	scroll-behavior: smooth;
}

body {
	background: var(--page-color);
	color: var(--text-color);
}

figure {
	margin: 0;
}

/* 3. Layout */
.site-shell,
.inner {
	margin-inline: auto;
}

.inner {
	width: var(--inner-width);
}

.section-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--column-gap);
	align-items: center;
}

.section-single {
	text-align: center;
}

/* 4. Typography */
body {
	font: 400 clamp(1rem, .95rem + .2vw, 1.125rem)/1.5 var(--body-font);
}

h1,
h2,
h3 {
	margin: 0;
	padding: 0;
	color: var(--heading-color);
	font-family: var(--heading-font);
	font-weight: 700;
	letter-spacing: 0;
}

h1 {
	font-size: clamp(2rem, 1.35rem + 2.4vw, 3.5rem);
	line-height: 1.15;
	margin-bottom: clamp(.75rem, .5rem + 1vw, 1.5rem);
	text-align:center;
	padding-bottom:.4em;
}

h2 {
	font-size: clamp(1.5rem, 1.3rem + .65vw, 1.8rem);
	line-height: 1.25;
	margin-bottom: clamp(.5rem, .35rem + .5vw, 1rem);
}

h3 {
	font-size: clamp(1.25rem, 1.1rem + .5vw, 1.375rem);
	line-height: 1.3;
	margin-bottom: var(--space-sm);
}

p {
	margin: 0;
	padding: 0;
	color: inherit;
	font-size: inherit;
	line-height: 1.5;
	letter-spacing: 0;
}

p + p {
	margin-top: var(--space-md);
}

.lead {
	font-size: clamp(1.0625rem, .99rem + .3vw, 1.2rem);
	line-height: 1.45;
	color: #585858;
}

ul,
ol {
	margin: 0 0 var(--space-md);
	padding-left: var(--space-lg);
}

li {
	margin: 0;
	padding: 0;
	line-height: 1.5;
}

/* 5. Shared components */
a {
	color: var(--link-color);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

button,
button[type],
input[type="submit"],
input[type="button"],
input[type="reset"],
.button {
	display: inline-block;
	width: auto;
	padding: var(--button-padding, var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal));
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--button-background);
	color: var(--button-color);
	text-align: center;
}

.button--donate {
	--button-background: var(--accent-color);
	--button-color: var(--page-color);
	--button-padding: var(--space-xs) var(--space-md);
}

.form-control {
	background: var(--page-color);
	border: 0;
	color: var(--control-color);
}

img {
	display: block;
	width: 100%;
}

.section-image img {
	object-fit: cover;
	aspect-ratio: 1.45;
}

.hero-panel,
.newsletter,
.site-footer {
	--heading-color: var(--page-color);
	--link-color: var(--page-color);
	color: var(--page-color);
}

.steps-accordion {
	--pico-primary: var(--primary-color);
	--pico-accordion-close-summary-color: var(--primary-color);
	--pico-accordion-open-summary-color: var(--primary-color);
	--pico-accordion-active-summary-color: var(--primary-color);
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	width: 100%;
	max-width: 800px;
	justify-self:center;
}

.steps-accordion details {
	margin: 0;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
}

.steps-accordion details:nth-child(odd):not([open]) {
	background-color: var(--accent-color-3-light);
}

.steps-accordion details:nth-child(even):not([open]) {
	background-color: var(--neutral-color);
}

.steps-accordion details[open] {
	--pico-primary: var(--teal-color);
	--pico-accordion-open-summary-color: var(--teal-color);
	--pico-accordion-active-summary-color: var(--teal-color);
	background-color: #ffffff;
	border-color: #A0CED4;
	color: var(--text-color);
}

.steps-accordion summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding: var(--space-md);
	font-weight: 500;
	line-height:1.5rem;
	color:var(--primary-color);
}

.steps-accordion details[open] > summary {
	background-color: #ffffff;
	color: var(--teal-color);
}

.steps-accordion p {
	padding: 0 var(--space-md) var(--space-md);
}

.social-links {
	display: flex;
	gap: 7px;
	align-items: center;
}

.social-links a {
	line-height: 1;
}

.social-links a[aria-label="YouTube"] {
	font-size: .7rem;
}

/*.figma-mark {
	display: grid;
	grid-template-columns: repeat(2, 7px);
	grid-template-rows: repeat(3, 7px);
	width: 14px;
	height: 21px;
}

.figma-mark span {
	border: 1.5px solid currentColor;
}

.figma-mark span:nth-child(1),
.figma-mark span:nth-child(3) {
	border-radius: 5px 0 0 5px;
}

.figma-mark span:nth-child(2) {
	border-radius: 0 5px 5px 0;
}

.figma-mark span:nth-child(4) {
	border-radius: 50%;
}

.figma-mark span:nth-child(5) {
	border-radius: 5px 0 5px 5px;
}*/

/* 6. Header/navigation */
.site-header {
	height: 120px;
	border-bottom: 1px solid var(--border-color);
}

.site-header .inner {
	height: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: var(--shell-width);
}

.brand {
	display: inline-flex;
	align-items: center;
	flex: none;
}

.brand-mark {
	width: 82px;
	height: 82px;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: var(--column-gap);
}

.site-nav a:not(.button) {
	color: var(--nav-color);
	padding: var(--space-xs) 2px;
}

.site-nav a[aria-current="page"] {
	border-radius: var(--radius-sm);
	padding-inline: 5px;
}

.site-nav .button {
	min-width: 94px;
	margin-left: 4px;
}

/* 7. Page sections */
.hero {
	border-bottom: 1px solid var(--border-color);
}

.hero-image {
	min-height: 210px;
	padding: 2.5em;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #edf1f0 url("https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=1400&q=85") center 48% / cover no-repeat;
}

.hero-panel {
	width: 92%;
	max-width: 1200px;
	margin: clamp(2rem, 1rem + 2vw, 4rem) auto;
	padding: clamp(1rem, .5rem + 1.7vw, 2rem);
	background: var(--primary-color);
}

.hero p {
	margin: 0 auto;
	font-size: clamp(1.0625rem, .94rem + .6vw, 1.5rem);
	line-height: 1.45;
	font-weight: 300;
	max-width: 80ch;
}

.section {
	min-height: 259px;
	padding-block: var(--section-padding);
	max-width: var(--shell-width);
	margin-inline: auto;
}

.section + .section {
	border-top: 3px solid var(--border-color);
}

.newsletter {
	min-height: 135px;
	display: grid;
	align-items: center;
	padding: var(--section-padding) var(--space-lg);
	background: var(--teal-color);
}

.newsletter form {
	display: flex;
	justify-content: center;
	gap: var(--space-sm);
	margin: var(--space-md) 0 0;
}

.newsletter input {
	/*width: 133px;*/
	max-width: 450px;
}

/* 8. Footer */
.site-footer {
	min-height: 228px;
	padding: var(--space-lg) 0;
	background: var(--primary-color);
}

.footer-grid {
	display: grid;
	gap: var(--space-xl);
}

.footer-social {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.footer-links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-sm);
}

/* 9. Responsive styles */
@media (max-width: 600px) {
	.inner {
		width: min(88%, 440px);
	}

	.section-grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.site-header {
		height: auto;
		min-height: 88px;
	}

	.site-header .inner {
		padding-block: var(--space-md);
		gap: var(--space-md);
	}

	.brand-mark {
		width: 60px;
		height: 60px;
	}

	.site-nav {
		gap: 8px;
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	.site-nav .button {
		min-width: 68px;
		margin-left: 0;
	}

	.hero-image {
		min-height: 280px;
	}

	.section-copy {
		padding: var(--space-md);
	}

	.footer-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 26px var(--space-md);
	}

	.footer-social {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: center;
		gap: 14px;
	}
}

@media (max-width: 380px) {
	.site-header .inner {
		flex-wrap: wrap;
		justify-content: center;
	}

	.site-nav {
		width: 100%;
		justify-content: center;
	}

	.footer-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}