/* #region @keyframes */
@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes slideUp {
	from {
		opacity: 0;
		translate: 0 var(--px48);
	}

	to {
		opacity: 1;
		translate: 0;
	}
}

/* #endregion */
/* #region @prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-delay: 0s !important;
		animation-duration: 0s !important;
		scroll-behavior: auto !important;
		transition-delay: 0s !important;
		transition-duration: 0s !important;
	}

	/* For hero background video */
	video[autoplay] {
		display: none !important;
	}

	.hero {
		background: linear-gradient(to bottom, var(--blue900-70), transparent), url("https://ripcord.sirv.com/SBSD/river-poster.jpg") center/cover no-repeat !important;
	}
}

/* #endregion */
/* #region Elements */
@view-transition {
	navigation: auto;
}

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

a {
	color: var(--green700);
	text-underline-offset: var(--px03);
	transition: var(--transition);
	word-break: break-all;

	&:hover {
		color: var(--green900);
	}

	&.btn {
		word-break: normal;
	}
}

body {
	background-color: var(--blue900);
	color: var(--blue700);
	font-family: var(--font-sans);
}

button {
	background: none;
	border: none;
	cursor: pointer;
}

h1, h2, h3, h4 {
	text-wrap: balance;
}

hr {
	border: var(--px01) dashed transparent;
	border-top-color: var(--blue500);
	margin-block: var(--px48);
}

