/*
 * The site header's menu hover and «الإشعارات» panel - shared by the portal and every
 * regional site (Block-HMenu in blocks/fiction/{ar,en} and region/<slug>/blocks/fiction/ar).
 * Linked by home_{ar,en}.dwt and global/{ar,en}/header.dwt (and the region's copies).
 *
 * Colours are tokens defaulting to the portal's teal; a region redefines them on its
 * <body class="region-site"> (assets/css/modules/region/region.css), so the same rules
 * paint in the region's colour.
 */

:root {
	--hdr-base: #26667c;
	--hdr-deep: #0e3d4c;
	--hdr-light: #4fa3ba;
	--hdr-rgb: 38, 102, 124;
	--hdr-dark-btn: #2e7f96;
}

/* ------------------------------------------------------------------ menu hover
   A compact pill that fades in, and a short underline - not the theme's full-height
   block. Large screens only; the phone drawer keeps the theme's list rows. */
@media (min-width: 992px) {
	#kt_header .menu > .menu-item:has(> .hdr-link) {
		align-items: center;
	}

	#kt_header .menu > .menu-item > .menu-link.hdr-link {
		position: relative;
		align-self: center;
		height: auto;
		padding: 8px 14px;
		border-radius: 999px;
		background-color: transparent;
		transition: background-color .25s ease, color .25s ease;
	}

	#kt_header .menu > .menu-item > .menu-link.hdr-link .menu-title {
		color: #fff;
		/* One line always: a menu with seven sections (an overseas office) wrapped every
		   label onto two lines at 1440px. The size and padding give a little instead. */
		white-space: nowrap;
		font-size: clamp(.95rem, .45rem + .62vw, 1.25rem);
	}

	#kt_header .menu > .menu-item > .menu-link.hdr-link {
		padding-inline: clamp(8px, .7vw, 14px);
	}

	/* The header's own buttons never wrap («الموقع الرئيسي»). */
	#kt_header .topbar .btn,
	#kt_header .btn-warning {
		white-space: nowrap;
	}

	#kt_header .menu > .menu-item > .menu-link.hdr-link::after {
		content: '';
		position: absolute;
		inset-inline: 30%;
		bottom: 3px;
		height: 2px;
		border-radius: 2px;
		background: var(--hdr-light);
		opacity: 0;
		transform: scaleX(.4);
		transition: opacity .25s ease, transform .25s ease;
	}

	#kt_header .menu > .menu-item:hover > .menu-link.hdr-link,
	#kt_header .menu > .menu-item.show > .menu-link.hdr-link,
	#kt_header .menu > .menu-item.here > .menu-link.hdr-link,
	#kt_header .menu > .menu-item > .menu-link.hdr-link:focus-visible {
		background-color: rgba(255, 255, 255, .10);
	}

	#kt_header .menu > .menu-item:hover > .menu-link.hdr-link::after,
	#kt_header .menu > .menu-item.show > .menu-link.hdr-link::after,
	#kt_header .menu > .menu-item.here > .menu-link.hdr-link::after,
	#kt_header .menu > .menu-item > .menu-link.hdr-link:focus-visible::after {
		opacity: 1;
		transform: scaleX(1);
	}

	#kt_header .menu > .menu-item > .menu-link.hdr-link:focus-visible {
		outline: 2px solid rgba(255, 255, 255, .6);
		outline-offset: 2px;
	}
}

/* ------------------------------------------------------------------ dropdowns (the menu's children)
   A solid surface that follows the theme - not the 60% white glass (.munu-bgbanner) that
   let the page's photos show through the links - rounded, with a soft shadow and a short
   fade in. Each link is a rounded row; its icon sits in a chip that fills with the site
   colour on hover. Several theme utilities on this markup carry !important
   (munu-bgbanner's background, text-primary, text-gray-800, fs-3, text-center), so the
   few rules that must beat them say so. */
/* `translate`, never `transform`: the theme (popper) places every dropdown with an inline
   transform, and an animated transform replaced it - the panels opened at the page's
   top-left corner. The individual property composes with the inline one. */
@keyframes hdr-drop {
	from { opacity: 0; translate: 0 -6px; }
	to   { opacity: 1; translate: 0 0; }
}

