/*
 * Site header (child header.php): logo · WordPress primary menu · "Request a Quotation".
 * Fixed and transparent over the hero; .is-scrolled = dark + light blur + slightly smaller;
 * .is-hidden = slid up while scrolling down. Mobile: burger + full-screen menu.
 * Behaviour: assets/js/header.js. Colours: the shared dark variables (--mxp-*).
 */
:root {
	--mx-header-h: 84px;
	--mx-brand-h: 48px;
}

.mx-site-header {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 1000;
	padding-block: 18px;
	background-color: rgba(9, 29, 13, 0);
	transition: transform 0.45s var(--mxp-ease), background-color 0.35s ease, padding 0.35s var(--mxp-ease), box-shadow 0.35s ease;
}
.mx-site-header.is-scrolled {
	padding-block: 10px;
	background-color: rgba(9, 29, 13, 0.84);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 1px 0 rgba(239, 245, 237, 0.07);
}
.mx-site-header.is-hidden { transform: translateY(-110%); }

.mx-site-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2.5rem);
	max-width: calc(var(--mx-container) + 2 * var(--mx-gutter));
	margin-inline: auto;
	padding-inline: var(--mx-gutter);
}

/* ---- Logo (template-parts/header/brand.php) ----------------------------------------------- */
.mx-brand {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--mx-brand-h) * 0.22);
	height: var(--mx-brand-h);
	line-height: 0;
	flex: none;
	text-decoration: none;
	transform-origin: left center;
	transition: transform 0.35s var(--mxp-ease), opacity 0.6s ease;
}
.mx-brand__icon,
.mx-brand__word { display: block; height: var(--mx-brand-h); width: auto; max-width: none; }
.mx-brand__icon { aspect-ratio: 744 / 858; }
.mx-brand__word { aspect-ratio: 1518 / 858; }
.is-scrolled .mx-brand { transform: scale(0.86); }

/* Live site: the logo waits for the hero sequence, then fades in (failsafe after 4.5s). */
.mx-motion .mx-brand:not(.is-in) { opacity: 0; animation: mx-brand-failsafe 0s linear 4.5s forwards; }
@keyframes mx-brand-failsafe { to { opacity: 1; } }

