@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');

:root {
	/* type */
	--type-scale: 1.333;
	--line-height: 1.6;
	--heading-line-height: 1.4;
	--body-size: clamp(1rem, .8852rem + .4898vw, 1.125rem);
	--nav-size: clamp(.875rem, .7985rem + .3265vw, 1rem);
	--h5-size: calc(var(--type-scale) * var(--body-size));
	--h4-size: calc(pow(var(--type-scale), 2) * var(--body-size));
	--h3-size: calc(pow(var(--type-scale), 3) * var(--body-size));
	--h2-size: calc(pow(var(--type-scale), 4) * var(--body-size));
	--h1-size: calc(pow(var(--type-scale), 5.6) * var(--body-size));

	/* constants */
	--icon-margin: 0.5em;
	--border-radius: 10px;
	--gap-width: 10px;
	--grid-col-gap: min(5vw, 100px);
	--grid-row-gap: min(20vw, 100px);
	--grid-margin-top: clamp(60px, 10vw, 100px);
	--item-name-margin: calc(var(--line-height) * 1rem - 1rem) 0 0 0;

	--pop-in: pop-in-scale var(--pop-in-duration) ease-in-out 0s 1, pop-in-opacity var(--pop-in-duration) ease-in-out 0s 1, pop-in-visibility var(--pop-in-duration) ease-in-out 0s 1 forwards;
	--pop-in-duration: 0.4s;
	--nav-duration: calc(var(--pop-in-duration) * 2 / 3);

	/* section headers */
	--section-shadow: 0 0 0.3em hsl(0, 0%, 0%, 50%);
	--section-filter: brightness(0.9) blur(calc(var(--section-header-height) / 55));

	/* padding */
	/* split up because sometimes maths need to be done */
	--thin-padding-v: 0.3em;
	--thin-padding-h: 1em;
	--standard-padding-v: 0.4em;
	--standard-padding-h: 1.1em;
	--thick-padding-v: 0.5em;
	--thick-padding-h: 1.2em;
	--chunky-padding-v: 1em;
	--chunky-padding-h: 1.8em;
	--icon-padding-v: 0.3em;
	--icon-padding-h: 0.15em;
	--tooltip-padding-v: 0.5rem;
	--tooltip-padding-h: 0.8rem;
	/* bundled for easy use with elements */
	--thin-padding: var(--thin-padding-v) var(--thin-padding-h);
	--standard-padding: var(--standard-padding-v) var(--standard-padding-h);
	--thick-padding: var(--thick-padding-v) var(--thick-padding-h);
	--chunky-padding: var(--chunky-padding-v) var(--chunky-padding-h);
	--icon-padding: var(--icon-padding-v) var(--icon-padding-h);
	--tooltip-padding: var(--tooltip-padding-v) var(--tooltip-padding-h);
	/* single-line heights for quick use */
	--thin-height: calc(1em * var(--line-height) + 2 * var(--thin-padding-v));
	--standard-height: calc(1em * var(--line-height) + 2 * var(--standard-padding-v));
	--thick-height: calc(1em * var(--line-height) + 2 * var(--thick-padding-v));
	--chunky-height: calc(1em * var(--line-height) + 2 * var(--chunky-padding-v));

	/* variables */
	--navbar-height: 80px;
	--section-header-height: 500px;
	--inner-width: clamp(30vw, 1500px, 85vw);
	--grid-width: clamp(60vw, 1700px, 85vw);
	--gallery-width: clamp(60vw, 1700px, 85vw);
	--grid-columns: 3;

	--titanium-height: calc(6rem * var(--type-scale));
	--steel-height: calc(5rem * var(--type-scale));
	--iron-height: calc(4rem * var(--type-scale));
	--aluminum-height: calc(3rem * var(--type-scale));

	--grid-col-width: calc(calc(var(--grid-width) - var(--grid-col-gap) * (var(--grid-columns) - 1)) / var(--grid-columns));

	/* colours */
	--text-light: hsl(0, 0%, 98%);
	--text-dark: hsl(0, 0%, 2%);
}

