:root {
	--GL-light-green: #86AC49;
	--GL-dark-green: #1B6145;
	--GL-blue: #2D95BC;
	--GL-dark-blue: #125F7C;
	--GL-beige: #DCC58A;
	--GL-brown: #885F23;
	--GL-yellow: #F0CD4E;
	
	--GL-sans-serif: 'avenir-lt-pro', Arial, Helvetica, sans-serif;
	--GL-serif: 'the-seasons', 'Times New Roman', Times, serif;

	--layout-margins: 152px;
	--layout-content-width: 30.8125rem;

	--bs-gutter-x: 0;

	scroll-padding: 10rem;
	--background-gradient: linear-gradient(rgb(0 0 0 / var(--background-opacity, 0.65)));

}

body {

	--header-image: url("https://as.sdsu.edu/greenlove/images/headers/large/smreserve_aerial_hargrove.jpg?v=1.1");
	--credit: "Scott Hargrove";

	--footer-image: url("https://as.sdsu.edu/greenlove/images/headers/large/20250216SDSU_03_furman.jpg?v=1.1");
	--footer-credit: "Matt Furman";

	&:is(#about) {
		--header-image: url("https://as.sdsu.edu/greenlove/images/headers/large/smreserve_creek_hargrove.jpg?v=1.1");
		--credit: "Scott Hargrove";
	}

	&:is(#accomplishments) {
		--header-image: url("https://as.sdsu.edu/greenlove/images/headers/large/20250217SDSU_01_furman.jpg?v=1.1");
		--credit: "Matt Furman";
	}

	&:is(#resources) {
		--header-image: url("https://as.sdsu.edu/greenlove/images/headers/large/20250216SDSU_01_furman.jpg?v=1.1");
		--credit: "Matt Furman";
	}

	&:is(#zerowaste) {
		--header-image: url("https://as.sdsu.edu/greenlove/images/headers/large/20250217SDSU_02_furman.jpg?v=1.1");
		--credit: "Matt Furman";
		--bg-position: center; ;
	}

	&:is(#swapshop) {
		--header-image: url("https://as.sdsu.edu/greenlove/images/headers/large/20250216SDSU_02_furman.jpg?v=1.1");
		--credit: "Matt Furman";
	}

	color: white;
	background-color: #13442F;
	font-family: var(--GL-sans-serif);
	font-size: clamp(0.9rem, 1vw, 1.125rem);
	line-height: 1.5;

	& :any-link {
		color: inherit;
		font-weight: 800;
	}

	& .d-inline-block:any-link {
		min-height: 44px;
		min-width: 44px;
	}

	&:has(#nav-list.open) {
		overflow: hidden;
	}
}

:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3) {
	font-family: var(--GL-sans-serif);
	font-weight: bold;
	line-height: normal;
}

:is(.h1) {
	font-size: clamp(36px, 5vw, 4.065rem);
    font-weight: 800;
    margin-bottom: 0;
	border-bottom: none;
	text-wrap: balance;
}

h2, .h2, .step h3 {
	font-size: clamp(2.125rem, 3vw, 3.125rem);
	border-bottom: solid white 1px;
	margin-bottom: 1.81rem;
	padding-bottom: 0.94rem;
	padding-inline: 0;
}

.header > h2 {
	padding-inline: 0;
}

p.h3, dt {
	line-height: 1.5;
	font-family: var(--GL-serif);
	color: var(--GL-yellow, gold);
	-webkit-text-stroke: 1px;
}

h3, .h3, .step :is(h3) {
	font-size: clamp(1.6rem, 2vw, 2.25rem);
}

.header {
	text-wrap: nowrap;

	@media (width <= 992px) {
		text-wrap: auto;

		&:not(:has(h2)) {
			display: none;
		}
	}
}

.subheader {
	font-size: clamp(1.5rem, 2vw, 2rem);

	@media (width <= 992px) {
		text-align: center;
	}
}

p:has(+ .shadow-left) {
	margin-bottom: 1.813rem;
}

:is(.shadow-left) {
	box-shadow: inset 8px 0 0 0 var(--GL-yellow, gold);
	padding-left: 2rem;

	&.col-half {
        padding-inline: 0;
		box-shadow: unset;
	}
}

dt {
	font-size: clamp(1.125rem, 2vw, 2rem);
	font-weight: 900;
	letter-spacing: 3.2px;
	text-wrap: balance;
	margin-bottom: 0.5rem;
}

