/*
 * Desktop header on one line (site's original look only).
 *
 * The theme splits the header into Bootstrap columns 2/8/2, so the menu gets
 * 8/12 of the container however narrow the logo (95px) and the login/cart
 * block are. With «Practitioners» and «Inspiring Careers» in the menu the
 * items no longer fit, and «CONTACT US» and the language switch drop to a
 * second row below the header. Here the row becomes a flex box: logo and
 * tools take their own width, the menu takes the rest, and the menu text
 * steps down on narrower screens.
 *
 * Measured on 2026-10-10 (10 items + language, room = menu width):
 *   English 16px/1px needs 1160, 15px 1053, 14px 952, 12px ~830, 11px ~760,
 *   10.5px 693; Arabic 16px 908, 14px 779, 11px 606. Room is the container
 *   (up to 1480) minus about 335px (English) or 390px (Arabic) for the logo,
 *   login/cart and padding. Re-measure before adding another menu item.
 *
 * Selectors start with `html body` so they outrank the header snippet
 * («الهيدر — القائمة على سطر واحد») that prints later with !important.
 */
@media (min-width: 992px) {
	html body .mo-header-v6 .mo-header-menu > .container {
		display: flex;
		align-items: flex-start;
		flex-wrap: nowrap;
	}

	html body .mo-header-v6 .mo-header-menu > .container::before,
	html body .mo-header-v6 .mo-header-menu > .container::after {
		display: none;
	}

	html body .mo-header-v6 .mo-header-menu .mo-col-logo,
	html body .mo-header-v6 .mo-header-menu .header_tools {
		flex: 0 0 auto;
		width: auto;
		float: none;
	}

	html body .mo-header-v6 .mo-header-menu .mo-col-menu {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
		float: none;
		padding-left: 10px;
		padding-right: 10px;
	}

	/* inline-block items: drop the whitespace between them (about 4px each)
	   and keep the row from wrapping; dropdowns keep normal text flow. */
	html body .mo-header-v6 .mo-col-menu .mo-menu-list > ul {
		white-space: nowrap;
		word-spacing: -6px;
	}

	html body .mo-header-v6 .mo-col-menu .mo-menu-list > ul > li {
		word-spacing: normal;
	}

	html body .mo-header-v6 .mo-col-menu .mo-menu-list > ul > li > ul {
		white-space: normal;
	}

	/* The language switch (WPML) sat almost on «CONTACT US». */
	html body .mo-header-v6 .mo-col-menu .mo-menu-list > ul > li.wpml-ls-item {
		padding-inline-start: 6px;
	}

	html body .mo-header-v6 .header_tools .user-menu-list > ul > li > a {
		white-space: nowrap;
	}
}

/* 992–1199: Bootstrap fixes the container at 970px; let the header use the
   full width, and make the login link and the gaps smaller. */
@media (min-width: 992px) and (max-width: 1199px) {
	html body .mo-header-v6 .mo-header-menu > .container {
		width: auto;
	}

	html body .mo-header-v6 .mo-header-menu .mo-col-menu {
		padding-left: 4px;
		padding-right: 4px;
	}

	html body .mo-header-v6 .header_tools .user-menu-list > ul > li > a {
		font-size: 13px !important;
	}

	html body .mo-header-v6 .mo-col-menu .mo-menu-list > ul > li > a {
		font-size: 11px !important;
		letter-spacing: 0 !important;
		margin-left: 3px !important;
		margin-right: 3px !important;
	}
}

@media (min-width: 992px) and (max-width: 1099px) {
	html body:not(.rtl) .mo-header-v6 .mo-col-menu .mo-menu-list > ul > li > a {
		font-size: 10.5px !important;
	}
}

/* English from 1200px: 12 → 14 → 15 → the theme's 16px. */
@media (min-width: 1200px) and (max-width: 1299px) {
	html body:not(.rtl) .mo-header-v6 .mo-col-menu .mo-menu-list > ul > li > a {
		font-size: 12px !important;
		letter-spacing: 0.3px !important;
		margin-left: 4px !important;
		margin-right: 4px !important;
	}
}

