/* ==========================================================================
   Zanzalakht · header (ported from new/ — the band header)
   The logo is the full height of the bar. The bar carries the logo's two
   colours (sky #FF6525 over ground #8AA821, split at 58.125%) across the full
   width. Menu links sit on the horizon; "Support us" (a navigation link
   with the class zx-nav-cta) and the mobile Menu button are centred on it.
   Scrolling: the bar condenses, slides away going down, returns going up
   (assets/header.js).

   Upload assets/logo-zanzalakht.png as the Site Logo.
   Design width 1440. Breakpoints: 1920 · 1440 · 1280 · 992 · 782 · 480.
   ========================================================================== */

:root {
	--zx-scale: 1;
	--zx-header-full:  max(80px, calc(104px * var(--zx-scale)));
	--zx-header-small: max(64px, calc(80px * var(--zx-scale)));
	--zx-gutter:   var(--gutter, calc(64px * var(--zx-scale)));   /* the same side spacing as the page sections (v2.css) */
	--zx-btn-h:    max(44px, calc(54px * var(--zx-scale)));
	--zx-btn-px:   calc(30px * var(--zx-scale));
	--zx-dot:      max(7px, calc(9px * var(--zx-scale)));
	--zx-nav-gap:  calc(36px * var(--zx-scale));
	--zx-nav-size: max(14px, calc(15px * var(--zx-scale)));
	--zx-label:    max(12px, calc(13px * var(--zx-scale)));
	--zx-overlay-size: 24px;
	--zx-ease: cubic-bezier(.22, .61, .36, 1);
}
/* every size on the site is its 1440 design size x --zx-scale, in steps:
   1920+ x1.333 · 1440-1919 x1 · 1280-1439 x0.889 · 992-1279 x0.689 */
@media (min-width: 1920px) { :root { --zx-scale: calc(1920 / 1440); } }
@media (max-width: 1439px) { :root { --zx-scale: calc(1280 / 1440); } }
@media (max-width: 1279px) { :root { --zx-scale: calc(992 / 1440); } }
@media (max-width: 991px) {
	:root {
		--zx-header-full: 76px; --zx-header-small: 62px;
		--zx-btn-h: 48px; --zx-btn-px: 24px;
		--zx-dot: 8px; --zx-nav-gap: 0px; --zx-nav-size: 14px; --zx-label: 12px;
	}
}
@media (max-width: 781px) {
	:root { --zx-header-full: 72px; --zx-header-small: 60px; --zx-btn-h: 46px; --zx-overlay-size: 22px; }
}
@media (max-width: 479px) {
	:root { --zx-header-full: 68px; --zx-header-small: 58px; --zx-btn-h: 44px; --zx-btn-px: 20px; --zx-overlay-size: 21px; }
}

/* ---------- the bar ---------- */
.zx-header {
	--zx-h: var(--zx-header-full);
	z-index: 100;
}
.zx-header.is-condensed { --zx-h: var(--zx-header-small); }

/* fixed on the site only — in the editor it stays in the flow */
body:not(.editor-styles-wrapper) .zx-header {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	/* moves "top", not transform: a transform would break the fixed menu panel */
	transition: top .4s var(--zx-ease);
}
body:not(.editor-styles-wrapper) .zx-header.is-hidden { top: calc(var(--zx-h) * -1 - 2px); }

/* the page starts under the full-height bar (never jumps when it shrinks) */
body:not(.page-id-6) .wp-site-blocks { padding-top: var(--zx-header-full); }
.wp-site-blocks > header.wp-block-template-part + * { margin-block-start: 0; }
body.page-id-6 .zx-header { display: none; }   /* coming-soon page */

.zx-header .zx-header__bar {
	height: var(--zx-h);
	padding: 0 var(--zx-gutter) !important;
	transition: height .35s var(--zx-ease);
}
.zx-header .zx-header__inner {
	display: flex;
	max-width: var(--wide, 1200px);   /* the same container as the page sections */
	margin-inline: auto;
	height: 100%;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	justify-content: space-between !important;
	gap: calc(40px * var(--zx-scale));
}

