/* ================================================================================
                          RKBS EMMAUS - GENERAL SETTINGS
   Eerste opzet (basis), gebaseerd op lusthof.css + kleuren/fonts van custom_emmaus.css
   Afbeeldingen: kopieer de map  images/emmaus/  uit de oude DNN-skin
   ("panta rhei - scholen") naar  pantarheischolen/images/emmaus/
   ================================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

:root{
	--wit:#fff;
	--zwart:#000;
	--donkergrijs:#aaa;
	--grijs:#ccc;

	--groen:#66B42D;
	--lichtgroen:#A8D671;
	--donkergroen:#4A8F1F;
	--menugroen:#289B43;
	--geelgroen:#93C01F;
	--oranje:#FF9500;
	--lichtoranje:#FCDCAD;
	--rood:#E52D2A;
	--lichtrood:#D96C63;
	--groenvlak:#EAF5E4;

	--primair:#66B42D;            /* footer en accentvlakken */
	--headerachtergrond:#66B42D;  /* gekleurde banner */
	--headertekst:#EAF5E4;
	--textkleur:#66B42D;

	--bloklinks:#66B42D;
	--blokmidden:#E52D2A;
	--blokrechts:#2A9D44;
	--buttonachtergrond:#66B42D;
	--buttontekst:#fff;
	--headerkleur:var(--groen);

	--font: "Inter", sans-serif;
	--headerfont: "Quicksand", sans-serif;
}

/* ---------- Typografie ---------- */
body.page p,
body.page span,
body.page div,
body.page a,
body.page{
	font-family: var(--font) !important;
}
h1,h2,h3,h4,h5{
	font-family: var(--headerfont) !important;
	font-weight:700;
	text-transform: uppercase;
}
/* tekstkleuren; de blokken op de homepage (quicklinks) krijgen hun kleur uit het CMS */
.entry-content :is(h2,h3):not(.quicklink-title){
	color: var(--oranje);
}
.entry-content p:not(.quicklink-text),
.entry-content li{
	color: var(--textkleur);
}
.entry-content a:not(.kb-button):not(.wp-block-button__link){
	color: var(--donkergroen);
}

/* ---------- Hoofdmenu ----------
   Lettertype, grootte, hoofdletters, hover-/actief-achtergrond en het uitklapmenu
   staan in de Customizer (Header > Primary Navigation / Dropdown Navigation).
   Hier alleen wat de Customizer niet kan: een eigen kleur per hoofditem, de
   afgeronde 'pil', ruimte tussen de items en geen pijltjes. */
.main-navigation .primary-menu-container > ul > li.menu-item{ margin: 0 5px; }
.main-navigation .primary-menu-container > ul > li.menu-item > a{ border-radius: 10px; }
.main-navigation .primary-menu-container > ul > li.menu-item:nth-child(1) > a{ color: var(--menugroen); }
.main-navigation .primary-menu-container > ul > li.menu-item:nth-child(2) > a{ color: var(--geelgroen); }
.main-navigation .primary-menu-container > ul > li.menu-item:nth-child(3) > a{ color: var(--oranje); }
.main-navigation .primary-menu-container > ul > li.menu-item:nth-child(4) > a{ color: var(--rood); }

/* ---------- Banner ---------- */
.headerblock--green{
	background-color: var(--headerachtergrond);
	color: var(--headertekst);

	h1{
		font-weight:700;
		color: var(--headertekst);
		text-transform: uppercase;
	}
}
.headerblock--green .headerblock__wave{
	background-image:url(../images/emmaus/Header-groen-licht.svg);
}
.headerblock h1,
.headerblock h2,
.headerblock p{
	color: var(--headertekst);
}

.background-holder{
	padding-top:60px; /* achtergrond (pad) staat in de rij-instellingen van de homepage */
}

#mobile-header{
	padding-left:25px;
	padding-right:25px;
}

/* ---------- Knoppen ---------- */
.entry-content .kb-button.kb-btn-global-fill,
.entry-content .wp-block-button__link{
	background: var(--buttonachtergrond);
	color: var(--buttontekst);
	border-color: var(--buttonachtergrond);
}
.entry-content .kb-button.kb-btn-global-fill:hover,
.entry-content .wp-block-button__link:hover{
	background: var(--donkergroen);
	color: var(--buttontekst);
	border-color: var(--donkergroen);
}

