/**
 * RTL dropdown compatibility for NCTDE's existing Eduma pages.
 *
 * The selectors deliberately exclude the plugin's standalone homepage
 * template, which has its own fully isolated navigation.
 */

@media (min-width: 1025px) {
	html[dir="rtl"] body:not(.nctde-wordpress-template) #masthead,
	html[dir="rtl"] body:not(.nctde-wordpress-template) #masthead .thim-nav-wrapper,
	html[dir="rtl"] body:not(.nctde-wordpress-template) #masthead .navigation,
	html[dir="rtl"] body:not(.nctde-wordpress-template) #masthead .width-navigation {
		overflow: visible;
	}

	html[dir="rtl"] body:not(.nctde-wordpress-template) #masthead .width-navigation > .navbar-nav {
		display: flex;
		float: right !important;
		flex-wrap: nowrap;
		align-items: stretch;
		direction: rtl;
	}

	html[dir="rtl"] body:not(.nctde-wordpress-template) #masthead .width-navigation > .navbar-nav > li {
		position: relative;
		float: none !important;
	}

	html[dir="rtl"] body:not(.nctde-wordpress-template) #masthead .width-navigation > .navbar-nav > li.menu-item-has-children > a {
		display: flex;
		gap: 7px;
		align-items: center;
	}

	html[dir="rtl"] body:not(.nctde-wordpress-template) #masthead .width-navigation > .navbar-nav > li.menu-item-has-children > a::after {
		content: "⌄";
		display: inline-block;
		margin: -4px 0 0;
		font-size: 16px;
		font-weight: 700;
		line-height: 1;
		transition: transform 180ms ease;
	}

	html[dir="rtl"] body:not(.nctde-wordpress-template) #masthead .width-navigation > .navbar-nav > li.menu-item-has-children:hover > a::after,
	html[dir="rtl"] body:not(.nctde-wordpress-template) #masthead .width-navigation > .navbar-nav > li.menu-item-has-children:focus-within > a::after {
		transform: rotate(180deg);
	}

	html[dir="rtl"] body:not(.nctde-wordpress-template) #masthead .width-navigation > .navbar-nav > li > .sub-menu {
		right: 0 !important;
		left: auto !important;
		top: 100% !important;
		display: block !important;
		width: 290px !important;
		min-width: 290px !important;
		margin: 0 !important;
		padding: 10px !important;
		overflow: hidden;
		direction: rtl;
		text-align: right;
		background: #ffffff !important;
		border: 1px solid rgba(6, 44, 84, 0.1) !important;
		border-top: 3px solid #d51f36 !important;
		border-radius: 0 0 14px 14px;
		box-shadow: 0 18px 42px rgba(4, 29, 54, 0.18) !important;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(10px) !important;
		transition:
			opacity 180ms ease,
			transform 180ms ease,
			visibility 180ms ease;
		z-index: 99999 !important;
	}

	html[dir="rtl"] body:not(.nctde-wordpress-template) #masthead .width-navigation > .navbar-nav > li:hover > .sub-menu,
	html[dir="rtl"] body:not(.nctde-wordpress-template) #masthead .width-navigation > .navbar-nav > li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0) !important;
	}

	html[dir="rtl"] body:not(.nctde-wordpress-template) #masthead .width-navigation > .navbar-nav > li > .sub-menu > li {
		float: none !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
	}

	html[dir="rtl"] body:not(.nctde-wordpress-template) #masthead .width-navigation > .navbar-nav > li > .sub-menu > li + li {
		border-top: 1px solid #edf1f5 !important;
	}

	html[dir="rtl"] body:not(.nctde-wordpress-template) #masthead .width-navigation > .navbar-nav > li > .sub-menu > li > a,
	html[dir="rtl"] body:not(.nctde-wordpress-template) #masthead .width-navigation > .navbar-nav > li > .sub-menu > li > span {
		display: block !important;
		width: 100% !important;
		min-height: 44px;
		padding: 11px 14px !important;
		text-align: right !important;
		white-space: normal;
		color: #24374a !important;
		background: transparent !important;
		border: 0 !important;
		border-radius: 8px;
		font-family: Cairo, Arial, sans-serif;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.55;
		transition:
			color 160ms ease,
			background-color 160ms ease,
			padding 160ms ease;
	}

	html[dir="rtl"] body:not(.nctde-wordpress-template) #masthead .width-navigation > .navbar-nav > li > .sub-menu > li > a:hover,
	html[dir="rtl"] body:not(.nctde-wordpress-template) #masthead .width-navigation > .navbar-nav > li > .sub-menu > li > a:focus-visible,
	html[dir="rtl"] body:not(.nctde-wordpress-template) #masthead .width-navigation > .navbar-nav > li > .sub-menu > li.current-menu-item > a {
		padding-right: 19px !important;
		color: #062c54 !important;
		background: #eef5fb !important;
		text-decoration: none;
		outline: none;
	}
}

