/*
 * Sticky header en footer voor ElektroSchema, bovenop het Hello Elementor thema.
 * Zelfde kleuren en lettertype als de homepage, nu voor de hele site.
 */

:root {
	--esh-ink: #0f172a;
	--esh-muted: #5f6b7a;
	--esh-line: #e7e3d8;
	--esh-accent: #38b1ed;
	--esh-accent-dark: #1f8fc7;
	--esh-amber: #ffdb05;
	--esh-amber-dark: #e0c000;
	--esh-panel: #ffffff;
	--esh-panel-alt: #f3f1ea;
	--esh-bg: #faf8f4;
	--esh-progress: #22c55e;
}

/* ===== Pagina's met het template "ElektroSchema volledige breedte" ===== */

.esh-main-full {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* ===== Header ===== */

.esh-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--esh-panel);
	border-bottom: 1px solid var(--esh-line);
	font-family: 'Montserrat', sans-serif;
	transition: box-shadow 0.2s ease;
	/* Zonder deze regel gebruikt de browser op mobiel zijn eigen (hier paarse) kleur
	   voor het korte "oplicht"-effect als je iets aantikt, bijvoorbeeld het hamburger-
	   icoon. Dit zet dat tikeffect op onze eigen gele kleur, net als op de homepage. */
	-webkit-tap-highlight-color: rgba(255, 219, 5, 0.35);
	/* Hello Elementor zet zelf padding-block:1rem op .site-header. Onze eigen padding
	   zit al op .esh-header-inner, dus zonder deze regel komt er onder de groene
	   voortgangsbalk (die ná .esh-header-inner in de header staat) nog een extra
	   stukje lege ruimte voordat de header echt stopt. */
	padding-block: 0;
}

/* Als er een ingelogde admin is, staat de zwarte WP-balk boven alles met top:0. Zonder
   deze regel schuift onze sticky header daar bij het scrollen strak onderaan tegenaan. */
body.admin-bar .esh-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .esh-header {
		top: 46px;
	}
}

.esh-header.is-scrolled {
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.esh-header-inner {
	width: 100%;
	margin: 0 auto;
	padding: 16px 32px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	box-sizing: border-box;
}

.esh-header-logo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.esh-header-logo img {
	display: block;
	height: 40px;
	width: auto;
}

.esh-header-sitename {
	font-size: 20px;
	font-weight: 800;
	color: var(--esh-ink);
	text-decoration: none;
}

/* Op desktop staat het menu precies in het midden van de volledige balk, ongeacht hoe
   breed het logo of de inlogknop aan weerszijden zijn. */
.esh-header-nav {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.esh-header-nav ul {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 0;
	padding: 0;
}

.esh-header-nav a {
	color: var(--esh-ink) !important;
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.esh-header-nav a:hover {
	color: var(--esh-accent) !important;
}

/* De linkjes in dit menu wijzen deels naar losse pagina's en deels naar ankers op de
   onepager (home). WordPress markeert zo'n ankerlink als "huidige pagina" zodra je op
   de home staat, ook al scrolde je niet per se naar dat stukje. Daarom bewust geen
   aparte opmaak (dikgedrukt of een andere kleur) voor .current-menu-item: alle linkjes
   blijven er qua stijl hetzelfde uitzien, actief of niet. */

.esh-header-actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
}

.esh-cart-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 5px;
	border: 1px solid var(--esh-line);
	background: #fff;
	color: var(--esh-ink);
	flex-shrink: 0;
}

.esh-cart-btn:hover {
	border-color: var(--esh-accent);
	color: var(--esh-accent);
}

.esh-cart-count {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--esh-amber);
	color: #241a02;
	font-size: 10.5px;
	font-weight: 800;
	line-height: 17px;
	text-align: center;
}

.esh-login-btn {
	display: inline-flex;
	align-items: center;
	background: var(--esh-accent);
	color: #ffffff !important;
	font-weight: 700;
	font-size: 14.5px;
	padding: 10px 20px;
	border-radius: 5px;
	text-decoration: none !important;
	white-space: nowrap;
}

.esh-login-btn:hover {
	background: var(--esh-accent-dark);
}

