/* ------ */
/* resets */
/* ------ */

*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
img, svg {
	display: block;
	max-width: 100%;
	height: auto;
}
h1, h2, h3, h4, h5, h6 {
	font-size: inherit;
}
input, select, textarea, button {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	background-color: inherit;
}
/*
input:where([type="checkbox"], [type="radio"]) {
	accent-color: var(--color-brand);
}
*/

a, label, select, button, input:where([type="submit"], [type="button"], [type="radio"]) {
	cursor: pointer;
}
a {
	color: inherit;
	text-decoration: none;
}
:hover:where(a, button, input:where([type="button"], [type="submit"])) {
	color: var(--color-accent);
}

input, select, textarea, fieldset, button {
	border: var(--ui-border);
	border-radius: var(--ui-border-radius);
}
:focus:where(input, select, textarea, fieldset, button) {
	outline: var(--ui-outline);
	outline-offset: var(--ui-outline-offset);
}

input {
	padding: var(--ui-border-radius);
}
select, textarea {
	padding: var(--ui-border-radius) calc(var(--ui-border-radius) * 2);
}
button, input:where([type="button"], [type="submit"]) {
	padding: calc(var(--ui-border-radius) * 2) calc(var(--ui-border-radius) * 5);
}
input:where([type="number"]) {
	text-align: end;
}

iframe {
	border: none;
	display: block;
	width: 100%;
}
iframe:where(:focus, :focus-within) {
	outline: none;
}

fieldset {
	border: var(--ui-border);
	border-radius: var(--ui-border-radius);
	padding: var(--ui-border-radius);
}
legend {
	margin-left: calc(var(--ui-border-radius) * 2);
	padding-inline: calc(var(--ui-border-radius) * 3);
}
legend + div.small {
	padding-left: calc(var(--ui-border-radius) * 5);
}

/* mains */
html {
	font-family: var(--ff-primary);
}
body {
	font-size: var(--fs-primary);
	line-height: var(--lh-primary);
}
h1 {font-size: var(--fs-xx-large);}
h2 {font-size: var(--fs-x-large);}
h3 {font-size: var(--fs-large);}
h4 {font-size: var(--fs-medium);}
h5 {font-size: var(--fs-small);}
h6 {font-size: var(--fs-x-small);}
.small {font-size: var(--fs-small);}

/* ------- */
/* headers */
/* ------- */

/* width constraint */
.constrained-width,
div#page-header-inner-container,
section#main-container,
nav#sub-menu-container,
nav#local-menu-container ul {
	padding-inline: .5rem;
	width: 100%;
	margin-inline: auto;
	max-width: var(--max-vw);
}
/* would be nice to be able to use --max-vw */
@media (min-width: 1440px) {
	.constrained-width,
	div#page-header-inner-container,
	nav#local-menu-container ul,
	section#main-container {
		padding-inline: 0;
	}
}

/* let's go */
body {
	background-color: var(--color-background);
	color: var(--color-primary);

	min-height: 100vh;
	min-height: 100dvh;
	min-width: var(--min-vw);

	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		'header'
		'content'
		'footer';
}

header#page-header,
aside#page-nav {
	--fs-menu-hamburger: 2.5rem;
	--header-padding-block: 1px;
	--header-border-thick: 3px;
	--header-inner-height: calc(var(--header-height) - var(--header-border-thick) - (var(--header-padding-block) * 2));
}
header#page-header {
	grid-area: header;
	min-height: var(--header-height);

	position: sticky;
	top: 0;
	padding-block: var(--header-padding-block);
	border-bottom: var(--header-border-thick) solid var(--color-brand);
	background-color: inherit;
	z-index: +1;
}
main {
	grid-area: content;
	isolation: isolate;
}
footer#page-footer {
	grid-area: footer;
	min-height: var(--footer-height);
}

/* header */
div#page-header-inner-container {
	height: 100%;

	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: 'logo menu';
	align-items: stretch;
	gap: 1rem;
}
div#page-header-logo {
	grid-area: logo;
	padding-block: .5em .25rem;
}
div#page-header-logo > p {
	height: 100%;
	background-image: var(--logo-brand-small);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	cursor: pointer;
}
@media (min-width: 896px) {
	div#page-header-logo > p {
		background-image: var(--logo-brand);
	}
}

