/* BP FAQ Hero V2 widget styles
 *
 * Wide immersive hero for the FAQ page. One single full-bleed
 * background image is anchored to the right of the viewport.
 * A layered cream gradient overlay keeps the LEFT text block
 * readable without ever covering the image with a hard dark
 * rectangle. The dynamic popular-questions rail is rendered
 * as ONE shared inline chip row — no floating cards, no
 * heavy icons.
 *
 * No JS. All responsive rules are pure CSS.
 *
 * Visual stack (bottom to top):
 *   0. Fallback dark-green / cream gradient (when no image)
 *   1. Background image (full viewport width, right-anchored)
 *   2. Cream overlay (left = solid cream, right = transparent)
 *   3. Content (eyebrow / H1 / intro / popular-questions rail)
 *
 * Color tokens — the existing Barbary V2 hero palette
 * reused as-is (no new tokens introduced):
 *   --bp-fhv2-green:    #2F4A2F  (dark green, headings)
 *   --bp-fhv2-green-2:  #374F37
 *   --bp-fhv2-cream:    #F4EFE3  (warm cream, panel + overlay)
 *   --bp-fhv2-cream-2:  #EFE8D9
 *   --bp-fhv2-gold:     #B8B25A  (muted gold, accent)
 *   --bp-fhv2-ink:      #1F2A1F  (body text)
 *   --bp-fhv2-ink-soft: #586558  (support copy)
 */

.bp-faq-hero-v2 {
	--bp-fhv2-green:    #2F4A2F;
	--bp-fhv2-green-2:  #374F37;
	--bp-fhv2-cream:    #F4EFE3;
	--bp-fhv2-cream-2:  #EFE8D9;
	--bp-fhv2-gold:     #B8B25A;
	--bp-fhv2-ink:      #1F2A1F;
	--bp-fhv2-ink-soft: #586558;
	--bp-fhv2-divider:  rgba(88, 101, 88, 0.18);

	--bp-fhv2-inner-max: 1320px;
	--bp-fhv2-pad-x:     clamp(24px, 5vw, 64px);
	--bp-fhv2-pad-y:     clamp(56px, 7vw, 96px);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	inline-size: 100%;
	max-inline-size: none;
	min-block-size: 640px;
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	color: var(--bp-fhv2-ink);
	background: var(--bp-fhv2-cream);
}

/* ---------------- Full-bleed breakout ----------------
 * Same pattern as the existing V2 hero widgets: force the
 * surrounding Elementor wrappers to 100% width and break
 * out of any boxed container via `100vw + calc(50%-50vw)`. */
.elementor .elementor-section > .elementor-column > .elementor-widget-wrap,
.elementor .elementor-section > .elementor-column > .elementor-widget-wrap > .elementor-widget,
.elementor .elementor-section > .elementor-column > .elementor-widget-wrap > .elementor-widget > .bp-faq-hero-v2,
.elementor-section .elementor-container {
	width: 100% !important;
	max-width: 100% !important;
}

.elementor-element.bp-faq-hero-v2,
.elementor .bp-faq-hero-v2,
.e-con.bp-faq-hero-v2,
.bp-faq-hero-v2 {
	padding: 0;
	margin: 0;
	inline-size: 100%;
	max-inline-size: 100%;
}

.elementor-inner section.elementor-section,
.elementor-inner section.elementor-section > .elementor-container,
.elementor-inner section.elementor-section > .elementor-row,
.elementor-inner section.elementor-section > .elementor-row > .elementor-column,
.elementor-inner section.elementor-section > .elementor-row > .elementor-column > .elementor-widget-wrap {
	width: 100% !important;
	max-width: 100% !important;
	padding-inline: 0 !important;
}

.elementor .elementor-widget.elementor-widget-bp-faq-hero-v2,
.elementor-widget.elementor-widget-bp-faq-hero-v2 {
	inline-size: 100vw !important;
	max-inline-size: 100vw !important;
	margin-inline-start: calc(50% - 50vw) !important;
	margin-inline-end:   calc(50% - 50vw) !important;
	position: relative;
	z-index: 1;
}

.e-con:has(> .elementor-widget-bp-faq-hero-v2),
.e-con:has(> .e-con-inner > .elementor-widget-bp-faq-hero-v2),
.e-con-inner:has(> .elementor-widget-bp-faq-hero-v2) {
	--container-default-padding-top:    0px !important;
	--container-default-padding-bottom: 0px !important;
	padding-top:    0 !important;
	padding-bottom: 0 !important;
}
.elementor-widget.elementor-widget-bp-faq-hero-v2 {
	margin-block-end: 0 !important;
	--kit-widget-spacing: 0px !important;
}

/* ---------------- Fallback (no image) ----------------
 * Same dark-green / cream diagonal gradient used by the
 * other V2 heroes so the hero never looks like a missing
 * image. */
