@import "vars.css";
@import "symbol.css";

* {
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

body {
  background: var(--bg);
  color: var(--color);
  display: grid;
  grid-gap: 0;
  grid-auto-flow: row;
  grid-template-areas:
		"nav"
		"header"
		"main"
		"footer"
  ;
  font-family: var(--font);
	font-size: var(--size);
  margin: 0;
}

body > nav {
	grid-area: nav;
	display: grid;
	grid-gap: 0;
	grid-auto-flow: column;
	grid-template-areas:
		"index menu"
	;
	background: var(--bg);
	height: 2.6rem;
	justify-content: start;
}

body > nav > nav[id='menu'] {
	grid-area: menu;
	display: flex;
	font-family: var(--font);
	font-size: var(--size);
	margin-left: var(--margin);
	width: calc(100vw - var(--margin) - 2vw);
	z-index: 10;
}

body > nav > nav[id='menu'] > a {
	border-right: 1px solid var(--border);
	color: var(--color);
	flex: 1;
	font-weight: bold;
	height: 100%;
	padding: 10px 4px;
	text-align: center;
	text-decoration: none;
	transition-duration: 0.5s;
}

body > nav > nav[id='menu'] > a:hover {
	background: var(--bg);
	color: var(--color);
}

body > nav > section[id='mainindex'] {
	grid-area: index;
	background: var(--bg);
	counter-reset: capitulo;
	height: 100vh;
	margin-left: var(--border-margin);
	overflow-y: auto;
	position: fixed;
	width: var(--index-width);
	z-index: 30;
}

section[id='mainindex']::-webkit-scrollbar { 
	width: 4px; 
}
section[id='mainindex']::-webkit-scrollbar-track { 
	background: var(--bg); 
}
section[id='mainindex']::-webkit-scrollbar-thumb { 
	background: var(--bg); 
	border-radius: 6px;
}

body > nav > section[id='mainindex'] > h2 {
	color: var(--color);
	font-family: var(--font);
	font-size: var(--size);

	--mtop: calc(2.2rem + 35vh - 1.5rem - 0.75rem);
	margin: var(--mtop) 1rem 1rem 1rem;
}

body > nav > section[id='mainindex'] > h2 > span {
  display: none;
}

body > nav > section[id='mainindex'] > details {
	border-bottom: 1px dotted var(--border);
	font-size: var(--size);
}

body > nav > section[id='mainindex'] details:last-child {
	margin-bottom: 7.5rem;
}

body > nav > section[id='mainindex'] > details > summary {
	background: var(--bg);
	color: var(--color);
	cursor: pointer;
	font-weight: normal;
	padding: 14px;
}

body > nav > section[id='mainindex'] > details > summary::before {
	content: counter(capitulo) ". ";
	counter-increment: capitulo;
}

body > nav > section[id='mainindex'] > details > summary:hover {
	color: var(--color);
	background: var(--bg);
}

body > nav > section[id='mainindex'] > details > a {
	color: var(--color);
  display: block;
	padding: 8px 12px;
	text-decoration: none;
	transition-duration: 0.6s;
	transition-timing-function: ease-in;
}

body > nav > section[id='mainindex'] > details > a:not(:last-child) {
  border-bottom: 1px dotted var(--border);
}

body > nav > section[id='mainindex'] > details > a:hover {
  background: var(--bg);
	text-decoration: none;
}

body > nav > section[id='mainindex'] > details > a:first-of-type::before {
  content: "Capítulo " counter(capitulo);
  font-weight: 900;
}

body > header {
  grid-area: header;
	display: grid;
	grid-gap: 0;
	grid-auto-flow: column;
	grid-template-areas:
		"title book"
	;
	align-content: center;
  background-image: url('../img/header-bg.webp');
  background-position: bottom right;
  background-repeat: no-repeat;
	background-size: cover;
	color: var(--color);
	font-family: var(--font);
  height: 40vh;
	justify-content: end;
  min-height: 40vh;
	text-align: right;
	z-index: 20;
}

body > header > section {
	grid-area: title;
	align-self: center;
	margin-left: var(--margin);
}

body > header h1 {
	font-size: var(--size);
	font-weight: normal;
	margin: 0;
}

body > header h1 small {
	display: block;
	font-size: var(--size);
	font-weight: normal;
}

body > header > img {
	grid-area: book;
	margin-right: var(--border-margin);
	height: 28vh;
	max-height: 28vh;
	width: auto;
}

body > main {
	grid-area: main;
	margin-left: 
		calc(var(--margin) + (var(--border-margin) / 2));
	margin-right: var(--border-margin);
	min-height: 80vh;
	z-index: 40;
}

body > main > section {
	margin-bottom: 5rem;
}

body > footer {
	grid-area: footer;
	background: var(--bg);
	color: var(--color);
	font-size: var(--size);
	padding: 1rem;
	z-index: 50;
}

body > footer > nav > a {
  color: #888;
  text-decoration: none;
}

body > footer > nav > a:hover {
  color: #aaa;
  text-decoration: none;
}

body > footer > nav > a:not(:last-of-type)::after {
  content: ' | ';
}