/*
 * Site header (components/header/header.php).
 *
 * Navy, like the hero below it, so the top of the home page reads as one dark
 * scene. Baseline (no JS): brand + navigation wrap naturally on small screens.
 * Enhanced ([data-gb-nav-ready], set by header.js): on narrow screens the
 * navigation collapses behind a toggle and opens as a panel under the bar.
 */

.gb-site-header {
	/* Dark surface: the light focus ring stays visible. */
	--gb-focus: var(--gb-focus-inverse);

	position: relative;
	z-index: var(--gb-z-header);
	border-block-end: 1px solid var(--gb-color-turquoise-a20);
	background-color: var(--gb-scene-bg);
	color: var(--gb-scene-text);
}

.gb-site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--gb-space-xs) var(--gb-space-m);
	padding-block: var(--gb-space-xs);
}

/* ---------- Brand ---------- */

.gb-site-header__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	min-block-size: 2.75rem;
	color: inherit;
	font-family: var(--gb-font-display);
	font-size: var(--gb-step-2);
	font-weight: var(--gb-weight-bold);
	line-height: 1;
	text-decoration: none;
}

/* The logo symbol next to the name (sheen off at this small size). */
.gb-site-header__mark {
	--gb-mark-sheen: transparent;

	flex: none;
	inline-size: 1.9em;
	block-size: 1.9em;
}

/* ---------- Navigation ---------- */

.gb-site-header__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gb-space-xs) var(--gb-space-m);
}

.gb-site-header__menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gb-space-3xs) var(--gb-space-s);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gb-site-header__menu a {
	position: relative;
	display: inline-flex;
	align-items: center;
	/* 44px target for touch (WCAG 2.5.5 / 2.5.8). */
	min-block-size: 2.75rem;
	color: var(--gb-scene-text);
	text-decoration: none;
}

/* Turquoise underline grows from the reading start on hover/focus. */
.gb-site-header__menu a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0.45rem;
	block-size: 2px;
	border-radius: 2px;
	background-color: var(--gb-primary);
	scale: 0 1;
	transform-origin: var(--gb-underline-origin, right);
	transition: scale var(--gb-duration-base) var(--gb-ease-out);
}

[dir="ltr"] .gb-site-header__menu a::after {
	--gb-underline-origin: left;
}

.gb-site-header__menu a:hover::after,
.gb-site-header__menu a:focus-visible::after,
.gb-site-header__menu .current-menu-item > a::after {
	scale: 1 1;
}

/*
 * An item with a small list under it (revision 9: «أعمالنا» → «كل أعمالنا»,
 * «المقالات»). Wide screens: the list drops under the item with the pointer
 * over it, the keyboard's focus inside it, or its arrow button pressed
 * (touch screens). Narrow screens: always open, indented (below).
 */
.gb-site-header__has-sub {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.1rem;
}

.gb-site-header__sub-toggle {
	display: inline-grid;
	place-items: center;
	inline-size: 1.6rem;
	block-size: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--gb-scene-text);
	cursor: pointer;
}

.gb-site-header__sub-toggle[hidden] {
	display: none;
}

.gb-site-header__sub-toggle svg {
	inline-size: 1rem;
	block-size: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: rotate var(--gb-duration-fast) var(--gb-ease-out);
}

.gb-site-header__has-sub[data-gb-sub-open] .gb-site-header__sub-toggle svg {
	rotate: 180deg;
}

