/* InnerG Header interactive elements: Nav Menu + Language Switcher. Both
   render as plain PHP now (no Elementor per-instance controls), so this
   file also carries their default typography/colour, not just structure. */

.innerg-nav-menu-desktop > ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
	/* Column gap trimmed from 2rem: the header's centre zone has a fixed
	   budget (max-width 1280px on .innerg-header-row__inner, minus the
	   fixed-size logo and actions zones either side) that doesn't grow
	   with the viewport, so every top-level label's width eats directly
	   into that same fixed pool — "Schedule & Book" alone was enough to
	   push the last item (Membership) past it and wrap to a second line.
	   1.25rem keeps every current EN/AR label on one row with margin to
	   spare for future label edits, without touching type size/tracking. */
	gap: 0.5rem 1.25rem;
}

.innerg-nav-menu-desktop li {
	position: relative;
}

.innerg-nav-menu-desktop a,
.innerg-nav-menu-mobile a {
	font-size: 0.8125rem; /* 13px — reference's enhanced --text-xs at desktop widths, not the raw 12px Tailwind default */
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var( --muted-foreground );
	text-decoration: none;
	transition: color 0.2s ease;
}

.innerg-nav-menu-desktop a:hover,
.innerg-nav-menu-mobile a:hover {
	color: var( --accent );
}

/* Small border-drawn chevron (no icon markup needed) on any top-level item
   that has children, flipping from pointing down to pointing up while its
   dropdown is open — kept as a simple rotated corner rather than a filled
   arrow icon to match the site's sharp, minimal line-work elsewhere. */
.innerg-nav-menu-desktop li.menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.innerg-nav-menu-desktop li.menu-item-has-children > a::after {
	content: '';
	inline-size: 0.4rem;
	block-size: 0.4rem;
	border-inline-end: 1.5px solid currentColor;
	border-block-end: 1.5px solid currentColor;
	transform: rotate( 45deg );
	transition: transform 0.2s ease, margin 0.2s ease;
}

.innerg-nav-menu-desktop li.menu-item-has-children:hover > a::after,
.innerg-nav-menu-desktop li.menu-item-has-children:focus-within > a::after {
	transform: rotate( 225deg );
	margin-block-start: 0.3rem;
}

.innerg-nav-menu-desktop .sub-menu {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	min-width: 240px;
	list-style: none;
	margin: 0;
	padding: 0.4rem 0;
	z-index: 50;
	background: var( --background );
	border: 1px solid var( --border );
	box-shadow: 0 16px 32px -16px rgba( 0, 0, 0, 0.22 );
	opacity: 0;
	visibility: hidden;
	transform: translateY( 4px );
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.innerg-nav-menu-desktop li:hover > .sub-menu,
.innerg-nav-menu-desktop li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY( 0 );
}

.innerg-nav-menu-desktop .sub-menu li + li {
	border-block-start: 1px solid var( --border );
}

.innerg-nav-menu-desktop .sub-menu a {
	display: block;
	padding: 0.7rem 1.25rem;
	font-size: 0.8125rem;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	color: var( --foreground );
}

.innerg-nav-menu-desktop .sub-menu a:hover {
	color: var( --accent );
	background: var( --secondary );
}

.innerg-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0.25rem;
	background: none;
	border: none;
	color: var( --foreground );
	cursor: pointer;
}

.innerg-nav-toggle svg {
	width: 100%;
	height: 100%;
}

.innerg-nav-menu-mobile {
	display: none;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0.25rem;
}

/* Positioned against #innerg-header (the nearest positioned ancestor, via
   its own `position: sticky`) rather than the narrow zone/column this
   element actually lives in, so the open drawer spans the full header
   width below it — matching the reference's full-width mobile menu panel
   — instead of being cramped into whichever zone the Nav Menu sits in. */
.innerg-nav-menu-mobile.is-open {
	display: flex;
	position: absolute;
	inset-inline: 0;
	top: 100%;
	z-index: 90;
	margin: 0;
	padding: 1.25rem 1.5rem;
	background: var( --background );
	border-top: 1px solid var( --border );
}