/* @media (prefers-color-scheme: light) { */
:root {
	--background: hsl(0, 0%, 98%);
	--text: hsl(0, 0%, 2%);
	--text-alt: hsl(0, 0%, 98%);
	--header: var(--primary-20);
	--nav: hsl(0, 0%, 98%);
	--section: hsl(0, 0%, 98%);

	/* evenly-spaced points along S(V)=-0.7*V^3+0.7 in HSV colour space */
	--primary-5: hsl(235, 53.8%, 4.3%);
	--primary-10: hsl(235, 53.7%, 8.6%);
	--primary-15: hsl(235, 53.2%, 12.9%);
	--primary-20: hsl(202, 47.3%, 35.7%);
	/* header, headings, some icons, button text, text link hovers */
	--primary-25: hsl(235, 51%, 21.7%);
	--primary-30: hsl(235, 49%, 26.3%);
	/* button hovers and important buttons */
	--primary-35: hsl(235, 46.5%, 30.9%);
	/* important button hovers */
	--primary-40: hsl(235, 43.5%, 35.7%);
	--primary-45: hsl(235, 40%, 40.6%);
	/* coming soon merch */
	--primary-50: hsl(235, 36.3%, 45.6%);
	--primary-55: hsl(235, 33.2%, 50.7%);
	/* text links */
	--primary-60: hsl(235, 35.9%, 55.8%);
	--primary-65: hsl(235, 38.4%, 61.1%);
	--primary-70: hsl(235, 40.6%, 66.4%);
	--primary-75: hsl(235, 42.7%, 71.8%);
	--primary-80: hsl(235, 44.7%, 77.3%);
	--primary-85: hsl(235, 46.5%, 82.9%);
	--primary-90: hsl(235, 48.2%, 88.5%);
	/* link buttons */
	--primary-95: hsl(235, 49.8%, 94.2%);

	--secondary: hsl(0, 0%, 92%);
	/* chips, cards */

	--card-shadow: hsl(0, 0%, 0%, 10%);
	--tooltip-border: hsl(0, 0%, 70%);

	/* sponsors colours */
	--titanium-h: hsl(0, 50%, 20%);
	--titanium-bg: hsl(0, 50%, 90%);
	--steel-h: hsl(235, 51%, 21.7%);
	--steel-bg: hsl(235, 48.2%, 88.5%);
	--iron-h: hsl(35, 80%, 20%);
	--iron-bg: hsl(35, 80%, 90%);
	--aluminum-h: hsl(0, 0%, 15%);
	--aluminum-bg: hsl(0, 0%, 90%);

	/* merch (+leaderboard) colours */
	--red: hsl(0, 70%, 55%);
	--green: hsl(120, 55%, 38%);
	--yellow: hsl(35, 70%, 50%);

	/* leaderboard colours */
	--first: hsl(40, 90%, 60%);
	--first-glow: hsl(40, 90%, calc(50% + 60% / 2), 100%);
	--second: hsl(200, 70%, 62%);
	--second-glow: hsl(200, 75%, calc(50% + 62% / 2), 100%);
	--third: hsl(40, 60%, 43%);
	--third-glow: hsl(40, 60%, calc(50% + 43% / 2), 100%);

	/* course year colours */
	--course-200-h: hsl(170, 55%, 22%);
	--course-200-bg: hsl(170, 60%, 88%);
	--course-300-h: hsl(210, 65%, 28%);
	--course-300-bg: hsl(210, 70%, 90%);
	--course-400-h: hsl(250, 50%, 28%);
	--course-400-bg: hsl(250, 55%, 90%);
}

/* } */

@media (max-width: 1500px) {
	:root {
		--grid-width: min(90vw, 1000px);
		--gallery-width: min(90vw, 1200px);
		--grid-columns: 2;
	}
}

@media (max-width: 1130px) {
	:root {
		--type-scale: 1.25;
		--h1-size: calc(pow(var(--type-scale), 6) * var(--body-size));
		--section-header-height: 400px;
		--grid-width: min(90vw, 500px);
		--gallery-width: min(90vw, 600px);
		--grid-columns: 1;
	}
}

@media (max-width: 600px) {
	:root {
		--type-scale: 1.22;
		--navbar-height: 65px;
		--section-header-height: calc(2 / 3 * 100vw);
		--inner-width: 90%;
	}
}

html {
	font-family: 'Lexend', sans-serif;
	font-size: var(--body-size);
	color: var(--text);
	line-height: var(--line-height);
	overscroll-behavior: none;
}

body {
	background-color: var(--background);
	margin: 0;
	min-height: fit-content;
	overflow-y: scroll;
	overflow-x: hidden;
	overscroll-behavior: none;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	position: relative;
}

h1 {
	font-size: var(--h1-size);
	color: var(--primary-20);
	line-height: var(--heading-line-height);
	margin: 1em 0 0.5em 0;
}

