/* ==========================================================================
   SUDAIR PHARMA — REGIONAL PRESENCE MAP
   Natural Earth country outlines with a Saudi hub and spokes to each market.

   Scoped entirely under .sud-map. These class names exist nowhere else, so
   nothing here reaches the header, the footer, or any other section.
   ========================================================================== */

.sud-map {
	--map-land: #EEF2F0;          /* very light grey-green landmass */
	--map-line: #9CCFA0;          /* connection arrows at rest — light green */
	--map-line-on: #1F7A3A;       /* the one arrow being hovered */
	--map-pin:  #7C8C85;          /* resting marker */
	--map-edge: rgba(11, 31, 23, .28);   /* country outline over a flag fill */
	--map-ease: cubic-bezier(.22, 1, .36, 1);
	position: relative;
}

.sud-map__frame {
	position: relative;
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(0, 99, 68, .04), transparent 60%),
		var(--sud-surface);
	border: 1px solid var(--sud-line);
	border-radius: var(--sud-radius-xl, 32px);
	padding: clamp(1rem, 2.5vw, 2.25rem);
	overflow: hidden;
}

.sud-map__svg {
	inline-size: 100%;
	block-size: auto;
	display: block;
	overflow: visible;
}

/* --------------------------------------------------------------------------
   LANDMASS
   -------------------------------------------------------------------------- */

.sud-map__land {
	fill: var(--map-land);
	stroke: #fff;
	stroke-width: .7;
	vector-effect: non-scaling-stroke;
}

/* Saudi Arabia — the hub, in brand green. */
.sud-map__hubland {
	fill: var(--sud-green-700);
	stroke: #fff;
	stroke-width: .8;
	vector-effect: non-scaling-stroke;
	transition: fill .4s var(--map-ease);
}

/* --------------------------------------------------------------------------
   MARKET COUNTRIES — flag-filled silhouettes

   The flag is clipped to the country's own polygon in the generated SVG; this
   only handles the outline and the hover state. Fills are attributes on the
   generated shapes, deliberately not overridden here.
   -------------------------------------------------------------------------- */

.sud-map__country {
	cursor: pointer;
	transition: opacity .35s var(--map-ease), filter .35s var(--map-ease);
}

/* Flag-filled variant — used by the showcase map, where the artwork is clipped
   inside the outline and this path draws only the border over it. */
.sud-map__countryline {
	fill: none;
	stroke: var(--map-edge);
	stroke-width: .7;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	transition: stroke .35s var(--map-ease), stroke-width .35s var(--map-ease);
}

/* --------------------------------------------------------------------------
   FLAT-TONE COUNTRIES

   The true-scale map colours each market with one brand tone. Fill and border
   are the SAME path, so the colour cannot come apart from the silhouette — there
   is no rectangle in the drawing to crop against and nothing to fall out of
   register. `data-tone` is written into the generated SVG; the colours live
   here, so the palette changes without regenerating anything.
   -------------------------------------------------------------------------- */

.sud-map {
	--tone-a: #43B649;            /* brand bright green — Pantone 361 C */
	--tone-b: #29ABE2;            /* accent blue, from the reference artwork */
	--tone-c: #A9DCEE;            /* pale blue, from the reference artwork */
}

.sud-map__countryshape {
	stroke: #fff;
	stroke-width: .8;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	transition:
		fill .35s var(--map-ease),
		stroke .35s var(--map-ease),
		stroke-width .35s var(--map-ease);
}

.sud-map__countryshape[data-tone="a"] { fill: var(--tone-a); }
.sud-map__countryshape[data-tone="b"] { fill: var(--tone-b); }
.sud-map__countryshape[data-tone="c"] { fill: var(--tone-c); }

/* --------------------------------------------------------------------------
   FLAT-TONE MAP: MARKERS AND ARROWS

   Everything in this block is scoped with :not(.sud-map--showcase) on purpose.
   The pin, label and link classes are shared by BOTH maps on the Home Page, so
   an unscoped rule here would restyle the showcase map too — which must not
   change at all.
   -------------------------------------------------------------------------- */

