/* https://codepen.io/aebsr/pen/AzQMmZ */

/* ----- CSS RESET ----- */

/* Box sizing rules */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Prevent font size inflation */
html {
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
	margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
	list-style: none;
}

/* Set core body defaults */
body {
	min-height: 100vh;
	line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
	line-height: 1.2;
}

/* Balance text wrapping on headings */
h1, h2, h3, h4 {
	text-wrap: balance;
}

/* Make images easier to work with */
img,
picture {
	max-width: 100%;
	display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
	font-family: inherit;
	font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
	min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
	scroll-margin-block: 5ex;
}



/* ----- GENERIC ----- */

:root {
	/* Colors */
	--primary: rgba(77, 75, 98);
	--primary-light: rgba(77, 75, 98, 15%);
	--yang: #ffc412;
	--yin: #1114a4;
	--gradient1: rgba(231, 228, 216, 0.95);
	/* --gradient: rgb(231, 228, 216); */
	--gradient2: rgba(237, 204, 181, 0.5);
	--gray-light: rgb(250, 250, 250);
	--white-transparent: #ffffff99;
	--transparent: rgba(0, 0, 0, 0);

	/* Other */
	--border-radius: 0.5em;
	--hover: 150ms;
}

html {
	font-size: 18px;
}

body {
	display: flex;
	flex-direction: column;
	/* margin: 5rem 0 0 0; */
	margin: 0;
	padding: 0;
	inset: 0;
	min-height: 100vh;
	font-family: "Open Sans", sans-serif;
	font-optical-sizing: auto;
	font-variation-settings:
		"wdth" 100;
	background: linear-gradient(var(--gradient1), var(--gradient2));
}

sup {
	font-size: 0.5em;
}



/* ----- HEADER ----- */

header {
	/* position: fixed; */
	/* top: 0; */
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 1em;
	flex-wrap: wrap;
	row-gap: 1em;
	/* background: var(--gradient1); */
	/* z-index: 100; */
}

h1 {
	margin: 0;
	padding: 0;
}

#logo__block {
	display: flex;
	align-items: center;
	column-gap: 0.5em;
	flex-wrap: wrap;
	margin: 0;
	font-size: 0.8em;
}

#logo__block img {
	height: 1.75em;
}



/* ----- FOOTER ----- */

footer {
	max-width: 80ch;
	margin: auto auto 0 auto;
	padding: 1em;
	font-size: 0.75em;
	text-align: center;
}



/* ----- NAVIGATION ----- */

#nav__block {
	display: flex;
	gap: 0.75em;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	line-height: 1;
}

#nav__block p {
	margin: 0;
	padding: 0;
	font-size: 1.5em;
	white-space: nowrap;
}

nav,
#nav__block form,
.help {
	display: flex;
	border: 1px solid var(--primary);
	border-radius: var(--border-radius);
	background: var(--white-transparent);
	box-shadow: 0 0 2px var(--primary-light);
	overflow: clip;
}

#nav__block button {
	display: flex;
	padding: 0.75em;
	border: 0;
	line-height: 1;
	color: black;
	background: none;
	cursor: pointer;
	transition: var(--hover);
}

#nav__block button.inactive {
	color: var(--transparent);
	background: none;
	cursor: default;
}

nav {
	list-style: none;
	font-size: 1rem;
	white-space: nowrap;
}

nav li a,
.help {
	display: block;
	padding: 0.75em 1em;
	text-decoration: none;
	color: black;
	cursor: pointer;
}

nav li a.active,
.help.active {
	background: var(--primary);
	color: white;
}

#nav__block button:hover,
nav li a:hover,
.help:hover {
	color: black;
	background: var(--primary-light);
}

#nav__block button.inactive:hover {
	color: var(--transparent);
	background: none;
}

.help {
	border-radius: 50%;
}



/* ----- ALL VIEWS ----- */

.calendar {
	margin: 0 1em;
}

main {
	display: grid;
	border: 1px solid var(--primary);
	border-radius: var(--border-radius);
	background: white;
	overflow: auto;
	box-shadow: 0 0 5px var(--primary-light);
}

/* View Header */
.header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	height: 3.25rem;
	/* padding: 1em; */
	/* text-align: center; */
	border-inline-start: 1px solid var(--primary-light);
	border-block-end: 1px solid var(--primary);
	background: var(--primary-light);
	z-index: 20;
}

.header:first-of-type {
	border-inline-start: 0;
}

/* Current Day */
.current-day span {
	color: white;
	background: var(--primary);
}

.event {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0.25em 0;
	padding: 0.5em;
	border-radius: var(--border-radius);
	color: black;
	background: var(--gradient1);
	white-space: nowrap;
	cursor: pointer;
	transition: var(--hover);
	z-index: 10;
}

.event:hover {
	background: var(--yang);
}

.error {
	color: red;
}

input.error {
	border: 1px solid red;
}


/* ----- HOME VIEW ----- */

main.home {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	gap: 2em;
	column-gap: 5em;
	min-height: 100vh;
	margin: 1em;
	border: none;
	background: none;
	overflow: visible;
	box-shadow: none;
}

.home #right-side {
	width: 52ch;
}

.home h1 {
	text-align: right;
}

.home img {
	width: 18ch;
	min-width: 14ch;
	height: 100%;
	margin: 0 0 0.25em auto;
}

.home p {
	text-align: justify;
}

.home form {
	display: flex;
	flex-wrap: wrap;
	gap: 2ch;
	row-gap: 1ch;
	margin-block-start: 0.5em;
}

