:root {
	--ss-header-minheight: 64px;
	--ss-border: #169c431a;
}

body {
	font-family: 'Inter', sans-serif;
	grid-template-rows: auto 1fr auto;

	> header {
		background-color: rgb(246 248 246 / 0.8);
		backdrop-filter: blur(12px);
	}
}
body.scroll-passed-header > header {
	border-color: var(--ss-border);
}
html:not(.dark) {
	main, #bread-crumbs {
		background-color: #f6f8f6;
	}
}

.ssfrag-signin {
	button {
		background-color: #169c43;
		color: #fff;
		font-family: 'Inter', sans-serif;
		border-radius: 8px;
	}
}

main {
	display: grid;
}

body > header {
	& h1 a {
		span {
			font-weight: 800;
			font-size: 20px;
		}
	}

	html.dark & {
		background-color: rgb(51 51 51 / 0.9);
	}
}

#full-menu, #mini-menu {
	.c2a {
		a {
			background-color: #169c43;
			border-radius: 8px;
			padding: 8px 16px;
			font-weight: 700;
			color: #fff;

			transition-property: all;
			transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
			transition-duration: 150ms;

			&:hover {
				text-decoration: none;
				background-color: #169c43e6;
			}
		}
	}
}

#mini-menu nav li.c2a {
	margin: 20px 10px;
	text-align: center;
	a {
		padding: 4px 0;
		border: unset;
		background-color: unset;
	}
}

body > header img {
	max-height: 36px;
	margin-right: 10px;
}


.ssrow-type-c2a {
	.ssfrag-component > div {
		display: grid;
		grid-template-columns: 1fr auto;
		column-gap: 60px;
		margin-bottom: 60px;

		h1 {
			grid-area: title;
			align-self: end;
			line-height: 100%;
		}
		p {
			font-size: 18px;
			html:not(.dark) & {
				color: #475569;
			}
			margin-top: 20px;
		}
		span a {
			color: #fff;
			background-color: #169c43;
			&:hover {
				background-color: #169c43e6;
			}
			&::after {
				content: '  ->';
			}
		}
		a {
			font-size: 18px;
			margin-top: 20px;
			background-color: #fff;
			font-weight: 700;
			color: #0f172a;
			padding: 16px 32px;
			display: inline-block;

			border: 1px solid #e2e8f0;
			html.dark & {
				border-color: #000;
			}
			border-radius: 12px;
			margin-right: 16px;

			transition-property: all;
			transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
			transition-duration: 150ms;

			&:hover {
				text-decoration: none;
				background-color: #f8fafc;
			}

			&.primary {
				color: #fff;
				background-color: #169c43;
				&:hover {
					background-color: #169c43e6;
				}
				&::after {
					content: '  ->';
				}
			}
		}

		h1 {
			html:not(.dark) & {
				color: #0f172a;
			}
			font-weight: 900;
			font-size: 60px;
			span {
				color: #169c43;
			}
		}

		figure {
			grid-area: image;
			img {
				--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
				--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
				--tw-ring-offset-shadow: 0 0 #0000;
				--tw-ring-shadow: 0 0 #0000;
				box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
				object-fit: cover;
				aspect-ratio: 1 / 1;
				border-radius: 16px;
				max-width: 512px;
			}
		}
		section {
			grid-area: content;
		}
		grid-template-areas:
			"title image"
			"content image"
		;
		@container (max-width: 1000px) {
			grid-template-columns: 1fr;
			grid-template-areas:
				"title"
				"image"
				"content"
			;
			figure img {
				aspect-ratio: 2 / 1;
				margin-top: 16px;
				max-width: 100cqw;
				width: 100cqw;
			}
		}
	}
}
.ssrow-type-c2a2 {
	background-color: #eaf3ec;
	padding-block: 80px;

	html.dark & {
		background-color: #1a1a1a;
	}

	[data-elm="byline"] {
		color: #169c43;
		text-transform: uppercase;
		font-weight: 700;
		margin-bottom: 16px;
	}
	h1 {
		font-weight: 700;
		font-size: 36px;
		html:not(.dark) & {
			color: #0f172a;
		}
		margin-bottom: 24px;
	}

	p:not(.sections *) {
		html:not(.dark) & {
			color: #475569;
		}
		font-size: 20px;
		max-width: 750px;
		margin-bottom: 32px;

		span {
			font-weight: bold;
		}
	}

	.sections {
		display: grid;
		grid-template-columns: 1fr 1fr;
		@container (max-width: 800px) {
			grid-template-columns: 1fr;
		}
		gap: 32px;
		padding-block: 16px;

		section {
			background-color: #fff;
			border: 1px solid #169c431a;
			border-radius: 16px;
			padding: 32px;

			h3 {
				font-weight: 700;
				color: #0f172a;
				margin-bottom: 12px;

				&::before {
					content: 'o/';
					display: block;
					padding: 16px;
					width: 48px;
					height: 48px;
					border-radius: 16px;
					color: #169c43;
					background-color: #e7f5ec;
					margin-bottom: 24px;
				}
			}

			p {
				color: #475569;
			}
		}
	}
}
.ssrow-type-c2ab {
	padding-block: 96px;
	h1 {
		font-size: 48px;
		text-align: center;
	}
	p:not(.sections *) {
		html:not(.dark) & {
			color: #475569;
		}
		font-size: 20px;
		margin-bottom: 32px;
		text-align: center;

		span {
			font-weight: bold;
		}
	}

	.sections {
		margin-top: 64px;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 32px;
		h3 {
			font-size: 24px;
			margin-block: 24px 8px;
		}
		img {
			border-radius: 16px;
			aspect-ratio: 1 / 1;
			object-fit: cover;
		}
		p {
			html:not(.dark) & {
				color: #475569;
			}
		}
		@container (max-width: 1000px) {
			grid-template-columns: 1fr;
			img {
				aspect-ratio: 2 / 1;
			}
			section {
				margin-bottom: 32px;
			}
		}
	}
}

