/**
 * Contact-page map — keyless Google Maps embed.
 *
 * Replaces the theme's jkd-google-map widget, which requires an API key the
 * site does not have and otherwise never resolves past its loading spinner.
 * Sizes match the widget's old responsive heights (560 / 500 / 400).
 */

.mueen-map {
	border-radius: var(--jkd-br-lg, 15px);
	overflow: hidden;
	position: relative;
	width: 100%;
}

.mueen-map iframe {
	border: 0;
	display: block;
	height: 560px;
	width: 100%;
}

@media (max-width: 1024px) {
	.mueen-map iframe {
		height: 500px;
	}
}

@media (max-width: 767px) {
	.mueen-map iframe {
		height: 400px;
	}
}

/* The embed API takes no styling parameters, so a stock white map would glare
   against the dark theme. Inverting and rotating the hue back produces a dark
   map while keeping labels legible.

   Note the polarity: the theme prints data-color-scheme ONLY when the scheme
   is not dark (header.php:32), so dark — the default — carries no attribute at
   all and `[data-color-scheme="dark"]` matches nothing. The dark treatment has
   to be the default here, with the light scheme opting back out. */

.mueen-map iframe {
	filter: invert(91%) hue-rotate(180deg) brightness(0.95) contrast(0.88);
}

[data-color-scheme="light"] .mueen-map iframe {
	filter: none;
}

/* ── Overlay text card ───────────────────────────────────────
   The card ("لنعمل معًا" + intro + socials) is absolutely positioned over the
   map by design, and its background was bound to Elementor global colour
   7bc32a2 — which the demo import never created. Elementor silently omits the
   background-color line when a global does not resolve, so the card rendered
   fully transparent and the text sat unreadable on the map tiles.

   Styling it by class rather than by #elementor-element-1071aac keeps the rule
   alive if the section is ever rebuilt (which changes the generated id).
   Colours come from the theme tokens, so light/dark both work. */

.mueen-map-card {
	background-color: var(--jkd-bg-secondary, #1c1c1c);
	border: 1px solid var(--jkd-border);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

/* Where supported, a translucent blurred surface lets the map read through
   without costing legibility. The solid colour above stays as the fallback. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.mueen-map-card {
		-webkit-backdrop-filter: blur(14px) saturate(120%);
		backdrop-filter: blur(14px) saturate(120%);
		background-color: color-mix(in srgb, var(--jkd-bg-secondary, #1c1c1c) 82%, transparent);
	}
}

/* Match the surrounding cards' edge treatment. */
.mueen-map::after {
	border: 1px solid var(--jkd-border);
	border-radius: inherit;
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}