/* BP Hero widget styles (v2 — brand-led rebuild)
 *
 * The first screen introduces the brand before the product. A
 * single immersive panoramic scene carries the visual story.
 * The editorial left column carries the brand title, the gold
 * separator, the sans-serif positioning statement, the
 * supporting copy, icon+label indicators, and CTAs. A rounded
 * dark-green information panel anchors the bottom (inset, not
 * full-width).
 *
 * The bottom panel reuses the visual language of the existing
 * `.bp-benefits` strip (deep Barbary green, olive/gold
 * outlined circular icons, cream typography, 20px radius,
 * subtle shadow) so the hero's last element feels like part of
 * the same design system.
 *
 * The global header is left completely untouched here. The
 * homepage header therefore uses its original utility strip,
 * its original sticky behavior (`.is-fixed` / `.is-stuck` /
 * `body.bp-header-fixed`), and its original drawer mechanics.
 * No `body.home` overrides in this file.
 *
 * Logical CSS properties only. RTL-safe. Animation uses CSS
 * keyframes (bp-hero-rise) via data-bp-stagger; reduced-motion
 * disables it.
 */

.bp-hero {
	--bp-hero-title:        #1F2A1F;
	--bp-hero-positioning:  #1F2A1F;
	--bp-hero-fg:           #1F2A1F;
	--bp-hero-accent:       #B8B25A;
	--bp-hero-indicator:    #2A3F2A;
	--bp-hero-cta-bg:       #2A3F2A;
	--bp-hero-cta-fg:       #FBF6EC;
	--bp-hero-cta2-bg:      transparent;
	--bp-hero-cta2-fg:      #2A3F2A;
	--bp-hero-cta2-bd:      #2A3F2A;
	--bp-hero-panel-bg:     rgba( 42, 63, 42, 0.8 );
	--bp-hero-panel-fg:     #F4ECDD;
	--bp-hero-panel-body:   rgba( 244, 236, 221, 0.78 );
	--bp-hero-panel-olive:  #B8B25A;
	--bp-hero-panel-radius: 20px;
	--bp-hero-panel-shadow: 0 14px 32px rgba( 31, 42, 31, 0.18 );
	--bp-hero-veil-start:   rgba( 250, 246, 236, 0.95 );
	--bp-hero-veil-mid:     rgba( 250, 246, 236, 0.55 );
	--bp-hero-inner-max:    1320px;
	--bp-hero-panel-max:    1320px;

	position: relative;
	isolation: isolate;
	overflow: clip;
	inline-size: 100%;
	max-inline-size: none;
	color: var(--bp-hero-fg);
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	min-block-size: clamp( 640px, 92svh, 880px );
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	padding-block-end: 56px; /* Reserve space for the bottom panel. */
	background: #2A3A2A;
}

/* Allow the Elementor column/section to be unconstrained so the
   hero spans the full viewport width. Scoped to .bp-hero. */
.elementor .elementor-section > .elementor-column > .elementor-widget-wrap > .elementor-widget > .bp-hero {
	inline-size: 100%;
	max-inline-size: none;
}
.elementor .e-con.bp-hero,
.elementor .elementor-element.bp-hero,
.bp-hero {
	padding-inline: 0;
	margin: 0;
}

/* ---------------- Composite Hero Scene ---------------- */
.bp-hero__scene { display: block; }
.bp-hero__scene--mobile { display: none; }

.bp-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}
.bp-hero__bg img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
}

/* Left readability veil. Cream → transparent. No hard edge. */
.bp-hero__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(
			90deg,
			var(--bp-hero-veil-start) 0%,
			var(--bp-hero-veil-mid)  34%,
			rgba( 250, 246, 236, 0.10 ) 60%,
			rgba( 250, 246, 236, 0.00 ) 78%
		);
}

/* ---------------- Inner content layout ---------------- */
.bp-hero__inner {
	position: relative;
	z-index: 3;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	max-inline-size: var(--bp-hero-inner-max);
	margin-inline: auto;
	padding-inline: clamp(28px, 5vw, 72px);
	padding-block: 30px clamp(80px, 8vw, 128px);
	inline-size: 100%;
}

.bp-hero__content {
	display: flex;
	flex-direction: column;
	gap: 28px;
	max-inline-size: 600px;
	inline-size: 100%;
}

