/* MAAN website updates, 2026. Loaded after css/style.css. */

/* 1. Arabic menu: the second-level menu (e.g. About us → Historical context → …) opened on top of the first one,
      because the Arabic rule that pins menus to the right also caught it. It now opens beside it, to the left. */
@media (min-width: 1024px) {
	.arabic header .menu-holder .menu .item .sub-menu .item1 .sub-menu {
		left: auto;
		right: 100%;
		top: 0;
		width: 170px; /* stays on screen at 1024px, where the Arabic menu sits close to the left edge */
		transform-origin: right;
		transform: translateX(-10px);
	}
	.arabic header .menu-holder .menu .item .sub-menu .item1:hover .sub-menu {
		transform: translateX(0);
	}
	.arabic header .menu-holder .menu .item .sub-menu .item1 .sub-menu:after {
		left: auto;
		right: -13px;
		top: 6px;
		border-color: transparent transparent transparent #fff;
	}
	.arabic header .menu-holder .menu .item .sub-menu .item1 .sub-menu:before {
		left: auto;
		right: -16px;
		top: 5px;
		border-color: transparent transparent transparent #efefef;
	}
	.arabic header .menu-holder .menu .item .sub-menu .item1 .icon:before {
		content: '\f053';
	}
}

/* 2. Arabic pages: titles and texts that stayed left-aligned (publication titles, the Programs pages). */
.arabic #news .item .info,
.arabic #news .item .info .title,
.arabic #services .section,
.arabic #services .section .title,
.arabic #services .section .label,
.arabic #services .section .desc,
.arabic #services .sec-desc,
.arabic #faq .container {
	text-align: right;
	direction: rtl;
}

/* 3. Phones: justified text left big gaps between words. Text runs naturally from its starting side instead. */
@media (max-width: 767px) {
	.sec-desc,
	.desc,
	.description,
	p,
	[style*="justify"] {
		text-align: start !important;
	}
	.arabic .sec-desc,
	.arabic .desc,
	.arabic .description,
	.arabic p,
	.arabic [style*="justify"] {
		text-align: right !important;
	}
	/* the floating share button covered page titles: it now sits lower, clear of the headings */
	#social-media {
		top: auto;
		bottom: 110px;
	}
}

/* 4. Contact details were pale grey on white. */
#contact .info-holder .info,
#contact .info-holder .value,
#contact .info-holder .item h3 {
	color: #23284a;
}

/* 5. Contact map: a plain Google map (no key needed). */
#contact-map {
	border: 0;
	display: block;
	width: 100%;
	height: 500px;
	border-radius: 6px;
	background: #e9ecf6;
}
@media (max-width: 767px) {
	#contact-map {
		height: 320px;
	}
}

/* 6. New logo: the mark alone, a little narrower than the old logo with its word. */
header .menu-holder .logo-holder .logo {
	width: auto;
}

/* 7. Publications: "View" and "Download" under each publication, and the reader that opens in the page. */
#news .item .maan-pub-actions {
	display: flex;
	gap: 8px;
	padding: 0 12px 14px;
}
#news .item .maan-pub-actions a {
	flex: 1 1 0;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 10px;
	border-radius: 4px;
	font-weight: 700;
	text-decoration: none;
	border: 2px solid #2b3a93;
	white-space: nowrap;
}
#news .item .maan-pub-actions .view {
	background: #2b3a93;
	color: #fff;
}
#news .item .maan-pub-actions .download {
	background: #fff;
	color: #2b3a93;
}
#news .item .maan-pub-actions a:hover,
#news .item .maan-pub-actions a:focus-visible {
	filter: brightness(1.12);
	outline: none;
	box-shadow: 0 0 0 3px rgba(43, 58, 147, .25);
}
#news .item .maan-pub-actions .size {
	font-weight: 400;
	font-size: 12px;
	opacity: .8;
}
.maan-reader {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(15, 18, 40, .82);
	display: none;
	flex-direction: column;
}
.maan-reader.open {
	display: flex;
}
.maan-reader .bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	background: #2b3a93;
	color: #fff;
}
.maan-reader .bar .name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 700;
}
.maan-reader .bar a,
.maan-reader .bar button {
	background: #fff;
	color: #2b3a93;
	border: 0;
	border-radius: 4px;
	padding: 8px 14px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
}
.maan-reader iframe {
	flex: 1 1 auto;
	width: 100%;
	border: 0;
	background: #fff;
}

