/*!
Theme Name: PADDAP
Theme URI: http://underscores.me/
Author: PADDAP
Author URI: https://paddap.nl
Description: This is the boilerplate theme of PADDAP Digital Agency
Version: 1.0.0
Tested up to: 6.0.2
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: paddap
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

PADDAP is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@font-face {
	font-family: 'PP Gatwick';
	src: url("/wp-content/themes/paddap-custom-theme/dist/fonts/PPGatwick-JumboSemibold.otf") format("opentype");
	font-style: normal;
	font-weight: 600;
}

@font-face {
	font-family: 'Acumin Pro';
	src: url("/wp-content/themes/paddap-custom-theme/dist/fonts/Acumin-RPro.otf") format("opentype");
	font-style: normal;
	font-weight: 400;
}

@font-face {
	font-family: 'Acumin Pro';
	src: url("/wp-content/themes/paddap-custom-theme/dist/fonts/Acumin-BdPro.otf") format("opentype");
	font-style: normal;
	font-weight: 700;
}

:root {
	/* Typography */
	--heading-font: "PP Gatwick", sans-serif;
	--body-font: "Acumin Pro", sans-serif;

	/* Colors */
	--blue: #0F0A98;
	--white: #FFFFFF;
	--red: #FF0059;
	--gray: #ece9e7;

	/* Utility */
	--container-width: 1200px;
	--small-container-width: 680px;
	--section-padding: 100px;

	--container-padding: calc((100vw - var(--container-width)) / 2)
}

@media (max-width: 1200px) {
	:root {
		--container-padding: calc((100vw - 90vw) / 2)
	}
}

html, body {
	margin:0!important;
}

body{
	background-color: var(--gray);
	overflow-x: visible;
}
body,
p,
a,
button {
	font-family: var(--body-font);
	margin: 0;
	padding: 0;
	margin-bottom: 16px;
	color: var(--blue);
}

h1, h2, h3, h4, h5 {
	margin: 0;
}

h1 {
	font-family: 'PP Gatwick';
	font-size: 1.8rem;
	color: var(--white);
}

h2 {
	font-family: 'PP Gatwick';
	color: var(--blue);
	margin-bottom: 16px;
}

h3 {}

img, svg, video, iframe {
	display: block;
}

section:not(#starthero) {
	margin-top: var(--section-padding);
}


/* Utility */
.container {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--container-width);
	width: 90%;
}
.small-container {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--small-container-width);
	width: 90%;
}

.col-span-1 {
	grid-column: span 1;
}
.col-span-2 {
	grid-column: span 2;
}
/* END Utility */

.btn-group {
	margin-top: 16px;
}

.btn {
	outline: 0;
	border: 2px solid var(--red);
	padding: 12px 32px;
	color: var(--white);
	background-color: var(--red);
	transition: all .2s ease;
}
.btn:hover {
	border-color: var(--red);
	background-color: transparent;
	color: var(--red);
}

/* Navbar - Default (PC / Large screens) */
.navbarcontainer {
	background-color: var(--blue);
	padding: 1rem 2rem;
	display: flex;
	align-items: center;
	height: 80px;
	position: relative;
}

.navbartext {
	margin-top: 30px;
	width: 10%;
	margin-bottom: 20px;
}


.navbarcontainer::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	height: 2px;
	width: 100%;
	background-color: var(--white);
}

/* Hero Section */
.hero {
	background-color: var(--blue);
}

.center-container {
	text-align: center;
}

/* Red jodenhaat text */
.hero__distinct {
	color: var(--white);
	padding: 16px 24px;
	display: inline-block;
	background-color: var(--red);
	border-radius: 99px;
}
.hero__distinct h1 {
	text-transform: uppercase;
	font-size: 24px;
}

/* Hero Title */
.herocontainer {
	text-align: center;
}

/* Video Hero */
.video-hero {
	background-color: var(--blue);
	display: flex;
	justify-content: center;
	align-items: center;
}

.video-wrapper {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--white);
}

.video-wrapper video {
	width: 100%;
	height: 100%;
	display: block;
}

.fullscreen-btn {
	position: absolute;
	bottom: 20px;
	right: 20px;
	height: 64px;
	width: 64px;
	background-color: var(--blue);
	color: var(--white);
	border: none;
	border-radius: 99px;
	font-size: 1rem;
	cursor: pointer;
	padding: 0;
	transition: background 0.3s ease;
}

