/* Zenesis v2 — site header (ElementsKit header template "Zenesis Header").
   Layout, colours, typography, menu and links stay in Elementor / Site Settings. This file adds:
   - a fixed bar; on ordinary pages the template wrapper keeps the bar's place, so nothing sits under it
     (on the Home page the bar already lies over the hero, see hero.css)
   - the scroll behaviour of the live site (zenesisconsulting.com, client request 2026-10-06), states set by header.js:
     · desktop (1025px+): the bar slides up out of view while scrolling down (html.zn-hdr-hidden) and slides back in
       on scrolling up (html.zn-hdr-shown); 0.15s linear slide, solid background fading in over 0.35s, same height,
       no shadow. Back at the top of the page it returns to its initial state.
     · tablet / mobile: the bar always stays in view; once scrolled (tablet: straight away, mobile: after 100px,
       html.zn-hdr-compact) it turns solid with a blurred backdrop and a shorter 70px bar, background over 1s.
   - desktop menu micro-interactions: gold underline on hover / focus / current page, turning dropdown arrow, smoother
     Company dropdown (also opens from the keyboard). The Services and Knowledge Center mega menus keep their own motion.
   The blur sits on a ::before layer, and tablet / mobile never move the bar: backdrop-filter or transform on the bar
   itself would trap ElementsKit's mobile off-canvas menu (position: fixed) inside the bar. Skipped in the Elementor editor. */

:root {
	--zn-hdr-h: 80px;            /* bar height (the header container's min height in Elementor) */
	--zn-hdr-hc: 80px;           /* bar height while scrolled: unchanged on desktop */
	--zn-hdr-top: 0px;           /* WordPress admin bar, when shown */
	--zn-hdr-ease: cubic-bezier(.16, 1, .3, 1);
	--zn-hdr-ul: 14px;           /* menu item side padding (Elementor: 14px, 8px up to 1280px) */
}
@media (max-width: 1280px) { :root { --zn-hdr-ul: 8px; } }
@media (max-width: 1024px) { :root { --zn-hdr-hc: 70px; } }
@media (max-width: 767px) { :root { --zn-hdr-h: 72px; } }
body.admin-bar { --zn-hdr-top: 32px; }
@media (max-width: 782px) { body.admin-bar { --zn-hdr-top: 46px; } }

/* ── Fixed bar ── */
body:not(.elementor-editor-active):not(.zn-has-hero) .ekit-template-content-header { height: var(--zn-hdr-h); }
body.zn-has-hero:not(.elementor-editor-active) .ekit-template-content-header { z-index: 999; }
body:not(.elementor-editor-active) #page .ekit-template-content-header header.e-con.e-parent {
	position: fixed; top: var(--zn-hdr-top); left: 0; right: 0; z-index: 999;
	min-height: var(--zn-hdr-h);
}
/* solid background layer, faded in by the scrolled states (blurred backdrop on tablet / mobile) */
body:not(.elementor-editor-active) #page .ekit-template-content-header header.e-con.e-parent::before {
	content: ""; display: block; position: absolute; inset: 0; z-index: -1;
	width: auto; height: auto; border: 0; border-radius: 0; mix-blend-mode: normal; pointer-events: none;
	background: var(--e-global-color-secondary);
	opacity: 0;
}

/* ── Desktop: hide while scrolling down, show on scrolling up ── */
@media (min-width: 1025px) {
	body:not(.elementor-editor-active) #page .ekit-template-content-header header.e-con.e-parent { will-change: transform; }
	html.zn-hdr-hidden body:not(.elementor-editor-active) #page .ekit-template-content-header header.e-con.e-parent { transform: translateY(-100%); }
	html.zn-hdr-shown body:not(.elementor-editor-active) #page .ekit-template-content-header header.e-con.e-parent { transform: translateY(0); }
	html.zn-hdr-shown body:not(.elementor-editor-active) #page .ekit-template-content-header header.e-con.e-parent::before { opacity: 1; }
	/* mega menus open right under the bar (ElementsKit pins them at the 80px menu-bar height) */
	body:not(.elementor-editor-active) #page .ekit-template-content-header .elementskit-navbar-nav > li > .elementskit-megamenu-panel { top: 100% !important; }
}

/* ── Tablet / mobile: solid, blurred, shorter bar once scrolled ── */
@media (max-width: 1024px) {
	html.zn-hdr-compact body:not(.elementor-editor-active) #page .ekit-template-content-header header.e-con.e-parent { min-height: var(--zn-hdr-hc); }
	html.zn-hdr-compact body:not(.elementor-editor-active) #page .ekit-template-content-header header.e-con.e-parent::before {
		opacity: 1;
		-webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
	}
}

/* transitions only once the first state is set (no animation on page load) */
html.zn-hdr-ready #page .ekit-template-content-header header.e-con.e-parent::before { transition: opacity 1s ease; }
@media (min-width: 1025px) {
	html.zn-hdr-ready #page .ekit-template-content-header header.e-con.e-parent { transition: transform .15s linear; }
	html.zn-hdr-ready #page .ekit-template-content-header header.e-con.e-parent::before { transition: opacity .35s ease; }
}
@media (max-width: 1024px) {
	html.zn-hdr-ready #page .ekit-template-content-header header.e-con.e-parent { transition: min-height .3s ease; }
}

