/* OVERVIEW:
 *
 * This file defines basic style definitions for the package. Site specific
 * changes should be made in their own file.
 */

body { margin: 0 }

/* The header element style definitions.
 * This style should be applied to whatever header is defined.
 */
#header {
	background-color: white;
	border-bottom: 1px ridge grey;

	position: sticky;
	top: 0;
	z-index: 2;

}

.header-grid {
	display: grid;
	grid-template-columns: 50% 50%;
}

.header-title {
	display: flex;
	padding: 1em;
	h1, p {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	h1 { padding: 0 0.25em 0 0; }
	p { padding: 0 0 0 1em; }
	a:link, a:visited, a:hover, a:active {
		text-decoration: none;
		color: black;
	}
}

.header-menu {
	display: flex;
	justify-content: end;
	align-items: center;
	height: 100%;
	margin: 0 1em;
	z-index: 3;
}

#header-links-hint {
	padding: 0 1em;
	cursor: pointer;
}

/* header hamburger menu icon
 */
.header-menu-icon {
	cursor: pointer;
	height: 2em;
	width: 2em;
	padding: 0.5em;
	/* border: 2px solid grey; */
	border-radius: 8px;
	display: grid;
	grid-template-rows: auto auto auto;
	align-items: center;
	justify-items: center;
}

.header-menu-icon div {
	height: 1px;
	width: 100%;
	border-top: 1px solid black;
}

.header-menu-icon:hover {
	/* border-width: 3px; */
	background-color: lightgrey;
	div { border-width: 2px; }
}

/* header close icon
 */
.header-close-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	cursor: pointer;
	/* border: 1px solid black; */
	color: #333;
	height: 3em;
	width: 3em;
	border-radius: 8px;
}
.header-close-icon:hover {
	/* border-width: 3px; */
	background-color: lightgrey;
}

/* styles for header navigation links
 */
.header-menu-links {
	display: none;
	padding: 1em;
	background-color: white;
	border: 1px ridge lightgrey;
	border-radius: 8px;
	position: fixed;
	z-index: 4;
	top: 1em;
	right: 1em;
	max-width: 90vw;
}
.header-menu-links div {
	padding-right: 1em;
}

.header-menu-links a {
	border: 1px solid black;
	border-radius: 8px;
	height: 3em;
	min-width: 8em;
	width: fit-content;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	a:link, a:visited, a:hover, a:active {
		color: black;
	}
	margin: 0 0.5em;
}
.header-menu-links a:hover {
	font-weight: bold;
	background-color: lightgrey;
}

.header-menu-buttons {
	display: flex;
	width: min-content;
	max-width: 90vw;
	flex-wrap: wrap;
}

/* The footer element style definitions.
 * This style should be applied to whatever footer is defined.
 */
#footer {
	background-color: white;
	border-top: 1px ridge grey;

	bottom: 0;
	left: 0;
	width: 100%;
	/* height: 8em; */
	/* position: fixed; */
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	align-items: center;
	padding: 1em 0;
}

#footer .img {
	height: fit-content;
	/* width: max(80px, 50%); */
	padding: 0 1em;
	/* border: 1px solid; */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	img { height: 8em }
	div {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	p { margin: 0.115em 1em }
}

#footer .links {
	/* width: max(100px, 75%); */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1em 1em;
}

#bg {
}

/* .card: a simple card like element.
 */
.card {
	margin: 1em;
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 1px solid;
	background-color: white;
	padding: 1em;
	width: max(250px, 50%);
}

.card h1,h2,h3,h4 {
	margin-bottom: 0;
}

.card p {
	max-width: 80%;
}

.card ul {
	max-width: 80%;
}

.card hr {
	width: 80%;
}

.card .subtitle {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 0.25em;
}
.card .subtitle p {
	margin: 0;
}

.card-cta a{
	height: 3em;
	width: min(50%, 16em);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 1px solid;
}

.card-cta a:hover {
	/* border: 2px solid; */
	background-color: lightgrey;
	font-weight: bold;
}

/* .card-big: a variant of .card for large quantities of information.
 */
.card-big {
	margin: 1em;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: max(250px, 90%);
	border: 1px solid;
	background-color: white;
	padding: 1em;
}

/* Round: a simple class for round borders.
 *
 * Applies a border-radius of 2em.
 */
.round {
	border-radius: 2em;
}