/* ------ */
/* 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;
	text-wrap: balance;
}
p {
	text-align-last: pretty;
}
input, select, textarea, button {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	background-color: inherit;
}
a, label, select, button, input:where([type="submit"], [type="button"], [type="radio"]) {
	cursor: pointer;
}
a {
	color: inherit;
	text-decoration: none;
}
a:where(:focus-visible) {
	outline: 2px solid var(--color-brand);
}
button, input:where([type="button"], [type="submit"]) {
	background: var(--blocks-background, transparent);
}
: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;
}

.narrower:where(input, select, textarea) {
	width: 100%;
	max-width: min(100%, var(--input-narrower-max-width));
}
@media (width <= 90ch){
	.narrower:where(input, select, textarea) {
		width: 100%;
		max-width: min(100%, var(--input-narrow-max-width));
	}
}
.narrow:where(input, select, textarea) {
	width: 100%;
	max-width: min(100%, var(--input-narrow-max-width));
}
.wide:where(input, select, textarea) {
	width: 100%;
	max-width: min(100%, var(--input-wide-max-width));
}

:root {
	--icon-size: 1lh;
	--icon-inline-padding: 1rem;
	--icon-block-padding: .125rem;
}
.icon-container {
	--_icon-size: var(--icon-size);
	--_icon-inline-padding: var(--icon-inline-padding);
	--_icon-block-padding: var(--icon-block-padding);
	--_icon-inline-width: calc(var(--_icon-size) + var(--_icon-inline-padding));

	width: var(--_icon-inline-width);
	min-width: var(--_icon-inline-width);
	min-height: calc(var(--_icon-size) + var(--_icon-block-padding));
	display: grid;
	place-items: center;
}
.icon-container > svg {
	width: var(--_icon-size);
	height: var(--_icon-size);
	fill: currentColor;
}
.icon-container > img {
	object-fit: contain;
	object-position: center;
}

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);
}

.boxed {
	--_boxed-inline-padding: calc(var(--ui-border-radius) * 2);

	border: var(--ui-border);
	border-radius: var(--ui-border-radius);
	padding: var(--ui-border-radius) var(--_boxed-inline-padding);
	background: var(--blocks-background, transparent);
}

.hidden {
	display: none!important;
}
.sr-only:not(:focus):not(:active) {
	position: absolute;
	width: 1px;
	height: 1px;
	white-space: nowrap;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}

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

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

:root {
	--constrained-margin: min(.5rem, max(0px, calc(var(--max-vw) - 100dvw)));
}

.page-width-constrained {
	margin-inline: auto;
	width: 100%;
	max-width: var(--max-vw);
	padding-inline: var(--constrained-margin);
}
.page-width-constrained-admin {
	margin-inline: auto;
	width: 100%;
	max-width: var(--max-vw-admin);
	padding-inline: var(--constrained-margin);
}

/* 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';
}

#page-header {
	grid-area: header;
	background: var(--header-background);
	color: var(--header-color);

	position: sticky;
	top: 0;
	z-index: +1;
	padding-block: var(--header-padding-block);
	box-shadow: 0 2px 10px hsla(0, 0%, 0%, .15);
}
main {
	grid-area: content;
	isolation: isolate;

	background: var(--main-background);
	color: var(--main-color);
}
footer#page-footer {
	grid-area: footer;
	min-height: var(--footer-height);

	background: var(--footer-background);
	color: var(--footer-color);
}

/* header */
.page-header-container {
	height: var(--header-height);

	display: grid;
	grid-template-columns: calc(var(--header-logo-width) + 1rem) 1fr;
	grid-template-areas: 'logo menu';
	align-items: center;
}
.page-header-logo {
	grid-area: logo;
}
.page-header-logo > img {
	object-position: center left;
	object-fit: contain;
	max-width: var(--header-logo-width);
}
.page-header-logo:focus-visible {
	outline: none;
}
.page-header-logo:focus-visible > img {
	outline: 2px solid var(--color-brand);
	outline-offset: 1px;
}

