/* ==========================================================================
   NANMOW child theme — header, mobile drawer & footer (v1.10.0)
   Tokens: Elementor Kit variables (--e-global-*). Logical properties (RTL/LTR).
   Light header/footer surfaces: the supplied logo artwork is dark and is never
   recolored (D-055).
   ========================================================================== */

:root {
	--nm-ease: cubic-bezier(.2, .8, .2, 1);
	--nm-header-h: 80px;
	--nm-ink: var(--e-global-color-text, #071F25);
}

/* ---------- Header ---------- */
.nm-header {
	position: relative;
	z-index: 100;
	background: #fff;
	border-block-end: 1px solid transparent;
	transition: box-shadow .35s var(--nm-ease), border-color .35s var(--nm-ease);
}
.nm-has-sticky-header .nm-header { position: sticky; inset-block-start: 0; }
.admin-bar.nm-has-sticky-header .nm-header { inset-block-start: 32px; }
.nm-header.is-scrolled {
	border-block-end-color: var(--e-global-color-nmneu20);
	box-shadow: 0 8px 24px rgb(11 63 74 / .08);
}

.nm-header__inner {
	max-inline-size: 1200px;
	margin-inline: auto;
	padding-inline: 32px;
	block-size: var(--nm-header-h);
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 32px;
}
.nm-header__brand { display: flex; align-items: center; }
.nm-header__brand .custom-logo-link { display: block; line-height: 0; }
.nm-header__brand img,
.nm-header__brand .custom-logo {
	display: block;
	block-size: 46px;
	inline-size: auto;
	max-inline-size: none;
}
.nm-header__name,
.nm-footer__name {
	font: 700 24px/1 var(--e-global-typography-primary-font-family), sans-serif;
	color: var(--e-global-color-primary);
	text-decoration: none;
}

/* Desktop navigation */
.nm-nav { justify-self: center; }
.nm-nav__list,
.nm-cta-menu,
.nm-drawer__list,
.nm-footer__list,
.nm-footer__legal { list-style: none; margin: 0; padding: 0; }
.nm-nav__list { display: flex; align-items: center; gap: 30px; }
.nm-nav__list a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	color: var(--nm-ink);
	font: 500 16px/1.4 var(--e-global-typography-text-font-family), sans-serif;
	text-decoration: none;
	transition: color .2s var(--nm-ease);
}
.nm-nav__list a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 8px;
	block-size: 2px;
	border-radius: 2px;
	background: var(--e-global-color-accent);
	transform: scaleX(0);
	transform-origin: 100% 50%; /* grows from the reading start */
	transition: transform .3s var(--nm-ease);
}
[dir="ltr"] .nm-nav__list a::after { transform-origin: 0 50%; }
.nm-nav__list a[href]:hover { color: var(--e-global-color-primary); }
.nm-nav__list a[href]:hover::after,
.nm-nav__list .current-menu-item > a::after { transform: scaleX(1); }

/* Pending destinations (menu items with class nm-disabled) */
.nm-link-pending { cursor: default; color: var(--e-global-color-nmneu60) !important; }
.nm-link-pending::after { display: none; }

/* Actions: language slot + CTA + burger */
.nm-header__actions { display: flex; align-items: center; gap: 12px; }
.nm-lang:empty,
.nm-drawer__lang:empty,
.nm-footer__lang:empty { display: none; }

/* ---------- Language switcher AR | EN (1.9.0) ----------
   Compact text control: current language in teal with an accent underline (not colour
   alone), the other muted; 44px targets; never competes with the CTA. */
