/*
Theme Name:   GelukkigVoelen
Template:     kadence
Version:      1.0.0
*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* ── Kadence CSS-variabelen overschrijven ──────────────────────
   De site gebruikte in Avada overal Open Sans, ook voor de koppen
   (h1 t/m h6 op gewicht 600). PT Sans stond eerder als kopletter
   ingesteld, maar komt in geen enkele originele instelling voor. */
:root {
	--global-body-font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	--global-heading-font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	/* palette9 (#fff) wordt door Kadence ook als knoptekstkleur gebruikt —
	   zet het NIET op transparent; gebruik gerichte selectors voor de achtergrond */
}

/* ── Achtergrond patroon ─────────────────────────────────────── */
body {
	background-image: url('/wp-content/uploads/2016/01/body.png');
	background-repeat: repeat;
	background-color: #f4f7e1;
	font-family: var(--global-body-font-family);
}

/* ── Bodytekst ────────────────────────────────────────────────
   Kadence zet standaard 17px in #2d3748 met regelhoogte 1.7. Live
   gebruikt 16px in #747474 met 1.54 — dat leest lichter en rustiger.
   theme.json helpt hier niet: bij een klassiek thema levert dat geen
   CSS op, dus het moet expliciet. */
body,
.entry-content,
.entry-content p,
.entry-content li {
	font-size: 1rem;
	color: #747474;
	line-height: 1.6;
}

/* Koppen blijven donker en strakker gezet dan de lopende tekst. */
h1, h2, h3, h4, h5, h6 {
	color: #333333;
	line-height: 1.33;
}

/* Kadence houdt 0.5em (12px) onder een kop; dat plakt te dicht op de tekst.
   Het element ná een kop krijgt van Kadence margin-top:0, dus de ruimte moet
   van de kop zelf komen. De body-prefix is nodig omdat Kadence's regel
   (.single-content h2 {margin: 1.5em 0 0.5em}) dezelfde specificiteit heeft
   en later wordt ingeladen. */
body .entry-content h1,
body .entry-content h2,
body .entry-content h3,
body .entry-content h4 {
	margin-bottom: 1.25rem;
}

/* ── Witte Kadence-containers transparent (gerichte selectors) ── */
/* Niet via --global-palette9 want dat breekt knoptekst         */
.content-bg { background-color: transparent; }
.site-main,
.site-container,
.content-container,
.wp-site-blocks { background: transparent; }
.entry-content-wrap { background: transparent; }

/* ── Koppen ───────────────────────────────────────────────────
   Maten en gewicht komen uit de oorspronkelijke Avada-typografie:
   Open Sans, gewicht 600, h1 36px / h2 24px / h3 18px.
   h4 t/m h6 stonden daar op 13/12/11px, kleiner dan de bodytekst —
   dat werkte bij een body van 13px, maar niet meer nu die 16px is.
   Die houden we daarom op de huidige, leesbare maten. */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--global-heading-font-family);
	font-weight: 600;
}

h1 { font-size: 2.25rem; }    /* 36px */
h2 { font-size: 1.5rem; }     /* 24px */
h3 { font-size: 1.125rem; }   /* 18px */
h4 { font-size: 1rem; }       /* 16px */

/* ── Regellengte ──────────────────────────────────────────────
   De bladspiegel volgt live (1100px), maar bij die kolombreedte lopen
   alinea's op tot zo'n 90 tekens per regel. De vuistregel is 60–75;
   40rem komt daar op ~63 uit.
   Let op: gebruik hier geen ch. Die eenheid schaalt mee met de
   fontgrootte van het element zélf, dus een kop van 24px zou een veel
   ruimere maat krijgen dan de tekst eronder en dan lopen de linkerranden
   uiteen. Eén vaste maat houdt het blok uitgelijnd. */
:root {
	--gv-maatvoering: 40rem;
}

.entry-content p,
.entry-content li {
	max-width: var(--gv-maatvoering);
}

/* Koppen, lijsten en citaten krijgen dezelfde maat als de alinea's, zodat
   het tekstblok één linkerrand houdt. Bewust links uitlijnen en niet
   centreren: op secties waar de kop direct in de groep staat maar de tekst
   in een kolom zit (zoals de homepage) zouden die twee anders uit elkaar
   lopen. Links is overal consistent.
   De body-prefix is nodig omdat Kadence's shorthand (.single-content h2
   {margin: 1.5em 0 0.5em}) dezelfde specificiteit heeft en later laadt.
   Binnen kolommen bindt de maximumbreedte meestal niet, daar verandert
   dus niets. */
