/*
 * Arab Invest - mobile legibility fixes.
 *
 * These are NOT RTL-specific: the defects below were measured identically on
 * the English pages, so this sheet loads for every language (unlike
 * arabinvest-rtl.css, which is Arabic-only).
 *
 * Everything here is a static style fix, verifiable by measurement. The known
 * mega-menu dropdown defect (panel stays at max-height:0 when opened) is
 * deliberately NOT addressed here - it needs interactive verification.
 */

/* =========================================================== 12px type floor
 *
 * Applies at EVERY width, not just phones: the sizes below are baked into the
 * widgets' own <style> blocks with no media query, so they measured the same
 * 10-11.8px at 1440px as at 390px.
 *
 * Measured offenders, all leaf text a visitor is meant to read:
 *   .lmc-rl   10.5px  leadership role line       (build_leadership.py)
 *   .cmc-rl   10px    committee member role      (build_committee.py)
 *   .cmh      10px    committee section heading  (build_committee.py)
 *   .dmc-rl   11px    director role line
 *   .dmc-ct   11px    director country ("The Kingdom of Saudi Arabia")
 *   .fsp-ph-l 11.8px  report card label ("QUARTERLY BRIEF - ISSUE 1")
 *
 * The class names were originally guessed as `-role` and matched NOTHING
 * (`.lmc-role` = 0 elements, `.lmc-rl` = 11), so the old rule sat dead and the
 * labels kept their built-in size.
 *
 * !important: these come from an inline <style> the widget prints in the body,
 * which is later in document order than this sheet and would otherwise win at
 * equal specificity.
 */
.lmc-rl,
.dmc-rl,
.dmc-ct,
.cmc-rl,
.cmh,
.fsp-ph-l {
	font-size: 12px !important;
}

/* Only the role lines get the looser leading - they are the ones that wrap. */
.lmc-rl,
.dmc-rl,
.cmc-rl {
	line-height: 1.4 !important;
}

/*
 * Committee tab row, desktop: the four committee buttons are set to 11px by
 * per-widget Elementor typography.
 *
 * Scoped to their shared container (verified to hold these four buttons and
 * nothing else) rather than to a class, because there is no class that
 * separates them from the 13-19px buttons elsewhere on the same page, and CSS
 * cannot express "raise anything below 12px". The id is stable across
 * languages - WPML copies the Elementor structure, so the Arabic page carries
 * the same one.
 *
 * NOT DONE, deliberately: assorted button labels compute 11.8px on reports,
 * contact-us, working-at, shareholder-affairs and news. Their size resists
 * every stylesheet-level override tried (an !important rule matching the <a>
 * changes nothing, and disabling each sheet in turn changes nothing), and at
 * 0.2px below the floor the difference is not visible. Fixing them would mean
 * hard-coding ~20 per-widget ids for no perceptible gain.
 */
.elementor-element-33548ad .elementor-button {
	font-size: 12px !important;
}

/* ========================================================= Home stat cards
 *
 * All four cards are built to the same design: the icon carries
 * `margin-bottom:auto`, pushing label + number to the bottom of the card.
 * Two of the four number widgets ($917m, 16) wrap their text in a <p> with a
 * 48px bottom margin (the other two have no <p>). That margin ate the free
 * space the icon's auto-margin should take, so those cards showed the number
 * high up under the icon while the other two showed it at the bottom -
 * identically in both languages, at every width.
 *
 * Zeroing it lets every card follow the design. Cards also lose that stray
 * 48px of height (they settle at their own 164px min-height on desktop); the
 * desktop stagger (margin-top:-34px on two cards) is untouched. Ids are shared
 * by the English and Arabic homepages.
 */
.elementor-element-3fe62c8 p:last-child,
.elementor-element-d037719 p:last-child,
.elementor-element-7e59567 p:last-child,
.elementor-element-5e9ca19 p:last-child {
	margin-bottom: 0;
}

