:root {
	--clr-accent-400: #02715C;
	--clr-accent-100: #578E83;
	--clr-accent-300: #FFD249;
	

	--clr-primary-400: #020300;
	--clr-primary-100: #333333;

	--clr-neutral-100:#FFFFFF;
	--clr-neutral-200:#F3F2E8;
	--clr-neutral-900:#FDFBF8;

	--ff-primary:"Be Vietnam Pro", sans-serif;
	--ff-secondary:"Bellefair", serif;

	--ff-body:var(--ff-primary);
	--ff-heading: var(--ff-primary);
	--ff-page-heading: var(--ff-secondary);

	--fw-regular: 400;
	--fw-semi-bold: 500;
	--fw-bold: 700;

	--fs-200: .875rem; /*14px*/
	--fs-300: 1rem; /*16px*/
	--fs-400: 1.125rem; /*18px*/
	--fs-500: 1.25rem; /*20px*/
	--fs-600: 2.188rem; /*35px*/
	--fs-700: 2.5rem; /*40px*/
	--fs-800: 5rem; /*65px*/

	--fs-body: var(--fs-400);
	--fs-primary-heading:var(--fs-800);
	--fs-secondary-heading:var(--fs-500);
	--fs-page-heading:var(--fs-500);
	--fs-nav: var(--fs-500);
	--fs-button: var(--fs-500);

	--size-100: .25rem;
	--size-200: .5rem;
	--size-300: .75rem;
	--size-400: 1rem;
	--size-500: 1.5rem;
	--size-600: 2rem;
	--size-700: 3rem;
	--size-800: 4rem;
	--size-900: 5rem;
}

@media (max-width:51em) {
	:root {
		--fs-body: var(--fs-300);
		--fs-primary-heading:var(--fs-700);
		--fs-secondary-heading:var(--fs-500);
		--fs-nav: var(--fs-400);
	}
}
/* Box sizing rules */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Remove default margin */

* {
	margin: 0;
	padding: 0;
	font: inherit;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
	list-style: none;
}

/* Set core root defaults */
html:focus-within {
	scroll-behavior: smooth;
}