/* 8. Opportunities: a list of opportunities, each with "Apply", and the volunteer application form. */
#maan-opps {
	padding-top: 40px;
	padding-bottom: 70px;
}
#maan-opps .intro {
	max-width: 760px;
	margin: 0 auto 30px;
	font-size: 17px;
	line-height: 1.7;
	color: #373737;
	text-align: center;
}
#maan-opps .opps {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 20px;
	margin-bottom: 40px;
}
#maan-opps .opp {
	background: #fff;
	border: 1px solid #e3e6f2;
	border-top: 4px solid #2b3a93;
	border-radius: 6px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}
#maan-opps .opp .type {
	align-self: flex-start;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #2b3a93;
	background: #e7eaf7;
	padding: 3px 10px;
	border-radius: 999px;
}
#maan-opps .opp h3 {
	margin: 0;
	font-size: 20px;
	line-height: 1.3;
	color: #1d2240;
}
#maan-opps .opp .meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	font-size: 14px;
	color: #5b6080;
}
#maan-opps .opp .summary {
	color: #373737;
	line-height: 1.65;
	flex: 1 1 auto;
}
#maan-opps .opp .more {
	color: #373737;
	line-height: 1.65;
}
#maan-opps .opp .actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}
#maan-opps .btn-apply,
#maan-opps .btn-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	border-radius: 4px;
	font-weight: 700;
	cursor: pointer;
	border: 2px solid #2b3a93;
	font: inherit;
	font-weight: 700;
	text-decoration: none;
}
#maan-opps .btn-apply {
	background: #2b3a93;
	color: #fff;
}
#maan-opps .btn-more {
	background: #fff;
	color: #2b3a93;
}
#maan-opps .empty {
	text-align: center;
	color: #5b6080;
	padding: 20px;
	background: #fff;
	border: 1px dashed #cfd4ea;
	border-radius: 6px;
	margin-bottom: 30px;
}
#maan-apply {
	background: #fff;
	border: 1px solid #e3e6f2;
	border-radius: 8px;
	padding: 28px;
	max-width: 820px;
	margin: 0 auto;
	scroll-margin-top: 90px;
}
#maan-apply h2 {
	margin: 0 0 6px;
	color: #1d2240;
	font-size: 26px;
}
#maan-apply .lead {
	margin: 0 0 20px;
	color: #5b6080;
}
#maan-apply .grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 18px;
}
#maan-apply .full {
	grid-column: 1 / -1;
}
#maan-apply label {
	display: block;
	font-weight: 700;
	font-size: 14px;
	color: #1d2240;
	margin-bottom: 6px;
}
#maan-apply label .opt {
	font-weight: 400;
	color: #5b6080;
}
#maan-apply input[type=text],
#maan-apply input[type=email],
#maan-apply input[type=tel],
#maan-apply select,
#maan-apply textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 12px;
	border: 1px solid #c9cee4;
	border-radius: 4px;
	font: inherit;
	font-size: 16px;
	background: #fff;
	color: #1d2240;
}
#maan-apply textarea {
	min-height: 130px;
	resize: vertical;
}
#maan-apply input:focus,
#maan-apply select:focus,
#maan-apply textarea:focus {
	outline: none;
	border-color: #2b3a93;
	box-shadow: 0 0 0 3px rgba(43, 58, 147, .18);
}
#maan-apply .checks {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 18px;
}
#maan-apply .checks label {
	display: flex;
	gap: 8px;
	align-items: center;
	font-weight: 400;
	margin: 0;
}
#maan-apply .hint {
	font-size: 13px;
	color: #5b6080;
	margin-top: 4px;
}
#maan-apply .hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
#maan-apply .consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-weight: 400;
}
#maan-apply button[type=submit] {
	margin-top: 8px;
	background: #2b3a93;
	color: #fff;
	border: 0;
	border-radius: 4px;
	padding: 13px 28px;
	font: inherit;
	font-size: 17px;
	font-weight: 700;
	cursor: pointer;
}
#maan-apply .notice {
	padding: 14px 16px;
	border-radius: 6px;
	margin-bottom: 18px;
	line-height: 1.6;
}
#maan-apply .notice.ok {
	background: #e3f2ea;
	color: #1f5c3d;
	border: 1px solid #a9d7bd;
}
#maan-apply .notice.err {
	background: #fbe9e7;
	color: #8c1d18;
	border: 1px solid #efb7b1;
}
.arabic #maan-opps,
.arabic #maan-apply {
	direction: rtl;
	text-align: right;
}
.arabic #maan-opps .intro {
	text-align: center;
}
@media (max-width: 767px) {
	#maan-apply {
		padding: 20px 16px;
	}
	#maan-apply .grid,
	#maan-apply .checks {
		grid-template-columns: 1fr;
	}
}