/* thin line under the bar once the page scrolls beneath it */
.zx-header::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 100%;
	height: 1px;
	background: rgb(0 0 0 / .14);
	opacity: 0;
	transition: opacity .3s;
}
.zx-header.is-condensed::after { opacity: 1; }

/* ---------- core/site-logo: always the full height ---------- */
.zx-header .wp-block-site-logo { flex: none; margin: 0; line-height: 0; align-self: center; }
/* the logo image has 18px of empty space before the ink (of 400px height): pull it out so the ink lines up with the text below */
.zx-header .wp-block-site-logo { margin-left: calc(var(--zx-h) * -0.039); }
.zx-header .wp-block-site-logo a { display: block; }
.zx-header .wp-block-site-logo img, .zx-header .wp-block-site-logo svg {
	height: calc(var(--zx-h) * .64) !important;   /* room above and below it in the bar */
	width: auto !important;
	max-width: none;
	mix-blend-mode: normal;
	transition: height .35s var(--zx-ease);
}

/* ---------- core/navigation ---------- */
.zx-header nav.zx-mainnav {
	align-self: center;
	display: flex;
	align-items: center;
	margin: 0;
	font-family: Kodchasan, "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
	transition: height .35s var(--zx-ease);
}
.zx-header .wp-block-navigation__container {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	align-items: center !important;
	flex-wrap: nowrap !important;
	gap: var(--zx-nav-gap) !important;
}
.zx-header .wp-block-navigation-item { position: relative; }
.zx-header .wp-block-navigation-item__content {
	position: relative;
	display: block;
	padding: 12px 0 !important;   /* ≥ 44px tall */
	color: #000 !important;
	font-size: var(--zx-nav-size);
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.6;
	text-decoration: none !important;
	white-space: nowrap;
}

/* the berry dot marks the current page and appears on hover */
.zx-header .wp-block-navigation-item__content::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 2px;
	margin-inline: auto;
	width: var(--zx-dot);
	height: var(--zx-dot);
	border-radius: 50%;
	background: #FF6525;
	transform: translateY(4px) scale(0);
	transition: transform .3s var(--zx-ease);
}
.zx-header .current-menu-item > .wp-block-navigation-item__content::before,
.zx-header .wp-block-navigation-item__content[aria-current="page"]::before { transform: none; }   /* the current page's dot stays where it is */
.zx-header .wp-block-navigation-item__content:hover::before { transform: none; animation: nav-dot-pop .3s var(--zx-ease) both, nav-dot-bob 1.8s ease-in-out .3s infinite; }   /* only the hovered one moves */