/* ---------- Nieuwsblokken: wit met gekleurde rand (zoals rk-emmaus.nl) ---------- */
.nieuwsblok article > div{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}
.nieuwsblok article,
.archive-container article,
#archive-container li article{
	--kleur: var(--donkergroen);
	background-color: #fff !important;
	color: var(--kleur);
	border: 1px solid var(--kleur);
	transition: 0.2s;
	padding:20px;
	border-radius:6px;

	.entry-header{
		display: flex;
		flex-direction: column;
		margin-bottom:0;

		h2, h2 a{
			color: var(--kleur);
			order:2;
			font-size: 30px;
			line-height: 1.15;
			font-family: var(--headerfont) !important;
			font-weight:700;
			text-transform: uppercase;
			margin-bottom:40px;
		}
		.entry-meta, .entry-meta a{
			order:1;
			color: var(--kleur);
			font-size:12px;
			font-weight:600;
		}
	}
	.entry-summary, p{
		margin-top:0;
		color: var(--kleur);
	}
	.entry-footer a{
		display: inline-block;
		line-height: 40px;
		font-size: 16px;
		padding: 0 16px;
		border-radius: 5px;
		font-weight: 600;
		transition: all 0.3s ease;
		margin: 0 16px 0 0;
		background-color: var(--kleur);
		color:#fff;
	}
}
.nieuwsblok li:nth-of-type(2) article,
.block-editor-iframe__body .nieuwsblok article:nth-of-type(2),
#archive-container li:nth-of-type(5n+2) article{ --kleur: var(--oranje); }

.nieuwsblok li:nth-of-type(3) article,
.block-editor-iframe__body .nieuwsblok article:nth-of-type(3),
#archive-container li:nth-of-type(5n+3) article{ --kleur: var(--rood); }

.nieuwsblok.groot article,
#archive-container li:nth-of-type(5n+4) article{ --kleur: var(--lichtrood); }

.nieuwsblok.groot li:nth-of-type(2) article,
.block-editor-iframe__body .nieuwsblok.groot article:nth-of-type(2),
#archive-container li:nth-of-type(5n+5) article{ --kleur: var(--groen); }

/* ---------- Agenda ---------- */
.agenda-wrapper.grid .agenda-item{
	background-color: var(--lichtgroen);
	color: var(--zwart);
	border-radius:6px;
}
.wp-block-lazyblock-agenda-lijst .agenda-date-box{
	background-color: var(--groen);
	color:#fff;
}
.wp-block-lazyblock-agenda-lijst .agenda-content h3{
	color: var(--donkergroen);
}
.wp-block-lazyblock-agenda-lijst .agenda-list-item{ border-color: var(--lichtgroen); }
.wp-block-lazyblock-agenda-lijst .agenda-list-item:last-child{ border:none; }

/* ---------- Zijmenu ---------- */
.wp-block-lazyblock-zijmenu{
	h3{
		color: var(--groen);
		font-weight: 700;
		text-transform: uppercase;
	}
	ul{
		list-style-type:none;
		margin-left:0;
		padding-left:0;

		li a{
			font-size: 16px;
			color: var(--zwart);
			text-decoration: underline;

			&:hover{ color: var(--groen); }
		}
		li.current > a,
		li.current-parent > a{ color: var(--groen); }
	}
}

/* ---------- Quicklinks ---------- */
.quicklinksrow .kt-row-column-wrap .wp-block-kadence-column .wp-block-heading,
.quicklinksrow .kt-row-column-wrap .wp-block-kadence-column p{
	transition:0.3s;
}
.quicklinksrow .quicklink_item svg{ transition:0.3s; }
.quicklinksrow .quicklink_item:hover svg{ transform:scale(1.1); }
.quicklink-text{ font-weight:400; }
.quicklink_item > div{
	min-height:320px;
	display: flex;
	gap:40px;
	flex-direction: column;

	> div:first-child{ height:105px; }
}
.quicklink-content h2{
	font-size:30px;
	line-height:36px;
}

