/* =========================================
   FLAMENCO GROEP – Stijl-overschrijvingen
   Op basis van Spectral (HTML5 UP)
   ========================================= */

/* Google Fonts: elegante schreefloze + sierlijk schrift */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,400&family=Lato:wght@300;400;700&display=swap');

/* ---- Kleurvariabelen ---- */
:root {
	--rood:          #c0392b;
	--rood-hover:    #e74c3c;
	--rood-donker:   #96281b;
	--lichtgrijs:    #f2f2f2;
	--donkergrijs:   #3a3a3a;
	--tekst:         #444444;
	--subtekst:      #777777;
	--wit:           #ffffff;
}

/* ---- Basislettertype ---- */
body,
body input,
body select,
body textarea {
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	color: var(--tekst);
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* ---- Achtergrondkleur pagina ---- */
body {
	background: var(--lichtgrijs);
}

/* =========================================
   BANNER – bovenste hero met flamencofoto
   ========================================= */

#banner {
	background-color: #1a0a0a;
	background-image:
		linear-gradient(rgba(0,0,0,0.52), rgba(0,0,0,0.52)),
		url('../../images/flamenco-groningen-4.jpg');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

/* Stap 1: fix voor alle schermen ≤980px — geen fixed attachment */
@media screen and (max-width: 980px) {
	#banner {
		background-attachment: scroll !important;
	}
}

/* Stap 2: main.js zet 'is-mobile' op body en vervangt foto door banner.jpg —
   eigen foto als basis voor portrait én landscape */
body.is-mobile.landing #banner {
	background-image:
		linear-gradient(rgba(0,0,0,0.52), rgba(0,0,0,0.52)),
		url('../../images/flamenco-groningen-4.jpg') !important;
	background-attachment: scroll !important;
}

/* Stap 3: portrait op mobiel en tablet —
   foto volledig zichtbaar, tekst gecentreerd, knop verborgen */
@media screen and (max-width: 980px) and (orientation: portrait) {
	#banner,
	body.is-mobile.landing #banner {
		background-size: contain !important;
		background-position: top center !important;
		height: 0 !important;
		min-height: 0 !important;
		padding-top: 58.8% !important;
		padding-bottom: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		position: relative !important;
	}

	#banner .inner {
		position: absolute !important;
		top: 70% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
		width: 100% !important;
		padding: 0 2em !important;
	}

	/* Knop en scroll-pijl verbergen in portrait */
	#banner .actions,
	#banner .more {
		display: none !important;
	}
}

/* Stap 4: landscape op smartphone (max 667px hoog) —
   foto volledig zichtbaar met contain, tekst gecentreerd */
@media screen and (max-width: 980px) and (orientation: landscape) and (max-height: 500px) {
	#banner,
	body.is-mobile.landing #banner {
		background-size: contain !important;
		background-position: center center !important;
		background-color: #1a0a0a !important;
		height: 100vh !important;
		min-height: 0 !important;
		padding: 0 !important;
		position: relative !important;
	}

	#banner .inner {
		position: absolute !important;
		top: 58% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
		width: 100% !important;
		padding: 0 2em !important;
	}

	#banner .more {
		display: none !important;
	}
}

/* Stap 5: landscape op tablet (hoogte >500px) —
   overlay als ::before pseudo-element zodat hij niet los schuift bij scrollen.
   ::after van main.css uitgeschakeld — die dekt alleen de zichtbare viewport. */
@media screen and (max-width: 980px) and (orientation: landscape) and (min-height: 501px) {
	#banner,
	body.is-mobile.landing #banner {
		background-image: url('../../images/flamenco-groningen-4.jpg') !important;
		background-size: cover !important;
		background-position: center center !important;
		height: 100vh !important;
		min-height: 35em !important;
		padding: 0 !important;
		position: relative !important;
		overflow: hidden !important;
	}

	/* ::after van main.css uitzetten — die dekt niet de volledige bannerhoogte */
	#banner::after {
		display: none !important;
	}

	/* Overlay als ::before — dekt de volledige banner inclusief het deel buiten viewport */
	#banner::before {
		content: '' !important;
		position: absolute !important;
		inset: 0 !important;
		background: rgba(0,0,0,0.52) !important;
		z-index: 0 !important;
	}

	#banner .inner {
		position: absolute !important;
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
		width: 100% !important;
		padding: 0 2em !important;
		z-index: 1 !important;
	}

	#banner .more {
		display: none !important;
	}
}

/* Titellijn boven/onder in banner: rood i.p.v. wit */
#banner h2:before,
#banner h2:after {
	background: var(--rood);
}

