/**
 * Mtbkh Kitchens — base layer: reset, typography, layout primitives,
 * header/footer, buttons, hero/about/stats/CTA sections.
 *
 * Colors are CSS custom properties printed inline by
 * Mtbkh_Assets::inline_theme_vars() from Theme Options → الألوان, with
 * fallbacks here so the theme still looks correct before first save.
 * Written with logical properties (margin-inline-start, etc.) so the
 * RTL-first layout flips cleanly for LTR without a maintained mirror file.
 */

:root {
	--mtbkh-green: #5E7257;
	--mtbkh-green-dark: #6A7B62;
	--mtbkh-gold: #C7A564;
	--mtbkh-ink: #2F332F;
	--mtbkh-charcoal: #2F332F;
	--mtbkh-taupe: #6A7B62;
	--mtbkh-surface: #F7F7F5;
	--mtbkh-surface-alt: #E5E7E2;
	--mtbkh-white: #FFFFFF;
	--mtbkh-radius: 14px;

	--mtbkh-shadow-sm: 0 2px 8px rgba(47, 51, 47, .06);
	--mtbkh-shadow-md: 0 12px 32px rgba(47, 51, 47, .10);
	--mtbkh-shadow-lg: 0 24px 60px rgba(47, 51, 47, .16);
	--mtbkh-container: 1220px;
}

* , *::before, *::after { box-sizing: border-box; }

/* ---------- Scroll-reveal (fade-in-up) ----------
   Generic entrance animation applied broadly across the site by
   mtbkhInitReveal() in main.js (an IntersectionObserver, not per-template
   markup) — .mtbkh-reveal is added at runtime to a curated set of section-
   level elements. Kept as a plain opacity+translateY pair (not a bouncy
   easing) so it reads as "settling into place" rather than drawing
   attention to itself on every scroll. Respects prefers-reduced-motion. */
.mtbkh-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .7s cubic-bezier(.2,.65,.3,1), transform .7s cubic-bezier(.2,.65,.3,1);
	will-change: opacity, transform;
}
.mtbkh-reveal.is-revealed {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.mtbkh-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--mtbkh-white);
	color: var(--mtbkh-ink);
	font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

body.mtbkh-no-scroll { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4 { font-weight: 800; line-height: 1.3; margin: 0 0 .5em; color: var(--mtbkh-charcoal); }
h1 { font-size: clamp(28px, 4vw, 44px); }
h2 { font-size: clamp(22px, 3vw, 32px); }
h3 { font-size: 19px; }
p { margin: 0 0 1em; color: var(--mtbkh-taupe); }

button { font-family: inherit; }

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

.mtbkh-skip-link {
	position: fixed;
	top: -100px;
	inset-inline-start: 12px;
	z-index: 9999;
	background: var(--mtbkh-charcoal);
	color: #fff;
	padding: 10px 18px;
	border-radius: 8px;
	transition: top .2s ease;
}
.mtbkh-skip-link:focus { top: 12px; width: auto; height: auto; clip: auto; overflow: visible; }

.mtbkh-container {
	max-width: var(--mtbkh-container);
	margin-inline: auto;
	padding-inline: 20px;
}

.mtbkh-section { padding-block: 56px; }
.mtbkh-section--narrow { max-width: 860px; }
.mtbkh-section--alt { background: var(--mtbkh-surface); }

.mtbkh-eyebrow {
	display: inline-block;
	color: var(--mtbkh-green);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .02em;
	margin-bottom: 6px;
}

.mtbkh-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}
.mtbkh-section__head--center { justify-content: center; text-align: center; flex-direction: column; align-items: center; }
.mtbkh-section__head h2 { margin: 0; }

.mtbkh-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	color: var(--mtbkh-green);
	white-space: nowrap;
}
/*
 * The base arrow-start.svg icon points right. That reads correctly as
 * "forward" in LTR (left-to-right reading moves right), so it's left
 * unflipped by default — but in Arabic RTL, "forward" reads right-to-left,
 * so every one of these action arrows needs to be mirrored to point left
 * instead. Applies to every place the same icon stands in for "explore /
 * view more / go" (see also the portfolio card overlay below, which
 * mirrors the same rule).
 *
 * The mirror uses the standalone `scale` property (not `transform`) so the
 * hover nudge below — a plain `translate` — always slides the icon toward
 * the physical left, regardless of the mirror. `translate`/`scale`/`rotate`
 * compose in a fixed order independent of source order, unlike stacking
 * everything into one `transform` list, which would make the nudge move in
 * the wrong direction once mirrored.
 */
