/*
 *  ***  variables  ***
 */

:root {
	--colWhite: #fff;

	--colDisabled: #999;

	--colBlue: #125;
	--colBlueLight: #68c;
	--colBlueDark: #113;

	--colRed: #c30;
	--colRedLight: #fdc;
	--colRedDark: #930;

	/* the grey shades (albeit not fifty…) */
	--colGrey: #666;
	--colGreyLight: #ccc;
	--colGreyDark: #333;
	--colGreyBackground: #eee;
	--colGreyShadow: #999;

	--transitionTime-default: 0.25s;

	--font: 'Inter V';
	--fontSlab: 'Bitter';
	--fontAccent: 'Playfair Display';
}



/*
 *  ***  basic definitions for full page  ***
 */

body
{
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: [header] minmax(3em, max-content) [main] auto;
	font-family: var(--font);
	color: var(--colGrey);
	background-color: var(--colWhite);
	min-height: 100vh;
	font-weight: 300;
	line-height: 1.4rem;
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6
{
	font-family: var(--fontAccent);
	font-weight: normal;
	font-style: italic;
	color: var(--colRed);
}



/*
 *  ***  branding ***
 */

.poi
{
	font-family: var(--fontSlab);
	font-style: normal;
	font-weight: bold;
	color: var(--colBlue);
}

.polloi
{
	font-family: var(--fontAccent);
	color: var(--colRed);
}



/*
 *  ***  header part: project logo and login bar  ***
 */

header
{
	/* display and placement */
	/* flex box */
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
	/* decoration */
	font-weight: normal;
	font-size: 1rem;
	background-color: var(--colWhite);
	box-shadow: 0 0.1rem 0.5rem var(--colGreyShadow);
	z-index: 20;
	margin: 0;
	padding: 0.25rem 0;
}

header h1
{
	font-size: 1.5rem;
	margin: 0 2rem 0 0.75rem;
	padding: 0;
}

header h1 a, header h1 a:link, header h1 a:visited, header h1 a:hover,
header h1 a:focus, header h1 a:active
{
	display: inline-block;
	text-decoration: none;
	transition: var(--transitionTime-default);
}

header h1 a:hover, header h1 a:focus, header h1 a:active
{
	transform: translateX(0.5em) scale(1.2);
	transition: var(--transitionTime-default);
}

header nav
{
	color: var(--colGrey);
	font-size: 0.8rem;
	margin: 0 1rem;
	padding: 0;
}

header nav:first-of-type
{
	flex: 1;
}

header nav ul
{
	display: inline-block;
	margin: 0;
	padding: 0;
	font-size: 0; /* to get off the white spaces between the <li> elements */
}

header nav ul li
{
	display: inline-block;
	list-style-type: none;
	margin: 0;
	padding: 0;
	font-size: 0.8rem;
	line-height: 1.5em;
	margin: 0;
	padding: 0.25rem 0.5rem;
}

header nav ul li:has(a)
{
	background-color: red;
	font-weight: bold;
}

header nav ul li:first-of-type a
{
	border-top-left-radius: 0.25rem;
	border-bottom-left-radius: 0.25rem;
}

header nav ul li:last-of-type a
{
	border-right: 1px solid var(--colGreyLight);
	border-top-right-radius: 0.25rem;
	border-bottom-right-radius: 0.25rem;
}

header nav a, header nav a:link, header nav a:visited
{
	display: inline-block;
	color: var(--colGrey);
	text-decoration: none;
	border-left: 1px solid var(--colGreyLight);
	border-top: 1px solid var(--colGreyLight);
	border-bottom: 1px solid var(--colGreyLight);
	margin: -0.25rem -0.5rem;
	padding: 0.25rem 0.5rem;
}

header nav a:hover, header nav a:focus, header nav a:active
{
	color: var(--colGreyDark);
	background-color: var(--colGreyBackground);
}




/*
 *  ***  main part: the page content (map or text)  ***
 */

/* We omit the 'main' tag as it is not really needed */

main
{
	grid-row: main;
}

.map {
	height: 100%;
	box-sizing: border-box;
	z-index: 0;
}



/*
 *  ***  aside part: the data menu  ***
 */

aside
{
	position: absolute;
	position: absolute;
	box-sizing: border-box;
	width: 300px;
	max-width: 50%;
	top: 5rem;
	right: 10px;
	z-index: 10;
	padding: 0.5rem;
	background-color: var(--colWhite);
	box-shadow: 1px 1px 5px var(--colGreyShadow);
}


footer
{
	position: fixed;
	bottom: 0;
	left: 1rem;
	font-size: 0.8rem;
	font-family: var(--fontAccent);

	margin: 0 auto;
	padding: 0.5em 1em 0 1em;
	border-radius: 0.5em 0.5em 0 0;
	box-shadow: 1px 1px 5px var(--colRedDark);

	color: var(--colWhite);
	background-color: var(--colRed);
}

footer ul
{
	margin: 0;
	padding: 0 0 0.5em 0;
}

footer ul li
{
	display: inline-block;
	list-style-type: none;
}

footer ul li + li:before
{
	content: ' · ';
}

footer a, footer a:link, footer a:visited
{
	color: var(--colWhite);
	text-decoration: none;
}

footer a:hover, footer a:active
{
	text-decoration: underline;
}


aside h3
{
/*	color: var(--colWhite);
	background-color: var(--colRed);*/
	margin: 1em -0.5rem 0.5em -1rem;
	padding: 0.25em 0 0.25em 0.5em;
	border-left: 2rem solid var(--colRed);
	transition: var(--transitionTime-default);
	cursor: pointer;
}

aside h3:hover
{
	background-color: var(--colRedLight);
	border-left: 1rem solid var(--colRed);
	padding-right: 1rem;
	/*transform: perspective(400px) rotateY(360deg);*/
	transition: var(--transitionTime-default);
}

aside h3:first-of-type
{
	margin-top: 0;
}

ul.tags
{
	margin: 0.5em 0;
	padding: 0 0 1em 0;
	color: var(--colGrey);
	font-size: 0.8em;
	line-height: 1.8em;
}

ul.tags li
{
	list-style-type: none;
	display: inline;
	font-weight: 400;
	border: 1px solid var(--colGreyLight);
	background-color: var(--colGreyBackground);
	border-radius: 3px;
	margin: 0.25em 0;
	padding: 0.1em 0.25em;
	white-space: nowrap;
	transition: var(--transitionTime-default);
}

ul.tags li:hover
{
	transition: var(--transitionTime-default);
}



.leaflet-container
{
	font-size: 1rem;
	font-family: var(--fontSlab);
	font-weight: 300;
}

.leaflet-popup-content ul, .leaflet-popup-content li
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}