@media (max-width: 1024px) {

	/* ---------------------------------------------- 1. Clipped name blocks */

	/*
	 * Person-card names were cut off: measured scrollHeight 37 vs clientHeight
	 * 32 on two-line names (and 21 vs 16 on one-line), so descenders and the
	 * second line were shaved. The cards fix their own height, so give the
	 * name block room and let it wrap instead of clipping.
	 */
	.dmc-nm,
	.cmc-nm,
	.lmc-nm {
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		overflow: visible !important;
		line-height: 1.35 !important;
		padding-bottom: 2px;
	}

	/* Hero headings were clipped the same way (scrollHeight 72 vs client 62). */
	.elementor-heading-title {
		overflow: visible;
	}

	/* --------------------------------------------- 2. Sub-legible type */

	/*
	 * The person-card label classes used to live here, scoped to phones. They
	 * are now in the global 12px floor near the top of this file, because the
	 * same labels measured 10-11px at 1440px too - the built-in sizes carry no
	 * media query, so the defect was never mobile-only.
	 */

	.elementor-location-footer .elementor-nav-menu a,
	.elementor-location-footer .menu-item a {
		font-size: 12px !important;
		line-height: 1.6 !important;
	}

	/*
	 * Section sub-nav pills (Investment Philosophy / Risk Management / ...).
	 *
	 * The plain `.elementor-widget-button .elementor-button` form is kept
	 * because it already carries most buttons to 12px - it is !important, so it
	 * beats Elementor's ordinary per-widget typography (13-14px) regardless of
	 * specificity. What it LOSES to is the pill rows, which carry a hand-written
	 * per-container override, e.g. on our-portfolio:
	 *
	 *   .elementor-990856 .elementor-element.elementor-element-e722ffe
	 *   .elementor-button{font-size:10px!important;padding:6px 10px!important;}
	 *
	 * That is four classes - (0,4,0) - and !important, so an !important rule
	 * only wins by carrying MORE classes. A first attempt at
	 * `.elementor-widget-button a.elementor-button.elementor-size-sm` was
	 * (0,4,1) on paper but only (0,3,1) in fact and still measured 10px. The
	 * form below pins both of the widget element's own classes to reach (0,4,1).
	 * Same override appears at 11px on leadership (ee829e2) and board
	 * committees (c1c03f0).
	 *
	 * This is a 12px FLOOR, never a shrink: every button measured across /,
	 * who-we-are, leadership, board-committee-members, working-at and
	 * contact-us at 390px was 10-12px, so nothing here is scaled down.
	 */
	.elementor-widget-button .elementor-button,
	.elementor-element.elementor-widget-button a.elementor-button.elementor-size-sm,
	.elementor-element.elementor-widget-button a.elementor-button.elementor-size-sm .elementor-button-text {
		font-size: 12px !important;
	}

	/* ------------------------------------------------- 3. Tap targets */

	/*
	 * Comfortable minimum is ~32px. The menu toggle measured 27x27 and footer
	 * links 20-29px tall. Padding is used rather than height so nothing
	 * reflows around them.
	 */
	.elementor-menu-toggle {
		min-width: 40px;
		min-height: 40px;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
	}

	.elementor-location-footer .elementor-nav-menu a,
	.elementor-location-footer .menu-item a {
		padding-top: 6px;
		padding-bottom: 6px;
		display: inline-block;
	}
}

/*
 * News & Announcements carousel image, small screens.
 *
 * Below 640px the carousel already shows one card per slide (.na-c-card
 * flex:0 0 100%), but the image height stayed fixed at 180px - a small
 * thumbnail sitting in a now full-width card. Since only one card is visible
 * at a time, there is no competing content to preserve; enlarge it.
 *
 * !important: this overrides the widget's own inline <style> tag, which is
 * later in the DOM than this stylesheet and would otherwise win at equal
 * specificity.
 */
@media (max-width: 640px) {
	.na-c-img {
		height: 260px !important;
	}

	/*
	 * Carousel arrows measured 18x44 - the narrowest control on the site, and
	 * the primary way to advance the carousel once it is 1-card-per-slide.
	 *
	 * The hit area is widened with a centred pseudo-element rather than by
	 * padding or width: the arrows are absolutely positioned (left/right 2px)
	 * against .na-c-wrap, so growing the box itself would drag the glyph off
	 * its mark. The pseudo-element leaves both the 18px chevron and the layout
	 * exactly as they are.
	 *
	 * 40px, not 44px: the card's own tap area starts at x=32 (.na-c-wrap
	 * padding 18px + .na-c-view margin 14px), and a 44px-wide area centred on
	 * the arrow would reach x=33 and swallow a sliver of the card's edge,
	 * since the arrow sits at z-index 4. 40px stops at x=31, clear of it, and
	 * still beats the ~32px comfortable minimum used elsewhere in this file.
	 */
	.na-c-arrow::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 40px;
		height: 44px;
	}
}