.mtbkh-link-arrow svg {
	width: 16px; height: 16px;
	translate: 0 0;
	transition: translate .25s ease;
}
[dir="rtl"] .mtbkh-link-arrow svg,
.is-rtl .mtbkh-link-arrow svg { scale: -1 1; }
.mtbkh-link-arrow:hover svg { translate: -5px 0; }

/* ---------- Buttons ---------- */
.mtbkh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 26px;
	border-radius: var(--mtbkh-radius);
	font-weight: 700;
	font-size: 15px;
	border: 2px solid transparent;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, background-color .2s ease, color .2s ease, filter .2s ease;
	white-space: nowrap;
}
.mtbkh-btn::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
	transform: translateX(-130%);
	transition: transform .65s ease;
	pointer-events: none;
}
.mtbkh-btn:hover::after { transform: translateX(130%); }
.mtbkh-btn:hover { transform: translateY(-3px); }
.mtbkh-btn:active { transform: translateY(-1px); }
.mtbkh-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.mtbkh-btn:disabled::after { display: none; }
.mtbkh-btn svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform .3s ease; }
.mtbkh-btn:hover svg { transform: scale(1.12); }
.mtbkh-btn--small svg { width: 15px; height: 15px; }

.mtbkh-btn--primary { background: var(--mtbkh-green); color: #fff; box-shadow: var(--mtbkh-shadow-sm); }
.mtbkh-btn--primary:hover { filter: brightness(1.08); box-shadow: 0 14px 28px rgba(31,31,31,.28); }

.mtbkh-btn--gold { background: var(--mtbkh-gold); color: var(--mtbkh-charcoal); box-shadow: var(--mtbkh-shadow-sm); }
.mtbkh-btn--gold:hover { filter: brightness(1.06); box-shadow: 0 14px 28px rgba(199,165,100,.35); }

.mtbkh-btn--white { background: var(--mtbkh-white); color: var(--mtbkh-green); box-shadow: var(--mtbkh-shadow-sm); }
.mtbkh-btn--white:hover { background: var(--mtbkh-surface); box-shadow: var(--mtbkh-shadow-md); }

.mtbkh-btn--outline { background: transparent; color: var(--mtbkh-ink); border-color: var(--mtbkh-surface-alt); }
.mtbkh-btn--outline:hover { border-color: var(--mtbkh-green); color: var(--mtbkh-green); box-shadow: var(--mtbkh-shadow-sm); }

.mtbkh-btn--ghost { background: rgba(255,255,255,.12); color: var(--mtbkh-charcoal); border-color: currentColor; }

.mtbkh-btn--small { padding: 8px 14px; font-size: 13px; }
.mtbkh-btn--large { padding: 16px 32px; font-size: 16px; }
.mtbkh-btn--block { width: 100%; }

.mtbkh-btn__label { display: inline-flex; align-items: center; gap: 8px; }
.mtbkh-btn__spinner {
	width: 16px; height: 16px;
	border: 2px solid rgba(255,255,255,.5);
	border-top-color: #fff;
	border-radius: 50%;
	animation: mtbkh-spin .7s linear infinite;
}
@keyframes mtbkh-spin { to { transform: rotate(360deg); } }

/* ---------- Header ----------
   A calmer, more "premium product" header than a plain flat white bar: a
   translucent/blurred background (so content scrolling underneath softly
   shows through, a common high-end-site cue) with a faint permanent
   hairline border, strengthening into a real shadow once the page scrolls
   — rather than jumping from *no* border/shadow at all to one, which read
   as slightly unfinished. */
.mtbkh-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background: rgba(255,255,255,.94);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--mtbkh-surface-alt);
	transition: box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}
.mtbkh-header.is-scrolled { background: rgba(255,255,255,.98); box-shadow: var(--mtbkh-shadow-md); border-color: transparent; }

.mtbkh-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 12px;
}

.mtbkh-header__brand { display: flex; align-items: center; }
.mtbkh-header__brand img { max-height: 80px; width: auto; }
.mtbkh-header__brand-name { font-weight: 800; font-size: 21px; letter-spacing: -.01em; color: var(--mtbkh-charcoal); }

.mtbkh-header__nav { flex: 1; display: flex; justify-content: center; }

.mtbkh-menu {
	display: flex;
	align-items: center;
	gap: 4px;
}

.mtbkh-menu-item { position: relative; }

