/* ==========================================================
   3RABTOON HEADER
========================================================== */

:root {
	--rabtoon-navy: #001A46;
	--rabtoon-navy-hover: #00265F;
	--rabtoon-orange: #FF7E33;
	--rabtoon-orange-hover: #F06F2B;

	--rabtoon-white: #FFFFFF;
	--rabtoon-bg-soft: #F5F7FA;

	--rabtoon-text: #111827;
	--rabtoon-muted: #6B7280;

	--rabtoon-border: #E7EBF0;

	--rabtoon-shadow:
		0 16px 40px rgba(0, 26, 70, 0.12);
}


/* ==========================================================
   RESET
========================================================== */

.rabtoon-site-header,
.rabtoon-site-header * {
	box-sizing: border-box;
}

.rabtoon-site-header {
	position: sticky;
	top: 0;

	z-index: 9999;

	width: 100%;

	background: var(--rabtoon-white);

	border-bottom: 1px solid var(--rabtoon-border);
}

.admin-bar .rabtoon-site-header {
	top: 32px;
}


/* ==========================================================
   MAIN HEADER
========================================================== */

.rabtoon-header-main {
	background: #fff;

	border-bottom: 1px solid var(--rabtoon-border);
}

.rabtoon-header-container {
	width: min(1320px, calc(100% - 40px));

	min-height: 88px;

	margin-inline: auto;

	display: flex;
	align-items: center;

	gap: 18px;
}


/* ==========================================================
   LOGO
========================================================== */

.rabtoon-header-logo {
	flex: 0 0 auto;
}

.rabtoon-header-logo a {
	display: flex;
	align-items: center;

	text-decoration: none;
}

.rabtoon-header-logo img {
	display: block;

	width: auto;
	height: 64px;

	max-width: 220px;

	object-fit: contain;
}


/* ==========================================================
   CATEGORIES BUTTON
========================================================== */

.rabtoon-header-categories {
	position: relative;

	flex: 0 0 205px;
}

