/*
 * Shared by every regional site (region/<slug>/ links this one file through RegionAssets;
 * no region carries a copy). Everything takes its colour from the region's --region-color
 * (settings.php $backgroundBG, printed as :root{--region-color} by the page).
 *   1. Inner-page header band (global/header.dwt): the portal's hero video, tinted.
 *   2. Footer tint (global/footer.dwt).
 */

/* 1. Header band - the classes the portal's header.dwt styles inline. */
.devOfEdu-header-h {
	position: absolute;
	width: 100%;
	height: 350px;
}

.z-2 {
	z-index: -2;
}

.tw-object-cover {
	object-fit: cover;
}

.tw-right-0 {
	right: 0;
}

.tw-top-0 {
	top: 0;
}

.video-container {
	position: relative;
}

.video-overlay {
	display: block;
	max-width: 100%;
	opacity: 0.35;
	filter: saturate(0.1);
}

.overlayx {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	background-color: var(--region-color, #063b42);
	mix-blend-mode: color;
}

.overlayx::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, #0000009f 0%, color-mix(in srgb, var(--region-color, #063b42) 82%, transparent) 78%, var(--region-color, #063b42) 100%);
	pointer-events: none;
}

/* The theme shrinks the page backdrop to 200px under lg; the band stays 350px. */
@media (max-width: 991.98px) {
	body:not(.app-blank) {
		background-size: 100% 350px;
	}
}

/* 0. The region's colour in the portal theme's roles (owner, 2026-10-29). The page prints
   --region-base / -deep / -light / -dark-btn / -dark-btn-hover / -rgb from the region's
   colour (RegionAssets::palette, darkened until white text reads). Each portal module
   sheet paints with its own --<prefix>-teal / -teal-deep / -primary-rgb and Bootstrap's
   --bs-primary; redefined on the region's <body>, they win over the sheets' :root values
   for everything on the page - buttons, the active page number, hover borders, links. */
.region-site {
	/* the shared header sheet (assets/css/modules/chrome/header.css): menu pill + notifications */
	--hdr-base: var(--region-base);
	--hdr-deep: var(--region-deep);
	--hdr-light: var(--region-light);
	--hdr-rgb: var(--region-rgb);
	--hdr-dark-btn: var(--region-dark-btn);
	--bs-primary: var(--region-base);
	--bs-primary-rgb: var(--region-rgb);
	--bs-primary-active: var(--region-deep);
	--bs-text-primary: var(--region-base);
	--fxt-teal: var(--region-base);   --fxt-teal-deep: var(--region-deep);   --fxt-primary-rgb: var(--region-rgb);
	--fxal-teal: var(--region-base);  --fxal-teal-deep: var(--region-deep);  --fxal-primary-rgb: var(--region-rgb);
	--lib-teal: var(--region-base);   --lib-teal-deep: var(--region-deep);   --lib-primary-rgb: var(--region-rgb);
	--fxu-teal: var(--region-base);   --fxu-teal-deep: var(--region-deep);   --fxu-primary-rgb: var(--region-rgb);
	--fxpg-teal: var(--region-base);  --fxpg-teal-deep: var(--region-deep);  --fxpg-primary-rgb: var(--region-rgb);
	--fxcu-teal: var(--region-base);  --fxcu-teal-deep: var(--region-deep);  --fxcu-primary-rgb: var(--region-rgb);
	--fx404-teal: var(--region-base); --fx404-teal-deep: var(--region-deep); --fx404-primary-rgb: var(--region-rgb);
	--fxc-teal: var(--region-base);   --fxc-teal-deep: var(--region-deep);   --fxc-primary-rgb: var(--region-rgb);
	--fxmz-teal: var(--region-base);  --fxmz-teal-deep: var(--region-deep);  --fxmz-primary-rgb: var(--region-rgb);
}

/* Dark mode: the teal turns into the lighter ink, as the portal's sheets do. */
[data-bs-theme="dark"] .region-site {
	--bs-text-primary: var(--region-light);
	--fxt-teal: var(--region-light);
	--fxal-teal: var(--region-light);
	--lib-teal: var(--region-light);
	--fxu-teal: var(--region-light);
	--fxpg-teal: var(--region-light);
	--fxcu-teal: var(--region-light);
	--fx404-teal: var(--region-light);
	--fxc-teal: var(--region-light);
	--fxmz-teal: var(--region-light);
}