/* Arabic: "View" first on the right, and the reader's bar reads right to left. */
.arabic #news .item .maan-pub-actions,
.arabic .maan-reader .bar {
	direction: rtl;
}

/* The site's older styles stretch every input to full width; checkboxes and the file field keep their own size here. */
#maan-apply input[type=checkbox] {
	width: 18px !important;
	height: 18px;
	flex: 0 0 18px;
	margin: 0 !important;
	display: inline-block;
	accent-color: #2b3a93;
}
#maan-apply input[type=file] {
	width: 100%;
	max-width: 100%;
	display: block;
	font-size: 15px;
}
#maan-apply .checks label,
#maan-apply .consent {
	text-align: start;
	justify-content: flex-start;
}

/* 9. Share button: shares the page being viewed (WhatsApp, Facebook, LinkedIn, X, email, copy link). */
#social-media .menu {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	line-height: 1;
	cursor: pointer;
}
#social-media .menu:focus-visible,
#social-media .social:focus-visible {
	outline: 3px solid #9fb0ff;
	outline-offset: 2px;
}
#social-media .maan-share-list {
	display: flex;
	flex-direction: column;
}
#social-media .icon.social {
	text-decoration: none;
	width: 38px;
	box-sizing: border-box;
}
#social-media .maan-share-done {
	position: absolute;
	left: 46px;
	top: 6px;
	white-space: nowrap;
	background: #1d2240;
	color: #fff;
	font-size: 13px;
	padding: 5px 10px;
	border-radius: 4px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s;
}
#social-media.copied .maan-share-done {
	opacity: 1;
	visibility: visible;
}

/* 10. Contact page: a slim title band instead of the big banner picture. */
.page-head.maan-slim-head {
	min-height: 120px;
}
.page-head.maan-slim-head .title {
	margin: 0;
	color: #fff;
}
@media (max-width: 767px) {
	.page-head.maan-slim-head {
		min-height: 90px;
	}
}