.mtbkh-menu-link {
	position: relative;
	display: block;
	padding: 10px 16px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 14.5px;
	color: var(--mtbkh-ink);
	transition: color .2s ease, background-color .2s ease;
}
.mtbkh-menu-link:hover { background: var(--mtbkh-surface); color: var(--mtbkh-green); }
/* Active page: color + pill background only — no underline/border under the
   link (an earlier version added a thin underline here; removed per
   feedback, the pill background alone is a clear enough current-page cue). */
.mtbkh-menu-item.is-current > .mtbkh-menu-link { color: var(--mtbkh-green); background: var(--mtbkh-surface); font-weight: 700; }

/* ---------- Transparent-over-hero header (homepage only) ----------
   On the homepage, before any scrolling, the header has no background at
   all and floats directly on top of the hero photo/slider — full-bleed,
   nav and logo overlaid on the image itself — rather than sitting in its
   own white bar above it. body.mtbkh-has-hero is added by
   Mtbkh_Theme_Setup::body_classes() only on is_front_page(). Once
   .is-scrolled is toggled (main.js, scrollY > 8) it flips straight back to
   the normal solid/fixed header used everywhere else, so scrolling even a
   little already restores full legibility over ordinary page content. The
   logo/menu/CTA are switched to white (and the logo image is force-inverted
   to white via filter, same trick already used for the footer's dark-on-dark
   logo) since they now sit on the hero photo instead of a white bar — the
   hero's own scrim gradient (see .mtbkh-hero-banner__scrim) is what keeps
   that white text/logo legible against a bright photo. */
body.mtbkh-has-hero .mtbkh-header {
	position: absolute;
	inset-inline: 0;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-color: transparent;
}
body.mtbkh-has-hero .mtbkh-header.is-scrolled {
	position: fixed;
	background: rgba(255,255,255,.98);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-color: var(--mtbkh-surface-alt);
}
body.mtbkh-has-hero .mtbkh-header:not(.is-scrolled) .mtbkh-header__brand img {
	filter: brightness(0) invert(1);
}
body.mtbkh-has-hero .mtbkh-header:not(.is-scrolled) .mtbkh-header__brand-name,
body.mtbkh-has-hero .mtbkh-header:not(.is-scrolled) .mtbkh-menu-link {
	color: #fff;
}
body.mtbkh-has-hero .mtbkh-header:not(.is-scrolled) .mtbkh-menu-link:hover,
body.mtbkh-has-hero .mtbkh-header:not(.is-scrolled) .mtbkh-menu-item.is-current > .mtbkh-menu-link {
	background: rgba(255,255,255,.16);
	color: #fff;
}
body.mtbkh-has-hero .mtbkh-header:not(.is-scrolled) .mtbkh-header__cta.mtbkh-btn--primary {
	background: rgba(255,255,255,.14);
	color: #fff;
	border-color: rgba(255,255,255,.7);
}
body.mtbkh-has-hero .mtbkh-header:not(.is-scrolled) .mtbkh-header__cta.mtbkh-btn--primary:hover {
	background: #fff;
	color: var(--mtbkh-green);
}
body.mtbkh-has-hero .mtbkh-header:not(.is-scrolled) .mtbkh-mobile-toggle {
	background: transparent;
	border-color: rgba(255,255,255,.5);
}
body.mtbkh-has-hero .mtbkh-header:not(.is-scrolled) .mtbkh-mobile-toggle span {
	background: #fff;
}

.mtbkh-submenu-toggle {
	position: absolute;
	inset-inline-end: -2px;
	top: 6px;
	background: none;
	border: none;
	padding: 4px;
	cursor: pointer;
}
.mtbkh-submenu-toggle__chevron {
	display: block;
	width: 7px; height: 7px;
	border-inline-end: 2px solid var(--mtbkh-taupe);
	border-bottom: 2px solid var(--mtbkh-taupe);
	transform: rotate(45deg);
	transition: transform .15s ease;
}
.mtbkh-submenu-toggle[aria-expanded="true"] .mtbkh-submenu-toggle__chevron { transform: rotate(225deg); }

.mtbkh-submenu {
	display: none;
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	min-width: 200px;
	background: #fff;
	border-radius: 12px;
	box-shadow: var(--mtbkh-shadow-lg);
	padding: 8px;
	z-index: 20;
}
.mtbkh-menu-item.is-submenu-open > .mtbkh-submenu { display: block; }
.mtbkh-submenu .mtbkh-menu-link { border-radius: 8px; }