@media (min-width: 992px) {
	#kt_header .menu-sub.menu-sub-lg-dropdown {
		margin-top: 6px;
		padding: 6px;
		border: 1px solid var(--bs-border-color);
		border-radius: 18px;
		background: var(--bs-body-bg) !important;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		box-shadow: 0 18px 50px rgba(0, 0, 0, .16);
	}

	#kt_header .menu-sub.menu-sub-lg-dropdown.show {
		animation: hdr-drop .22s ease both;
	}

	#kt_header .menu-sub-lg-dropdown .menu-item > .menu-link {
		padding: 10px 12px;
		border-radius: 12px;
		transition: background-color .2s ease;
	}

	#kt_header .menu-sub-lg-dropdown .menu-item > .menu-link .menu-title,
	#kt_header .menu-sub-lg-dropdown .menu-item > .menu-link .text-gray-800 {
		transition: color .2s ease;
	}

	#kt_header .menu-sub-lg-dropdown .menu-item > .menu-link:hover,
	#kt_header .menu-sub-lg-dropdown .menu-item > .menu-link:focus-visible {
		background: rgba(var(--hdr-rgb), .08);
	}

	#kt_header .menu-sub-lg-dropdown .menu-item > .menu-link:hover .menu-title,
	#kt_header .menu-sub-lg-dropdown .menu-item > .menu-link:hover .text-gray-800,
	#kt_header .menu-sub-lg-dropdown .menu-item > .menu-link:focus-visible .text-gray-800 {
		color: var(--hdr-base) !important;
	}

	#kt_header .menu-sub-lg-dropdown .menu-custom-icon {
		border-radius: 12px !important;
		background: rgba(var(--hdr-rgb), .10);
		transition: background-color .2s ease, transform .2s ease;
	}

	#kt_header .menu-sub-lg-dropdown .menu-custom-icon i {
		color: var(--hdr-base) !important;
		font-size: 1.15rem !important;
		transition: color .2s ease;
	}

	#kt_header .menu-sub-lg-dropdown .menu-link:hover .menu-custom-icon,
	#kt_header .menu-sub-lg-dropdown .menu-link:focus-visible .menu-custom-icon {
		background: var(--hdr-base);
		transform: scale(1.05);
	}

	#kt_header .menu-sub-lg-dropdown .menu-link:hover .menu-custom-icon i,
	#kt_header .menu-sub-lg-dropdown .menu-link:focus-visible .menu-custom-icon i {
		color: #fff !important;
	}

	/* Column headings of the wide panels (التعليم الرقمي, الأنظمة الرقمية …). */
	#kt_header .menu-sub-lg-dropdown h5 {
		margin: 0 4px 8px;
		padding: 0 8px 8px;
		border-bottom: 1px solid var(--bs-border-color);
		color: var(--hdr-base) !important;
		font-size: .95rem !important;
		font-weight: 700;
		text-align: start !important;
	}

	[data-bs-theme="dark"] #kt_header .menu-sub.menu-sub-lg-dropdown {
		box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
	}

	[data-bs-theme="dark"] #kt_header .menu-sub-lg-dropdown .menu-item > .menu-link:hover,
	[data-bs-theme="dark"] #kt_header .menu-sub-lg-dropdown .menu-item > .menu-link:focus-visible {
		background: rgba(255, 255, 255, .06);
	}

	[data-bs-theme="dark"] #kt_header .menu-sub-lg-dropdown .menu-item > .menu-link:hover .menu-title,
	[data-bs-theme="dark"] #kt_header .menu-sub-lg-dropdown .menu-item > .menu-link:hover .text-gray-800,
	[data-bs-theme="dark"] #kt_header .menu-sub-lg-dropdown h5,
	[data-bs-theme="dark"] #kt_header .menu-sub-lg-dropdown .menu-custom-icon i {
		color: var(--hdr-light) !important;
	}

	[data-bs-theme="dark"] #kt_header .menu-sub-lg-dropdown .menu-custom-icon {
		background: rgba(255, 255, 255, .06);
	}

	[data-bs-theme="dark"] #kt_header .menu-sub-lg-dropdown .menu-link:hover .menu-custom-icon {
		background: var(--hdr-dark-btn);
	}

	[data-bs-theme="dark"] #kt_header .menu-sub-lg-dropdown .menu-link:hover .menu-custom-icon i {
		color: #fff !important;
	}
}

/* ------------------------------------------------------------------ toolbar: search, theme, language
   The three small dropdowns at the header's end take the same panel as the menu's
   children: solid surface, rounded, soft shadow, rounded rows tinted in the site colour.
   :not(.ntf-panel) - the notifications panel has its own look below. */
