/*
 * Site-brede responsive vangnetlaag voor thuisbatterijapp.nl
 * Doel: geen horizontale overflow op telefoons, op elke Elementor-pagina.
 * Werkt samen met de mobiele breakpoint-instellingen in Elementor zelf.
 */

/* ---------------------------------------------------------------
   1. Nooit horizontaal scrollen op het document
   --------------------------------------------------------------- */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

img,
svg,
video,
iframe,
canvas,
table {
	max-width: 100%;
}

img,
video {
	height: auto;
}

/* ---------------------------------------------------------------
   2. Flex-items mogen krimpen
   Standaard geldt min-width:auto. Daardoor dwingt een lang woord of
   een brede tabelkolom een flex-item breder te worden dan het scherm.
   Dit is de hoofdoorzaak van de horizontale schuifbalk.
   De header is hiervan uitgezonderd, zie punt 5.
   --------------------------------------------------------------- */
.e-con,
.e-con-inner,
.e-con > .elementor-element,
.e-con-inner > .elementor-element {
	min-width: 0;
}

/* ---------------------------------------------------------------
   3. Lange woorden mogen afbreken in plaats van uitsteken
   --------------------------------------------------------------- */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor,
.elementor-widget-text-editor p {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* ---------------------------------------------------------------
   4. Mobiel: algemeen vangnet
   --------------------------------------------------------------- */
@media (max-width: 767px) {

	.e-con {
		max-width: 100%;
	}

	/* Koppen mogen desnoods midden in een lang woord afbreken.
	   Nodig voor woorden als "thuisbatterijapp.nl" en "Voorbeeldrapport". */
	.elementor-widget-heading .elementor-heading-title {
		word-break: break-word;
		hyphens: auto;
		-webkit-hyphens: auto;
	}

	/* Rijen die naast elkaar blijven staan mogen doorlopen naar een
	   volgende regel in plaats van uit te steken. */
	.e-con.e-flex {
		flex-wrap: wrap;
	}

	.elementor-button,
	.elementor-widget-button a {
		max-width: 100%;
		white-space: normal;
	}
}

/* ---------------------------------------------------------------
   5. Header op telefoons
   Logo links, menuknop en CTA rechts. De onderdelen mogen NIET
   krimpen (anders schuiven logo-icoon en tekst over elkaar heen).
   Past alles niet op een regel, dan valt de rechterkant netjes
   naar een tweede regel in plaats van te overlappen.
   --------------------------------------------------------------- */
@media (max-width: 767px) {

	/* Binnen de header géén min-width:0 en géén krimp */
	#tahefobu-header .e-con > .elementor-element,
	#tahefobu-header .e-con-inner > .elementor-element {
		min-width: auto;
		flex-shrink: 0;
	}

	#tahefobu-header .elementor-element-11893cb {
		--padding-left: 12px;
		--padding-right: 12px;
		--gap: 8px 8px;
		--column-gap: 8px;
		--row-gap: 8px;
	}

	/* Logo-blok: icoon en tekst blijven naast elkaar staan */
	#tahefobu-header .elementor-element-49df5e2 {
		flex: 0 1 auto;
		align-items: center;
		--gap: 5px 5px;
		--column-gap: 5px;
		--row-gap: 5px;
	}

	#tahefobu-header .elementor-widget-heading .elementor-heading-title {
		white-space: nowrap;
		word-break: normal;
		hyphens: none;
		-webkit-hyphens: none;
		font-size: 14px;
		line-height: 1;
	}

	/* Logo-icoon vast formaat, mag niet vervormen */
	#tahefobu-header .elementor-element-376f4b2 .elementor-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: auto;
		height: auto;
		font-size: 13px;
		padding: 7px;
		border-width: 2px;
		border-radius: 7px;
		flex: 0 0 auto;
	}

	#tahefobu-header .elementor-element-376f4b2 .elementor-icon svg {
		height: 13px;
		width: 13px;
		flex: 0 0 auto;
	}

	/* Rechterblok: menuknop en CTA */
	#tahefobu-header .elementor-element-f025070 {
		flex: 0 0 auto;
		align-items: center;
		--gap: 8px 8px;
		--column-gap: 8px;
		--row-gap: 8px;
	}

	#tahefobu-header .tahefobu-mobile-toggle-wrap,
	#tahefobu-header .tahefobu-mobile-toggle {
		flex: 0 0 auto;
	}

	/* CTA compacter: kleinere tekst, minder padding, pijl weg */
	#tahefobu-header .tahefobu-custom-button {
		font-size: 11px !important;
		padding: 8px 11px !important;
		white-space: nowrap;
		flex: 0 0 auto;
	}

	#tahefobu-header .tahefobu-custom-button .tahefobu-icon-button-wrapper {
		display: none;
	}
}