/* The portal's dark-mode buttons are written as hex (#2E7F96 / #3C9AB4), not tokens. */
[data-bs-theme="dark"] .region-site .fxt-search-btn,
[data-bs-theme="dark"] .region-site .fxal-search-btn,
[data-bs-theme="dark"] .region-site .fxlib-search-btn,
[data-bs-theme="dark"] .region-site .fxu-search-btn,
[data-bs-theme="dark"] .region-site .fxpg-search-btn,
[data-bs-theme="dark"] .region-site .fxmz-search-btn,
[data-bs-theme="dark"] .region-site .fx404-btn {
	background: var(--region-dark-btn);
}

[data-bs-theme="dark"] .region-site .fxt-search-btn:hover,
[data-bs-theme="dark"] .region-site .fxt-search-btn:focus-visible,
[data-bs-theme="dark"] .region-site .fxal-search-btn:hover,
[data-bs-theme="dark"] .region-site .fxal-search-btn:focus-visible,
[data-bs-theme="dark"] .region-site .fxlib-search-btn:hover,
[data-bs-theme="dark"] .region-site .fxlib-search-btn:focus-visible,
[data-bs-theme="dark"] .region-site .fxu-search-btn:hover,
[data-bs-theme="dark"] .region-site .fxu-search-btn:focus-visible,
[data-bs-theme="dark"] .region-site .fxpg-search-btn:hover,
[data-bs-theme="dark"] .region-site .fxpg-search-btn:focus-visible,
[data-bs-theme="dark"] .region-site .fxmz-search-btn:hover,
[data-bs-theme="dark"] .region-site .fxmz-search-btn:focus-visible,
[data-bs-theme="dark"] .region-site .fx404-btn:hover,
[data-bs-theme="dark"] .region-site .fx404-btn:focus-visible {
	background: var(--region-dark-btn-hover);
}

/* Metronic's own primary button carries its colours in --bs-btn-* on .btn-primary. */
.region-site .btn.btn-primary {
	--bs-btn-bg: var(--region-base);
	--bs-btn-border-color: var(--region-base);
	--bs-btn-hover-bg: var(--region-deep);
	--bs-btn-hover-border-color: var(--region-deep);
	--bs-btn-active-bg: var(--region-deep);
	--bs-btn-active-border-color: var(--region-deep);
	background-color: var(--region-base);
	border-color: var(--region-base);
}

.region-site .btn.btn-primary:hover,
.region-site .btn.btn-primary:focus-visible {
	background-color: var(--region-deep);
	border-color: var(--region-deep);
}

/* 0b. The region's name beside the logo: one line, shortened with an ellipsis when long
   («الولايات المتحدة الأمريكية» took two lines and pushed the menu). Full name in title. */
#kt_header .region-name {
	max-width: 11rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 1b. The title band of every module page fades into a fixed navy (rgba(5, 27, 34)) in
   the portal's module sheets. On a region it fades into a dark shade of the region's
   own colour instead (owner, 2026-10-29). Same stops as the portal's ramp; the
   selector carries .region-site, so it wins over the module sheet without !important. */
.region-site {
	--region-dark: color-mix(in srgb, var(--region-color, #063b42) 38%, #000);
}

.region-site .fxt-hero::before,
.region-site .fxal-hero::before,
.region-site .fxlib-hero::before,
.region-site .fxu-hero::before,
.region-site .fxpg-hero::before,
.region-site .fxcu-hero::before,
.region-site .fxmz-hero::before,
.region-site .fx404-hero::before {
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--region-dark) 0%, transparent) 0%,
		color-mix(in srgb, var(--region-dark) 10%, transparent) 30%,
		color-mix(in srgb, var(--region-dark) 34%, transparent) 52%,
		color-mix(in srgb, var(--region-dark) 70%, transparent) 74%,
		color-mix(in srgb, var(--region-dark) 92%, transparent) 89%,
		var(--region-dark) 100%);
}

/* 2. Footer */
.region-footer {
	width: 100%;
	background: var(--region-color, #00809c) linear-gradient(180deg, color-mix(in srgb, var(--region-color, #00809c) 50%, transparent) 20%, color-mix(in srgb, var(--region-color, #00809c) 80%, black) 18%, var(--region-color, #00809c) 100%) 0% 0% no-repeat padding-box;
}