.fullscreen-btn:hover {
	background-color: #00006a;
}


/* TEXT Section */
/* TEXT Section */
.text__text-wrapper {
	width: 100%;
	max-width: 33%;
}

.text__text-wrapper--1 {
	padding-bottom: 400px;
}

.text__text-wrapper--2 {
	padding-top: 400px;
}

.text__container {
	display: flex;
	justify-content: space-between;
}

.text__image-wrapper {
	width: 33%;
}

.text__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.text__text-wrapper-more {
	font-weight: 700;
	text-decoration: underline;
	display: none;
}

@media (max-width: 768px) {
	.text {
		overflow: hidden;
	}
	.text__container {
		position: relative;
		flex-direction: column;
		align-items: center;
	}

	.text__text-wrapper {
		max-width: unset;
		margin-bottom: 16px;
		padding: 0;
	}

	.text__image-wrapper {
		width: 100%;
		max-height: 200px;
		min-height: 200px;
		position: relative;
	}

	.text__image {
		height: 100%;
		width: 200px;
		position: absolute;
		right: 0;
		transform: translateX(50%);
	}
	.text__text-wrapper-more {
		display: block;
	}
	.text__text-wrapper-more-container {
		height: 0;
		overflow: hidden;
		interpolate-size: allow-keywords;
		transition: all .2s ease;
	}
	.text__text-wrapper-more-container.show {
		height: auto;
	}
	.text__text-wrapper-more-container p:first-child {
		margin-top: 16px;
	} 
}

@media (max-width: 768px) {
}

/* Extra small screens (phones, 425px and below) */
@media (max-width: 425px) {

}





/* VERHALEN Section */
.verhalen {
	position: relative;
}
.verhalen .container,
.verhalen__inner {
	pointer-events: none;
}
.verhalen__title-wrapper {
	margin-bottom: 40px;
	filter: blur(3px);
}
.verhalen__slider {
	height: 75vh;
	max-height: 650px;
	overflow: hidden;
	filter: blur(3px);
}

.verhalen__title-wrapper {
	color: var(--blue);
	text-align: center;
}

.verhalen__slider img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

/* Video overlay styles */
.video-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.9);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

.video-overlay video {
	max-width: 90%;
	max-height: 90%;
	border-radius: 8px;
}

.close-btn {
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 3rem;
	color: white;
	background: transparent;
	border: none;
	cursor: pointer;
}

/* Naam text */
.naam-text {
	color: var(--white);
	font-size: 15px;
	padding: 8px 12px;
	position: absolute;
	bottom: 35px;
	left: 0;           /* move to left */
	text-align: left;  /* align text left */
	margin-left: 20px;
	text-align: justify;

}

/* Short text */
.short-text {
	color: var(--white);
	font-size: 15px;
	padding: 8px 12px;
	position: absolute;
	bottom: 12px;
	left: 0;           /* move to left */
	text-align: left;  /* align text left */
	margin-left: 20px;
	text-align: justify;

}


/* Number text */
.numbertext {
	color: var(--white);
	font-size: 12px;
	padding: 8px 12px;
	position: absolute;
	right: 0 ;
	bottom: 0;
	text-align: right;
}

/* Info text */
.info-text {
	color: var(--white);
	font-size: 15px;
	padding: 8px 12px;
	position: absolute;
	bottom: 70px;
	left: 0;           /* move to left */
	text-align: left;  /* align text left */
	margin-left: 20px;
	text-align: justify;
}

/* Dots */
.dot {
	height: 15px;
	width: 15px;
	margin: 0 2px;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
	color: var(--gray);
}

/* === Responsive Styles === */

/* Tablet & Mobile: Full width, no margins */
@media (max-width: 768px) {
	.slideshow-container {
		width: 100%;
		max-width: 100%;       /* override desktop max-width */
		margin: 0;
		padding: 0;
		border-radius: 0;
	}

	.slideshow__image-wrapper {
		width: 100%;
		max-width: 100%;
		aspect-ratio: 16 / 9;  /* maintain consistent height */
		margin: 0;
		overflow: hidden;
	}

	.slideshow__image-wrapper img {
		width: 100%;
		height: 100%;
		object-fit: cover;     /* fill wrapper without distortion */
		display: block;
	}

	.naam-text {
		font-size: 13px;
		padding: 6px;
	}
	.short-text {
		font-size: 13px;
		padding: 6px;
	}

	.info-text {
		font-size: 13px;
		padding: 6px;
	}



	.numbertext {
		font-size: 10px;
		padding: 6px;
	}
}

