@charset "utf-8";

/* ==========================================================================
   IMLARCO - mobile UI/UX layer
   Loaded after master7d7d.css on every page. Phone/tablet only (<= 960px),
   so desktop is untouched.
   ========================================================================== */

@media screen and (max-width: 960px) {

	/* --- 1. no sideways scrolling ------------------------------------------
	   the hamburger button sat 10px outside the viewport, which let the whole
	   page slide horizontally. */
	.c-navigation__hamburger {
		right: 0 !important;
	}

	html,
	body {
		overflow-x: hidden;
	}

	/* --- 2. readable paragraphs -------------------------------------------
	   justified text opens big white gaps between words on a narrow screen. */
	p,
	li,
	dd,
	.description,
	.institutional-lead-text,
	.c-general__inner p,
	.adjusted-paragraph {
		text-align: start !important;
		text-justify: auto !important;
	}

	/* --- 3. comfortable tap targets (>= 44px) ------------------------------ */
	html footer.home-footer-tysers a.footer-premium-link,
	html[dir="rtl"] footer.home-footer-tysers a.footer-premium-link,
	.footer-premium-link {
		display: inline-block !important;
		padding: 14px 0 !important;
	}

	/* section titles and cards: links you can actually hit */
	.country-card__title a,
	.country-card h3 a,
	.c-offcanvas a,
	.branches-sidebar__links a,
	.locations-sidebar__list a {
		align-items: center;
		display: inline-flex;
		min-height: 44px;
	}

	/* slider dots: keep the thin bar, enlarge the area you can hit */
	.slick-dots li {
		align-items: center;
		display: inline-flex;
		min-height: 30px;
	}

	.slick-dots li button {
		background-clip: padding-box !important;
		border-bottom: 12px solid transparent !important;
		border-top: 12px solid transparent !important;
		box-sizing: content-box !important;
	}

	footer .text-gray-dark,
	footer a[title] svg {
		align-items: center;
		display: inline-flex;
		justify-content: center;
		min-height: 44px;
		min-width: 44px;
	}

	.country-card__read-more,
	.country-card__link,
	.pub-link,
	.vshow__link,
	.branches-link,
	.branch-directory__link,
	.locations-sidebar__list a,
	.c-mega__services-btn {
		align-items: center;
		display: inline-flex;
		min-height: 44px;
	}

	/* --- 4. nothing below 12px -------------------------------------------- */
	.vshow__time,
	.vshow__badge,
	.vshow__side-title,
	.pub-card__series,
	.badge-category,
	.badge-location,
	.country-card__tag,
	.footer-premium-copyright,
	.service-image-card__headline,
	.service-image-card__tag,
	.service-image-card__date,
	.pub-citation strong {
		font-size: .8rem !important;
	}

	/* --- 5. floating WhatsApp button --------------------------------------
	   smaller, inside the safe area, and no longer sitting on top of text. */
	.whatsapp-float {
		bottom: calc(14px + env(safe-area-inset-bottom)) !important;
		font-size: 26px !important;
		height: 52px !important;
		right: calc(14px + env(safe-area-inset-right)) !important;
		width: 52px !important;
	}

	[dir="rtl"] .whatsapp-float {
		left: calc(14px + env(safe-area-inset-left)) !important;
		right: auto !important;
	}

	/* --- 6. home hero: readable headline + a visible call to action -------- */
	#hero_238604 .hero .title-block--plain-center .title-block__title p.hero-welcome-text,
	#hero_238604 .hero .title-block--plain-center .title-block__title h1.hero-welcome-text {
		font-size: clamp(1.55rem, 6.6vw, 2.3rem) !important;
		line-height: 1.25 !important;
	}

	#hero_238604 .hero .title-block--plain-center .title-block__title p.hero-welcome-text--single-line,
	#hero_238604 .hero .title-block--plain-center .title-block__title h1.hero-welcome-text--single-line {
		font-size: clamp(1.45rem, 6.2vw, 2.1rem) !important;
		white-space: normal !important;
	}

	/* the old rules hid the whole supporting block on phones, which removed the
	   hero call-to-action; bring the button back (but not the long paragraphs) */
	#hero_238604 .hero .title-block__supporting {
		display: block !important;
		margin-top: 22px;
	}

	#hero_238604 .hero .title-block__supporting p:not(.btn) {
		display: none !important;
	}

	#hero_238604 .hero .btn a.hero-split-btn .hero-split-btn__label {
		padding: 14px 18px;
	}

	#hero_238604 .hero .btn.btn--block {
		display: flex !important;
		justify-content: center;
		margin: 0;
	}

	#hero_238604 .hero .btn a.hero-split-btn {
		justify-content: center;
		min-height: 48px;
		min-width: min(280px, 78vw);
	}

	/* --- 7. footer: one column, nothing overlapping ------------------------ */
	footer.home-footer-tysers .grid.grid-cols-2 {
		gap: 26px !important;
		grid-template-columns: 1fr !important;
	}

	footer.home-footer-tysers .footer-premium-heading {
		margin-bottom: 4px;
	}

	footer.home-footer-tysers .footer-premium-copyright p {
		line-height: 1.7;
		overflow-wrap: anywhere;
		padding: 0 8px;
	}

	/* --- 8. forms: no zoom-on-focus on iOS (needs >= 16px) ----------------- */
	input,
	select,
	textarea {
		font-size: max(16px, 1rem);
	}

	input:not([type="checkbox"]):not([type="radio"]),
	select {
		min-height: 46px;
	}

	label {
		line-height: 1.5;
	}
}