ul.ajax
{
	padding: 0;
	margin: 0;
}

ul.ajax, ul li
{
	list-style-type: none;
}

#debugInput
{
	box-sizing: border-box;
	width: 100%;
	border: 1px solid var(--colGreyLight);
	color: var(--colGreyDark);
	background-color: var(--colGreyBackground);
	margin: 0.5em 0;
	padding: 0.25em;
	border-radius: 0.25em;
	font-family: monospace;
}

#debug
{
	color: var(--colGreyDark);
	background-color: var(--colGreyBackground);
	border: 1px solid var(--colGreyLight);
	margin: 0;
	padding: 0.5em;
	border-radius: 0.25em;
	line-height: 1.2em;
}


.checkbox-container
{
	/*font-family: system-ui;*/
	/*font-size: 1rem;*/
	/*font-weight: bold;*/
	line-height: 1.1em;
	display: grid;
	grid-template-columns: 1em auto;
	gap: 0.5em;
}

input[type='checkbox']
{
	/* Add if not using autoprefixer */
	-webkit-appearance: none;
	appearance: none;
	/* For iOS < 15 to remove gradient background */
	background-color: var(--colWhite);
	/* Not removed via appearance */
	margin: 0;
	font: inherit;
	color: currentColor;
	width: 1.15em;
	height: 1.15em;
	border: 1px solid var(--colGrey);
	background-color: var(--colGreyBackground);
	border-radius: 0.15em;
	transform: translateY(-0.075em);
	display: grid;
	place-content: center;
}

#lists li + li .checkbox-container
{
	margin-top: 0.25em;
}

input[type = 'checkbox']::before {
	content: '';
	width: 0.65em;
	height: 0.65em;
	transform: scale(0);
	transition: var(--transitionTime-default) transform ease-in-out;
	box-shadow: inset 1em 1em var(--colRed);
	/* the checkmark */
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
	/* Windows High Contrast Mode */
	background-color: CanvasText;
}

input[type="checkbox"]:focus
{
	outline: 2px solid var(--colRed);
	/*outline-offset: 2px;*/
}

input[type = 'checkbox']:checked::before {
  transform: scale(1);
}

input[type="checkbox"]:disabled
{
	--form-control-color: var(--colDisabled);
	color: var(--colDisabled);
	cursor: not-allowed;
}

.form-control-disabled
{
	color: var(--colDisabled);
	cursor: not-allowed;
}