.rabtoon-categories-trigger {
	width: 100%;
	height: 50px;

	padding-inline: 18px;

	border: 0;
	border-radius: 999px;

	background: var(--rabtoon-navy);
	color: #fff;

	display: flex;
	align-items: center;

	gap: 11px;

	font: inherit;
	font-size: 14px;
	font-weight: 700;

	cursor: pointer;

	transition:
		background 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.rabtoon-categories-trigger:hover {
	background: var(--rabtoon-navy-hover);

	box-shadow:
		0 8px 22px rgba(0, 26, 70, 0.18);
}

.rabtoon-categories-trigger:active {
	transform: translateY(1px);
}


/* ==========================================================
   GRID ICON
========================================================== */

.rabtoon-grid-icon {
	width: 18px;
	height: 18px;

	flex: 0 0 18px;

	display: grid;

	grid-template-columns: repeat(3, 1fr);

	gap: 2.5px;
}

.rabtoon-grid-icon span {
	display: block;

	border: 1.5px solid currentColor;

	border-radius: 2px;
}


/* ==========================================================
   CATEGORIES ARROW
========================================================== */

.rabtoon-chevron {
	margin-inline-start: auto;

	transition: transform 0.2s ease;
}

.rabtoon-header-categories.is-open .rabtoon-chevron {
	transform: rotate(180deg);
}


/* ==========================================================
   CATEGORIES DROPDOWN
========================================================== */

.rabtoon-categories-dropdown {
	position: absolute;

	top: calc(100% + 12px);
	inset-inline-start: 0;

	width: 220px;

	padding: 8px;

	background: #fff;

	border: 1px solid var(--rabtoon-border);

	border-radius: 18px;

	box-shadow: var(--rabtoon-shadow);

	opacity: 0;
	visibility: hidden;

	transform: translateY(8px);

	pointer-events: none;

	transition:
		opacity 0.18s ease,
		visibility 0.18s ease,
		transform 0.18s ease;
}

.rabtoon-header-categories.is-open .rabtoon-categories-dropdown {
	opacity: 1;
	visibility: visible;

	transform: translateY(0);

	pointer-events: auto;
}


/* ==========================================================
   CATEGORIES MENU
========================================================== */

.rabtoon-categories-menu,
.rabtoon-categories-menu ul {
	margin: 0;
	padding: 0;

	list-style: none;
}

.rabtoon-categories-menu li {
	margin: 0;
	padding: 0;
}

.rabtoon-categories-menu a {
	display: block;

	width: 100%;

	padding: 12px 14px;

	border-radius: 12px;

	color: var(--rabtoon-text);

	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;

	text-decoration: none;

	text-align: start;

	transition:
		background 0.18s ease,
		color 0.18s ease;
}

.rabtoon-categories-menu a:hover,
.rabtoon-categories-menu .current-menu-item > a,
.rabtoon-categories-menu .current-menu-ancestor > a {
	background: #FFF4EE;

	color: var(--rabtoon-orange);
}


/* ==========================================================
   SEARCH
========================================================== */

.rabtoon-header-search {
	flex: 1 1 520px;

	min-width: 180px;
}

.rabtoon-header-search form {
	position: relative;

	width: 100%;
}

.rabtoon-header-search input {
	width: 100%;
	height: 50px;

	margin: 0;

	padding-inline-start: 20px;
	padding-inline-end: 56px;

	border: 1px solid transparent;

	border-radius: 999px;

	outline: none;

	background: var(--rabtoon-bg-soft);

	color: var(--rabtoon-text);

	font: inherit;
	font-size: 14px;

	box-shadow: none;

	transition:
		border-color 0.2s ease,
		background 0.2s ease,
		box-shadow 0.2s ease;
}

.rabtoon-header-search input::placeholder {
	color: #8A94A4;

	opacity: 1;
}

.rabtoon-header-search input:hover {
	background: #F1F3F6;
}

.rabtoon-header-search input:focus {
	background: #fff;

	border-color: rgba(255, 126, 51, 0.45);

	box-shadow:
		0 0 0 4px rgba(255, 126, 51, 0.08);
}

.rabtoon-search-submit {
	position: absolute;

	top: 50%;

	inset-inline-end: 14px;

	transform: translateY(-50%);

	width: 38px;
	height: 38px;

	padding: 0;

	border: 0;

	border-radius: 50%;

	background: transparent;

	color: var(--rabtoon-navy);

	display: flex;
	align-items: center;
	justify-content: center;

	cursor: pointer;

	transition:
		background 0.18s ease,
		color 0.18s ease;
}

.rabtoon-search-submit:hover {
	background: #fff;

	color: var(--rabtoon-orange);
}


/* ==========================================================
   HEADER ACTIONS
========================================================== */

.rabtoon-header-actions {
	flex: 0 0 auto;

	display: flex;
	align-items: center;

	gap: 10px;
}


/* ==========================================================
   ACCOUNT BUTTON
========================================================== */

.rabtoon-account-button {
	height: 48px;

	padding-inline: 16px;

	border: 1px solid var(--rabtoon-border);

	border-radius: 999px;

	background: #fff;

	color: var(--rabtoon-navy);

	display: inline-flex;
	align-items: center;

	gap: 8px;

	font-size: 14px;
	font-weight: 700;

	text-decoration: none;

	white-space: nowrap;

	transition:
		background 0.18s ease,
		color 0.18s ease,
		border-color 0.18s ease;
}

.rabtoon-account-button:hover {
	background: #F9FAFB;

	color: var(--rabtoon-orange);

	border-color: #D9E0E8;
}


/* ==========================================================
   PUBLISH BUTTON
========================================================== */

.rabtoon-publish-button {
	height: 48px;

	padding-inline: 18px;

	border-radius: 999px;

	background: var(--rabtoon-orange);

	color: #fff;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 7px;

	font-size: 14px;
	font-weight: 800;

	text-decoration: none;

	white-space: nowrap;

	box-shadow:
		0 10px 24px rgba(255, 126, 51, 0.22);

	transition:
		background 0.18s ease,
		box-shadow 0.18s ease,
		transform 0.18s ease;
}

.rabtoon-publish-button:hover {
	background: var(--rabtoon-orange-hover);

	color: #fff;

	box-shadow:
		0 12px 28px rgba(255, 126, 51, 0.28);
}

.rabtoon-publish-button:active {
	transform: translateY(1px);
}


/* ==========================================================
   DESKTOP NAVIGATION
========================================================== */

.rabtoon-navigation-row {
	background: #fff;

	border-bottom: 1px solid var(--rabtoon-border);
}

.rabtoon-navigation-container {
	width: min(1320px, calc(100% - 40px));

	margin-inline: auto;
}

.rabtoon-main-navigation {
	min-height: 58px;

	display: flex;
	align-items: center;
	justify-content: center;
}

.rabtoon-main-menu {
	display: flex;
	align-items: center;
	justify-content: center;

	gap: 6px;

	margin: 0;
	padding: 0;

	list-style: none;
}

.rabtoon-main-menu > li {
	position: relative;

	margin: 0;
}

.rabtoon-main-menu > li > a {
	position: relative;

	min-height: 58px;

	padding-inline: 18px;

	display: flex;
	align-items: center;

	color: var(--rabtoon-text);

	font-size: 14px;
	font-weight: 700;

	text-decoration: none;

	transition: color 0.18s ease;
}

.rabtoon-main-menu > li > a::after {
	content: "";

	position: absolute;

	inset-inline-start: 18px;
	inset-inline-end: 18px;

	bottom: 0;

	height: 2px;

	border-radius: 4px;

	background: var(--rabtoon-orange);

	opacity: 0;

	transform: scaleX(0.6);

	transition:
		opacity 0.18s ease,
		transform 0.18s ease;
}

.rabtoon-main-menu > li:hover > a,
.rabtoon-main-menu > .current-menu-item > a,
.rabtoon-main-menu > .current-menu-ancestor > a {
	color: var(--rabtoon-orange);
}

.rabtoon-main-menu > li:hover > a::after,
.rabtoon-main-menu > .current-menu-item > a::after,
.rabtoon-main-menu > .current-menu-ancestor > a::after {
	opacity: 1;

	transform: scaleX(1);
}


/* ==========================================================
   DESKTOP SUBMENUS
========================================================== */

.rabtoon-main-menu .sub-menu {
	position: absolute;

	top: calc(100% - 1px);
	inset-inline-start: 0;

	min-width: 220px;

	margin: 0;
	padding: 8px;

	list-style: none;

	background: #fff;

	border: 1px solid var(--rabtoon-border);

	border-radius: 16px;

	box-shadow: var(--rabtoon-shadow);

	opacity: 0;
	visibility: hidden;

	transform: translateY(8px);

	pointer-events: none;

	transition:
		opacity 0.18s ease,
		visibility 0.18s ease,
		transform 0.18s ease;
}

.rabtoon-main-menu li:hover > .sub-menu,
.rabtoon-main-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;

	transform: translateY(0);

	pointer-events: auto;
}