/* menu main */
nav#main-menu-container ul {
	height: 100%;
	list-style-type: none;
	white-space: nowrap;

	flex-flow: row nowrap;
	gap: 0 .125rem;
}
nav#main-menu-container li,
aside#page-nav li {
	cursor: pointer;
	display: grid;
	align-items: center;
}
nav#main-menu-container li a {
	display: block;
	padding-inline: .75rem;
	color: var(--color-brand-primary);
}
ul#standard-menu li:hover a {
	color: var(--color-brand-accent);
}
ul#standard-menu li.selected,
aside#page-nav li.selected {
	background-color: var(--color-brand);
}
ul#standard-menu li.selected a {
	color: var(--color-brand-on);
}

nav#main-menu-container ul#mobile-menu {
	display: flex;
}
nav#main-menu-container ul#mobile-menu li a {
	font-size: var(--fs-menu-hamburger);
}

/* menu mobile */
aside#page-nav {
	position: fixed;
	inset: 0;
	left: auto;
	max-width: 320px;
	width: 100%;
	z-index: +1;
	background-color: var(--color-mobile-menu);

	right: -100%;
	transition: right 250ms ease-in-out;
}
aside#page-nav.opened {
	right: 0;
}
aside#page-nav ul {
	list-style-type: none;
}
aside#page-nav li:first-child {
	display: grid;
	align-items: center;
	justify-content: end;

	font-size: var(--fs-menu-hamburger);
	min-height: var(--header-inner-height);
	margin-bottom: calc(var(--header-border-thick) - var(--header-padding-block));
}
aside#page-nav li:first-child a {
	padding-inline: 1.25rem;
}
aside#page-nav li a {
	display: block;
	color: var(--color-mobile-text);
}
aside#page-nav ul li:not(:first-child) a {
	padding: .5rem 1rem;
}

/* menu mobile vs standard breakpoint */
nav#main-menu-container ul#standard-menu {
	display: none;
}
nav#main-menu-container ul#mobile-menu {
	display: flex;
}
aside#page-nav {
	display: block;
}
@media (min-width: 720px){
	nav#main-menu-container ul#standard-menu {
		display: flex;
	}
	nav#main-menu-container ul#mobile-menu {
		display: none;
	}
	aside#page-nav {
		display: none;
	}
}

/* menu sub */
nav#sub-menu-container {
	padding-inline: 0;
	padding-block: 1px 1rem;
}
nav#sub-menu-container ul {
	list-style-type: none;
	white-space: nowrap;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: 1px;
}
nav#sub-menu-container ul li {
	background-color: var(--color-submenu-background);
	cursor: pointer;
}
nav#sub-menu-container ul li a {
	display: block;
	font-size: var(--fs-small);
	font-weight: var(--fw-bold);
	color: var(--color-submenu-text);
	padding: .25rem 1.5rem;
}
nav#sub-menu-container ul li.selected {
	background-color: var(--color-brand);
}

/* menu local */
nav#local-menu-container {
	padding-top: 1em;
	position: relative;
	max-width: 100vw;
	max-width: 100dvw;
	overflow-x: auto;
}
nav#local-menu-container ul::before {
	content: '';
	position: absolute;
	inset: auto 0 0;
	border-bottom: var(--ui-border);
	height: .5rem;
	background-image: linear-gradient(to bottom, #fff0 0%, #9993 100%);
}
nav#local-menu-container ul {
	list-style-type: none;
	padding-inline: 1rem;

	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}
nav#local-menu-container ul li {
	border-bottom: 0;
	cursor: pointer;
}
nav#local-menu-container ul li a {
	display: block;
	font-size: var(--fs-small);
	font-weight: var(--fw-bold);
	padding: .25rem 1.5rem;
	padding-top: .365rem;
	background-color:  var(--color-background);
	border: var(--ui-border);
	border-radius: var(--ui-border-radius) var(--ui-border-radius) 0 0;
	border-bottom: 0;
}
nav#local-menu-container ul li:not(.selected) a {
	background-color: var(--color-localmenu-background);
}
nav#local-menu-container ul li.selected a {
	position: relative;
}
nav#local-menu-container ul li.selected a::before {
	content: '';
	position: absolute;
	inset: auto 0 0;
	border-bottom: 1px solid var(--color-background);
}
main#page-content[data-rows="2"] section#main-container {
	padding-block: 1rem;
}

/* footer */
footer#page-footer div.copy {
	text-align: right;
	padding-right: .25rem;
	font-size: var(--fs-xx-small);
	color: var(--clr-200);
}
footer#page-footer a.copy {
	color: var(--clr-200);
}

/* debug */
div#rstats_global {
	text-align: center;
}
div.rstats {
	margin-block: .25rem;
	padding: .25rem;
	background-color: var(--color-background);
	border: var(--ui-border);
	text-align: left;
	font-size: var(--fs-small);
}