/*
 * Reports page cover placeholders (quarterly briefs, financial statements),
 * two-up below 640px. The card keeps its 276:366 shape, but at 32px the year
 * line ("Q4 2025", "الربع الرابع 2025") plus the caption no longer fit inside
 * it: the centred content overflowed and the caption ran under the download
 * button pinned bottom-left (.rp-dl). Measured caption-to-button gap at 360px:
 * EN -7px, AR -16px. Smaller year type, tighter side padding and a bottom
 * reserve for the button keep it clear (now +26px EN, +18px AR at 360px).
 *
 * Two classes: the widget's inline <style> comes later in the DOM and would
 * win a tie.
 */
@media (max-width: 640px) {
	.elementor-widget-container .fsp-ph {
		padding: 8% 8% 48px;
	}

	.elementor-widget-container .fsp-ph-y {
		font-size: 22px;
	}
}

/*
 * Hero headings vs the decorative chevron pattern beside them. The pattern is
 * absolutely positioned (8% from the edge, up to 28% wide), the heading is
 * full width, so between ~900 and ~1050px the heading's first line runs under
 * the pattern. Measured: /investment-strategy/ bb0c2b0 under c78579d by 110px
 * at 900, 30px at 1024; /ar/reports/ 86b93b5 under 7dd770f by 60px at 960.
 * Capping the heading at 60% keeps it clear of the pattern's 64% start.
 * Phones hide the pattern; above 1100px the headings fit on their own.
 *
 * (0,5,0): Elementor's own `.elementor.elementor .e-con > .elementor-widget
 * {max-width:100%}` is (0,4,0).
 */
@media (min-width: 768px) and (max-width: 1100px) {
	.elementor.elementor .e-con > .elementor-widget.elementor-element-bb0c2b0,
	.elementor.elementor .e-con > .elementor-widget.elementor-element-86b93b5 {
		max-width: 60%;
	}
}

/*
 * Who We Are stat cards, tablet. Four cards share one row from 768px, each
 * only ~157px wide at 768, but the figures stay at their desktop 47px:
 * "$917,117" measured 196px (spilling 39px past its card and giving the
 * English page 25px of sideways scroll), "$1200m" 155px; in Arabic
 * «917,117 دولار» spilled 13px into the gap. 34px fits all four with room to
 * spare up to 1000px; from 1024px the cards are wide enough for 47px.
 * Phones already drop to 32px.
 */
@media (min-width: 768px) and (max-width: 1000px) {
	.elementor.elementor .elementor-element.elementor-element-1387e48,
	.elementor.elementor .elementor-element.elementor-element-7dc75a0,
	.elementor.elementor .elementor-element.elementor-element-045032d,
	.elementor.elementor .elementor-element.elementor-element-55d2ffc {
		font-size: 34px;
	}
}

/*
 * Contact page complaints paragraph: Elementor forces it to 11px below 768px
 * with `.elementor-PAGEID .elementor-element.elementor-element-31b849d p
 * {font-size:11px!important}` - (0,4,1). Five classes here to outrank it.
 * 768-1024px is already 12px and desktop 13px, so only phones need this.
 */
@media (max-width: 767px) {
	.elementor .elementor-element.elementor-element-31b849d.elementor-widget-text-editor p,
	.elementor .elementor-element.elementor-element-31b849d.elementor-widget-text-editor {
		font-size: 12px !important;
	}
}

/*
 * Tap targets measured under 24px at 390px (both languages). Each is widened
 * without changing how it looks.
 */
@media (max-width: 1024px) {

	/*
	 * Footer LinkedIn / X icons: 20x20. Padding plus a matching negative margin
	 * gives a 32x32 hit area with the icon and its position unchanged; the 14px
	 * gap between them leaves the two areas 2px apart.
	 */
	.elementor-element-56be922 a[aria-label] {
		padding: 6px;
		margin: -6px;
	}

	/*
	 * Who We Are section pills: 22px tall in rows 7px apart. The hit area grows
	 * to 32px via a pseudo-element; the row gap goes from 6px to 10px so that
	 * neighbouring rows' areas don't overlap. Four classes: the page's custom
	 * CSS sets `gap:6px 5px!important` at (0,3,0).
	 */
	.elementor .elementor-element.elementor-element-83feb9a.e-con {
		row-gap: 10px !important;
	}

	.elementor-element-83feb9a a.elementor-button {
		position: relative;
	}

	.elementor-element-83feb9a a.elementor-button::after {
		content: '';
		position: absolute;
		inset: -5px 0;
	}

	/*
	 * News carousel dots: 22x19 with 18px between them. ::before draws the
	 * dash, so ::after carries a centred 32x32 hit area (stops 4px short of
	 * the next dot's).
	 */
	.na-c-dot {
		position: relative;
	}

	.na-c-dot::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 32px;
		height: 32px;
	}
}