.rabtoon-main-menu .sub-menu li {
	margin: 0;
}

.rabtoon-main-menu .sub-menu a {
	display: block;

	padding: 11px 13px;

	border-radius: 10px;

	color: var(--rabtoon-text);

	font-size: 14px;
	font-weight: 600;

	text-decoration: none;

	white-space: nowrap;
}

.rabtoon-main-menu .sub-menu a:hover {
	background: #FFF4EE;

	color: var(--rabtoon-orange);
}


/* ==========================================================
   MOBILE MENU TRIGGER
========================================================== */

.rabtoon-mobile-trigger {
	display: none;

	width: 44px;
	height: 44px;

	padding: 9px;

	border: 0;

	border-radius: 10px;

	background: var(--rabtoon-bg-soft);

	cursor: pointer;
}

.rabtoon-mobile-trigger span {
	display: block;

	width: 100%;
	height: 2px;

	margin: 5px 0;

	border-radius: 10px;

	background: var(--rabtoon-navy);
}


/* ==========================================================
   MOBILE BACKDROP
========================================================== */

.rabtoon-mobile-backdrop {
	position: fixed;

	inset: 0;

	z-index: 10000;

	background: rgba(0, 12, 31, 0.52);

	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);

	opacity: 0;
	visibility: hidden;

	pointer-events: none;

	transition:
		opacity 0.22s ease,
		visibility 0.22s ease;
}


