/*****************************************************************************************/
/* 											CSS REMEDY 							   	 */
/*****************************************************************************************/
*, *::after, *::before {
  box-sizing:border-box;  
}


/* ************************************************************************************************************************************************************************************************************* */


/*****************************************************************************************/
/* 											CUSTOM PROPERTIES 						   	 */
/*****************************************************************************************/
:root {
	color-scheme:light dark;
	/* kleur */
	--color-nav-text:light-dark(#38213A, #c7dec5);
	--color-previous-text: light-dark(#181818,#e7e7e7 );
	--color-nav-links: light-dark(#333333,#cccccc);
	--color-greytext: light-dark(#999999,#c3c1c1) ;
	--color-selecttext: light-dark(#696969, #969696)	;
	--color-text: light-dark(#1e1915, #e1e6ea);
	--color-links: light-dark(#00635d, #00cfc1);
	--color-text-heading: light-dark(#1e1915, #e1e6ea);
	--color-carousel-grey-text-light: light-dark(#707070,#8f8f8f);
	--color-carousel-grey-text-dark:light-dark(#4f4f4d,#b0b0b2);

	--color-background:light-dark(#faf8f6,#050709);
	--color-inputfield: light-dark(#DCD6CC, #232933);

	--color-button-border-detail:light-dark(#707070,#8f8f8f);
	--color-button-border-buy:light-dark(#409970, #41ffa6);
	--color-button-border:light-dark(#D6D0C4,#363d4d);
	--color-button:light-dark(#F4F1EA,#191e29);

	--color-underline: light-dark(#419970,#0dff8e );
	--color-divider:light-dark(#cfccc9,#303336 );

	--color-header-hover:light-dark(#32362d,#cdc9d2);
	--color-wit:light-dark(#ffffff, #000000);
	--color-border-nav:light-dark(#D8D8D8,#272727);

	

	--color-list-books-1:light-dark(#ebe2d7, #887866);
	--color-list-books-2:light-dark(#dee0ed, #60647a);
	--color-list-books-3:light-dark(#dce8d1, #6b795f);

	/* sterren */
	--color-star-fill:#e87400;
	--color-star-empty:#c2c7cc;
	--color-star-border:#8e8e97;
	--rating-focus:red;

	/* tekst */
	--text-LatoRegular: "LatoRegular";
	--text-LatoBold: "LatoBold";
	--text-LatoItalic:"LatoItalic";
	--text-MerriweatherRegular: "MerriweatherRegular";
	--text-MerriweatherBold:"MerriweatherBold";
}

/* ************************************************************************************************************************************************************************************************************* */

/*****************************************************************************************/
/* 											Fonts		 							   	 */
/*****************************************************************************************/
@font-face {
	font-family:"LatoRegular" ;
	src: url(../fonts/LatoLatin-Regular-1c0bbd257c304f0c439ffca5188bf64d.woff2);
}

@font-face {
	font-family:"LatoBold" ;
	src: url(../fonts/LatoLatin-Bold-68ef13b1d5b140f6454beaf8620f0d00.woff2);
}

@font-face {
	font-family:"LatoItalic" ;
	src: url(../fonts/LatoLatin-Italic-3c16c00fcdb07eb96a6bf4eefa26d1f9.woff2);
}

@font-face {
	font-family:"MerriweatherRegular" ;
	src: url(../fonts/merriweather-regular-gr-01abdd2b4e6be250f29285f7248e978d.woff2)
}

@font-face {
	font-family:"MerriweatherBold" ;
	src: url(../fonts/merriweather-bold-gr-97a99a0fdb5f796fd06d1a1592c6b9fc.woff2);
}

/* ************************************************************************************************************************************************************************************************************* */



/*****************************************************************************************/
/* 											Jouw Styling 							   	 */
/*****************************************************************************************/
body {
	margin:0;

	font-family: var(--text-LatoRegular),"Helvetica Neue", Helvetica, Arial, sans-serif;

	overflow-x:hidden
}

h1{
	font-family: var(--text-MerriweatherBold), Georgia, 'Times New Roman', Times, serif;
}

a{
	color:var(--color-links);
}

p{
	font-size: 1em;
	color: var(--color-text-heading);
}

main{
	margin: 0 .5em;
}

body::selection{
	color: var(--color-carousel-grey-text-dark);
	background-color: var(--color-underline);
}

body:focus-visible{
	outline: 2px solid crimson;
  	border-radius: 3px;
} /* werkt niet weet ook niet zo goed hoe wel */

/* ************************************************************************************************************************************************************************************************************* */


/*****************************************************************************************/
/* 											Header menu 							   	 */
/*****************************************************************************************/
header{
  	position:sticky;
  	top:0;
	z-index: 1;

	display: grid;
	grid-template-columns: repeat(3, 1fr); 
	grid-template-rows: 2em repeat(2, 1fr);

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



/* Hoofdnavigatie my books, browse, community */
header > ul {
	list-style-type:"";
	display: flex;
	justify-content: space-evenly;
  	align-items:center;

	box-shadow: 0 -.1em .2em rgba(0, 0, 0, 0.25);/* krijg geen schaduw aan de binnenkant*/
	box-shadow: 0 .1em .2em rgba(0, 0, 0, 0.25);

}
header > ul li {
    display: flex;
    justify-content: center;
    align-items: center;

	height: 3.2em;
	padding: 0 .25em;
}
header > ul a{
	color:var(--color-nav-text);
	text-decoration-line: none;
	font-size: 1em;
	display: flex;
    justify-content: center;
    align-items: center;
}

/*Gedaan met behulp van ai https://chatgpt.com/share/693199ea-1954-800e-b91f-44c77274fbbf */
/* De dropdown zelf */ 
header > ul > li > details > ul {
  list-style: none;
  margin: 0;
  padding: 1em 1.25em;

  /* VERPLAATSING — dit maakt hem zoals Goodreads */
  position: absolute;
  top: 100%; /* direct onder de summary */
  left: 0;   /* uitlijnen met de knop */

  width: 100%; /* optioneel: breedte zoals Goodreads */

  background: var(--color-background);
  border: 1px solid #ddd;
  box-shadow: 0 .25em .75em rgba(0,0,0,0.08);
}
header > ul > li > details > ul > li{
  display:flex;
  justify-content:flex-start;
}
header > ul  details summary::marker{
	content: ' ';
}

header > ul  details summary {
	display: flex;
	justify-content: center;
	align-items: center;
}
header > ul  details summary svg{
	width: 1.2em;
	height: auto;
}


/* acties */
header > ul li:hover{
	background-color: var(--color-header-hover);
	color: var(--color-wit);
}
header > ul > li:hover > a{
	color: var(--color-wit);
	text-decoration: none;
}
header > ul > li > details > ul > li:hover{
  text-decoration: underline;
  color: var(--color-nav-links);
  background-color: var(--color-wit);
}
header > ul > li > details > ul > li a:hover{
  text-decoration: underline;
  color: var(--color-nav-links);
  background-color: var(--color-wit);
}

header > ul > li:hover details summary svg path{
	fill: white;
	stroke: var(--color-wit);
}



/* reading challenge */
header a:nth-of-type(1) {
	height: 2em;
	grid-column-start: 1;
	grid-column-end: -1;
	display: flex;
	justify-content: center;
}

header > a img {
	height: 2em;
	justify-content: center;
}

header a:nth-of-type(2) img {
	display: none;
}



/* logo van goodreads */
header a:nth-of-type(3){
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 3;

	display: flex;
	justify-content: center;
	align-items: center;
	
	height: 3.1em;
}


/* profiel menu */
header button:nth-of-type(1){
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 3;

	position: relative;
	z-index:1;
	appearance: none;
	border-color: transparent;
	background: none;

	justify-self:flex-start;
	margin: 0 0 0 1em;
}

header button:nth-of-type(1) img{
	width: 1.4em;
}

header nav:nth-of-type(2){
	grid-column-start: 3;
	grid-column-end: 4;
	grid-row-start: 2;
	grid-row-end: 3;

	display: flex;
}
header > ul{
	grid-column-start: 1;
	grid-column-end: -1;
	grid-row-start: 3;
	grid-row-end: 4;

	margin: 0;
	padding: 0;
	color:var(--color-nav-text);
}



header nav:nth-of-type(2) {
	flex-direction: row;

	background-color: var(--color-background);

	position:fixed;
	right:0;
	top:0;
	bottom:0;
	width:80%;

	translate: 100% 0;
	transition: 1s;

	display: flex;
	flex-direction: column;
  
}

/* ***************************************************************** */
/* PROFIELMENU BUTTON */
header button:nth-of-type(2) {
	position: relative;
	z-index:1;
	appearance: none;
	border-color: transparent;
	background: none;

	grid-column-start: 3;
	grid-column-end: 4;
	grid-row-start: 2;
	grid-row-end: 3;
	justify-self: end;
	margin: 0 1em 0 0;
}
header button:nth-of-type(2) img{
	width: 3em;
	border-radius: 5em;
	display: block;
}

/* ***************************************************************** */
/* als menu open is */
header.is-open  nav:nth-of-type(2) {
	translate:0% 0;
	transition: 1s;
}

header.is-open button:nth-of-type(2) {
	position: fixed;
	top: 3.5em;
	left: 20vw;
}
header.is-open button:nth-of-type(2) img{
	width: 4.6em;
}

header nav:nth-of-type(2) ul{
	list-style-type: none;
	padding: 0 1.8em;
}

header nav:nth-of-type(2) ul a{
	color: var(--color-nav-links);
	text-decoration-line: none;
}

/* wanneer menu dicht is */
header nav:nth-of-type(2) > button img{
	width: 3em;
	height: auto;
}
/* wanneer menu open is */
header.is-open nav:nth-of-type(2) > button{
	width: 3em;
	height: auto;

	position: fixed;
	top: 0;
	right: 110%;
}

header nav:nth-of-type(2) ul:nth-of-type(1) {
	display: flex;
	justify-content: flex-end;
	gap:1em;
	list-style-type:"";

	margin: .2em 0 .2em 0;
	padding: .2em 1em .2em 0;
	border-bottom: 1px solid var(--color-border-nav);
}

header nav:nth-of-type(2) ul:nth-of-type(1) img{
	width: 2em;
}

header nav:nth-of-type(2) ul:nth-of-type(2){
	position: fixed;
	top: 8.5em;
	display: flex;
	flex-direction: column;
	align-items: flex-start;

	font-size: .85em;
	border-top: 1px solid var(--color-border-nav);
	border-bottom: 1px solid var(--color-border-nav);

	margin: .5em 1em;
	padding: .5em 0;
	width: 80%;
}

header nav:nth-of-type(2) ul:nth-of-type(3){
	position: fixed;
	top: 30.5em;
	display: flex;
	flex-direction: column;
	align-items: flex-start;

	font-size: .85em;
	margin: .5em 1em;
	padding: 0;
	width: 80%;
}

/****************************************************************/
/* 		 			Dark mode header							*/
/****************************************************************/
@media (prefers-color-scheme: dark) {
 	header a:nth-of-type(3){
		filter: invert();
	}

	header button:nth-of-type(1) img{
		filter: invert();
	}

	header nav:nth-of-type(2) ul:nth-of-type(1) img{
		filter: invert();
	}

	header nav:nth-of-type(1) ul:nth-of-type(1) img{
		filter: invert();
	}

	header > ul  details summary svg{
		filter: invert();
	}
}

/****************************************************************/
/* 		 			header minimaal 25em 						*/
/****************************************************************/
@media (min-width:25em) {
	
}

/****************************************************************/
/* 		 			header minimaal 38em 						*/
/****************************************************************/
@media (min-width:38em) {
	header{
		display: grid;
		grid-template-columns: repeat(3, 1fr) 4em; 
		grid-template-rows: 2.7em repeat(2, 1fr);
 	}

/* code voor het verwisselen van reading challenge afbeelding */
  	header > a:nth-of-type(1) {
		display: none;
 	}
 	header a:nth-of-type(2) {
		grid-column-start: 1;
		grid-column-end: -1;
		grid-row-start: 1;
		grid-row-end: 2;

		display: flex;
		justify-content: center;
 	}
 	header a:nth-of-type(2) img {
		display: block;
		height: 2.7em;
 	}

	header a:nth-of-type(3){
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 2;
		grid-row-end: 3;

		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-left: 1em;
	}
	header > button:nth-of-type(1){
		display: none;
	}
	header form:nth-of-type(1){
		position: relative;
        width: 100%;
        max-width: 80em;
		
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 2;
		grid-row-end: 3;

		display: flex;
		justify-content: flex-end;
		align-items: center;
		z-index: 0;		
	}
	header form:nth-of-type(1) label{
		display: none;
	}
	header form:nth-of-type(1) input{
		width: 100%;
		box-sizing: border-box;
		padding: .8em .75em;
		font-size: .8em;
		border: .1em solid var(--color-greytext);
		border-radius: .25em;
		outline: none;
	}
	header form:nth-of-type(1) > button{
		position: absolute;
        right: .95em;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        display: flex;
	}



/* menu */
  	nav:nth-of-type(1) {
		display:block;
		order:0;
		
		display: flex;
		justify-content: flex-end;

		grid-column-start: 3;
		grid-column-end: 4;
		grid-row-start: 2;
		grid-row-end: 3;
	}

	nav:nth-of-type(1) ul{
		list-style-type:"";
		display: flex;
		flex-direction: row;
		gap: 1em;
	}

	header button:nth-of-type(2) {
		position: relative;
		z-index:1;
		appearance: none;
		border-color: transparent;
		background: none;

		grid-column-start: 4;
		grid-column-end: 5;
		grid-row-start: 2;
		grid-row-end: 3;
		justify-self: end;
		margin: 0 1em 0 0;
	}

  	nav:nth-of-type(2) {
		position: static;
		translate:0 0;
		padding: 0;
		background:none;
  	}
  
 	header nav:nth-of-type(2) ul:nth-of-type(1) {
		display:none;
  	}

	/* wanneer menu open is */
	header.is-open button:nth-of-type(2) {
		position: fixed;
		top: 1em;
	}
	header.is-open nav:nth-of-type(2) > button{
		position: fixed;
		top: 0;
		right: 120%;
	}
	header nav:nth-of-type(2) ul:nth-of-type(2){
		position: fixed;
		top: 6.5em;
	}
	header nav:nth-of-type(2) ul:nth-of-type(3){
		position: fixed;
		top: 28.5em;
	}


	header > ul > li:nth-of-type(3) details > ul {
		list-style: none;
		margin: 0;
		padding: 1em 1.25em;

		/* VERPLAATSING — dit maakt hem zoals Goodreads */
		position: absolute;
		top: 100%; /* direct onder de summary */
		left: 50%;   /* uitlijnen met de knop */

		width: 15.6em; /* optioneel: breedte zoals Goodreads */

		background: var(--color-background);
		border: 1px solid #ddd;
		box-shadow: 0 .25em .75em rgba(0,0,0,0.08);
	}
	header > ul > li:nth-of-type(4) details > ul {
		list-style: none;
		margin: 0;
		padding: 1em 1.25em;

		/* VERPLAATSING — dit maakt hem zoals Goodreads */
		position: absolute;
		top: 100%; /* direct onder de summary */
		left: 70%;   /* uitlijnen met de knop */

		width: 15.6em; /* optioneel: breedte zoals Goodreads */

		background: var(--color-background);
		border: 1px solid #ddd;
		box-shadow: 0 .25em .75em rgba(0,0,0,0.08);
	}

	


}

/****************************************************************/
/* 		 			header minimaal 54em 						*/
/****************************************************************/
@media (min-width:54em) {
  header > a:last-of-type,
	nav a {
        flex-direction:row;
    
  }

  /* wanneer menu open is */
	header.is-open button:nth-of-type(2) {
		position: fixed;
		top: 1em;
	}
	header.is-open nav:nth-of-type(2) > button{
		position: fixed;
		top: 0;
		right: 120%;
	}
}


/* ************************************************************************************************************************************************************************************************************* */



/*****************************************************************************************/
/* 											Main elementen 							   	 */
/*****************************************************************************************/
main{
	margin: .5em;
}

h1 a {
	text-decoration: none;
}


/* ************************************************************************************************************************************************************************************************************* */


/*****************************************************************************************/
/* 											Footer		 							   	 */
/*****************************************************************************************/
footer{
	background-color: var(--color-background);
	padding:2em .75em;
	color: var(--color-text);

	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 3.2em 3.2em 1fr 2em .3fr 2em 1fr;
	column-gap: .5em;

	transition: 1s;
}

footer h3{
	font-size: .9em;
	font-family: var(--text-LatoBold),"Helvetica Neue", Helvetica, Arial, sans-serif;
}

footer ul{
	list-style-type:"";
	font-size: .9em;
	padding: 0 0 0 .5em;
}

footer ul a{
	color: var(--color-text);
	text-decoration-line: none;

}

footer ul:nth-of-type(3){
	display: flex;
	gap: .5em;
}

footer ul:nth-of-type(3) img{
	height: 2em;
}

footer img{
    height: 2.8em;
	display: flex;
	flex-direction: column;
}

/* grid voor de footer */
footer h3:nth-of-type(1){
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;

	display: flex;
	align-items: flex-end;
}
footer ul:nth-of-type(1){
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 4;
	
	margin-top: 0;
}
footer h3:nth-of-type(2){
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 4;
	grid-row-end: 5;
}
footer ul:nth-of-type(2){
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 5;
	grid-row-end: 6;

	margin-top: 0;
}
footer h3:nth-of-type(3){
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 6;
	grid-row-end: 7;
}
footer ul:nth-of-type(3){
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 7;
	grid-row-end: 8;

	margin-top: .5em;
}
footer a:nth-of-type(1) {
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
}
footer a:nth-of-type(2) {
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 3;

}
footer > p {
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 3;
	grid-row-end: 4;

	font-size: .9em;
	margin: 0;
}

/****************************************************************/
/* 		 			Dark mode header							*/
/****************************************************************/
@media (prefers-color-scheme: dark) {
	footer img{
		filter: invert();
	}
}

/****************************************************************/
/* 		 			footer minimaal 24em 						*/
/****************************************************************/
@media (min-width:24em) {	
	footer{
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: 3.2em 3.2em 2em .5fr 2em .3fr 2em 1fr;
	}

	footer h3:nth-of-type(2){
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 5;
		grid-row-end: 6;
	}
	footer ul:nth-of-type(2){
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 6;
		grid-row-end: 7;

		margin-top: 0;
	}
	footer h3:nth-of-type(3){
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 7;
		grid-row-end: 8;
	}
	footer ul:nth-of-type(3){
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 8;
		grid-row-end: 9;
	}

	footer a:nth-of-type(3){
		display: block;
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 4;
		grid-row-end: 5;

		font-size: .9em;
	}
}

/****************************************************************/
/* 		 			footer minimaal 28em 						*/
/****************************************************************/
@media (min-width:28em) {	
	footer ul:nth-of-type(3) img{
		height: 2.5em;
	}
}

/****************************************************************/
/* 		 			footer minimaal 38em 						*/
/****************************************************************/
@media (min-width:38em) {
	footer{
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(2, 3em) repeat(2, 2em);
		column-gap: 1em;

		padding:1em 0;
		margin: 0 .5em;
	}

	footer h3{
		display: flex;
		align-items: flex-end;
	}
	footer h3:nth-of-type(1){
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 1;
		grid-row-end: 2;
	}
	footer ul:nth-of-type(1){
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 2;
		grid-row-end: -1;
		
		margin-top: 0;
	}
	footer h3:nth-of-type(2){
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 1;
		grid-row-end: 2;
	}
	footer ul:nth-of-type(2){
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 2;
		grid-row-end: -1;

		margin-top: 0;
	}
	footer h3:nth-of-type(3){
		grid-column-start: 3;
		grid-column-end: 4;
		grid-row-start: 1;
		grid-row-end: 2;
	}
	footer ul:nth-of-type(3){
		grid-column-start: 3;
		grid-column-end: 4;
		grid-row-start: 2;
		grid-row-end: -1;

	}

  	footer a:nth-of-type(1) {
		position:static;
		grid-column-start: 4;
		grid-column-end: 5;
		grid-row-start: 1;
		grid-row-end: 2;
	}

	footer a:nth-of-type(2) {
		position:static;
		grid-column-start: 4;
		grid-column-end: 5;
		grid-row-start: 2;
		grid-row-end: 3;
	}

	footer > p {
		position:static;
		grid-column-start: 4;
		grid-column-end: 5;
		grid-row-start: 3;
		grid-row-end: 4;

		display: flex;
		align-items: center;
	} 
	footer a:nth-of-type(3){
		position:static;
		grid-column-start: 4;
		grid-column-end: 5;
		grid-row-start: 4;
		grid-row-end: -1;
	}

}

/****************************************************************/
/* 		 			footer minimaal 54em 						*/
/****************************************************************/
@media (min-width:54em) {
  header > a:last-of-type,
	nav a {
        flex-direction:row;
    
  }
}
/* ************************************************************************************************************************************************************************************************************* */