/* 11. Photo slideshows (program pages and the program cards on the home page). One photo stays still. */
.maan-gallery {
	position: relative;
	margin: 0 auto;
	background: #f1f3f9;
	border-radius: 6px;
	overflow: hidden;
}
.maan-gallery .mg-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}
.maan-gallery .mg-track::-webkit-scrollbar {
	display: none;
}
.maan-gallery .mg-slide {
	flex: 0 0 100%;
	margin: 0;
	scroll-snap-align: start;
}
.maan-gallery .mg-open {
	display: block;
	height: 100%;
	cursor: zoom-in;
}
.maan-gallery img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.maan-gallery-page {
	max-width: 960px;
}
.maan-gallery-page .mg-slide {
	height: 500px;
}
.maan-gallery-card {
	width: 100%;
	border-radius: 0;
}
.maan-gallery-card .mg-slide {
	height: 200px;
}
.maan-gallery-card img {
	object-fit: cover;
}
.maan-gallery .mg-prev,
.maan-gallery .mg-next,
.mg-box .mg-prev,
.mg-box .mg-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(29, 34, 64, .72);
	color: #fff;
	cursor: pointer;
	font: 900 18px 'Font Awesome 5 Free';
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.maan-gallery .mg-prev,
.mg-box .mg-prev {
	left: 10px;
}
.maan-gallery .mg-next,
.mg-box .mg-next {
	right: 10px;
}
.maan-gallery .mg-prev:before,
.mg-box .mg-prev:before {
	content: '\f053';
}
.maan-gallery .mg-next:before,
.mg-box .mg-next:before {
	content: '\f054';
}
/* Arabic: the photos run right to left, so the next photo is to the left. */
.arabic .maan-gallery,
.arabic .mg-box {
	direction: rtl;
}
.arabic .maan-gallery .mg-prev,
.arabic .mg-box .mg-prev {
	left: auto;
	right: 10px;
}
.arabic .maan-gallery .mg-next,
.arabic .mg-box .mg-next {
	right: auto;
	left: 10px;
}
.arabic .maan-gallery .mg-prev:before,
.arabic .mg-box .mg-prev:before {
	content: '\f054';
}
.arabic .maan-gallery .mg-next:before,
.arabic .mg-box .mg-next:before {
	content: '\f053';
}
.maan-gallery .mg-prev:hover,
.maan-gallery .mg-next:hover,
.maan-gallery .mg-prev:focus-visible,
.maan-gallery .mg-next:focus-visible {
	background: #2b3a93;
	outline: 3px solid #fff;
	outline-offset: -3px;
}
.maan-gallery .mg-count,
.mg-box .mg-count {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(29, 34, 64, .72);
	color: #fff;
	font-size: 13px;
	line-height: 1;
	padding: 6px 10px;
	border-radius: 999px;
	direction: ltr;
	pointer-events: none;
}
.maan-gallery-card .mg-prev,
.maan-gallery-card .mg-next {
	width: 34px;
	height: 34px;
	font-size: 14px;
}
.mg-box {
	border: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	max-width: 100vw;
	max-height: 100vh;
	background: transparent;
}
.mg-box::backdrop {
	background: rgba(10, 12, 28, .92);
}
.mg-box[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}
.mg-box img {
	max-width: calc(100vw - 120px);
	max-height: calc(100vh - 80px);
	object-fit: contain;
}
.mg-box .mg-prev,
.mg-box .mg-next,
.mg-box .mg-count {
	display: none;
}
.mg-box.is-multi .mg-prev,
.mg-box.is-multi .mg-next,
.mg-box.is-multi .mg-count {
	display: flex;
}
.mg-box .mg-box-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .15);
	color: #fff;
	font: 900 20px 'Font Awesome 5 Free';
	cursor: pointer;
}
.mg-box .mg-box-close:before {
	content: '\f00d';
}
.arabic .mg-box .mg-box-close {
	right: auto;
	left: 12px;
}
@media (max-width: 767px) {
	.maan-gallery-page .mg-slide {
		height: 280px;
	}
	.maan-gallery .mg-prev,
	.maan-gallery .mg-next {
		width: 36px;
		height: 36px;
		font-size: 14px;
	}
	.mg-box img {
		max-width: 100vw;
		max-height: calc(100vh - 120px);
	}
}