.mtbkh-header__actions { display: flex; align-items: center; gap: 16px; }
.mtbkh-header__cta { flex-shrink: 0; padding: 12px 24px; }

.mtbkh-mobile-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px; height: 42px;
	border-radius: 10px;
	border: 1px solid var(--mtbkh-surface-alt);
	background: #fff;
	cursor: pointer;
}
.mtbkh-mobile-toggle span { display: block; width: 20px; height: 2px; background: var(--mtbkh-charcoal); margin-inline: auto; }

/* ---------- Mobile off-canvas drawer ---------- */
.mtbkh-mobile-drawer {
	position: fixed;
	inset: 0;
	z-index: 1000;
	visibility: hidden;
}
.mtbkh-mobile-drawer.is-open { visibility: visible; }

.mtbkh-mobile-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(31,31,31,.5);
	opacity: 0;
	transition: opacity .25s ease;
}
.mtbkh-mobile-drawer.is-open .mtbkh-mobile-drawer__overlay { opacity: 1; }

.mtbkh-mobile-drawer__panel {
	position: absolute;
	top: 0;
	inset-inline-end: 0;
	height: 100%;
	width: min(340px, 86vw);
	background: #fff;
	display: flex;
	flex-direction: column;
	transform: translateX(105%);
	transition: transform .3s ease;
	box-shadow: var(--mtbkh-shadow-lg);
}
.is-rtl .mtbkh-mobile-drawer__panel { transform: translateX(-105%); }
.mtbkh-mobile-drawer.is-open .mtbkh-mobile-drawer__panel { transform: translateX(0); }

.mtbkh-mobile-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px;
	border-bottom: 1px solid var(--mtbkh-surface-alt);
}
.mtbkh-mobile-drawer__brand img { max-height: 60px; width: auto; }
.mtbkh-mobile-drawer__close {
	width: 34px; height: 34px;
	border-radius: 50%;
	border: none;
	background: var(--mtbkh-surface);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.mtbkh-mobile-drawer__nav { flex: 1; overflow-y: auto; padding: 12px; }
.mtbkh-menu--mobile { display: flex; flex-direction: column; gap: 2px; }
.mtbkh-menu--mobile .mtbkh-menu-link { padding: 13px 14px; }
.mtbkh-menu--mobile .mtbkh-submenu { position: static; box-shadow: none; padding-inline-start: 14px; margin-top: 2px; }
.mtbkh-menu--mobile .mtbkh-submenu-toggle { top: 4px; }

.mtbkh-mobile-drawer__footer {
	padding: 16px 18px 22px;
	border-top: 1px solid var(--mtbkh-surface-alt);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.mtbkh-mobile-drawer__phone {
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: center;
	font-weight: 700;
	color: var(--mtbkh-green);
}
.mtbkh-mobile-drawer__phone svg { width: 18px; height: 18px; }

/* ---------- Hero banner ----------
   Full-bleed (edge-to-edge, outside .mtbkh-container on purpose) image
   slider with the headline/CTA overlaid on the photo — an art-directed
   section built to match the client's mockup, not the theme's usual
   logical-RTL grid. Physical left/right are used deliberately below. */
.mtbkh-hero-banner {
	position: relative;
	overflow: hidden;
	height: min(100vh, 1000px);
	min-height: 420px;
	background: linear-gradient(135deg, var(--mtbkh-charcoal), #000);
}
.mtbkh-hero-banner__slider { position: absolute; inset: 0; }
.mtbkh-hero-slide {
	position: absolute; inset: 0;
	opacity: 0;
	transition: opacity 1s ease;
	pointer-events: none;
}
.mtbkh-hero-slide.is-active { opacity: 1; pointer-events: auto; }
.mtbkh-hero-banner__img {
	width: 100%; height: 100%; object-fit: cover;
	transform: scale(1.06);
	transition: transform 6.5s linear;
}
/* A slow, continuous zoom on whichever slide is active ("Ken Burns" effect)
   is what turns a plain crossfade into something that reads as a deliberately
   designed hero, instead of a static photo swap. */
.mtbkh-hero-slide.is-active .mtbkh-hero-banner__img { transform: scale(1); }

/* Darkens the left two-thirds of the photo so the overlaid white text stays
   readable no matter which photo is uploaded; fades out toward the right
   edge so the image itself still reads through near the nav arrows. */
.mtbkh-hero-banner__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(15,15,15,.78) 0%, rgba(15,15,15,.5) 40%, rgba(15,15,15,.15) 65%, transparent 85%);
}
/* Extra top-edge darkening specifically for the transparent header floating
   on top of this hero (see body.mtbkh-has-hero rules under "Header" above):
   the left-to-right scrim above is tuned for the hero's own text block on
   the left and fades out well before the right edge, which would otherwise
   leave the header's nav links/CTA on the right sitting on a much brighter,
   low-contrast strip of whatever photo is uploaded. This band only covers
   the header's own height so it never darkens the rest of the photo. */
.mtbkh-hero-banner::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	height: 130px;
	background: linear-gradient(180deg, rgba(0,0,0,.5), transparent);
	z-index: 1;
	pointer-events: none;
}