/* Naam van de groep in sierlijk schrift */
#banner h2 {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 3em;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #fff;
}

#banner p {
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	letter-spacing: 0.35em;
	font-size: 0.95em;
	color: rgba(255,255,255,0.85);
	text-transform: uppercase;
}

/* Pijl-knop onderaan banner */
#banner .more {
	color: rgba(255,255,255,0.7);
}
#banner .more:after {
	border-color: rgba(255,255,255,0.5);
}

/* Snellere fade-in (was 3s) */
#banner:after {
	-moz-transition: opacity 0.8s ease-in-out !important;
	-webkit-transition: opacity 0.8s ease-in-out !important;
	-ms-transition: opacity 0.8s ease-in-out !important;
	transition: opacity 0.8s ease-in-out !important;
}

/* =========================================
   PRIMAIRE KNOPPEN – zacht rood
   ========================================= */

input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary,
button.primary,
.button.primary {
	background-color: var(--rood) !important;
	border: none !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 0.8em;
}

input[type="submit"].primary:hover,
input[type="reset"].primary:hover,
input[type="button"].primary:hover,
button.primary:hover,
.button.primary:hover {
	background-color: var(--rood-hover) !important;
}

input[type="submit"].primary:active,
input[type="reset"].primary:active,
input[type="button"].primary:active,
button.primary:active,
.button.primary:active {
	background-color: var(--rood-donker) !important;
}

/* =========================================
   GEDEELDE STIJL – lichte secties
   ========================================= */

.wrapper.style-light {
	background-color: var(--wit);
}

.wrapper.style-light .inner {
	padding: 5em 3em;
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}

.wrapper.style-light header.major h2 {
	font-family: 'Playfair Display', serif;
	color: var(--donkergrijs);
	font-size: 2.2em;
	margin-bottom: 0.6em;
}

/* Rode streep onder hoofdtitels */
.wrapper.style-light header.major h2:after {
	content: '';
	display: block;
	width: 60px;
	height: 3px;
	background: var(--rood);
	margin: 0.5em auto 0;
}

.wrapper.style-light header.major p {
	color: var(--tekst);
	font-size: 1.05em;
	line-height: 1.85;
	max-width: 700px;
	margin: 0 auto;
}

/* Portretfoto onder Wie zijn wij */
.over-ons-foto {
	margin-top: 3em;
}

.over-ons-foto img {
	width: 100%;
	max-width: 320px;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 6px 28px rgba(0,0,0,0.13);
	display: block;
	margin: 0 auto;
}

/* =========================================
   AGENDA – grijze sectie met kaartjes
   ========================================= */

.wrapper.style-agenda {
	background-color: var(--lichtgrijs);
}

.wrapper.style-agenda .inner {
	padding: 5em 3em;
	max-width: 900px;
	margin: 0 auto;
}

.wrapper.style-agenda header.major {
	text-align: center;
}

.wrapper.style-agenda header.major h2 {
	font-family: 'Playfair Display', serif;
	color: var(--donkergrijs);
	font-size: 2.2em;
	margin-bottom: 0.5em;
}

.wrapper.style-agenda header.major h2:after {
	content: '';
	display: block;
	width: 60px;
	height: 3px;
	background: var(--rood);
	margin: 0.5em auto 0;
}

.wrapper.style-agenda header.major p {
	color: var(--subtekst);
	font-size: 1em;
}

/* Agenda lijst */
.agenda-lijst {
	margin-top: 2.5em;
	display: flex;
	flex-direction: column;
	gap: 1.2em;
}

.agenda-item {
	display: flex;
	align-items: center;
	gap: 1.8em;
	background: var(--wit);
	border-radius: 6px;
	padding: 1.4em 2em;
	box-shadow: 0 2px 12px rgba(0,0,0,0.07);
	border-left: 4px solid var(--rood);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.agenda-item:hover {
	box-shadow: 0 4px 20px rgba(192,57,43,0.15);
	transform: translateY(-2px);
}

.agenda-datum {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 60px;
	text-align: center;
}

.agenda-datum .dag {
	font-family: 'Playfair Display', serif;
	font-size: 2em;
	font-weight: 700;
	color: var(--rood);
	line-height: 1;
}

.agenda-datum .maand {
	font-family: 'Lato', sans-serif;
	font-size: 0.7em;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--subtekst);
	margin-top: 0.2em;
}

.agenda-info {
	flex: 1;
}

.agenda-info h3 {
	font-family: 'Playfair Display', serif;
	font-size: 1.1em;
	color: var(--donkergrijs);
	margin: 0 0 0.3em;
}