/* 12. Program pages: photos, then the text, one under the other (no more photo box floating to one side). */
#services.maan-program {
	padding: 40px 0 60px;
}
#services.maan-program .maan-album {
	margin: 0 0 36px;
}
#services.maan-program .maan-album-title {
	max-width: 960px;
	margin: 0 auto 14px;
	font-size: 22px;
	line-height: 1.35;
	color: #283891;
}
#services.maan-program .label,
#services.maan-program .maan-album .desc {
	max-width: 960px;
	margin: 12px auto 0;
	color: #373737;
	line-height: 1.7;
}
#services.maan-program .maan-program-text {
	max-width: 960px;
	margin: 0 auto;
	color: #373737;
	font-size: 16px;
	line-height: 1.75;
}
.arabic #services.maan-program .maan-album-title,
.arabic #services.maan-program .label,
.arabic #services.maan-program .maan-album .desc,
.arabic #services.maan-program .maan-program-text {
	direction: rtl;
	text-align: right;
}

/* 13. Home page program cards: equal cards, the photo and the text inside the card. */
#home-services .holder {
	gap: 0;
}
#home-services .item-holder .item {
	min-width: 0;
	overflow: hidden;
}
#home-services .item-holder .item .info {
	width: 100%;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
#home-services .item-holder .item .info .title {
	margin: 0;
}
#home-services .item-holder .item .info .desc {
	padding: 20px 14px 0;
	flex: 1 1 auto;
	color: #555;
}

/* 14. Arabic site: Arabic numerals in numbered lists and the slideshow counter reads right to left. */
.arabic ol {
	list-style-type: arabic-indic;
}
.arabic .maan-gallery .mg-count,
.arabic .mg-box .mg-count {
	direction: rtl;
}

/* 15. Phones and tablets (checked at 375px, English and Arabic). */
@media (max-width: 1023px) {
	/* Phone header as on desktop: logo at the start (left in English, right in Arabic), the language and
	   menu buttons at the other end with the menu button on the outside. The menu slides in from its button's side. */
	header .menu-holder {
		flex-direction: row;
	}
	header .menu-holder > .flexing {
		flex-direction: row-reverse;
		align-items: center;
		gap: 10px;
	}
	.arabic header .menu-holder .logo-holder {
		margin-right: 0;
	}
	header .menu-holder .menu {
		left: auto;
		right: 0;
		border-left: 1px solid #aaa;
		border-right: 0;
		transform: translateX(292px);
	}
	.arabic header .menu-holder .menu {
		left: 0;
		right: auto;
		border-right: 1px solid #aaa;
		border-left: 0;
		transform: translateX(-292px);
	}
	header .menu-holder .menu.active,
	.arabic header .menu-holder .menu.active {
		transform: translateX(0);
	}
	/* Arabic contact details: the desktop gap beside the map pushed them off the left edge. */
	.arabic #contact .holder .info-holder,
	#contact .info-holder {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}
}
/* Home page program cards: the short text is centred like the title and button, in both languages. */
#home-services .item-holder .item .info .desc,
#home-services .item-holder .item .info .desc p {
	text-align: center !important;
}
/* Arabic footer reads right to left: logo first on the right, then contacts and the about text. */
.arabic #home-footer .holder,
.arabic footer .holder {
	direction: rtl;
}
/* Two partner logos point to files that no longer exist; hide the broken images until the team sends them. */
#about img[src*="test/maan/"] {
	display: none;
}

/* 16. Program pages: album titles and texts line up with the page text (20px from the edge on phones). */
#services.maan-program .maan-album-title,
#services.maan-program .label,
#services.maan-program .maan-album .desc {
	padding-left: 10px;
	padding-right: 10px;
	box-sizing: border-box;
}
@media (max-width: 767px) {
	#maan-opps .intro {
		padding-left: 10px;
		padding-right: 10px;
	}
}