.mtbkh-hero-banner__content {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 560px;
	color: #fff;
	padding-left: clamp(24px, 6vw, 96px);
	padding-right: 24px;
	margin-right: auto;
}
.mtbkh-hero-banner__content h1,
.mtbkh-hero-banner__content p { color: #fff; }
.mtbkh-hero-banner__content p { font-size: 17px; opacity: .9; }
.mtbkh-hero-banner__actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
/* The ghost button's default charcoal text (meant for the light sections
   elsewhere on the page) would be unreadable over a dark photo — swap it
   for a white outline here specifically. */
.mtbkh-hero-banner__actions .mtbkh-btn--ghost { color: #fff; border-color: rgba(255,255,255,.75); background: rgba(255,255,255,.1); }
.mtbkh-hero-banner__actions .mtbkh-btn--ghost:hover { background: rgba(255,255,255,.2); border-color: #fff; }

.mtbkh-hero-banner__arrows {
	position: absolute;
	top: 50%;
	right: 24px;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 10px;
	z-index: 3;
}
.mtbkh-hero-banner__btn {
	width: 40px; height: 40px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,.9);
	backdrop-filter: blur(4px);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	color: var(--mtbkh-ink);
	box-shadow: var(--mtbkh-shadow-sm);
	transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.mtbkh-hero-banner__btn:hover { background: #fff; transform: scale(1.1); box-shadow: var(--mtbkh-shadow-md); }
.mtbkh-hero-banner__btn svg { width: 16px; height: 16px; }
/*
 * Base icon points right. "Prev" (earlier slide = backward) stays
 * unflipped so it points right. "Next" (forward) is mirrored to point
 * left, matching the arrow-direction rule used everywhere else in the
 * theme.
 */
.mtbkh-hero-banner__btn--next svg { transform: scaleX(-1); }
.mtbkh-hero-banner__dots { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 3; }
.mtbkh-hero-banner__dot { width: 7px; height: 7px; border-radius: 50%; border: none; background: rgba(255,255,255,.6); cursor: pointer; padding: 0; transition: background-color .2s ease, width .2s ease; }
.mtbkh-hero-banner__dot.is-active { background: #fff; width: 20px; border-radius: 4px; }
.mtbkh-hero-banner__slider--single .mtbkh-hero-banner__arrows,
.mtbkh-hero-banner__slider--single .mtbkh-hero-banner__dots { display: none; }

/* ---------- Features ---------- */
.mtbkh-features { padding-block: 8px 36px; }
.mtbkh-features--boxed {
	margin-top: 40px;
	padding: 32px 24px;
	background: var(--mtbkh-surface);
	border-radius: var(--mtbkh-radius);
}
.mtbkh-features--dark {
	margin-top: 8px;
	padding: 32px 24px;
	background: var(--mtbkh-charcoal);
	border-radius: var(--mtbkh-radius);
}
.mtbkh-features--dark .mtbkh-feature__icon { border-color: rgba(255,255,255,.25); color: #fff; }
.mtbkh-features--dark .mtbkh-feature h3 { color: #fff; }
.mtbkh-features--dark .mtbkh-feature p { color: rgba(255,255,255,.65); }
.mtbkh-features__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}

.mtbkh-feature { text-align: center; cursor: default; }
.mtbkh-feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px; height: 46px;
	border-radius: 12px;
	background: transparent;
	border: 1.5px solid var(--mtbkh-surface-alt);
	color: var(--mtbkh-green);
	margin-bottom: 14px;
	transition: transform .4s cubic-bezier(.34,1.56,.64,1), background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.mtbkh-feature__icon svg { width: 20px; height: 20px; transition: transform .35s ease; }
.mtbkh-feature h3 { font-size: 15.5px; margin-bottom: 4px; transition: color .2s ease; }
.mtbkh-feature p { font-size: 13px; margin: 0; }

/* Hover: icon lifts and fills with the brand green. */
.mtbkh-feature:hover .mtbkh-feature__icon {
	background: var(--mtbkh-green);
	border-color: var(--mtbkh-green);
	color: #fff;
	transform: translateY(-6px);
	box-shadow: 0 12px 22px rgba(94,114,87,.32);
}
.mtbkh-feature:hover .mtbkh-feature__icon svg { transform: scale(1.12); }
.mtbkh-feature:hover h3 { color: var(--mtbkh-green); }
.mtbkh-features--dark .mtbkh-feature:hover h3 { color: #fff; }
.mtbkh-features--dark .mtbkh-feature:hover .mtbkh-feature__icon {
	background: #fff;
	border-color: #fff;
	color: var(--mtbkh-green);
	box-shadow: 0 12px 22px rgba(0,0,0,.28);
}

/* ---------- About ---------- */
.mtbkh-about { padding-block: 60px; }
.mtbkh-about__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
.mtbkh-about__img { border-radius: var(--mtbkh-radius); box-shadow: var(--mtbkh-shadow-md); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.mtbkh-about__content p { font-size: 16px; }

/* ---------- Stats ---------- */
.mtbkh-stats { background: var(--mtbkh-ink); padding-block: 44px; }
.mtbkh-stats--boxed { background: var(--mtbkh-surface); border-radius: var(--mtbkh-radius); margin-top: 40px; padding-block: 32px; }
.mtbkh-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.mtbkh-stat { display: flex; flex-direction: column; gap: 4px; }
.mtbkh-stat__number { font-size: clamp(26px, 3vw, 38px); font-weight: 800; color: #fff; }
.mtbkh-stats .mtbkh-stat__label { color: rgba(255,255,255,.7); font-size: 14px; }
.mtbkh-stats--boxed .mtbkh-stat__number { color: var(--mtbkh-green); }
.mtbkh-stats--boxed .mtbkh-stat__label { color: var(--mtbkh-taupe); }

/* Boxed variant (used on the "من نحن" page) additionally gets an icon per
   stat, styled and animated exactly like .mtbkh-feature__icon in the
   features row it replaces — same circle, same hover lift/fill — so the
   two sections read as one consistent design language. */
.mtbkh-stats--boxed .mtbkh-stat { align-items: center; }
.mtbkh-stats--boxed .mtbkh-stat__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px; height: 46px;
	border-radius: 12px;
	background: transparent;
	border: 1.5px solid var(--mtbkh-surface-alt);
	color: var(--mtbkh-green);
	margin-bottom: 10px;
	transition: transform .4s cubic-bezier(.34,1.56,.64,1), background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.mtbkh-stats--boxed .mtbkh-stat__icon svg { width: 20px; height: 20px; transition: transform .35s ease; }
.mtbkh-stats--boxed .mtbkh-stat:hover .mtbkh-stat__icon {
	background: var(--mtbkh-green);
	border-color: var(--mtbkh-green);
	color: #fff;
	transform: translateY(-6px);
	box-shadow: 0 12px 22px rgba(94,114,87,.32);
}
.mtbkh-stats--boxed .mtbkh-stat:hover .mtbkh-stat__icon svg { transform: scale(1.12); }

/* ---------- CTA banner ----------
   Title + description sit together on one side (the reading-start side —
   the right, in RTL) with the button on the opposite side, instead of the
   previous stacked/centered layout — a plain flex row does this correctly
   on its own since flex-start already means "right" under dir="rtl". */
.mtbkh-cta-banner {
	background: linear-gradient(135deg, var(--mtbkh-green), var(--mtbkh-green-dark));
	padding-block: 56px;
}
.mtbkh-cta-banner__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.mtbkh-cta-banner__text { max-width: 560px; }
.mtbkh-cta-banner__inner h2 { color: #fff; margin: 0 0 10px; }
.mtbkh-cta-banner__inner p {
	color: rgba(255,255,255,.85);
	margin: 0;
}

/* ---------- Footer ---------- */
.mtbkh-footer { background: var(--mtbkh-charcoal); color: rgba(255,255,255,.75); padding-top: 56px; }
.mtbkh-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 32px;
	padding-bottom: 40px;
}
.mtbkh-footer__brand img {
	max-height: 80px;
	margin-bottom: 14px;
	filter: brightness(0) invert(1);
	object-fit: contain;
	margin-inline-end: 0;
	width: max-content;
}
.mtbkh-footer__brand p { color: rgba(255,255,255,.6); max-width: 280px; }
.mtbkh-footer__social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; max-width: 300px; }
.mtbkh-footer__social-link {
	width: 36px; height: 36px;
	border-radius: 50%;
	background: rgba(255,255,255,.08);
	display: flex; align-items: center; justify-content: center;
	color: #fff;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.mtbkh-footer__social-link svg { width: 16px; height: 16px; }
.mtbkh-footer__social-link:hover { background: var(--mtbkh-green-dark); color: #fff; transform: translateY(-2px); }

.mtbkh-footer__col h3 { color: #fff; font-size: 15px; margin-bottom: 16px; }
.mtbkh-footer__col ul { display: flex; flex-direction: column; gap: 10px; }

/*
 * Footer links: white on hover (no color shift — the underline alone is the
 * feedback) with a 2px underline that reveals from the right edge and
 * retreats back off the left edge, matching the RTL "forward" direction the
 * rest of the theme's motion follows.
 */
.mtbkh-footer__col a {
	position: relative;
	display: inline-block;
	color: rgba(255,255,255,.65);
	font-size: 14.5px;
	transition: color .2s ease;
}
.mtbkh-footer__col a::after {
	content: '';
	position: absolute;
	inset-inline-end: 0;
	inset-block-end: -3px;
	height: 1px;
	width: 100%;
	background: #fff;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .3s ease;
}
.is-ltr .mtbkh-footer__col a::after { transform-origin: left; }
.mtbkh-footer__col a:hover { color: #fff; }
.mtbkh-footer__col a:hover::after { transform: scaleX(1); }

.mtbkh-footer__contact li { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.mtbkh-footer__contact svg { width: 16px; height: 16px; flex-shrink: 0; color: #fff; }
.mtbkh-footer__address { align-items: flex-start !important; }

.mtbkh-footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding-block: 18px; text-align: center; font-size: 13.5px; }

/* ---------- Breadcrumbs ---------- */
.mtbkh-breadcrumbs { margin-bottom: 20px; font-size: 13.5px; color: var(--mtbkh-taupe); }
/* list-style/margin/padding reset: it's a bare <ol> (semantically correct —
   a breadcrumb trail IS an ordered sequence) but should never actually show
   "1. 2. 3." numbering like a literal numbered list. */
.mtbkh-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.mtbkh-breadcrumbs li { display: flex; align-items: center; gap: 6px; }
.mtbkh-breadcrumbs li:not(:last-child)::after {
	content: '›';
	font-size: 15px;
	line-height: 1;
	opacity: .5;
}
.mtbkh-breadcrumbs a { color: var(--mtbkh-green); }

/* ---------- Page banner ----------
   Shared top strip (breadcrumbs + page title, printed by
   mtbkh_page_banner() in helpers.php) for every interior page — catalog,
   portfolio, single product/portfolio, about, contact, booking, plain
   pages/posts. A soft surface-to-surface-alt gradient (instead of a flat
   fill) plus a thin brand-gradient accent line along the very top edge —
   the same green→gold pairing used on the CTA banner/buttons elsewhere —
   gives every interior page a consistent, slightly more "designed" opening
   band under the nav rather than a plain flat-colored strip. */
.mtbkh-page-banner {
	position: relative;
	background: linear-gradient(180deg, var(--mtbkh-surface) 0%, var(--mtbkh-surface-alt) 100%);
	padding-block: 56px 40px;
	margin-bottom: 44px;
	border-bottom: 1px solid var(--mtbkh-surface-alt);
	overflow: hidden;
	text-align: center;
}
/*.mtbkh-page-banner::before {
	content: '';
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--mtbkh-green), var(--mtbkh-gold));
}*/
/* A quiet dotted grid, echoing the sort of decorative flourish common on
   editorial/institutional page banners — purely ornamental, hidden on
   narrower screens where there's no spare room beside the centered title. */
.mtbkh-page-banner__decor {
	position: absolute;
	inset-inline-end: 6%;
	inset-block-start: 50%;
	transform: translateY(-50%);
	width: 130px;
	height: 90px;
	background-image: radial-gradient(var(--mtbkh-taupe) 1.5px, transparent 1.5px);
	background-size: 15px 15px;
	opacity: .25;
	pointer-events: none;
}
[dir="rtl"] .mtbkh-page-banner__decor,
.is-rtl .mtbkh-page-banner__decor { inset-inline-end: auto; inset-inline-start: 6%; }
@media (max-width: 900px) {
	.mtbkh-page-banner__decor { display: none; }
}
.mtbkh-page-banner__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	position: relative;
	z-index: 1;
}
.mtbkh-page-banner .mtbkh-page-head { margin-bottom: 0; }
.mtbkh-page-banner .mtbkh-page-head h1 { font-size: clamp(28px, 3.4vw, 40px); margin: 0 0 10px; }
.mtbkh-page-banner .mtbkh-page-head p { color: var(--mtbkh-taupe); margin: 0 auto; max-width: 640px; }
.mtbkh-page-banner .mtbkh-breadcrumbs { margin-bottom: 0; }
.mtbkh-page-banner .mtbkh-breadcrumbs ol { justify-content: center; }

/* ---------- Alerts ---------- */
.mtbkh-alert { padding: 14px 18px; border-radius: 10px; font-size: 14.5px; margin-bottom: 20px; }
.mtbkh-alert--success { background: #e8f3ea; color: #1f6b3d; }
.mtbkh-alert--error { background: #fbe9e8; color: #a4231d; }

/* ---------- 404 ---------- */
.mtbkh-404 { text-align: center; padding-block: 80px; }
.mtbkh-404__code { font-size: 90px; font-weight: 800; color: var(--mtbkh-surface-alt); display: block; }
.mtbkh-404__actions { display: flex; gap: 12px; justify-content: center; margin-top: 20px; }

/* ---------- Floating WhatsApp button ---------- */
.mtbkh-whatsapp-float {
	position: fixed;
	bottom: 22px;
	inset-inline-end: 22px;
	z-index: 400;
	width: 56px; height: 56px;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	box-shadow: var(--mtbkh-shadow-md);
	transition: transform .15s ease;
}
.mtbkh-whatsapp-float svg { width: 28px; height: 28px; }
.mtbkh-whatsapp-float:hover { transform: scale(1.08); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
	.mtbkh-header__nav { display: none; }
	.mtbkh-mobile-toggle { display: flex; }
	.mtbkh-about__grid { grid-template-columns: 1fr; }
	.mtbkh-about__content { order: -1; }
	.mtbkh-features__grid,
	.mtbkh-stats__grid { grid-template-columns: repeat(2, 1fr); }
	.mtbkh-footer__grid { grid-template-columns: 1fr 1fr; }
	.mtbkh-hero-banner { height: min(70vh, 560px); }
}

@media (max-width: 640px) {
	.mtbkh-section { padding-block: 40px; }
	.mtbkh-features__grid,
	.mtbkh-stats__grid { grid-template-columns: 1fr 1fr; }
	.mtbkh-footer__grid { grid-template-columns: 1fr; }
	.mtbkh-404__code { font-size: 64px; }
	.mtbkh-hero-banner { height: min(76vh, 460px); }
	.mtbkh-hero-banner__content {
		max-width: none;
		padding-left: 20px;
		padding-right: 20px;
		margin-right: 0;
		align-items: center;
		text-align: center;
	}
	/* Title + description centered instead of right-aligned, and the two
	   CTA buttons shrunk down + no longer stretched to fill the row (that
	   flex:1 read as "huge" on a narrow screen) — just centered, compact,
	   side by side. */
	.mtbkh-hero-banner__actions { justify-content: center; }
	.mtbkh-hero-banner__actions .mtbkh-btn {
		flex: 0 0 auto;
		padding: 10px 18px;
		font-size: 13px;
	}
	.mtbkh-hero-banner__actions .mtbkh-btn svg { width: 15px; height: 15px; }
	/* Nav arrows move from the vertical stack floating mid-right (fine on a
	   tall desktop photo, cramped on mobile) down to flank the dots row at
	   the bottom instead: both the arrows row and the dots are centered on
	   the same point, and the gap between the two arrow buttons is sized to
	   clear the dots sitting between them, so the row reads as
	   "‹ • • • ›" instead of two floating circles. */
	.mtbkh-hero-banner__arrows {
		flex-direction: row;
		top: auto;
		bottom: 9px;
		right: auto;
		left: 50%;
		transform: translateX(-50%);
		gap: 110px;
	}
	.mtbkh-hero-banner__btn { width: 32px; height: 32px; }
	.mtbkh-hero-banner__btn svg { width: 13px; height: 13px; }
	.mtbkh-cta-banner__inner { flex-direction: column; align-items: flex-start; }
	.mtbkh-cta-banner__text { max-width: none; }
}