.ssrow-type-buttons {
	background-color: #0f172a;
	padding-block: 96px;

	.ssfrag-component > div {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));;
		gap: 64px;
		align-items: center;

		h1 {
			font-size: 48px;
			text-transform: uppercase;
			font-style: italic;
			font-weight: 900;
			color: #fff;
			margin-bottom: 24px;

			span {
				color: #169c43;
				text-decoration-line: underline;
			}
		}

		p {
			font-size: 20px;
			color: #cbd5e1;
		}

		ul {
			margin-top: 24px;
			color: #169c43;
		}
		ul, ol {
			padding-left: 20px;
		}

		> figure div {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 16px;

			img {
				width: auto;
				border-radius: 16px;
				aspect-ratio: 1 / 1;
				object-fit: cover;
			}
		}
		@container (max-width: 1000px) {
			grid-template-columns: 1fr;
		}
	}
}

.ssrow-type-whats {
	padding-block: 96px;
	text-align: center;

	> div {
		display: grid;
		justify-self: center;
		background-color: #169c43;
		max-width: 960px;
		border-radius: 32px;
		padding: 80px;
	}

	h1 {
		font-size: 60px;
		color: #fff;
	}
	p {
		font-size: 20px;
		color: #ffffffe6;
		margin-bottom: 40px;
		&:last-child {
			margin-bottom: 0;
		}
	}

	span a {
		color: #169c43;
		background-color: #fff;
		box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

		&:hover {
			background-color: #f8fafc;
		}
	}
	a {
		margin-top: 20px;
		font-weight: 700;
		color: #fff;
		padding: 16px 32px;
		display: inline-block;
		font-size: 20px;

		border: 1px solid #ffffff4d;
		border-radius: 12px;
		margin-right: 16px;

		transition-property: all;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		transition-duration: 150ms;

		&:hover {
			text-decoration: none;
			background-color: #ffffff1a;
		}
	}
	@container (max-width: 1000px) {
		> div {
			padding-inline: 20px;
		}
	}
}

.ssrow.ssrow-type-draft {
	background-color: #1a4a7a;
	background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
	background-size: 20px 20px;
	padding-block: 24px;
	border-block: 2px dashed #ffffff;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	color: #fff;
}

.ssrow.ssrow-type-roadblock {
	background-color: #fffbef;
	color: #444;
	padding: 20px 30px;
	margin: 10px 0;
	border: 2px solid #ffe58f;
	border-left: 15px solid;
	border-image: repeating-linear-gradient(
		-45deg,
		#fadb14,
		#fadb14 10px,
		#222 10px,
		#222 20px
	) 10;
}

html:not(.dark) #ssfoot {
	background-color: #f8fafc;
}


