/* ==========================================================================
   Algemene Styles — gastouderbureauroodkapje.nl
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Links in lopende tekst onderstrepen
   Lighthouse "link-in-text-block": een link in een tekstblok moet ook zonder
   kleur te herkennen zijn. Het contrast tussen linkrood (#b81e24) en de
   tekstkleur (#272425) is 2,37:1 en dat haalt de eis van 3:1 niet — meer
   contrast kan ook niet, want dan verliest de link zijn contrast met de
   achtergrond. Onderstrepen is dan de aangewezen oplossing.

   Bewust alleen in tekstwidgets: knoppen, menu's, loop-items en iconen
   houden hun eigen opmaak.
   -------------------------------------------------------------------------- */
.elementor-widget-text-editor a:not(.elementor-button),
.elementor-widget-theme-post-content a:not(.elementor-button),
.entry-content p a:not(.elementor-button),
.wp-block-paragraph a:not(.elementor-button) {
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
}

.elementor-widget-text-editor a:not(.elementor-button):hover,
.elementor-widget-theme-post-content a:not(.elementor-button):hover,
.entry-content p a:not(.elementor-button):hover,
.wp-block-paragraph a:not(.elementor-button):hover {
	text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   2. Filterkoppen op het gastouder-archief
   De FacetWP-widget zette deze labels als <h6> onder een <h1>, wat een
   overgeslagen kopniveau opleverde. Ze staan nu op <p> — het zijn labels bij
   een filter, geen documentkoppen. Deze regel houdt de opmaak exact gelijk
   aan wat de h6 deed (16px / 500 / marge 8px 0 16px).
   -------------------------------------------------------------------------- */
.facet-wrap > p {
	font-weight: 500;
	margin: 8px 0 16px;
}

/* --------------------------------------------------------------------------
   3. Blogkoppen na het rechtzetten van het kopniveau
   De blogteksten begonnen na de h1 direct met h3's, wat een overgeslagen niveau
   is. Ze staan nu op h2 (en h4 op h3). De klassen die de Strategic Content
   Engine meegeeft (text-text-100, text-[1.125rem]) zijn Tailwind-notatie die
   hier niet gecompileerd is en dus niets doet — zonder deze regel zouden die
   koppen van 28px naar 32px springen. Hiermee blijft de opmaak exact gelijk.
   -------------------------------------------------------------------------- */
h2.text-text-100 {
	font-size: 28px;
	font-weight: 500;
}

h3.text-text-100 {
	font-size: 24px;
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   4. Links in de roze secties
   Op de pastelroze achtergrond (#F9AFB3) haalt het linkrood #B81E24 maar
   3,63:1 waar 4,5:1 nodig is, en donkerder rood zou te ver van de huisstijl
   af gaan. Daarom in die secties het donkere merktekstgrijs; de links blijven
   herkenbaar aan hun onderstreping (zie punt 1).
   Containers: contact, oudercommissie en tarieven.
   -------------------------------------------------------------------------- */
.elementor-element-b3c6ee7 a:not(.elementor-button),
.elementor-element-4706e9c a:not(.elementor-button),
.elementor-element-e1df6f9 a:not(.elementor-button) {
	color: #272425;
}

/* --------------------------------------------------------------------------
   5. Kopmaat op de pagina Veelgestelde vragen
   De elf vragen staan nu elk als H2 in de tekst, zodat de pagina een echte
   structuur heeft. Op de standaard kopmaat van 32px domineren die koppen de
   pagina en lopen de langere vragen over twee regels. Alleen hier een rustiger
   maat; de huisstijl (Poppins, gewicht 500, #272425) blijft ongemoeid.
   -------------------------------------------------------------------------- */
body.postid-295 .elementor-widget-text-editor h2 {
	font-size: 22px;
	line-height: 1.35;
	margin-top: 28px;
	margin-bottom: 8px;
}

@media (max-width: 767px) {
	body.postid-295 .elementor-widget-text-editor h2 {
		font-size: 20px;
	}
}

/* --------------------------------------------------------------------------
   6. Plaatspagina's: FAQ-accordion
   Een open vraag houdt in Elementor ook onderaan afgeronde hoeken, terwijl het
   antwoord er direct onder begint. Daardoor piept de achtergrond tussen vraag
   en antwoord door. Bij een open item de onderste hoeken van de vraag recht.
   -------------------------------------------------------------------------- */
.aw-plaats-faq .e-n-accordion-item[open] > .e-n-accordion-item-title {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* --------------------------------------------------------------------------
   7. Plaatspagina's: consulentkaartje op mobiel
   Desktop: foto links, alles rechts ernaast (native Elementor). Op mobiel staan
   naam en vestiging naast de foto en de contactgegevens eronder. Dat vraagt
   elementen uit twee verschillende containers op één raster; Elementor kan dat
   niet zonder de blokken dubbel op te nemen. De tekstcontainer doet daarom mee
   in het raster van het kaartje (display: contents).
   Klassen staan op de consulentsjablonen 4711, 4713, 4715, 4717 en 4719.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.aw-consulent {
		display: grid !important;
		grid-template-columns: auto 1fr;
		column-gap: 16px;
		row-gap: 4px;
		align-items: center;
	}

	.aw-consulent > .elementor-widget-image,
	.aw-consulent > .aw-consulent-fotos {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.aw-consulent > .aw-consulent-tekst {
		display: contents;
	}

	.aw-consulent .aw-consulent-naam {
		grid-column: 2;
		grid-row: 1;
		align-self: end;
	}

	.aw-consulent .aw-consulent-vestiging {
		grid-column: 2;
		grid-row: 2;
		align-self: start;
	}

	.aw-consulent .aw-consulent-contact {
		grid-column: 1 / -1;
		margin-top: 12px;
	}

	.aw-consulent .aw-consulent-ggd {
		grid-column: 1 / -1;
		margin-top: 8px;
	}
}

/* --------------------------------------------------------------------------
   8. Plaatspagina's: lange mailadressen op smalle telefoons
   Onder 400px is een adres als a.dierendonck@gastouderbureauroodkapje.nl breder
   dan het kaartje. Iets kleinere letter en minder binnenruimte, en als het dan
   nog niet past mag het adres afbreken in plaats van buiten het kaartje te lopen.
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
	.aw-consulent {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.aw-consulent .aw-consulent-contact .elementor-icon-list-text {
		font-size: 13px;
		overflow-wrap: anywhere;
	}
}

/* --------------------------------------------------------------------------
   9. Landingspagina's (overstappagina en plaatspagina's, klassen aw-lp-*)
   Opmaak die Elementor zelf niet heeft: het roze vlak achter de hero-foto,
   een zachte beweging op de kaartjes, de stippellijn tussen de stappen en
   de licht overlappende consulentenfoto's in het afsluitende blok.
   -------------------------------------------------------------------------- */
.aw-lp-hero-beeld {
	position: relative;
	isolation: isolate; /* label en poppetjes blijven binnen dit blok, dus onder het uitklapmenu van de header (z-index 2) */
}

.aw-lp-hero-beeld::after {
	content: "";
	position: absolute;
	inset: 22px -18px -18px 22px;
	background: #F9AFB3;
	border-radius: 25px;
	transform: rotate(2deg);
	z-index: 0;
}

.aw-lp-hero-foto {
	position: relative;
	z-index: 1;
}

.aw-lp-hero-foto img {
	box-shadow: 0 18px 40px rgba(39, 36, 37, 0.14);
}

.aw-lp-doodle {
	pointer-events: none;
}

.aw-lp-kaart {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.aw-lp-kaart:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(39, 36, 37, 0.08);
}

.aw-lp-quote {
	box-shadow: 0 12px 30px rgba(204, 34, 41, 0.06);
}

.aw-lp-stap {
	position: relative;
}

.aw-lp-nummer {
	height: 64px;
}

.aw-lp-cta {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.aw-lp-cta::after {
	content: "";
	position: absolute;
	width: 360px;
	height: 360px;
	right: -140px;
	top: -170px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	pointer-events: none;
}

.aw-lp-cta > .e-con {
	position: relative;
	z-index: 1;
}

.aw-lp-avatars .elementor-widget-image {
	transition: transform 0.2s ease;
}

.aw-lp-avatars .elementor-widget-image + .elementor-widget-image {
	margin-left: -16px;
}

.aw-lp-avatars .elementor-widget-image:hover {
	transform: translateY(-4px);
	z-index: 2;
}

/* Stippellijn naar de volgende stap: horizontaal op desktop, verticaal op mobiel.
   Op tablet staan de stappen twee aan twee, daar geen lijn. */
@media (min-width: 1025px) {
	.aw-lp-stap:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 31px;
		left: 86px;
		right: -2px;
		border-top: 3px dashed #F9AFB3;
	}
}

@media (max-width: 1024px) {
	.aw-lp-hero-beeld::after {
		inset: 16px -10px -10px 16px;
		transform: rotate(1.5deg);
	}
}

/* Tussen tablet en ruime desktop staat de hero-foto bijna tegen de rand van het scherm. Het label "Sinds 2007"
   (-28px) en het roze vlak (-18px) staken dan buiten beeld: horizontaal scrollen en een witte strook rechts,
   vooral met een vaste scrollbalk (8px bij 1100px). Hier dezelfde inspringing als op tablet. */
@media (min-width: 1025px) and (max-width: 1240px) {
	.aw-lp-hero-beeld::after {
		inset: 22px -10px -18px 22px;
	}

	body:not(.rtl) .aw-lp-hero-beeld .elementor-widget-icon-box {
		right: -8px !important;
	}
}

@media (max-width: 767px) {
	.aw-lp-hero-beeld::after {
		inset: 12px -8px -8px 12px;
	}

	.aw-lp-stap:not(:last-child)::after {
		content: "";
		position: absolute;
		left: 31px;
		top: 82px;
		bottom: -10px;
		border-left: 3px dashed #F9AFB3;
	}

	.aw-lp-avatars .elementor-widget-image + .elementor-widget-image {
		margin-left: -12px;
	}

	.aw-lp-cta::after {
		width: 220px;
		height: 220px;
		right: -90px;
		top: -110px;
	}
}