/* Professional theme fixes for the local OJS 3.2 online copy. */
html,
body {
	overflow-x: hidden !important;
}

/* Keep the English footer free of duplicate Arabic static labels. */
html[lang^="en"] .pj_footer_col .pj_footer_en_heading + h3,
html[lang^="en"] .pj_footer_bottom .pj_footer_en_rights + span {
	display: none !important;
}

@media (max-width: 980px) {
	/* The mobile button is an icon, not text: its ::before and ::after are the
	   hamburger bars. The localised label lives in the button's <span>. */

	html[lang^="en"] .pj_nav_shell .pj_main_nav,
	html[lang^="en"] .pj_nav_shell .pj_platform_menu,
	html[lang^="en"] .pj_nav_shell .pj_dropdown_menu {
		direction: ltr !important;
		text-align: left !important;
	}

	html[lang^="en"] .pj_nav_shell .pj_platform_menu > li > a,
	html[lang^="en"] .pj_nav_shell .pj_dropdown_menu > li > a {
		justify-content: flex-start !important;
	}
}

/* One editorial banner replaces the three temporary promotional cards. */
.pj_ad_slots {
	display: none !important;
}

.pj_feature_banner {
	position: relative;
	display: block;
	width: calc(100% - 48px) !important;
	max-width: 1512px !important;
	height: 248px;
	margin: 28px auto 44px;
	overflow: hidden;
	border-radius: 8px;
	background: #0c684c;
	box-shadow: 0 16px 34px rgba(10, 67, 50, 0.16);
	text-decoration: none !important;
	isolation: isolate;
}

.pj_feature_banner img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 48%;
	transform: scale(1.02);
	transition: transform 220ms ease;
}

.pj_feature_banner::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(4, 52, 39, 0.2), rgba(4, 52, 39, 0.78));
}

.pj_feature_banner:hover img,
.pj_feature_banner:focus-visible img {
	transform: scale(1.06);
}

.pj_feature_banner_copy {
	position: absolute;
	z-index: 2;
	inset-inline-end: 48px;
	top: 50%;
	max-width: min(620px, 62%);
	transform: translateY(-50%);
	color: #fff;
	text-align: start;
}

.pj_feature_banner_copy strong,
.pj_feature_banner_copy em {
	display: block;
	color: inherit;
}

.pj_feature_banner_copy strong {
	margin-bottom: 10px;
	font-size: 2rem;
	font-style: normal;
	font-weight: 800;
	line-height: 1.2;
}

.pj_feature_banner_copy em {
	font-size: 1.05rem;
	font-style: normal;
	font-weight: 700;
	opacity: 0.92;
}

@media (max-width: 680px) {
	.pj_feature_banner {
		width: calc(100% - 30px) !important;
		height: 210px;
		margin: 18px auto 28px;
	}

	.pj_feature_banner::after {
		background: linear-gradient(90deg, rgba(4, 52, 39, 0.35), rgba(4, 52, 39, 0.82));
	}

	.pj_feature_banner_copy {
		inset-inline-end: 24px;
		max-width: 78%;
	}

	.pj_feature_banner_copy strong {
		font-size: 1.45rem;
	}
}

@media (max-width: 980px) {
	html[lang^="en"] .pj_nav_inner {
		direction: ltr !important;
	}

	/* The button label is no longer drawn in CSS. header.tpl emits the
	   localised text inside the button's <span>, which screen readers use. */

	html[lang^="en"] .pj_nav_shell .pj_main_nav,
	html[lang^="en"] .pj_nav_shell .pj_platform_menu,
	html[lang^="en"] .pj_nav_shell .pj_dropdown_menu {
		direction: ltr !important;
		text-align: left !important;
	}

	html[lang^="en"] .pj_nav_shell .pj_platform_menu > li > a,
	html[lang^="en"] .pj_nav_shell .pj_dropdown_menu > li > a {
		justify-content: flex-start !important;
	}
}

.pkp_screen_reader,
.cmp_skip_to_content a {
	position: absolute !important;
	left: 0 !important;
	right: auto !important;
	top: 0 !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	white-space: nowrap !important;
	transform: none !important;
}

.cmp_skip_to_content a:focus {
	left: 16px !important;
	top: 16px !important;
	width: auto !important;
	height: auto !important;
	clip: auto !important;
	z-index: 10000 !important;
	padding: 10px 14px !important;
	background: #1b8354 !important;
	color: #fff !important;
	border-radius: 4px !important;
	transform: none !important;
}