#kt_header .topbar .menu-sub-dropdown:not(.ntf-panel) {
	padding: 8px !important;
	border: 1px solid var(--bs-border-color);
	border-radius: 16px;
	background: var(--bs-body-bg);
	box-shadow: 0 14px 40px rgba(0, 0, 0, .16);
}

#kt_header .topbar .menu-sub-dropdown.show:not(.ntf-panel) {
	animation: hdr-drop .2s ease both;
}

#kt_header .topbar .menu-sub-dropdown:not(.ntf-panel) .menu-item {
	padding: 0 !important;
}

#kt_header .topbar .menu-sub-dropdown:not(.ntf-panel) .menu-link {
	gap: 10px;
	min-height: 42px;
	padding: 8px 12px !important;
	border-radius: 10px;
	color: var(--bs-gray-800);
	transition: background-color .2s ease, color .2s ease;
}

#kt_header .topbar .menu-sub-dropdown:not(.ntf-panel) .menu-link:hover,
#kt_header .topbar .menu-sub-dropdown:not(.ntf-panel) .menu-link:focus-visible {
	background: rgba(var(--hdr-rgb), .08);
	color: var(--hdr-base);
}

#kt_header .topbar .menu-sub-dropdown:not(.ntf-panel) .menu-link.active {
	background: rgba(var(--hdr-rgb), .12);
	color: var(--hdr-base);
}

#kt_header .topbar .menu-sub-dropdown:not(.ntf-panel) .menu-link .menu-title,
#kt_header .topbar .menu-sub-dropdown:not(.ntf-panel) .menu-link .menu-icon i {
	color: inherit;
}

/* The language codes (AR / EN). */
#kt_header .topbar .menu-sub-dropdown .symbol-label {
	border-radius: 8px;
	background: rgba(var(--hdr-rgb), .12) !important;
	color: var(--hdr-base) !important;
}

/* The language panel was 275px for two short words; it hung past the screen edge. */
#kt_header_lang_toggle .menu-sub-dropdown {
	width: 190px !important;
}

/* Search: a framed field with a focus ring in the site colour. */
#kt_header_search [data-kt-search-element="content"] {
	padding: 14px !important;
}

#kt_header_search .search-input {
	height: 48px;
	padding-inline-start: 44px !important;
	border: 1px solid var(--bs-border-color) !important;
	border-radius: 12px !important;
	background: var(--bs-gray-100) !important;
	transition: border-color .2s ease, box-shadow .2s ease;
}

#kt_header_search .search-input:focus {
	border-color: var(--hdr-base) !important;
	box-shadow: 0 0 0 3px rgba(var(--hdr-rgb), .18) !important;
}

#kt_header_search form > .fa-magnifying-glass {
	inset-inline-start: 14px;
	margin: 0 !important;
	font-size: 1.1rem !important;
}

#kt_header_search form {
	margin-bottom: 0 !important;
}

[data-bs-theme="dark"] #kt_header .topbar .menu-sub-dropdown:not(.ntf-panel) {
	box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
}

[data-bs-theme="dark"] #kt_header .topbar .menu-sub-dropdown:not(.ntf-panel) .menu-link:hover,
[data-bs-theme="dark"] #kt_header .topbar .menu-sub-dropdown:not(.ntf-panel) .menu-link.active {
	background: rgba(255, 255, 255, .07);
	color: var(--hdr-light);
}

[data-bs-theme="dark"] #kt_header .topbar .menu-sub-dropdown .symbol-label {
	background: rgba(255, 255, 255, .08) !important;
	color: var(--hdr-light) !important;
}

/* ------------------------------------------------------------------ the services modal (تسجيل الدخول)
   Its own <style> in Block-HMenu fixes a cyan (#0891b2) and white surfaces whatever the
   theme. Its tokens are mapped onto the site colours here - #kt_header outranks that
   block's .moe-modal - and the white line illustrations get a solid circle to sit on
   (on the old 10% tint they were nearly invisible). */
#kt_header .moe-modal {
	--moe-primary: var(--hdr-base);
	--moe-primary-dark: var(--hdr-deep);
	--moe-card-bg: var(--bs-body-bg);
	--moe-text: var(--bs-gray-900);
	--moe-text-muted: var(--bs-gray-600);
	--moe-border: var(--bs-border-color);
	--moe-bg: var(--bs-gray-100);
}

#kt_header .moe-modal .ss-modal-content {
	background: var(--bs-body-bg);
}

#kt_header .moe-modal .ss-modal-body {
	background: var(--bs-gray-100);
}