h2 {
	font-size: var(--h2-size);
	color: var(--primary-20);
	line-height: var(--heading-line-height);
	margin: 1em 0 0.5em 0;
}

h3 {
	font-size: var(--h3-size);
	color: var(--primary-20);
	line-height: var(--heading-line-height);
	margin: 1em 0 0.5em 0;
}

h4 {
	font-size: var(--h4-size);
	color: var(--primary-20);
	line-height: var(--heading-line-height);
	margin: 1em 0 0.5em 0;
}

h5 {
	font-size: var(--h5-size);
	color: var(--primary-20);
	line-height: var(--heading-line-height);
	margin: 1em 0 0.5em 0;
}

p {
	font-size: var(--body-size);
	margin: 1rem 0 1rem 0;
}

/* ANIMATIONS */

@keyframes icon-click {
	20% {
		transform: scale(0.85);
	}

	65% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes pop-in-scale {
	0% {
		transform: scale(1);
	}

	20% {
		transform: scale(0.985);
	}

	60% {
		transform: scale(1.01);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes pop-in-opacity {
	0% {
		opacity: 0;
	}

	50%,
	100% {
		opacity: 1;
	}
}

@keyframes pop-in-visibility {

	0%,
	100% {
		visibility: visible;
	}
}

@keyframes fade-out-scale {
	0% {
		transform: scale(1);
	}

	100% {
		transform: scale(0.85);
	}
}

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

	50%,
	100% {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: no-preference) {

	#links>li,
	.openings>li,
	.event,
	.collection>li,
	.council-member,
	.merch-item,
	.course-item,
	.player-card {
		visibility: hidden;
		animation: var(--pop-in);
	}

	@media (max-width: 1000px) {
		header nav .button.nav {
			visibility: hidden;
			animation: var(--pop-in);
		}

		header nav.hidden .button.nav {
			visibility: visible;
			animation: fade-out-scale var(--nav-duration) ease-in-out 0s 1, fade-out-opacity var(--nav-duration) ease-in-out 0s 1 forwards;
		}
	}
}

/* GENERAL */

#content {
	margin-top: var(--navbar-height);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	min-height: fit-content;
	text-align: center;
	position: relative;
	background-color: var(--background);
	padding-bottom: 150px;
	width: 100%;
}

header {
	z-index: 1;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--navbar-height);
	background-color: var(--header);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 20px var(--card-shadow);
}

.logo {
	object-fit: contain;
	height: calc(var(--navbar-height) - 1.5rem);
	position: absolute;
	left: 1rem;
}

.logo img {
	max-height: 100%;
	max-width: 100%;
}

header nav {
	flex: 1 0;
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: max(0px, calc(max(1.5rem, 2.5vw) - 1.6em));
}

@media (max-width: 1130px) {
	.desktop {
		display: none;
	}

	header {
		justify-content: flex-start;
	}

	header nav {
		z-index: 1;
		position: absolute;
		top: var(--navbar-height);
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 0;
		width: 100%;
		left: 0px;
		padding-bottom: 1rem;
		opacity: 1;
		/* transition: opacity; */
		transition-duration: 0s;
		transition-timing-function: ease-in-out;
	}

	header nav.hidden {
		/* opacity: 0;
    transition-duration: 0.2s; */
		pointer-events: none;
	}

	header nav::before {
		background-color: var(--header);
		position: absolute;
		content: ' ';
		top: 0;
		left: 0;
		right: 0;
		height: 100%;
		opacity: 1;
		transition: opacity 0.2s ease-in-out;
	}

	header nav.hidden::before {
		transition-delay: 0.1s;
		opacity: 0;
	}

	@media (prefers-reduced-motion: no-preference) {
		header nav::before {
			transition-property: height;
			transition-duration: attr(dur ms);
			transition-timing-function: ease-in-out;
			transition-delay: 0s;
		}

		header nav.hidden::before {
			opacity: 1;
			transition-delay: 0.2s;
			height: 0%;
		}
	}
}

a.link:not(.button) {
	text-decoration: none;
	color: var(--primary-55);
	transition-property: color, text-decoration;
	transition-duration: 0.1s;
	transition-timing-function: ease-in-out;
}

a.link:not(.button):hover {
	color: var(--primary-20);
	text-decoration: underline dotted var(--primary-20) 3px;
}

button {
	padding-block: 0;
	padding-inline: 0;
	line-height: inherit;
}

select {
	padding-block: 0;
	padding-inline: 0;
}

select:hover {
	cursor: pointer;
}

option {
	padding-block: 0;
	padding-inline: 0;
}

sup {
	vertical-align: top;
	font-size: calc(1em * 2 / 3);
	font-weight: 600;
}

code {
	background-color: var(--secondary);
	padding: 0.1em 0.4em;
	border-radius: var(--border-radius);
	text-decoration: none;
	color: var(--text);
}

.button {
	font-family: 'Lexend', sans-serif;
	font-size: var(--body-size);
	color: var(--text);
	border: none;
	border-radius: var(--border-radius);
	background-color: var(--secondary);
	padding: var(--standard-padding);
	transition-property: backgound-color, color;
	transition-duration: 0.1s;
	transition-timing-function: ease-in-out;
}

.button:hover,
.button.selected {
	background-color: var(--primary-30);
	color: var(--text-alt);
	cursor: pointer;
}

.button.link {
	text-decoration: none;
	color: var(--primary-20);
	background-color: var(--primary-90);
	text-align: center;
}

.button.link:hover {
	background-color: var(--primary-30);
	color: var(--text-alt);
}

.button:not(.icon) i {
	margin-right: var(--icon-margin);
}

.button:not(.icon) i+span {
	margin-right: calc(var(--icon-margin) * 1);
}

.button.important {
	background-color: var(--primary-30);
	color: var(--text-alt);
	/* padding: var(--thick-padding); */
}

.button.important:hover {
	background-color: var(--primary-40);
	color: var(--text-alt);
}

header nav .button.nav {
	background: none;
	color: var(--nav);
	font-size: var(--nav-size);
	text-decoration: none;
	padding: var(--thin-padding-v) 0.75em;
	transform: scale(1);
	transition: transform 0.2s ease-in-out;
}

header nav .button.nav:hover {
	transform: scale(1.1);
}

#socials {
	height: calc(var(--navbar-height) - 2rem);
	right: 1rem;
	position: absolute;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: var(--icon-margin);
}