/* ---- Menu --------------------------------------------------------------------------------- */
.mx-nav { margin-left: auto; }
.mx-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(1.1rem, 2vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.mx-nav__list a {
	position: relative;
	display: inline-block;
	padding: 6px 0;
	font-family: var(--mx-font-body);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: rgba(239, 245, 237, 0.86);
	text-decoration: none;
	transition: color 0.25s ease;
}
.mx-nav__list a:hover,
.mx-nav__list .current-menu-item > a { color: var(--mxp-text); }
.mx-nav__line {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1.5px;
	background: var(--mxp-gold);
	transform: scaleX(0);
	transform-origin: left center;
	pointer-events: none;
}
.mx-nav__list .current-menu-item .mx-nav__line { transform: scaleX(1); }

/* ---- CTA ---------------------------------------------------------------------------------- */
.mx-header-cta {
	flex: none;
	display: inline-flex;
	align-items: center;
	padding: 11px 20px;
	border-radius: 6px;
	background: var(--mxp-gold);
	color: var(--mx-ink);
	font-family: var(--mx-font-body);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 8px 22px -10px rgba(244, 175, 53, 0.6);
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
	will-change: transform;
}
.mx-header-cta:hover { background: #F7BF55; color: var(--mx-ink); box-shadow: 0 12px 28px -10px rgba(244, 175, 53, 0.7); }

/* ---- Burger + full-screen menu (mobile/tablet) --------------------------------------------- */
.mx-burger {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	margin-left: auto;
	padding: 0;
	border: 1px solid rgba(239, 245, 237, 0.18);
	border-radius: 10px;
	background: transparent;
	cursor: pointer;
}
.mx-burger__bar {
	position: absolute;
	left: 12px;
	right: 12px;
	height: 1.5px;
	background: var(--mxp-text);
	transition: transform 0.35s var(--mxp-ease), top 0.35s var(--mxp-ease);
}
.mx-burger__bar:nth-child(1) { top: 17px; }
.mx-burger__bar:nth-child(2) { top: 25px; }
.mx-burger[aria-expanded="true"] .mx-burger__bar:nth-child(1) { top: 21px; transform: rotate(45deg); }
.mx-burger[aria-expanded="true"] .mx-burger__bar:nth-child(2) { top: 21px; transform: rotate(-45deg); }

.mx-menu-overlay {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2.5rem;
	padding: calc(var(--mx-header-h) + 2rem) var(--mx-gutter) 3rem;
	background: var(--mxp-bg);
	opacity: 0;
	transition: opacity 0.35s ease;
	overscroll-behavior: contain;
}
.mx-menu-overlay[hidden] { display: none; }
.mx-menu-overlay.is-open { opacity: 1; }
.mx-menu-overlay__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; }
.mx-menu-overlay__list a {
	display: block;
	padding: 0.45rem 0;
	font-family: var(--mx-font-display);
	font-size: clamp(1.8rem, 7vw, 2.6rem);
	font-weight: 600;
	line-height: 1.1;
	color: var(--mxp-text);
	text-decoration: none;
}
.mx-menu-overlay__list a:hover { color: var(--mxp-gold); }
.mx-header-cta--overlay { align-self: flex-start; padding: 14px 24px; font-size: 1rem; }

@media (max-width: 1024px) {
	:root { --mx-header-h: 72px; --mx-brand-h: 40px; }
	.mx-js .mx-nav,
	.mx-js .mx-site-header__inner > .mx-header-cta { display: none; }
	.mx-js .mx-burger { display: block; }
	/* No JS: the menu simply wraps under the logo */
	html:not(.mx-js) .mx-site-header__inner { flex-wrap: wrap; }
	html:not(.mx-js) .mx-nav { margin-left: 0; width: 100%; }
	html:not(.mx-js) .mx-nav__list { flex-wrap: wrap; gap: 0.5rem 1rem; }
}
@media (min-width: 1025px) {
	.mx-menu-overlay { display: none !important; }
}

/* Non-Elementor pages: keep content clear of the fixed header */
body:not(.elementor-page) .mx-main { padding-top: var(--mx-header-h); }

@media (prefers-reduced-motion: reduce) {
	.mx-site-header, .mx-brand, .mx-menu-overlay, .mx-burger__bar { transition: none; }
}

/*
 * Link arrows: one thin drawn arrow everywhere (the "→" character is not in the self-hosted
 * fonts, so browsers drew it from a heavy fallback font). Mirrored on the Arabic site.
 */
:root {
	--mx-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5'/%3E%3C/svg%3E");
}
.elementor .elementor-element.mx-link-arrow .elementor-button::after,
.elementor .elementor-element.mx-routes .elementor-icon-list-item a::after,
.mx-arrow::after {
	content: "" !important;
	display: inline-block;
	flex: none;
	width: 1em;
	height: 1em;
	vertical-align: -0.12em;
	background-color: currentColor;
	-webkit-mask: var(--mx-arrow) center / contain no-repeat;
	mask: var(--mx-arrow) center / contain no-repeat;
}
.elementor .elementor-element.mx-link-arrow .elementor-button::after { background-color: var(--mx-accent, var(--mx-gold)); }
.elementor .elementor-element.mx-routes .elementor-icon-list-item a::after { background-color: var(--mx-gold-600, #D9921A); margin-inline-start: 0.4em; }
html[dir="rtl"] .elementor .elementor-element.mx-link-arrow .elementor-button::after,
html[dir="rtl"] .elementor .elementor-element.mx-routes .elementor-icon-list-item a::after,
html[dir="rtl"] .mx-arrow::after {
	transform: scaleX(-1);
}
html[dir="rtl"] .elementor .elementor-element.mx-link-arrow .elementor-button:hover::after,
html[dir="rtl"] .elementor .elementor-element.mx-routes .elementor-icon-list-item a:hover::after {
	transform: scaleX(-1) translateX(4px);
}
/*
 * External links in running text (ISCC EU, EN 14214, RED III, CARBON…): gold text, not only a
 * gold underline. Deep gold on light sections (readable), brand gold on dark ones.
 */
html body .mx-main .elementor a[target="_blank"]:not(.elementor-button):not(.mx-btn) {
	color: #B07508;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(244, 175, 53, 0.55);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.2s ease, text-decoration-color 0.2s ease, text-decoration-thickness 0.2s ease;
}
html body .mx-main .elementor a[target="_blank"]:not(.elementor-button):not(.mx-btn):hover,
html body .mx-main .elementor a[target="_blank"]:not(.elementor-button):not(.mx-btn):focus-visible {
	color: #8A5A06;
	text-decoration-color: currentColor;
	text-decoration-thickness: 2px;
}
html body .mx-main .elementor :is(.mx-dark, .mx-hero, .mx-ihero, .mx-products, .mx-sustain, .mx-close) a[target="_blank"]:not(.elementor-button):not(.mx-btn) {
	color: var(--mx-gold, #F4AF35);
	text-decoration-color: rgba(244, 175, 53, 0.5);
}
html body .mx-main .elementor :is(.mx-dark, .mx-hero, .mx-ihero, .mx-products, .mx-sustain, .mx-close) a[target="_blank"]:not(.elementor-button):not(.mx-btn):hover {
	color: #FFD27A;
	text-decoration-color: currentColor;
}/* On the green step cards gold would vanish: deep amber text, gold underline. */
html body .mx-main .elementor .mx-step a[target="_blank"]:not(.elementor-button):not(.mx-btn) {
	color: #5E3C00;
	text-decoration-color: #F4AF35;
	text-decoration-thickness: 2px;
}
html body .mx-main .elementor .mx-step a[target="_blank"]:not(.elementor-button):not(.mx-btn):hover { color: #091D0D; }