/*
 * Header, 1025-1339px: the desktop menu is tight here.
 *
 * Elementor switches header rows at its 1024px tablet breakpoint, so from
 * 1025px the full desktop menu shows - its seven items need ~803px (AR) /
 * ~823px (EN) at the site's 15px size, and with Elementor's spacing they
 * overlap the logo / language switch until ~1290px.
 *
 * 1200-1339px: keep the full menu (so the pages are visible on common laptop
 * widths) and win the room back from the spacing around it - row padding
 * 30 -> 16px, column gap 12px, logo 150 -> 120px, button gap 20 -> 10px. Menu
 * text and items are untouched. Measured clearance at 1200px: 24px AR / 18px
 * EN on each side, growing with width.
 *
 * 1025-1199px: still not enough room, so use the tablet row: logo, language,
 * search, hamburger. The hamburger is the same Elementor nav-menu as on
 * tablets; its dropdown is forced on here because Elementor only enables it
 * at <=1024px.
 *
 * The tablet row's own styling for 1025-1199px (Elementor only writes it
 * inside its <=1024px media query) is added as an inline style by
 * ai_header_midrange_css() in arabinvest-i18n.php, read live from Elementor's
 * CSS for header template 990963 - nothing to re-copy if the row is restyled.
 *
 * Pairs with the deferred click handling in arabinvest-mobile-menu.js.
 */
@media (min-width: 1025px) and (max-width: 1199px) {
	.elementor-location-header .elementor-element.elementor-element-4f5f688 { display:none !important; }
	.elementor-location-header .elementor-element.elementor-element-0604a4a.elementor-hidden-desktop { display:var(--display) !important; }
	.elementor-location-header .elementor-element-6d7bcb6 .elementor-menu-toggle { display:flex !important; }
	.elementor-location-header .elementor-element-6d7bcb6 .elementor-nav-menu--main { display:none !important; }
	.elementor-location-header .elementor-element-6d7bcb6 .elementor-nav-menu--dropdown { display:block !important; }

}

@media (min-width: 1200px) and (max-width: 1339px) {
	.elementor-location-header .elementor-element-4f5f688 { --padding-left:16px !important; --padding-right:16px !important; }
	.elementor-location-header .elementor-element-4f5f688 > .e-con-inner { gap:12px !important; }
	.elementor-location-header .elementor-element-b30485c { width:auto !important; flex:0 0 auto !important; }
	.elementor-location-header .elementor-element-b30485c img { width:120px !important; max-width:120px !important; }
	.elementor-location-header .elementor-element-38d6a75 { gap:10px !important; width:auto !important; flex:0 0 auto !important; }
}

/*
 * English Leadership (page 990791): each name shares a row with its «+» bio
 * button and the row started at the left edge, so names sat 18-121px left of
 * the photo centre at 1440px. Centre the row, reserve the button plus gap
 * (28px + 8px) on the name's side so the name itself lands on the column
 * centre, and centre the role line under it. The Arabic page gets the same
 * treatment in arabinvest-rtl.css.
 */
.elementor-990791 .e-con:has(> .elementor-widget-heading + .elementor-widget-button) {
	justify-content: center !important;
	padding-inline-start: 36px !important;
}

.elementor-990791 .e-con:has(> .elementor-widget-heading + .elementor-widget-button) > .elementor-widget-heading {
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: calc(100% - 36px);
}

.elementor-990791 .e-con:has(> .e-con > .elementor-widget-heading + .elementor-widget-button) > .elementor-widget-text-editor,
.elementor-990791 .e-con:has(> .e-con > .elementor-widget-heading + .elementor-widget-button) > .elementor-widget-text-editor .elementor-widget-container {
	text-align: center !important;
}