@media (min-width: 1300px) and (max-width: 1399px) {
	html body:not(.rtl) .mo-header-v6 .mo-col-menu .mo-menu-list > ul > li > a {
		font-size: 14px !important;
		letter-spacing: 0.3px !important;
		margin-left: 4px !important;
		margin-right: 4px !important;
	}
}

@media (min-width: 1400px) and (max-width: 1479px) {
	html body:not(.rtl) .mo-header-v6 .mo-col-menu .mo-menu-list > ul > li > a {
		font-size: 15px !important;
		letter-spacing: 0.5px !important;
		margin-left: 5px !important;
		margin-right: 5px !important;
	}
}

@media (min-width: 1480px) {
	html body:not(.rtl) .mo-header-v6 .mo-col-menu .mo-menu-list > ul > li > a {
		font-size: 16px !important;
		letter-spacing: 0.6px !important;
	}
}

/* Arabic is narrower: 14px until there is room for the theme's 16px. */
@media (min-width: 1200px) and (max-width: 1309px) {
	html body.rtl .mo-header-v6 .mo-col-menu .mo-menu-list > ul > li > a {
		font-size: 14px !important;
		letter-spacing: 0.3px !important;
		margin-left: 4px !important;
		margin-right: 4px !important;
	}
}

/*
 * Mobile and tablet menu (below 992px): a full-screen white panel under a
 * dark bar that keeps the white logo and the close button visible. The page
 * behind does not scroll; the panel scrolls when the menu is longer than the
 * screen. header-mobile.js adds body.amira-menu-open, measures the bar
 * (--amira-hdr-h) and opens submenus quickly, one at a time.
 */
