/*
Theme Name: Stichting Dieren Steun
Theme URI: https://www.stichtingdierensteun.org
Author: Jeroen van der Wiel
Author URI: https://www.jeroenvanderwiel.com
Description: Wordpress thema gebouwd voor Stichting Dieren Steun
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.2
Version: 1.5
*/

*
{
	box-sizing: border-box;
}

html,body
{
	font-size: 106.5%;
	color: black;
	background: #EFEFEF;
	font-family: 'Roboto', 'Roboto', sans-serif;
}

h1,h2,h3,h4,h5,h6
{
	margin-block-start: 0px;
	font-family: 'Roboto Slab', 'Roboto Slab', serif;
	line-height: 1em;
}

h1
{
	color: #1ebe6e;
	font-size: clamp(24px, calc(1rem + 8dvh), 120px);
	line-height: 1.2em;
	margin-block-end: 0px;
}

h2
{
	font-size: calc(calc(calc(1em * 1.618) * 1.618) * 1.618);
	margin-block-end: 0px;
}

h3
{
	font-size: calc(calc(1em * 1.618) * 1.618);
	margin-block-end: 1em;
}

h4
{
	font-size: calc(1em * 1.618);
	margin-block-end: 1em;
}

h5
{
	
}

nav
{
	display: flex;
	justify-content: space-between;
	position: fixed;
	z-index: 21;
	top: 0px;
	width: 100%;
	left: 0px;
	right: 0px;
	padding: 0 0 0 clamp(2em, 5dvw, 900px);
	
	.ribbon
	{
		padding-top: 1em;
	}
	
	.menu-button
	{
		cursor: pointer;
		aspect-ratio: 168/131;
		padding-left: 1.5em;
		height: 4em;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		
		.open
		{
			display: block;
		}
		
		.close
		{
			display: none;
		}
		
		svg
		{
			position: absolute;
			top: 0px;
			left: 0px;
			right: 0px;
			bottom: 0px;
			fill: white;
			z-index: -1;
		}
	}
	
	.menu-button.toggled
	{
		.open
		{
			display: none;
		}
		
		.close
		{
			display: block;
		}
		
		svg
		{
			fill: #EFEFEF;
		}
		
	}
	
	.menu-button:hover,
	.menu-button:focus
	{
		svg
		{
			fill: #1ebe6e;
		}
	}
}

aside.fullscreen-menu
{
	z-index: 20;
	position: fixed;
	background: white;
	padding: 8em clamp(2em, 5dvw, 900px) 2em clamp(2em, 5dvw, 900px);
	overflow-y: auto;
	overflow-x: hidden;
	top: 0px;
	left: 0px;
	height: 100dvh;
	width: 100dvw;
	opacity: 0;
	user-select: none;
	pointer-events: none;
	
	> div
	{
		height: 100%;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}
	h5
	{
		margin-block-end: 1rem;
		color: #9F9F9F;
	}
	
	ul
	{
		margin-block-start: 0px;
		margin-block-end: clamp(2em, 5dvh, 900px);
	}
	
	ul:last-child
	{
		margin-block-end: 0px;
	}
	
	ul.wp-menu
	{
		list-style-type: none;
		padding-inline-start: 0px;
		overflow-y: auto;
		overflow-x: hidden;
		display: flex;
		flex-direction: column;
		gap: 1rem;
		
		> li
		{
			font-weight: 800;
			font-family: 'Roboto Slab', 'Roboto Slab', serif;
			font-size: 2rem;
		}
		
		ul.sub-menu
		{
			list-style-type: none;
			padding-inline-start: 0px;
			display: flex;
			flex-direction: column;
			gap: .5rem;
			
			> li
			{
				font-family: 'Roboto Slab', 'Roboto Slab', serif;
				font-size: 1.5rem;
			}
		}
		
		a
		{
          text-decoration: none;
        }
		
		a:hover
		{
			color: #1ebe6e;	
		}
	}
	
	ul.socials
	{
		list-style-type: none;
		padding-inline-start: 0px;
		display: flex;
		flex-wrap: wrap;
		gap: 1em;

		li
		{
			a
			{
				svg
				{
					height: 1.5em;
					fill: black;
				}
			}

			a:hover
				{
					svg
					{
						fill: #1ebe6e;
					}
			}
		}
	}
}

aside.fullscreen-menu.open
{
	opacity: 1;
	user-select: initial;
	pointer-events: initial;
}

header.hero
{
	height: 85dvh;
	padding: 2em;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	
	svg
	{
		top: 0px;
		left: 0px;
		position: absolute;
		width: clamp(20em, 100dvw, 1200px);
		aspect-ratio: 168/131;
	}
	
	h1
	{
		max-width: 25ch;
	}
}

main
{
	padding: clamp(2em, 5dvh, 600px) clamp(1em, 5dvw, 900px);
}

footer
{
	.pre-footer
	{
		
	}
	
	.main-footer
	{
		position: relative;
		border-radius: 0 0 7em 0;
		padding: clamp(2em, 10dvh, 600px) clamp(1em, 5dvw, 900px);
		background-color: #1ebe6e;
		background-image: url('http://stichtingdierensteun.org/wp-content/uploads/2026/07/sds-footersplash.webp');
		background-position: bottom left;
		background-size: contain;
		background-repeat: no-repeat;
		color: white;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-gap: 2em;
		
		ul:not(.socials)
		{
			padding-inline-start: 0px;
			list-style-type: none;
			
			li
			{
				a
				{
					font-size: 1.1em;
					text-decoration: none;
					color: #c7ddd2;
				}
				
				a:hover,
				a:focus
				{
					color: white;
				}
			}
			
			li:first-child
			{
				a
				{
					color: white;
				}
			}
		}
		
		ul.socials
		{
			list-style-type: none;
			padding-inline-start: 0px;
			display: flex;
			flex-wrap: wrap;
			gap: 1em;
			
			li
			{
				a
				{
					svg
					{
						height: 1.5em;
						fill: #c7ddd2;
					}
				}
				
				a:hover
				{
					svg
					{
						fill: white;
					}
				}
			}
		}
		> svg
		{
			height: 4em;
			position: absolute;
			bottom: .5em;
			right: 2em;
			fill: #EFEFEF;
		}
	}
	
	.sub-footer
	{
		padding: .5em clamp(1em, 5dvw, 900px); 
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		font-size: .75em;
	}
}

@media ( width < 1200px)
{
	footer
	{
		.main-footer
		{
			grid-template-columns: 1fr 1fr;
		}
	}
}


@media ( width < 800px)
{
	footer
	{
		.main-footer
		{
			grid-template-columns: 1fr;
		}
	}
}