/* ── Desktop menu: underline, arrow, dropdown ── */
@media (min-width: 1025px) {
	#page .ekit-template-content-header .elementskit-navbar-nav > li > a { position: relative; }
	#page .ekit-template-content-header .elementskit-navbar-nav > li > a::after {
		content: ""; position: absolute; left: var(--zn-hdr-ul); right: var(--zn-hdr-ul); top: calc(50% + 13px); height: 1px;
		background: var(--e-global-color-primary); pointer-events: none;
		transform: scaleX(0); transform-origin: 100% 50%; transition: transform .5s var(--zn-hdr-ease);
	}
	/* the line runs under the label only, not under the dropdown arrow */
	#page .ekit-template-content-header .elementskit-navbar-nav > li.elementskit-dropdown-has > a::after { right: calc(var(--zn-hdr-ul) + 15px); }
	#page .ekit-template-content-header .elementskit-navbar-nav > li:hover > a::after,
	#page .ekit-template-content-header .elementskit-navbar-nav > li > a:focus-visible::after,
	#page .ekit-template-content-header .elementskit-navbar-nav > li > a[aria-expanded="true"]::after { transform: scaleX(1); transform-origin: 0 50%; }
	/* current page (and the parent of the current page) */
	#page .ekit-template-content-header .elementskit-navbar-nav > li:is(.current-menu-item, .current-menu-ancestor, .zn-current) > a::after { transform: scaleX(1); }
	#page .ekit-template-content-header .elementskit-navbar-nav > li.zn-current > a,
	#page .ekit-template-content-header .elementskit-navbar-nav > li.zn-current > a .elementskit-submenu-indicator { color: var(--e-global-color-primary); }

	/* dropdown arrow turns while its menu is open */
	#page .ekit-template-content-header .elementskit-navbar-nav > li > a .elementskit-submenu-indicator { transition: transform .45s var(--zn-hdr-ease), color .3s ease; }
	#page .ekit-template-content-header .elementskit-navbar-nav > li:hover > a .elementskit-submenu-indicator,
	#page .ekit-template-content-header .elementskit-navbar-nav > li:has(:focus-visible) > a .elementskit-submenu-indicator,
	#page .ekit-template-content-header .elementskit-navbar-nav > li > a[aria-expanded="true"] .elementskit-submenu-indicator { transform: rotate(180deg); }

	/* Company dropdown: eased fade-and-rise, items follow one after another; keyboard focus opens it too */
	#page .ekit-template-content-header .elementskit-navbar-nav > li > .elementskit-submenu-panel {
		transition: opacity .3s ease, transform .5s var(--zn-hdr-ease), visibility 0s linear .5s;
	}
	#page .ekit-template-content-header .elementskit-navbar-nav > li:is(:hover, :has(:focus-visible)) > .elementskit-submenu-panel {
		opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
		transition: opacity .3s ease, transform .5s var(--zn-hdr-ease), visibility 0s;
	}
	#page .ekit-template-content-header .elementskit-navbar-nav > li > .elementskit-submenu-panel > li {
		opacity: 0; translate: 0 6px; transition: opacity .3s ease, translate .45s var(--zn-hdr-ease);
	}
	#page .ekit-template-content-header .elementskit-navbar-nav > li:is(:hover, :has(:focus-visible)) > .elementskit-submenu-panel > li {
		opacity: 1; translate: 0 0; transition-delay: calc(.06s + var(--zn-i, 0) * .045s);
	}
	#page .ekit-template-content-header .elementskit-submenu-panel > li:nth-child(2) { --zn-i: 1; }
	#page .ekit-template-content-header .elementskit-submenu-panel > li:nth-child(3) { --zn-i: 2; }
	#page .ekit-template-content-header .elementskit-submenu-panel > li:nth-child(4) { --zn-i: 3; }
	#page .ekit-template-content-header .elementskit-submenu-panel > li:nth-child(5) { --zn-i: 4; }
	#page .ekit-template-content-header .elementskit-submenu-panel > li:nth-child(6) { --zn-i: 5; }
	#page .ekit-template-content-header .elementskit-navbar-nav > li > .elementskit-submenu-panel > li > a { transition: color .3s ease, translate .45s var(--zn-hdr-ease); }
	#page .ekit-template-content-header .elementskit-navbar-nav > li > .elementskit-submenu-panel > li > a:is(:hover, :focus-visible) { translate: 4px 0; }
}

/* ── Sticky parts of pages sit below the bar ── */
body .zn-services { --zn-top: calc(24px + var(--zn-hdr-hc)); }
body .zn-posts .zn-pst-rail,
body .zn-posts .zn-pst-toc { top: calc(40px + var(--zn-hdr-hc)); }

@media (prefers-reduced-motion: reduce) {
	html.zn-hdr-ready #page .ekit-template-content-header *,
	html.zn-hdr-ready #page .ekit-template-content-header *::before,
	html.zn-hdr-ready #page .ekit-template-content-header *::after,
	html.zn-hdr-ready #page .ekit-template-content-header header.e-con.e-parent { transition-duration: .01s !important; transition-delay: 0s !important; }
}