/* ==========================================================
   MOBILE DRAWER
========================================================== */

.rabtoon-mobile-drawer {
	position: fixed;

	top: 0;
	bottom: 0;

	inset-inline-end: 0;

	z-index: 10001;

	width: min(390px, 88vw);

	background: #fff;

	box-shadow:
		-20px 0 50px rgba(0, 26, 70, 0.18);

	overflow-y: auto;

	transform: translateX(105%);

	visibility: hidden;

	transition:
		transform 0.25s ease,
		visibility 0.25s ease;
}

html[dir="rtl"] .rabtoon-mobile-drawer {
	transform: translateX(-105%);
}

body.rabtoon-mobile-open .rabtoon-mobile-backdrop {
	opacity: 1;
	visibility: visible;

	pointer-events: auto;
}

body.rabtoon-mobile-open .rabtoon-mobile-drawer {
	transform: translateX(0);

	visibility: visible;
}

body.rabtoon-mobile-open {
	overflow: hidden;
}


/* ==========================================================
   MOBILE DRAWER HEADER
========================================================== */

.rabtoon-mobile-drawer-header {
	min-height: 78px;

	padding: 14px 18px;

	border-bottom: 1px solid var(--rabtoon-border);

	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 16px;
}

.rabtoon-mobile-drawer-header img {
	width: auto;
	height: 48px;

	max-width: 170px;

	object-fit: contain;
}

.rabtoon-mobile-close {
	width: 42px;
	height: 42px;

	padding: 0;

	border: 0;

	border-radius: 50%;

	background: var(--rabtoon-bg-soft);

	color: var(--rabtoon-navy);

	display: flex;
	align-items: center;
	justify-content: center;

	cursor: pointer;
}


/* ==========================================================
   MOBILE DRAWER CONTENT
========================================================== */

.rabtoon-mobile-drawer-content {
	padding: 22px 18px 30px;
}

.rabtoon-mobile-section-title {
	margin-bottom: 8px;

	color: var(--rabtoon-muted);

	font-size: 12px;
	font-weight: 800;

	letter-spacing: 0.08em;

	text-transform: uppercase;
}

.rabtoon-mobile-main-menu,
.rabtoon-mobile-main-menu ul {
	margin: 0;
	padding: 0;

	list-style: none;
}

.rabtoon-mobile-main-menu > li {
	margin: 0;

	border-bottom: 1px solid #F0F2F5;
}

.rabtoon-mobile-main-menu a {
	display: block;

	padding: 13px 4px;

	color: var(--rabtoon-text);

	font-size: 15px;
	font-weight: 650;

	text-decoration: none;
}

.rabtoon-mobile-main-menu .sub-menu {
	padding-inline-start: 16px;

	border-top: 1px solid #F3F4F6;
}

.rabtoon-mobile-main-menu .sub-menu a {
	color: var(--rabtoon-muted);

	font-size: 14px;
}

/* ==========================================================
   MOBILE ACTIONS
========================================================== */

.rabtoon-mobile-actions {
	margin-top: 24px;

	display: grid;

	gap: 10px;
}

.rabtoon-mobile-publish,
.rabtoon-mobile-account {
	min-height: 50px;

	padding: 12px 18px;

	border-radius: 12px;

	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 14px;
	font-weight: 800;

	text-decoration: none;
}

.rabtoon-mobile-publish {
	background: var(--rabtoon-orange);

	color: #fff;
}

.rabtoon-mobile-publish:hover {
	background: var(--rabtoon-orange-hover);

	color: #fff;
}

.rabtoon-mobile-account {
	border: 1px solid var(--rabtoon-border);

	background: #fff;

	color: var(--rabtoon-navy);
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1180px) {

	.rabtoon-header-container,
	.rabtoon-navigation-container {
		width: min(100% - 32px, 1320px);
	}

	.rabtoon-header-container {
		gap: 12px;
	}

	.rabtoon-header-logo img {
		height: 58px;

		max-width: 200px;
	}

	.rabtoon-header-categories {
		flex-basis: 180px;
	}

	.rabtoon-account-button span {
		display: none;
	}

	.rabtoon-account-button {
		width: 48px;

		padding: 0;

		justify-content: center;
	}

	.rabtoon-publish-button {
		padding-inline: 15px;
	}
}