/* Very small phones: Slightly smaller captions */
@media (max-width: 400px) {
	.naam-text {
		font-size: 12px;
	}

	.short-text {
		font-size: 12px;
	}

	.info-text {
		font-size: 12px;
	}
	.numbertext {
		font-size: 9px;
	}
}




/* hero */

/* Tablet Portrait */
@media (max-width: 768px) {
	.navbarcontainer {
		padding: 0.75rem 1.5rem;
		height: 70px;
	}

	.navbartext {
		width: 35%;
		margin-bottom: 20px;
	}

	.jodenhaat h1 {
		font-size: 1.5rem;
	}

	.fullscreen-btn {
		padding: 12px 18px;
		font-size: 0.95rem;
		bottom: 15px;
		right: 15px;
	}
}

/* Mobile Small */
@media (max-width: 480px) {
	.navbarcontainer {
		padding: 0.5rem 1rem;
		height: 60px;
	}

	.navbartext {
		width: 45%;
		margin-bottom: 20px;
	}

	.jodenhaat {
		margin: 20px 0;
		padding: 0 6px;
		border-radius: 40px;
	}

	.jodenhaat h1 {
		font-size: 1.2rem;
	}

	.video-wrapper {
		width: 100%;           /* full width of parent */
		max-width: 100%;       /* override any previous max-width */
		aspect-ratio: 16 / 9;  /* maintain 16:9 ratio */
		margin: 0;             /* remove side margins */
		overflow: hidden;
	}

	.video-hero {
		padding-left: 0px;
		padding-right: 0px;
	}	

	.video-wrapper video {
		width: 100%;
		height: 100%;
		display: block;
		object-fit: cover;     /* ensures the video fills the wrapper */
	}


	.fullscreen-btn {
		padding: 8px 13px;
		font-size: 0.9rem;
		bottom: 10px;
		right: 10px;
	}
}


/* Tekst section Jodenhaat en Samen Tegen Haat */
/* Default (PC / Large Screens) */

.tekstjoden {}

.jodencontainer {
	background-color: var(--gray);
	margin-top: 60px;
	padding: 2rem;
}

.jodentekstsectie {
	display: flex;
	flex-direction: column;
	width: fit-content;
	margin-left: 300px;
}

.jodentitel {
	color: var(--blue);
	text-align: justify;
}

.tekst1,
.tekst2,
.tekst3 {
	color: var(--blue);
	margin-bottom: 1rem;
	text-align: justify;
}

.containerhoed {
	position: relative;
	display: inline-block;
	top: -200px;
	margin-left: 270px;
	width: fit-content;
}

.hoed {
	display: block;
	width: 25%;
	height: auto;
	margin: 0 auto;
}

.jodentitel2 {
	color: var(--blue);
	text-align: justify;
}

.tekst4,
.tekst5,
.tekst6 {
	color: var(--blue);
	margin-bottom: 1rem;
	text-align: justify;
}

.jodentekstsectie2 {
	display: flex;
	flex-direction: column;
	width: fit-content;
	margin-left: 830px;
	margin-top: -200px;
}

/* Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
	.jodentekstsectie {
		margin-left: 150px;
	}

	.containerhoed {
		margin-left: 150px;
		top: -150px;
	}

	.hoed {
		width: 30%;
	}

	.jodentekstsectie2 {
		margin-left: 500px;
		margin-top: -150px;
	}
}

/* Tablet Portrait (max-width: 768px) */
@media (max-width: 768px) {
	.jodencontainer {
		padding: 1.5rem;
	}

	.jodentekstsectie,
	.jodentekstsectie2 {
		margin-left: 0;
		width: 100%;
	}

	.containerhoed {
		position: relative;
		margin: 2rem auto 0;
		top: 0;
		display: block;
		text-align: center;
	}

	.hoed {
		width: 40%;
	}

	.jodentekstsectie2 {
		margin-top: 2rem;
	}
}

/* Mobile (max-width: 480px) */
@media (max-width: 480px) {
	.jodencontainer {
		padding: 1rem;
	}

	.jodentekstsectie,
	.jodentekstsectie2 {
		margin-left: 0;
		width: 100%;
		text-align: left;
	}

	.containerhoed {
		margin: 1rem auto 0;
	}

	.hoed {
		width: 60%;
	}

	.tekst1,
	.tekst2,
	.tekst3,
	.tekst4,
	.tekst5,
	.tekst6 {
		font-size: 0.95rem;
	}
}





