/*!
 * Makkah Gypsum & Decor - custom design layer
 * ---------------------------------------------------------------
 * Only rules Elementor cannot express natively belong in this file.
 * Colours, fonts, sizes, spacing and all content are controlled from
 * Elementor -> Site Settings and the widgets themselves, so they stay
 * editable from the dashboard.
 *
 * Classes are applied through each widget's Advanced -> CSS Classes field.
 * ---------------------------------------------------------------
 */

:root {
	--mk-gypsum: #F6F1E7;
	--mk-gypsum-2: #EFE8D9;
	--mk-emerald: #10362B;
	--mk-emerald-2: #0B271F;
	--mk-brass: #C69A46;
	--mk-brass-soft: #D8B972;
	--mk-espresso: #1B1611;
	--mk-sand: #E4DBCB;
	--mk-glow: #F8E9C4;
	--mk-whatsapp: #1FA855;
	--mk-muted: #5C554A;
	--mk-muted-on-dark: #C9C2B1;
}

/* ---------------------------------------------------------------
   0. Section backgrounds and layout constraints
   These are multi-layer gradients and max-widths that Elementor's
   single-gradient control cannot reproduce exactly. Everything
   inside these sections stays fully editable in Elementor.
   --------------------------------------------------------------- */

/* Sticky nav - matches the original's CSS sticky, no JS needed. */
.mk-header {
	position: sticky;
	top: 0;
	z-index: 50;
}

/*
 * Astra wraps page content in `.ast-container`, capped at 1240px with auto
 * side margins. That cap stops the full-bleed section backgrounds at the
 * container edge and leaves gutters either side of every dark band. On the
 * Elementor full-width template the sections manage their own width, so
 * release the cap. Scoped to that template, so normal pages and the blog
 * keep Astra's container.
 */
/*
 * The second selector is a safety net. The first depends on the page's
 * `_wp_page_template` meta being `elementor_header_footer`, and a host
 * migration can drop that meta - which silently restores Astra's 1240px cap
 * and pinches every section while the header and footer, which sit outside
 * the container, stay full width. Matching on `.elementor-page` keeps the
 * layout correct even when that meta goes missing.
 */
.elementor-template-full-width .ast-container,
.elementor-page .ast-container {
	max-width: 100%;
	padding-inline: 0;
	margin-inline: 0;
}

/* Header columns size to their content so space-between can spread them. */
.mk-hdr-col {
	width: auto !important;
	flex: 0 0 auto;
}