/* ==========================================================================
   Mobile menu (mmenu off-canvas)
   ========================================================================== */
.mm-menu {
	--mm-color-background: #0c2140;
	--mm-color-background-highlight: rgba(255, 255, 255, .06);
	--mm-color-background-emphasis: rgba(198, 154, 94, .16);
	--mm-color-border: rgba(255, 255, 255, .09);
	--mm-color-button: rgba(255, 255, 255, .75);
	--mm-color-text: #ffffff;
	--mm-color-text-dimmed: rgba(226, 235, 245, .66);
	--mm-listitem-size: 56px;
	--mm-navbar-size: 62px;
	background-image: linear-gradient(170deg, #0c2140 0%, #123152 62%, #0b2038 100%);
	box-shadow: -18px 0 46px rgba(3, 12, 26, .5);
}

.mm-menu .mm-navbar {
	align-items: center;
	background: transparent;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.mm-menu .mm-navbar__title > span {
	font-family: Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .28em;
	text-transform: uppercase;
}

/* the library prints an English "Menu" label - show the Arabic word on the Arabic site */
html[dir="rtl"] .mm-menu .mm-navbar__title > span {
	font-size: 0;
	letter-spacing: 0;
}

html[dir="rtl"] .mm-menu .mm-navbar__title > span::after {
	content: "القائمة";
	font-family: 'Cairo', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0;
}

.mm-menu .mm-listitem {
	font-family: Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
}

.mm-menu .mm-listitem::after {
	inset-inline-start: 20px;
	opacity: .55;
}

.mm-menu .mm-listitem__text {
	font-size: 1.02rem;
	font-weight: 500;
	padding-block: 16px;
	padding-inline-start: 20px;
}

.mm-menu .mm-listitem__text > svg,
.mm-menu .mm-listitem__text > i {
	color: #c69a5e;
	flex: none;
	margin-inline-end: 12px;
	opacity: .95;
}

.mm-menu .mm-listitem:hover > .mm-listitem__text,
.mm-menu .mm-listitem__text:focus-visible {
	background: rgba(255, 255, 255, .07);
}

/* current page */
.mm-menu .mm-listitem.is-active > .mm-listitem__text,
.mm-menu .mm-listitem--selected > .mm-listitem__text {
	background: rgba(198, 154, 94, .16);
	box-shadow: inset 3px 0 0 #c69a5e;
}

html[dir="rtl"] .mm-menu .mm-listitem.is-active > .mm-listitem__text,
html[dir="rtl"] .mm-menu .mm-listitem--selected > .mm-listitem__text {
	box-shadow: inset -3px 0 0 #c69a5e;
}

/* section labels inside the menu */
.mm-menu .c-offcanvas__divider,
.mm-menu .mm-listitem.c-offcanvas__divider {
	background: transparent;
	color: rgba(226, 235, 245, .55);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .2em;
	padding: 18px 20px 6px;
	text-transform: uppercase;
}

/* Arabic: letter-spacing breaks the joined letters, and Cairo is the site font */
html[dir="rtl"] .mm-menu .c-offcanvas__divider,
html[dir="rtl"] .mm-menu .mm-listitem.c-offcanvas__divider {
	font-family: 'Cairo', sans-serif;
	font-size: .84rem;
	letter-spacing: 0;
}

html[dir="rtl"] .mm-menu .mm-listitem__text {
	font-family: 'Cairo', sans-serif;
}

/* quick actions at the end of the menu */
.mm-menu .c-offcanvas__action > .mm-listitem__text,
.mm-menu a.c-offcanvas__action {
	border-radius: 10px;
	font-weight: 600;
	margin: 8px 16px;
	padding: 14px 18px !important;
}

.mm-menu .c-offcanvas__action--gold > .mm-listitem__text,
.mm-menu a.c-offcanvas__action--gold {
	background: linear-gradient(120deg, #c69a5e, #a97f45);
	color: #10243f !important;
}

.mm-menu .c-offcanvas__action--gold .mm-listitem__text > svg,
.mm-menu a.c-offcanvas__action--gold > svg {
	color: #10243f;
}

.mm-menu .c-offcanvas__action--ghost > .mm-listitem__text,
.mm-menu a.c-offcanvas__action--ghost {
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .22);
}

.mm-menu .mm-listitem.c-offcanvas__action::after,
.mm-menu .mm-listitem.c-offcanvas__divider::after {
	display: none;
}

/* close / back buttons big enough to hit */
.mm-menu .mm-btn {
	height: var(--mm-navbar-size);
	width: 56px;
}

.mm-wrapper__blocker {
	background: rgba(4, 14, 28, .62);
	backdrop-filter: blur(2px);
}

@media screen and (max-width: 420px) {
	.mm-menu {
		--mm-listitem-size: 52px;
	}
}