body .entry-content > p,
body .entry-content > ul,
body .entry-content > ol,
body .entry-content > blockquote,
body .entry-content > h1,
body .entry-content > h2,
body .entry-content > h3,
body .entry-content > h4,
body .entry-content .wp-block-group > p,
body .entry-content .wp-block-group > ul,
body .entry-content .wp-block-group > ol,
body .entry-content .wp-block-group > blockquote,
body .entry-content .wp-block-group > h1,
body .entry-content .wp-block-group > h2,
body .entry-content .wp-block-group > h3,
body .entry-content .wp-block-group > h4 {
	max-width: var(--gv-maatvoering);
	margin-left: 0;
	margin-right: auto;
}

/* Gecentreerde tekst moet wél gecentreerd blijven staan. */
.entry-content p.has-text-align-center {
	margin-left: auto;
	margin-right: auto;
}

/* ── Lege cover-containers verbergen ────────────────────────── */
.wp-block-cover__inner-container:empty {
	display: none;
}

/* ── Hero afbeeldingen: volledig zichtbaar, breedte canvas ──── */
.wp-block-image.alignwide,
.wp-block-image.alignwide img,
.wp-block-image.size-full img {
	width: 100%;
	height: auto;
	display: block;
}

/* ── Content area: verklein de standaard 5rem ruimte boven ─────
   Alleen op pagina's en losse posts, waar de hero-afbeelding strak
   onder de header hoort. Op archieven (blog, categorie) moet de ruimte
   blijven, anders plakken de kaartjes tegen de header. */
.content-area {
	margin-top: 2.5rem !important;
}

/* Alleen weghalen op pagina's die met een hero-afbeelding beginnen: daar is die
   afbeelding de titelbanner en hoort hij strak onder de header. Pagina's die
   met een kop of tekst beginnen (zoals /jongeren-en-jongvolwassenen-met-ass/)
   houden hun ruimte, anders plakt de kop tegen het menu. */
.page .content-area:has(.entry-content > .wp-block-image:first-child),
.page .content-area:has(.entry-content > .wp-block-cover:first-child) {
	margin-top: 0 !important;
}

