/* ---------------------------------------------------------------------------
   Behaviour Elementor's controls cannot express.

   2026-09-28: the FAQ is now Elementor's native Accordion widget, so the old
   faq1_* open/close rules are gone. What remains works around HFE's
   navigation-menu widget (inline styles it writes from JS) and pins anchor
   scrolling below the fixed header.
   --------------------------------------------------------------------------- */

/* --- 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-60 .elementor-widget-navigation-menu nav.hfe-nav-menu__layout-horizontal {
	width: auto !important;
}

.elementor-60 .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;
	}

}