@import url('https://unpkg.com/@acab/reset.css') layer(reset);
@import url('https://fonts.googleapis.com/css2?family=Corben:wght@400;700&display=swap');
:root {
	color-scheme: dark;
	--color-grey: oklch(0.4246 0 76.63);
	--color-backdrop: oklch(0.2652 0 76.63 / 50%);
	--color-main: oklch(0.4246 0.0888 76.63);
	--color-main-lighter: oklch(0.55 0.1135 76.63);
	--color-location-1: oklch(0.4246 0.0888 7.88);
	--color-location-2: oklch(0.4246 0.0888 129.66);
	--color-location-3: oklch(0.4246 0.0888 190.55);
	--color-location-4: oklch(0.4246 0.0888 238.62);
	--color-location-5: oklch(0.4246 0.0888 285.62);
	--color-location-6: oklch(0.4246 0.0888 329.42);
	--color-location-1-lighter: oklch(0.55 0.1135 7.88);
	--color-location-2-lighter: oklch(0.55 0.1135 129.66);
	--color-location-3-lighter: oklch(0.55 0.1135 190.55);
	--color-location-4-lighter: oklch(0.55 0.1135 238.62);
	--color-location-5-lighter: oklch(0.55 0.1135 285.62);
	--color-location-6-lighter: oklch(0.55 0.1135 329.42);
	/* Calendar grid settings */
	--no-of-locations: 0;
	--no-of-slots: 0;
	--slot-size: 75px;
	--horizontal-rules: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--slot-size) - 1px), grey var(--slot-size));
}
html, body {
	font-family: "Corben", serif;
	font-weight: 400;
	font-style: normal;
	padding: .5lh;
}
h1,h2,h3,h4,h5,h6,strong {
	font-weight: 700;
}
h1 {
	text-align: center;
	margin-block: 1.2lh;
}
h2, nav {
	text-align: center;
	margin-block: 1lh;
}
.times, .locations { display: none; }
li.event {
	background-color: var(--color-main);
	border-radius: 8px;
	cursor: pointer;
	padding: .5lh 1lh;
	text-align: center;
	box-shadow: 3px 3px 0px var(--color-main-lighter);
	transition: background-color .2s;
	&:hover,&:focus {
		background-color: var(--color-main-lighter);
		&.location\:1 { background-color: var(--color-location-1-lighter); }
		&.location\:2 { background-color: var(--color-location-2-lighter); }
		&.location\:3 { background-color: var(--color-location-3-lighter); }
		&.location\:4 { background-color: var(--color-location-4-lighter); }
		&.location\:5 { background-color: var(--color-location-5-lighter); }
		&.location\:6 { background-color: var(--color-location-6-lighter); }
	}
	+ li.event { margin-block-start: .5lh; }
	&.location\:1, &.location\:1 dialog { background-color: var(--color-location-1); }
	&.location\:2, &.location\:2 dialog { background-color: var(--color-location-2); }
	&.location\:3, &.location\:3 dialog { background-color: var(--color-location-3); }
	&.location\:4, &.location\:4 dialog { background-color: var(--color-location-4); }
	&.location\:5, &.location\:5 dialog { background-color: var(--color-location-5); }
	&.location\:6, &.location\:6 dialog { background-color: var(--color-location-6); }
	&.location\:all, &.location\:all dialog { background-color: var(--color-grey); }
	&.note { cursor	: initial; }
}

dialog {
	animation: fade-out .5s ease-out;
}
dialog[open] {
	animation: fade-in .5s ease-out;
	cursor: initial;
	position: fixed;
	left: 50%; top: 50%;
	transform: translateX(-50%) translateY(-50%);
	width: min(calc(100vw - 1lh), 800px);
	max-height: 75mvh;
	overflow-y: auto;
	padding: 1lh;
	border-radius: 10px;
	border: 3px solid currentColor;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: .3lh;

	.close-button {
		margin-inline-end: auto;
	}
	.share-button {
		display: none;
		&.active {
			display: initial;
		}
	}
	.copylink-button {
		display: none; /* Until I get it working */
	}
	button {
		text-decoration: underline;
		text-decoration-style: wavy;
	}
	hgroup {
		margin-block: 1.5lh;
		flex-basis: 100%;
	}
	.description {
		text-align: initial;
		flex-basis: 100%;
		p { margin-block: .5lh; }
	}
	&::backdrop {
		animation: backdrop-fade-in .5s ease-out forwards;
		background-color: var(--color-backdrop);
	}
}
@keyframes fade-in {
	from { opacity: 0; display: flex; }
	to {opacity: 1; display: flex; }
}
@keyframes fade-out {
	from {opacity: 1; display: flex; }
	to { opacity: 0; display: flex; }
}
@keyframes backdrop-fade-in {
	from { background-color: transparent; }
	to { background-color: var(--color-backdrop); }
}

@media only screen and (min-width:1000px) {
	#dayplanner {
		overflow-x: auto;
		display: grid;
		grid-template-columns: 90px 1fr;
		grid-template-rows: max-content auto;
		grid-template-areas:
			".     locations"
			"times events   ";
		.locations {
			grid-area: locations;
			display: grid;
			grid-template-columns: repeat(var(--no-of-locations), 1fr);
			grid-auto-flow: column;
			li {
				text-align: center;
				font-size: 1.5em;
			}
		}
		.times {
			grid-area: times;
			display: grid;
			grid-template-rows: repeat(calc(var(--no-of-slots) + 1), var(--slot-size));
			background-image: var(--horizontal-rules);
		}
		.events {
			grid-area: events;
			display: grid;
			grid-template-columns: repeat(var(--no-of-locations), 1fr);
			grid-template-rows: repeat(calc(var(--no-of-slots) + 1), var(--slot-size));
			background-image: var(--horizontal-rules);
		}
		.event {
			margin: 5px;
			transform: translateY(-2px);
			display: flex;
			flex-flow: column;
			padding: .2lh .5lh;
			overflow-x: hidden;
			grid-row-end: span 2;
			&:hover,&:focus {
				z-index: 1000;
			}

			&::after {
				content: '';
				display: block;
				flex-grow: 1;
			}
			&.location\:1 { grid-column: 1; }
			&.location\:2 { grid-column: 2; }
			&.location\:3 { grid-column: 3; }
			&.location\:4 { grid-column: 4; }
			&.location\:5 { grid-column: 5; }
			&.location\:6 { grid-column: 6; }
			&.location\:all { grid-column: 1 / -1; }
			.location { display: none; }
		}
	}
}