header {
	padding-block: 31px 155px;
	padding-inline: var(--layout-margins);
	position: relative;

	background-image:
		var(--background-gradient),
  		var(--header-image);
	background-size: cover;
	background-position: var(--bg-position, top);

	& .hero-section {
		padding-top: 153px;
	}

	& .hero-content {
		max-width: var(--column-width);
	}

	& .social-media {
		margin-right: 0.56rem;
	}

	@media (width <= 992px) {
		background-size: cover;
		background-position: bottom-center;
	}
}

header::after {
	content: "Background Photo Credit: " var(--credit) / "Background Photo Credit: " var(--credit);
	position: absolute;
	bottom: 0;
	left: 0;
	padding-left: var(--layout-margins);
	padding-bottom: 2rem;
	font-size: 0.75rem;
	color: rgb(255 255 255 / 0.75);
}

header section:has(h1) {
	text-align: right;

	@media (width <= 992px) {
		text-align: center;
	}
} 

.container.row {
	gap: min(5%, 139px);
	gap: clamp(3rem, 5vw ,139px);
}

.content {
	max-width: 497px;
}

nav {
	border-bottom: solid white 1px;
	min-height: 55px;
	margin-bottom: 153px;
	z-index: 10;
	
	
	& ul {
		list-style: none;
		display: flex;
		padding: 0;
	}

	& li {
		display: inline-block;
		margin-right: 63px;
	}

	& #nav-list :any-link {
		text-decoration: none;
		font-weight: 300 !important;
		display: inline-block;
		min-height: 44px;
		display: flex;
		align-items: center;
	}


	@media (width <= 992px) {
		border-bottom: 0;
		min-height: auto;

		& #nav-list {
			position: absolute;
			top: 0;
			left: -110%;
			border: 0;
			background-image:
				linear-gradient(rgb(0 0 0 / 0.25), rgb(0 0 0 / 0.25)),
				url("https://as.sdsu.edu/greenlove/images/leaves.svg "),
				linear-gradient(180deg, #1A5B41 0%, #082117 85.58%);
			background-blend-mode: overlay;
			background-size: 100%;
			background-position: top;
			background-repeat: repeat;
			height: 100vh;
			width: 100vw;
			transition: left 0.8s ease-out;
			font-size: 2rem;
			z-index: 999;

			flex-direction: column;
			justify-content: space-evenly;
			z-index: 11;
		}

		& #nav-list.open {
			left: 0;
		}

		& li {
			display: block;
			text-align: center;
			margin-inline: auto;
		}
	}
}

#nav-toggle {
	display: none;
	position: relative;
	z-index: 12;

	& span {
		display: block;
		height: 2px;
		width: -webkit-fill-available;
		width: -moz-available;
		width: stretch;
		background: white;
		pointer-events: none;
		transition:
			opacity 0.1s ease 0.3s,
			translate 0.2s ease 0.3s,
			rotate 0.2s ease-out;
	}

	&[aria-expanded="true"] span:first-child {
		rotate: 45deg;
		translate: 0 10px;
		transition:
			rotate 0.2s ease-out 0.3s,
			translate 0.2s ease;
	}

	&[aria-expanded="true"] span:nth-child(2) {
		opacity: 0;
	}

	&[aria-expanded="true"] span:last-child {
		rotate: -45deg;
		translate: 0 -10px;
		transition:
			rotate 0.2s ease-out 0.3s,
			translate 0.2s ease;
	}

	@media (width <= 992px) {
		display: inline-flex;
		flex-direction: column;
		width: 50px;
		aspect-ratio: 1 / 1;
		background: transparent;
		border: 0;
		gap: 0.5rem;
		justify-content: center;
	}
}

