@import url('font/font.css');

/* === General Page styles === */
h1, h2, h3, h4, h5, h6 {
	margin-block: .5em;
	color: var(--titleColor);
	font-family: var(--titleStyle);
	font-weight: normal;
}

h1 {
	font-size: clamp(1.7rem, 0.5vw + 1.7rem, 2rem);
}

h2 {
	font-size: clamp(1.5rem, 0.5vw + 1.4rem, 1.8rem);
}

h3 {
	font-size: clamp(1.4rem, 0.4vw + 1.3rem, 1.7rem);
}

h4 {
	font-size: clamp(1.3rem, 0.3vw + 1.2rem, 1.6rem)
}

h5 {
	font-size: clamp(1.2rem, 0.3vw + 1.1rem, 1.5rem)
}

h6 {
	font-size: clamp(1.1rem, 0.3vw + 1rem, 1.3rem)
}

section {
	margin-block: .5em;
}

a.btn {
	text-decoration: none;

	&:hover > span {
		opacity: 70%;
		text-decoration: underline;
	}
}

button:not(:disabled),
[role=button]:not([aria-disabled=true]) {
	cursor: pointer;

	&:hover {
		opacity: 70%;
	}
}

/* === Layout === */

body {
	margin: 0;
	font-family: var(--textStyle), sans-serif;
	font-size: var(--fontSize);
	color: var(--contentFG);
	background-color: var(--contentBG);
}

body.main {
	height: 100dvh;
	display: grid;
	grid-template-areas:
		"h h h"
		"o m a"
		"o n a"
		"f f f";
	grid-template-rows: max-content auto auto max-content;
	grid-template-columns: minmax(min-content, 20%) 1fr auto;
}

body.satellite {
	display: grid;
	grid-template-areas:
			"h"
			"nt"
			"m"
			"n"
			"f";
	grid-template-columns: auto;
	grid-template-rows: max-content max-content auto max-content max-content;
}

/* === header === */
header {
	grid-area: h;
	display: flex;
	align-items: center;
	background-color: var(--headerBG);
	color: var(--headerFG);
	border-block-end: 1px solid var(--borderColor);
	padding: .5em;
}

a.home {
	font-size: clamp(1.7rem, 0.5vw + 1.7rem, 2rem);
	font-family: var(--titleStyle);
	color: var(--titleColor);
}

.siteTitle {
	flex: 1;
}

sw-menu {
	display: none;
}


/* === navigation === */
.outline {
	grid-area: o;
	background-color: var(--menuBG);
	border-top-right-radius: var(--menuRadius);
	font-family: var(--titleStyle);
	margin-block-start: var(--menuRadius);
	border: 1px solid var(--borderColor);

	& > ol {
		position: sticky;
		top: .5em;
		overflow-y: auto;
		padding-inline-end: .5em;
	}

	& a {
		color: var(--accentColor);
	}

	& .current {
		color: var(--titleColor);

		& > span::after {
			content: "";
			vertical-align: middle;
			display: inline-block;
			height: 4px;
			width: 1.7em;
			background-color: var(--accentColor);
			margin-inline-start: 0.3em;
		}
	}
}

ol.otl {
	list-style-type: none;

	& > li {
		margin-block: .3em;
	}
}

nav.btns {
	grid-area: n;
	display: flex;
	padding-block: 1em;
	align-items: center;
	justify-content: space-between;
	padding-inline: 1em;
	max-width: var(--contentWidth);

	& > a {
		display: block;
		background-color: var(--menuBG);
		border: 1px solid var(--borderColor);
		border-radius: var(--menuRadius);
		color: var(--accentColor);
		padding: .3em .4em;

		&.prev {
			margin-inline-end: .5em;
		}
	}

	& > .prev::before {
		content: "◀";
		margin-inline-end: .3em;
	}

	& > .next::after {
		content: "▶";
		margin-inline-start: .3em;
	}

	& > .return::before {
		content: "◁";
		margin-inline-end: .3em;
	}
}

nav.top.btns {
	grid-area: nt;
}

nav.nxt {
	justify-content: end;
}

nav.rtrn {
	justify-content: center;
	margin: auto;
}

/* === main === */
main {
	grid-area: m;
	padding: var(--menuRadius) .3rem 1rem 1rem;
	max-width: var(--contentWidth);
}

/* === aside === */
aside {
	grid-area: a;
}


/* === footer === */
footer {
	grid-area: f;
	background-color: var(--footerBG);
	color: var(--footerFG);

	& > .margins {
		display: flex;
		flex-wrap: balance;
		justify-content: space-around;
	}

	& > .metas {
		display: flex;
		justify-content: space-between;
		padding: .3em;
		font-size: 80%;

		& .legalPg {
			color: var(--footerFG);
			text-decoration: underline;
		}
	}
}

@media (max-width: 45em) {
	body.main {
		grid-template-areas:
			"h"
			"m"
			"a"
			"n"
			"f";
		grid-template-columns: auto;
		grid-template-rows: max-content auto auto max-content max-content;
	}

	#menuPopup {
		margin-inline-end: 3em;
	}

	sw-menu {
		display: block;
		background: url("img/menu.svg") center / contain;
		width: 1.5em;
		height: 1.5em;
	}

	nav.outline {
		display: none;
	}
}