/* Zeer smalle telefoons: CTA wordt alleen het pijltje */
@media (max-width: 350px) {

	#tahefobu-header .tahefobu-custom-button .tahefobu-icon-button-wrapper {
		display: inline-flex;
	}

	#tahefobu-header .tahefobu-custom-button .text-wrapper {
		display: none;
	}

	#tahefobu-header .tahefobu-custom-button {
		padding: 9px 10px !important;
	}
}

/* ---------------------------------------------------------------
   6. Financiele tabel op het Voorbeeldrapport
   Vier kolommen blijven naast elkaar, maar krimpen mee en breken
   binnen de cel af in plaats van buiten het scherm te lopen.
   --------------------------------------------------------------- */
@media (max-width: 767px) {

	.elementor-element-5af2dd1 > .e-con.e-flex {
		flex-wrap: nowrap;
		--gap: 6px 6px;
		--column-gap: 6px;
	}

	.elementor-element-5af2dd1 > .e-con.e-flex > .elementor-widget {
		flex: 1 1 0;
		min-width: 0;
	}

	/* Eerste kolom (het kengetal zelf) iets breder */
	.elementor-element-5af2dd1 > .e-con.e-flex > .elementor-widget:first-child {
		flex: 1.5 1 0;
	}

	.elementor-element-5af2dd1 .elementor-widget-text-editor,
	.elementor-element-5af2dd1 .elementor-widget-text-editor p {
		font-size: 11px !important;
		line-height: 1.35 !important;
		word-break: break-word;
		hyphens: auto;
		-webkit-hyphens: auto;
	}
}

/* ---------------------------------------------------------------
   7. Portretfoto op de pagina Over ons
   Zelfde aanpak als scoreplan.nl: een kader met vaste verhouding
   4/5 dat de kolombreedte volgt, met de foto bijgesneden vanaf de
   bovenkant. Zonder zo'n kader bepaalt de eigen breedte van het
   bestand (640px) hoe breed de kolom wordt, en dat maakt de foto
   veel te groot.
   --------------------------------------------------------------- */
.elementor-element-c307166 {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 20px !important;
	--border-radius: 20px 20px 20px 20px;
}

.elementor-element-c307166 > .elementor-element,
.elementor-element-c307166 .elementor-widget-image,
.elementor-element-c307166 .elementor-widget-image > .elementor-widget-container {
	width: 100%;
	height: 100%;
}

.elementor-element-c307166 img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	border-radius: 20px !important;
}

/* Desktop en tablet: de foto krijgt een vast deel van de rij,
   de tekst ernaast vult de rest. */
@media (min-width: 768px) {

	.elementor-element-c307166 {
		flex: 0 0 36%;
		max-width: 36%;
	}

	.elementor-element-6f6fdb5 {
		flex: 1 1 auto;
	}
}

/* Telefoon: gecentreerd en bescheiden, niet schermvullend */
@media (max-width: 767px) {

	.elementor-element-c307166 {
		width: 100%;
		max-width: 240px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ---------------------------------------------------------------
   8. Linkkleur in de footer
   Hello Elementor zet alle links standaard op #cc3366 (roze-rood).
   In de footer staan de links in tekstwidgets, die kleur past niet
   bij de huisstijl. Muted blauw als rust, accentgroen bij hover.
   .elementor-21 is het footertemplate (post 21, Hoofdfooter).
   --------------------------------------------------------------- */
.elementor-21 .elementor-widget-text-editor a {
	color: #A0BCD8;
	text-decoration: none;
}

.elementor-21 .elementor-widget-text-editor a:hover,
.elementor-21 .elementor-widget-text-editor a:focus {
	color: #2DBE5F;
	text-decoration: none;
}