.button.icon:not(.link) {
	padding: 0;
	box-sizing: border-box;
	background: none;
	text-decoration: none;
	color: var(--nav);
	font-size: calc(var(--nav-size) * 1.5);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.button.icon i {
	height: auto;
	padding: var(--icon-padding);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.button.icon i::before {
	margin: 0 0.05em -0.05em 0.05em;
	line-height: 1.05em
}

.button.icon.square i {
	aspect-ratio: 1;
}

.button i::before {
	display: flex;
	transform: scale(1);
	transition: transform 0.2s ease-in-out;
}

.button.animating i::before {
	animation: icon-click 0.5s ease-in-out 0s 1 forwards;
}

.button:not(.selected):not(.animating):not(.mouseover):hover i::before {
	transform: scale(1.12);
}

#open-nav {
	display: none;
	position: absolute;
	left: 1rem;
}

@media (max-width: 1130px) {
	header nav .button.nav {
		font-size: calc(var(--nav-size) * 1.125);
		width: 100%;
		padding: 1em;
		margin: 0;
		border-radius: 0;
		transition: background-color 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
		opacity: 1;
		text-decoration: none;
		text-align: center;
		box-sizing: border-box;
	}

	header nav.hidden .button.nav {
		display: none;
	}

	@media (prefers-reduced-motion: reduce) {
		header nav.hidden .button.nav {
			opacity: 0;
		}
	}

	header nav .button.nav:hover {
		background-color: var(--primary-30);
		transform: scale(1.06);
	}

	#open-nav {
		display: flex;
		font-size: calc(var(--nav-size) * 2);
	}
}

.section-header {
	top: var(--navbar-height);
	width: 100%;
	height: var(--section-header-height);
	overflow-x: visible;
	overflow-y: hidden;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	background: none;
	object-fit: cover;
}

.section-header>div {
	width: 100%;
	position: absolute;
	top: 0px;
	bottom: 0px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.section-header > img {
	z-index: 0;
	position: fixed;
	width: max(110%, 800px);
	height: calc(var(--section-header-height) + 10vw);
	margin: -5vw 0;
	object-fit: cover;
	filter: var(--section-filter);
}

#reload-indicator {
	z-index: 1;
	content: '';
	font-size: var(--h3-size);
	color: var(--text-alt);
	text-shadow: var(--section-shadow);
	width: 50px;
	height: 50px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: calc(-25px - 0.5 * var(--navbar-height));
	transform: translateY(0px);
	transition-property: transform, filter;
	transition-duration: 0s;
	transition-timing-function: ease-in-out;
}

