/* ====
Theme Name: VVP Yachting Theme
Theme URI: http://www.vvpcomposites.com
Description: Wordpress Theme for VVP Composites
Version: 1.0
Author: Jeroen van der Wiel @ Nieuw Ontwerp
Tags: webdesign,nieuw,ontwerp,nieuwontwerp,wordpress

==== */

:root
{
	--website-black: #0C1533;
	--website-dark-gray: #4D5160;
	--website-light-gray: #EEEDE8;
	--website-gold: #AB9B77;
}

@font-face
{
		font-family: "Cambria";
		src: url("assets/Cambria.woff2") format("woff2");
		font-display: swap;
}

@font-face
{
		font-family: "ReadexPro";
		src: url("assets/ReadexPro-variable.woff2") format("woff2");
		font-display: swap;
}

*
{
	box-sizing: border-box;
}

html,body
{
	margin: 0;
	font-size: 106.25%;
	line-height: 1.234em;
	color: var(--website-black);
	font-family: 'ReadexPro';
	font-weight: 400;
	overflow-x: hidden;
	overflow-y: auto;
}

/* Typography */

h1,h2,h3,h4,h5
{
	line-height: 1em;
}

h1,h2,h4
{
	font-family: 'Cambria';
	font-weight: 500;
	margin-block-start: 0px;
	margin-block-end: 1em;
}

h3,h5
{
	font-family: 'ReadexPro';
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 3px;
	color: var(--website-gold);
	margin-block-start: 0px;
	margin-block-end: 0px;
}

h1
{
	margin-block-start: 0px;
	margin-block-end: 0px;
	font-size: clamp(3rem, calc(1rem + 3.88dvh), 9000px);
}

h2
{
	font-size: clamp(2rem, calc(1rem + 2.5dvh), 9000px);
}

h3
{
	font-size: clamp(1rem, calc(1rem + .65dvh), 9000px);
}

h4
{
	font-size: clamp(1rem, calc(1rem + .65dvh), 9000px);
}

h5
{
	font-size: .9rem;
}

p
{
	line-height: 1.5em;
}

p:not(:last-child)
{
	margin-block-start: 0px;
	margin-block-end: 1em;
}

p:last-child
{
	margin-block-start: 0px;
	margin-block-end: 0px;
}

/* Wrapper Styling */
main
{
	position: relative;
	
	section
	{
		padding-top: clamp(1rem, 11dvh, 120px);
		padding-bottom: clamp(1rem, 11dvh, 120px);
	}
	
	section.background-light
	{
		background: var(--website-light-gray);
	}

	section.background-dark
	{
		background: var(--website-dark-gray);
	}
	
	section.overflow-top-small
	{
		padding-top: 0px;
	}
	
	section.overflow-top-large
	{
		padding-top: 0px;
		transform: translateY(calc(0px - clamp(1rem, 5.5dvh, 60px)));
	}
	
	section.overflow-bottom-small
	{
		padding-bottom: 0px;
	}
	
	section.overflow-bottom-large
	{
		padding-top: 0px;
		transform: translateY(calc(0px + clamp(1rem, 5.5dvh, 60px)));
	}
}

main::before
{
	content: '';
	height: calc(100% + 6rem);
	width: 0px;
	border-left: 1px solid var(--website-gold);
	top: -3rem;
	left: clamp(2rem, 12.5dvw, 240px);
	position: absolute;
	z-index: 90;
	user-select: none;
	pointer-events: none;
}

@media (width < 900px )
{
	main::before
	{
		left: .5rem;
	}
}

section.references-archive,
section.references-index
{
	
	padding-left: clamp(1rem, calc(calc(100% - 1360px) / 2), 900px);
	padding-right: clamp(1rem, calc(calc(100% - 1360px) / 2), 900px);
	
	.wrapper
	{
		display: flex;
		flex-wrap: wrap;
		border-top: 1px solid var(--website-gold);
		border-left: 1px solid var(--website-gold);
		
		a
		{
			display: flex;
			flex-basis: 300px;
			flex: 1;
			align-items: center;
			overflow: hidden;
			justify-content: center;
			position: relative;
			border-right: 1px solid var(--website-gold);
			border-bottom: 1px solid var(--website-gold);
			aspect-ratio: 4 / 3;
			color: var(--website-black);
			text-decoration: none;
			transition: all 200ms ease-in-out;
			transition-delay: 100ms;

			span.year
			{
				display: inline-flex;
				font-family: 'ReadexPro';
				font-weight: 400;
				text-transform: uppercase;
				letter-spacing: 3px;
				font-size: .9rem;
				align-items: center;
				justify-content: center;
				padding: .25rem .75rem;
				border-radius: 1rem;
				border: 1px solid var(--website-black);
				position: absolute;
				bottom: 1rem;
				right: 1rem;
				transition: all 200ms ease-in-out;
				transition-delay: 100ms;
			}
	  }
		a:after
			{
				content: '';
				position: absolute;
				top: 0px;
				left: 0px;
				height: 100%;
				width: 100%;
				background: var(--website-gold);
				z-index: -1;
				transform: translateY(100%);
				transition: transform 200ms ease-in-out;
		}

		a:hover
			{
				color: white;

				span.year
				{
					border-color: white;
				}
		}

		a:hover:after
			{
				transform: translateY(0px);
		}
	}
}