/* ---------- Footer ---------- */
.site-middle-footer-wrap{ position: relative; }
.site-middle-footer-wrap:after{
	content:'';
	position: absolute;
	top:0;
	left:0;
	height:50%;
	width:100%;
	background-color: var(--primair);
}
footer.site-footer{
	position: relative;
	margin-top:60px;

	.site-top-footer-inner-wrap{ padding-top:230px; }
	h3{
		color:#fff !important;
		font-weight:700;
		text-transform: uppercase;
	}
	p, a{ color:#fff; }
	.site-footer-middle-section-1{
		p, a{ color:#000; }
	}
}
footer.site-footer:after{
	content: '';
	background-image: url('../images/emmaus/footer-wave.svg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top;
	position: absolute;
	top: -2px;
	right: 0;
	height: 150px;
	width: 100%;
	transform:rotate(180deg)
}
footer.site-footer .widget h3,
footer.site-footer .widget p,
footer.site-footer .widget a{
	color: var(--wit) !important;
}
footer.site-footer .site-middle-footer-wrap .widget p,
footer.site-footer .site-middle-footer-wrap .widget a{
	color: var(--zwart) !important;
}

/* ---------- Quote ---------- */
div.quote{ padding: 90px 0 60px 0; }
div.quote p{
	font-family: var(--headerfont) !important;
	font-size:38px;
	text-align: center;
	max-width:900px;
	margin:0 auto;
	color: var(--groen);
}

/* ================================================================
                  EMMAUS AANVULLINGEN (illustraties e.d.)
   ================================================================ */

/* ---------- Knop in de banner ---------- */
.headerblock .headerblock__buttons .wp-block-button__link{
	background-color: var(--donkergroen);
	color: #fff;
	border-radius: 5px;
	padding: 10px 18px;
	font-weight: 600;
	text-decoration: none;
}
.headerblock .headerblock__buttons .wp-block-button__link:hover{
	background-color: #fff;
	color: var(--donkergroen);
}

/* ---------- Homepage: oranje pad + lieveheersbeestjes ---------- */
/* foto in wolkvorm */

.home .background-holder .wp-block-kadence-image{
	width: 377px;
    height: 303px;
	position: absolute;
	top:20px;
	left:20px;
}
.home .background-holder .wp-block-kadence-image img{
	-webkit-mask-image: url(../images/emmaus/wolkmask.svg);
	mask-image: url(../images/emmaus/wolkmask.svg);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	aspect-ratio: 426 / 343;
	object-fit: cover;
	width: 400px;
    height: 268px;
	max-width: 420px;
}
.home .background-holder .wp-block-kadence-image::after{
	content: '';
	position: absolute;
	    right: -239px;
	bottom: -90px;
	width: 160px;
	height: 115px;
	background: url(../images/emmaus/bugs.svg) no-repeat center / contain;
	pointer-events: none;
}

/* lieveheersbeestjes bij het laatste nieuwsblok */
.nieuwsblok.groot li:nth-of-type(2) article{ position: relative; overflow: visible; }
.nieuwsblok.groot li:nth-of-type(2) article::after{
	content: '';
	position: absolute;
	right: -35px;
	bottom: -50px;
	width: 220px;
	height: 158px;
	background: url(../images/emmaus/bugs.svg) no-repeat center / contain;
	pointer-events: none;
}



/* ---------- Homepage: lieveheersbeestjes linksboven bij het eerste blok ---------- */
.home .quicklinksrow .quicklink_item:first-child{ position: relative; overflow: visible; }
.home .quicklinksrow .quicklink_item:first-child::after{
	content: '';
	position: absolute;
    left: 0px;
    top: -74px;
    display: block;
    transform: scale(-1) rotate(20deg);
	width: 165px;
	height: 142px;
	background: url(../images/emmaus/bugs.svg) no-repeat center / contain;
	pointer-events: none;
	z-index: 2;
}

/* ---------- Homepage: lichtgroen blad halverwege (achter het nieuws) ---------- */
.home .kb-row-layout-wrap:has(> .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .nieuwsblok:not(.groot)){ position: relative; }
.home .kb-row-layout-wrap:has(> .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .nieuwsblok:not(.groot))::after{
	content: '';
	position: absolute;
	right: -330px;
	top: -441px;
	width: 460px;
	height: 426px;
	background: url(../images/emmaus/blad-lichtgroen.svg) no-repeat center / contain;
	opacity: .1;
	pointer-events: none;
	z-index: 0;
}

@media (max-width: 767px){
	.home .quicklinksrow .quicklink_item:first-child::after,
	.home .kb-row-layout-wrap:has(> .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .nieuwsblok:not(.groot))::after,
	footer.site-footer::before,
	.nieuwsblok.groot li:nth-of-type(2) article::after,
	.home .background-holder .wp-block-kadence-image::after{ display: none; }
}

/* "Lees meer"-knoppen in berichtenlijsten: witte tekst */
.entry-content .wp-block-kadence-posts .entry-footer a,
.entry-content .wp-block-kadence-posts a.post-more-link{
	color: #fff !important;
}