/* ==========================================================================
   Language switcher (added 2026-09-08)
   Scope: header only -- the new mobile globe icon and the new desktop
   inline "EN | Arabic" control. Does not touch any other header element.
   ========================================================================== */

/* ---- Mobile: globe icon (Astra "Custom HTML 1" header slot) ---- */
.ast-header-html-1 {
	display: flex;
	align-items: center;
}

.hw-lang-toggle-mobile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: #4A463F;
	text-decoration: none;
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
	line-height: 0;
}

.hw-lang-toggle-mobile:hover,
.hw-lang-toggle-mobile:focus-visible {
	color: #8A6A22;
}

.hw-lang-toggle-mobile svg {
	display: block;
}

/* ---- Desktop / tablet: inline "EN | Arabic" (Astra "Custom HTML 2" header slot) ---- */
.ast-header-html-2 {
	display: flex;
	align-items: center;
}

.hw-lang-toggle-desktop {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1;
	margin-inline-end: 6px;
}

.hw-lang-toggle-desktop .hw-lang-link {
	color: #4A463F;
	text-decoration: none;
}

.hw-lang-toggle-desktop .hw-lang-link:hover,
.hw-lang-toggle-desktop .hw-lang-link:focus-visible {
	color: #8A6A22;
}

.hw-lang-toggle-desktop .hw-lang-current {
	color: #C9982F;
	font-weight: 600;
}

.hw-lang-toggle-desktop .hw-lang-sep {
	color: #C9B8A0;
}

/* Astra hides desktop-slot items below the mobile header breakpoint and
   hides mobile-slot items at/above it, so no extra breakpoint rules are
   needed here to prevent the two controls from showing at the same time. */

/* ==========================================================================
   Mobile header: compact, consistent icon pair (added 2026-09-08,
   gap corrected 2026-09-08b)
   Scope: strictly #ast-mobile-header > .site-header-primary-section-right
   (the mobile globe + hamburger group only). Does not touch
   #ast-desktop-header, header height, typography, nav links, or anything
   else.

   Measured cause of the original oversized gap: Astra's core stylesheet
   has ".site-header-section>*{padding:0 10px}" with :first-child/
   :last-child rules only clearing the OUTER sides. That left 10px of
   Astra padding on the touching inner sides of our two wrapper divs
   (10px + 10px = 20px), on top of the 10px of empty space each 44x24
   tap-target box already has around its centered icon (10px + 10px =
   another 20px). The previous pass added a blind +14px margin on top of
   all of that (~54px total) instead of accounting for it. Fixed below by
   (1) neutralizing Astra's built-in padding on these two specific
   wrapper divs, then (2) closing the remaining inherent 20px tap-target
   whitespace down to the requested ~14px with a single, calculated -6px
   overlap margin. Both icons stay full 24x24 and both tap targets stay
   full 44x44 -- only the whitespace between the two boxes changed.
   Logical (inline-end/inline-start) properties are used throughout so
   RTL mirroring on Arabic is preserved automatically.
   ========================================================================== */

#ast-mobile-header .site-header-primary-section-right {
	align-items: center;
}

/* Globe wrapper: cancel Astra's built-in padding on this side (it's the
   first child, so Astra already zeroed its other side), then pull 6px
   closer to the hamburger to bring the inherent 20px tap-target gap down
   to ~14px. The 44x44 tap target and 24x24 icon size are unchanged. */
#ast-mobile-header .site-header-primary-section-right > .ast-header-html-1 {
	padding-inline-end: 0;
	margin-inline-end: -6px;
}

#ast-mobile-header .hw-lang-toggle-mobile {
	width: 44px;
	height: 44px;
}

#ast-mobile-header .hw-lang-toggle-mobile svg {
	width: 24px;
	height: 24px;
}

/* Hamburger wrapper: cancel Astra's built-in padding on this side too
   (it's the last child, so its other side is already zeroed by Astra). */
#ast-mobile-header .site-header-primary-section-right > [data-section="section-header-mobile-trigger"] {
	padding-inline-start: 0;
}

/* Hamburger: match the same 44x44 tap target and centering. Its own SVG
   is already a native 24x24 (unchanged), so only the button box needs
   normalizing -- Astra's default here is width:auto with em-based
   padding, which is what let it read larger/inconsistent before. */
#ast-mobile-header [data-section="section-header-mobile-trigger"] .menu-toggle.main-header-menu-toggle {
	width: 44px;
	height: 44px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}