.agenda-info p {
	font-size: 0.85em;
	color: var(--subtekst);
	margin: 0;
}

/* Kleine knop in agenda-items */
.agenda-item .button.small {
	font-size: 0.72em;
	padding: 0.55em 1.4em;
	white-space: nowrap;
	border-radius: 3px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* =========================================
   VIDEO – responsive embed
   ========================================= */

#video .inner {
	max-width: 800px;
}

.video-wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 verhouding */
	height: 0;
	overflow: hidden;
	border-radius: 6px;
	box-shadow: 0 4px 24px rgba(0,0,0,0.12);
	margin-top: 2em;
}

.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* =========================================
   CONTACT – donkere accentbalk
   ========================================= */

.wrapper.style-contact {
	background-color: var(--donkergrijs);
	text-align: center;
}

.wrapper.style-contact .inner {
	padding: 4em 3em;
	max-width: 700px;
	margin: 0 auto;
}

.wrapper.style-contact h2 {
	font-family: 'Playfair Display', serif;
	color: var(--wit);
	font-size: 1.9em;
	margin-bottom: 0.6em;
}

.wrapper.style-contact h2:after {
	content: '';
	display: block;
	width: 60px;
	height: 3px;
	background: var(--rood);
	margin: 0.5em auto 0;
}

.wrapper.style-contact p {
	color: rgba(255,255,255,0.7);
	font-size: 1em;
	line-height: 1.8;
	margin-bottom: 2em;
}

.wrapper.style-contact .button.primary {
	font-size: 0.85em;
	padding: 0.85em 2.5em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
}

/* =========================================
   SOCIAL MEDIA – rode cirkels met wit logo
   ========================================= */

.social-iconen {
	display: flex;
	justify-content: center;
	gap: 4em;
	margin-top: 2.5em;
	flex-wrap: wrap;
}

.social-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.7em;
	text-decoration: none;
	transition: transform 0.2s ease;
}

.social-item:hover {
	transform: translateY(-4px);
}

.social-cirkel {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.5em;
	height: 4.5em;
	border-radius: 50%;
	background-color: var(--rood);
	color: #fff;
	font-size: 1.5em;
	transition: background-color 0.2s ease;
}

.social-cirkel .icon {
	color: #fff;
	font-size: 1em;
	line-height: 1;
}

.social-item:hover .social-cirkel {
	background-color: var(--rood-hover);
}

.social-naam {
	font-family: 'Playfair Display', serif;
	font-size: 1.05em;
	font-weight: 700;
	color: var(--donkergrijs);
}

.social-omschrijving {
	font-size: 0.8em;
	color: var(--subtekst);
	letter-spacing: 0.05em;
}

/* =========================================
   FOTO-SECTIE – grote afbeelding boven footer
   ========================================= */

/* Neutraliseer de fixed achtergrond die main.css op #page-wrapper zet —
   anders schijnt die door #foto-onder heen op desktop */
body.landing #page-wrapper {
	background: none !important;
}

#foto-onder {
	width: 100%;
	height: 0;
	padding-top: 75%;
	position: relative;
	background-color: #1a0a0a;
	background-image:
		linear-gradient(rgba(0,0,0,0.20), rgba(0,0,0,0.20)),
		url('../../images/flamenco-groningen-5.jpg');
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: scroll;
}

/* =========================================
   FOOTER – smalle donkergrijze balk
   ========================================= */

#footer {
	background-color: #2a2a2a;
	background-image: none;
	padding: 1.2em 2em;
	text-align: center;
}

#footer .icons {
	display: none;
}

#footer .copyright {
	color: rgba(255,255,255,0.45);
	font-size: 0.75em;
	letter-spacing: 0.1em;
	margin: 0;
}

#footer .copyright li {
	border-left-color: rgba(255,255,255,0.2);
}

/* =========================================
   HEADER-BALK – verbergen (geen menu gewenst)
   ========================================= */

#header {
	display: none !important;
}

/* =========================================
   MOBIEL – aanpassingen
   ========================================= */

@media screen and (max-width: 640px) {
	#banner h2 {
		font-size: 2em;
	}

	.agenda-item {
		flex-wrap: wrap;
		gap: 1em;
		padding: 1.2em 1.4em;
	}

	.agenda-item .button.small {
		width: 100%;
		text-align: center;
	}

	.wrapper.style-light .inner,
	.wrapper.style-agenda .inner,
	.wrapper.style-contact .inner {
		padding: 3em 1.5em;
	}

	.social-iconen {
		gap: 2.5em;
	}
}