/* ==========================================================
   MOBILE / SMALL TABLET
========================================================== */

@media (max-width: 900px) {

	.rabtoon-header-container {
		width: 100%;

		min-height: auto;

		padding: 12px 16px;

		display: grid;

		grid-template-columns:
			minmax(120px, auto)
			1fr
			auto;

		gap: 11px;
	}

	.rabtoon-header-logo {
		grid-column: 1;
		grid-row: 1;

		display: flex;
		align-items: center;
	}

	.rabtoon-header-logo img {
		height: 52px;

		max-width: 175px;
	}

	.rabtoon-header-actions {
		grid-column: 3;
		grid-row: 1;
	}

	.rabtoon-header-search {
		grid-column: 1 / -1;
		grid-row: 2;

		width: 100%;

		min-width: 0;
	}

	.rabtoon-header-search input {
		height: 46px;
	}

	.rabtoon-header-categories,
	.rabtoon-navigation-row,
	.rabtoon-account-button,
	.rabtoon-publish-button {
		display: none;
	}

	.rabtoon-mobile-trigger {
		display: block;
	}
}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 480px) {

	.rabtoon-header-container {
		padding-inline: 12px;
	}

	.rabtoon-header-logo img {
		height: 48px;

		max-width: 160px;
	}

	.rabtoon-header-search input {
		height: 44px;

		font-size: 13px;
	}

	.rabtoon-mobile-trigger {
		width: 42px;
		height: 42px;
	}
}


/* ==========================================================
   MOBILE RTL HARDENING
   Arabic keeps the logo on the inline-start side, menu trigger
   on the opposite side, and all drawer/search content follows RTL.
========================================================== */
@media (max-width: 900px) {

	html[dir="rtl"] .rabtoon-header-container,
	html[dir="rtl"] .rabtoon-mobile-drawer,
	html[dir="rtl"] .rabtoon-mobile-drawer-content {
		direction: rtl;
	}

	html[dir="ltr"] .rabtoon-header-container,
	html[dir="ltr"] .rabtoon-mobile-drawer,
	html[dir="ltr"] .rabtoon-mobile-drawer-content {
		direction: ltr;
	}

	.rabtoon-header-search input,
	.rabtoon-mobile-main-menu a,
	.rabtoon-mobile-section-title {
		text-align: start;
	}

	.rabtoon-mobile-main-menu .sub-menu {
		padding-inline-start: 16px;
		padding-inline-end: 0;
	}
}


/* ==========================================================
   WORDPRESS ADMIN BAR
========================================================== */

@media (max-width: 782px) {

	.admin-bar .rabtoon-site-header {
		top: 46px;
	}
}


/* ==========================================================
   RTL READY
========================================================== */

html[dir="rtl"] .rabtoon-site-header {
	direction: rtl;
}

html[dir="rtl"] .rabtoon-header-container,
html[dir="rtl"] .rabtoon-main-menu {
	direction: rtl;
}


/* ==========================================================
   3RABTOON — FINAL DESKTOP DUAL LOGO LAYOUT
   Keeps the existing header design and mobile behavior.
========================================================== */