/* The reference draws every marker in the dark brand green, hub and spokes
   alike, rather than the grey resting state the true-scale map used. */
.sud-map:not(.sud-map--showcase) .sud-map__pinshape { fill: var(--sud-green-800, #0B3D2C); }

.sud-map:not(.sud-map--showcase) .sud-map__label {
	fill: var(--sud-green-800, #0B3D2C);
	font-weight: 700;
}

.sud-map:not(.sud-map--showcase) .sud-map__label--hub { font-weight: 800; }

/*
 * Arrows read dark in the reference rather than pale green. They are drawn in
 * the dark brand green held back by opacity, so hovering still has somewhere to
 * go: it takes the same colour to full strength and thickens it, instead of
 * needing a second, darker colour that would have nowhere left to travel.
 */
.sud-map:not(.sud-map--showcase) {
	--map-line: var(--sud-green-800, #0B3D2C);
	--map-line-on: var(--sud-green-800, #0B3D2C);
}

.sud-map:not(.sud-map--showcase) .sud-map__link,
.sud-map:not(.sud-map--showcase) .sud-map__arrowhead { opacity: .5; }

.sud-map:not(.sud-map--showcase) .sud-map__svg[data-active] .sud-map__link.is-on,
.sud-map:not(.sud-map--showcase) .sud-map__svg[data-active] .sud-map__arrowhead.is-on { opacity: 1; }

/* --------------------------------------------------------------------------
   CONNECTIONS
   Dashed arcs, hub outward only. Never spoke-to-spoke.
   -------------------------------------------------------------------------- */

.sud-map__link {
	fill: none;
	stroke: var(--map-line);
	stroke-width: 1.1;
	stroke-dasharray: 4 5;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
	opacity: .7;
	transition:
		stroke .35s var(--map-ease),
		stroke-width .35s var(--map-ease),
		opacity .35s var(--map-ease);
}

/*
 * Arrowheads are separate shapes, not SVG markers. A <marker> cannot take its
 * colour from the path that references it without context-stroke, which is not
 * dependable across browsers — so each head is its own path carrying the same
 * data-country, and the same rules style both.
 *
 * They are FILLED where the line is STROKED, so the hover rules have to set
 * fill on one and stroke on the other; that asymmetry is why they are listed
 * separately in every block below rather than sharing a selector.
 */
.sud-map__arrowhead {
	fill: var(--map-line);
	opacity: .7;
	transition:
		fill .35s var(--map-ease),
		opacity .35s var(--map-ease),
		transform .35s var(--map-ease);
}

/* --------------------------------------------------------------------------
   MARKERS
   -------------------------------------------------------------------------- */

.sud-map__pin { cursor: default; }

.sud-map__pinshape {
	fill: var(--map-pin);
	transition: fill .35s var(--map-ease), transform .35s var(--map-ease);
	transform-box: fill-box;
	transform-origin: center bottom;
}

.sud-map__pindot { fill: #fff; }

.sud-map__pin--hub .sud-map__pinshape { fill: var(--sud-green-700); }

.sud-map .sud-map__label {
	font-family: var(--sud-font-body);
	font-size: 13px;
	font-weight: 600;
	fill: var(--sud-ink);          /* 17:1 on the frame */
	text-anchor: middle;
	paint-order: stroke;
	stroke: #fff;                  /* keeps labels legible where they cross land */
	stroke-width: 3px;
	stroke-linejoin: round;
	transition: fill .35s var(--map-ease);
}

.sud-map .sud-map__label--hub { font-size: 14px; font-weight: 700; }

/* --------------------------------------------------------------------------
   SHOWCASE VARIANT

   The laid-out map. Countries are drawn far larger here than on the true-scale
   map, so the labels and outlines are sized up to sit with them rather than
   looking like leftovers from a smaller drawing. Everything else — the flags,
   the arrows, the whole hover interaction — is shared, unchanged.
   -------------------------------------------------------------------------- */

.sud-map--showcase .sud-map__label { font-size: 15px; stroke-width: 3.5px; }
.sud-map--showcase .sud-map__label--hub { font-size: 17px; }

/* The backdrop is a whole-world map here, not the region, so it is dialled back
   further — at this size the real subject is the composed countries. */
.sud-map--showcase .sud-map__land { fill: #EDF1EF; stroke-width: .5; }

.sud-map--showcase .sud-map__countryline { stroke-width: .9; }

/* Saudi Arabia is the hub and carries no flag, so its silhouette does the work
   and gets a slightly stronger edge to hold its own beside the flag fills. */
.sud-map--showcase .sud-map__country--hub .sud-map__hubland { stroke-width: 1.2; }

/* --------------------------------------------------------------------------
   INTERACTION

   Driven by data-active on the <svg>, set by presence.js. Doing it in CSS alone
   would need sibling selectors between the pin groups and the link paths, which
   are separate branches of the tree — there is no selector that relates them.
   -------------------------------------------------------------------------- */

/*
 * One country focused: that arrow only.
 *
 * Everything not hovered is left exactly as it was. An earlier version dropped
 * the other arrows to .18 opacity, which reads as the map switching off rather
 * than one route lighting up — the brief asks for the opposite, so the rules
 * below add emphasis and never take it away.
 */
.sud-map__svg[data-active] .sud-map__link.is-on {
	stroke: var(--map-line-on);
	stroke-width: 2.1;
	opacity: 1;
}

.sud-map__svg[data-active] .sud-map__arrowhead.is-on {
	fill: var(--map-line-on);
	opacity: 1;
}

.sud-map__svg[data-active] .sud-map__pin.is-on .sud-map__pinshape {
	fill: var(--sud-green-700);
	transform: scale(1.28);
}

.sud-map__svg[data-active] .sud-map__pin.is-on .sud-map__label {
	fill: var(--sud-ink);
	font-weight: 700;
}

/* The country itself lifts slightly — enough to confirm the hover, not enough
   to compete with the arrow, which is the thing the interaction is about. */
.sud-map__svg[data-active] .sud-map__country.is-on {
	filter: saturate(1.12) drop-shadow(0 2px 5px rgba(11, 31, 23, .28));
}

.sud-map__svg[data-active] .sud-map__country.is-on .sud-map__countryline,
.sud-map__svg[data-active] .sud-map__country.is-on .sud-map__countryshape {
	stroke: var(--sud-green-800);
	stroke-width: 1.4;
}

/* Hub focused: every connection lights, since the hub has no single line. */
.sud-map__svg[data-active="saudi-arabia"] .sud-map__link {
	stroke: var(--map-line-on);
	stroke-width: 1.7;
	opacity: 1;
}

.sud-map__svg[data-active="saudi-arabia"] .sud-map__arrowhead {
	fill: var(--map-line-on);
	opacity: 1;
}

.sud-map__svg[data-active="saudi-arabia"] .sud-map__hubland { fill: var(--sud-green-800); }

.sud-map__svg[data-active="saudi-arabia"] .sud-map__pin--hub .sud-map__pinshape {
	fill: var(--sud-green-700);
	transform: scale(1.2);
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   The SVG scales with its box, so the map never overflows. Labels are the part
   that fails first — they do not scale with the viewBox, so below tablet the
   smaller markets are dropped rather than allowed to collide.
   -------------------------------------------------------------------------- */

/*
 * Label sizes are in viewBox units, so they scale DOWN with the map — the
 * opposite of what a media query normally implies. At 1200 units wide rendering
 * into 254 CSS px the scale is 0.21, so 21 units renders at 4.4px: measured, and
 * unreadable. Each step below is sized from the scale it will actually be seen
 * at, targeting ~11px on screen.
 */
@media (max-width: 900px) {
	.sud-map .sud-map__label      { font-size: 26px; stroke-width: 6px; }
	.sud-map .sud-map__label--hub { font-size: 29px; }
	.sud-map__pinshape { transform: scale(1.4); }
}

@media (max-width: 600px) {
	.sud-map__frame { padding: .4rem; border-radius: var(--sud-radius-lg, 24px); }

	/* ~0.22 scale at this width, so 50 units lands near 11px on screen. */
	.sud-map .sud-map__label      { font-size: 50px; stroke-width: 11px; }
	.sud-map .sud-map__label--hub { font-size: 56px; }
	.sud-map__pinshape { transform: scale(2.4); }
	.sud-map__pindot   { r: 6; }

	/*
	 * The Levant and the Gulf both cluster within a few degrees. At this scale
	 * their labels overlap into an unreadable stack, so the smaller markets keep
	 * their markers and lose their labels — the map still shows the reach, and
	 * the full list is in the copy above.
	 */
	.sud-map__pin[data-country="bahrain"] .sud-map__label,
	.sud-map__pin[data-country="qatar"] .sud-map__label,
	.sud-map__pin[data-country="kuwait"] .sud-map__label,
	.sud-map__pin[data-country="lebanon"] .sud-map__label,
	.sud-map__pin[data-country="jordan"] .sud-map__label { display: none; }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION / PRINT
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.sud-map__link,
	.sud-map__arrowhead,
	.sud-map__country,
	.sud-map__countryline,
	.sud-map__pinshape,
	.sud-map__label,
	.sud-map__hubland { transition: none !important; }
	.sud-map__svg[data-active] .sud-map__pin.is-on .sud-map__pinshape { transform: none; }
}

@media print {
	.sud-map__frame { border: 0; padding: 0; }
	.sud-map__svg[data-active] .sud-map__link { opacity: .7; }
	.sud-map__svg[data-active] .sud-map__country.is-on { filter: none; }
}


/* ==========================================================================
   ONE-VIEWPORT VARIANT  (.sud-map-vp / .sud-map--vp)

   The brief: the whole section — heading, subtitle and the COMPLETE map — has
   to sit inside a single screen, with no scrolling needed to see the rest of
   it, and no part of the map cut off.

   Those two demands pull against each other, and the resolution is the SVG's
   own aspect handling. The section is given a fixed height; the map is given
   whatever height is left after the heading; and the SVG scales to FIT that
   box (preserveAspectRatio defaults to xMidYMid meet). Fitting rather than
   filling is the whole trick — the map letterboxes inside its box when the
   proportions do not match, which is what guarantees nothing is ever cropped
   no matter how short or narrow the window is.

   Scoped to .sud-map-vp, a class that exists on this one new section. The two
   earlier presence sections and every other map on the site are untouched.
   ========================================================================== */

.sud-map-vp {
	/*
	 * svh, not vh.
	 *
	 * On a phone, 100vh is the height with the browser chrome RETRACTED, so a
	 * 100vh section is taller than what you can actually see when the address
	 * bar is showing — which would put part of the map off-screen and force
	 * exactly the scroll the brief rules out. 100svh is the SMALL viewport:
	 * the height with the chrome visible. It fits in both states.
	 *
	 * The header is subtracted because it is sticky and sits over the top of
	 * this section. --sud-hd-h is the theme's own header-height variable.
	 */
	block-size: calc(100svh - var(--sud-hd-h, 86px));

	/*
	 * A floor, for very short windows. Below this the map would be too small to
	 * read country labels, and an unreadable map that fits is worse than a tall
	 * one. A landscape phone is the realistic case.
	 */
	min-block-size: 460px;

	display: flex;
	flex-direction: column;
	justify-content: center;

	/* The section's normal vertical padding would be added to a height that is
	   already exactly one screen, pushing it over. */
	padding-block: clamp(1rem, 2.5vh, 2rem);
	overflow: hidden;
}

/* Fallback for browsers without svh. Declared first so svh wins where it is
   understood; this is not a duplicate but the older unit doing the same job. */
@supports not (block-size: 1svh) {
	.sud-map-vp { block-size: calc(100vh - var(--sud-hd-h, 86px)); }
}

.sud-map-vp .sud-map-vp__inner {
	display: flex;
	flex-direction: column;
	block-size: 100%;
	inline-size: 100%;
	max-inline-size: 1240px;
	margin-inline: auto;
	gap: clamp(.5rem, 1.5vh, 1.25rem);
}

/* The heading takes the space it needs and no more. */
.sud-map-vp .sud-map-vp__head {
	flex: 0 0 auto;
}

/*
 * The map takes everything that is left.
 *
 * min-block-size:0 is load-bearing. A flex item's default minimum size is its
 * CONTENT size, so without it this item refuses to shrink below the SVG's
 * natural height and pushes the section taller than one screen — the exact
 * failure the brief is about.
 */
.sud-map-vp .sud-map-vp__body {
	flex: 1 1 auto;
	min-block-size: 0;
	display: flex;
}

.sud-map-vp .sud-map--vp,
.sud-map-vp .sud-map--vp .sud-map__frame {
	inline-size: 100%;
	block-size: 100%;
	min-block-size: 0;
	margin: 0;
	display: flex;
}

/*
 * The SVG fits its box.
 *
 * No preserveAspectRatio override is needed — the default is `xMidYMid meet`,
 * which scales the viewBox down until the WHOLE of it is inside the box and
 * centres it. That is precisely the "nothing cropped" requirement, so the
 * correct action is to leave it alone and simply give the element a real
 * height to work with.
 */
.sud-map-vp .sud-map--vp .sud-map__svg {
	inline-size: 100%;
	block-size: 100%;
	max-block-size: 100%;
	display: block;
}

/*
 * Labels scale with the map.
 *
 * The SVG shrinks to fit, and its text shrinks with it — on a short window the
 * 15px labels would render at well under 10px. Sizing them in viewport units
 * keeps them legible as the map gets smaller. The floor is 11px, below which
 * the country names stop being readable at all.
 */
.sud-map-vp .sud-map--vp .sud-map__label {
	font-size: max(11px, min(15px, 1.15vh + .35vw));
}

.sud-map-vp .sud-map--vp .sud-map__label--hub {
	font-size: max(12px, min(17px, 1.3vh + .4vw));
}

/* Short and wide — a laptop in a half-height window. The heading gives up its
   generous spacing first, because the map is the point of the section. */
@media (max-height: 700px) {
	.sud-map-vp .sud-map-vp__head .sud-lead { display: none; }
	.sud-map-vp { padding-block: .5rem; }
}

/*
 * Phones.
 *
 * The map is 1200x610 — close to 2:1 — and a portrait phone screen is about
 * 1:2. Fitting that map into that shape leaves it tiny with huge empty bands
 * above and below. The section is therefore allowed to grow taller than the
 * screen here, which is the honest trade: the one-viewport rule exists so the
 * section reads at a glance, and a map scaled to 40% of a phone's width does
 * not read at all. The whole map is still visible without horizontal scrolling.
 */
@media (max-width: 767px) {
	.sud-map-vp {
		block-size: auto;
		min-block-size: 0;
		padding-block: clamp(2rem, 6vw, 3rem);
	}

	.sud-map-vp .sud-map-vp__inner { block-size: auto; }

	.sud-map-vp .sud-map-vp__body { flex: 0 0 auto; }

	.sud-map-vp .sud-map--vp,
	.sud-map-vp .sud-map--vp .sud-map__frame { block-size: auto; }

	.sud-map-vp .sud-map--vp .sud-map__svg {
		block-size: auto;
		max-block-size: none;
		aspect-ratio: 1200 / 610;
	}

	/*
	 * The section and its inner column each carry 24px of side padding, which
	 * on a 375px screen took 96px — a quarter of the width — before the map
	 * got any. The section keeps its padding so the heading still has a
	 * margin; the inner column gives its up, since the map is the only thing
	 * that needs the room.
	 */
	.sud-map-vp .sud-map-vp__inner { padding-inline: 0; }
	.sud-map-vp .sud-map-vp__head { padding-inline: .5rem; }

	.sud-map-vp .sud-map--vp .sud-map__label { font-size: 15px; }
	.sud-map-vp .sud-map--vp .sud-map__label--hub { font-size: 17px; }
}
/* --------------------------------------------------------------------------
   RECLAIMING VERTICAL SPACE

   Measured at 1280x720: the section was 634px tall, the map's box 389px, and
   the map itself only 323px — 66px was going to the frame's own padding and
   border, and ~60px of the 150px heading block was widget margin rather than
   text. In a layout whose entire premise is "fit one screen", height spent on
   chrome is height taken from the thing the section exists to show.
   -------------------------------------------------------------------------- */

/* The frame's padding and border earn their place on a normal page, where the
   map sits in a card. Here the section itself is the card. */
.sud-map-vp .sud-map--vp .sud-map__frame {
	padding: 0;
	border: 0;
	background: none;
}

/*
 * Elementor gives heading and text widgets their own bottom margins, which the
 * flex gap then adds to. Zeroing them lets the single `gap` on the inner
 * column be the only source of spacing, so the rhythm is controlled in one
 * place instead of three.
 */
.sud-map-vp .sud-map-vp__head .elementor-widget:not(:last-child) {
	margin-block-end: 0;
}

.sud-map-vp .sud-map-vp__head .elementor-heading-title {
	margin-block: 0;
	/* The site heading is 55px here. On a short window that alone is a tenth of
	   the screen, so it is allowed to shrink with the viewport while keeping the
	   page's own size as the ceiling. */
	font-size: min(55px, max(30px, 3.6vh + 1vw));
	line-height: 1.12;
}

.sud-map-vp .sud-map-vp__head .sud-lead,
.sud-map-vp .sud-map-vp__head .sud-lead p {
	margin-block: 0;
	font-size: min(19px, max(14px, 1.5vh + .35vw));
	line-height: 1.45;
}
/* ==========================================================================
   LIVE MAP — KEEPING THE LAND VISIBLE ON LARGE DISPLAYS

   Scoped to .sud-map-vp, the one-viewport section on the Home page. The other
   presence maps are untouched.

   THE DIAGNOSIS, because the obvious suspects were all innocent.
   Nothing hides the land layer on a wide screen. Measured at 1905px it is
   still there — opacity 1, visibility visible, the same fill, and rendered
   LARGER than at 1425px (1192px wide against 1118px). No media query touches
   it, no filter, no mask, no z-index, and the viewBox with the default
   xMidYMid meet keeps the composition identical at every width.

   The cause is contrast, not rendering. #EEF2F0 against the white behind it is
   a ratio of 1.129 — about 6% off white. On a laptop the map is physically
   small and its white country separators sit close together, so the eye reads
   the texture and infers the landmass. Scaled up on a large panel the same 6%
   is spread across broad flat areas with the separators far apart, and it falls
   below what the eye resolves. Hence "fine on laptop, blank on desktop" from
   a layer that never changed.

   The fix is therefore to give the grey more to work with, and to give it more
   the wider the screen gets — so the laptop rendering the client is happy with
   stays as near identical as makes no difference, while big displays get enough
   to hold. It stays a pale grey-green at every step; it never becomes dark or
   dominant.

   Deepening the fill also brings out the country borders for free: they are
   drawn as WHITE strokes over the land, so the darker the land, the more
   clearly they read as borders.
   ========================================================================== */

.sud-map-vp .sud-map__land {
	/* 1.129 -> 1.17 against white. Barely a change at laptop size. */
	fill: #E9EEEB;
}

/* Large desktop. */
@media (min-width: 1600px) {
	.sud-map-vp .sud-map__land {
		fill: #E0E8E3;                 /* 1.25 against white */
	}
}

/* 1920 and up, including external displays and TVs, where the map is both
   physically largest and viewed from furthest away. */
@media (min-width: 2000px) {
	.sud-map-vp .sud-map__land {
		fill: #DCE5E0;                 /* 1.29 against white */
	}
}