html {
	scroll-behavior: smooth;
	scrollbar-gutter: stable;

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

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

li {
	font-size: var(--fz18);
	line-height: 1.4;
	margin-left: var(--px16);
	padding-left: var(--px08);

	+ li {
		padding-top: var(--px12);
	}
}

p {
	font-size: var(--fz18);
	line-height: 1.6;
	margin-bottom: var(--px20);
	text-wrap: pretty;
}

ul {
	margin-bottom: var(--px32);
}

/* #endregion */
/* #region Global */
.btn {
	background-color: var(--blue700);
	border-radius: var(--radius);
	color: white !important;
	display: inline-block;
	font-size: var(--fz14);
	font-weight: 700;
	letter-spacing: var(--px01);
	margin-top: 0;
	padding: var(--px16) var(--px20);
	text-decoration: none;
	text-transform: uppercase;
	transition: var(--transition);

	&:hover {
		background-color: var(--blue500);
		translate: 0 -2px;
	}
}

.content {
	margin-inline: auto;
	width: min(90%, var(--content-max-width, 1200px));
}

.divider {
	background-color: var(--blue500-30);
	display: block;
	height: var(--px06);
	margin-block: var(--px40) var(--px48);
	width: min(60px, 20%);
}

.new {
	display: inline-block;
	position: relative;

	&::after {
		background-color: hsl(130 60 90);
		border-radius: var(--radius-pill);
		color: hsl(130 60 22);
		content: "new";
		font-size: 10px;
		font-weight: 700;
		letter-spacing: var(--px01);
		line-height: 1;
		padding: var(--px06) var(--px08);
		position: absolute;
		right: -48px;
		text-box: trim-both cap alphabetic;
		text-transform: uppercase;
		top: -6px;
	}
}

.nobullet {
	list-style-type: none;

	li {
		margin-left: 0;
		padding-left: 0;
	}
}

.pay-icon {
	font-size: var(--fz14);
	margin-left: var(--px06);
	translate: 0 -1px;
}

.sidebox {
	float: right;
	margin: 0 0 var(--px32) var(--px64);
	max-width: 300px;

	@media (width < 800px) {
		display: none;
	}

	img {
		border-radius: var(--radius);
	}
}

.smtext {
	font-size: var(--fz16);
}

.word-break {
	word-break: break-all;
}

/* #endregion */
/* #region Nav */
.nav-contain {
	@media (width < 1200px) {
		justify-self: end;
	}
}

.nav-grid {
	--hover-color: var(--green100);
	display: grid;
	gap: var(--px32);
	grid-auto-flow: column;

	@media (width < 1200px) {
		--mobile-menu-width: 60vw;
		align-content: start;
		backdrop-filter: blur(var(--px04));
		background-color: var(--blue900-90);
		grid-auto-flow: row;
		height: 100vh;
		justify-content: center;
		padding: var(--px80) var(--px16) 0;
		position: absolute;
		right: 0;
		top: 0;
		translate: var(--mobile-menu-width) 0;
		transition: var(--transition);
		width: var(--mobile-menu-width);
	}

	@media (width < 600px) {
		--mobile-menu-width: 100vw;
	}

	a {
		color: var(--green500);
		font-size: var(--fz16);
		font-weight: 600;
		text-decoration: none;
		text-transform: uppercase;
		transition: var(--transition);

		&:hover {
			color: var(--hover-color);
			text-decoration: none;
		}

		@media (width < 1200px) {
			font-size: var(--fz20);
			text-decoration: none;
		}
	}
}

/* Nav Menu Opens */
.nav-open .nav-grid {
	@media (width < 1200px) {
		translate: 0;
	}
}

.nav-open .nav-toggle {
	@media (width < 1200px) {
		display: block;
		padding: 0;
		/* position: relative here creates stacking context */
		position: relative;
		rotate: 270deg;
		transition: .8s;
		z-index: 10;
	}
}

.nav-toggle {
	display: none;

	@media (width < 1200px) {
		color: var(--green300);
		display: block;
		font-size: var(--fz28);
		padding: var(--px16);
	}
}

/* #endregion */
/* #region Header */
.header {
	background-color: var(--blue900-90);
	padding-block: var(--px24);
	position: fixed;
	width: 100%;
	z-index: 10;

	&.scrolled {
		padding-block: var(--px16);
	}
}

.header-grid {
	display: grid;
	justify-items: center;

	@media (width < 1200px) {
		align-items: center;
		grid-template-columns: auto auto;
	}

	.logo {
		margin-bottom: var(--px32);
		width: 250px;

		@media (width < 1200px) {
			justify-self: start;
			margin-bottom: 0;
			width: 200px;
		}

		@media (width < 600px) {
			width: 150px;
		}

		&.scrolled {
			margin-bottom: var(--px16);
			width: 200px;
		}
	}
}

/* #endregion */
/* #region Footer */
.footer {
	background-color: var(--blue900);
	color: var(--white-70);
	padding: var(--px48) 0 var(--px96);
	text-align: center;

	a {
		color: var(--green500);

		&:hover {
			color: var(--green300);
		}
	}

	i {
		font-size: var(--fz32);
	}

	p {
		font-size: var(--fz16);
	}
}

.footer-grid {
	--col-min-width: 200px;
	display: grid;
	gap: var(--px32) 5vw;
	grid-template-columns: repeat(auto-fit, minmax(var(--col-min-width), auto));
	justify-content: center;
	margin-bottom: var(--px32);

	a:has(i) {
		grid-column: 1/span 2;
		grid-row: 2;
	}
}

/* #endregion */
/* #region Hero */
.hero {
	background-color: var(--blue900-30);
	padding-block: 18vh var(--px128);

	@media (width < 600px) {
		padding-top: 10vh;
	}
}

.hero-card {
	border-radius: var(--radius-lg);
	color: white;
	padding: var(--px32);

	&.card--announcements {
		background-color: var(--blue900-70);
		grid-column: 1/-1;

		a {
			color: var(--green500);

			&:hover {
				color: var(--green300);
			}
		}

		> div {
			display: grid;
			gap: var(--px08);
			grid-auto-flow: column;
			justify-content: start;
		}

		.color-blue {
			color: deepskyblue;
		}

		.color-green {
			color: limegreen;
		}

		.color-orange {
			color: orange;
		}

		.color-purple {
			color: mediumpurple;
		}

		.color-red {
			color: red;
		}
	}

	&.card--billpay {
		background-color: var(--green500-70);

		.btn {
			background-color: var(--green900);

			&:hover {
				background-color: var(--green100);
				color: var(--green700) !important;
			}
		}
	}

	&.card--meetings {
		background-color: var(--blue500-70);
		grid-column: 1/4;

		@media (width < 1200px) {
			grid-column: 1/-1
		}

		.btn {
			&:hover {
				color: white;
			}
		}
	}
}

.hero-card-grid {
	display: grid;
	gap: var(--px16);
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto auto;

	@media (width < 1200px) {
		grid-template-columns: auto;
	}

	h2 {
		font-size: var(--fz28);
		font-weight: 700;
		margin-bottom: var(--px40);

		i {
			font-size: var(--fz28);
		}
	}

	h3 {
		line-height: 1.5;
		margin-bottom: var(--px12);
	}

	i {
		font-size: var(--px20);
		margin-right: var(--px12);

		@media (width < 600px) {
			display: none;
		}
	}

	p {
		max-width: 80ch;
	}

	.btn {
		margin-top: var(--px16);
	}
}

.hero-header {
	color: var(--white-90);
	font-weight: 400;
	padding-block: var(--px64);
	text-align: center;

	@media (width < 1200px) {
		padding-block: var(--px96) var(--px160);
	}

	h1 {
		animation: slideUp 1s ease-in-out 1s both;
		font-size: var(--fz60);
		font-weight: 600;
		line-height: 1;
		margin-bottom: var(--px32);
	}

	.location {
		animation: fadeIn 1s ease-in-out 2s both;
		font-size: var(--fz28);
		letter-spacing: var(--px08);
		text-transform: uppercase;
	}

	.tagline {
		animation: slideUp 1s ease-in-out .5s both;
		font-size: var(--fz48);
		font-weight: 600;
		line-height: 1;
		margin-bottom: var(--px16);
	}
}

.hero-video {
	bottom: 0;
	height: auto;
	left: 50%;
	min-height: 100%;
	min-width: 100%;
	position: fixed;
	top: 0;
	translate: -50%;
	width: auto;
	z-index: -10;
}

/* #endregion */
/* #region Sub */
.sub {
	background-color: white;
	min-height: 70vh;
	padding-block: 20vh var(--px64);

	a {
		color: var(--green700);
		text-decoration: underline;
	}

	h1 {
		font-size: var(--fz32);
		font-weight: 700;
		margin-bottom: var(--px16);
		text-transform: uppercase;
	}

	h2 {
		font-size: var(--fz24);
		font-weight: 600;
	}

	h3 {
		font-size: var(--fz24);
		font-weight: 600;
		margin-block: var(--px48) var(--px16);
	}

	h4 {
		font-size: var(--fz16);
		font-weight: 700;
		margin: var(--px32) 0 var(--px08);
		text-transform: uppercase;
	}
}

/* #endregion */
/* #region Sub-Contact */
.sub-contact-emergency {
	color: crimson;
	font-size: var(--fz18);
	font-weight: 600;

	i {
		margin-right: var(--px08);
	}
}

.sub-contact-grid {
	--col-min-width: 300px;
	display: grid;
	gap: 0 10vw;
	grid-template-columns: repeat(auto-fit, minmax(var(--col-min-width), auto));
	justify-content: start;
}

.sub-contact-hours p {
	font-size: var(--fz16);
}

/* #endregion */
/* #region Sub-Docs */
.sub-docs-grid {
	--col-min-width: 250px;
	display: grid;
	gap: 0 10vw;
	grid-template-columns: repeat(auto-fit, minmax(var(--col-min-width), auto));
	justify-content: start;

	a {
		font-size: var(--fz16);
	}

	h3 {
		margin-top: 0;
	}
}

.sub-docs-minutes-grid {
	--col-min-width: 250px;
	display: grid;
	gap: var(--px16);
	grid-template-columns: repeat(auto-fit, minmax(var(--col-min-width), 1fr));
	justify-content: start;

	a {
		font-weight: 500;
		word-break: normal;
	}

	> div {
		background-color: var(--blue100);
		border-radius: var(--radius);
		padding: var(--px32);
	}

	h4 {
		margin-block: 0 var(--px16);
	}

	li {
		font-size: var(--fz14);
	}

	ul {
		margin-bottom: 0;
	}
}

/* #endregion */