.bp-faq-hero-v2__fallback {
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(120% 90% at 100% 50%, rgba(184, 178, 90, 0.18) 0%, rgba(184, 178, 90, 0) 55%),
		linear-gradient(115deg, #F4EFE3 0%, #EAE0C8 55%, #2F4A2F 100%);
	pointer-events: none;
}

/* ---------------- Background image ---------------- */
.bp-faq-hero-v2__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: right center;
	background-size: cover;
	pointer-events: none;
}

/* ---------------- Cream overlay (left = solid, right = transparent) ----------------
 * Same hard-stop multi-stop gradient used in the existing
 * V2 heroes so the transition between cream and image is
 * gradual, not a hard rectangular edge. */
.bp-faq-hero-v2__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(
			to right,
			rgba(244, 239, 227, 0.96) 0%,
			rgba(244, 239, 227, 0.88) 22%,
			rgba(244, 239, 227, 0.72) 38%,
			rgba(244, 239, 227, 0.50) 52%,
			rgba(244, 239, 227, 0.22) 70%,
			rgba(244, 239, 227, 0.00) 88%,
			rgba(244, 239, 227, 0.00) 100%
		);
}

/* Subtle lower-left support so the intro + popular rail
 * stay readable on darker photos. */
.bp-faq-hero-v2.has-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(
			to top,
			rgba(31, 42, 31, 0.28) 0%,
			rgba(31, 42, 31, 0.12) 30%,
			rgba(31, 42, 31, 0.00) 60%
		);
}

/* ---------------- Inner layout ----------------
 * Centered 1320px container matching the rest of the site.
 * Vertically centered. Content sits in the left cream zone. */
.bp-faq-hero-v2__inner {
	position: relative;
	z-index: 3;
	inline-size: 100%;
	max-inline-size: var(--bp-fhv2-inner-max);
	margin-inline: auto;
	padding-block:   var(--bp-fhv2-pad-y);
	padding-inline: var(--bp-fhv2-pad-x);
	display: flex;
	align-items: center;
	min-block-size: inherit;
}

.bp-faq-hero-v2__content {
	display: flex;
	flex-direction: column;
	gap: 24px;
	inline-size: 100%;
	max-inline-size: 760px;
	justify-self: start;
}

/* ---------------- Eyebrow ----------------
 * Short gold accent line + uppercase label. Same
 * decoration device as the other V2 heroes — no floating
 * leaves, no circles, no blobs. */
.bp-faq-hero-v2__eyebrow {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bp-fhv2-green);
	line-height: 1;
}
.bp-faq-hero-v2__eyebrow-line {
	display: inline-block;
	inline-size: 40px;
	block-size: 2px;
	background: var(--bp-fhv2-gold);
	border-radius: 1px;
}

/* ---------------- Title ----------------
 * Dark green serif display. Dominant visual. */
.bp-faq-hero-v2__title {
	margin: 0;
	font-family: var(--bp-font-display, 'DM Serif Display', Georgia, serif);
	font-weight: 400;
	font-size: 64px;
	line-height: 1.04;
	letter-spacing: -0.01em;
	color: #374F3C;
	max-inline-size: 18ch;
}

/* ---------------- Intro ---------------- */
.bp-faq-hero-v2__intro {
	margin: 0;
	font-size: 18px;
	line-height: 1.65;
	color: var(--bp-fhv2-ink);
	max-inline-size: 620px;
}

/* ---------------- Popular rail ----------------
 * ONE shared inline rail of 3 lightweight chip-style
 * links, drawn dynamically from bp_faq. Reuses the same
 * translucent cream panel treatment as the V2 quick-points
 * rails so the visual language stays consistent. No
 * floating cards. No heavy icons. */
.bp-faq-hero-v2__popular {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-block-start: 4px;
}

.bp-faq-hero-v2__popular-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bp-fhv2-green);
	line-height: 1.2;
}

.bp-faq-hero-v2__rail {
	list-style: none;
	margin: 0;
	padding: 14px 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	background: rgba(247, 244, 236, 0.94);
	border: 1px solid rgba(184, 178, 90, 0.45);
	border-radius: 999px;
	-webkit-backdrop-filter: blur(6px);
	        backdrop-filter: blur(6px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}

.bp-faq-hero-v2__chip {
	display: inline-flex;
}

.bp-faq-hero-v2__chip-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--bp-fhv2-green);
	background: var(--bp-fhv2-cream);
	border: 1px solid rgba(55, 79, 55, 0.18);
	border-radius: 999px;
	text-decoration: none;
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.bp-faq-hero-v2__chip-link::before {
	content: "";
	inline-size: 6px;
	block-size: 6px;
	background: var(--bp-fhv2-gold);
	border-radius: 999px;
	flex: 0 0 auto;
}

.bp-faq-hero-v2__chip-link:hover,
.bp-faq-hero-v2__chip-link:focus-visible {
	background: var(--bp-fhv2-green);
	color: var(--bp-fhv2-cream);
	border-color: var(--bp-fhv2-green);
	transform: translateY(-1px);
	outline: none;
}
.bp-faq-hero-v2__chip-link:hover::before,
.bp-faq-hero-v2__chip-link:focus-visible::before {
	background: var(--bp-fhv2-gold);
}