/* "Support us" — a green button */
.zx-header .zx-nav-cta { margin-inline-start: calc(12px * var(--zx-scale)); }
.zx-header .zx-nav-cta > .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	height: var(--zx-btn-h);
	padding: 0 var(--zx-btn-px) !important;
	border: 0;
	border-radius: 3px;
	background: #8AA821;
	color: #000 !important;
	font-weight: 700;
	transition: background-color .2s, color .2s;
}
.zx-header .zx-nav-cta > .wp-block-navigation-item__content { position: relative; transition: background-color .2s, color .2s, box-shadow .2s, padding .25s; }
.zx-header .zx-nav-cta > .wp-block-navigation-item__content::before {
	content: ""; position: absolute; right: 12px; left: auto; top: 50%; inset-inline: auto 12px; width: 44px; height: 34px; margin: -17px 0 0; pointer-events: none;
	border-radius: 0; box-shadow: none; transform: none;
	background-color: transparent; background-image: radial-gradient(circle closest-side, var(--orange) 96%, transparent 100%), radial-gradient(circle closest-side, var(--green) 96%, transparent 100%), radial-gradient(circle closest-side, var(--orange) 96%, transparent 100%);
	background-size: 13px 13px, 17px 17px, 10px 10px; background-repeat: no-repeat; background-position: 10% calc(100% - 0.0px), 50% calc(100% - 13.1px), 90% calc(100% - 4.1px);
	opacity: 0; transition: opacity .25s;
}
.zx-header .zx-nav-cta > .wp-block-navigation-item__content:hover { background: #000; color: #FDEFD4 !important; box-shadow: 4px 4px 0 #FF6525; padding-right: 70px !important; }   /* the same hover as every button */
.zx-header .zx-nav-cta > .wp-block-navigation-item__content:hover::before { opacity: 1; animation: btn-dots 5.5s linear infinite; }

/* open / close buttons (the block's own, label mode) */
.zx-header .wp-block-navigation__responsive-container-open,
.zx-header .wp-block-navigation__responsive-container-close {
	display: none;
	align-items: center;
	gap: 10px;
	height: var(--zx-btn-h);
	min-width: 44px;
	padding: 0 16px;
	border: 0;
	background: transparent;
	color: #000;
	font-family: Kodchasan, "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
	font-size: var(--zx-label);
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	cursor: pointer;
}
.zx-header .wp-block-navigation__responsive-container-open::after,
.zx-header .wp-block-navigation__responsive-container-close::after {
	content: "";
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: var(--zx-icon) center / contain no-repeat;
	mask: var(--zx-icon) center / contain no-repeat;
}
.zx-header .wp-block-navigation__responsive-container-open {
	--zx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7h18M3 12h18M3 17h18' stroke='black' stroke-width='1.8' fill='none'/%3E%3C/svg%3E");
}
.zx-header .wp-block-navigation__responsive-container-close {
	--zx-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' stroke='black' stroke-width='1.8' fill='none'/%3E%3C/svg%3E");
}

/* 992 and up: links inline */
@media (min-width: 992px) {
	.zx-header .wp-block-navigation__responsive-container,
	.zx-header .wp-block-navigation__responsive-close,
	.zx-header .wp-block-navigation__responsive-dialog,
	.zx-header .wp-block-navigation__responsive-container-content { display: contents !important; }
	.zx-header .wp-block-navigation__responsive-container-open,
	.zx-header .wp-block-navigation__responsive-container-close { display: none !important; }
}

/* under 992: the Menu button crosses the horizon and opens a panel under the bar */
@media (max-width: 991px) {
	.zx-header .wp-block-navigation__responsive-container-open {
		display: inline-flex !important;
	}
	/* while the panel is open, the Close button takes the Menu button's place (they used to sit on top of each other) */
	html.has-modal-open .zx-header .wp-block-navigation__responsive-container-open,
	.zx-header .wp-block-navigation:has(.is-menu-open) .wp-block-navigation__responsive-container-open { visibility: hidden; }
	.zx-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
	.zx-header .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed;
		top: calc(var(--zx-h) + var(--wp-admin--admin-bar--height, 0px));
		left: 0; right: 0; bottom: 0;
		z-index: 99;
		display: block;
		padding: 0 !important;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: #FDEFD4 !important;
		color: #000 !important;
		animation: zx-panel .3s var(--zx-ease);   /* opacity only: a transform would move the fixed Close button */
	}
	.zx-header .is-menu-open .wp-block-navigation__responsive-close { max-width: none; margin: 0; }
	.zx-header .is-menu-open .wp-block-navigation__responsive-dialog { margin-top: 0 !important; }
	.zx-header .is-menu-open .wp-block-navigation__responsive-container-close {
		display: inline-flex;
		position: fixed;
		top: calc(var(--zx-h) * .5 + var(--wp-admin--admin-bar--height, 0px));
		right: var(--zx-gutter);
		left: auto;
		transform: translateY(-50%);
		z-index: 101;
	}
	[dir="rtl"] .zx-header .is-menu-open .wp-block-navigation__responsive-container-close { right: auto; left: var(--zx-gutter); }
	.zx-header .is-menu-open .wp-block-navigation__responsive-container-content {
		display: block !important;
		padding: 40px var(--zx-gutter) 64px !important;
	}
	.zx-header .is-menu-open .wp-block-navigation__container {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0 !important;
		max-width: 640px;
	}
	/* the menu is set to "justify right" for desktop; inside the panel everything starts at the left */
	.zx-header .wp-block-navigation__responsive-container.is-menu-open {
		--navigation-layout-justification-setting: stretch;
		--navigation-layout-justify: flex-start;
		text-align: start;
	}
	.zx-header .is-menu-open .wp-block-navigation-item {
		display: block !important;
		width: 100%;
		border-bottom: 1px solid #B09B74;
	}
	.zx-header .is-menu-open .wp-block-navigation-item__content { justify-content: flex-start; width: 100%; }
	.zx-header .is-menu-open .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		gap: 14px;
		min-height: 64px;
		padding: 12px 0 !important;
		font-family: Kodchasan, "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
		font-size: var(--zx-overlay-size);
		font-weight: 500;
	}
	.zx-header .is-menu-open .wp-block-navigation-item__content::before {
		position: static;
		order: 2;
		margin: 0;
		background: #FF6525;
		box-shadow: none;
	}
	.zx-header .is-menu-open .zx-nav-cta { margin: 32px 0 0; border: 0; }
	.zx-header .is-menu-open .zx-nav-cta > .wp-block-navigation-item__content {
		justify-content: center !important;
		height: auto;
		min-height: 52px;
		transform: none;
		font-family: Kodchasan, "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
		font-size: 16px;
		font-weight: 700;
	}
}
/* ---------- the language switch (where "Support us" used to be; Support us now floats at the bottom, see v2.css) ---------- */
.zx-header .zx-mainnav { margin-inline-start: auto; }
.zx-header .zx-lang {
	flex: none; align-self: center; display: inline-flex; align-items: center;
	height: max(36px, calc(40px * var(--zx-scale))); padding: 0 calc(16px * var(--zx-scale));
	border: 2px solid #000; border-radius: 2px; color: #000; text-decoration: none;
	font-size: var(--zx-nav-size); font-weight: 600; line-height: 1; white-space: nowrap;
	transition: background-color .2s, color .2s;
}
.zx-header .zx-lang:hover { background: #000; color: #FDEFD4; }
.zx-header .zx-lang:lang(ar) { font-family: var(--arabic); font-size: max(15px, calc(16px * var(--zx-scale))); }
.zx-header .zx-lang:lang(en) { font-family: Kodchasan, "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; }
@media (max-width: 991px) {
	.zx-header .zx-lang { order: 1; height: 36px; padding: 0 12px; margin-inline-start: auto; }
	.zx-header .zx-mainnav { order: 2; margin-inline-start: 0; }
}
html.has-modal-open .support-float { display: none; }   /* not over the open menu */

/* ---------- the Arabic pages: the Arabic type in the bar and the menu panel ---------- */
html:lang(ar) .zx-header :is(.wp-block-navigation-item__content, .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close) {
	font-family: var(--arabic) !important; letter-spacing: 0; text-transform: none;
}
html:lang(ar) .zx-header .wp-block-navigation__responsive-container-open,
html:lang(ar) .zx-header .wp-block-navigation__responsive-container-close { font-size: 15px; }
html[dir="rtl"] .zx-header .wp-block-site-logo { margin-left: 0; }

@keyframes zx-panel { from { opacity: 0; } }
@keyframes nav-dot-pop { from { transform: translateY(4px) scale(0); } to { transform: none; } }
@keyframes nav-dot-bob { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.2); } }

@media (prefers-reduced-motion: reduce) {
	.zx-header, .zx-header * { transition: none !important; animation: none !important; }
}