/*********************/
/* FONTS */
/*********************/
@font-face {
	font-family: "Inter";
	font-weight: 700;
	src: url('/fonts/Inter-Bold.woff2') format('woff2');
}

@font-face {
	font-family: "Inter";
	font-weight: 400;
	src: url('/fonts/Inter-Regular.woff2') ('woff2');
}

@font-face {
	font-family: "Inter";
	font-weight: 600;
	src: url('/fonts/Inter-SemiBold.woff2') ('woff2');
}

/*********************/
/* CUSTOM PROPERTIES */
/*********************/
:root {
	color-scheme: light dark;
	--icon-color: #111;
	--background-color: #ffffff;

	--color-text:#111;
	--background-party-outfit-kopen: #eee;
	--color-button:#111;
	--color-text-button:#ffffff;
	--toegankelijkheid-background-color:pink;
	--toegankelijkheid-outline-color:#e0164a;
	--toegankelijkheid-active-text-color: #434343;
	--hart-kleur: #c00000;

	--whitespace:clamp(1.25em, 5vw, 2em);
	--kerst-button: rgb(11, 211, 11);

}

@media (prefers-color-scheme:dark){
	:root {
		color-scheme: light dark;
		--icon-color: #ffffff;
		--background-color: #111;
		
		--color-text:#ffffff;
		--background-party-outfit-kopen: #434343;
		--color-button:#ffffff;
		--color-text-button:#111;
		--toegankelijkheid-background-color:#e0164a;
		--toegankelijkheid-outline-color:pink;
		--toegankelijkheid-active-text-color: #6b6b6b;
		--hart-kleur: #c00000;

		--whitespace:clamp(1.25em, 5vw, 2em);
	}
}





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


/****************/
/* ALGEMENE DINGEN */
/****************/

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

h2 {
	display: flex;
	justify-content: center;
	color: var(--color-text);
}

h3 {
	font-size: 0.9em;
	color: var(--color-text);
}

body {
	margin:0;
	font-family: "Inter", sans-serif;

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

svg{
	@media (prefers-color-scheme:dark){
		filter:invert(1);
	}
}

button {
	appearance: none;
	border: none;
	background-color: var(--background-color);
}




/****************/
/* HEADER */
/****************/
header {
	display:flex;
	background-color: var(--background-color);
	position:sticky;
  	top:0;
	/* width:100vw; BAH */

	padding:.5em;

	align-items: center;
	justify-content: space-between	;
	z-index:2;
}

header li {
	list-style:none;
}

/* Alle icons */
header svg {
	width: 1.5em;

	color: #111;
	@media (prefers-color-scheme:dark){
		filter:invert(1);
	}
}

header menu img {
	width: 1.8em;
	@media (prefers-color-scheme:dark){
		filter:invert(1);
	}
} 

/* Logo Loavies */
header h1 {
	flex-shrink: 0;	
	margin:0;
}

header h1 svg{
	width:4em;
}



/****************/
/* HAMBURGER MENU */
/****************/

menu{
	display:flex;
}

menu li button{
	background-color:var(--background-color) ;
}

/* Hamburger menu */
header menu {
	margin:0;
	padding: 0;
	display: flex;

}

header menu li:nth-of-type(1) button {
	position: relative;
	z-index: 1;
}

header menu li:nth-of-type(1) button.is-open img {
	content:url(../images/close_svgrepo_com.svg);
}

header nav{
	display: grid;
	background-color: var(--background-color);
	font-family: var(--text-bold);
	font-size: 0.9em;
	line-height: 250%;
	

	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;

	translate: -100% 0;
	
	transition:0.5s;

	overflow-y:auto ;
}

header img{
	width: 100%;
	margin:0;
	padding:0;
}

header nav.is-open {
	translate: 0 0;
}
header ul {
	margin:0;
	padding: 0 0;
	display:flex;

}

header nav ul {
	margin-top: 3em;
	display: flex;
	flex-direction: column;

}
header nav ul li{
	margin:0;
	padding: 0 1em;
}

header nav ul li:nth-of-type(2){
	margin:0;
	padding: 0 0;
}

header nav > a {
	font-size: 8em;
}

header nav form{
	display: flex;
	font-family: "inherit", sans-serif;

}

header nav form select{
	display: flex;
	font-family: "inherit", sans-serif;
	height: 2em;
	margin: 1em;
	width:30em;
}

/* Hamburger menu einde */





/****************/
/* FOOTER */
/****************/
footer{
	display: flex;
	font-size: 0.7em;
}

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

footer ul {
	padding:0 0 0 15%;
	line-height: 300%;
}

footer li {
	list-style-type: none;
}

footer svg {
	width: 1.8em;
}

footer nav ul:nth-of-type(1) {
	display:flex;
	flex-direction: column;
	line-height: 300%;
}

footer nav ul:nth-of-type(2) {
	display:flex;
	flex-direction: row;
	gap: 1em;
}


.visually-hidden{
	clip:rect(0 0 0 0);
	clip-path:inset(50%);
	height: 1px;
	overflow:hidden;
	position:absolute;
	white-space: nowrap;
	width: 1px;
}

/****************/
/* TOEGANKELIJKHEID */
/****************/

a{
	transition:0.25s ease;
	color:var(--color-text);
	
}


:focus {
	outline: solid 3px var(--toegankelijkheid-outline-color);
	outline-offset: 2px;
}

a:active {
	border:solid 2px;
	border-color: var(--toegankelijkheid-outline-color);
	color:var(--toegankelijkheid-active-text-color);
}

a:hover {	
	scale:1.1;
}

button:active {
	background-color: var(--toegankelijkheid-background-color);
	color:#111;
}

button:hover {
	background-color:var(--toegankelijkheid-background-color);
} 

::selection{
	background-color:var(--toegankelijkheid-background-color);
}


/******************************/
/* Favorieten hartje animatie */
/******************************/

@keyframes hartslag-animation {
	0% { scale:1; }
	5% { scale:.7; }
	10% { scale:1.5; }
	15% { scale:.7; }
	20% { scale:1.5; }
	25% { scale:.7; }
	30% { scale:1; }
	100% { scale:1; }
  }
  
  /* met hulp van Anne en codepen */
  ul li[aria-label="hartslag favorieten button"]:active article button svg {
	animation-name:hartslag-animation;
	animation-duration:1.5s;
	animation-iteration-count:infinite;
	will-change:transform;
	fill: var(--hart-kleur); /* << HIER */

	z-index: 10;
  }

  ul li[aria-label="hartslag favorieten button"].is-open {
	fill: var(--hartkleur, red); /* << EN HIER */
  }
  /* einde hulp */