/* Hero: warm brass wash over a three-stop emerald fall-off. */
.mk-hero {
	background:
		radial-gradient(120% 90% at 50% -10%, rgba(198, 154, 70, .16), transparent 55%),
		linear-gradient(180deg, #123C30 0%, #10362B 45%, #0B271F 100%);
}

.mk-why { background: linear-gradient(160deg, #10362B 0%, #0B271F 100%); }

.mk-cta { background: radial-gradient(120% 120% at 50% 0%, #17493A, #0B271F); }

/* Measure limits from the original layout. */
.mk-hero-inner { max-width: 760px; }
.mk-hero-sub { max-width: 600px; }
.mk-section-head { max-width: 660px; }
.mk-cta-inner { max-width: 640px; margin-inline: auto; }
.mk-foot-about { max-width: 320px; }

/* The accented half of the H1 and of the wordmark. */
.mk-h1 em,
.mk-brand-name span {
	font-style: normal;
	color: var(--mk-brass-soft);
}

/* ---------------------------------------------------------------
   1. Recessed gypsum ceiling with cove lighting
   The signature visual. No image to upload - it is four concentric
   rounded frames lit with inset shadows. Injected by [mk_ceiling].
   --------------------------------------------------------------- */
.mk-ceiling {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mk-ceiling .mk-panel {
	position: absolute;
	border-radius: 22px;
	border: 1px solid rgba(248, 233, 196, .10);
	box-shadow: 0 0 0 1px rgba(11, 39, 31, .40), inset 0 1px 0 rgba(248, 233, 196, .10);
}

.mk-ceiling .mk-p1 { width: min(92%, 1040px); height: 118%; }

.mk-ceiling .mk-p2 {
	width: min(76%, 860px);
	height: 96%;
	box-shadow: inset 0 0 40px rgba(248, 233, 196, .06), 0 -1px 0 rgba(248, 233, 196, .14);
}

.mk-ceiling .mk-p3 {
	width: min(58%, 640px);
	height: 74%;
	box-shadow: inset 0 0 50px rgba(248, 233, 196, .05), 0 -1px 0 rgba(248, 233, 196, .16);
}

.mk-ceiling .mk-p4 {
	width: min(40%, 440px);
	height: 52%;
	background: radial-gradient(120% 120% at 50% 40%, rgba(248, 233, 196, .10), transparent 70%);
	box-shadow: inset 0 0 70px rgba(248, 233, 196, .08), 0 -1px 0 rgba(248, 233, 196, .20);
}

/* The CTA band runs a slightly hotter cove than the hero. */
.mk-cta .mk-ceiling .mk-p4 {
	background: radial-gradient(120% 120% at 50% 40%, rgba(248, 233, 196, .12), transparent 70%);
}

/* The shortcode widget is only a carrier for the decoration. */
.mk-ceiling-holder {
	position: absolute !important;
	inset: 0;
	margin: 0 !important;
	pointer-events: none;
	z-index: 0;
}

/* Keep real content above the decoration. */
.mk-has-ceiling > .e-con-inner { position: relative; z-index: 2; }

/* ---------------------------------------------------------------
   2. Eyebrow label - the short brass rule before the text
   --------------------------------------------------------------- */
.mk-eyebrow .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.mk-eyebrow .elementor-heading-title::before {
	content: "";
	width: 26px;
	height: 1px;
	background: currentColor;
	flex: none;
}

.mk-eyebrow-center .elementor-heading-title { justify-content: center; }

/* ---------------------------------------------------------------
   3. Buttons - Elementor handles colour, this adds the lift
   --------------------------------------------------------------- */
.mk-btn .elementor-button {
	transition: transform .15s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}

.mk-btn .elementor-button:hover { transform: translateY(-2px); }

/* ---------------------------------------------------------------
   4. Service cards - hover lift and shadow
   --------------------------------------------------------------- */
.mk-card {
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.mk-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -22px rgba(27, 22, 17, .40);
	border-color: var(--mk-brass-soft) !important;
}

/* The emerald tile behind each service icon. */
.mk-card .elementor-icon { border-radius: 11px; }

/* ---------------------------------------------------------------
   5. Gallery tiles - slow zoom, bottom scrim, floating caption
   --------------------------------------------------------------- */
.mk-tile {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.mk-tile .elementor-widget-image,
.mk-tile .elementor-widget-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mk-tile img { transition: transform .5s ease; }

.mk-tile:hover img { transform: scale(1.06); }

/* Scrim so the caption stays readable on any photo. */
.mk-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(11, 39, 31, .55));
	pointer-events: none;
	z-index: 1;
}

.mk-tile .mk-cap {
	z-index: 2;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

/* ---------------------------------------------------------------
   5b. Footer link colours and rhythm
   The global link colour is emerald, which is invisible on the
   espresso footer. Mirror the original, which lit footer links in
   muted cream and brightened them on hover.
   --------------------------------------------------------------- */
.elementor-location-footer .elementor-widget-text-editor a {
	color: var(--mk-muted-on-dark);
	transition: color .2s ease;
}

.elementor-location-footer .elementor-widget-text-editor a:hover {
	color: var(--mk-gypsum);
}

/*
 * Paragraphs arrive with the theme's ~26px bottom margin, which stacks on
 * top of each widget's own 11px spacing and loosens the footer columns.
 * The widget margin is the one that should govern.
 */
.elementor-location-footer .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------
   6. Sticky header - frosted glass behind the nav
   --------------------------------------------------------------- */
.mk-header {
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

/*
 * Elementor's open and closed states for the mobile dropdown have identical
 * specificity, so the cascade depends on source order. If CSS combining is
 * ever switched on in LiteSpeed the order can change and the menu would
 * stop opening. Pin the open state explicitly.
 */
.mk-header .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container {
	max-height: var(--menu-height, 100vh) !important;
}

/* ---------------------------------------------------------------
   7. Floating WhatsApp button
   Astra prints its own scroll-to-top control into every page and
   reveals it with JavaScript at z-index 99, which lands on top of
   the WhatsApp button. WhatsApp is the only floating action this
   design calls for, so hide Astra's.
   --------------------------------------------------------------- */
#ast-scroll-top {
	display: none !important;
}

.mk-float-wa {
	position: fixed !important;
	right: 20px;
	bottom: 20px;
	z-index: 60;
	width: auto !important;
}

.mk-float-wa .elementor-button {
	width: 58px;
	height: 58px;
	padding: 0;
	border-radius: 50%;
	display: grid;
	place-items: center;
	box-shadow: 0 10px 30px -8px rgba(31, 168, 85, .60);
	transition: transform .2s ease;
}

.mk-float-wa .elementor-button:hover { transform: scale(1.08); }

.mk-float-wa .elementor-button-icon { margin: 0; }

.mk-float-wa .elementor-button-icon svg,
.mk-float-wa .elementor-button-icon i {
	width: 30px;
	height: 30px;
	font-size: 30px;
}

/* ---------------------------------------------------------------
   8. Anchor scrolling clears the sticky header
   --------------------------------------------------------------- */
html { scroll-behavior: smooth; }

#services, #gallery, #why, #process, #contact { scroll-margin-top: 86px; }

/* ---------------------------------------------------------------
   9. Focus ring - visible for keyboard users on the dark palette
   --------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible {
	outline: 3px solid var(--mk-brass);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------
   10. Respect reduced-motion preferences
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
	html { scroll-behavior: auto; }
	.mk-tile:hover img,
	.mk-card:hover,
	.mk-btn .elementor-button:hover,
	.mk-float-wa .elementor-button:hover { transform: none; }
}

/* ---------------------------------------------------------------
   11. Mobile refinements
   --------------------------------------------------------------- */
@media (max-width: 767px) {
	.mk-float-wa {
		right: 14px;
		bottom: 14px;
	}
	.mk-float-wa .elementor-button {
		width: 52px;
		height: 52px;
	}
	/* The cove reads as noise at phone width - calm it down. */
	.mk-ceiling .mk-p1,
	.mk-ceiling .mk-p2 { display: none; }
}

/* ---------------------------------------------------------------
   12. Arabic / RTL
   The site runs in Arabic, so the document direction is RTL. Most
   of the layout above already uses logical properties or centred
   flex, which flip on their own. These are the leftovers.
   --------------------------------------------------------------- */

/* Footer bottom-right line, mirrored by direction rather than pinned. */
.mk-foot-end { text-align: end; }

@media (max-width: 767px) {
	.mk-foot-end { text-align: start; }
}

/*
 * Arabic is cursive: letters join, and positive tracking pulls those
 * joins apart. Neutralise any tracking that reaches Arabic runs, while
 * leaving Latin/numeric runs (phone number, pillar digits) alone.
 */
[dir="rtl"] .mk-eyebrow .elementor-heading-title,
[dir="rtl"] .mk-brand-name,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
	letter-spacing: 0;
}

/*
 * Phone-number direction is handled in the string itself, with U+2066 /
 * U+2069 isolates around the number (see PHONE_TXT in build-makkah.php).
 *
 * It deliberately is NOT done here. `unicode-bidi: isolate` alone does not
 * force a left-to-right run - it isolates but still inherits RTL - and
 * adding `direction: ltr` to a tel: link would wreck the buttons that read
 * "اتصل 059 139 3320", pushing the Arabic word to the wrong side. The
 * isolate characters fix the digits without touching the Arabic around them.
 */

/*
 * Amiri sits on a small x-height and Arabic ascenders/diacritics need
 * headroom, so headings get a touch more leading than the Latin build.
 */
[dir="rtl"] .mk-h1 .elementor-heading-title { line-height: 1.35; }