/* 17. Home page banner: MAAN identity slides, whole and sharp at every width (they have text in them). */
#home-slider.maan-hero {
	background: #2b3a93;
	padding: 0;
	height: auto;
}
.maan-gallery-hero {
	max-width: none;
	border-radius: 0;
	background: #2b3a93;
}
.maan-gallery-hero .mg-slide {
	aspect-ratio: 2400 / 928;
	height: auto;
}
.maan-gallery-hero img {
	object-fit: cover;
}

/* 18. "Who is MAAN?" on the home page: a softened photo under a dark blue layer, so the white text is easy to read. */
#home-overview.maan-overview {
	position: relative;
	overflow: hidden;
	background: #1d2240;
	padding: 70px 0;
}
#home-overview .ov-bg {
	position: absolute;
	inset: -24px;
	background-size: cover;
	background-position: center;
	filter: blur(5px) saturate(.8);
}
#home-overview .ov-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(29, 34, 64, .80), rgba(29, 34, 64, .88));
}
#home-overview .ov-content {
	position: relative;
	padding-left: 20px;
	padding-right: 20px;
}
#home-overview.maan-overview .holder .info {
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
}
#home-overview.maan-overview .holder .info .title {
	margin: 0;
	color: #fff;
}
#home-overview.maan-overview .holder .info .desc,
#home-overview.maan-overview .holder .info .desc p {
	color: #fff;
	font-size: 17px;
	line-height: 1.75;
	text-align: center !important;
}
@media (max-width: 767px) {
	#home-overview.maan-overview {
		padding: 44px 0;
	}
	#home-overview.maan-overview .holder .info .desc,
	#home-overview.maan-overview .holder .info .desc p {
		font-size: 16px;
	}
}

/* 19. Footer: logo and social media, the main pages, and the contact details, with the MAAN identity icons. */
#home-footer.maan-footer {
	background: #f4f5fa;
	border-top: 4px solid #2b3a93;
	padding: 44px 0 30px;
}
.maan-footer .mf-grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1.4fr;
	gap: 32px;
	padding: 0 10px;
}
.maan-footer h3 {
	margin: 0 0 14px;
	font-size: 17px;
	font-weight: 700;
	color: #1d2240;
}
.maan-footer .mf-logo {
	height: 76px;
	width: auto;
	display: block;
}
.maan-footer .mf-tag {
	margin: 12px 0 16px;
	color: #3d4366;
	font-size: 15px;
	line-height: 1.5;
}
.maan-footer .mf-social {
	display: flex;
	gap: 10px;
}
.maan-footer .mf-social a,
.maan-footer .mf-contact img {
	display: block;
	flex: none;
}
.maan-footer .mf-social img {
	width: 38px;
	height: 38px;
	display: block;
	border-radius: 8px;
}
.maan-footer .mf-social a:hover img,
.maan-footer .mf-social a:focus-visible img {
	filter: brightness(1.2);
}
.maan-footer li::before {
	content: none;
}
.maan-footer li,
.maan-footer li a {
	text-align: start;
}
.maan-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.maan-footer .mf-links ul {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 16px;
}
.maan-footer .mf-links a {
	color: #2b3a93;
	font-weight: 600;
	text-decoration: none;
}
.maan-footer .mf-links a:hover,
.maan-footer .mf-links a:focus-visible {
	text-decoration: underline;
}
.maan-footer .mf-contact a {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #23284a;
	text-decoration: none;
	line-height: 1.45;
	min-width: 0;
}
.maan-footer .mf-contact a span {
	min-width: 0;
	overflow-wrap: anywhere;
}
.maan-footer .mf-contact img {
	width: 32px;
	height: 32px;
	border-radius: 7px;
}
.arabic .maan-footer {
	direction: rtl;
	text-align: right;
}
@media (max-width: 900px) {
	.maan-footer .mf-grid {
		grid-template-columns: 1fr 1fr;
	}
	.maan-footer .mf-brand {
		grid-column: 1 / -1;
	}
}
@media (max-width: 560px) {
	.maan-footer .mf-grid {
		grid-template-columns: 1fr;
		gap: 26px;
	}
}