@media (max-width: 991px) {
	html.amira-menu-open,
	html.amira-menu-open body {
		overflow: hidden !important;
	}

	body.amira-menu-open .mo-header-v6 .mo-header-menu {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		z-index: 100000 !important;
		background: #141823 !important;
	}

	html body .mo-header-v6 .mo-header-menu .mo-col-menu {
		position: static !important;
	}

	html body .mo-header-v6 .mo-header-menu .mo-menu-list:not(.hidden-xs):not(.hidden-sm) {
		position: fixed !important;
		top: var(--amira-hdr-h, 88px) !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		background: #fff !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		z-index: 99999 !important;
	}

	html body .mo-header-v6 .mo-menu-list > ul {
		width: 100% !important;
		max-width: 640px;
		margin: 0 auto !important;
		background: #fff !important;
		border: 0 !important;
		border-radius: 0 !important;
		padding: 8px 0 32px !important;
		box-shadow: none !important;
	}

	html body .mo-header-v6 .mo-menu-list > ul > li {
		position: relative;
		display: block;
		margin: 0 !important;
		border: 0 !important;
		border-bottom: 1px solid #efe8dc !important;
	}

	html body .mo-header-v6 .mo-header-menu .mo-col-menu .mo-menu-list > ul > li > a {
		display: block;
		padding: 16px 24px !important;
		margin: 0 !important;
		color: #141823 !important;
		background: transparent !important;
		font-size: 15px !important;
		font-weight: 600;
		letter-spacing: 0.5px !important;
		line-height: 1.5 !important;
		text-align: start !important;
	}

	html body .mo-header-v6 .mo-menu-list > ul > li.menu-item-has-children > a {
		padding-inline-end: 72px !important;
	}

	html body .mo-header-v6 .mo-header-menu .mo-col-menu .mo-menu-list > ul > li.current-menu-item > a,
	html body .mo-header-v6 .mo-header-menu .mo-col-menu .mo-menu-list > ul > li.current-menu-ancestor > a,
	html body .mo-header-v6 .mo-header-menu .mo-col-menu .mo-menu-list > ul > li.amira-open > a {
		color: #a8885a !important;
	}

	/* The arrow: a full-height tap area at the end of the row. */
	html body .mo-header-v6 .mo-menu-list > ul > li.menu-item-has-children > .mb-dropdown-icon {
		position: absolute;
		top: 0;
		right: auto !important;
		left: auto !important;
		inset-inline-end: 0 !important;
		width: 60px !important;
		height: 56px !important;
		padding: 0 !important;
		margin: 0 !important;
		border: 0 !important;
		border-inline-start: 1px solid #efe8dc !important;
		background: transparent !important;
		display: flex !important;
		align-items: center;
		justify-content: center;
	}

	html body .mo-header-v6 .mo-menu-list > ul > li.menu-item-has-children > .mb-dropdown-icon::before {
		content: "" !important;
		position: static !important;
		transform: rotate(45deg) translate(-2px, -2px) !important;
		width: 9px;
		height: 9px;
		background: transparent !important;
		border: 0 !important;
		border-right: 2px solid #a8885a !important;
		border-bottom: 2px solid #a8885a !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		font-size: 0 !important;
		transition: transform 0.18s ease;
	}

	html body .mo-header-v6 .mo-menu-list > ul > li.menu-item-has-children > .mb-dropdown-icon::after {
		display: none !important;
	}

	html body .mo-header-v6 .mo-menu-list > ul > li.menu-item-has-children > .mb-dropdown-icon.open::before {
		transform: rotate(-135deg) translate(-2px, -2px) !important;
	}

	/* Submenu: indented on a soft cream background. */
	html body .mo-header-v6 .mo-menu-list > ul > li > ul {
		background: #faf7f2 !important;
		padding: 6px 0 10px !important;
		margin: 0 !important;
		border: 0 !important;
		border-top: 1px solid #efe8dc !important;
		box-shadow: none !important;
	}

	html body .mo-header-v6 .mo-menu-list > ul > li > ul > li {
		border: 0 !important;
		margin: 0 !important;
	}

	html body .mo-header-v6 .mo-header-menu .mo-col-menu .mo-menu-list > ul > li > ul > li > a {
		display: block;
		padding: 11px 24px !important;
		padding-inline-start: 40px !important;
		color: #4a4f5c !important;
		background: transparent !important;
		font-size: 14px !important;
		font-weight: 500;
		letter-spacing: 0.3px !important;
		line-height: 1.6 !important;
		text-align: start !important;
	}

	html body .mo-header-v6 .mo-header-menu .mo-col-menu .mo-menu-list > ul > li > ul > li.current-menu-item > a {
		color: #a8885a !important;
	}

	/* Account, cart and language: a quieter group at the end. */
	html body .mo-header-v6 .mo-menu-list > ul > li.amira-mob-item {
		border-bottom: 0 !important;
	}

	html body .mo-header-v6 .mo-menu-list > ul > li.amira-mob-account,
	html body .mo-header-v6 .mo-menu-list > ul > li.amira-mob-login {
		margin-top: 10px !important;
		padding-top: 8px;
		border-top: 0 !important;
	}

	html body .mo-header-v6 .mo-header-menu .mo-col-menu .mo-menu-list > ul > li.amira-mob-item > a {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
		font-size: 14px !important;
		color: #6b6f7a !important;
	}

	html body .mo-header-v6 .mo-menu-list > ul > li.amira-mob-item .cart_total {
		background: #141823 !important;
		color: #fff !important;
	}

	html body .mo-header-v6 .mo-menu-list > ul > li.wpml-ls-item {
		border-bottom: 0 !important;
		padding: 14px 24px 8px;
		text-align: start !important;
	}

	html body .mo-header-v6 .mo-header-menu .mo-col-menu .mo-menu-list > ul > li.wpml-ls-item > a {
		display: inline-block;
		padding: 6px 20px !important;
		border: 1px solid #c1aa89;
		border-radius: 20px;
		font-size: 14px !important;
		color: #141823 !important;
	}
}