/* ==========================================================
   DESKTOP / TABLET DESKTOP MODE
   The existing mobile breakpoint is 900px.
========================================================== */
@media (min-width: 901px) {

	/* The top logo is mobile-only. */
	.rabtoon-header-logo--mobile {
		display: none !important;
	}

	/* Keep the upper header exactly as it is. */
	.rabtoon-header-container {
		position: relative;
		overflow: visible;
		width: min(1320px, calc(100% - 40px));
		margin-inline: auto;
	}

	/* Second navigation row. */
	.rabtoon-navigation-row {
		position: relative;
		display: block !important;
		width: 100%;
		min-height: 0 !important;
		padding: 0 !important;
		background: #fff;
		border-bottom: 1px solid var(--rabtoon-border);
		z-index: 10;
	}

	/*
	 * Equal left/right columns keep the menu physically centered.
	 * direction:ltr keeps the two brand marks on their physical sides
	 * even when the site language is Arabic.
	 */
	.rabtoon-navigation-container--with-logos {
		width: min(1320px, calc(100% - 40px));
		min-height: 76px;
		margin-inline: auto;
		padding: 0 !important;

		display: grid !important;
		grid-template-columns:
			minmax(230px, 1fr)
			auto
			minmax(230px, 1fr);

		align-items: center;
		column-gap: 24px;
		direction: ltr;
		box-sizing: border-box;
	}

	/* ======================================================
	   LEFT LOGO
	====================================================== */
	.rabtoon-navigation-container--with-logos
	.rabtoon-nav-logo--left {
		grid-column: 1;
		justify-self: start;

		display: flex !important;
		align-items: center;
		justify-content: flex-start;

		width: auto;
		margin: 0 !important;
		padding: 0 !important;

		line-height: 0;
		background: transparent !important;
		border: 0 !important;
		outline: 0 !important;
		box-shadow: none !important;
		text-decoration: none !important;
		transform: none !important;
	}

	.rabtoon-navigation-container--with-logos
	.rabtoon-nav-logo--left img {
		display: block;
		width: auto !important;
		height: 68px !important;
		max-width: 126px !important;
		max-height: 68px !important;
		margin: 0 !important;
		object-fit: contain;
		transform: none !important;
	}

	/* ======================================================
	   CENTER MENU
	====================================================== */
	.rabtoon-navigation-container--with-logos
	.rabtoon-main-navigation {
		grid-column: 2;
		min-width: 0;
		min-height: 76px;
		margin: 0;

		display: flex !important;
		align-items: center;
		justify-content: center;

		direction: ltr;
	}

	.rabtoon-navigation-container--with-logos
	.rabtoon-main-menu {
		display: flex !important;
		align-items: center;
		justify-content: center;
		flex-wrap: nowrap;

		gap: 6px;
		margin: 0;
		padding: 0;

		list-style: none;
		direction: ltr;
	}

	.rabtoon-navigation-container--with-logos
	.rabtoon-main-menu > li {
		flex: 0 0 auto;
	}

	.rabtoon-navigation-container--with-logos
	.rabtoon-main-menu > li > a {
		min-height: 76px;
		display: flex;
		align-items: center;
		white-space: nowrap;
	}

	/* ======================================================
	   RIGHT LOGO
	   Larger image, but its right edge stays in its natural
	   position. No translate/scale is used.
	====================================================== */
	.rabtoon-navigation-container--with-logos
	.rabtoon-nav-logo--right {
		grid-column: 3;
		justify-self: end;

		display: flex !important;
		align-items: center;
		justify-content: flex-end;

		width: auto;
		margin: 0 !important;
		padding: 0 !important;

		line-height: 0;
		background: transparent !important;
		border: 0 !important;
		outline: 0 !important;
		box-shadow: none !important;
		text-decoration: none !important;
		transform: none !important;
	}

	.rabtoon-navigation-container--with-logos
	.rabtoon-nav-wordmark {
		display: block;
		margin: 0;
		padding: 0;
		color: var(--rabtoon-navy);
		font-family: "Montserrat", "Arial Black", Arial, sans-serif;
		font-size: 23px;
		font-weight: 900;
		line-height: 1;
		letter-spacing: -0.45px;
		white-space: nowrap;
		text-transform: uppercase;
		transition: opacity 0.18s ease, color 0.18s ease;
	}

	/* ======================================================
	   LOGO HOVER / FOCUS
	====================================================== */
	.rabtoon-nav-logo,
	.rabtoon-nav-logo:hover,
	.rabtoon-nav-logo:focus,
	.rabtoon-nav-logo:active,
	.rabtoon-nav-logo:visited {
		background: transparent !important;
		color: inherit !important;
		border: 0 !important;
		outline: 0 !important;
		box-shadow: none !important;
		text-decoration: none !important;
	}

	.rabtoon-nav-logo::before,
	.rabtoon-nav-logo::after {
		content: none !important;
		display: none !important;
	}

	.rabtoon-nav-logo img {
		transition: opacity 0.18s ease;
	}

	.rabtoon-nav-logo:hover img,
	.rabtoon-nav-logo:hover .rabtoon-nav-wordmark {
		opacity: 0.88;
	}
}