/* Off-canvas variant (Global → Mobile Menu → "Off-canvas panel") — a
   full-height panel that slides in from the inline-end edge (right in LTR,
   left in RTL, via logical properties) over a click-to-close backdrop,
   instead of the dropdown's below-header panel above. Kept in the DOM at
   all times (not display:none) so the transform can transition smoothly;
   .is-open only moves it on/off-screen and toggles visibility. Placed after
   the dropdown rules above so it wins on the properties both set (equal
   specificity, later source wins) whenever Nav_Menu_Element::render() adds
   this modifier class. */
.innerg-nav-menu-mobile--offcanvas {
	display: flex;
	flex-direction: column;
	position: fixed;
	inset-block: 0;
	inset-inline-end: 0;
	top: 0;
	width: min( 85vw, 22rem );
	max-width: 100%;
	margin: 0;
	padding: calc( var( --header-height, 64px ) + 1.5rem ) 1.5rem 1.5rem;
	background: var( --background );
	border-top: none;
	border-inline-start: 1px solid var( --border );
	box-shadow: -20px 0 40px -12px rgba( 0, 0, 0, 0.25 );
	transform: translateX( 100% );
	transition: transform 0.3s ease;
	overflow-y: auto;
	z-index: 95;
	visibility: hidden;
}

/* transform: translateX() always moves along physical (not logical) axes,
   so the off-screen direction needs its own RTL flip even though the
   panel's resting edge above already uses a logical inset-inline-end. */
[dir='rtl'] .innerg-nav-menu-mobile--offcanvas {
	box-shadow: 20px 0 40px -12px rgba( 0, 0, 0, 0.25 );
	transform: translateX( -100% );
}

/* The dropdown rule above (.innerg-nav-menu-mobile.is-open) is two classes
   — same specificity tier as .innerg-nav-menu-mobile--offcanvas.is-open
   below — but it unconditionally OUTRANKS the plain, non-.is-open
   .innerg-nav-menu-mobile--offcanvas base rule above (0,2,0 beats 0,1,0
   regardless of source order), so the moment .is-open lands, the
   dropdown's position/inset/top/z-index/padding/background silently take
   over unless re-asserted here at matching specificity. */
.innerg-nav-menu-mobile--offcanvas.is-open {
	position: fixed;
	inset-inline-start: auto;
	inset-inline-end: 0;
	top: 0;
	z-index: 95;
	padding: calc( var( --header-height, 64px ) + 1.5rem ) 1.5rem 1.5rem;
	background: var( --background );
	border-top: none;
	transform: translateX( 0 );
	visibility: visible;
}

.innerg-nav-offcanvas-backdrop {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.4 );
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	z-index: 90;
}

.innerg-nav-offcanvas-backdrop.is-open {
	opacity: 1;
	visibility: visible;
}

/* Parent items get their own expand/collapse button (added only for the
   mobile walker — see Nav_Menu_Element::mobile_walker()) sitting beside the
   link, since a hover-reveal dropdown has no equivalent once there's no
   mouse; the link itself still navigates on tap. */
