/* 
Theme Name: GCF
Text Domain: GCF
Version: 1.0.1
Description: 2023 Website for GCF
Author: Joe Bloggs
Author URI: https://gcf.dev
*/
:root {
	--clr-primary-300: hsl(100, 76%, 50%);
	--clr-primary-400: hsl(119, 76%, 37%);
	--clr-primary-700: hsl(147, 100%, 17%);
	--clr-primary-900: hsl(114, 100%, 10%);

	--clr-neutral-100: hsl(0, 0%, 100%);
	--clr-neutral-200: hsl(0, 0%, 96%); /* f4f4f4 */
	--clr-neutral-300: hsl(0, 0%, 90%);
	--clr-neutral-400: hsl(0deg 0% 66.27%);
	--clr-neutral-600: hsl(0deg 0% 45.63%);

	--ff-primary: "Open Sans", sans-serif;
	--ff-secondary: "Montserrat", sans-serif;

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

	--fw-thin: 100;
	--fw-extra-light: 200;
	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semi-bold: 600;
	--fw-bold: 700;
	--fw-extra-bold: 800;

	--fs-100: 0.6875rem; /* 11px */
	--fs-200: 0.8125rem; /* 13px */
	--fs-300: 0.875rem; /* 14px */
	--fs-400: 0.9375rem; /* 15px */
	--fs-500: 1rem; /* 16px */
	--fs-600: 1.3125rem; /* 21px */
	--fs-700: 1.5625rem; /* 25px */
	--fs-800: 2.3125rem; /* 37px */
	--fs-900: 2.8125rem; /* 45px */

	--fs-body: var(--fs-500);
	--fs-primary-heading: var(--fs-700);
	--fs-section-heading: var(--fs-600);
	--fs-button: var(--fs-400);

	/* Divider Calculations

	--sd-margin: calc((100vw / 9) - (2 * (100vw / 10)));
	--sd-padding: calc(100vw / 10);
*/
	--sd-height: 7rem;
	--sd-margin: 0;
	--sd-padding: calc(var(--sd-height) / 2);
}

/* Utility Classes */

.highlight {
    background: hsl(0deg 100% 50% / 13%);
}

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

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

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

.text-primary-400 {
	color: var(--clr-primary-400);
}
.text-primary-900 {
	color: var(--clr-primary-900);
}

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

.fs-small {
	font-size: 0.9rem;
}

.fs-primary-heading {
	font-size: var(--fs-primary-heading);
}
.fs-section-heading {
	font-size: var(--fs-section-heading);
}
.fw-semibold {
	font-weight: var(--fw-semi-bold);
}
.fw-bold {
	font-weight: var(--fw-bold);
}
.fw-bolder {
	font-weight: var(--fw-bolder);
}
.grid {
	display: grid;
}
.flex {
	display: flex;
}
.flex-col {
	flex-direction: column;
}
.flex-row {
	flex-direction: row;
}
.justify-between {
	justify-content: space-between;
}
.justify-center {
	justify-content: center;
}
.justify-end {
	justify-content: flex-end;
}
.align-center {
	align-items: center;
}
.align-end {
	align-items: flex-end;
}
.col-reverse {
	flex-direction: column-reverse;
}
.h-full {
	min-height: 100%;
}
.w-full {
	min-width: 100%;
}
.hidden {
	display: none;
}
.relative {
	position: relative;
}
.w-100 {
	width: 100%;
}
.w-90 {
	width: 90%;
}
.p-1 {
	padding: 1rem;
}
.px-1 {
	padding-left: 1rem;
	padding-right: 1rem;
}
.py-1 {
	padding-top: 1rem;
	padding-bottom: 1rem;
}
.pr-1 {
	padding-right: 1rem;
}
.pl-1 {
	padding-left: 1rem;
}
.pt-1 {
	padding-top: 1rem;
}
.pb-1 {
	padding-bottom: 1rem;
}

.m-1 {
	margin: 1rem;
}
.mx-1 {
	margin-left: 1rem;
	margin-right: 1rem;
}
.mx-auto {
	margin-left: auto;
	margin-right: auto;
}
.my-auto {
	margin-top: auto;
	margin-bottom: auto;
}
.my-1 {
	margin-top: 1rem;
	margin-bottom: 1rem;
}
.mr-1 {
	margin-right: 1rem;
}
.ml-1 {
	margin-left: 1rem;
}
.mt-1 {
	margin-top: 1rem;
}
.mb-1 {
	margin-bottom: 1rem;
}
.text-center {
	text-align: center;
}

.gcf-gradient {
	background: linear-gradient(rgb(13, 76, 9), rgb(32, 127, 20));
}

/* 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 {
	height: 100%;
}

/* Set core body defaults */
body {
	text-rendering: optimizeSpeed;
	line-height: 1.3;
}