#ssfoot {
	padding-block: 64px;
	font-size: 18px;
	html:not(.dark) & {
		color: #475569;
	}

	> div {
		gap: 48px;
	}
	.sstext {
		h1 {
			html:not(.dark) & {
				color: #0f172a;
			}
			font-size: 24px;
			margin-bottom: 24px;
			font-weight: 800;
		}
		p {
			margin-bottom: 32px;
			/* max-width: 500px; */
		}
	}
	.sscol-1, .sscontact {
		h3 {
			margin-bottom: 24px;
		}
		li, p {
			margin-top: 8px;
		}
	}
}

main {
	h1, h2, h3, h4, h5, h6 {
		margin-top: 35px;
		margin-bottom: 10px;
		&:first-child {
			margin-top: 0;
		}
	}
	p {
		margin-block: 10px;
		font-size: 18px;
	}
	h1 {
		font-size: 44px;
	}
	h2 {
		font-size: 35px;
	}
	h3 {
		font-size: 28px;
	}
	h4 {
		font-size: 23px;
	}
	h5 {
		font-size: 21px;
	}
	h6 {
		font-size: 19px;
	}
}


.ssstyle-bylaws {

	article {
		margin-bottom: 80px;
		> section {

			scroll-margin-top: 130px;
			display: grid;
			grid-template-columns: auto 1fr;
			grid-template-areas:
				"num head"
				"num body"
			;
			@container (max-width: 550px) {
				grid-template-areas:
					"num head"
					"body body"
				;
			}
			margin-bottom: 80px;
			gap: 20px;
			html:not(.dark) & {
				color: #3e4a3d;
			}

			> div:nth-child(1) {
				grid-area: num;
			}
			> div:nth-child(2) {
				grid-area: head;
			}
			> div:nth-child(3) {
				grid-area: body;
			}

			&:first-of-type {
				margin-top: 80px;
			}

			* {
				scroll-margin-top: 100px;
			}
		}
		*:last-child {
			margin-bottom: 0px;
		}
	}

	.heading {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 14px;
		margin-top: 35px !important;
		> * {
			display: inline-block;
			margin-top: 0px;
		}
		.sectionNumber {
			&:has(+ h3) {
				font-size: 28px;
			}
			&:has(+ h4) {
				font-size: 23px;
			}
			&:has(+ h5) {
				font-size: 21px;
			}
			&:has(+ h6) {
				font-size: 19px;
			}
			font-weight: 700;
			color: #169c43;
		}
	}

	.box {
		margin-top:48px;
		background-color: #169c43;
		border-radius: 16px;
		margin-bottom: 96px;
		padding: 32px;
		color: #fff;
		display: grid;
		grid-template-columns: 1fr auto;
		@container (max-width: 600px) {
			grid-template-columns: 1fr;
		}
		gap: 20px 80px;


		[data-elm="actions"] {
			align-self: center;
		}

		h1 {
			font-size: 20px;
		}

		p {
			color: #ededed;
			font-size: 16px;
		}

		a {
			background-color: #fff;
			color: #169c43;
			padding: 12px 24px;
			border-radius: 8px;
			display: inline-block;
			font-weight: 700;
			&:hover {
				text-decoration: none;
			}
		}
	}

	*:not(.heading) > .sectionNumber {
		background-color: #169c43;
		color: #fff;
		width: 40px;
		height: 40px;
		border-radius: 10px;
		display: grid;
		align-content: center;
		justify-content: center;
		font-weight: 700;
	}

	figure {
		container-type: inline-size;
		img {
			width: 100cqw;
			max-height: 60cqw;
			object-fit: cover;
		}
	}

	nav {
		@container (max-width: 1000px) {
			display: none;
		}
		> div {
			position: sticky;
			align-self: start;
			height: fit-content;
			will-change: top;
			padding-bottom: 30px;

			ul, ol {
				list-style-type: none;
				padding-left: 0px;
				ul, ol {
					padding-left: 10px;
				}
			}

			h1 {
				color: #71717a;
				html.dark & {
					color: #888;
				}
				text-transform: uppercase;
				font-size: 16px;
				margin-block: 20px 20px !important;
			}

			p {
				font-size: 16px;
			}
			a {
				color: #71717a;
				html.dark & {
					color: #888;
				}
				&:hover {
					color: #18181b;
					html.dark & {
						color: #eee;
					}
				}
			}
		}
	}

	> div {
		display: grid;
		grid-template-columns: 260px auto;
		@container (max-width: 1000px) {
			grid-template-columns: 1fr;
		}
		gap: 64px;
		max-width: 1000px;
		justify-self: center;
	}

	article {
		ul, ol {
			padding-left: 40px;
			margin-block: 20px;

			li {
				margin-block: 10px;
			}
		}
	}
}