/*
Theme Name: Katelijn
Description: Eigen thema voor katelijn.be. Alle waarden komen uit de door
  Elementor gegenereerde CSS in KATELIJN-BACKUP, niet uit metingen in de
  browser - die gaven mobiele waarden terug bij een smal venster.
Version: 6.3
*/

/* ══ Kleuren en maten ══════════════════════════════════════════════════════
   Uit de Elementor-kit (post-9.css): accent #D10D33, tekst #000000,
   Open Sans, container 1140px, 20px tussen blokken. */
:root {
	--rood:      #d10d33;
	--zwart:     #000;
	--voet-bg:   #f4f4f4;
	--breedte:   1140px;
	--blokruimte: 20px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: "Open Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: var(--zwart);
	background: #fff;
	-webkit-font-smoothing: antialiased;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

img { max-width: 100%; height: auto; }
a { color: var(--zwart); font-size: 18px; text-decoration: none; }
a:hover { color: var(--rood); }

.omhulsel {
	max-width: var(--breedte);
	margin: 0 auto;
	padding: 0 20px;
}

/* ══ Kop ═══════════════════════════════════════════════════════════════════ */
.plaatskop { border-top: 5px solid var(--rood); padding: 20px 0; }
.plaatskop .omhulsel { 
	display: flex; 
	align-items: center; 
	justify-content: space-between; 
	gap: 24px; 
	flex-wrap: wrap; /* Zorgt ervoor dat elementen naar de volgende regel kunnen */
}
.plaatslogo { display: inline-flex; text-decoration: none; }
.plaatslogo img { height: 75px; width: 270px; max-width: 100%; display: block; }

.hoofdmenu ul { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; flex-wrap: wrap; }
.hoofdmenu a { color: var(--zwart); font-size: 18px; font-weight: 600; text-transform: uppercase; text-decoration: none; padding: 5px 0; display: inline-block; }
.hoofdmenu a:hover { color: var(--rood); }
.hoofdmenu .current-menu-item > a, .hoofdmenu .current_page_item > a { color: var(--rood); }

.menuknop { display: none; background: #fff; border: 1px solid var(--rood); color: var(--rood); font-size: 15px; padding: 7px 12px; cursor: pointer; border-radius: 3px; }

/* ══ Rode titelbalk ════════════════════════════════════════════════════════ */
.paginabanner { background: var(--rood); min-height: 200px; padding: 20px 0; display: flex; align-items: center; }
.paginabanner h1, .paginabanner-titel h1 { margin: 0; font-size: 45px; line-height: 1.1; font-weight: 500; text-transform: uppercase; color: #fff; text-align: left; }
.kruimelpad { font-size: 18px; font-weight: 400; color: #fff; margin-top: 12px; }
.kruimelpad a { color: #fff; text-decoration: none; font-size: 18px; }

/* Verberg de dubbele paginatitel in de inhoud als de banner er al is */
.page-id-contact .inhoud > .omhulsel > h1:first-child,
.inhoud .paginabanner-titel + h1 {
	display: none;
}

/* ══ Inhoud ════════════════════════════════════════════════════════════════ */
.inhoud { padding: 50px 0; flex: 1; }
.inhoud h1, .inhoud h2 { font-size: 32px; font-weight: 500; line-height: 1.2; color: var(--zwart); margin: 0 0 var(--blokruimte); }
.inhoud p { font-size: 16px; line-height: 24px; margin: 0 0 14.4px; }
.inhoud a { color: var(--rood); }

.uitgelicht { margin-bottom: var(--blokruimte); }
.uitgelicht img { display: block; width: 100%; }

/* ══ Knoppen ═══════════════════════════════════════════════════════════════ */
.knop, 
a.knop, 
.inhoud a.knop, 
.meerlezen, 
.inhoud .meerlezen,
.inhoud a[role="button"] {
	display: inline-block;
	background: var(--rood);
	color: #fff !important;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	padding: 15px;
	border-radius: 15px 0 15px 0;
}
.inhoud a[role="button"] br { display: none; }

.knop:hover, 
a.knop:hover, 
.inhoud a.knop:hover, 
.meerlezen:hover, 
.inhoud .meerlezen:hover,
.inhoud a[role="button"]:hover { 
	color: #fff !important; 
	text-decoration: none; 
	opacity: .9; 
}

/* ══ Rasters & Perfecte Kaarten Uitlijning (Dichtbundels en Werken) ══════ */
.rooster {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 30px;
	row-gap: 70px;
	padding-top: 0;
	align-items: stretch;
}

.kaart {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0;
	border: 0;
	height: 100%;
}

.kaart-foto {
	display: block;
	width: 100%;
	aspect-ratio: 100 / 120;
	overflow: hidden;
	background: #f5f5f5;
	margin-bottom: var(--blokruimte);
	flex-shrink: 0;
}
.kaart-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

.onzichtbaar-foto {
	visibility: hidden;
	background: transparent;
}

.kaart > h2,
.kaart > .kaart-knop { padding-left: 10px; padding-right: 10px; width: 100%; }

.kaart h2 {
	font-size: 25px;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.25;
	margin: 0 0 10px;
	flex-grow: 1;
}
.kaart h2 a { color: var(--zwart); text-decoration: none; font-size: inherit; }
.kaart h2 a:hover { color: var(--rood); }

.kaart-knop {
	display: inline-block;
	background: var(--rood);
	color: #fff !important;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	padding: 15px;
	border-radius: 15px 0 15px 0;
	margin-top: auto;
	align-self: flex-start;
	width: auto !important;
}
.kaart-knop:hover {
	color: #fff !important;
	text-decoration: none;
	opacity: .9;
}

.datum { display: none; }

/* ══ WordPress Galerij Blok (Fotopagina) - Uniforme vakken ═══════════ */
.inhoud .wp-block-gallery,
.inhoud .wp-block-gallery.has-nested-images {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 20px !important;
	width: 100% !important;
	margin: 0 0 var(--blokruimte) !important;
}

.inhoud .wp-block-gallery figure.wp-block-image,
.inhoud .wp-block-gallery.has-nested-images figure.wp-block-image,
.inhoud .wp-block-gallery .wp-block-image {
	display: flex !important;
	flex-direction: column !important;
	margin: 0 !important;
	width: 100% !important;
	aspect-ratio: 1 / 1 !important;
	overflow: hidden !important;
	background: #f5f5f5 !important;
}

.inhoud .wp-block-gallery figure.wp-block-image img,
.inhoud .wp-block-gallery.has-nested-images figure.wp-block-image img,
.inhoud .wp-block-gallery .wp-block-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

/* ══ Contact Pagina Raster & Socials ════════════════════════════════════ */
.contact-raster { display: grid; grid-template-columns: 2fr 1fr; gap: 60px; align-items: start; }
.contact-rechts ul, .contact-rechts p { display: flex; flex-direction: column; gap: 12px; margin-top: 15px; }
.contact-rechts a { font-size: 16px; color: var(--zwart); text-decoration: none; }
.contact-rechts a:hover { color: var(--rood); }

/* Nieuwe opmaak voor de grote social iconen */
.social-iconen { 
	display: flex; 
	flex-direction: row; 
	gap: 25px; 
	margin-top: 20px; 
}
.social-iconen a { 
	font-size: 40px; 
	text-decoration: none; 
	transition: transform 0.2s ease, opacity 0.2s ease; 
	display: inline-block;
}

/* Hover-effect: ze lichten iets op en worden groter */
.social-iconen a:hover { 
	transform: scale(1.1); 
	opacity: 0.8; 
}

/* De specifieke merkkleuren */
.social-iconen a .fa-facebook { 
	color: #1877F2; 
}

.social-iconen a .fa-youtube { 
	color: #FF0000; 
}

.social-iconen a .fa-instagram { 
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-block;
}

/* ══ Startpagina ═══════════════════════════════════════════════════════════ */
.home .uitgelicht img { height: 300px; object-fit: cover; }
.home .rooster { padding-top: 30px; }

/* ══ Overig (Galerij, Detail, Contact, Voet) ════════════════════════════════ */
.detail-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.plaatsvoet { background: var(--voet-bg); border-top: 2px solid var(--rood); padding: 50px 0; }
.plaatsvoet .omhulsel { display: flex; flex-direction: column; align-items: center; gap: var(--blokruimte); }
.paginering, .pagination { display: flex; gap: 10px; justify-content: center; padding: 30px 0 0; grid-column: 1 / -1; }
.paginering .page-numbers, .pagination .page-numbers { padding: 6px 10px; text-decoration: none; color: var(--zwart); }
.paginering .current, .pagination .current { color: var(--rood); font-weight: 600; }

/* ══ Media queries ═════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
	.rooster, .inhoud .wp-block-gallery, .inhoud .wp-block-gallery.has-nested-images { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 767px) {
	.menuknop { display: block; }
	.hoofdmenu { display: none; }
	.hoofdmenu.open { display: block; }
	.detail-raster, .contact-raster { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	.rooster, .inhoud .wp-block-gallery, .inhoud .wp-block-gallery.has-nested-images { grid-template-columns: 1fr !important; }
}

/* ══ Subtiele Footer Tekst ════════════════════════════════════════════════ */
.bijgewerkt-tekst {
	display: block;
	font-size: 12px;
	color: #999; /* Subtiel lichtgrijs */
	margin-top: -10px; /* Trekt het iets dichter naar de copyright tekst */
	opacity: 0;
	transition: opacity 0.4s ease;
}

/* Zodra ergens op de footer gehovert wordt, verschijnt de tekst */
.plaatsvoet:hover .bijgewerkt-tekst {
	opacity: 1;
}
@media (max-width: 767px) {
	.menuknop { display: block; }
	
	/* Forceer het menu onder het logo/knop */
	.hoofdmenu { display: none; width: 100%; order: 3; margin-top: 15px; }
	.hoofdmenu.open { display: block; }
	
	/* Logo en knop op de eerste regel */
	.plaatslogo { flex: 1; }
	
	/* Links in het menu gecentreerd onder elkaar */
	.hoofdmenu ul { display: flex; flex-direction: column; gap: 15px; align-items: center; padding: 0; }
}