.pkp_structure_page {
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
}

.pkp_structure_content {
	width: 100% !important;
	max-width: 1512px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: flex-start !important;
	justify-content: center !important;
	gap: 24px !important;
	direction: ltr !important;
}

.pkp_structure_content::before,
.pkp_structure_content::after,
.pkp_structure_main::before,
.pkp_structure_main::after {
	display: none !important;
	content: none !important;
	width: 0 !important;
	height: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.pkp_structure_content:not(.has_sidebar) {
	display: block !important;
}

.pkp_structure_main,
.pkp_structure_sidebar {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	direction: rtl !important;
	box-sizing: border-box !important;
}

.pkp_structure_main {
	flex: 1 1 auto !important;
	border-left: 0 !important;
	border-right: 0 !important;
	/* Keep this surface un-clipped: clipping a wide OJS column produces a visible compositor seam. */
	overflow: visible !important;
	contain: none !important;
	transform: none !important;
	filter: none !important;
}

.pkp_structure_sidebar {
	flex: 0 0 340px !important;
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
}

.pkp_structure_content,
.pkp_structure_main,
.pkp_structure_main > .page,
.pkp_structure_main > .page::before,
.pkp_structure_main > .page::after,
.page_index_journal,
.page_index_journal::before,
.page_index_journal::after,
.page_issue,
.page_issue::before,
.page_issue::after {
	background-clip: padding-box !important;
	box-shadow: none !important;
}

/* A solid page surface masks the parent theme's retired desktop divider layer. */
.pkp_structure_main > .page {
	position: relative !important;
	z-index: 1 !important;
	background: #fff !important;
	isolation: isolate !important;
}

.pkp_structure_main > .page,
.page_index_journal,
.page_issue,
.page_about,
.homepage_about,
.current_issue {
	border-left-color: transparent !important;
	border-right-color: transparent !important;
}

.page,
.page_issue,
.page_index_journal,
.page_issue_archive,
.page_search,
.page_about {
	width: 100% !important;
	box-sizing: border-box !important;
}

.obj_article_summary,
.obj_article_summary *,
.obj_article_summary::before,
.obj_article_summary::after {
	float: none !important;
	clear: none !important;
	border-left-width: 0 !important;
	border-right-width: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
}

.obj_article_summary {
	display: block !important;
	padding-left: 28px !important;
	padding-right: 28px !important;
	background-image: none !important;
	border-left: 0 !important;
	border-right: 0 !important;
	box-shadow: none !important;
	overflow: hidden !important;
}

.obj_article_summary::before,
.obj_article_summary::after {
	display: none !important;
	content: none !important;
	width: 0 !important;
	height: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.obj_article_summary .cover {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.obj_article_summary > .title,
.obj_article_summary .meta,
.obj_article_summary .authors,
.obj_article_summary .pages,
.obj_article_summary .published,
.obj_article_summary .galleys_links {
	position: static !important;
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	background-image: none !important;
	box-sizing: border-box !important;
}

.obj_article_summary .galleys_links {
	display: flex !important;
	justify-content: center !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
}

.obj_article_summary .galleys_links li {
	display: block !important;
	margin: 0 !important;
	max-width: 100% !important;
}

.obj_article_summary .obj_galley_link,
.obj_article_summary .obj_galley_link:link,
.obj_article_summary .obj_galley_link:visited {
	border-left: 0 !important;
	border-right: 0 !important;
	box-shadow: none !important;
}

/* English receives its own reading direction and navigation alignment. */
html[lang^="en"] body,
html[lang^="en"] .pkp_structure_main,
html[lang^="en"] .pkp_structure_sidebar {
	direction: ltr !important;
	font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", "Segoe UI", Arial, sans-serif !important;
}

html[lang^="en"] .pj_user_bar_inner,
html[lang^="en"] .pj_nav_inner,
html[lang^="en"] .pj_header_stage_inner,
html[lang^="en"] .pj_footer_grid,
html[lang^="en"] .pj_footer_bottom {
	direction: ltr !important;
}

html[lang^="en"] .pj_user_tools .pkp_navigation_user,
html[lang^="en"] .pj_platform_menu,
html[lang^="en"] .pj_stage_copy,
html[lang^="en"] .pj_stage_copy .pkp_site_name,
html[lang^="en"] .pj_stage_panel,
html[lang^="en"] .pj_footer_brand,
html[lang^="en"] .pj_footer_col,
html[lang^="en"] .pkp_footer_content {
	text-align: left !important;
}

html[lang^="en"] .pj_nav_logo,
html[lang^="en"] .pj_platform_menu,
html[lang^="en"] .pj_nav_util {
	justify-content: flex-start !important;
}

html[lang^="en"] .pj_nav_logo img {
	object-position: left center !important;
}

html[lang^="en"] .pj_dropdown_menu {
	left: 0 !important;
	right: auto !important;
	text-align: left !important;
}

html[lang^="en"] .pj_dropdown_menu > li > a,
html[lang^="en"] .pj_platform_menu > li > a {
	font-family: inherit !important;
}

html[lang^="en"] .pj_stage_copy .pkp_site_name:after {
	margin-left: 0 !important;
	margin-right: auto !important;
}

html[lang^="en"] .pj_lang_link {
	direction: rtl;
}

/* OJS 3.2 draws desktop column dividers with these legacy pseudo-elements. */
html[dir] body .pkp_structure_main::before,
html[dir] body .pkp_structure_main::after,
body .pkp_structure_main::before,
body .pkp_structure_main::after {
	all: unset !important;
	content: none !important;
	display: none !important;
	visibility: hidden !important;
	position: static !important;
	width: 0 !important;
	height: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

@media (max-width: 980px) {
	/* Nav row order on mobile: logo at the start, then flexible space, then
	   the language link with the menu button beside it at the end.
	   The old fixed grid (138px 112px 54px) was sized for the wide text
	   button and left the icon stranded in the middle of the row. */
	.pj_nav_inner {
		display: flex !important;
		grid-template-columns: none !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 10px !important;
	}

	.pj_nav_logo {
		order: 1 !important;
		flex: 0 0 auto !important;
		width: 138px !important;
		/* Consumes the leftover space, pushing the rest to the far end */
		margin-inline-end: auto !important;
	}

	.pj_nav_util {
		order: 2 !important;
		flex: 0 0 auto !important;
		width: auto !important;
		justify-content: flex-end !important;
	}

	.pj_nav_shell .pkp_site_nav_toggle {
		order: 3 !important;
		flex: 0 0 auto !important;
	}

	.pj_nav_util .pj_search_icon {
		display: none !important;
	}

	.pj_platform_header,
	.pj_nav_shell,
	.pj_nav_inner,
	.pj_header_stage {
		border-top: 0 !important;
		border-bottom: 0 !important;
		box-shadow: none !important;
	}

	.pj_platform_header::before,
	.pj_platform_header::after,
	.pj_nav_shell::before,
	.pj_nav_shell::after,
	.pj_nav_inner::before,
	.pj_nav_inner::after,
	.pj_header_stage::before,
	.pj_header_stage::after {
		display: none !important;
		content: none !important;
	}

	/* Mobile menu button.
	   A classic hamburger that folds into an X when the panel is open. The
	   three bars are drawn by the button itself: ::before and ::after are the
	   top and bottom bars, the middle bar is a background gradient so all
	   three can animate independently. The <span> inside the button stays in
	   the markup as the accessible name and is visually hidden. */
	.pj_nav_shell .pkp_site_nav_toggle {
		position: relative !important;
		/* An older `max-width: 991px` block in professional.less still sets
		   top/left for an absolutely positioned button. Those offsets are
		   still honoured under `position: relative` and pushed the icon 20px
		   sideways and 18px down, over the language link. */
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 48px !important;
		min-width: 48px !important;
		max-width: 48px !important;
		height: 48px !important;
		min-height: 48px !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 8px !important;
		box-shadow: 0 8px 18px rgba(27, 131, 84, 0.18) !important;
		color: #fff !important;
		cursor: pointer !important;
		-webkit-tap-highlight-color: transparent !important;
		touch-action: manipulation !important;
		background-color: #1b8354 !important;
		background-image: linear-gradient(currentColor, currentColor) !important;
		background-repeat: no-repeat !important;
		background-size: 22px 2.5px !important;
		background-position: center center !important;
		transition: background-size 0.15s ease !important;
	}

	.pj_nav_shell .pkp_site_nav_toggle:focus-visible {
		outline: 2px solid #fff !important;
		outline-offset: 2px !important;
	}

	/* Accessible name only, never shown */
	.pj_nav_shell .pkp_site_nav_toggle span {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		padding: 0 !important;
		margin: 0 !important;
		overflow: hidden !important;
		clip: rect(1px, 1px, 1px, 1px) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}

	/* Top and bottom bars */
	.pj_nav_shell .pkp_site_nav_toggle::before,
	.pj_nav_shell .pkp_site_nav_toggle::after {
		content: "" !important;
		position: absolute !important;
		top: 50% !important;
		left: 50% !important;
		width: 22px !important;
		height: 2.5px !important;
		margin: 0 !important;
		background: currentColor !important;
		border: 0 !important;
		border-radius: 2px !important;
		box-shadow: none !important;
		transition: transform 0.22s ease !important;
	}

	.pj_nav_shell .pkp_site_nav_toggle::before {
		transform: translate(-50%, -50%) translateY(-7px) !important;
	}

	.pj_nav_shell .pkp_site_nav_toggle::after {
		transform: translate(-50%, -50%) translateY(7px) !important;
	}

	/* Open state: hide the middle bar, cross the outer two */
	.pj_nav_shell .pkp_site_nav_toggle[aria-expanded="true"] {
		background-size: 0 2.5px !important;
	}

	.pj_nav_shell .pkp_site_nav_toggle[aria-expanded="true"]::before {
		transform: translate(-50%, -50%) rotate(45deg) !important;
	}

	.pj_nav_shell .pkp_site_nav_toggle[aria-expanded="true"]::after {
		transform: translate(-50%, -50%) rotate(-45deg) !important;
	}

	@media (prefers-reduced-motion: reduce) {
		.pj_nav_shell .pkp_site_nav_toggle,
		.pj_nav_shell .pkp_site_nav_toggle::before,
		.pj_nav_shell .pkp_site_nav_toggle::after {
			transition: none !important;
		}
	}

	.pj_nav_shell .pj_main_nav:not(.pkp_site_nav_menu--isOpen),
	.pj_nav_shell .pkp_site_nav_menu:not(.pkp_site_nav_menu--isOpen) {
		display: none !important;
		height: 0 !important;
		max-height: 0 !important;
		min-height: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		overflow: hidden !important;
		background: transparent !important;
		box-shadow: none !important;
		visibility: hidden !important;
	}

	/* The open panel is taller than a phone viewport once every section is
	   listed, and it has no scroll of its own, so the last items were
	   unreachable. Bound its height and let it scroll internally. */
	.pj_nav_shell .pj_main_nav.pkp_site_nav_menu--isOpen,
	.pj_nav_shell .pkp_site_nav_menu.pkp_site_nav_menu--isOpen {
		max-height: calc(100vh - 240px) !important;
		overflow-y: auto !important;
		overscroll-behavior: contain !important;
		-webkit-overflow-scrolling: touch !important;
	}

	.pj_nav_shell .pj_main_nav:not(.pkp_site_nav_menu--isOpen) *,
	.pj_nav_shell .pkp_site_nav_menu:not(.pkp_site_nav_menu--isOpen) * {
		display: none !important;
		height: 0 !important;
		max-height: 0 !important;
		min-height: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		border: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		visibility: hidden !important;
	}

	.pj_nav_shell .pj_platform_menu > li > a.is-active,
	.pj_nav_shell .pj_platform_menu > li > a.is-active:visited {
		background: #1b8354 !important;
		color: #fff !important;
	}

	.pkp_structure_content {
		display: flex !important;
		flex-direction: column !important;
		padding-left: 18px !important;
		padding-right: 18px !important;
	}

	.pkp_structure_sidebar {
		flex-basis: auto !important;
		width: 100% !important;
	}
}

@media (max-width: 980px) {
	html[lang^="en"] .pj_nav_shell .pj_main_nav,
	html[lang^="en"] .pj_nav_shell .pj_platform_menu,
	html[lang^="en"] .pj_nav_shell .pj_dropdown_menu {
		direction: ltr !important;
		text-align: left !important;
	}
}

/* ---------------------------------------------------------------------------
   Official government website banner (Digital Government Authority pattern).
   Sits above everything else in the header. Collapsed it is a single line;
   "how to verify" expands the explanatory panel below it.
   --------------------------------------------------------------------------- */
.pj_gov_banner {
	background: #f4f5f6 !important;
	border-bottom: 1px solid #e3e5e8 !important;
	font-size: 13px !important;
	color: #2c3038 !important;
}

.pj_gov_bar {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	min-height: 38px !important;
	padding-block: 6px !important;
	flex-wrap: wrap !important;
}

.pj_gov_flag {
	display: inline-flex !important;
	align-items: center !important;
	flex: 0 0 auto !important;
	width: 22px !important;
	height: 16px !important;
	overflow: hidden !important;
}

.pj_gov_flag svg,
.pj_gov_flag img {
	width: 100% !important;
	height: 100% !important;
	display: block !important;
	object-fit: contain !important;
}

.pj_gov_label {
	flex: 0 1 auto !important;
	line-height: 1.5 !important;
}

.pj_gov_toggle {
	display: inline-flex !important;
	align-items: center !important;
	gap: 5px !important;
	margin: 0 !important;
	padding: 4px 6px !important;
	background: none !important;
	border: 0 !important;
	border-radius: 4px !important;
	color: #1b8354 !important;
	font: inherit !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	-webkit-tap-highlight-color: transparent !important;
}

.pj_gov_toggle:hover {
	text-decoration: underline !important;
}

.pj_gov_toggle:focus-visible {
	outline: 2px solid #1b8354 !important;
	outline-offset: 1px !important;
}

/* Chevron: points down when collapsed, up when expanded */
.pj_gov_chevron {
	width: 9px !important;
	height: 9px !important;
	border-right: 1.8px solid currentColor !important;
	border-bottom: 1.8px solid currentColor !important;
	transform: rotate(45deg) translate(-1px, -1px) !important;
	transition: transform 0.2s ease !important;
}

.pj_gov_toggle[aria-expanded="true"] .pj_gov_chevron {
	transform: rotate(225deg) translate(-1px, -1px) !important;
}

.pj_gov_details[hidden] {
	display: none !important;
}

.pj_gov_details_inner {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 18px 40px !important;
	padding-block: 18px 20px !important;
}

.pj_gov_point {
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
}

.pj_gov_icon {
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 42px !important;
	height: 42px !important;
	border: 1px solid #bfe0ce !important;
	border-radius: 50% !important;
	background: #fff !important;
	color: #1b8354 !important;
}

.pj_gov_icon svg {
	width: 21px !important;
	height: 21px !important;
}

.pj_gov_point_copy strong {
	display: block !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	color: #161c24 !important;
}

.pj_gov_point_copy em {
	font-style: normal !important;
	color: #1b8354 !important;
}

.pj_gov_point_copy p {
	margin: 4px 0 0 !important;
	font-size: 12.5px !important;
	line-height: 1.7 !important;
	color: #4a5261 !important;
}

.pj_gov_reg {
	grid-column: 1 / -1 !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 12px 16px !important;
	background: #fff !important;
	border: 1px solid #e3e5e8 !important;
	border-radius: 8px !important;
}

.pj_gov_reg_mark {
	flex: 0 0 auto !important;
	display: inline-flex !important;
	width: 26px !important;
	height: 26px !important;
	color: #1b8354 !important;
}

.pj_gov_reg_mark svg,
.pj_gov_reg_mark img {
	width: 100% !important;
	height: 100% !important;
	display: block !important;
	object-fit: contain !important;
}

.pj_gov_reg_copy {
	font-size: 13px !important;
	color: #2c3038 !important;
}

.pj_gov_reg_no,
a.pj_gov_reg_no {
	font-weight: 700 !important;
	color: #1b8354 !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
}

a.pj_gov_reg_no:hover,
a.pj_gov_reg_no:focus-visible {
	color: #14573a !important;
}

a.pj_gov_reg_no:focus-visible {
	outline: 2px solid #1b8354 !important;
	outline-offset: 2px !important;
	border-radius: 2px !important;
}

@media (max-width: 980px) {
	.pj_gov_banner {
		font-size: 12px !important;
	}

	.pj_gov_bar {
		gap: 6px !important;
	}

	.pj_gov_details_inner {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pj_gov_chevron {
		transition: none !important;
	}
}

/* ---------------------------------------------------------------------------
   Platforms Code criterion 14 / 29: every link that leaves the site must carry
   an external-link (Link Square) icon.

   The icon is drawn with a CSS mask so it inherits the link's own colour and
   needs no extra markup or icon font. Add the class `pj_no_ext_icon` to opt a
   link out (e.g. a logo or an icon-only link where the mark would collide).
   --------------------------------------------------------------------------- */
a[target="_blank"]:not(.pj_no_ext_icon):not(.pj_nav_logo)::after,
a[rel~="external"]:not(.pj_no_ext_icon)::after {
	content: "";
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	margin-inline-start: 0.35em;
	vertical-align: -0.08em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 11 13'/%3E%3Cpath d='M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 11 13'/%3E%3Cpath d='M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4'/%3E%3C/svg%3E") no-repeat center / contain;
	flex: 0 0 auto;
}

/* An image-only link must not grow a stray mark next to the picture. */
a[target="_blank"]:has(> img:only-child)::after {
	content: none;
}

/* ---------------------------------------------------------------------------
   Nav row: keep the logo, the language link and the menu button on ONE line.

   The earlier rule ordered three known children by name. Any element added to
   .pj_nav_inner afterwards had no order of its own, so it sorted ahead of the
   logo and pushed the button onto a second row.

   This version is written defensively: every child gets a default order and is
   stopped from growing or wrapping, so adding a new element to the row cannot
   break the layout again.
   --------------------------------------------------------------------------- */
@media (max-width: 980px) {
	.pj_nav_shell .pj_nav_inner {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;   /* nothing may drop to a second row */
		align-items: center !important;
		justify-content: flex-start !important;
		grid-template-columns: none !important;
		grid-template-areas: none !important;
		gap: 10px !important;
	}

	/* Default for anything in the row, including elements added later */
	.pj_nav_shell .pj_nav_inner > * {
		order: 2 !important;
		flex: 0 0 auto !important;
	}

	/* The logo leads and soaks up the free space, pushing the rest to the end */
	.pj_nav_shell .pj_nav_logo {
		order: 1 !important;
		flex: 0 1 auto !important;
		min-width: 0 !important;
		margin-inline-end: auto !important;
	}

	.pj_nav_shell .pj_nav_logo img {
		max-width: 100% !important;
		height: auto !important;
	}

	/* Language link, then the menu button last */
	.pj_nav_shell .pj_nav_util {
		order: 3 !important;
		width: auto !important;
		justify-content: flex-end !important;
	}

	.pj_nav_shell .pkp_site_nav_toggle {
		order: 4 !important;
	}

	/* The panel is absolutely positioned, so it never occupies a row slot */
	.pj_nav_shell .pj_main_nav,
	.pj_nav_shell .pkp_site_nav_menu {
		position: absolute !important;
	}
}

/* ---------------------------------------------------------------------------
   Force the final order of the nav row: logo, then the language link, then the
   menu button last.

   The previous block ordered by `.pj_nav_shell .pkp_site_nav_toggle`, which has
   the same specificity as the `> *` default and depends on the button sitting
   inside `.pj_nav_shell`. After the template was edited the button ended up
   ahead of the language link. These rules use wide, high-specificity selectors
   and spaced-out order values, so the sequence holds whatever the markup is.
   --------------------------------------------------------------------------- */
@media (max-width: 980px) {

	/* 1 — logo leads and absorbs the free space */
	.pj_nav_inner .pj_nav_logo,
	.pj_nav_shell .pj_nav_inner .pj_nav_logo,
	a.pj_nav_logo {
		order: 10 !important;
		margin-inline-end: auto !important;
	}

	/* 2 — language link (whether wrapped in .pj_nav_util or standing alone) */
	.pj_nav_inner .pj_nav_util,
	.pj_nav_shell .pj_nav_inner .pj_nav_util,
	.pj_nav_inner > .pj_lang_link,
	.pj_nav_shell .pj_nav_inner > .pj_lang_link,
	a.pj_lang_link {
		order: 50 !important;
	}

	/* 3 — menu button always last */
	.pj_nav_inner .pkp_site_nav_toggle,
	.pj_nav_shell .pj_nav_inner .pkp_site_nav_toggle,
	.pj_nav_shell .pkp_site_nav_toggle,
	button.pkp_site_nav_toggle {
		order: 99 !important;
		margin-inline-start: 0 !important;
	}
}

/* ---------------------------------------------------------------------------
   Desktop nav: keep every menu item on one line.

   The parent theme caps `.pkp_navigation_primary` at `max-width: 80%` and the
   list is allowed to wrap. Arabic labels are short enough to fit, but the
   longer English ones ("About the Journal", "Current Issue", "Submissions")
   overflow that cap and push "Search" onto a second row, even though there is
   free space beside the row.
   --------------------------------------------------------------------------- */
@media (min-width: 981px) {
	.pj_nav_shell .pj_main_nav {
		flex: 1 1 auto !important;
		min-width: 0 !important;
		max-width: none !important;
	}

	.pj_nav_shell .pj_platform_menu,
	.pj_nav_shell .pkp_navigation_primary {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		width: auto !important;
		max-width: none !important;
	}

	.pj_nav_shell .pj_platform_menu > li {
		flex: 0 0 auto !important;
	}

	/* A label must never break across lines */
	.pj_nav_shell .pj_platform_menu > li > a {
		white-space: nowrap !important;
	}

	/* Submenus keep their own stacked layout */
	.pj_nav_shell .pj_dropdown_menu {
		display: block !important;
		flex-wrap: initial !important;
		white-space: normal !important;
	}

	.pj_nav_shell .pj_has_dropdown:hover > .pj_dropdown_menu,
	.pj_nav_shell .pj_has_dropdown:focus-within > .pj_dropdown_menu {
		display: block !important;
	}
}

/* ---------------------------------------------------------------------------
   Bring the two remaining off-palette bits into the green scheme.

   1. The hover underline on a top-level nav item was gold (#b88a35), left over
      from the older palette.
   2. The dropdown panel was dark navy (#26325c) with white text.

   Both now use the light green already applied to the nav hover state
   (#e8f3ee). The panel's text is darkened to #14573a so it stays readable on
   the lighter background — white text on light green would be unreadable.
   --------------------------------------------------------------------------- */

/* --- dropdown panel: navy -> light green --- */
.pj_dropdown_menu,
.pj_nav_shell .pj_dropdown_menu,
.pj_nav_shell .pkp_navigation_primary .pj_dropdown_menu,
.pj_nav_shell .pj_platform_menu > li.pj_has_dropdown > .pj_dropdown_menu,
.pj_nav_shell .pkp_navigation_primary > li.pj_has_dropdown > .pj_dropdown_menu,
html[lang^="en"] .pj_nav_shell .pj_platform_menu > li.pj_has_dropdown > .pj_dropdown_menu {
	background: #ffffff !important;
	border: 1px solid #dce6e1 !important;
	box-shadow: 0 14px 30px rgba(11, 93, 69, 0.18) !important;
}

.pj_dropdown_menu > li > a,
.pj_nav_shell .pj_dropdown_menu > li > a,
.pj_nav_shell .pkp_navigation_primary .pj_dropdown_menu > li > a,
.pj_nav_shell .pj_platform_menu > li.pj_has_dropdown > .pj_dropdown_menu > li > a,
.pj_nav_shell .pkp_navigation_primary > li.pj_has_dropdown > .pj_dropdown_menu > li > a,
html[lang^="en"] .pj_nav_shell .pj_platform_menu > li.pj_has_dropdown > .pj_dropdown_menu > li > a {
	color: #14573a !important;
	background: transparent !important;
}

.pj_dropdown_menu > li > a:hover,
.pj_dropdown_menu > li > a:focus,
.pj_nav_shell .pj_dropdown_menu > li > a:hover,
.pj_nav_shell .pj_dropdown_menu > li > a:focus,
.pj_nav_shell .pkp_navigation_primary .pj_dropdown_menu > li > a:hover,
.pj_nav_shell .pkp_navigation_primary .pj_dropdown_menu > li > a:focus,
.pj_nav_shell .pj_platform_menu > li.pj_has_dropdown > .pj_dropdown_menu > li > a:hover,
.pj_nav_shell .pj_platform_menu > li.pj_has_dropdown > .pj_dropdown_menu > li > a:focus,
.pj_nav_shell .pkp_navigation_primary > li.pj_has_dropdown > .pj_dropdown_menu > li > a:hover,
.pj_nav_shell .pkp_navigation_primary > li.pj_has_dropdown > .pj_dropdown_menu > li > a:focus {
	background: rgba(27, 131, 84, 0.14) !important;
	color: #0b3f28 !important;
	outline: 0 !important;
}

/* --- hover underline: gold -> green --- */
.pj_nav_shell .pkp_navigation_primary > li > a:hover,
.pj_nav_shell .pkp_navigation_primary > li > a:focus,
.pj_nav_shell .pj_platform_menu > li > a:hover,
.pj_nav_shell .pj_platform_menu > li > a:focus {
	box-shadow: inset 0 -3px 0 #1b8354 !important;
}

/* The active item keeps its solid green pill, with no gold rule under it */
.pj_nav_shell .pj_platform_menu > li > a.is-active,
.pj_nav_shell .pj_platform_menu > li > a.is-active:hover,
.pj_nav_shell .pj_platform_menu > li > a.is-active:focus {
	box-shadow: 0 8px 18px rgba(27, 131, 84, 0.22) !important;
}

/* ---------------------------------------------------------------------------
   Dropdown: white panel, each item turning green only on hover, and a clear
   down-chevron at the end of the parent label.
   --------------------------------------------------------------------------- */

/* Item hover: this is the only green in the panel */
.pj_dropdown_menu > li > a:hover,
.pj_dropdown_menu > li > a:focus,
.pj_nav_shell .pj_dropdown_menu > li > a:hover,
.pj_nav_shell .pj_dropdown_menu > li > a:focus,
.pj_nav_shell .pj_platform_menu > li.pj_has_dropdown > .pj_dropdown_menu > li > a:hover,
.pj_nav_shell .pj_platform_menu > li.pj_has_dropdown > .pj_dropdown_menu > li > a:focus,
.pj_nav_shell .pkp_navigation_primary > li.pj_has_dropdown > .pj_dropdown_menu > li > a:hover,
.pj_nav_shell .pkp_navigation_primary > li.pj_has_dropdown > .pj_dropdown_menu > li > a:focus {
	background: #e8f3ee !important;
	color: #0b3f28 !important;
	outline: 0 !important;
}

/* Caret: a chevron built from two borders, so it reads clearly as "down".
   `order` pins it to the end of the label regardless of writing direction. */
.pj_nav_shell .pj_platform_menu > li.pj_has_dropdown > a::after,
.pj_nav_shell .pkp_navigation_primary > li.pj_has_dropdown > a::after,
.pj_platform_menu > li.pj_has_dropdown > a::after {
	content: "" !important;
	display: inline-block !important;
	width: 7px !important;
	height: 7px !important;
	box-sizing: border-box !important;
	border: 0 !important;
	border-right: 2px solid currentColor !important;
	border-bottom: 2px solid currentColor !important;
	border-radius: 1px !important;
	transform: rotate(45deg) translate(-1px, -2px) !important;
	margin-inline-start: 9px !important;
	margin-inline-end: 0 !important;
	opacity: 0.75 !important;
	order: 99 !important;
	flex: 0 0 auto !important;
	transition: transform 0.2s ease !important;
}

/* Flip it while the panel is open */
.pj_nav_shell .pj_platform_menu > li.pj_has_dropdown:hover > a::after,
.pj_nav_shell .pj_platform_menu > li.pj_has_dropdown:focus-within > a::after,
.pj_nav_shell .pkp_navigation_primary > li.pj_has_dropdown:hover > a::after,
.pj_nav_shell .pkp_navigation_primary > li.pj_has_dropdown:focus-within > a::after {
	transform: rotate(-135deg) translate(-2px, -1px) !important;
}

@media (prefers-reduced-motion: reduce) {
	.pj_nav_shell .pj_platform_menu > li.pj_has_dropdown > a::after {
		transition: none !important;
	}
}

/* ---------------------------------------------------------------------------
   Pull the dropdown up against its parent item.

   The panel sat 10px below the link with nothing bridging the gap visually, so
   over a dark hero image it read as detached. 4px keeps it attached while the
   invisible `::before` strip still lets the pointer travel into the panel.
   --------------------------------------------------------------------------- */
@media (min-width: 981px) {
	.pj_nav_shell .pj_platform_menu > li.pj_has_dropdown,
	.pj_nav_shell .pkp_navigation_primary > li.pj_has_dropdown {
		position: relative !important;
		align-self: center !important;
	}

	.pj_dropdown_menu,
	.pj_nav_shell .pj_platform_menu > li.pj_has_dropdown > .pj_dropdown_menu,
	.pj_nav_shell .pkp_navigation_primary > li.pj_has_dropdown > .pj_dropdown_menu {
		top: 100% !important;
		margin: 4px 0 0 !important;
		z-index: 1200 !important;
	}

	/* Invisible hover bridge, matched to the new gap */
	.pj_dropdown_menu::before {
		content: "" !important;
		position: absolute !important;
		top: -6px !important;
		right: 0 !important;
		left: 0 !important;
		height: 6px !important;
	}
}