/* ==========================================================
   MEDIUM DESKTOP
   901px → 1180px
========================================================== */
@media (min-width: 901px) and (max-width: 1180px) {

	.rabtoon-navigation-container--with-logos {
		grid-template-columns:
			minmax(170px, 1fr)
			auto
			minmax(170px, 1fr);

		min-height: 70px;
		column-gap: 12px;
	}

	.rabtoon-navigation-container--with-logos
	.rabtoon-nav-logo--left img {
		height: 60px !important;
		max-width: 112px !important;
		max-height: 60px !important;
	}

	.rabtoon-navigation-container--with-logos
	.rabtoon-nav-wordmark {
		font-size: 20px;
		letter-spacing: -0.35px;
	}

	.rabtoon-navigation-container--with-logos
	.rabtoon-main-navigation {
		min-height: 70px;
	}

	.rabtoon-navigation-container--with-logos
	.rabtoon-main-menu {
		gap: 2px;
	}

	.rabtoon-navigation-container--with-logos
	.rabtoon-main-menu > li > a {
		min-height: 70px;
		padding-inline: 10px;
	}
}


/* ==========================================================
   RTL
   Physical logo positions remain unchanged.
   Only menu reading/order direction follows Arabic.
========================================================== */
@media (min-width: 901px) {

	html[dir="rtl"]
	.rabtoon-navigation-container--with-logos
	.rabtoon-main-navigation,

	html[dir="rtl"]
	.rabtoon-navigation-container--with-logos
	.rabtoon-main-menu {
		direction: rtl;
	}
}


/* ==========================================================
   MOBILE
   Existing mobile design remains unchanged.
========================================================== */
@media (max-width: 900px) {

	/* Desktop-only brand marks never appear on mobile. */
	.rabtoon-nav-logo {
		display: none !important;
	}

	/* Restore the original top/mobile logo. */
	.rabtoon-header-logo--mobile {
		display: flex !important;
		align-items: center;
	}

	.rabtoon-header-logo--mobile a {
		display: flex;
		align-items: center;
		text-decoration: none;
	}

	.rabtoon-header-logo--mobile img {
		display: block;
		width: auto;
		height: 52px;
		max-width: 175px;
		object-fit: contain;
		transform: none !important;
	}
}


/* ==========================================================
   SMALL MOBILE
========================================================== */
@media (max-width: 480px) {

	.rabtoon-header-logo--mobile img {
		height: 48px;
		max-width: 160px;
	}
}

/* ==========================================================
   WPML LANGUAGE SWITCHER
   Compact one-click switcher:
   English -> UAE flag + AR
   Arabic  -> USA flag + EN
========================================================== */

.rabtoon-language-item {
	list-style: none;
}

.rabtoon-language-switch {
	direction: ltr;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 7px;

	width: auto !important;
	min-width: 68px;
	min-height: 36px !important;

	margin: 0 !important;
	padding: 0 10px !important;

	border: 1px solid var(--rabtoon-border) !important;
	border-radius: 999px !important;

	background: #fff !important;
	color: var(--rabtoon-navy) !important;

	font-size: 12px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	letter-spacing: 0.04em;

	text-decoration: none !important;
	white-space: nowrap;

	box-shadow: 0 4px 14px rgba(0, 26, 70, 0.06);

	-webkit-tap-highlight-color: transparent;

	transition:
		background 0.18s ease,
		border-color 0.18s ease,
		color 0.18s ease,
		box-shadow 0.18s ease,
		transform 0.18s ease;
}

.rabtoon-language-switch:hover {
	background: #FFF7F2 !important;
	border-color: rgba(255, 126, 51, 0.42) !important;
	color: var(--rabtoon-orange) !important;

	box-shadow: 0 6px 18px rgba(0, 26, 70, 0.09);
}

.rabtoon-language-switch:active {
	transform: translateY(1px);
}

.rabtoon-language-switch:focus {
	outline: none !important;
}

.rabtoon-language-switch:focus-visible {
	outline: 2px solid rgba(255, 126, 51, 0.42) !important;
	outline-offset: 2px;
}