/* ── Entry-content wrapper: verwijder padding zodat hero flush start */
.single-entry .entry-content-wrap,
.page .entry-content-wrap {
	padding-top: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ── Eerste wp:image direct aansluitend ─────────────────────── */
.entry-content .wp-block-image:first-child {
	margin-top: 0;
}

/* ── Paginasecties sluiten op elkaar aan ──────────────────────
   Op de live site raken de gekleurde banen elkaar precies (0px).
   De standaard block-gap zette er 32px patroon tussen. Alleen de
   directe secties van een pagina, zodat de ruimte binnen een sectie
   gewoon blijft werken. */
.page .entry-content > .wp-block-group,
.page .entry-content > .wp-block-image {
	margin-top: 0;
	margin-bottom: 0;
}

/* De hero stak per kant buiten de gekleurde groepen omdat hij alignwide is
   (wide-size) terwijl de groepen de volle breedte van de content pakken.
   Gelijktrekken op die volle breedte. */
.page .entry-content > .wp-block-image.alignwide {
	max-width: none;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* Sectiebeelden niet oprekken voorbij hun eigen formaat. De banner van de
   homepage is 1100px breed terwijl de contentkolom 1242px is; uitgerekt
   werd hij wazig en leek de illustratie erin uit het midden te staan.
   De andere sectiebeelden zijn 1920px en vullen dus gewoon door. */
.page .entry-content > .wp-block-image img,
.page .entry-content > .wp-block-group > .wp-block-image img {
	width: auto;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* ── Groepen direct na een afbeelding: geen extra gap ────────── */
.entry-content .wp-block-image + .wp-block-group {
	margin-top: 0;
}

/* ── Padding alleen onderaan de content wrap ─────────────────── */
.single-entry .entry-content-wrap {
	padding-bottom: 2rem !important;
}

/* Op pagina's niet: de secties lopen daar tot de rand door, en die extra
   ruimte liet een lege strook over onder de laatste gekleurde baan.
   Kadence zet op .content-bg ook een box-shadow; met een transparante
   achtergrond bleef daar alleen een zwevende schaduw van over. */
.page .entry-content-wrap {
	padding-bottom: 0 !important;
}

/* Geldt overal, ook op losse berichten: de achtergrond van .content-bg is
   hierboven transparant gemaakt, dus van de schaduw die Kadence eronder zet
   blijft alleen een zwevende streep over. */
article.entry.content-bg {
	box-shadow: none;
}

.single .entry-content-wrap {
	padding-bottom: 1rem !important;
}

/* ── Palette achtergrondkleuren (Kadence genereert geen preset CSS) */
.has-header-bg-background-color     { background-color: #c6e0c9 !important; }
.has-bg-mint-background-color       { background-color: #a1d4ca !important; }
.has-bg-cream-background-color      { background-color: #f4f7e1 !important; }
.has-bg-green-light-background-color { background-color: #c2d994 !important; }
.has-bg-green-vivid-background-color { background-color: #afc828 !important; }
.has-bg-green-dark-background-color { background-color: #38a63e !important; }
.has-bg-orange-background-color     { background-color: #ec7206 !important; }
.has-primary-background-color       { background-color: #a0ce4e !important; }
.has-secondary-background-color     { background-color: #ec7206 !important; }
.has-white-background-color         { background-color: #ffffff !important; }

/* ── Palette tekstkleuren ────────────────────────────────────── */
.has-primary-color    { color: #a0ce4e !important; }
.has-secondary-color  { color: #ec7206 !important; }
.has-text-dark-color  { color: #333333 !important; }
.has-text-light-color { color: #ffffff !important; }
.has-white-color      { color: #ffffff !important; }

/* ── Knoppen ──────────────────────────────────────────────────
   Kadence genereert geen preset-CSS uit theme.json, dus ook niet de
   knopkleur die daar staat. Zonder deze regels vallen blokknoppen
   terug op Kadence's eigen blauw (#2b6cb0). Kleuren komen uit de
   oorspronkelijke Avada-instellingen van de site. */
.wp-block-button__link,
.wp-element-button {
	background-color: #a0ce4e;
	color: #ffffff;
	border-radius: 4px;
	font-weight: 600;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-element-button:hover,
.wp-element-button:focus {
	background-color: #96c346;
	color: #ffffff;
}

/* ── Entry-hero banner verbergen (grote band met paginatitel) ── */
/* Geldt voor reguliere pagina's, blog-archief en single posts   */
/* ── Verberg Kadence's hero-banner en standalone h1 paginatitel  */
.entry-hero,
.entry-hero.post-archive-hero-section,
.page-title.archive-title {
	display: none !important;
}

/* Verberg h1 in entry-header, maar herstel die in loop-entries (blog-kaartjes) */
.entry-header .entry-title {
	display: none !important;
}

.loop-entry .entry-header .entry-title,
.loop-entry .entry-title {
	display: block !important;
}

/* Op losse blogberichten hoort de titel er wél te staan: daar is geen
   hero-afbeelding met de titel erin, zoals op de pagina's. */
.single .entry-header .entry-title {
	display: block !important;
	font-family: var(--global-heading-font-family);
	font-weight: 700;
	font-size: 1.75rem;
	line-height: 1.25;
	margin: 0 0 .5rem;
}

/* ── Single post: hero-afbeelding ─────────────────────────────
   Kadence laat het artikel bewust ~73px over de hero vallen en dekt
   dat af met een wit paneel. Dat paneel is hierboven transparant
   gemaakt, dus zonder deze correctie loopt de meta over de foto.
   De afbeelding volgt de tekstkolom in plaats van breder te zijn. */
.single .article-post-thumbnail {
	max-width: 794px;
	height: 400px !important;
	margin: 0 auto !important;
	padding-bottom: 0 !important;
	border-radius: 12px;
	overflow: hidden;
}

.single .article-post-thumbnail .post-thumbnail-inner {
	position: static !important;
	height: 100% !important;
	padding-bottom: 0 !important;
}

.single .article-post-thumbnail img {
	position: static !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	/* Iets boven het midden uitsnijden: bij staande foto's blijven
	   gezichten dan in beeld in plaats van weggesneden te worden. */
	object-position: 50% 22%;
}

.single article.entry {
	margin-top: 2rem !important;
}

/* ── Blog/archief kaartjes ────────────────────────────────────
   De afbeelding vult de hele kaart, de tekst ligt eronderin op een
   verloop. Kadence levert de thumbnail als een aspect-ratio blok
   (padding-bottom-truc); die wordt hier uitgezet zodat de afbeelding
   de kaart kan vullen via object-fit.
   Let op: .loop-entry.content-bg is het <article> zélf en
   .loop-entry .entry-content-wrap de binnendiv. Geef padding alleen
   aan de binnendiv, anders wordt hij dubbel toegepast en zweeft het
   tekstblok los van de kaartrand. */
.loop-entry {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 360px;
	border-radius: 12px;
	overflow: hidden;
}

.loop-entry.content-bg {
	background-color: #3a4a3f;
	padding: 0;
}

/* !important is hier nodig: Kadence drukt zijn eigen inline <style> ná
   dit stylesheet af, dus bij gelijke specificiteit wint Kadence. Zonder
   dit blijft .post-thumbnail 'position: relative', wordt hij een flex-item
   in de kaart en krimpt hij naar hoogte 0 — de afbeelding verdwijnt dan. */
.loop-entry .post-thumbnail,
.loop-entry .post-thumbnail-inner {
	position: absolute !important;
	inset: 0 !important;
	margin: 0 !important;
	height: 100% !important;
	padding-bottom: 0 !important;
	border-radius: 0;
}

.loop-entry .post-thumbnail img,
.loop-entry .post-thumbnail-inner img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	border-radius: 0;
	transition: transform .4s ease;
}

.loop-entry:hover .post-thumbnail img {
	transform: scale(1.05);
}

.loop-entry .entry-content-wrap {
	position: relative;
	z-index: 1;
	background-color: transparent;
	background-image: linear-gradient(
		to top,
		rgba(0, 0, 0, .85) 0%,
		rgba(0, 0, 0, .6) 60%,
		rgba(0, 0, 0, 0) 100%
	);
	padding: 4.5rem 1.25rem 1.25rem;
	border-radius: 0;
	color: #ffffff;
}

.loop-entry .entry-title {
	font-size: 1.15rem;
	line-height: 1.3;
	margin: .3rem 0 0;
}

.loop-entry .entry-title,
.loop-entry .entry-title a {
	color: #ffffff;
}

.loop-entry .category-links a {
	color: #c2d994;
	font-size: .72rem;
	letter-spacing: .06em;
}

/* Auteur, datum, samenvatting en 'read more' passen niet in dit
   compacte kaartje; de titel is de link. */
.loop-entry .entry-meta,
.loop-entry .entry-summary,
.loop-entry .entry-footer {
	display: none;
}

/* ── Kaart zonder uitgelichte afbeelding ──────────────────────
   Deze stijl geldt ook voor de 'lees ook' kaartjes onder een bericht.
   De ervaringen hebben geen uitgelichte afbeelding; die kaarten krijgen
   daarom geen donker vlak maar een licht, vrolijk vlak met de intro erin.
   Inhoud lijnt boven uit — bij een beeldloze kaart is er geen reden om
   de tekst naar onderen te duwen. */
.loop-entry:not(:has(.post-thumbnail)) {
	min-height: 0;
	justify-content: flex-start;
}

.loop-entry:not(:has(.post-thumbnail)).content-bg {
	background-color: #c6e0c9;
}

.loop-entry:not(:has(.post-thumbnail)) .entry-content-wrap {
	background-image: none;
	padding: 1.5rem 1.25rem;
}

.loop-entry:not(:has(.post-thumbnail)) .entry-title,
.loop-entry:not(:has(.post-thumbnail)) .entry-title a {
	color: #2f4f34;
}

.loop-entry:not(:has(.post-thumbnail)) .entry-summary {
	display: block;
	margin-top: .5rem;
	color: #40563f;
	font-size: .875rem;
}

.loop-entry:not(:has(.post-thumbnail)) .entry-summary p {
	color: inherit;
	font-size: inherit;
	max-width: none;

	/* Kadence haalt deze tekst niet via the_excerpt(), dus de filter op
	   excerpt_length grijpt er niet op aan. Visueel afkappen werkt hier
	   ongeacht waar de tekst vandaan komt: vier regels is twee à drie
	   zinnen op deze kaartbreedte. */
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Het categorielabel herhaalt op een archief telkens dezelfde term en
   voegt in een kaartje niets toe. */
.loop-entry .entry-taxonomies {
	display: none;
}

/* Sectiebeelden die van rand tot rand lopen blijven scherp: een
   afgeronde hoek daar zou een hap uit de aansluitende kleurvlakken
   nemen. Geldt voor de directe beeldsecties van een pagina en voor
   beelden in een groep zonder padding. */
.page .entry-content > .wp-block-image img,
.page .entry-content > .wp-block-group > .wp-block-image img,
.page .entry-content > .wp-block-group[style*="padding-top:0"] img {
	border-radius: 0;
}

/* Alle afbeeldingen in content ook border-radius ────────────── */
.entry-content img,
.wp-block-image img,
.post-thumbnail img {
	border-radius: 6px;
}

/* ── Header achtergrond ───────────────────────────────────────── */
#masthead,
.site-header-wrap,
.site-header-inner-wrap,
.site-header-upper-wrap,
.site-header-upper-inner-wrap,
.site-main-header-wrap,
.site-header-row-container-inner {
	background-color: var(--wp--custom--header-bg, #c6e0c9);
}

/* ── Footer ───────────────────────────────────────────────────
   Live heeft een donkergrijze footer: widgetgebied #363839 met een
   iets donkerder copyrightbalk #282a2b. Kadence levert hem standaard
   zonder achtergrond, met donkere tekst op 17px.
   De tekstkleur van live (#8c8989 op #363839) haalt maar ~3.3:1
   contrast; hier bewust iets lichter voor de leesbaarheid. */
/* Eén doorlopend vlak: live zet de copyrightbalk iets donkerder, maar dat
   geeft een zichtbare naad onder de widgets. */
.site-top-footer-wrap,
.site-bottom-footer-wrap {
	background-color: #363839;
}

.site-footer,
.site-footer .widget,
.site-footer p {
	color: #b8b5b5;
	font-size: .8125rem;
}

.site-footer .widget-title,
.site-footer .widget h2,
.site-footer .widget h3,
.site-footer .widget h4 {
	color: #dddddd;
	font-size: .875rem;
	font-weight: 600;
	margin-bottom: .5rem;
}

/* Het GZ-logo kwam op ware grootte binnen en torende boven de andere
   kolommen uit; ongeveer even hoog als twee regels tekst staat rustiger. */
.site-footer .widget img {
	max-height: 64px;
	width: auto;
}

.site-footer a {
	color: #a0ce4e;
}

.site-footer a:hover {
	color: #c2d994;
}

/* Ook de <p> meenemen: die erft anders de regel hierboven en blijft
   groter dan de balk zelf. */
.site-footer .footer-html,
.site-footer .footer-html p,
.site-footer .site-info,
.site-footer .site-info p {
	color: #8f8f8f;
	font-size: .75rem;
}

/* ── Sitetitel tekst verbergen (alleen logo tonen) ───────────── */
.site-title,
.site-description {
	display: none !important;
}

/* ── Logo grootte ────────────────────────────────────────────── */
/* De header is 80px hoog; op 80px vulde het logo die volledig en stond
   het strak tegen de rand. 52px geeft 14px lucht boven en onder, wat
   ongeveer de verhouding van de live site is. */
.site-branding img,
.custom-logo {
	max-height: 52px;
	width: auto;
}

/* ── Navigatie: corps en kleur ───────────────────────────────── */
.main-navigation a,
.header-navigation a {
	color: #333333;
	font-size: 0.9rem;
}

.main-navigation a:hover,
.header-navigation a:hover,
.main-navigation .current-menu-item > a,
.header-navigation .current-menu-item > a,
.main-navigation .current-page-ancestor > a,
.header-navigation .current-page-ancestor > a {
	color: #41a643 !important;
}

/* ── Dropdown: hogere specificiteit om Kadence inline CSS te overrulen ── */
body .header-navigation .header-menu-container ul ul.sub-menu,
body .header-navigation .header-menu-container ul ul.submenu {
	background: #ffffff !important;
	box-shadow: 0 3px 8px rgba(0,0,0,0.15) !important;
}

body .header-navigation .header-menu-container ul ul li.menu-item > a {
	color: #333333 !important;
	font-size: 0.875rem !important;
}

body .header-navigation .header-menu-container ul ul li.menu-item > a:hover,
body .header-navigation .header-menu-container ul ul li.menu-item.current-menu-item > a {
	color: #41a643 !important;
	background: #f4f7e1 !important;
}

body .header-navigation .header-menu-container ul ul li.menu-item {
	border-bottom: 1px solid #e8e8e8 !important;
}