/* Joh Comeau CSS Reset*/

/* Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Remove default margin */
*:not(dialog) {
  margin: 0;
}

/* Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* Increase line-height */
  line-height: 1.5;
  /* Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}


/* Fonts */

@font-face {
	font-family: "Roboto";
	src: url("../fonts/Roboto-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Roboto";
	src: url("../fonts/Roboto-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}


/* Container (Stack header, metrics and books list) */

body {
	background-color: rgb(32, 32, 32);
	font-family: "Roboto";
}

.container {
	padding: 2rem;
	display: flex;
	flex-direction: column;
	max-width: 55rem;
	gap: 2rem;
	margin: auto;
}


/* Header */

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

#titleText {
	font-size: clamp(1rem, 1rem + 1.5vw, 2.5rem);
	font-weight: bold;
	color: white;
}

#titleCopy {
	color: grey;
	line-height: 1;
	font-size: clamp(0.5rem, 0.6rem + 1.5vw, 1.5rem);
}

#newBookBtn {
	flex-shrink: 0;
	padding: 0.5rem 1rem;
	border: solid rgb(163, 162, 162);
	border-radius: 15px;
	background-color: rgb(163, 162, 162);
	font-weight: bold;
	font-size: clamp(0.6rem, 0.7rem + 1.5vw, 1.5rem);
	color: black;
}

#newBookBtn:active {
	background-color: rgb(234, 234, 234);
	border: solid rgb(234, 234, 234);
	cursor: pointer;
}


/* Input */

input,
select {
	background-color: rgb(44, 43, 43);
	border: 1px solid rgb(163, 162, 162);
	border-radius: 8px;
	padding-left: 1rem;
	height: clamp(1rem, 2rem + 1.5vw, 3rem);
	color: white;
	font-size: clamp(0.5rem, 0.7rem + 1.5vw, 1rem);
}


/* Metrics */

.metrics {
	display: grid;
	gap: clamp(0.5rem, 2vw, 1rem);
	grid-template-columns: repeat(3, 1fr);
}

.metrics div {
	border: 1px solid rgb(163, 162, 162);
	border-radius: 10px;
	padding: clamp(0.5rem, 3vw, 2rem);
	background-color: rgb(44, 43, 43);
}

.metricTitle {
	color: grey;
	font-size: clamp(0.5rem, 0.5rem + 1.5vw, 1rem);
}

.metricValue {
	font-size: clamp(0.8rem, 1rem + 1.5vw, 2rem);
	line-height: 1;
	color: white;
}


/* Books List */

#booksList {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}


/* Book card */

.bookCard {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	border: 1px solid rgb(163, 162, 162);
	border-radius: 10px;
	background-color: rgb(44, 43, 43);
	padding: clamp(0.5rem, 2vw, 1rem);
}

hr {
	border: 1px solid rgb(163, 162, 162);
}

.bookTitle {
	color: white;
	font-size: bold;
}

.bookAuthor {
	color: rgb(163, 162, 162);
}

.bookPages {
	color: rgb(126, 125, 125);
}

.bookPagesAndStatus {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.bookCardBottom {
	display: grid;
	grid-template-columns: 3fr 1fr;
	gap: 1rem;
}

.bookCardBottom button {
	background-color: rgb(44, 43, 43);
	border: 1px solid rgb(163, 162, 162);
	border-radius: 5px;
	padding: 0.2rem 0.5rem;
	color: white;
}

.bookCardBottom button,
.bookPagesAndStatus {
	font-size: clamp(0.3rem, 0.5rem + 1.5vw, 0.9rem);
}

.readButton:active {
	background-color: rgb(145, 145, 146);
	color: black;
	cursor: pointer;
}

.deleteButton:active {
	background-color: rgb(106, 16, 6);
	border: 1px solid rgb(106, 16, 6);
	color: white;
	cursor: pointer;
}

.bookCardTop {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}


/*=== New Book Dialog ===*/

#newBookPopover {
	min-width: 20vw;
}

dialog {
	border: 1px solid rgb(163, 162, 162);
	border-radius: 10px;
	background-color: rgb(44, 43, 43);
	padding: clamp(0.5rem, 2vw, 1rem);
	color: white;
	padding: 2rem;
}

dialog[open] {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.formTitleAndCloseButton {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
}

.formTitleAndCloseButton button {
	background-color: rgb(44, 43, 43);
	border: 1px solid rgb(163, 162, 162);
	border-radius: 10px;
	color: white;
	padding: 0.2rem 0.7rem;
}

.formTitleAndCloseButton button:active {
	background-color: rgb(145, 145, 146);
	color: black;
	cursor: pointer;
}

form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.inputPair {
	display: flex;
	flex-direction: column;
}

/* Size of "Add Book" button */

#addBookBtn {
	flex-shrink: 0;
	padding: 0.5rem 1rem;
	border: solid rgb(163, 162, 162);
	border-radius: 10px;
	background-color: rgb(163, 162, 162);
	font-weight: bold;
	font-size: clamp(0.5rem, 0.6rem + 1.5vw, 1rem);
	color: black;
}

#addBookBtn:active {
	background-color: rgb(234, 234, 234);
	border: solid rgb(234, 234, 234);
	cursor: pointer;
}

/* Blur background while dialog is open */

dialog::backdrop {
        backdrop-filter: blur(1px);
}


/* Media queries to increase grid columns based in screen width */

@media (min-width: 640px) {
	#booksList {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	#booksList {
		grid-template-columns: repeat(3, 1fr);
	}
}


/* Media queries to use hover just if a mouse is available.
This avoids the buttons to stay colored in mobile. */

@media (hover: hover) {
	#newBookBtn:hover {
		background-color: rgb(234, 234, 234);
		border: solid rgb(234, 234, 234);
		cursor: pointer;
	}

	.readButton:hover {
		background-color: rgb(145, 145, 146);
		color: black;
		cursor: pointer;
	}

	.deleteButton:hover {
		background-color: rgb(106, 16, 6);
		border: 1px solid rgb(106, 16, 6);
		color: white;
		cursor: pointer;
	}

	.formTitleAndCloseButton button:hover {
		background-color: rgb(145, 145, 146);
		color: black;
		cursor: pointer;
	}

	#addBookBtn:hover {
		background-color: rgb(234, 234, 234);
		border: solid rgb(234, 234, 234);
		cursor: pointer;
	}
}