.rabtoon-language-switch::before,
.rabtoon-language-switch::after {
	content: none !important;
	display: none !important;
}

.rabtoon-language-flag {
	display: block;
	flex: 0 0 auto;

	width: 21px;
	height: 14px;

	overflow: hidden;

	border-radius: 3px;

	box-shadow:
		0 0 0 1px rgba(0, 26, 70, 0.08),
		0 1px 2px rgba(0, 26, 70, 0.08);
}

.rabtoon-language-flag svg {
	display: block;

	width: 100%;
	height: 100%;
}

.rabtoon-language-code {
	display: block;

	line-height: 1;

	direction: ltr;
	unicode-bidi: isolate;
}


/* Keep the switcher compact inside the centered desktop menu. */
@media (min-width: 901px) {

	.rabtoon-navigation-container--with-logos
	.rabtoon-main-menu > li.rabtoon-language-item {
		display: flex;
		align-items: center;
	}

	.rabtoon-navigation-container--with-logos
	.rabtoon-main-menu > li.rabtoon-language-item > .rabtoon-language-switch {
		min-height: 36px !important;
		padding: 0 10px !important;
	}

	.rabtoon-navigation-container--with-logos
	.rabtoon-main-menu > li.rabtoon-language-item > .rabtoon-language-switch::after {
		content: none !important;
		display: none !important;
	}
}


/* Slightly tighter only in the existing medium-desktop range. */
@media (min-width: 901px) and (max-width: 1180px) {

	.rabtoon-language-switch {
		min-width: 62px;
		min-height: 34px !important;

		padding-inline: 8px !important;

		font-size: 11px !important;
	}

	.rabtoon-language-flag {
		width: 19px;
		height: 13px;
	}
}


/* Mobile drawer: language switcher is the final menu item. */
@media (max-width: 900px) {

	.rabtoon-mobile-main-menu > li.rabtoon-language-item {
		padding: 12px 0 2px;

		border-bottom: 0;
	}

	.rabtoon-mobile-main-menu > li.rabtoon-language-item > .rabtoon-language-switch {
		display: inline-flex !important;

		width: auto !important;
		min-width: 72px;
		min-height: 40px !important;

		padding: 0 12px !important;

		background: var(--rabtoon-bg-soft) !important;

		text-align: start;
	}

	.rabtoon-mobile-main-menu > li.rabtoon-language-item > .rabtoon-language-switch:hover {
		background: #FFF7F2 !important;
	}
}


/* ==========================================================
   MOBILE MENU BUTTON — REMOVE BLUE CLICK / FOCUS STATE
========================================================== */

.rabtoon-mobile-trigger,
.rabtoon-mobile-trigger:hover,
.rabtoon-mobile-trigger:active,
.rabtoon-mobile-trigger:focus {
	background: var(--rabtoon-bg-soft) !important;
	color: var(--rabtoon-navy) !important;

	border: 0 !important;

	box-shadow: none !important;

	-webkit-tap-highlight-color: transparent;
	-webkit-appearance: none;
	appearance: none;
}

.rabtoon-mobile-trigger:focus {
	outline: none !important;
}

.rabtoon-mobile-trigger:focus-visible {
	outline: 2px solid rgba(255, 126, 51, 0.42) !important;
	outline-offset: 2px;
}

.rabtoon-mobile-trigger:hover span,
.rabtoon-mobile-trigger:active span,
.rabtoon-mobile-trigger:focus span {
	background: var(--rabtoon-navy) !important;
}


/* Mobile language switcher alignment */
@media (max-width: 900px) {

    .rabtoon-mobile-main-menu > li.rabtoon-language-item {
        width: 100%;
        display: flex !important;
    }

    /* English: left */
    html[dir="ltr"] .rabtoon-mobile-main-menu > li.rabtoon-language-item {
        justify-content: flex-start;
    }

    /* Arabic: right */
    html[dir="rtl"] .rabtoon-mobile-main-menu > li.rabtoon-language-item {
        justify-content: flex-start;
        direction: rtl;
    }

    /* Keep flag + EN/AR arrangement unchanged */
    .rabtoon-mobile-main-menu .rabtoon-language-switch {
        direction: ltr;
    }
}