.carousel-container {
	background-image: linear-gradient(180deg, #1A5B41 0%, #082117 85.58%);
	min-height: 23.75369rem;
	font-size: 2.125rem;

	& .carousel {
		min-height: inherit;
		align-content: center;
	}

	& .carousel-item {
		height: 100cqw;
		max-height: 430px;
		align-content: center;
	}

	& .carousel-caption {
		all: revert;
		position: static;
		display: block;
		text-align: center;
		text-wrap: balance;
		width: min(75%, 1074px);
		margin-inline: auto;
		font-size: clamp(1rem, 3vw, 1.75rem);
	}

	& .carousel-highlight {
		font-size: clamp(2.5rem, 6vw, 5.8125rem);
		font-style: normal;
		font-weight: 900;
		line-height: 1;
		display: block;
		text-wrap: auto;
		margin-bottom: 1rem;
	}

	.carousel-control-next::before,
	.carousel-control-prev::before {
		--arrow-size: 25px;

		content: "" / "Next";
		display: block;
		width: 2.5rem;
		aspect-ratio: 1 / 1;
		border-top: var(--arrow-size) solid transparent;
		border-bottom: var(--arrow-size) solid transparent;
		border-left: var(--arrow-size) solid white;
	}

	.carousel-control-prev::before {
		rotate: 180deg;
	}
}

main {

	& .event-date {
		color: var(--GL-beige, tan);
		font-size: clamp(1.1rem, 2vw, 1.5rem);
	}

	& > section {
		padding-block: 5.23rem  8.69rem;
		background-image: linear-gradient(180deg, #1A5B41 0%, #082117 85.58%);
	}

	& section img {
		width: 25rem;
		height: 29.125rem;
		aspect-ratio: 200/233;
	}

	& section picture img {
		aspect-ratio: auto;
	}

	.bg-image-redwoods {
			--photo-credit: "Matt Furman";

			position: relative;
			background-image:
				linear-gradient(rgb(0 0 0 / 0.75)),
				url("https://as.sdsu.edu/greenlove/images/headers/large/20250216SDSU_01_furman.jpg?v=1.1");
			background-position: top;
			background-size: cover;

			@media (width < 992px) {
				background-image:
				linear-gradient(to top, rgb(0 0 0 / 0.75) 6%, rgb(0 0 0 / 0.55) 15%, rgb(0 0 0 / 0.6) 50%, rgb(0 0 0 / 0.75) 100%),
				linear-gradient(to top, #004037, #105248, #05695B);
			}
	}

	.bg-image-redwoods::after {
		content: "Background Photo Credit: " var(--footer-credit) / "Background Photo Credit: " var(--footer-credit);
		position: absolute;
		bottom: 0;
		left: 0;
		padding-left: var(--layout-margins);
		padding-bottom: 2rem;
		font-size: 0.75rem;
		color: rgb(255 255 255 / 0.75);
	}
}

main section.wrapping-container:not(:first-of-type) {
	margin-top: 250px;

	@media (width <= 992px) {
		margin-top: 100px;
	}
}

sup {
	color: var(--GL-yellow, gold);
    font-size: 1.5rem;
    top: 9px;
    vertical-align: super;
    margin-inline: 5px;
}

sub {
	color: var(--GL-yellow, gold);
}

hr {
	all: revert;
	width: 95%;
	margin-inline: auto;
	border-color: white;
	border-style: solid none none;
}

.video {
	width: min(100%, 730px);
	margin-inline: auto;

	& iframe {
		width: 100%;
		aspect-ratio: 1 / 0.55;
	}

	& summary {
		font-weight: 600;
		display: inline-block;
		margin-block: 1rem 2rem;
		border-bottom: rgb(255 255 255 / 1) 2px solid;
		text-decoration: none;
	}

	& summary::before {
		content: " + ";
		width: 15px;
		display: inline-block;
	}

	& details[open] summary::before {
		content: " \2013 ";
	}

	& .transcript-text {
		position: relative;
		isolation: isolate;
		border-bottom: solid rgb(255 255 255 / 0.5) 1px;
		margin: 0;
		padding: 1rem;
	}

	& .transcript-text::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		opacity: 0;
		background: #3E612E;
		transition: opacity 0.3s;
		z-index: -1;
	}

	& .transcript-text .label-small {
		font-weight: 500;
		margin-bottom: 0.75rem;
	}

	& .transcript-text > span {
		display: block;
		text-align: left;
	}

	& .transcript-text.current {
		background: white;
		color: black;
	}

	& summary::before {
		content: " + ";
		width: 15px;
		display: inline-block;
	}

	& details[open] summary::before {
		content: " \2013 ";
	}

	& details::details-content {
		color: white;
		margin-block: 1rem 3rem;
		padding-inline: 1.5rem;
		opacity: 0;
		max-height: 0;
		margin-inline: auto;
		transition: 
		opacity 0.6s ease-out, 
		max-height 0.6s cubic-bezier(1, -0.01, 0.2, 0.96), 
		content-visibility 0.6s allow-discrete ease;
	}

	& details[open]::details-content {
		opacity: 1;
		max-height: 500rem;
	}

	& a:is(.placeholder, .timestamp) {
		cursor: pointer;
		font-weight: 800;
	}

	& #transcript a:not([href]):hover {
		color: inherit;
		text-decoration: underline;
		text-underline-offset: 2px;
	}

	@media (width <= 756px) {
		text-align: center;
	}
}

#event-steps {
	counter-set: steps 0;

	& .step {
		counter-increment: steps;
	}

	& .step h3 {
		position: relative;
		display: flex;
		align-items: center;
		gap: 2rem;
		text-wrap: balance;
	}

	& .step h3::before {
		content: counter(steps);
		font-size: 7rem;
		text-box-edge: cap alphabetic;
		text-box-trim: trim-both;
		box-sizing: content-box;
	}

	& .row {
		column-gap: 105px;

		@media (width <= 1200px) {
			justify-content: center;
		}
	}

	& .col-half {
		@media (width <= 1200px) {
			max-width: revert;
		}
	}
}