/*
 * Leadership, mobile cards (EN 990791 / AR 990994), CEO only — Lama 19 Oct:
 * "cut it in this line" = the top edge of the green bar. The CEO photo is the
 * large "full" card, so his hands and the bar under them stood out. End the
 * photo at that line: clip the bottom 30px of the photo (the 24px bar plus
 * the 6px of fingertips that rise above it) and pull the card up by the same
 * amount. Only the photo is clipped, so the green bar stays under it like
 * every other leader's card.
 * Below 768px only; the desktop/tablet card is a different widget.
 */
@media (max-width: 767px) {
	/* 20 Oct: cut at half the pen (78.5% of the 210px photo = bottom 45px).
	 * 21 Oct: the bar sits behind the photo like every other card, so the cut
	 * edge goes on the bar's bottom line: pull up by the full 45px. */
	.lmc.lead-pop-ceo .lmc-ph img { clip-path: inset(0 0 45px 0); margin-bottom: -45px; }
	/* 22 Oct: grow on hover from the cut line, not the clipped-off bottom, so the
	 * cut stays on the bar's bottom line like every other card (no green sliver). */
	.lmc.lead-pop-ceo .lmc-ph img { transform-origin: 50% calc(100% - 45px); }
}

/*
 * Leadership, desktop/tablet CEO photo (EN 990791 / AR 990994, widget 91f0cfd)
 * — same crop as the mobile card above, requested 20 Oct. The photo's bottom
 * edge sits on the bottom of the 30px green bar, so clip its bottom 30px: the
 * photo now ends at the bar's top line and the bar stays visible underneath.
 */
@media (min-width: 768px) {
	/* 20 Oct: cut at half the pen (78.5% of the 215px photo = bottom 46px).
	 * 21 Oct: the bar sits behind the photo like every other leader, so move
	 * the photo down the full 46px: the cut edge lands on the bar's bottom line. */
	.elementor-990791 .elementor-element-91f0cfd img,
	.elementor-990994 .elementor-element-91f0cfd img { clip-path: inset(0 0 46px 0); position: relative; top: 46px; }
	/* 22 Oct: hover zoom from the cut line (the widget sets "center bottom" inline). */
	.elementor-990791 .elementor-element-91f0cfd img,
	.elementor-990994 .elementor-element-91f0cfd img { transform-origin: 50% calc(100% - 46px) !important; }
}

/*
 * Leadership popup (shared modal, EN + AR, all widths), CEO photo only —
 * 21 Oct: same mid-pen crop as the cards. The modal shows the photo
 * width-fitted at the bottom of the maroon box; push it down by 21.5% of its
 * height (= 18.55% of its width, photo is 664x573) so the box's overflow
 * hides everything below the middle of the pen.
 */
#leader-global-modal .leader-popup-image-wrapper img#leader-modal-img[src*="/ceo-1.png"] {
	height: auto !important;
	/* 22 Oct ("the bio pic is small, fill it in a bit"): 133% wide so his head
	 * sits about as high in the box as the other leaders'; the sides overflow
	 * evenly. The push-down scales with it: 18.55% x 1.33 = 24.67%. */
	width: 133% !important;
	max-width: none !important;
	flex-shrink: 0;
	margin-bottom: -24.67%;
}

/*
 * Investors Overview member-state flags (EN + AR), Lama 22 Oct: "full
 * rectangle or square shape, not cropped" - drop the slanted clip.
 */
.ms-flag img { clip-path: none !important; }

/*
 * Home stats cards (row f2fb0bb, EN + AR), Lama 22 Oct: "needs space". The
 * two-line labels ran straight into the figures; open the label lines and put
 * a gap before the figure.
 */
.elementor-element-f2fb0bb .elementor-widget-heading .elementor-heading-title { line-height: 1.3 !important; }
.elementor-element-f2fb0bb .elementor-widget-text-editor { margin-top: 10px !important; }

/*
 * Leadership popup, Osama and Khalid (24 Oct, follow-up to Lama's "bio pic is
 * small"): their photos are wider than the popup box (641x485, 536x418), so
 * "contain" shrinks them to the box width and leaves a tall empty band above.
 * Show them 118% wide (height follows), still sitting on the bottom edge: the
 * headroom then matches the other leaders; only the outer shoulders overflow.
 */
#leader-global-modal .leader-popup-image-wrapper img#leader-modal-img[src*="/osama-1.png"],
#leader-global-modal .leader-popup-image-wrapper img#leader-modal-img[src*="/khalid-1.png"] {
	width: 118% !important;
	max-width: none !important;
	height: auto !important;
	flex-shrink: 0;
}