/* ---------------- Title (DM Serif Display) ---------------- */
.bp-hero__title {
	margin: 0;
	font-family: var(--bp-font-display);
	font-weight: 400;
	color: #374F3C;
	text-transform: uppercase;
	line-height: 0.98;
	letter-spacing: 0;
	font-size: clamp( 56px, 6.4vw, 96px );
	max-inline-size: 12ch;
}
.bp-hero__title-line { display: block; }
.bp-hero__title-line:last-child { font-size: 0.62em; letter-spacing: 0.08em; }

/* ---------------- Gold accent divider (line + diamond + line, site-wide pattern) ---------------- */
.bp-hero__divider {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-block: 2px;
}
.bp-hero__divider-line {
	display: block;
	inline-size: 40px;
	block-size: 1px;
	background: var(--bp-hero-accent);
	flex: 0 0 auto;
}
.bp-hero__divider-diamond {
	display: block;
	inline-size: 6px;
	block-size: 6px;
	background: var(--bp-hero-accent);
	transform: rotate(45deg);
	flex: 0 0 auto;
}

/* ---------------- Positioning (Manrope, sans-serif, NOT italic) ---------------- */
.bp-hero__positioning {
	margin: 0;
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	font-weight: 600;
	color: var(--bp-hero-positioning);
	line-height: 1.18;
	letter-spacing: -0.005em;
	font-size: clamp( 18px, 1.9vw, 24px );
	max-inline-size: 22ch;
}
.bp-hero__positioning-line { display: block; }

/* ---------------- Description ---------------- */
.bp-hero__description {
	margin: 0;
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	font-size: 15px;
	line-height: 1.6;
	color: var(--bp-hero-fg);
	max-inline-size: 48ch;
	opacity: 0.82;
}

/* ---------------- Indicators (icon + label, no pills) ---------------- */
.bp-hero__indicators {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 4, minmax(0, 1fr) );
	gap: 18px;
}
.bp-hero__indicator {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	min-inline-size: 0;
}
.bp-hero__indicator-icon {
	display: inline-flex;
	inline-size: 36px;
	block-size: 36px;
	align-items: center;
	justify-content: center;
	color: var(--bp-hero-indicator);
}
.bp-hero__indicator-icon i,
.bp-hero__indicator-icon svg {
	inline-size: 34px;
	block-size: 34px;
	stroke-width: 1.4;
}
.bp-hero__indicator-label {
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--bp-hero-indicator);
	letter-spacing: 0;
}

/* ---------------- CTAs ---------------- */
.bp-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-block-start: 6px;
}
.bp-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-block-size: 50px;
	padding: 14px 24px;
	border-radius: 10px;
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.02em;
	text-decoration: none;
	border: 1.5px solid transparent;
	transition: transform 200ms ease, background-color 200ms ease, color 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
	white-space: nowrap;
	line-height: 1.1;
}
.bp-hero__cta-label { display: inline-block; }
.bp-hero__cta-arrow {
	display: inline-flex;
	inline-size: 18px;
	block-size: 18px;
	align-items: center;
	justify-content: center;
}
.bp-hero__cta-arrow svg { inline-size: 16px; block-size: 16px; }

.bp-hero__cta--primary {
	background: var(--bp-hero-cta-bg);
	color: var(--bp-hero-cta-fg);
	border-color: var(--bp-hero-cta-bg);
}
.bp-hero__cta--primary:hover,
.bp-hero__cta--primary:focus-visible {
	transform: translateY(-2px);
	background: #1F2F1F;
	box-shadow: 0 10px 24px rgba( 31, 42, 31, 0.30 );
}
.bp-hero__cta--secondary {
	background: #FFFFFF;
	color: var(--bp-hero-cta2-fg);
	border-color: #FFFFFF;
	border-width: 0;
}
.bp-hero__cta--secondary:hover,
.bp-hero__cta--secondary:focus-visible {
	transform: translateY(-2px);
	background: #FFFFFF;
	box-shadow: 0 6px 16px rgba( 31, 42, 31, 0.12 );
}

/* ---------------- Bottom information panel (bp-benefits visual system) ----------------
 *
 * Reuses the `.bp-benefits` palette: deep Barbary green
 * background, olive/gold circular outlined icons, cream
 * typography, 20px radius, subtle shadow. Title + body
 * (longer than the 2-line uppercase label used by `.bp-benefits`).
 */