.nm-lang__switch { display: inline-flex; align-items: center; }
.nm-lang__opt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
	min-block-size: 44px;
	padding-inline: 6px;
	border-radius: 8px;
	color: var(--nm-neutral-600, #4a6266);
	font: 700 14px/1 "Manrope", var(--e-global-typography-text-font-family), sans-serif;
	letter-spacing: .08em;
	text-decoration: none;
	transition: color .2s var(--nm-ease);
}
.nm-lang__opt > span[aria-hidden] { padding-block: 5px; box-shadow: inset 0 -2px 0 transparent; transition: box-shadow .2s var(--nm-ease); }
.nm-lang__opt.is-current { color: var(--nm-teal-900, #0b3f4a); }
.nm-lang__opt.is-current > span[aria-hidden] { box-shadow: inset 0 -2px 0 var(--e-global-color-accent, #ff5a1f); }
.nm-lang__opt:not(.is-current):hover { color: var(--nm-teal-900, #0b3f4a); }
.nm-lang__opt:not(.is-current):hover > span[aria-hidden] { box-shadow: inset 0 -2px 0 var(--nm-neutral-200, #e3eaeb); }
.nm-lang__opt:focus-visible { outline: 3px solid var(--e-global-color-accent, #ff5a1f); outline-offset: 2px; }
.nm-lang__sep { inline-size: 1px; block-size: 16px; background: var(--nm-neutral-200, #e3eaeb); }
.nm-drawer__lang { margin-block-start: 24px; padding-block-start: 16px; border-block-start: 1px solid var(--nm-neutral-200, #e3eaeb); }
.nm-drawer__lang .nm-lang__opt { min-inline-size: 56px; min-block-size: 48px; font-size: 16px; }
@media (max-width: 767px) { .nm-header__actions > .nm-lang { display: none; } }
@media (forced-colors: active) { .nm-lang__opt.is-current > span[aria-hidden] { box-shadow: none; text-decoration: underline; } }
@media (prefers-reduced-motion: reduce) { .nm-lang__opt, .nm-lang__opt > span { transition: none; } }

/* ---------- English (LTR) typography: Manrope, self-hosted (1.9.0) ---------- */
html[lang^="en"] { --nm-font-ar: "Manrope"; }
html[lang^="en"] .elementor-kit-7 {
	--e-global-typography-primary-font-family: "Manrope";
	--e-global-typography-secondary-font-family: "Manrope";
	--e-global-typography-text-font-family: "Manrope";
	--e-global-typography-accent-font-family: "Manrope";
	--e-global-typography-nmdisp-font-family: "Manrope";
	--e-global-typography-nmh1-font-family: "Manrope";
	--e-global-typography-nmh2-font-family: "Manrope";
	--e-global-typography-nmh3-font-family: "Manrope";
	--e-global-typography-nmh4-font-family: "Manrope";
	--e-global-typography-nmlead-font-family: "Manrope";
	--e-global-typography-nmbody-font-family: "Manrope";
	--e-global-typography-nmsmall-font-family: "Manrope";
	--e-global-typography-nmeyebrow-font-family: "Manrope";
	font-family: "Manrope", sans-serif;
}
html[lang^="en"] .elementor-kit-7 :is(h1, h2, h3, h4, h5, h6, label, button, input, select, textarea, .elementor-button) { font-family: "Manrope", sans-serif; }
/* ---------- English composition layer (1.10.0) ----------
   English is set natively instead of inheriting Arabic proportions:
   - Latin display type needs tighter leading and slight negative tracking;
   - Manrope sets wider than IBM Plex Sans Arabic at the same size, so English heading measures
     are wider, and headings balance their lines instead of stranding a word;
   - Arabic fonts have no italic, so browser/theme italics (figcaption) never showed in Arabic;
     English keeps the same upright voice.
   English diagram geometry (LTR flow, label positions) is built into the English pages
   (NM_I18N 1.1.0 + website/i18n/en-svg.json); nothing here repositions SVG labels. */
html[lang^="en"] .elementor-kit-7 :is(h1, h2, h3, h4, .nm-display, .nm-h1, .nm-h2, .nm-h3, .nm-h4) { text-wrap: balance; }
html[lang^="en"] .elementor-kit-7 :is(p, li, figcaption) { text-wrap: pretty; }
html[lang^="en"] .elementor-kit-7 :is(h1, .nm-display, .nm-h1) { line-height: 1.12; letter-spacing: -0.02em; }
html[lang^="en"] .elementor-kit-7 :is(h2, .nm-h2) { line-height: 1.18; letter-spacing: -0.015em; }
html[lang^="en"] .elementor-kit-7 :is(h3, h4, .nm-h3, .nm-h4) { line-height: 1.32; }
html[lang^="en"] [id^="nm-home"] .nm-h2 { max-inline-size: 22em; }
html[lang^="en"] figcaption { font-style: normal; }
@media (min-width: 768px) {
	/* The English hero line is two short sentences: two lines from tablet to wide desktop, close
	   to the Arabic display scale (1280×620 → CTA at 538px). */
	html[lang^="en"] section#nm-home-hero .nm-display { font-size: clamp(44px, 12px + 3vw, 56px); line-height: 1.1; }
}
/* English header: six longer nav labels plus the full CTA. Labels never wrap; between 1025 and
   1279px the spacing tightens, and below 1180px the CTA uses its approved short form
   "Discuss Growth" (the menu title carries the full label, with "Your Brand’s" in .nm-cta-x). */
html[lang^="en"] .nm-nav__list a { white-space: nowrap; }
@media (min-width: 1025px) and (max-width: 1279px) {
	html[lang^="en"] .nm-nav__list { gap: 18px; }
	html[lang^="en"] .nm-header__inner { gap: 20px; }
}
@media (min-width: 1025px) and (max-width: 1179px) {
	html[lang^="en"] .nm-header .nm-cta-x { display: none; }
}
@media (max-width: 359px) {
	/* "Discuss Your Brand’s Growth" stays on one line on the narrowest phones. */
	html[lang^="en"] .nm-btn { padding-inline: 16px; font-size: 17px; }
}

.nm-cta-menu { display: flex; }
.nm-cta-menu a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 44px;
	padding-inline: 22px;
	border-radius: 12px;
	background: var(--e-global-color-accent);
	color: var(--nm-ink);
	font: 700 15px/1.2 var(--e-global-typography-text-font-family), sans-serif;
	text-decoration: none;
	transition: background-color .25s var(--nm-ease), color .25s var(--nm-ease), transform .25s var(--nm-ease);
}
.nm-cta-menu a[href]:hover { background: var(--e-global-color-nmorg70); color: #fff; transform: translateY(-1px); }

/* ID-scoped: the Elementor Kit styles every <button> as a brand button; these two are
   icon controls and must stay neutral in every state. */
#nm-header .nm-burger {
	display: none;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	min-block-size: 0;
	padding: 0;
	border: 1px solid var(--e-global-color-nmneu20);
	border-radius: 12px;
	background: #fff;
	color: var(--e-global-color-primary);
	box-shadow: none;
	cursor: pointer;
}
#nm-header .nm-burger:hover,
#nm-header .nm-burger:focus,
#nm-header .nm-burger:active,
#nm-drawer .nm-drawer__close:hover,
#nm-drawer .nm-drawer__close:focus,
#nm-drawer .nm-drawer__close:active {
	background: var(--e-global-color-nmneu05);
	border-color: var(--e-global-color-nmneu20);
	color: var(--e-global-color-primary);
}
.nm-burger__bar,
.nm-burger__bar::before,
.nm-burger__bar::after {
	display: block;
	inline-size: 18px;
	block-size: 2px;
	border-radius: 2px;
	background: var(--e-global-color-primary);
}
.nm-burger__bar { position: relative; }
.nm-burger__bar::before,
.nm-burger__bar::after { content: ""; position: absolute; inset-inline-start: 0; }
.nm-burger__bar::before { transform: translateY(-6px); }
.nm-burger__bar::after { transform: translateY(6px); }

/* ---------- Mobile drawer ---------- */
.nm-backdrop {
	position: fixed;
	inset: 0;
	z-index: 105;
	background: rgb(7 31 37 / .45);
	opacity: 0;
	transition: opacity .28s ease;
}
.nm-backdrop.is-open { opacity: 1; transition-duration: .4s; }
.nm-backdrop[hidden],
.nm-drawer[hidden] { display: none; }

.nm-drawer {
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	z-index: 110;
	inline-size: min(88vw, 400px);
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: 0 0 40px rgb(7 31 37 / .18);
	transform: translateX(100%);
	transition: transform .3s cubic-bezier(.4, 0, .2, 1); /* closing: quicker */
	overflow-y: auto;
	overscroll-behavior: contain;
}
[dir="ltr"] .nm-drawer { transform: translateX(-100%); }
.nm-drawer.is-open,
[dir="ltr"] .nm-drawer.is-open { transform: none; transition: transform .44s cubic-bezier(.32, .72, 0, 1); } /* opening: no overshoot */

/* Drawer content: items follow the panel in reading order, CTA last */
.nm-drawer__list > li,
.nm-drawer .nm-cta-menu--panel {
	opacity: 0;
	transform: translateX(16px);
	transition: opacity .15s ease, transform .15s ease;
}
[dir="ltr"] .nm-drawer__list > li,
[dir="ltr"] .nm-drawer .nm-cta-menu--panel { transform: translateX(-16px); }
.nm-drawer.is-open .nm-drawer__list > li,
.nm-drawer.is-open .nm-cta-menu--panel {
	opacity: 1;
	transform: none;
	transition: opacity .4s var(--nm-ease), transform .5s var(--nm-ease);
	transition-delay: calc(.12s + var(--i, 0) * .045s);
}
.nm-drawer.is-open .nm-cta-menu--panel { transition-delay: calc(.2s + var(--nm-n, 6) * .045s); }

.nm-drawer__top {
	display: flex;
	justify-content: flex-end;
	padding: 16px 16px 0;
	padding-block-start: calc(16px + env(safe-area-inset-top));
}
#nm-drawer .nm-drawer__close {
	display: inline-grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	min-block-size: 0;
	padding: 0;
	border: 1px solid var(--e-global-color-nmneu20);
	border-radius: 12px;
	background: #fff;
	color: var(--e-global-color-primary);
	box-shadow: none;
	cursor: pointer;
}
.nm-drawer__inner {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: 12px 24px calc(28px + env(safe-area-inset-bottom));
}
.nm-drawer__list li + li { border-block-start: 1px solid var(--e-global-color-nmneu20); }
.nm-drawer__list a {
	display: flex;
	align-items: center;
	min-block-size: 56px;
	color: var(--e-global-color-primary);
	font: 700 20px/1.4 var(--e-global-typography-primary-font-family), sans-serif;
	text-decoration: none;
}
.nm-cta-menu--panel li { flex: 1 1 auto; }
.nm-cta-menu--panel a { inline-size: 100%; min-block-size: 56px; font-size: 18px; }
body.nm-drawer-open { overflow: hidden; }
/* Homepage mobile sticky CTA must not compete with the open drawer */
body.nm-drawer-open .nm-sticky-cta { visibility: hidden !important; opacity: 0 !important; }

/* Focus */
.nm-header a:focus-visible,
.nm-header button:focus-visible,
.nm-drawer a:focus-visible,
.nm-drawer button:focus-visible,
.nm-footer a:focus-visible {
	outline: 3px solid var(--e-global-color-accent);
	outline-offset: 3px;
	border-radius: 6px;
}

@media (max-width: 1024px) {
	.nm-nav { display: none; }
	#nm-header .nm-burger { display: inline-grid; }
	.nm-header__inner { grid-template-columns: auto 1fr; }
	.nm-header__actions { justify-self: end; }
}
@media (max-width: 782px) {
	.admin-bar.nm-has-sticky-header .nm-header { inset-block-start: 46px; }
}
@media (max-width: 600px) {
	.admin-bar.nm-has-sticky-header .nm-header { inset-block-start: 0; }
}
@media (max-width: 767px) {
	:root { --nm-header-h: 64px; }
	.nm-header__inner { padding-inline: 16px; gap: 12px; }
	.nm-header__brand img,
	.nm-header__brand .custom-logo { block-size: 38px; }
	.nm-header__actions > .nm-cta-menu { display: none; }
}

/* ---------- Footer ---------- */
.nm-footer {
	background: var(--e-global-color-nmneu05);
	color: var(--nm-ink);
	font: 400 16px/1.7 var(--e-global-typography-text-font-family), sans-serif;
}
.nm-footer__inner {
	max-inline-size: 1200px;
	margin-inline: auto;
	padding: 80px 32px 56px;
	display: grid;
	grid-template-columns: 5fr 3fr 4fr;
	gap: 48px;
}
.nm-footer__brand .custom-logo-link { display: inline-block; line-height: 0; }
.nm-footer__brand img,
.nm-footer__brand .custom-logo { display: block; block-size: 54px; inline-size: auto; max-inline-size: none; }
.nm-footer__line { margin-block-start: 20px; }
.nm-footer__line p {
	margin: 0;
	color: var(--e-global-color-primary);
	font: 500 19px/1.6 var(--e-global-typography-text-font-family), sans-serif;
}
.nm-footer__list { display: grid; gap: 12px; }
.nm-footer__list a,
.nm-footer__widget a { color: var(--e-global-color-primary); text-decoration: none; }
/* Calm link states: underline fades in, no movement */
.nm-footer__list a[href],
.nm-footer__widget a,
.nm-footer__legal a[href] {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: transparent;
	text-underline-offset: 6px;
	transition: color .2s var(--nm-ease), text-decoration-color .2s var(--nm-ease);
}
.nm-footer__list a[href]:hover,
.nm-footer__widget a:hover,
.nm-footer__legal a[href]:hover { text-decoration-color: currentColor; }
.nm-footer__list a[href]:hover,
.nm-footer__widget a:hover,
.nm-footer__legal a[href]:hover { color: var(--e-global-color-nmorg70); }
.nm-footer__widget p { margin: 0 0 10px; }
.nm-footer__label { margin: 0 0 8px; font-weight: 700; color: var(--e-global-color-primary); }
.nm-footer__bottom {
	max-inline-size: 1200px;
	margin-inline: auto;
	padding: 22px 32px calc(22px + env(safe-area-inset-bottom));
	border-block-start: 1px solid var(--e-global-color-nmneu20);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	font-size: 15px;
	color: var(--e-global-color-nmneu60);
}
.nm-footer__copy { margin: 0; }
.nm-footer__end { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.nm-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.nm-footer__legal a { color: var(--e-global-color-nmneu60); text-decoration: none; }

@media (max-width: 1024px) {
	.nm-footer__inner { grid-template-columns: 1fr 1fr; }
	.nm-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
	.nm-footer__inner { grid-template-columns: 1fr; padding: 56px 16px 36px; gap: 32px; }
	.nm-footer__brand img,
	.nm-footer__brand .custom-logo { block-size: 46px; }
	.nm-footer__bottom { padding-inline: 16px; padding-block-end: calc(28px + env(safe-area-inset-bottom)); flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	.nm-header, .nm-header *, .nm-drawer, .nm-drawer *, .nm-backdrop, .nm-footer * { transition: none !important; }
	.nm-drawer__list > li, .nm-drawer .nm-cta-menu--panel { opacity: 1; transform: none; }
}

/* ---------- Floating WhatsApp contact (all visitor pages, D-099 · v2) ----------
   NANMOW treatment: dark-teal rounded square, white hairline, WhatsApp green only on the glyph.
   Bottom inline-end corner (left in RTL), safe-area aware; lifts above the homepage mobile
   sticky CTA; hidden while the drawer is open, and on phones while the /start/ form is on screen
   or a form field has focus (nm-start.js adds body.nm-form-in-view). */
body a.nm-wa {
	position: fixed;
	z-index: 95;
	inset-inline-end: calc(16px + env(safe-area-inset-left, 0px));
	inset-block-end: calc(16px + env(safe-area-inset-bottom, 0px));
	display: grid;
	place-items: center;
	inline-size: 54px;
	block-size: 54px;
	border-radius: 16px;
	border: 1px solid rgb(255 255 255 / .16);
	background: var(--e-global-color-primary, #0b3f4a);
	color: #25d366;
	box-shadow: 0 1px 0 rgb(255 255 255 / .06) inset, 0 12px 28px rgb(7 31 37 / .22), 0 2px 6px rgb(7 31 37 / .16);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition: transform .2s var(--nm-ease), box-shadow .2s var(--nm-ease), background-color .2s var(--nm-ease), opacity .2s linear, visibility .2s linear, inset-block-end .3s var(--nm-ease);
}
html[dir="ltr"] body a.nm-wa { inset-inline-end: calc(16px + env(safe-area-inset-right, 0px)); }
body a.nm-wa:hover, body a.nm-wa:focus { color: #25d366; background: #0e4854; }
body a.nm-wa:active { transform: scale(.95); box-shadow: 0 6px 14px rgb(7 31 37 / .2); }
body a.nm-wa:focus-visible { outline: 3px solid var(--e-global-color-accent, #ff5a1f); outline-offset: 3px; }
.nm-wa__icon { inline-size: 26px; block-size: 26px; }
@media (hover: hover) and (pointer: fine) {
	body a.nm-wa:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgb(255 255 255 / .06) inset, 0 16px 32px rgb(7 31 37 / .26), 0 2px 6px rgb(7 31 37 / .16); }
}
@media (min-width: 1024px) {
	body a.nm-wa { inline-size: 52px; block-size: 52px; border-radius: 15px; inset-inline-end: 24px; inset-block-end: 24px; }
	.nm-wa__icon { inline-size: 24px; block-size: 24px; }
}
body.nm-drawer-open a.nm-wa { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 767px) {
	body:has(.nm-sticky-cta.is-visible) a.nm-wa { inset-block-end: calc(84px + env(safe-area-inset-bottom, 0px)); }
	body.nm-form-in-view a.nm-wa,
	body:has(.nm-form :is(input, select, textarea):focus) a.nm-wa { opacity: 0; visibility: hidden; pointer-events: none; }
}
@media print { body a.nm-wa { display: none; } }
@media (prefers-reduced-motion: reduce) { body a.nm-wa { transition: none; } }

/* --------------------------------------------------------------------------
   Colour compatibility (1.7.5). NANMOW is a light-surface identity: it keeps its
   own palette whatever the OS light/dark setting, so native controls, scrollbars
   and autofill never auto-invert (the <meta name="color-scheme"> in functions.php
   covers first paint). Selection is a quiet teal tint, not the UA blue.
   -------------------------------------------------------------------------- */
:root { color-scheme: only light; }
::selection { background: rgb(11 63 74 / .16); color: var(--nm-ink-950, #071f25); }
:is(.nm-sticky-cta, .nm-wa) ::selection { background: rgb(255 255 255 / .28); color: #fff; }

/* Forced colours (Windows contrast themes): the UA removes brand fills, so filled
   buttons get a system-colour outline, focus uses Highlight, and the logo keeps its
   own colours on a Canvas plate instead of being recoloured. */
@media (forced-colors: active) {
	.nm-cta-menu a, .nm-sticky-cta a, .e-con > a:not(.nm-link, .nm-link-dark), .e-button-base:not(.nm-link, .nm-link-dark), body a.nm-wa { border: 2px solid ButtonText; }
	body a.nm-wa { color: ButtonText; }
	:focus-visible { outline: 3px solid Highlight !important; outline-offset: 2px; }
	.custom-logo { forced-color-adjust: none; background: #fff; border-radius: 4px; }
}