/* menus */
.main-menu-container {
	--_color-menu: var(--color-menu);
	--_color-menu-hovered: var(--color-menu-hovered);
	--_color-menu-selected: var(--color-menu-selected);
	--_color-menu-selected-hovered: var(--color-menu-selected-hovered);
}
.mobile .main-menu-container:has(.main-menu-hamburger[aria-expanded="true"]) {
	--_color-menu: var(--color-mobile-menu);
	--_color-menu-hovered: var(--color-mobile-menu-hovered);
	--_color-menu-selected: var(--color-mobile-menu-selected);
	--_color-menu-selected-hovered: var(--color-mobile-menu-selected-hovered);

	--_background-menu-hovered: var(--background-mobile-menu-hovered);
	--_background-menu-selected: var(--background-mobile-menu-selected);
	--_background-menu-selected-hovered: var(--background-mobile-menu-selected-hovered);
}
.sub-menu-container {
	--_color-menu: var(--color-sub-menu);
	--_color-menu-hovered: var(--color-sub-menu-hovered);
	--_color-menu-selected: var(--color-sub-menu-selected);
	--_color-menu-selected-hovered: var(--color-sub-menu-selected-hovered);

	--_background-menu: var(--background-sub-menu);
	--_background-menu-hovered: var(--background-sub-menu-hovered);
	--_background-menu-selected: var(--background-sub-menu-selected);
	--_background-menu-selected-hovered: var(--background-sub-menu-selected-hovered);
}
.local-menu-container {
	--_color-menu: var(--color-local-menu);
	--_color-menu-hovered: var(--color-local-menu-hovered);
	--_color-menu-selected: var(--color-local-menu-selected);
	--_color-menu-selected-hovered: var(--color-local-menu-selected-hovered);

	--_background-menu: var(--background-local-menu);
	--_background-menu-selected: var(--background-local-menu-selected);
}

/* menu main */
.main-menu-container {
	--_hamburger-icon-size: 1.25lh;
	--_hamburger-padding: .25em;
	--_hamburger-size: calc(var(--_hamburger-icon-size) + var(--_hamburger-padding) * 2);
	--_hamburger-margin: calc((var(--header-height) + var(--header-padding-block) * 2 - var(--_hamburger-size)) / 2);

	grid-area: menu;

	display: grid;
	align-items: center;
	justify-content: end;
	overflow: hidden;
}
.main-menu {
	list-style-type: none;
	white-space: nowrap;

	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 0 1em;
	padding: 2px;
}
.menu-option a {
	display: block;
	color: var(--_color-menu);
	padding-inline: .5em;
	white-space: nowrap;
}
.menu-option:is(:hover, :focus-within) a {
	color: var(--_color-menu-hovered);
}
.menu-option.selected a {
	color: var(--_color-menu-selected);
}
.menu-option.selected:is(:hover, :focus-within) a {
	color: var(--_color-menu-selected-hovered);
}

.main-menu-hamburger {
	display: none;
	padding: var(--_hamburger-padding);
	color: var(--_color-menu);
}
.main-menu-hamburger:is(:hover, :focus-within) {
	color: var(--_color-menu-hovered);
}
.main-menu-hamburger > svg {
	width: var(--_hamburger-icon-size);
	height: var(--_hamburger-icon-size);
	fill: currentColor;
}

.mobile .main-menu-container {
	z-index: +1;
	min-height: var(--_hamburger-size);
}
.mobile .main-menu-mutator {
	position: fixed;
	top: 0;
	right: calc(max(0px, 100% - var(--max-vw)) / 2);
	padding-block-start: var(--_hamburger-margin);

	display: grid;
	grid-template-rows: auto 0fr;
	grid-template-areas:
		'actuator'
		'menu';
	grid-auto-flow: row;
	background: transparent;
}
.mobile .main-menu-hamburger {
	grid-area: actuator;
	justify-self: end;

	display: block;
	margin-right: var(--constrained-margin);
}
.mobile .menu-main-options-container {
	--_height: calc(100dvh - var(--header-height) - var(--header-padding-block) * 2);

	grid-area: menu;
	overflow: hidden;
	pointer-events: none;
	visibility: hidden;
}
/* opened */
.mobile .main-menu-mutator:has(.main-menu-hamburger[aria-expanded="true"]) {
	grid-template-rows: auto 1fr;
	background: var(--background-mobile-menu);
}
.mobile .main-menu-hamburger[aria-expanded="true"] {
	color: var(--color-mobile-menu);
}
.mobile .main-menu-hamburger[aria-expanded="true"]:is(:hover, :focus-visible) {
	color: var(--color-mobile-menu-hovered);
}
.mobile :has(.main-menu-hamburger[aria-expanded="true"]) .menu-main-options-container {
	pointer-events: auto;
	visibility: visible;

	margin-block-start: var(--_hamburger-margin);
	scrollbar-width: thin;
	max-height: var(--_height);
	overflow: auto;
}
.mobile .main-menu {
	min-height: var(--_height);
	border-top: 1px solid var(--color-brand);
	padding-block: calc(var(--_hamburger-margin) + 1lh);

	display: grid;
	grid-auto-flow: row;
	align-content: start;
	align-items: center;
	gap: .25em 0;

	min-width: var(--mosaic-min-width);
	color: var(--color-mobile-menu);
}
.mobile .main-menu {
	padding-inline: 1rem;
}
.mobile .main-menu .menu-option a {
	padding-block: .5lh;
}
.mobile .main-menu .menu-option:is(:hover, :focus-within) {
	background: var(--_background-menu-hovered);
}
.mobile .main-menu .menu-option.selected {
	background: var(--_background-menu-selected);
}
.mobile .main-menu .menu-option.selected:is(:hover, :focus-within) {
	background: var(--_background-menu-selected-hovered);
}