/* ---------------- Responsive: Tablet (769-1024) ---------------- */
@media ( min-width: 769px ) and ( max-width: 1024px ) {
	.bp-faq-hero-v2 { min-block-size: 560px; }
	.bp-faq-hero-v2__title { font-size: 52px; max-inline-size: 20ch; }
	.bp-faq-hero-v2__intro { font-size: 17px; max-inline-size: 100%; }
	.bp-faq-hero-v2__content { max-inline-size: 70%; gap: 22px; }
	.bp-faq-hero-v2__bg { background-position: 70% center; }
}

/* ---------------- Mobile (<= 768) ---------------- */
@media ( max-width: 768px ) {
	.bp-faq-hero-v2 {
		min-block-size: auto;
	}

	.bp-faq-hero-v2__inner {
		padding-block: 110px 48px;
		padding-inline: 24px;
		align-items: stretch;
	}

	.bp-faq-hero-v2__content {
		max-inline-size: 100%;
		gap: 20px;
	}

	.bp-faq-hero-v2__title {
		font-size: 42px;
		line-height: 1.05;
		max-inline-size: 100%;
	}

	.bp-faq-hero-v2__intro {
		font-size: 16px;
		line-height: 1.6;
		max-inline-size: 100%;
	}

	/* On mobile the overlay strengthens across the whole
	 * image so the text remains readable above any photo. */
	.bp-faq-hero-v2__overlay {
		background:
			linear-gradient(
				to bottom,
				rgba(244, 239, 227, 0.92) 0%,
				rgba(244, 239, 227, 0.82) 55%,
				rgba(244, 239, 227, 0.65) 100%
			);
	}
	.bp-faq-hero-v2.has-image::after {
		background:
			linear-gradient(
				to bottom,
				rgba(31, 42, 31, 0.20) 0%,
				rgba(31, 42, 31, 0.05) 60%,
				rgba(31, 42, 31, 0.00) 100%
			);
	}

	.bp-faq-hero-v2__bg { background-position: 65% 35%; }

	.bp-faq-hero-v2__rail { padding: 12px 14px; gap: 8px; }
	.bp-faq-hero-v2__chip-link { padding: 8px 14px; font-size: 13px; }
}

/* ---------------- ≤ 480px ---------------- */
@media ( max-width: 480px ) {
	.bp-faq-hero-v2__inner {
		padding-block: 96px 40px;
		padding-inline: 20px;
	}
	.bp-faq-hero-v2__title { font-size: 38px; }
	.bp-faq-hero-v2__eyebrow { font-size: 12px; }
	.bp-faq-hero-v2__intro { font-size: 15px; }
}

/* ---------------- ≤ 390px ---------------- */
@media ( max-width: 390px ) {
	.bp-faq-hero-v2__inner { padding-inline: 18px; padding-block: 88px 36px; }
	.bp-faq-hero-v2__title { font-size: 34px; line-height: 1.05; }
	.bp-faq-hero-v2__eyebrow { font-size: 11px; letter-spacing: 0.12em; }
	.bp-faq-hero-v2__chip-link { padding: 7px 12px; font-size: 12.5px; }
}

/* ---------------- ≤ 360px ---------------- */
@media ( max-width: 360px ) {
	.bp-faq-hero-v2__inner { padding-inline: 16px; padding-block: 80px 32px; }
	.bp-faq-hero-v2__title { font-size: 30px; line-height: 1.05; }
	.bp-faq-hero-v2__eyebrow { font-size: 10px; letter-spacing: 0.10em; }
	.bp-faq-hero-v2__intro { font-size: 14px; }
	.bp-faq-hero-v2__rail { padding: 10px 12px; }
	.bp-faq-hero-v2__chip-link { padding: 6px 10px; font-size: 12px; }
}

/* ---------------- Arabic / RTL ---------------- */
[lang="ar"] .bp-faq-hero-v2__title,
[dir="rtl"] .bp-faq-hero-v2__title {
	font-family: var(--bp-font-arabic, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: 0;
}
[dir="rtl"] .bp-faq-hero-v2__bg { background-position: left center; }
[dir="rtl"] .bp-faq-hero-v2__overlay {
	background:
		linear-gradient(
			to left,
			rgba(244, 239, 227, 0.96) 0%,
			rgba(244, 239, 227, 0.88) 22%,
			rgba(244, 239, 227, 0.72) 38%,
			rgba(244, 239, 227, 0.50) 52%,
			rgba(244, 239, 227, 0.22) 70%,
			rgba(244, 239, 227, 0.00) 88%,
			rgba(244, 239, 227, 0.00) 100%
		);
}

/* ---------------- Reduced motion ---------------- */
@media ( prefers-reduced-motion: reduce ) {
	.bp-faq-hero-v2 [data-bp-stagger] {
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
}