@media (max-width: 1024px) {
	html[dir="rtl"] body:not(.nctde-wordpress-template) .mobile-menu-wrapper,
	html[dir="rtl"] body:not(.nctde-wordpress-template) .mobile-menu-container,
	html[dir="rtl"] body:not(.nctde-wordpress-template) .mobile-menu-container .navbar-nav {
		direction: rtl;
		text-align: right;
	}

	html[dir="rtl"] body:not(.nctde-wordpress-template) .mobile-menu-container .navbar-nav {
		padding: 8px 0 24px !important;
	}

	html[dir="rtl"] body:not(.nctde-wordpress-template) .mobile-menu-container .navbar-nav li {
		float: none !important;
		width: 100%;
		text-align: right !important;
	}

	html[dir="rtl"] body:not(.nctde-wordpress-template) .mobile-menu-container .navbar-nav > li > a,
	html[dir="rtl"] body:not(.nctde-wordpress-template) .mobile-menu-container .navbar-nav > li > span {
		display: block;
		padding: 13px 22px !important;
		text-align: right !important;
		line-height: 1.6;
	}

	html[dir="rtl"] body:not(.nctde-wordpress-template) .mobile-menu-container .navbar-nav li.menu-item-has-children > a {
		position: relative;
		padding-left: 48px !important;
	}

	html[dir="rtl"] body:not(.nctde-wordpress-template) .mobile-menu-container .navbar-nav li.menu-item-has-children > a::after {
		content: "⌄";
		position: absolute;
		top: 50%;
		left: 20px;
		font-size: 17px;
		font-weight: 700;
		line-height: 1;
		transform: translateY(-55%);
	}

	html[dir="rtl"] body:not(.nctde-wordpress-template) .mobile-menu-container .navbar-nav .sub-menu {
		margin: 0 22px 8px 0 !important;
		padding: 4px 14px 4px 0 !important;
		border-right: 2px solid #d51f36;
	}

	html[dir="rtl"] body:not(.nctde-wordpress-template) .mobile-menu-container .navbar-nav .sub-menu::before,
	html[dir="rtl"] body:not(.nctde-wordpress-template) .mobile-menu-container .navbar-nav .sub-menu li::before {
		display: none !important;
	}

	html[dir="rtl"] body:not(.nctde-wordpress-template) .mobile-menu-container .navbar-nav .sub-menu li > a,
	html[dir="rtl"] body:not(.nctde-wordpress-template) .mobile-menu-container .navbar-nav .sub-menu li > span {
		display: block;
		padding: 10px 12px !important;
		text-align: right !important;
		white-space: normal;
		line-height: 1.55;
		border: 0 !important;
	}

	html[dir="rtl"] body:not(.nctde-wordpress-template) .mobile-menu-wrapper .icon-menu-back {
		font-size: 0;
	}

	html[dir="rtl"] body:not(.nctde-wordpress-template) .mobile-menu-wrapper .icon-menu-back::before {
		content: "رجوع";
		font-family: Cairo, Arial, sans-serif;
		font-size: 14px;
		font-weight: 700;
	}
}