/* Gebeurtenissen */

.gebeurtenissen {

}

.text-gebeurtenissen {
	text-align: center;
}

.carousel-wrapper {

}



.carousel-item {

}

.arrow__left-arrow {

}

.arrow__right-arrow {

}

.carousel-indicator {

}

.indicator-line {

}

/* info section */

.info {
	background-color: var(--blue);
	padding: 75px 0;
	overflow: hidden;
}

.info__container {
	display: flex;
	justify-content: space-between;
	gap: 80px;
}

.info__text-container {
	width: 40%;
	max-width: 400px; 
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.info__text-container h2 {
	color: var(--white);
}

.info__text-container p {
	color: var(--white);
}

.image__info-grid {
	width: 100%;
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.image__info {
	width: 100%;
	display: block;
	max-width: 350px;
	position: relative;
	z-index: 6;
}
.image__info img {
	border-radius: 4px;
	/* 	transform: translate(75px, 75px); */
	/* 	rotate: 1.5deg; */
}

@media (max-width: 960px) {
}

@media (max-width: 768px) {
	.info {
		padding-top: 75px;
	}
	.info__container {
		flex-direction: column;
		align-items: center;
		gap: 32px;
	}

	.info__text-container {
		width: 100%;
		max-width: unset;
	}

	.image__info-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.image__info {
		max-width: 100%;
		position: relative;
		z-index: 2;
		align-self: flex-start;
	}

	.image__info1 img {
		transform: translate(0, 0);
	}
}

/* forum */

section:not(#starthero).forum {
	background-color: var(--gray);
	position: relative;
	overflow: clip;
	margin-top: 50px;
	padding-top: var(--section-padding);
}

.forum__text-container {
	width: 50%;
	margin-bottom: 32px;
}

.forum__text-container h2 {
	color: var(--blue);
	font-size: 2rem;
	margin-bottom: 10px;
}

.forum__text-container p {
	color: var(--blue);
	font-size: 1rem;
}

.forum__image-container {
	position: absolute;
	top: 0;
	right: 0%;
	width: 250px;
	transform: translateX(40%);
}

.forum__image-container img {
	width: 100%;
	height: auto;
}

.wpcf7-form .form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 16px;
}
.wpcf7-form p {
	margin: 0;
}
.wpcf7-form br {
	display: none;
}

.wpcf7-form-control-wrap {
	display: block;
}
.wpcf7-form-control-wrap input,
.wpcf7-form-control-wrap textarea {
	width: 100%;
	border: 2px solid transparent;
	outline: none;
	margin: 4px 0;
}
.wpcf7-form-control-wrap input:focus,
.wpcf7-form-control-wrap textarea:focus {
	border-color: var(--blue); 	
}

.wpcf7-list-item {
	margin: 0;
}
.wpcf7-list-item label {
	display: flex;
	gap: 8px;
}
.wpcf7-list-item label input {
	width: 15px;
	height: 15px;
	margin: 0;
}

/* Tablet - max width 768px */
@media (max-width: 768px) {
	.forum__text-container {
		width: 100%
	}
	.forum__forum-container {
		width: 100%; 
	}
	.forum__image-container {
		width: 175px;
	}
}



/* footer */
.footer {
	margin-top: var(--section-padding);
	background-color: var(--blue);
}

.footer__top {
	padding: var(--section-padding) 0;
}
.footer__top-inner {
	display: flex;
	justify-content: center;
}
.footer__bottom {
	border-top: 2px solid var(--white);
	padding: 24px;
}
.footer__bottom-inner {
	display: flex;
	justify-content: space-between;
}
.footer__bottom-inner a {
	text-decoration: none;
}
.footer__bottom-inner a,
.footer__bottom-inner p {
	color: var(--white);
	margin: 0;
}

.swiper .swiper-pagination-bullet {
	border-radius: 0;
	height: 2px;
	width: 20px;
	background-color: rgba(0,0,0,0.5);
	transition: all .2s ease;
}
.swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
	background-color: rgba(0,0,0,1);
}

@media (max-width: 768px) {
	.footer__bottom-inner {
		flex-direction: column;
		gap: 16px;
	}	
}

.grecaptcha-badge { display: none !important; }

.cookieadmin-poweredby {
	display: none !important;
}