/* 20. Contact page: the MAAN identity icons instead of the round font icons. */
#contact .info-holder .info .maan-icon {
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: 7px;
	background: none;
	flex: none;
}

/* 21. About MAAN: Who is MAAN?, the concept, Vision and Mission and Why MAAN? on one page. */
.maan-about .ma-toc {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 26px 10px 8px;
}
.maan-about .ma-toc a {
	padding: 6px 14px;
	border: 1px solid #c9cee4;
	border-radius: 999px;
	color: #2b3a93;
	font-weight: 600;
	text-decoration: none;
	background: #fff;
}
.maan-about .ma-toc a:hover,
.maan-about .ma-toc a:focus-visible {
	background: #2b3a93;
	color: #fff;
}
.maan-about .ma-part {
	padding: 26px 0 6px;
	scroll-margin-top: 110px;
}
.maan-about .ma-part + .ma-part {
	border-top: 1px solid #e3e6f2;
}
.maan-about h2 {
	margin: 0 10px 12px;
	font-size: 24px;
	line-height: 1.3;
	color: #283891;
}
.maan-about .sec-desc {
	color: #373737;
	font-size: 16px;
	line-height: 1.75;
}
.maan-about .ma-concept {
	margin: 18px 10px 22px;
	padding: 22px 26px;
	background: #2b3a93;
	color: #fff;
	border-radius: 8px;
}
.maan-about .ma-concept h2 {
	margin: 0 0 8px;
	font-size: 14px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #e9b04f;
}
.maan-about .ma-concept-text,
.maan-about .ma-concept-text p {
	margin: 0;
	font-size: 20px;
	line-height: 1.5;
	font-weight: 700;
	color: #fff;
}
.arabic .maan-about,
.arabic .maan-partners,
.arabic .maan-portfolio {
	direction: rtl;
	text-align: right;
}
.arabic .maan-about .ma-concept h2 {
	letter-spacing: 0;
}

/* 22. Partners: logo cards in two groups, donors and programme partners. */
.maan-partners .mp-group {
	margin: 34px 10px 16px;
	font-size: 22px;
	color: #283891;
}
.maan-partners .mp-grid,
.maan-portfolio .mpf-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 18px;
	padding: 0 10px;
}
.maan-partners .mp-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px;
	background: #fff;
	border: 1px solid #e3e6f2;
	border-radius: 8px;
	min-width: 0;
}
.maan-partners .mp-logo {
	height: 110px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid #eef0f7;
	padding-bottom: 10px;
}
.maan-partners .mp-logo img {
	max-height: 96px;
	max-width: 80%;
	width: auto;
	object-fit: contain;
}
.maan-partners .mp-card h3 {
	margin: 0;
	font-size: 17px;
	line-height: 1.35;
	color: #1d2240;
}
.maan-partners .mp-bio,
.maan-partners .mp-bio p {
	margin: 0;
	color: #444a66;
	font-size: 14.5px;
	line-height: 1.65;
	flex: 1 1 auto;
}
.maan-partners .mp-more {
	align-self: flex-start;
	color: #2b3a93;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid #e9b04f;
}