.home input {
	flex-grow: 1;
	width: 34ch;
	padding: 0.5em;
	border: 1px solid var(--primary);
	border-radius: 0.5em;
}

.home input[type='submit'] {
	width: 10ch;
	color: white;
	background: var(--primary);
	cursor: pointer;
}

.home input[type='submit']:hover {
	color: var(--primary);
	background: var(--yang);
}

.home footer {
	position: absolute;
	bottom: 0;
	min-width: 40ch;
}



/* ----- MONTH VIEW ----- */

main.month-view {
	grid-template-columns: repeat(7, 1fr);
}

.month-view .header {
	border-inline-start: 0;
	border-inline-end: 1px solid var(--primary-light);
}

/* End of Row */
.month-view .header:nth-of-type(7n) {
	border-inline-end: 0;
}

.month-view .day {
	display: flex;
	flex-flow: column;
	margin: 0;
	padding: 0.25em;
	/* border: 1px solid var(--primary-light); */
	border-inline-end: 1px solid var(--primary-light);
	border-block-end: 1px solid var(--primary-light);
	color: #222;
	/* color: #7c878d; */
	min-height: 10em;
}

/* Last Row */
.month-view .day:nth-last-child(-n + 7) {
	border-block-end: 0;
}

/* End of Row */
.month-view .day:nth-of-type(7n) {
	border-inline-end: 0;
}

/* Weekends */
.month-view .day:nth-of-type(7n+1),
.month-view .day:nth-of-type(7n) {
	margin: 0;
	padding: 0.25em 0.75em;
	background: var(--gray-light);
}

/* Empty */
.month-view .non-day {
	background: var(--gray-light);
}

.month-view .day > span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	border-radius: 50%;
}

.month-view .day.current-day:nth-of-type(7n+1),
.month-view .day.current-day:nth-of-type(7n) {
	background: rgb(220, 220, 220);
}



/* ----- WEEK VIEW ----- */

main.week-view {
	display: grid;
	grid-template-columns: 5em repeat(7, 1fr);
	border: 1px solid var(--primary);
	border-radius: var(--border-radius);
	background: white;
	overflow: auto;
}

// First Blank Header
.week-view div:first-child {
	border-inline-start: 0;
}

.week-view .header span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	font-weight: bold;
}

.week-view .day {
	position: relative;
	display: flex;
	flex-flow: column;
	height: 2rem;
	margin: 0;
	padding: 0.25em;
	border-inline-start: 1px solid var(--primary-light);
	border-block-end: 1px solid var(--primary-light);
}

/* Last Rows */
.week-view > div:nth-last-child(-n + 16) {
	border-block-end: 0;
}

/* Last Row - Extra "Header" */
.week-view .header:nth-last-child(-n + 8) {
	border-block-start: 1px solid var(--primary);
}

/* Time of Day */
.week-view .day.time_of_day {
	margin-block-start: -1rem;
	padding-inline-end: 0.5rem;
	border: 0;
	text-align: right;
}

/* Weekends */
.week-view .day:nth-of-type(8n+2),
.week-view .day:nth-of-type(8n) {
	background: var(--gray-light);
}

.week-view .event {
	height: 5.5rem;
	margin: 0;
}



/* ----- LIST VIEW ----- */

main.list-view {
	grid-template-columns: 25ch 20ch 1fr;
}

.list-view time {
	justify-content: center;
	border-inline-end: 1px solid var(--primary-light);
}

.list-view time,
.list-view .event {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0.5em 0;
	border-block-start: 1px solid var(--primary-light);
}

.list-view .event {
	padding-inline: 1em;
}

/* First Row */
.list-view .header + time,
.list-view .header + time + time,
.list-view .header + time + time + .event {
	border-block-start: 0;

}

.list-view time.list__date {
	font-weight: bold;
}

.list-view .same-date {
	border-block-start: 0;
}

.list-view .event {
	flex-direction: row;
	justify-content: flex-start;
	gap: 0.5em;
	margin: 0;
	border-radius: 0;
	background: none;
	cursor: pointer;
}

.list-view .event:hover {
	background: var(--yang);
}

.list-view .event sup {
	margin-block-start: -1em;
}



/* ----- HELP VIEW ----- */
main.help-view {
	display: block;
	max-width: 80ch;
	margin: 2em auto;
	padding: 2em;
}

.help-view h2 {
	margin: 0;
}



/* ----- DIALOG ----- */
dialog {
	padding: 0;
	border: 1px solid var(--primary);
	border-radius: var(--border-radius);
}

dialog > div {
	display: flex;
	flex-wrap: wrap;
}

.dialog_date__block {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1em;
	flex-grow: 1;
	padding: 1em;
	font-size: 2em;
	background: var(--gradient1);
	white-space: nowrap;
}

.dialog_content__block {
	display: flex;
	flex-direction: column;
	max-width: 60ch;
	margin: 0 auto;
}

dialog h3 {
	margin: 1em 0 0 1em;
}

dialog p {
	margin: 0;
	padding: 1em;
}

dialog form {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	margin: 1em;
	gap: 1em;
}

/* Basic for text input */
dialog input,
dialog button {
	padding: 0.5em 1em;
	border: 1px solid var(--primary);
	border-radius: var(--border-radius);
	font-size: 1em;
}

dialog input[type='email'] {
	flex-grow: 1;
}

dialog input[type='submit'],
dialog button {
	color: white;
	background: var(--primary);
	cursor: pointer;
}

dialog button:hover {
	color: black;
	background: var(--yang);
}

dialog .button__return {
	display: block;
	margin: 1em 0;
}