.innerg-nav-menu-mobile li.menu-item-has-children {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.innerg-nav-menu-mobile li.menu-item-has-children > a {
	flex: 1 1 auto;
}

.innerg-nav-submenu-toggle {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: 2rem;
	block-size: 2rem;
	padding: 0.25rem;
	background: none;
	border: none;
	color: var( --muted-foreground );
	cursor: pointer;
}

.innerg-nav-submenu-toggle svg {
	inline-size: 1rem;
	block-size: 1rem;
	transition: transform 0.25s ease;
}

.innerg-nav-menu-mobile li.is-submenu-open > .innerg-nav-submenu-toggle svg {
	transform: rotate( 180deg );
}

.innerg-nav-menu-mobile .sub-menu {
	flex-basis: 100%;
	list-style: none;
	margin: 0;
	padding-inline-start: 1.25rem;
	max-block-size: 0;
	overflow: hidden;
	transition: max-block-size 0.3s ease;
}

.innerg-nav-menu-mobile li.is-submenu-open > .sub-menu {
	max-block-size: 30rem;
}

.innerg-nav-menu-mobile a {
	display: block;
	padding: 0.75rem 0;
}

/* Whichever "extra" elements Global → Mobile Menu is configured with
   (Buttons + Language Switcher by default; Search/Social/Custom HTML can be
   added — see Header_Renderer::mobile_extra_html()), rendered inside the
   mobile drawer — hidden on desktop, shown stacked once the drawer opens.
   The breakpoint-driven show/hide rules for the toggle, desktop nav, and
   the top-level (non-duplicated) Buttons/Language Switcher are generated
   dynamically by Header_Renderer::enqueue_assets() from the Customizer's
   configurable mobile breakpoint, not hardcoded here. */
.innerg-nav-mobile-extra {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var( --border );
}

/* The row/zone markup here is the exact same .innerg-header-row--main
   .innerg-header-row__inner reused from the desktop header bar, which
   main.css pins to a fixed `height: var(--header-height, 64px)` — correct
   for an actual header bar, but with two wrapped lines of content (the
   buttons row, then language switcher + search on the line below) this
   drawer's copy needs far more than 64px. Left unset, that fixed height
   held the row too short and the overflowing content spilled both above
   and below it (centered on the shared `align-items: center`), which is
   exactly what looked like the buttons "leaning into" the separator line
   above them. */
.innerg-nav-mobile-extra .innerg-header-row__inner {
	height: auto;
}

/* Each placed element (buttons / language switcher / search / ...) is its
   own `.innerg-header-zone` child below the separator — that zone class is
   shared with the desktop right-zone, where it's a flex ROW sized for a
   cozy fit of everything at once (no wrapping). At mobile widths there's
   nowhere near enough room for that, so wrap it instead: the buttons pair
   forced onto its own full-width row (flex-basis:100%), then whatever's
   narrow enough to share a line — language switcher + search by default —
   wraps onto the row below it together, side by side. */
.innerg-nav-mobile-extra .innerg-header-zone {
	flex-wrap: wrap;
	align-items: center;
	row-gap: 0.75rem;
}

.innerg-nav-mobile-extra .innerg-header-element--buttons {
	flex: 1 1 100%;
}

/* Sign In/Sign Out + Join Now/My Profile: side by side, evenly splitting
   the full row width, rather than each stacked full-width on its own line.
   Grid, not flex — the two buttons rarely share the same text length or
   the same --outline/--solid padding, and flex-basis:0/flex-grow:1 still
   lets those differences nudge the split off 50/50; a 1fr/1fr grid has no
   such ambiguity.
   auto-fit + minmax(110px, 1fr), not a fixed 1fr 1fr — on a narrow enough
   screen (or long enough translated label, e.g. "My Profile") two 1fr
   columns would squeeze each button below a legible width and wrap its
   text. Below ~230px combined there's only room for one 110px+ column, so
   auto-fit collapses to a single column and the buttons stack full-width
   one above the other instead — same mechanism, no separate breakpoint. */
.innerg-nav-mobile-extra .innerg-header-buttons {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 110px, 1fr ) );
	gap: 0.75rem;
	width: 100%;
}

.innerg-nav-mobile-extra .innerg-btn {
	justify-content: center;
}

.innerg-lang-switcher {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0.75rem;
}

.innerg-lang-switcher .innerg-lang + .innerg-lang {
	padding-inline-start: 0.75rem;
	border-inline-start: 1px solid var( --border );
}

.innerg-lang a {
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --muted-foreground );
	text-decoration: none;
	transition: color 0.2s ease;
}

.innerg-lang a:hover {
	color: var( --foreground );
}

.innerg-lang--active a {
	color: var( --foreground );
	font-weight: 600;
}