/* main menu open close animation */
.mobile .main-menu-mutator {
	--_anim-duration: 125ms;
	--_anim-timing-func: ease-in;

	transition: grid-template-rows var(--_anim-duration) var(--_anim-timing-func);
}
.mobile .main-menu-mutator:has(.main-menu-hamburger[aria-expanded="true"]) {
	transition:
		grid-template-rows var(--_anim-duration) var(--_anim-timing-func);
		background 0s var(--_anim-timing-func);
}
.mobile .main-menu-mutator:has(.main-menu-hamburger[aria-expanded="false"]) {
	transition:
		grid-template-rows var(--_anim-duration) var(--_anim-timing-func),
		background 0s var(--_anim-timing-func) var(--_anim-duration);
}
.mobile :has(.main-menu-hamburger[aria-expanded="true"]) .menu-main-options-container {
	transition: margin-block-start 0s var(--_anim-timing-func);
	animation: defer-scrollbar var(--_anim-duration) var(--_anim-timing-func) forwards;
	overflow: hidden;
}
.mobile :has(.main-menu-hamburger[aria-expanded="false"]) .menu-main-options-container {
	transition: margin-block-start 0s var(--_anim-timing-func) var(--_anim-duration);
}
@keyframes defer-scrollbar {
	99.99% {overflow: hidden}
	to {overflow: auto}
}

/* menu sub */
.sub-menu .menu-option {
	background: var(--_background-menu);
}
.sub-menu .menu-option:is(:hover, :focus-within) {
	background: var(--_background-menu-hovered);
}
.sub-menu .menu-option.selected {
	background: var(--_background-menu-selected);
}
.sub-menu .menu-option.selected:is(:hover, :focus-within) {
	background: var(--_background-menu-selected-hovered);
}
.sub-menu {
	list-style-type: none;

	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: 1px;
}
.sub-menu .menu-option {
	flex-grow: 1;
	max-width: 18ch;

	padding: .125lh 2ch;
	text-align: center;
	cursor: pointer;
}
.sub-menu .menu-option a {
	font-size: var(--fs-smaller);
}

/* menu local */
.local-menu-container {
	margin-top: 1lh;
	max-width: 100dvw;
	overflow-x: auto;
	scrollbar-width: thin;

	position: relative;
}
.local-menu-container::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%);
}
.local-menu {
	padding-inline: min(1ch, max(0px, calc(var(--max-vw) - 100dvw)));
	list-style-type: none;

	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min-content, 18ch));
	grid-auto-flow: column;
	align-items: center;
}
.local-menu .menu-option {
	cursor: pointer;

	border: var(--ui-border);
	border-bottom: 0;
	border-radius: var(--ui-border-radius) var(--ui-border-radius) 0 0;
	padding: .125lh 2ch;
	text-align: center;
	background: var(--_background-menu);
}
.local-menu .menu-option.with-sep {
	margin-inline-start: .25rem;
}
.local-menu .menu-option.selected {
	position: relative;
	isolation: isolate;
}
.local-menu .menu-option.selected::before {
	position: absolute;

	content: '';
	inset: 0;
	background: var(--_background-menu-selected);
	border-radius: var(--ui-border-radius) var(--ui-border-radius) 0 0;
}
.local-menu .menu-link {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	font-size: var(--fs-smaller);
}
.local-menu .selected .menu-link {
	background: transparent;
}

/* 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);
}