.bp-hero__panel {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 4;
	padding-inline: clamp(20px, 4vw, 48px);
	padding-block: 22px;
}
.bp-hero__panel-inner {
	max-inline-size: var(--bp-hero-panel-max);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat( 4, minmax(0, 1fr) );
	gap: 0;
	padding: 24px clamp(22px, 2.5vw, 36px);
	background: var(--bp-hero-panel-bg);
	border-radius: var(--bp-hero-panel-radius);
	box-shadow: var(--bp-hero-panel-shadow);
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif);
}
.bp-hero__panel-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	min-inline-size: 0;
	padding-inline: clamp(14px, 1.6vw, 22px);
	border-inline-start: 1px solid rgba( 184, 178, 90, 0.22 );
}
.bp-hero__panel-item:first-child {
	border-inline-start: 0;
	padding-inline-start: 0;
}
.bp-hero__panel-icon {
	flex: 0 0 auto;
	display: inline-flex;
	inline-size: 52px;
	block-size: 52px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1.5px solid var(--bp-hero-panel-olive);
	color: var(--bp-hero-panel-olive);
	line-height: 1;
}
.bp-hero__panel-icon i,
.bp-hero__panel-icon svg {
	font-size: 24px;
	inline-size: 24px;
	block-size: 24px;
	stroke-width: 1.5;
	fill: currentColor;
}
.bp-hero__panel-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-inline-size: 0;
}
.bp-hero__panel-title {
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--bp-hero-panel-fg);
	line-height: 1.25;
}
.bp-hero__panel-body {
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	font-size: 12px;
	line-height: 1.5;
	color: var(--bp-hero-panel-body);
}