html,
body {
	min-height: 100%;
}
/* Set core body defaults */
body {
	text-rendering: optimizeSpeed;
	line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
	text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture,
svg {
	max-width: 100%;
	display: block;
}


/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
	html:focus-within {
	scroll-behavior: auto;
	}
	
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

section {
  scroll-margin-top: 6rem; /* match header height */
}

/*yellow backgound*/
main > section {
	position: relative;
	isolation: isolate;
}

.yellow-bg {
	position: absolute;
	z-index: -1;
	top: -8rem;
	right: 0;
	width: 51vw;
	min-height:90%;
	background: var(--clr-accent-300);
}

.yellow-nav {
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
	width: 51vw;
	min-height: 100%;
	background: var(--clr-accent-300);
}

@media (max-width: 47em) {
	.yellow-nav, 
	.yellow-bg {
		display: none;
	}
}

/*Utility classes*/
.visually-hidden {
	position: absolute;
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0,0,0,0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.text-primary-400 {
	color:var(--clr-primary-400)
}
.text-accent-400 {
	color:var(--clr-accent-400)
}
.text-accent-100 {
	color:var(--clr-accent-100)
}
.text-accent-300 {
	color:var(--clr-accent-300)
}
.text-neutral-100 {
	color:var(--clr-neutral-100)
}
.text-neutral-200 {
	color:var(--clr-neutral-200)
}

.bg-primary-400 {
	background-color:var(--clr-primary-400)
}
.bg-primary-100 {
	background-color:var(--clr-primary-100)
}
.bg-accent-400 {
	background-color:var(--clr-accent-400)
}
.bg-accent-100 {
	background-color:var(--clr-accent-100)
}
.bg-accent-300 {
	background-color:var(--clr-accent-300)
}
.bg-neutral-100 {
	background-color:var(--clr-neutral-100)
}
.bg-neutral-200 {
	background-color:var(--clr-neutral-200)
}

.fw-bold {font-weight: var(--fw-bold)}
.fw-semi-bold {font-weight: var(--fw-semi-bold)}
.fw-regular {font-weight: var(--fw-regular)}

.ff-secondary { font-family: var(--ff-secondary);}

.fs-primary-heading {
	font-size: var(--fs-primary-heading);
	line-height: 1.2;
}
.fs-secondary-heading {
	font-size: var(--fs-secondary-heading);
	line-height: 1.1;
}
.fs-page-heading {
	font-size: var(--fs-page-heading);
}

.fs-300 {font-size: var(--fs-300)}
.fs-400 {font-size: var(--fs-400)}
.fs-500 {font-size: var(--fs-500)}
.fs-600 {font-size: var(--fs-600)}

.block {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 30px;
}

.padding-block-500 {
	padding-block: var(--size-500);
}

.padding-block-700 {
	padding-block: var(--size-700);
}

.padding-block-900 {
	padding-block: var(--size-900);
}

.padding-block-txt {
	padding: var(--size-700);
}

.padding-txt {
	padding:0 var(--size-700);
}
.padding-txt-top {
	padding: var(--size-300) var(--size-700) 0 var(--size-700);
	
}
.padding-top {
	padding: var(--size-700) 0;
	
}

.mx-auto {
	margin-inline: auto;
}

.container {
	--max-width: 1370px;
	--padding: 1rem;

	width: min(var(--max-width), 100% - var(--padding) * 2);
	margin-inline: auto;
}

.even-columns {
	display: grid;
	gap: 2rem;
}

@media (min-width: 47em) {
	.even-columns {
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
	}
	.container {
		--max-width: 1300px;
		--padding: 1rem;
		width: min(var(--max-width), 100% - var(--padding) * 4);
	}
}

.justify-self-center {
	justify-self: center;
}

.justify-self-end {
	justify-self: end;
}

.justify-self-start {
	justify-self: start;
}

.vertical-align-center {
	align-items: center;
}

.flow > *+*{
	margin: var(--flow-spacer, 3em) 0;
}

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

.text-center p {
	margin-inline: auto;
}

@media (max-width: 49em) {
	.text-center-sm-only {
		text-align: center;
	}
	.text-center-sm-only p {
		margin-inline: auto;
	}
}

.bkg-green-img {
	background-color: var(--clr-accent-400);
	padding:50px 0;
}

.bkg-text {
	background-color: var(--clr-neutral-200);
	padding:50px 25px;
}

/* general styling */

body {
	font-size: var(--fs-400);
	font-family: var(--ff-body);
	color: var(--clr-primary-400);
}

@media (max-width: 50em ){
	body {
		font-size: var(--fs-300);
	}
}

p {
	opacity: 0.7;
	max-width: 40ch;
}

p[data-width="wide"] {
	max-width: 90%;
}


/* button */
.button {
	cursor: pointer;
	text-decoration: none;
	border:0;
	padding: 1.25em 2.25em;
	font-weight: var(--fw-semi-bold);
	font-size: var(--fs-button);
	line-height: 1;
	color: var(--clr-neutral-100);
	background-color: var(--clr-accent-400);
	box-shadow: 0 1.25em 1em -1em var(--clr-accent-100);
}

.contact-btn {
	padding: 0.75em 1.5em;
}

.button[data-type="inverted"] {
	color: var(--clr-accent-400);
	background-color: var(--clr-neutral-200);
}

.button:hover,
.button:focus-visible {
	background-color: var(--clr-accent-100);
}

.button[data-type="inverted"]:hover,
.button[data-type="inverted"]:focus-visible {
	background-color: var(--clr-neutral-100);
	color: var(--clr-accent-100);
}

@media (max-width: 47em) {
	.button {
		padding: 0.75em 1.50em;
	}
}
/* navication */

.primary-header,
.primary-header * {
	transition: box-shadow 500ms cubic-bezier(0.33, 1, 0.68, 1);
}

.primary-header.sticking {
	background: var(--clr-accent-300);
	box-shadow: hsla(0 0% 0% / 0.1) 0 0.5rem 1rem;
	transition-duration: 400ms;
}

.primary-header {
	isolation: isolate;
	padding: var(--size-700) 0;
	position: sticky;
	top: 0;
	z-index: 99;
}

.nav-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.mobile-nav-toggle{
	display: none;
}

.nav-list {
	display: flex;
	align-items: center;
	justify-items: center;
	gap: clamp(var(--size-400), 5vw, var(--size-900));
	font-size: var(--fs-nav);
	font-weight: var(--fw-semi-bold);
}

.nav-list a:hover,
.nav-list a:focus {
	color: var(--clr-accent-400);
}
.nav-list li a.contact-btn:hover,
.nav-list li a.contact-btn:focus {
	color: var(--clr-neutral-100)
}

/* TODO - maybe remover this later */
.footer-nav {
	columns: 2;
	gap: clamp(var(--size-200), 30vw, var(--size-900));
}

.primary-footer-nav {
	align-self: center;
}

.footer-nav a {
	color: var(--clr-neutral-100);
	text-decoration: none;
}

.footer-nav a:where(:hover, :focus) {
	color: var(--clr-accent-300);
}

/* social list */
.social-list {
	display: flex;
	gap: var(--size-400);
	padding-top: var(--size-300);
}

.social-icon {
	min-width: var(--size-600);
	aspect-ratio: 1;
	fill:var(--clr-neutral-200)
}

.social-list a:is(:hover, :focus) .social-icon {
	fill: var(--clr-accent-300);
}

.primary-footer-wrapper {
	display: grid;
	gap: var(--size-700);
	grid-template-areas: 
	'nav'
	'logo-social'
	'copyright';
}

.primary-footer-logo-social {
	grid-area: logo-social;
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: var(--size-500)
}

.primary-footer-nav {
	grid-area: nav;
}
.primary-footer-copyright {
	grid-area: copyright;
	align-self: center;
}

@media (min-width: 50rem) {
	.primary-footer-wrapper {
		grid-template-areas:
		'logo-social nav copyright';
	}
	.primary-footer-logo-social {
		flex-direction: column;
		align-items: start;
		justify-content: space-evenly;
		gap: var(--size-400);
	}
}


@media (max-width:51em) {
	.primary-footer-wrapper > * {
		margin-inline: auto;
	}

	.social-list {
		display: flex;
		gap: var(--size-600);
		padding-top: var(--size-300);
	}
	.social-icon {
		width: var(--size-500);
	}
	.footer-nav {
		columns: 1;
		justify-content: center;
	}
	
	.footer-nav ul {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.primary-footer-copyright {
		font-size: var(--size-300);
	}
}

@media (max-width: 51em) {
	.primary-header[data-overlay] {
		position: relative;
		z-index: 999;
	}

	.primary-navigation { 
		display: none;
		position: fixed;
		padding: var(--size-700);
		margin-inline: auto;
		inset: 7rem var(--size-400);
		max-width: 25rem;
		max-height: 30rem;
		background: var(--clr-neutral-200);
		box-shadow: 0 0 0.75em var(--clr-primary-100);
	}

	.primary-header[data-overlay]::before {
		content: '';
		position: fixed;
		inset: 0;
		background-image: linear-gradient( rgb(0 0 0 /0 ), rgb(0 0 0/0.8));
	}

	.nav-list {
		display: grid;
		gap: var(--size-600);
		text-align: center;
		font-weight: var(--fw-bold);
	}

	.primary-navigation[data-visible] {
		display: block;
	}

	.mobile-nav-toggle{ 
		display: block;
		position: fixed;
		top: var(--size-600);
		right: var(--size-400);
		cursor: pointer;
		background: transparent;
		border: 0;
		padding: 0.5em;
		width: 1.65rem;
		height: 1.65rem;
		
		background-image: url(./img/menu-open.svg);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}
	.mobile-nav-toggle[aria-expanded="true"] {
		background-image: url(./img/menu-close.svg);
		background-color: var(--clr-accent-300)
	}
}
/*numbered  list*/
.numbered-items,
.list-items {
	counter-reset: count;
}

.numbered-items li,
.list-items li {
	counter-increment: count;
}

.numbered-items div,
.list-items li {
	display: grid;
	align-items: center;
	column-gap: var(--size-400);
	grid-template-columns: min-content 1fr;
}

.numbered-items__body {
	grid-column: 1 / -1;
}

@media (min-width: 30em) {
	.numbered-items__body {
	grid-column: 2 / -1;
}
}
.numbered-items div::before {
	content: "0" counter(count);
	background-color: var(--clr-accent-300);
	color: var(--clr-primary-400);
	font-weight: var(--fw-bold);
	padding: var(--size-200) var(--size-500);
}

.list-items li::before {
	content: "";
	background-color: var(--clr-primary-100);
	padding: var(--size-100);
}

/* footer navigation */

.intro-img {
	max-width: 592px;
	justify-self: end;
	z-index: 1;
}

@media (max-width: 47em) {
	.intro-img {
		justify-self: center;
	}
	.envelope {
		justify-self: center;
	}
}

.for-churches-img {
	max-width: 421px;
}

.img-no-bck {
	max-width: 627px;
}

.img-with-bck {
	max-width: 509px;
	justify-self: center;
}

.yellow-img {
	background-image: url(
		'img/yellow.jpg'
	);
}

.green-img {
	background-image: url('img/forest1.jpg');
}


/* form */
input,
button,
select,
textarea {
	font: inherit;
}

form {
	display: grid;
	gap: var(--fs-300);
	@media (width > 720px) {
		grid-template-columns: repeat(2, 1fr);
	}
}

.form-group {
	display: grid;
	gap: 0.5cap;
}

.span-all {
	grid-column: 1 / -1;
}

label {
	text-transform: uppercase;
	font-size: var(--fs-300);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

input {
	background: var(--clr-neutral-200);
	color: var(--text-1);
	border:1px solid var(--padding);
	padding: 1ex 2ex;
	accent-color: var(--clr-accent-300);
	
}

input:not([type="checkbox"], [type="radio"]) {
	width: 100%;
}

.form-group:has(.fine-print) {
	grid-column: 1 / -1;
	display: flex;
	gap: 0.5ch;
}

input:has([type="checkbox"]) {
	@media (width < 720px) {
		margin-bottom: 15px;
	}
}
.contact-form button {
	justify-self: start;
}

label {
	text-transform: uppercase;
	font-size: var(--fs-300);
}

.fine-print {
	font-size: var(--fs-200  );
	text-transform: revert;
	line-height: 1.4;
}

.contact-form {
	display: grid;
	gap: 1rem;
/* 
	background-color: var(--clr-primary-100); */
	padding: 3rem;
	border-radius: 24px;
	width: min(100% - 4rem, 1200px);
	margin-inline: auto;
}

.form-message {
	margin-top: 1rem;
	font-weight: var(--ff-body);
}

.form-message.success {
	color: var(--clr-accent-400)
}

.form-message.error {
	color: #c62828;
}