/* 23. Portfolio: project cards (placeholders until the team adds its projects). */
.maan-portfolio .mpf-grid {
	margin-top: 30px;
	margin-bottom: 40px;
}
.maan-portfolio .mpf-card {
	background: #fff;
	border: 1px solid #e3e6f2;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.maan-portfolio .mpf-img {
	aspect-ratio: 16 / 10;
	background: #e7eaf7;
	display: flex;
	align-items: center;
	justify-content: center;
}
.maan-portfolio .mpf-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.maan-portfolio .mpf-img span {
	color: #2b3a93;
	font-weight: 700;
	letter-spacing: .04em;
}
.maan-portfolio .mpf-body {
	padding: 16px 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
}
.maan-portfolio .mpf-body h2 {
	margin: 0;
	font-size: 18px;
	color: #1d2240;
}
.maan-portfolio .mpf-text,
.maan-portfolio .mpf-text p {
	margin: 0;
	color: #444a66;
	line-height: 1.6;
}
.maan-portfolio .is-placeholder .mpf-body h2,
.maan-portfolio .is-placeholder .mpf-text,
.maan-portfolio .is-placeholder .mpf-text p {
	color: #8a8fab;
}
.maan-portfolio .mpf-more {
	margin-top: auto;
	align-self: flex-start;
	color: #2b3a93;
	font-weight: 700;
	text-decoration: none;
}

/* 24. Program photos: a blurred copy of the photo fills the sides of narrow photos instead of grey bars. */
.maan-gallery-page .mg-slide {
	position: relative;
	overflow: hidden;
}
.maan-gallery .mg-fill {
	display: none;
}
.maan-gallery-page .mg-fill {
	display: block;
	position: absolute;
	inset: -30px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	filter: blur(22px) brightness(.85);
}
.maan-gallery-page .mg-open {
	position: relative;
}

/* 25. Fonts. Tajawal (free, SIL Open Font License; fonts/tajawal/OFL.txt) for the English pages and as the
   fallback, served from this site instead of Google Fonts; DIN Next LT Arabic for the Arabic pages (below). */
@font-face {
	font-family: 'Tajawal';
	src: url('../fonts/tajawal/tajawal-400-arabic.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
	font-family: 'Tajawal';
	src: url('../fonts/tajawal/tajawal-400-latin.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Tajawal';
	src: url('../fonts/tajawal/tajawal-500-arabic.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
	font-family: 'Tajawal';
	src: url('../fonts/tajawal/tajawal-500-latin.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Tajawal';
	src: url('../fonts/tajawal/tajawal-700-arabic.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
	font-family: 'Tajawal';
	src: url('../fonts/tajawal/tajawal-700-latin.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Arabic pages: DIN Next LT Arabic, the MAAN identity font (files sent by MAAN, Nov 2026, used at MAAN's request;
   MAAN is responsible for its web licence). Tajawal stays as the fallback and for the English pages. */
@font-face {
	font-family: 'MAAN DIN Arabic';
	src: url('../fonts/din-arabic/din-next-arabic-300.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'MAAN DIN Arabic';
	src: url('../fonts/din-arabic/din-next-arabic-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'MAAN DIN Arabic';
	src: url('../fonts/din-arabic/din-next-arabic-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'MAAN DIN Arabic';
	src: url('../fonts/din-arabic/din-next-arabic-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
body.arabic {
	font-family: 'MAAN DIN Arabic', 'Tajawal', 'Tahoma', arial;
}

/* 26. Bottom bar: only the copyright line, centred. */
footer .holder {
	justify-content: center;
	text-align: center;
}

/* 27. Portfolio page: intro (Think & Act Tank), the printable portfolio buttons, and the projects heading. */
.maan-portfolio .mpf-intro {
	padding: 0 10px;
}
.maan-portfolio .mpf-intro h2,
.maan-portfolio .mpf-heading {
	margin: 30px 10px 12px;
	font-size: 22px;
	color: #283891;
}
.maan-portfolio .mpf-intro h2 {
	margin-inline: 0;
}
.maan-portfolio .mpf-intro p {
	line-height: 1.7;
	color: #444a66;
}
.maan-portfolio .mpf-pdf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin: 24px 10px 6px;
	padding: 16px 18px;
	background: #f3f5fb;
	border: 1px solid #e3e6f2;
	border-radius: 8px;
}
.maan-portfolio .mpf-pdf-label {
	font-weight: 700;
	color: #1d2240;
	margin-inline-end: auto;
}
.maan-portfolio .mpf-pdf .btn2 {
	margin: 0;
}