.gb-site-header__sub {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gb-site-header__sub a::after {
	display: none;
}

@media (min-width: 52.0625rem) {
	.gb-site-header__sub {
		position: absolute;
		z-index: 2;
		inset-block-start: 100%;
		inset-inline-start: -0.75rem;
		min-inline-size: 11rem;
		padding: 0.4rem;
		border: 1px solid var(--gb-color-turquoise-a20);
		border-radius: var(--gb-radius-m);
		background-color: var(--gb-scene-bg);
		box-shadow: 0 1rem 2rem rgb(0 0 0 / 0.3);
		opacity: 0;
		visibility: hidden;
		translate: 0 -0.3rem;
		transition:
			opacity var(--gb-duration-fast) linear,
			translate var(--gb-duration-fast) var(--gb-ease-out),
			visibility 0s linear var(--gb-duration-fast);
	}

	.gb-site-header__has-sub:hover > .gb-site-header__sub,
	.gb-site-header__has-sub:focus-within > .gb-site-header__sub,
	.gb-site-header__has-sub[data-gb-sub-open] > .gb-site-header__sub {
		opacity: 1;
		visibility: visible;
		translate: 0 0;
		transition:
			opacity var(--gb-duration-fast) linear,
			translate var(--gb-duration-fast) var(--gb-ease-out);
	}

	/* Escape closed it (header.js): stays closed until the pointer / focus leave the item. */
	.gb-site-header__has-sub[data-gb-sub-shut] > .gb-site-header__sub {
		opacity: 0;
		visibility: hidden;
	}

	.gb-site-header__sub a {
		display: flex;
		padding-inline: 0.75rem;
		border-radius: var(--gb-radius-s, 0.4rem);
		white-space: nowrap;
	}

	.gb-site-header__sub a:hover,
	.gb-site-header__sub a:focus-visible {
		background-color: var(--gb-color-turquoise-a10);
	}

	.gb-site-header__sub .current-menu-item > a {
		color: var(--gb-primary);
	}
}

.gb-site-header__cta {
	min-block-size: 2.75rem;
	padding-inline: var(--gb-space-s);
	font-size: var(--gb-step--1);
}

/*
 * Stage 8: the other language — a small outlined pill with a globe: «EN» on
 * the Arabic site, «عربي» on the English one (its full name for screen
 * readers). Small on purpose: the header keeps its one line from 1024 px.
 */
.gb-site-header__lang {
	--gb-icon-size: 1.05rem;

	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	min-block-size: 2.75rem;
	padding-inline: 0.6em;
	border: 1px solid var(--gb-color-turquoise-a35);
	border-radius: var(--gb-radius-pill);
	color: var(--gb-scene-text);
	font-size: var(--gb-step--1);
	font-weight: var(--gb-weight-bold);
	line-height: 1;
	text-decoration: none;
	transition:
		border-color var(--gb-duration-fast) linear,
		background-color var(--gb-duration-fast) linear;
}

.gb-site-header__lang:hover {
	border-color: var(--gb-primary);
	background-color: var(--gb-color-turquoise-a10);
}

.gb-site-header__lang .gb-icon {
	fill: none;
	stroke: var(--gb-primary);
	stroke-width: 1.6;
}

/* The switch belongs with the button: a smaller gap between them than between the menu and the switch. */
.gb-site-header__lang + .gb-site-header__cta {
	margin-inline-start: calc(var(--gb-space-xs) - var(--gb-space-m));
}

/* English: the name is longer in Latin letters — one step smaller, so the bar keeps one line from about 1200 px. */
html[lang^="en"] .gb-site-header__brand {
	font-size: var(--gb-step-1);
}

/* «Growth Beginning» in the logo's lettering: as tall as the typed name it replaced (inc/brand-name.php). */
.gb-site-header__name.gb-wordmark--en {
	--gb-wordmark-size-en: 0.95em;
}

/* ---------- Mobile toggle (enhanced only) ---------- */

.gb-site-header__toggle {
	display: inline-grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	border: 1px solid var(--gb-color-turquoise-a35);
	border-radius: var(--gb-radius-m);
	background-color: transparent;
	color: var(--gb-scene-text);
	cursor: pointer;
	--gb-icon-size: 1.35rem;
}

/* Author display rules would otherwise override the UA [hidden] rule. */
.gb-site-header__toggle[hidden],
.gb-site-header__toggle-icon--close {
	display: none;
}

.gb-site-header__toggle[aria-expanded="true"] .gb-site-header__toggle-icon--open {
	display: none;
}

.gb-site-header__toggle[aria-expanded="true"] .gb-site-header__toggle-icon--close {
	display: block;
}

@media (max-width: 52rem) {
	/* Enhanced: the navigation becomes a panel that drops under the bar. */
	[data-gb-nav-ready] .gb-site-header__nav {
		position: absolute;
		inset-block-start: 100%;
		inset-inline: 0;
		flex-direction: column;
		align-items: stretch;
		gap: var(--gb-space-s);
		padding-block: var(--gb-space-s) var(--gb-space-m);
		padding-inline: var(--gb-gutter);
		border-block-end: 1px solid var(--gb-color-turquoise-a20);
		background-color: var(--gb-scene-bg);
	}

	[data-gb-nav-ready] .gb-site-header__nav:not([data-gb-nav-open]) {
		display: none;
	}

	[data-gb-nav-ready] .gb-site-header__menu {
		flex-direction: column;
		gap: 0;
	}

	[data-gb-nav-ready] .gb-site-header__menu a {
		display: flex;
		font-size: var(--gb-step-1);
		border-block-end: 1px solid var(--gb-color-turquoise-a10);
	}

	[data-gb-nav-ready] .gb-site-header__menu a::after {
		display: none;
	}

	/* The small list under «أعمالنا»: open, indented, no arrow button. */
	.gb-site-header__has-sub {
		display: block;
	}

	.gb-site-header__sub-toggle {
		display: none;
	}

	.gb-site-header__sub {
		padding-inline-start: var(--gb-space-s);
	}

	[data-gb-nav-ready] .gb-site-header__sub a {
		font-size: var(--gb-step-0);
		color: var(--gb-scene-text-muted);
	}

	/* The other language: under the menu, at the reading start. */
	[data-gb-nav-ready] .gb-site-header__lang {
		align-self: flex-start;
	}
}

/* Wide screens never need the toggle, even with the script running. */
@media (min-width: 52.0625rem) {
	.gb-site-header__toggle {
		display: none;
	}
}