/* 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%;
	height: auto;
	display: block;
	margin: 0 auto;
}

/* 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;
	}
}

/* General Styles */

/* Mobile */
body {
	font-family: var(--ff-body);
	color: var(--clr-neutral-600);
	background-color: var(--clr-neutral-200);
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

main {
	/* background-color: rgba(255, 0, 0, 0.083); */
}

h1,
h2,
h3,
h4,
h5 {
	font-family: var(--ff-heading);
	padding-bottom: 0.25rem;
	letter-spacing: 0.25px;
	font-weight: bold;
	font-family: var(--ff-heading);
}

h1,
h2 {
	line-height: 1.2;
	font-weight: var(--fw-semi-bold);
	font-size: var(--fs-section-heading);
	color: var(--clr-primary-900);
}

h1 {
	letter-spacing: 1.6px;
	font-size: 3rem;
}

p {
	padding-bottom: 0.7rem;
	line-height: 1.5;
	/* overflow-wrap: anywhere; */
	word-break: break-word;
}

strong {
	font-weight: var(--fw-bold);
}

a:link,
a:visited {
	color: inherit;
}

a:link.button,
a:visited.button {
	color: var(--clr-neutral-100);
}

.blog-content ul {
	padding-left: 1rem;
}

/* Sections */
section {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

section > .container {
	z-index: 5;
}

section.awards-cta .container {
	padding: 4rem 0;
}

footer.waves-divider {
	padding-top: calc(var(--sd-padding) / 2);
	padding-bottom: calc(var(--sd-padding) / 2);
}

.waves-divider-alt {
	padding-top: var(--sd-padding);
	padding-bottom: var(--sd-padding);
}

/* Components */
.wave-z {
	z-index: 3;
	overflow: hidden;
}

.box {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: var(--clr-neutral-100);
	padding: 1.2rem 1rem 2rem;
	padding: 1.8rem 2rem 2rem;
	border-radius: 0.7rem;

	justify-content: center;
}

.box p {
	text-align: left;
	width: 100%;
}

.info-box-container {
	display: grid;
	gap: 2rem;
}

.info-box {
	text-align: left;
}

.text-container {
	padding: 1rem;
	max-width: 55ch;
}

.text-container h3 {
	padding-bottom: 1rem;
}

.section-icon-container {
	margin-left: auto;
	margin-right: auto;
	width: 3rem;
	height: 3rem;
	margin-bottom: 0.5rem;
}

.section-icon {
	width: 100%;
	height: 100%;
	z-index: 2;
}
/* Containers */
.container {
	--max-width: 1240px;
	--max-width: 960px;
	--max-width: 1000px;
	--container-padding: 5vw;
	margin: 0 auto;
	width: min(var(--max-width), 100% - (var(--container-padding) * 2));
}

.single-post-container {
	max-width: 750px;
}

.single-post-container h1 {
	letter-spacing: inherit;
}

.blog-nav-container a {
	text-decoration: none;
	font-family: var(--ff-secondary);
	color: var(--clr-neutral-400);
	font-weight: var(--fw-bold);
}

.blog-nav-container a:hover {
	color: var(--clr-primary-900);
}

/* Buttons */
.button,
.button-primary {
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	text-decoration: none;
	color: var(--clr-neutral-100);
	font-family: var(--ff-secondary);
	font-size: var(--fs-button);
	line-height: 1;
	font-weight: var(--fw-bold);
	padding: 0.5em 1.7em;
	border-radius: 0.5em;
	border: 2px solid;
	max-width: 400px;
	background-color: var(--clr-primary-400);
	border-color: var(--clr-primary-400);
}

.button:hover,
.button:focus-visible,
.button-primary:hover,
.button-primary:focus-visible {
	background: var(--clr-primary-700);
}

.button-secondary {
	background-color: transparent;
	border-color: var(--clr-neutral-100);
}

.button-secondary:hover,
.button-secondary:focus-visible {
	background: hsl(0deg 0% 100% / 20%);
}

.btn-readmore {
	font-family: var(--ff-secondary);
	text-decoration: none;
	font-weight: var(--fw-bold);
}

/* Social Icons */

.social-icon {
	min-height: 1rem;
	max-height: 1rem;
	max-width: 1rem;
	/* height: 1.1rem; */
	display: flex;
}

/* Navigation */
/* Primary Header */
.primary-header {
	width: 100%;
	position: absolute;
	top: 0rem;
	left: 0rem;
	/* padding-top: 1rem; */
	z-index: 20;
}

.nav-wrapper {
	padding-top: 1rem;
	display: flex;
	position: relative;
	justify-content: space-between;
	align-items: center;
	max-height: 30vh;
}

.mobile-nav-toggle {
	display: none;
	z-index: 3;
}

.mobile-nav-toggle-footer {
	display: none;
	position: relative;
	z-index: 4;
}

.nav-list {
	width: calc(100% - 120px);
	width: 100%;
	/* background-color: green; */
	display: flex;
	justify-content: space-between;
	align-items: center;
	/* display: -webkit-box; */
	font-family: var(--ff-secondary);
	font-weight: var(--fw-semi-bold);
	text-transform: uppercase;
}

.nav-list a {
	text-decoration: none;
	padding: 0.7rem 0.5rem;
	width: 100%;
}

.nav-list li {
	list-style: none;
}

.nav-list a:hover,
.nav-list a:focus {
	color: var(--clr-primary-400);
	color: hsl(125, 60%, 82%);
}

.top-nav {
	display: none;
}

.top-nav-list {
	font-family: var(--ff-secondary);
	font-size: var(--fs-200);
	display: flex;
	gap: clamp(1rem, 5vw, 1rem);
	align-items: center;
	justify-content: center;
}

.top-nav-list a {
	display: block;
}

.mobile-nav-account {
	display: inline;
}

/* Logo */
.logo {
	width: 90px;
	max-width: 20vh;
	height: auto;
	position: relative;
	z-index: 5;
}

/* Decorative Waves */

.wave-1 {
	background-image: url("/wp-content/themes/gcf/assets/images/wave_1.svg");
}
.wave-2 {
	background-image: url("/wp-content/themes/gcf/assets/images/wave_2.svg");
}
.wave-3 {
	background-image: url("/wp-content/themes/gcf/assets/images/wave_3.svg");
}
.wave-4 {
	background-image: url("/wp-content/themes/gcf/assets/images/wave_4.svg");
}
.wave-5 {
	background-image: url("/wp-content/themes/gcf/assets/images/wave_5.svg");
}
.wave-6 {
	background-image: url("/wp-content/themes/gcf/assets/images/wave_6.svg");
}

.wave-z {
	position: absolute;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* WP Block Resets */
.size-gcf-square-400 {
	padding: 0;
	margin: 0;
}

/* ** Page Sections ** */

/* Hero Section */
.hero {
	min-height: 100vh;
	background: var(--clr-primary-900);
}

.page .hero {
	min-height: 25rem;
	padding-top: 2rem;
}

.post .hero {
	min-height: 15rem;
	padding-top: 2rem;
}

.hero-image {
	background-image: url("/wp-content/themes/gcf/assets/images/bg_1.jpg");
	/* background-color: var(--clr-primary-400); */
	/* background-image: url("/wp-content/themes/gcf/assets/images/bg_1.webp"); */
	background-position: center;
	background-size: cover;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	animation: fade-in 1.5s ease-in-out forwards;
	opacity: 0;
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.hero-image::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(rgb(0 0 0 / 0.7), rgb(0 0 0 / 0.2));
	background-image: linear-gradient(rgb(0 37 71 / 0.9), rgb(0 0 0 / 0.2));
	background-image: linear-gradient(rgba(0, 31, 5, 0.9), rgb(0 0 0 / 0.5));

	mix-blend-mode: multiply;
	z-index: 10;
}

.hero .wave-1 {
	width: 40vw;
	height: 15%;
	bottom: 0;
	left: 0;
}

.hero .wave-2 {
	width: 50vw;
	height: 10%;
	top: 23%;
	right: 5%;
}

.hero > .container {
	 padding: 20vh 0;
}



.hero .button-group {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5rem;
	max-width: none;
}

.hero .button-group .button {
	max-width: none;
}

/**** HOME ****/
/* Welcome Section */



.home .welcome .container {
	/* background-color: rebeccapurple; */
	padding: 1rem 0 3rem;
}

.home  .welcome h2 {
	padding-bottom: 0.25rem;
	padding-bottom: 1rem;
}

.home .welcome .box {
	text-align: left;
	justify-content: center;
}

.home .welcome .image-container {
	margin: 0 auto;
	max-width: 75%;
}



/* image blur */

.blur {
	position: absolute;
	top:0;
	left:0;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 100%;
	z-index: 0;
	filter: blur(6px);
}

.blur::after {
	content: "";
	position: absolute;
	width: 100%;
	top:0;
	left: 0;
	height: 100%;
	background-image: linear-gradient(rgb(0 37 71 / 0.5), rgb(0 0 0 / 0.1));
    mix-blend-mode: multiply;
	background-repeat: no-repeat;
    background-size: cover;
}

/* custom image placeholder */

.photoholder {
	overflow: hidden;
}

.photoholder::after {
	background: url("/wp-content/themes/gcf/assets/images/photoholder_1_mask.png");
	background: url("/wp-content/themes/gcf/assets/images/placeholder-1.svg");
}

.flip-x {
	transform: scale(-1, 1);
}

.flip-y {
	transform: scale(1, -1);
}

.rotate-90 {
	transform: rotate(90deg);
}

.rotate-180 {
	transform: rotate(180deg);
}

.photoholder.flip::after {
	background: url("/wp-content/themes/gcf/assets/images/placeholder-1-flip.svg");
}

.image-wrapper {
	position: relative;
	display: inline-block;
	margin: auto;
}

.image-wrapper img {
	/* max-height: 220px; */
}

.post-thumbnail img {
	max-width: 250px;
}

.image-wrapper::after {
	content: "";
	position: absolute;
	width: 102%;
	height: 102%;
	top: -1%;
	left: -1%;
	background-size: 100.06% 100.06%; /* fix image */
	background-repeat: no-repeat;
	background-size: 100% 100%;
	border: 0px solid white;
	z-index: 1;
}

.welcome h3 {
	padding-bottom: 0.25rem;
	padding-bottom: 1rem;
}

.welcome img {
	margin: 0 auto;
	padding: 0;
}

.welcome .image-label {
	font-family: var(--ff-secondary);
	font-size: var(--fs-500);
	font-weight: var(--fw-regular);
	color: var(--clr-primary-700);
	letter-spacing: 0.25px;
	margin: -2rem 0 0 0;
	position: relative;
	z-index: 1;
	
}

.even-col {
	display: grid;
	grid-template-columns: 1fr;
	flex-direction: column;
	/* gap: 2.5rem; */
	gap: 0;
}

.welcome .wave-3 {
	/* background-image: url("/wp-content/themes/gcf/assets/images/wave_3.svg"); */
	width: 73%;
	height: 23%;
	bottom: 0;
	left: -2%;
	transform: translateY(50%);
}

/* Members Quote Section */

.members-quotes {
	/* background-color: var(--clr-primary-700); */
	/* background-color: hsl(213.8deg 75.53% 36.86% / 60%); */
	padding-top: var(--sd-padding);
	padding-bottom: var(--sd-padding);
}

.bg-2 {
	background-image: url("/wp-content/themes/gcf/assets/images/bg_2.jpg");
	background-image: url("/wp-content/themes/gcf/assets/images/bg_2.webp");
}

.bg-counter {
	background-image: url("/wp-content/themes/gcf/assets/images/bg_counter.webp");
}

.bg-image {
	background-color: var(--clr-primary-900);
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.bg-image::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(2, 141, 7, 0.72);
	/*mix-blend-mode: multiply;  Apply blending mode */
}

.quote-box-container {
	margin-top: 1.25rem;
	margin-bottom: 2rem;
	width: 100%;
	display: grid;
	gap: 2rem;
	justify-content: center;
}

.members-quotes h2 {
	color: var(--clr-neutral-100);
}

.quote-box {
	position: relative;
	max-width: 400px;
	background-color: var(--clr-primary-400);
	background-color: hsla(121, 76%, 37%, 0.66);
	color: var(--clr-neutral-100);
	border-radius: 0.7rem;
	padding: 2rem;
	/* margin: 2rem 0; */
	border: 4px solid var(--clr-primary-700);
}

.box-secondary-opacity {
	color: var(--clr-neutral-100);
	background-color: var(--clr-primary-700);
	/* background-color: hsl(213.8deg 75.53% 36.86% / 66%); */
}

.box-secondary {
	color: var(--clr-neutral-200);
	background-color: var(--clr-primary-700);
	/* background-color: hsl(213.8deg 75.53% 36.86% / 66%); */
}

.box-secondary h2 {
	color: var(--clr-neutral-200) !important;
}

.list-box h3 {
	line-height: 1.5;
	margin-left: -0.5rem;
}

.list-box li {
	margin: 0.75rem 0;
	line-height: 1.35;
}

.quote-mark {
	position: absolute;
	top: 0px;
	left: 50%;
	font-family: var(--ff-heading);
	font-weight: var(--fw-semi-bold);
	font-size: 55px;
	transform: translate(-50%, -35%);
}

.quote-header {
	font-family: var(--ff-heading);
	font-size: var(--fs-700);
	font-weight: var(--fw-semi-bold);
	margin-top: 0.5rem;
	line-height: 1.2;
}

.quote-footer {
	font-weight: var(--fw-semi-bold);
	padding-top: 1rem;
}

/* Awards CTA section */

.awards-cta .wave-4 {
	/* background-image: url("/wp-content/themes/gcf/assets/images/wave_3.svg"); */
	bottom: 0;
	width: 30%;
	height: 30%;
	right: 5%;
	transform: translateY(50%);
}

.awards-cta .wave-5 {
	top: -15%;
	width: 40%;
	height: 20%;
	left: -2%;
	/* background-image: url("/wp-content/themes/gcf/assets/images/wave_3.svg"); */
	/* transform: translateY(-40%); */
}

.awards-cta .shape-divider-top svg {
	transform: none;
}

.awards-cta .shape-divider-bottom svg {
	transform: rotateY(180deg);
}

.awards-cta .box {
	position: relative;
	padding: 3rem 1rem 2rem;
}

.awards-cta .section-icon-container {
	position: absolute;
	top: 0;
	transform: translateY(-57%);
	z-index: 1;
}

.awards-cta .heading {
	max-width: 40rem;
}

.awards-cta h3 {
	font-size: var(--fs-500);
	/* margin-top: 0.5rem; */
	/* margin-bottom: 1rem; */
	/* letter-spacing: 0.8px; */
}

/* News Section */
.home-news {
	background-color: var(--clr-neutral-100);
}

.home-news .container {
	padding-top: 1rem;
	padding-bottom: 3rem;
	//background-color: aquamarine;
}

.home-news .section-icon-container {
	position: absolute;
	top: 0;
	left: 50%;
	margin-bottom: -30px;
	z-index: 1;
	transform: translate(-50%, 20%);
}

.news-card {
	display: grid;
	/* grid-template-rows: 7fr 3fr; */
	position: relative;
	border-radius: 0.7rem;
	overflow: hidden;
	margin: 1rem 0;
	height: 100%;
	width: 100%;
	max-width: 500px;
	background-color: var(--clr-neutral-200);
}

.post.news-card {
	/* grid-template-rows: 2fr 1fr; */
}

.news-card-container {
	font-family: var(--ff-heading);
	font-size: var(--fs-400);
	display: grid;
	gap: 2rem;
	margin-top: 1.25rem;
	margin-bottom: 2rem;
	width: 100%;
	justify-content: center;
}

.news-card-container a {
	text-decoration: none;
}

.news-card-container a:hover {
	color: var(--clr-primary-300);
}

.news-image {
	position: relative;
	min-height: 10rem;
	height: 100%;
	background: var(--clr-neutral-200);
	padding: 1rem;
}

.news-info {
	text-align: left;
	padding: 1.5rem;
	background-color: var(--clr-neutral-200);
}

.news-card .news-category {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
}

.news-category > .button {
	padding: 0.1rem 0.5rem;
	border-radius: 4px;
	font-size: var(--fs-200);
}
.news-category a:hover {
	background-color: var(--clr-neutral-300);
	color: var(--clr-primary-700);
}

.entry-meta {
	font-size: var(--fs-200);
	text-transform: uppercase;
}
.news-title {
	font-weight: var(--fw-semi-bold);
	font-size: var(--fs-500);
	color: var(--clr-primary-900);
	padding: 0.5rem 0;
}


.home-news .news-excerpt {
	margin-bottom: 0.3rem;
}

.news-read-more {
	font-weight: var(--fw-bold);
	color: var(--clr-primary-400);
	text-align: right;
	position: absolute;
	bottom: 1rem;
	right: 1rem;
}
.news-read-more a {
	text-decoration: none;
}

/*  Post  */

.post {
	/* text-align: left; */
}
.post .wave-2 {
	top: 70%;
	width: 33vw;
	bottom: 0;
	height: 33%;
	right: 6%;
}

.post .wave-1 {
	width: 44vw;
	height: 20%;
	bottom: 10%;
	left: -2%;
}

.post-details {
	text-transform: uppercase;
	/* flex-wrap: wrap; */
}

.post-date {
	color: var(--clr-primary-700);
	flex: none;
}

.post-categories {
	/* display: inline-flex; */
	display: flex;
	flex-wrap: wrap;
}

.post-categories li {
	list-style: none;
	padding: 0 0.25rem;
}

.next-post-link {
	text-align: right;
}

.previous-post-link {
	text-align: left;
}

/* Archive */

.archive {
	/* background-color: red; */
}

.archive.hero {
	min-height: 20vh;
}

/**** About Page  ****/

/* President List section */
.presidents-list {
	display: grid;
	grid-auto-flow: row;
	padding-bottom: 1rem;
}
.president-list-item {
	margin: 0 auto; 
    width: 250px; 
    padding:0.35rem 1rem; 
    flex-direction:row;
    justify-content: space-between;border:1px solid #cccccc;"
}

.president-box {
	
	max-width: 100%;
	padding: 1rem 1rem;
}

/* Committee Members Section */
.committee-members-list {
	border:0px solid #cccccc; 
	display:grid;
	grid-template-columns: repeat(1, 1fr);
	/* background-color: red */
	;
}

.committee-members-list .committee-member-name {
	color: var(--clr-primary-900);
	font-family: var(--ff-secondary);
	margin-top: 0.25rem;
}

.committee-members-list .committee-member-title {
	font-size: 0.9rem;
	margin-bottom: 0.25rem;
}

.committee-members-list .committee-member-region {
	color: var(--clr-primary-700);
	font-family: var(--ff-secondary);
	font-size: 0.9rem;
	margin-bottom: 0.1rem;
}

.committee-members-list .committee-member-location {
	color: var(--clr-primary-900);
	font-family: var(--ff-secondary);
	font-size: 0.75rem;
	text-transform: uppercase;
	font-weight: bold;
}

/****  Awards Page ****/

/* Sponsors Section */
.sponsors-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
}

.sponsors-list-item {
	padding: 0;
	margin: 0 auto;
	width: 100%;
	flex-direction: column;
	border: 0px solid #cccccc;
}

.sponsors-list-item img {
	height: auto;
	width: 100%;
}

.sponsor-image-container {
	border-radius: 50%;
	background-color: white;
	border-radius: 50%;
	overflow: hidden;
	padding: 10%;
}

/* Footer */

footer {
	position: relative;
	z-index: 1;
}

footer .logo {
	width: 100px;
	margin-bottom: 0.5rem;
}

footer .mobile-nav-toggle-footer {
	margin-bottom: 0.5rem;
}

footer .nav-list li {
	flex: none;
}

footer .footer-info {
	font-size: var(--fs-200);
	text-align: left;
}

footer .footer-social-links {
	/* align-items: center; */
	/* display: grid; */
	/* grid-template-columns: 1fr 1fr; */
	/* gap: 0.75rem; */
	/* margin: 0 auto; */
	/* padding: 0 0.5rem; */
	display: flex;
	flex-direction: row;
	min-width: 5rem;
	width: 5rem;
	justify-content: space-between;
}

footer .social-icon {
	min-width: 2rem;
	min-height: 2rem;
	fill: var(--clr-primary-400);
	/* margin: 0 0.4rem; */
}

footer .wave-6 {
	/* background-image: url(/wp-content/themes/gcf/assets/images/wave_3.svg); */
	top: 0;
	width: 50%;
	height: 30%;
	left: 0;
	transform: translate(-10%, -160%);
}

/* Shape Dividers */
.shape-fill {
	fill: var(--clr-neutral-200);
}

.shape-fill-neutral-100 {
	fill: var(--clr-neutral-100);
}

.shape-fill-neutral-200 {
	fill: var(--clr-neutral-200);
}

.shape-fill-primary-700 {
	fill: var(--clr-primary-700);
}


.shape-divider {
	overflow: hidden;
	position: absolute;
	left: 0;
	width: 100%;
	line-height: 0;
	z-index: 1;
}

.shape-divider svg {
	height: var(--sd-height);
	width: calc(100% + 1.3px);
}

.shape-divider-top {
	top: calc(5px - var(--sd-height));
}

.shape-divider-top svg {
	position: relative;
	display: block;
	transform: rotateY(180deg);
}

.shape-divider-bottom {
	bottom: calc(5px - var(--sd-height));
}

.shape-divider-bottom svg {
	position: relative;
	display: block;
}

.mp_wrapper {
	overflow: inherit;
	margin: 10px 0;
	max-width: 740px !important;
	margin: 0 auto;
	box-sizing: border-box;
	padding-bottom: 2rem;
}

/* ************* */
/* Media queries */
/* ************* */

/* Not mobile first - Primary Nav only */

@media (max-width: 61.25em) {
	.primary-navigation {
		display: none;
		position: fixed;
		width: auto;
		height: auto;
		padding: 1rem;
		/* inset: 4rem 2rem auto; */
		margin-left: auto;
		margin-right: auto;
		background: var(--clr-primary-700);
		border-radius: 1rem;
		box-shadow: 0 0 0.75em rgb(0, 0, 0, 0.05);
		color: var(--clr-neutral-100);
	}

	.nav-list a {
		display: inline-block;
		display: -webkit-box;
		text-align: left;
		/* background-color: red; */
	}

	.primary-header[data-overlay]::before {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		/* inset: 0; */

		background-image: linear-gradient(rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.7));
	}

	.nav-list {
		display: grid;
		/* gap: 1rem; */
		text-align: center;
		font-weight: var(--fw-bold);
		padding: 1rem;
	}

	.primary-navigation[data-visible] {
		display: flex;
		display: block;
		justify-content: center;
		top: 4rem;
		right: 9%;
		max-height: 80vh;
	}

	.mobile-nav-toggle {
		position: fixed;
		right: 5%;
	}

	.mobile-nav-toggle-footer {
		position: relative;
		margin: 0 auto;
	}

	.mobile-nav-toggle,
	.mobile-nav-toggle-footer {
		width: 2.7rem;
		height: 2.7rem;
		display: block;
		cursor: pointer;
		padding: 0.25rem;
		background-color: var(--clr-primary-700);
		z-index: 100;
	}

	.mobile-nav-toggle .icon-close,
	.mobile-nav-toggle-footer .icon-close-footer {
		display: none;
	}

	.icon-hamburger,
	.icon-close,
	.icon-hamburger-footer,
	.icon-close-footer {
		margin: 0;
		padding: 0;
		width: 100%;
	}
}

/* Mobile First */
@media (min-width: 24em) {
	.button {
			grid-template-columns: 1fr;
	}
	.committee-members-list {
		grid-template-columns: repeat(2, 1fr);
		;
	}
	/****  Awards Page ****/

	/* Sponsors Section */
	.sponsors-list {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media (min-width: 36em) {

	.hero .button-group {
		grid-template-columns: 1fr 1fr;
		max-width: 400px;
		margin: 0 auto;
	}
	
	.hero .button-group .button {
		max-width: 200px;
	}

		/* Sponsors Section */
		.sponsors-list {
			grid-template-columns: 1fr 1fr 1fr 1fr;
		}
 }

@media (min-width: 48em) {
	/* Styles for devices with a width over 768px */
	:root {
		--fs-primary-heading: var(--fs-700);
		--fs-section-heading: var(--fs-700);
		--fs-button: var(--fs-500);
	}

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

	.md-flex-col {
		flex-direction: column;
	}

	.md-flex-row {
		flex-direction: row;
	}
	.md-justify-center {
		justify-content: center;
	}
	.md-space-between {
		justify-content: space-between;
	}

	h3 {
		margin: 0 auto;
		/* max-width: 760px; */
		line-height: 1.6;
	}

	.news-title {
		line-height: 1.2;
	}

	.mobile-nav-toggle {
		position: fixed;
		right: 9%;
		top: 3.5rem;
	}

	.even-col {
		display: grid;
		/* gap: 2rem; */
		align-items: center;
	}

	.container {
		--container-padding: 10%;
	}

	.top-nav {
		display: flex;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		color: var(--clr-neutral-100);
		background-color: var(--clr-primary-700);
		font-family: var(--ff-secondary);
		font-size: var(--fs-300);
		z-index: 5;
	}

	.top-nav ul {
		list-style-type: none;
		justify-content: flex-end;
	}

	.top-nav a {
		text-decoration: none;
		cursor: pointer;
		padding: 0.5rem;
	}

	.top-nav a:hover,
	.top-nav a:active {
		background-color: var(--clr-primary-900);
	}

	.logo {
		width: 120px;
		/* min-width: 80px; */
		margin: 0 auto;
	}

	/* Hero Section */
	/* Waves Positioning */
	.hero .wave-1 {
		left: 5%;
		height: 23%;
		width: 30%;
	}

	.hero .wave-2 {
		top: 81%;
		width: 45vw;
		bottom: 0;
		height: 23%;
		right: 3%;
	}

	.hero-image::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.hero {
		min-height: 50vh;
		text-align: left;
	}

	.hero .container {
		padding: 10rem 0;
	}

	.hero .button-primary {
		margin-left: 0;
	}

	.hero .button-group {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.5rem;
		max-width: 400px;
		margin-right: auto;
		margin-left: 0;
	}
	
	.hero .button-group .button {
		max-width: 200px;
		text-align: center;
	}

	.post .wave-1 {
		left: 5%;
		height: 37%;
		width: 45%;
		bottom: 0;
	}

	.section-icon-container {
		height: 3rem;
		width: 3rem;
	}

	/* Welcome Section */
	.home  .welcome h2 {
		padding-bottom: 0.5rem;
		
	}
	
	.welcome h3 {
		padding-bottom: 1rem;
	}

	/* News Section */
	.news-card-container {
		flex-direction: row;
		flex-wrap: wrap;
		/* justify-content: space-between; */
	}

	/* Committee Section */
	.committee-members-list {
		grid-template-columns: repeat(3, 1fr);
	}
	/* President List section */
	.presidents-list {
		grid-template-rows: repeat(26, 1fr);
		grid-auto-flow: column;
	}

	/* Footer */

	footer .logo {
		margin-right: 1rem;
		margin-bottom: 0;
	}

	footer .wave-6 {
		width: 30%;
		height: 70%;
		left: 80%;
		top: 20%;
		/* transform: translate(0, 0); */
	}

	footer .footer-info {
		position: absolute;
		bottom: 0;
		left: 0;
		transform: translateY(125%);
	}

	footer .mobile-nav-toggle-footer {
		margin: 0 0 0 1rem;
	}
}

@media (min-width: calc(61.25em + 1px)) {
	/* Styles for devices with a width over to 980px */
	:root {
		--fs-primary-heading: var(--fs-800);
		--fs-section-heading: var(--fs-800);
	}

	.lg-flex-col {
		flex-direction: column;
	}
	.lg-flex-row {
		flex-direction: row;
	}
	.lg-row-reverse {
		flex-direction: row-reverse;
	}
	.lg-justify-center {
		justify-content: center;
	}
	.lg-space-between {
		justify-content: space-between;
	}

	/* President List section */
	.presidents-list {
		grid-template-rows: repeat(18, 1fr);
		grid-auto-flow: column;
	}
	/* Committee Members List section */
	.committee-members-list {
		border:0px solid #cccccc; 
		display:grid;
		grid-template-columns: repeat(6, 1fr);
		/* background-color: red */
		;
	}

	/*  Awards Page */

	/* Sponsors Section */
	.sponsors-list {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
		gap: 3rem;
	}

	/* Boxes */

	.info-box {
		flex-direction: row;
	}

	.even-col {
		grid-template-columns: 1fr 1fr;
	}

	/* Navigation */

	.primary-navigation {
		min-width: 60%;
		width: 100%;
	}

	.nav-wrapper {
		/* gap: 0.75rem; */
	}
	.nav-list ul {
		align-items: center;
	}
	.nav-list li {
		/* border: 1px yellow solid; */
		flex: auto;
		line-height: 0.8rem;
		border-left: 2px var(--clr-neutral-400) solid;
		position: relative;
		color: var(--clr-neutral-100);
		/*width: 100%;
		 margin-right: 0.2rem; Adjust the spacing between menu items */
	}

	.nav-list li:first-child {
		content: none; /* Remove the pipe after the last item */
		margin-right: 0;
		border-left: 0;
	}
	.nav-list li:last-child {
		margin-right: 0;
	}

	.nav-list a {
		padding: 1rem 0.15rem;
	}


	/* Hero Section */

	.hero .container {
		/* padding: 12rem 0; */
	}

	main.page .hero .container {
		/* background-color: red; */
		padding: 0;
	}

	/* Welcome Section */
	.home  .welcome h2 {
		padding-bottom: 0.25rem;
			
	}
		
	.home .welcome h3 {
		padding-bottom: 0rem;
	}

	/* Quote Section */
	.quote-box-container {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 1rem;
		margin-top: 2rem;
	}

	/* News Section */

	.news-card-container {
		grid-template-columns: 1fr;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-columns: 1fr 1fr;
	}

	/* Awards CTA */

	.awards-cta .wave-4 {
		/* background-image: url(/wp-content/themes/gcf/assets/images/wave_3.svg); */
		top: 0;
		width: 30%;
		height: 23%;
		right: -10%;
		transform: translateY(-50%);
	}

	.awards-cta .wave-5 {
		top: 70%;
		width: 30%;
		height: 30%;
		left: -10%;
		transform: translateY(-9%);
	}

	/* Footer */

	footer .primary-navigation a {
		color: var(--clr-primary-900);
	}

	footer .nav-list li {
		/* border: 1px yellow solid; */
		flex: none;
		border-left: 0;
		position: relative;
		color: var(--clr-neutral-100);
		/*width: 100%;
		 margin-right: 0.2rem; Adjust the spacing between menu items */
	}
	footer .footer-info {
		position: relative;
		bottom: 0;
		left: 0;
		transform: translateY(0);
		margin-top: 0.75rem;
	}

	footer .footer-info p {
		padding: 0;
	}

	footer .footer-social-links {
		margin-left: 1rem;
		/* width: 10%; */
	}

	footer .wave-6 {
		/* 	width: 30%;
		height: 70%;
		left: 80%;
		top: 20%;
		transform: translate(135%, -150%); */
	}
}

@media (min-width: 75em) {
	/* Styles for devices with a width over 1200px */
	:root {
		--fs-primary-heading: var(--fs-900);
		--fs-section-heading: var(--fs-900);
		--fs-button: var(--fs-600);
	}
	.xl-flex-col {
		flex-direction: column;
	}
	.xl-flex-row {
		flex-direction: row;
	}

	/* President List section */
	.presidents-list {
		grid-template-rows: repeat(18, 1fr);
	}

	.hero .button-group {
		max-width: 530px;
	}
	.hero .button-group .button {
		max-width: 300px;
	}

	section > .container {
		/* padding: 0 0 3rem 0; */
		/* padding: 0; */
		/* z-index: 1; */
	}
	section.welcome .container {
		/* padding: 2rem 0; */
		/* z-index: 1; */
	}
	section.home-news .container {
		/* padding: 2rem 0; */
		padding-top: 1.5rem;
		/* z-index: 1; */
	}

	section.awards-cta .container {
		padding: 2rem 0;
	}

	.primary-navigation {
		min-width: 85%;
	}

	.nav-list a {
	}

	.section-icon-container {
		height: 4rem;
		width: 4rem;
	}
	.quote-box-container,
	.news-card-container {
		flex-direction: row;
		gap: 1rem;
		justify-content: space-evenly;
	}

	.news-card-container {
		grid-template-columns: 1fr;
		grid-template-columns: 1fr 1fr 1fr;
		/* grid-template-columns: 1fr 1fr; */
	}

	footer .wave-6 {
		/* width: 30%;
		height: 70%;
		left: 80%;
		top: 20%;
		transform: translate(135%, -150%); */
	}
}