/* ---------------------------------------------------------------------------
   Component states that Webflow drove from its own runtime.

   webflow.js is not present in the rebuild (and should not be — it would drag in
   the whole Webflow interactions engine for two widgets). The original collapsed
   FAQ answers by writing inline `height:0px` from JS, so the ported stylesheet
   alone leaves every answer expanded. The closed state is expressed here in CSS
   instead, and subat.js only toggles a class.

   Keeping the state in CSS rather than inline styles also means the accordion
   still looks right inside the Elementor editor, where our JS does not run.
   --------------------------------------------------------------------------- */

/* --- FAQ accordion ------------------------------------------------------- */

.elementor .faq1_answer {
	height: 0;
	overflow: hidden;
	transition: height .35s cubic-bezier(.4, 0, .2, 1);
}

.elementor .faq1_accordion.is-open > .faq1_answer {
	/* Height is set in px by the script so the transition has two known
	   endpoints; it is released to auto once the animation finishes so the
	   answer can still reflow if the viewport changes. */
	height: auto;
}

.elementor .faq1_question {
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

/* The original inline chevron SVG is preserved by the transpiler, so only the
   rotation is added here — no icon is redrawn in CSS. */
.elementor .faq1_icon-wrapper {
	flex: 0 0 auto;
	transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

.elementor .faq1_accordion.is-open .faq1_icon-wrapper {
	transform: rotate(180deg);
}

/* Keyboard focus — the original had no focus state on the question row, which
   made the FAQ unusable without a mouse. */
.elementor .faq1_question:focus-visible {
	outline: 2px solid var(--_theme---system--focus-state, #142940);
	outline-offset: 2px;
	border-radius: var(--_sizes---border-radius--small, .25rem);
}

/* In the Elementor editor the toggle script does not run; showing every answer
   open there is the correct behaviour, otherwise the content looks empty and
   uneditable. */
body.elementor-editor-active .faq1_answer,
body.elementor-editor-preview .faq1_answer {
	height: auto;
}

/* --- Mobile navigation --------------------------------------------------- */

/* The header is an Elementor build using HFE's navigation-menu widget. Its stock
   responsive menu is a short dropdown pinned under the header bar; the design
   asks for a full-screen panel with the logo still showing. The markup HFE
   renders below its tablet breakpoint is:

     .hfe-nav-menu__breakpoint-tablet
       .hfe-nav-menu
         .hfe-nav-menu__toggle[.hfe-active-menu]        <- hamburger / close
         nav.hfe-nav-menu__layout-horizontal[.menu-is-active]
           ul.hfe-nav-menu > li.menu-item > a.hfe-menu-item

   HFE writes `width`, `left` and `z-index` onto the <nav> as inline styles from
   its own JS to fake a full-bleed dropdown. Inline styles cannot be outranked by
   a selector, which is the only reason !important appears below — every other
   rule here wins on specificity alone.

   The panel covers the header bar too, so the logo and the close button are
   lifted above it rather than left buried underneath. That is what puts the logo
   inside the full-screen menu: it is the real header logo showing through, not a
   second copy, so it keeps its link and its srcset. */

@media only screen and (max-width: 1024px) {

	.elementor .fixed-nav nav.hfe-nav-menu__layout-horizontal.menu-is-active {
		position: fixed !important;
		top: 0 !important;
		right: 0 !important;
		left: 0 !important;
		width: 100vw !important;
		max-width: 100vw !important;
		height: 100vh;
		height: 100dvh;
		margin: 0 !important;
		/* --subat-header-clearance is defined in style.css, where it already
		   carries the measured header height plus breathing room and a shorter
		   value below 767px. Reused here rather than measured again. */
		padding: var(--subat-header-clearance, 162px)
			var(--_layout---spacing--small, 1.5rem)
			var(--_layout---spacing--medium, 2rem);
		background-color: var(--brand--snow-white, #f1f0eb);
		overflow-y: auto;
		overscroll-behavior: contain;
		z-index: 9990 !important;
	}

	/* Above the panel, so they stay visible and tappable while it is open. */
	.elementor .fixed-nav .elementor-widget-site-logo,
	.elementor .fixed-nav .hfe-nav-menu__toggle,
	.elementor .fixed-nav .navbar2_button-wrapper {
		position: relative;
		z-index: 9995;
	}

	/* One full-width row per link. */
	.elementor .fixed-nav nav.hfe-nav-menu__layout-horizontal.menu-is-active ul.hfe-nav-menu {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.elementor .fixed-nav nav.hfe-nav-menu__layout-horizontal.menu-is-active ul.hfe-nav-menu > li.menu-item {
		width: 100%;
	}

	/* Specificity has to clear Elementor's generated per-widget rule
	   (`.elementor-58 .elementor-element-b9ca79b .menu-item a.hfe-menu-item`),
	   which is why this selector is spelled out in full. */
	.elementor .fixed-nav nav.hfe-nav-menu__layout-horizontal.menu-is-active ul.hfe-nav-menu li.menu-item a.hfe-menu-item {
		justify-content: flex-start;
		width: 100%;
		padding: var(--_layout---spacing--xsmall, 1.25rem) 0;
		font-size: var(--_typography---font-size--medium, 1.25rem);
		font-weight: var(--font-weight--bold, 700);
		color: var(--brand--brown, #1e1e1e);
		border-bottom: 1px solid rgb(30 30 30 / 8%);
	}

	.elementor .fixed-nav nav.hfe-nav-menu__layout-horizontal.menu-is-active ul.hfe-nav-menu li.menu-item:last-child a.hfe-menu-item {
		border-bottom: 0;
	}
}

/* The page behind a full-screen panel must not scroll. `:has()` keeps this in
   CSS — the alternative is a class toggled from JS, which then has to be kept in
   sync with HFE's own open/close path. The selector simply does nothing on a
   browser without :has(), and the panel still works. */
html:has(.fixed-nav nav.hfe-nav-menu__layout-horizontal.menu-is-active),
html:has(.fixed-nav nav.hfe-nav-menu__layout-horizontal.menu-is-active) body {
	overflow: hidden;
}

/* --- Footer menus -------------------------------------------------------- */

/* The two footer menus are HFE navigation-menu widgets set to `breakpoint-none`:
   they never collapse to a hamburger, so they are a single horizontal row at
   every width and there is no layout that would need a measured width.

   HFE's script writes one anyway. It keeps an inline `width` on the <nav> as
   part of its responsive bookkeeping — the header's nav carries `width: 0px`
   inline even on desktop — and coming back up from a narrow viewport the value
   it leaves behind is a mobile-sized one. The <ul> wraps inside it, and since
   the box is then only a few characters wide, every link lands on its own line
   and long ones break mid-phrase ("كيف / يعمل؟"). Reproduced by setting
   `width: 90px` on the nav by hand: 524x40 becomes 90x328, which is exactly the
   reported bug.

   Overridden outright rather than corrected, because no inline width is
   legitimate on these two. */

.elementor .footer .elementor-widget-navigation-menu nav.hfe-nav-menu__layout-horizontal {
	width: auto !important;
}

.elementor .footer .elementor-widget-navigation-menu ul.hfe-nav-menu {
	flex-flow: row wrap;
	width: auto;
}

/* --- Anchor scrolling ---------------------------------------------------- */

/* The header is pinned, so an anchor target would otherwise land underneath it.
   Same measured clearance the inner pages pad themselves by — a literal value,
   never measured from JS, per the note in style.css. */
html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--subat-header-clearance, 162px);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.elementor .faq1_answer,
	.elementor .faq1_icon-wrapper {
		transition: none;
	}
}