/* ===== Scroll voortgangsbalk (onder de header) ===== */

.esh-scroll-progress {
	height: 3px;
	width: 100%;
	background: rgba(15, 23, 42, 0.06);
}

.esh-scroll-progress-bar {
	display: block;
	height: 100%;
	width: 0%;
	background: var(--esh-progress);
	transition: width 0.1s linear;
}

.esh-menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 38px;
	height: 38px;
	border: 1px solid var(--esh-line);
	border-radius: 5px;
	background: #fff;
	color: var(--esh-ink);
	cursor: pointer;
	padding: 0;
}

.esh-menu-toggle span {
	display: block;
	width: 18px;
	height: 2px;
	background: var(--esh-ink);
}

/* ===== Footer ===== */

.esh-footer {
	background: var(--esh-ink);
	color: rgba(255, 255, 255, 0.7);
	font-family: 'Montserrat', sans-serif;
	/* Zelfde reden als bij .esh-header: zet het tikeffect op mobiel op onze eigen gele
	   kleur in plaats van de paarse standaardkleur. */
	-webkit-tap-highlight-color: rgba(255, 219, 5, 0.35);
}

.esh-footer-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.esh-footer-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
	padding: 22px 0;
	border-top: 1px solid rgba(56, 177, 237, 0.25);
}

.esh-footer-links-row {
	justify-content: flex-start;
}

.esh-footer-bottom {
	justify-content: space-between;
}

.esh-footer-nav ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 0;
	padding: 0;
}

.esh-footer-nav a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	font-size: 14.5px;
	font-weight: 600;
}

.esh-footer-nav a:hover {
	color: var(--esh-accent);
}

.esh-footer-brand-block {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.esh-footer-brand {
	color: #ffffff;
	text-decoration: none;
	font-weight: 800;
	font-size: 17px;
	letter-spacing: -0.01em;
}

.esh-footer-brand:hover {
	color: var(--esh-accent);
}

.esh-footer-tagline {
	margin: 0;
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.45);
}

.esh-footer-tagline a,
.esh-footer-tagline a:visited {
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
	font-weight: 600;
}

.esh-footer-tagline a:hover,
.esh-footer-tagline a:focus-visible {
	color: var(--esh-accent);
}

/* Zelfde reden als hierboven: zonder een eigen :visited regel pakt de browser voor een
   eerder bezochte link zijn eigen kleur (soms paars/roze), los van wat .esh-footer-nav a
   hierboven al zegt. */
.esh-footer-nav a,
.esh-footer-nav a:visited {
	color: rgba(255, 255, 255, 0.75);
}

.esh-footer-copyright {
	margin: 0;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.5);
}

.esh-footer-copyright .esh-footer-cookie-link,
.esh-footer-copyright .esh-footer-cookie-link:visited {
	color: rgba(255, 255, 255, 0.5);
	text-decoration: underline;
}

.esh-footer-copyright .esh-footer-cookie-link:hover,
.esh-footer-copyright .esh-footer-cookie-link:focus-visible {
	color: var(--esh-accent);
}

/* ===== Mobiel ===== */

@media (max-width: 860px) {
	.esh-header-inner {
		padding: 14px 16px;
		gap: 10px;
		flex-wrap: wrap;
	}

	.esh-login-btn {
		padding: 9px 14px;
		font-size: 14px;
	}

	/* Op mobiel: logo links, dan de inlogknop, en helemaal rechts de hamburger. */
	.esh-header-logo {
		order: 1;
	}

	.esh-header-actions {
		order: 2;
		margin-left: auto;
	}

	.esh-menu-toggle {
		display: inline-flex;
		order: 3;
	}

	.esh-header-nav {
		position: static;
		transform: none;
		order: 4;
		flex-basis: 100%;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.25s ease;
	}

	.esh-header.is-menu-open .esh-header-nav {
		max-height: 400px;
	}

	.esh-header-nav ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		padding: 16px 0 8px;
	}

	.esh-header-nav a {
		display: block;
		padding: 10px 4px;
		width: 100%;
	}

	.esh-footer-bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
}