/*
	Theme Name: Proformance
	Description: WordPress Theme using Tailwindcss, AlpineJS and Vite
	Version: 1.0
	Author: Frans van den Broeke
	Tags: Vite, AlpineJS, TailwindCSS, HTML5, CSS3
	Text Domain: OUI DO DIGITAL
	Author URI: https://ouido.digital/
	License: MIT
	License URI: http://opensource.org/licenses/mit-license.php
*/
@import url('https://fonts.googleapis.com/css2?family=Input+Mono:wght@400;700&display=swap');

html,
:host {
	font-family: "Input Mono", monospace;
}

/* --------------------------------------------------------------
  Fullscreen Video Section
-------------------------------------------------------------- */

:root {
	--header-height: 80px;
	/* Pas deze waarde aan op basis van je header hoogte */
	--footer-height: 100px;
	/* Pas deze waarde aan op basis van je footer hoogte */
}

body {
	position: relative;
	min-height: 100vh;
}

.video-slider {
	position: absolute;
	top: var(--header-height);
	left: 0;
	width: 100%;
	height: calc(100vh - var(--header-height) - var(--footer-height));
	overflow: hidden;
}

#fullscreen-video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	transform: translate(-50%, -50%);
	object-fit: cover;
}

.slider-title {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-family: 'Input Mono', monospace;
	font-size: 4rem;
	font-weight: 700;
	text-align: center;
	z-index: 2;
	margin: 0;
	padding: 0;
}

/* --------------------------------------------------------------
  Content Section Below Video
-------------------------------------------------------------- */

.content-section {
	margin-top: calc(100vh - var(--header-height));
	padding: 4rem 2rem;
	background-color: transparent;
}

.content-grid {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
}

.image-container {
	width: 100%;
	height: 100%;
}

.content-image {
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 8px;
}

.text-container {
	display: flex;
	align-items: center;
}

.content-text {
	font-family: 'Input Mono', monospace;
	font-size: 1.2rem;
	line-height: 1.6;
	color: #333;
	margin: 0;
}

/* --------------------------------------------------------------
  Responsive Adjustments
-------------------------------------------------------------- */

@media (max-width: 768px) {
	.content-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.content-section {
		padding: 2rem 1rem;
	}
}

::selection {
	background: #f7a82d;
	color: white;
}

::-moz-selection {
	background: #f7a82d;
	color: white;
}