.step-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: min(100%, 1095px);
	margin-inline: auto;
	margin-bottom: 100px;
}

.step-container:first-of-type .step:first-child {
	margin-bottom: inherit;
}


figure:has(img:nth-child(2)) {
	gap: 1.1875rem;

	& .quad-img {
		width: min(40%, 209px);
		height: auto;
		aspect-ratio: 1 / 1;
	}
}

footer {
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 58px;
	height: 617px;
	padding-block: 152px 170px;
	padding-inline: var(--layout-margins);
	position: relative;

	background-image: 
		var(--background-gradient),
		var(--footer-image, url(https://as.sdsu.edu/greenlove/images/beach2.jpg));
	background-position: bottom center;
	background-size: cover;

	& a:has(#zipcar) {
		width: fit-content;
		margin-inline: auto;
		min-width: 400px;
	}

	& #zipcar {
		width: min(50%, 150px);
	}

	& #as-logo {
		width: min(100%, 250px);
	} 

	& :is(#links-text, #links-img) {
		display: flex;
		column-gap: 100px;

		@media (width <= 756px) {
			column-gap: 45px;
		}
	}

	& #links-img {
		column-gap: 64px;

		@media (width <= 756px) {
			column-gap: 0;
		}
	}


	@media (width <= 756px) {

		row-gap: 2rem;
	}
}

footer::after {
	content: "Background Photo Credit: " var(--footer-credit) / "Background Photo Credit: " var(--footer-credit);
	position: absolute;
	bottom: 0;
	left: 0;
	padding-left: var(--layout-margins);
	padding-bottom: 2rem;
	font-size: 0.75rem;
	color: rgb(255 255 255 / 0.75);
}


#dfn-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 85px 138px;
	margin-inline: auto;

	& li {
		display: contents;
	}

	& dfn {
		font-style: normal;
	}

	& figure {
		width: min(100%, 423px);
	}

	& .dfn-img {
		width: 100%;
		height: auto;
		aspect-ratio: auto;
		margin-bottom: 50px;
	}
}

.col-half {
	max-width: var(--layout-content-width);

	@media (width <= 992px) {
		max-width: unset;
	}
}

.logo-md {
	width: 190px;
}

.white {
	filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1710%) hue-rotate(335deg) brightness(107%) contrast(107%);
}

.yellow {
	filter: brightness(0) saturate(100%) invert(81%) sepia(43%) saturate(708%) hue-rotate(345deg) brightness(105%) contrast(88%);
}

img.icon-pdf {
	display: inline-block;
	height: 1rem;
	width: 1rem;
	margin-left: 0.25rem;
}

.bg-green {
	background-image: 
	url("https://as.sdsu.edu/greenlove/images/leaves.svg "),
	linear-gradient(180deg, #1A5B41 0%, #082117 85.58%);
	background-blend-mode: overlay;
	background-size: 100%;
	background-position: top;
	background-repeat: repeat;

	@media (width <= 992px) {
		background-image:
		linear-gradient(rgb(0 0 0 /0.5), rgb(0 0 0 / 0.5)),
		url("https://as.sdsu.edu/greenlove/images/leaves.svg "),
		linear-gradient(180deg, #1A5B41 0%, #082117 85.58%);
	}
}

.bg-fixed {
	background-attachment: fixed;
}

.rounded-portrait {
	border: solid white 6px;
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: top;
	max-width: 370px;
}

.team {
	font-size: 2.125rem;
	font-weight: 900;
	line-height: 27px;
	width: fit-content;
	text-align: center;

	& .small {
		display: inline-block;
		margin-top: 14px;
		font-size: 18px;
		font-weight: 500;
	}
}

.container {

	@media (min-width: 1400px) {
		max-width: 1615px;
		padding: 0;
	}
}

@media (width <= 992px) {
    :root {
        --layout-margins: 0;
    }

    :is(.h1) {
        text-align: center;
    }

	.container {
		padding-inline: 1rem;
	}
}