/* ---------------- Animation (CSS keyframes, no JS) ---------------- */
@keyframes bp-hero-rise {
	from { transform: translateY(12px); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}
.bp-hero [data-bp-stagger] {
	animation: bp-hero-rise 600ms ease both;
}
.bp-hero [data-bp-stagger="0"] { animation-delay: 0ms; }
.bp-hero [data-bp-stagger="1"] { animation-delay: 90ms; }
.bp-hero [data-bp-stagger="2"] { animation-delay: 180ms; }
.bp-hero [data-bp-stagger="3"] { animation-delay: 270ms; }
.bp-hero [data-bp-stagger="4"] { animation-delay: 360ms; }
.bp-hero [data-bp-stagger="5"] { animation-delay: 460ms; }
.bp-hero [data-bp-stagger="6"] { animation-delay: 580ms; }

/* ---------------- TABLET (769 - 1024) ---------------- */
@media ( min-width: 769px ) and ( max-width: 1024px ) {
	.bp-hero { min-block-size: auto; padding-block-end: 0; }
	.bp-hero__title { font-size: clamp( 48px, 6vw, 72px ); }
	.bp-hero__inner { padding-block: 64px; }
	.bp-hero__content { gap: 22px; }

	/* Panel: switch to normal flow at tablet to avoid
	   overlap/clipping risk of the absolute desktop layout. */
	.bp-hero__panel {
		position: relative;
		inset: auto;
		padding-inline: 24px;
		padding-block: 22px;
	}
	.bp-hero__panel-inner {
		grid-template-columns: repeat( 2, minmax(0, 1fr) );
		row-gap: 22px;
		column-gap: clamp(20px, 4vw, 40px);
		padding: 24px 28px;
	}
	.bp-hero__panel-item { padding-inline: 0; border-inline-start: 0; gap: 12px; }
	.bp-hero__panel-icon { inline-size: 46px; block-size: 46px; }
	.bp-hero__panel-icon i,
	.bp-hero__panel-icon svg { font-size: 22px; inline-size: 22px; block-size: 22px; }
	.bp-hero__panel-title { font-size: 13px; }
	.bp-hero__panel-body  { font-size: 12px; }
}

/* ---------------- TABLET + MOBILE single column (<= 768) ---------------- */
@media ( max-width: 768px ) {
	.bp-hero {
		min-block-size: auto;
		padding-block-end: 0;
		display: block;
	}
	.bp-hero__bg { position: absolute; inset: 0; }
	.bp-hero__bg img { object-position: center 70%; }

	/* Switch to mobile scene when available. */
	.bp-hero[data-bp-hero-mode="composite"] .bp-hero__scene--desktop { display: none; }
	.bp-hero[data-bp-hero-mode="composite"] .bp-hero__scene--mobile { display: block; }
	.bp-hero__scene--desktop { display: none; }
	.bp-hero__scene--mobile { display: block; }

	.bp-hero__veil {
		background:
			linear-gradient(
				180deg,
				rgba( 250, 246, 236, 0.96 ) 0%,
				rgba( 250, 246, 236, 0.80 ) 38%,
				rgba( 250, 246, 236, 0.18 ) 72%,
				rgba( 250, 246, 236, 0.00 ) 100%
			);
	}

	.bp-hero__inner {
		display: block;
		padding-block: 48px 28px;
		padding-inline: 22px;
	}
	.bp-hero__content {
		max-inline-size: 100%;
		gap: 22px;
	}
	.bp-hero__title {
		font-size: clamp( 42px, 10vw, 60px );
		line-height: 1.0;
		max-inline-size: 100%;
	}
	.bp-hero__title-line:last-child { font-size: 0.6em; }
	.bp-hero__positioning { font-size: 20px; max-inline-size: 100%; }
	.bp-hero__description { font-size: 14px; max-inline-size: 100%; }
	.bp-hero__indicators { grid-template-columns: repeat( 2, minmax(0, 1fr) ); gap: 18px; row-gap: 18px; }
	.bp-hero__indicator { align-items: center; flex-direction: row; gap: 12px; }
	.bp-hero__indicator-icon { inline-size: 30px; block-size: 30px; }
	.bp-hero__indicator-icon i,
	.bp-hero__indicator-icon svg { inline-size: 26px; block-size: 26px; }
	.bp-hero__indicator-label { font-size: 13px; }

	.bp-hero__ctas { flex-direction: column; align-items: stretch; gap: 12px; }
	.bp-hero__ctas .bp-hero__cta { inline-size: 100%; max-inline-size: 360px; min-block-size: 50px; }

	.bp-hero__panel {
		position: relative;
		inset: auto;
		padding-inline: 20px;
		padding-block: 20px;
	}
	.bp-hero__panel-inner {
		grid-template-columns: repeat( 2, minmax(0, 1fr) );
		row-gap: 18px;
		padding: 20px;
		border-radius: 18px;
	}
	.bp-hero__panel-item {
		padding-inline: 0;
		border-inline-start: 0;
		gap: 12px;
	}
	.bp-hero__panel-icon { inline-size: 44px; block-size: 44px; }
	.bp-hero__panel-icon i,
	.bp-hero__panel-icon svg { font-size: 20px; inline-size: 20px; block-size: 20px; }
	.bp-hero__panel-title { font-size: 13px; }
	.bp-hero__panel-body  { font-size: 11px; }
}

/* ---------------- 480 ---------------- */
@media ( max-width: 480px ) {
	.bp-hero__title { font-size: clamp( 38px, 9vw, 48px ); }
	.bp-hero__inner { padding-inline: 18px; }
}

/* ---------------- 390 ---------------- */
@media ( max-width: 390px ) {
	.bp-hero__title { font-size: 34px; }
	.bp-hero__inner { padding-inline: 16px; gap: 18px; }
	.bp-hero__positioning { font-size: 18px; }
	.bp-hero__panel-inner { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------- 360 ---------------- */
@media ( max-width: 360px ) {
	.bp-hero__title { font-size: 30px; }
	.bp-hero__cta { font-size: 13px; padding-block: 12px; padding-inline: 16px; }
	.bp-hero__panel-inner { padding: 16px; }
}

/* ---------------- Arabic font swap ---------------- */
[lang="ar"] .bp-hero__title,
[dir="rtl"] .bp-hero__title {
	font-family: var(--bp-font-arabic);
	font-weight: 700;
	text-transform: none;
	line-height: 1.18;
	letter-spacing: 0;
}
[lang="ar"] .bp-hero__positioning,
[dir="rtl"] .bp-hero__positioning {
	font-family: var(--bp-font-arabic);
	font-weight: 700;
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
	.bp-hero [data-bp-stagger] {
		opacity: 1;
		transform: none;
		animation: none;
	}
	.bp-hero__cta { transition: none; }
}

/* ---------------- Account for WordPress admin bar (front end) ---------------- */
.admin-bar .bp-hero { min-block-size: calc( clamp( 640px, 92svh, 880px ) - 32px ); }