#kt_header .moe-modal .student-service-img-wrapper {
	background: linear-gradient(135deg, var(--hdr-base), var(--hdr-deep));
	box-shadow: 0 8px 20px rgba(var(--hdr-rgb), .25);
}

#kt_header .moe-modal .student-service-card:focus-visible .student-service-card-inner {
	border-color: var(--hdr-base);
	box-shadow: 0 0 0 3px rgba(var(--hdr-rgb), .25);
}

[data-bs-theme="dark"] #kt_header .moe-modal .student-service-card:hover .student-service-label {
	color: var(--hdr-light);
}

/* ------------------------------------------------------------------ notifications panel
   The page's own surface in light and dark mode; the header gradient, links and the
   default icon chip in the site colour. A category's own accent (the portal colours
   its updates by category) stays inline on its chip and badge. */
.ntf-panel {
	overflow: hidden;
	border: 1px solid var(--bs-border-color);
	border-radius: 16px;
	background: var(--bs-body-bg);
	box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
}

.ntf-head {
	padding: 20px 24px 0;
	background: linear-gradient(135deg, var(--hdr-base) 0%, var(--hdr-deep) 100%);
}

.ntf-badge {
	width: 42px;
	height: 42px;
	background: rgba(255, 255, 255, .18);
}

.ntf-sub {
	opacity: .75;
}

.ntf-tabs {
	margin-bottom: -1px;
}

.ntf-panel .fx-ntf-tab {
	border-radius: 10px 10px 0 0;
	background: transparent;
	color: #fff;
	opacity: .8;
	transition: background-color .25s ease, opacity .25s ease;
}

.ntf-panel .fx-ntf-tab:hover {
	background: rgba(255, 255, 255, .15);
	color: #fff;
	opacity: 1;
}

.ntf-panel .nav-link.fx-ntf-tab.active,
.ntf-panel .nav-link.fx-ntf-tab.active:hover {
	background: var(--bs-body-bg);
	color: var(--bs-gray-900);
	opacity: 1;
}

.ntf-body {
	background: var(--bs-body-bg);
}

.ntf-panel .fx-ntf-row {
	border-radius: 10px;
	transition: background-color .2s ease;
}

.ntf-panel .fx-ntf-row:hover,
.ntf-panel .fx-ntf-row:focus-visible {
	background: rgba(var(--hdr-rgb), .07);
}

.ntf-icon {
	width: 48px;
	height: 48px;
	background: rgba(var(--hdr-rgb), .12);
}

.ntf-icon i {
	color: var(--hdr-base);
}

.ntf-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--bs-gray-900);
	line-height: 1.6;
	transition: color .2s ease;
}

.ntf-panel .fx-ntf-row:hover .ntf-title {
	color: var(--hdr-base);
}

.ntf-date,
.ntf-date i {
	color: var(--bs-gray-500);
}

.ntf-empty i {
	color: var(--bs-gray-300);
}

.ntf-empty span {
	color: var(--bs-gray-500);
}

.ntf-foot {
	border-top: 1px solid var(--bs-border-color);
}

.ntf-all {
	background: rgba(var(--hdr-rgb), .10);
	color: var(--hdr-base);
}

.ntf-all:hover,
.ntf-all:focus-visible {
	background: var(--hdr-base);
	color: #fff;
}

.ntf-all i {
	color: inherit;
}

[data-bs-theme="dark"] .ntf-panel {
	box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
}

[data-bs-theme="dark"] .ntf-icon i,
[data-bs-theme="dark"] .ntf-panel .fx-ntf-row:hover .ntf-title,
[data-bs-theme="dark"] .ntf-all {
	color: var(--hdr-light);
}

[data-bs-theme="dark"] .ntf-panel .fx-ntf-row:hover,
[data-bs-theme="dark"] .ntf-panel .fx-ntf-row:focus-visible {
	background: rgba(255, 255, 255, .06);
}

[data-bs-theme="dark"] .ntf-all:hover,
[data-bs-theme="dark"] .ntf-all:focus-visible {
	background: var(--hdr-dark-btn);
	color: #fff;
}

/* ------------------------------------------------------------------ phone
   The drawer (the header menu below lg - the theme MOVES it out of #kt_header into
   <body>, so these rules cannot hang off the header's id) and the panel. The drawer follows the page's own
   surface in both modes; a row gets the site colour when hovered or opened. */
