/**
 * Theme Name: School 2025
 */
@import 'styles/reset.css';
@import 'styles/setup.css';
@import 'styles/structure.css';
@import 'styles/typography.css';

@import 'styles/modules.css';

@import 'styles/program-list.css';

@import 'styles/component-list.css';
@import 'styles/module-list.css';


html {
/* 	background-color: yellow; */

	--color: #4cffa7;
	--ghost: rgb(0 0 0 / 0.1);
}

.ai-spotter .p1 {
	color: red;
}

masthead-module {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.missing-component {
	border: 1px solid red;
	padding: 1em;
	margin-block: 1em;
}

body.sheriffderek-theme {

}

body.ghost-theme {
	background-color: rgb(0 0 0 / 0.05);
}

section.modules-stuff {
	display: grid;
	gap: 50px;
	@media (width > 700px) {
		grid-template-columns: 1fr 1fr;
	}
}



.site-header {

}

.user-menu, .main-menu ul {
	display: flex;
	flex-direction: row;
	align-items: center;
	
	flex-wrap: wrap;

	gap: 1rem;
}



form {
	display: grid;
	gap: 20px;
	justify-content: start;
	input-field {
		display: grid;
		justify-content: start;
	}
}

update-flag {
	display: block;
	padding: 0.5em 1em;
	background-color: rgb(0 0 0 / 0.1);
	&.saved {
		background-color: lightgreen;
	}
}


.section-hash-link {
	position: absolute;
	top: 0;
	left: 0;

	transform: translate(-100%, 1rem);
	opacity: 0.03;
	
	&:hover {
		opacity: 0.5;
	}
}



[role='list'] {
	list-style: initial;
	margin: initial;
	padding: initial;
	padding-left: 1.1em;
}




.workshop-card {
	display: block;
	padding: 1em;
	background-color: rgb(0 0 0 / 0.05);
	text-decoration: none;

	&.complete {
		background-color: var(--ghost);
	}
	&.current {
		background-color: lightgreen;
	}
}





.page-section.goals {
/* 	background-color: yellow; */
}





.site-footer {
	padding-bottom: 150px;
}




body.home.public {
	main {
		background-color: var(--color);
	}
}


.program-dashboard {
	section {
		border: 1px solid var(--ghost);
		margin-top: 50px;
		padding: 10px;
	}

	.next {
/* 		too loose */
	}

	.link {
		color: blue;
		text-decoration: underline;
	}
}

.danger-area {
	background-color: hsl(0 100% 95%);
}