.section-header h1 {
	text-align: center;
	margin: 0px;
	color: var(--section);
	text-shadow: var(--section-shadow);
}

#hero-logo {
	height: min(260px, 42vw);
	width: auto;
	filter: drop-shadow(0 0 0.5em hsl(0, 0%, 0%, 80%));
}

/* .section-header h1:not(:last-child) {
  margin-bottom: 1rem;
} */

.section-header p {
	margin: 0px;
	font-size: var(--h4-size);
	font-weight: 600;
	text-align: center;
	color: var(--section);
	text-shadow: var(--section-shadow);
	line-height: var(--heading-line-height);
}

.section-header .button {
	font-size: var(--h5-size);
	font-weight: 600;
	margin-top: 0.5rem;
	box-shadow: var(--section-shadow);
}

.section-header select {
	font-size: var(--h4-size);
	text-align: center;
	padding: 0 0.3rem 0 0;
	height: calc(1em * var(--heading-line-height));
	background: none;
	border: none;
	font-weight: 600;
	color: var(--section);
	font-family: inherit;
	text-shadow: var(--section-shadow);
	transform: scale(1);
	transition: transform 0.2s ease-in-out;
}

.section-header select:hover {
	transform: scale(1.05);
}

.section-header select:focus {
	outline: none;
}

.section-header select::-ms-expand {
	display: none;
}

.section-header option {
	color: var(--text);
	font-size: var(--h5-size);
	text-align: center;
}

.inner {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	width: var(--inner-width);
}

.below-header {
	margin-top: var(--grid-margin-top);
}

@media (min-width: 601px) {
	:has(>.tooltip) {
		position: relative;
	}
}

@keyframes tooltip {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

.tooltip {
	text-align: center;
	white-space: wrap;
	word-wrap: break-word;
	pointer-events: none;
	z-index: 2;
	display: block;
	position: absolute;
	bottom: auto;
	width: min(45vw, 300px);
	box-sizing: border-box;
	border: 1px solid var(--tooltip-border);
	border-radius: var(--border-radius);
	content: attr(tooltip);
	background-color: var(--background);
	box-shadow: 0px 5px 9px var(--card-shadow);
	font-family: 'Lexend', sans-serif;
	font-weight: 400;
	color: var(--text);
	font-size: var(--nav-size);
	line-height: var(--line-height);
	padding: var(--tooltip-padding);
	opacity: 0;
	transform: translateY(calc(-100% - 2rem + 5px));
	transition-property: opacity, transform;
	transition-duration: 0.3s;
	transition-timing-function: ease-in-out;
}

.tooltip.right {
	left: max(-20px, -2vw);
	right: auto;
}

.tooltip.left {
	right: max(-20px, -2vw);
	left: auto;
}

@media (max-width: 600px) {

	.tooltip,
	.tooltip.left,
	.tooltip.right {
		width: auto;
		max-width: none;
	}

	.tooltip.right {
		left: 7.5%;
		right: 20%;
	}

	.tooltip.left {
		left: 20%;
		right: 7.5%;
	}
}

:has(>.tooltip):hover>.tooltip {
	transform: translateY(calc(-100% - 2rem));
	opacity: 1;
	transition-delay: 0.3s;
}

/* CONTACT */

form {
	width: min(100%, 750px);
	margin-top: 50px;
	text-align: left;
}

form label h3 {
	font-size: var(--h5-size);
	margin: 0 0 0.5rem 0;
}

.form-container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
	gap: 1rem;
	flex-wrap: wrap;
}

.form-container>div {
	min-width: 200px;
}

form input {
	line-height: inherit;
	box-sizing: border-box;
	font-size: var(--body-size);
	font-family: inherit;
	border: none;
	border-radius: var(--border-radius);
	background-color: var(--secondary);
	padding: var(--standard-padding);
	width: 100%;
}

form textarea {
	line-height: inherit;
	box-sizing: border-box;
	resize: none;
	font-size: var(--body-size);
	font-family: inherit;
	width: 100%;
	margin: 0;
	background-color: var(--secondary);
	border: none;
	border-radius: var(--border-radius);
	padding: var(--standard-padding);
}

form select {
	width: 100%;
	font-size: var(--body-size);
	height: var(--standard-height);
	color: var(--text);
	font-family: inherit;
	margin: 0;
	border: none;
	padding: var(--standard-padding);
	border-radius: var(--border-radius);
	background-color: var(--secondary);
}

form option {
	font-size: var(--body-size);
	font-family: inherit;
	color: var(--text);
}

form .button {
	width: 100%;
}