@media (max-width: 991.98px) {
	body .header-menu.drawer {
		overflow-x: hidden;
		padding: 12px 10px;
		background: var(--bs-body-bg);
		box-shadow: 0 0 40px rgba(0, 0, 0, .25);
	}

	body .header-menu.drawer .menu {
		gap: 2px;
	}

	body .header-menu.drawer .menu > .menu-item > .menu-link {
		min-height: 46px;
		padding: 10px 14px;
		border-radius: 12px;
		transition: background-color .2s ease, color .2s ease;
	}

	body .header-menu.drawer .menu > .menu-item > .menu-link .menu-title {
		color: var(--bs-gray-800);
		font-size: 1.05rem;
		font-weight: 600;
	}

	body .header-menu.drawer .menu > .menu-item > .menu-link:hover,
	body .header-menu.drawer .menu > .menu-item.show > .menu-link,
	body .header-menu.drawer .menu > .menu-item.here > .menu-link {
		background: rgba(var(--hdr-rgb), .09);
	}

	body .header-menu.drawer .menu > .menu-item > .menu-link:hover .menu-title,
	body .header-menu.drawer .menu > .menu-item.show > .menu-link .menu-title,
	body .header-menu.drawer .menu > .menu-item.here > .menu-link .menu-title {
		color: var(--hdr-base);
	}

	body .header-menu.drawer .menu > .menu-item.show > .menu-link .menu-arrow::after {
		background-color: var(--hdr-base);
	}

	/* An opened section: its links indented under a thin rule in the site colour. */
	body .header-menu.drawer .menu-sub-lg-down-accordion {
		margin: 2px 0 6px;
		margin-inline-start: 18px;
		padding-inline-start: 10px;
		border-inline-start: 2px solid rgba(var(--hdr-rgb), .25);
	}

	body .header-menu.drawer .menu-sub-lg-down-accordion .menu-link {
		border-radius: 10px;
	}

	/* Inside the drawer a panel is a plain list, not a glass card. */
	body .header-menu.drawer .munu-bgbanner {
		background: transparent !important;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		box-shadow: none;
	}

	body .header-menu.drawer .menu-custom-icon {
		border-radius: 10px !important;
		background: rgba(var(--hdr-rgb), .10);
	}

	body .header-menu.drawer .menu-custom-icon i {
		color: var(--hdr-base) !important;
		font-size: 1.05rem !important;
	}

	[data-bs-theme="dark"] body .header-menu.drawer .menu-custom-icon i {
		color: var(--hdr-light) !important;
	}

	body .header-menu.drawer h5 {
		margin: 6px 0;
		color: var(--hdr-base) !important;
		font-size: .9rem !important;
		text-align: start !important;
	}

	body .header-menu.drawer .menu-sub-lg-down-accordion .menu-link:hover .menu-title {
		color: var(--hdr-base);
	}

	[data-bs-theme="dark"] body .header-menu.drawer .menu > .menu-item > .menu-link .menu-title {
		color: var(--bs-gray-800);
	}

	[data-bs-theme="dark"] body .header-menu.drawer .menu > .menu-item > .menu-link:hover .menu-title,
	[data-bs-theme="dark"] body .header-menu.drawer .menu > .menu-item.show > .menu-link .menu-title,
	[data-bs-theme="dark"] body .header-menu.drawer .menu-sub-lg-down-accordion .menu-link:hover .menu-title {
		color: var(--hdr-light);
	}

	[data-bs-theme="dark"] body .header-menu.drawer .menu > .menu-item > .menu-link:hover,
	[data-bs-theme="dark"] body .header-menu.drawer .menu > .menu-item.show > .menu-link {
		background: rgba(255, 255, 255, .06);
	}
}

/* The panel is 400px (w-400px); on a phone it takes the screen less a margin, and its
   list gets a little more room so a two-line title does not crowd. */
@media (max-width: 575.98px) {
	/* A sheet under the header, 12px from both edges, instead of a 400px box the theme
	   anchors to one side. The theme positions the menu inline (popper), hence !important. */
	#kt_menu_notifications.ntf-panel.show {
		position: fixed !important;
		inset: 70px 12px auto 12px !important;
		width: auto !important;
		transform: none !important;
	}

	.ntf-panel .scroll-y {
		max-height: 60vh;
	}

	.ntf-head {
		padding: 16px 16px 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	#kt_header .menu > .menu-item > .menu-link.hdr-link,
	#kt_header .menu > .menu-item > .menu-link.hdr-link::after,
	.ntf-panel .fx-ntf-tab,
	.ntf-panel .fx-ntf-row,
	.ntf-title {
		transition: none;
	}
}