/* ===== C. STICKY HEADER STACKING (z-index only; bg is native #0c211a) ===== */
#masthead.site-header { position: relative; z-index: 9990; }
.main-navigation.is_stuck,
#sticky-navigation,
#sticky-navigation.navigation-clone { z-index: 9995 !important; }

/* ===== B. MOBILE LOGO HEIGHT 56px (no native responsive logo-width field) ===== */
@media (max-width: 1149px) {
  .navigation-branding img.is-logo-image,
  .navigation-branding .sticky-navigation-logo img,
  #sticky-navigation .navigation-branding img,
  .site-logo img,
  #masthead .site-logo img,
  .site-header .header-image {
    max-height: 44px !important; height: 44px !important; width: auto !important;
    max-width: none !important; object-fit: contain !important;
    /* GP gives .navigation-branding img padding:10px 0; with border-box that
       padding eats into our capped height and visually shrinks the sticky
       logo vs the header logo. Zero it so the cap is all visible image. */
    padding: 0 !important;
  }
  /* keep EN standard logo container from shrinking/squeezing the image in a crowded bar */
  .site-header .site-logo,
  #masthead .inside-header > .site-logo { flex-shrink: 0 !important; }
}

/* ===== B2. DESKTOP unify logo height 62px on the STICKY CLONE =====
   Native Site Identity > Logo Width (=155 => 62px) sizes the ORIGINAL header
   logo, but GeneratePress does NOT apply logo width to the sticky-clone logo.
   Pin the clone (and original, harmlessly) to 62px so size is identical
   before/after scroll. */
@media (min-width: 1150px) {
  #sticky-navigation .navigation-branding img,
  .navigation-branding img.is-logo-image,
  .navigation-branding .sticky-navigation-logo img,
  #masthead .site-logo img,
  .site-header .header-image {
    max-height: 62px !important; height: 62px !important;
    /* explicit width, not auto: flex sizing squeezed the clone's copy of the
       same 250x100 logo to 105px. 62px tall at 2.5 aspect = 155px, identical
       to the real header logo. */
    width: 155px !important; max-width: none !important; object-fit: contain;
    /* GP's .navigation-branding img padding:10px 0 (border-box) left only
       42px of visible logo inside the 62px cap on the sticky clone — the
       "logo shrinks after scroll" report. Zero it: 62px = 62px both states. */
    padding: 0 !important;
  }
  /* pin the clone's logo CONTAINERS as well (Safari flex-shrink safety) */
  #sticky-navigation .navigation-branding,
  .main-navigation.is_stuck .navigation-branding,
  #sticky-navigation .navigation-branding .sticky-navigation-logo,
  .main-navigation.is_stuck .navigation-branding .sticky-navigation-logo {
    width: 155px !important; min-width: 155px !important;
    flex: 0 0 155px !important; overflow: visible !important;
  }
}

/* ===== B3. MOBILE sticky-clone logo = SAME 44px as the normal mobile header =====
   (was 52px, which made the logo visibly grow after scrolling) */
@media (max-width: 1149px) {
  #sticky-navigation .navigation-branding img,
  #sticky-navigation .sticky-navigation-logo img,
  #sticky-navigation .navigation-branding .sticky-navigation-logo img,
  .main-navigation.is_stuck .navigation-branding img,
  .main-navigation.is_stuck .sticky-navigation-logo img {
    max-height: 44px !important; height: 44px !important;
    width: 110px !important; /* 44px at the logo's 2.5 aspect */
    max-width: none !important; object-fit: contain !important;
  }
  /* BULLETPROOF (2026-07-21): Safari still shrank the clone's img despite all
     width pins — so hide the img and paint the logo as a fixed-size background
     on the branding container instead. Background-images cannot be squeezed
     by any flex math. */
  #sticky-navigation .navigation-branding img,
  .main-navigation.is_stuck .navigation-branding img { display: none !important; }
  #sticky-navigation .navigation-branding,
  .main-navigation.is_stuck .navigation-branding {
    width: 110px !important; min-width: 110px !important; height: 44px !important;
    flex: 0 0 110px !important; overflow: visible !important;
    background: url('https://tripyana.com/wp-content/uploads/2025/04/cropped-Tripyana-1-2-1.png') center/contain no-repeat !important;
  }
  /* keep the logo CLICKABLE (2026-07-22): hiding the img collapsed the inner
     <a> to 0 height, so the background-painted logo lost its home link —
     stretch the wrapper and anchor over the whole container instead. */
  #sticky-navigation .navigation-branding,
  .main-navigation.is_stuck .navigation-branding { position: relative !important; }
  #sticky-navigation .navigation-branding .sticky-navigation-logo,
  .main-navigation.is_stuck .navigation-branding .sticky-navigation-logo {
    position: absolute !important; top: 0 !important; left: 0 !important;
    width: 110px !important; min-width: 110px !important; height: 44px !important;
  }
  #sticky-navigation .navigation-branding .sticky-navigation-logo a,
  .main-navigation.is_stuck .navigation-branding .sticky-navigation-logo a {
    display: block !important; width: 100% !important; height: 100% !important;
  }
}

/* ===== A. BOOK NOW BUTTON COLORING (solid gold + dark emerald text, fully rounded) =====
   WP puts the menu CSS class on the <li>, so we style the <a> inside
   li.header-book-btn. Legacy a.tripyana-book-btn kept as a direct-anchor alias. */
.menu-bar-items li.header-book-btn > a, .main-navigation li.header-book-btn > a,
li.header-book-btn > a, a.header-book-btn, a.tripyana-book-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background-color: #d4af37 !important; color: #0c211a !important;
  font-weight: 700; height: 42px; line-height: 42px; padding: 0 22px !important;
  border-radius: 9999px !important; text-decoration: none !important; white-space: nowrap;
  border: 1px solid transparent; transition: background-color .2s ease, box-shadow .2s ease; margin: 0 6px;
}
li.header-book-btn > a:hover, a.header-book-btn:hover, a.tripyana-book-btn:hover {
  background-color: #e5c14e !important; color: #0c211a !important; box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.main-navigation .main-nav ul li.header-book-btn > a { color: #0c211a !important; }
@media (max-width: 1149px) { li.header-book-btn > a, a.header-book-btn, a.tripyana-book-btn { height: 38px !important; line-height: 38px !important; padding: 0 16px !important; font-size: 12px !important; margin: 0 !important; } }

/* ===== G. RTL submenu arrow direction (desktop) =====
   Nested flyouts open to the LEFT on RTL (section N) — mirror the ">" arrow
   into "<". GP renders the arrow as an svg inside .dropdown-menu-toggle
   (the old a::after rule targeted markup that no longer exists). */
.rtl .main-navigation:not(.slideout-navigation) .main-nav ul ul li.menu-item-has-children > a .dropdown-menu-toggle,
.rtl #sticky-navigation .main-nav ul ul li.menu-item-has-children > a .dropdown-menu-toggle {
  display: inline-block !important; transform: scaleX(-1) !important;
}

/* ===== G. Mobile accordion submenu indentation ===== */
@media (max-width: 1149px) {
  .slideout-navigation .sub-menu { padding-inline-start: 16px; }
  .rtl .slideout-navigation .sub-menu { padding-right: 16px; padding-left: 0; }
  html:not(.rtl) .slideout-navigation .sub-menu { padding-left: 16px; padding-right: 0; }
}

/* ===== G. Hero top padding so the title never hides under the header ===== */
@media (max-width: 1149px) {
  .home .entry-content > section:first-child,
  .page-id-2 .entry-content > section:first-child { padding-top: 26px !important; }
}

/* ===== D. MOBILE single-row header layout (original header only, via ">") ===== */
@media (max-width: 1149px) {
  #masthead.site-header .inside-header {
    display: flex !important; flex-wrap: nowrap !important; align-items: center !important;
    justify-content: space-between !important; box-sizing: border-box !important;
    min-height: 64px !important; max-height: 72px !important;
    padding: 6px 8px !important;
  }
  .rtl #masthead.site-header .inside-header,
  html:not(.rtl) #masthead.site-header .inside-header { flex-direction: row !important; }
  /* single logo on mobile: show the populated page-hero logo (standard .site-logo is hidden globally by the page-hero template), sized 56px, aligned to the far side */
  #masthead.site-header .inside-header > .site-logo.page-hero-logo {
    display: inline-block !important; order: 0 !important; margin: 0 !important; padding: 0 !important; flex: 0 0 auto !important;
   flex-shrink: 0 !important; width: auto !important;}
  #masthead.site-header .inside-header > .site-logo.page-hero-logo img {
    max-height: 44px !important; height: 44px !important; width: auto !important;
   object-fit: contain !important; max-width: none !important;}
  .rtl #masthead.site-header .inside-header > .site-logo.page-hero-logo { margin-left: 0 !important; margin-right: 0 !important; }
  html:not(.rtl) #masthead.site-header .inside-header > .site-logo.page-hero-logo { margin-right: 0 !important; margin-left: 0 !important; }
  .rtl #masthead.site-header .inside-header { padding-right: 4px !important; } /* logo flush to the right edge (2026-07-21) */
  html:not(.rtl) #masthead.site-header .inside-header { padding-left: 12px !important; }
  /* controls cluster (original wrapper only, NOT the clone) */
  #masthead.site-header .inside-header > .mobile-menu-control-wrapper {
    order: 2 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    align-items: center !important; width: auto !important; margin: 0 !important;
  }
  /* match clone bar to the normal bar: same height, padding and item gaps,
     so nothing changes size or position when the sticky bar takes over */
  #sticky-navigation.navigation-clone .inside-navigation,
  .main-navigation.is_stuck .inside-navigation {
    height: 64px !important; /* GP forces 72px here; the normal bar is 64px */
    min-height: 64px !important; max-height: 64px !important;
    padding: 6px 12px !important; box-sizing: border-box !important;
    display: flex !important; align-items: center !important;
    flex-wrap: nowrap !important; /* EN content is wider — wrapping dropped the
                                     hamburger + menu onto a 2nd row below the bar */
    gap: 6px !important; /* same toggle<->cluster gap as the normal bar */
  }
  /* AR: logo side flush to the right edge in the STUCK bar too (matches the
     normal bar's 4px) */
  .rtl #sticky-navigation .inside-navigation,
  .rtl .main-navigation.is_stuck .inside-navigation { padding-right: 4px !important; }
  /* the bar never shows the desktop menu on mobile — the slideout owns it.
     (GP's own hide rule lives in dynamic CSS that UCSS can strip for guests) */
  #masthead nav.main-navigation:not(.slideout-navigation) .main-nav > ul,
  #sticky-navigation .main-nav > ul,
  .main-navigation.is_stuck .main-nav > ul { display: none !important; }
  /* the desktop primary nav (#site-navigation) is an EMPTY spacer on mobile —
     everything inside it is hidden — yet its .inside-navigation kept ~38px of
     width sitting at the logo edge, pushing the logo inward (logo "زايح لليسار"
     on AR, 22 Jul). Zero its footprint while NOT stuck; the sticky bar
     (renamed #sticky-navigation / .is_stuck) is excluded and unaffected. */
  #masthead.site-header .inside-header > nav.main-navigation:not(.mobile-menu-control-wrapper):not(.slideout-navigation):not(.is_stuck):not(#sticky-navigation):not(.navigation-clone) {
    width: 0 !important; min-width: 0 !important; flex: 0 0 0px !important;
    padding: 0 !important; margin: 0 !important; overflow: hidden !important; order: 1 !important;
  }
  #sticky-navigation .menu-bar-items,
  .main-navigation.is_stuck .menu-bar-items {
    display: flex !important; align-items: center !important; gap: 8px !important;
  }
  /* explicit flex order in the stuck bar: [logo]...[lang|book][hamburger].
     GP absolutely-positions the clone's toggle at the LEFT edge, which happens
     to look right in RTL but overlaps the logo on LTR (EN) — force static flow
     so both directions mirror the normal bar. */
  #sticky-navigation .inside-navigation > .navigation-branding,
  .main-navigation.is_stuck .inside-navigation > .navigation-branding { order: 0; margin-inline-end: auto !important; }
  #sticky-navigation .inside-navigation > .main-nav,
  .main-navigation.is_stuck .inside-navigation > .main-nav { order: 1; }
  #sticky-navigation .inside-navigation > .menu-bar-items,
  .main-navigation.is_stuck .inside-navigation > .menu-bar-items { order: 2; }
  #sticky-navigation .inside-navigation > .menu-toggle,
  .main-navigation.is_stuck .inside-navigation > .menu-toggle {
    order: 3; position: static !important; float: none !important; margin: 0 !important;
    right: auto !important; left: auto !important; top: auto !important;
  }
}

/* ===== E. MOBILE hamburger 27px + 44px touch targets + tap gaps ===== */
@media (max-width: 1149px) {
  #masthead.site-header .inside-header > .mobile-menu-control-wrapper { gap: 6px !important; }
  /* space between language switcher and Book button (tightened so the
     hamburger never overflows on 360px screens) */
  #masthead.site-header .inside-header > .mobile-menu-control-wrapper .menu-bar-items { display: flex !important; align-items: center !important; gap: 6px !important; }
  #masthead.site-header .inside-header > .mobile-menu-control-wrapper .menu-toggle {
    min-width: 44px !important; min-height: 44px !important; padding: 8px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    position: static !important; float: none !important; margin: 0 !important;
  }
  #masthead.site-header .inside-header > .mobile-menu-control-wrapper .menu-toggle .gp-icon,
  #masthead.site-header .inside-header > .mobile-menu-control-wrapper .menu-toggle svg {
    width: 27px !important; height: 27px !important; font-size: 27px !important;
  }
  #masthead.site-header .inside-header > .mobile-menu-control-wrapper .menu-bar-items .wpml-ls a {
    display: inline-flex !important; align-items: center !important;
  }
  #masthead.site-header .inside-header > .mobile-menu-control-wrapper .menu-bar-items li.header-book-btn > a,
  #masthead.site-header .inside-header > .mobile-menu-control-wrapper .menu-bar-items a.tripyana-book-btn,
  #masthead.site-header .inside-header > .mobile-menu-control-wrapper .menu-bar-items a.hook-book-btn {
    height: 34px !important; line-height: 34px !important; padding: 0 10px !important; font-size: 13px !important; margin: 0 !important;
  }
}

/* ===== E3. MOBILE: force the stuck bar VISIBLE (GP slide-reveal is broken) =====
   GP sticky.js hides the stuck nav (inline height:0/visibility:hidden/
   translateY(-100%)) and waits for a transitionend to reveal it — but
   translateY(-100%) of a 0-height box is 0px, so no transition ever runs and
   the bar stays invisible forever on touch devices (desktop gets rescued by
   unrelated hover transitions bubbling up). Overriding the non-!important
   inline styles keeps the bar simply visible whenever it is stuck.
   Scoped to the REAL nav id — the #sticky-placeholder clone must stay hidden. */
@media (max-width: 1149px) {
  #sticky-navigation.is_stuck {
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    padding-top: 0 !important; padding-bottom: 0 !important; /* bar 64px like the normal one */
  }
  /* raise the hamburger a touch — it sat optically lower than the pill/book (2026-07-21) */
  #masthead.site-header .inside-header > .mobile-menu-control-wrapper .menu-toggle,
  #sticky-navigation .inside-navigation > .menu-toggle,
  .main-navigation.is_stuck .inside-navigation > .menu-toggle { transform: translateY(-4px) !important; }
}

/* ===== E2. Sticky-clone hamburger: match before-scroll size (27px icon / 44px touch) ===== */
@media (max-width: 1149px) {
  #sticky-navigation .menu-toggle,
  .main-navigation.is_stuck .menu-toggle {
    min-width: 44px !important; min-height: 44px !important; padding: 8px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
  }
  #sticky-navigation .menu-toggle .gp-icon,
  #sticky-navigation .menu-toggle svg,
  .main-navigation.is_stuck .menu-toggle .gp-icon,
  .main-navigation.is_stuck .menu-toggle svg {
    width: 27px !important; height: 27px !important; font-size: 27px !important;
  }
}

/* ===== G. DESKTOP: keep primary menu on ONE line (layout only, no font sizing) ===== */
@media (min-width: 1150px) {
  #masthead .main-navigation .inside-navigation { flex-wrap: nowrap !important; align-items: center !important; }
  #masthead .main-navigation .inside-navigation .main-nav { flex: 0 1 auto !important; min-width: 0 !important; }
  #masthead .main-navigation .inside-navigation .main-nav > ul { display: flex !important; flex-wrap: nowrap !important; white-space: nowrap !important; }
  /* 24 Jul (user request «رتب المسافات بين العناصر»): even 12px side padding
     on every item, and rein in the dropdown arrow's extra width — GP's toggle
     padding made arrowed items (Services/Fleet/Guide) look far wider spaced
     than the plain links (Plan/About/Contact). */
  #masthead .main-navigation .main-nav > ul > li > a,
  #sticky-navigation .main-nav > ul > li > a { padding-left: 12px !important; padding-right: 12px !important; }
  #masthead .main-navigation .main-nav > ul > li > a .dropdown-menu-toggle,
  #sticky-navigation .main-nav > ul > li > a .dropdown-menu-toggle {
    padding-left: 0 !important; padding-right: 0 !important;
    margin-inline-start: 6px;
  }
  /* control cluster stays compact at the outer side; centering handled in L */
  #masthead .main-navigation .inside-navigation .menu-bar-items,
  #sticky-navigation .inside-navigation .menu-bar-items { margin-inline-start: 0 !important; flex: 0 0 auto !important; white-space: nowrap !important; }
}

/* ===== L. UNIFIED header before/after scroll (2026-07-21, approved mockup) =====
   Target: [logo][ centered menu ][EN|AR pill][Book] identical in the normal
   header AND the sticky clone: contained width, same vertical padding, menu
   centered between logo and the control cluster, consistent 14px gaps. */
@media (min-width: 1150px) {
  /* CRITICAL SCOPING NOTE: GP sticky.js RENAMES the primary nav on first stick
     (#site-navigation -> #sticky-navigation) and never renames it back, adding a
     hidden #sticky-placeholder next to it. So:
       - header-row rules must match the nav by CLASS in the header, not by id;
       - stuck-band rules must be gated on .is_stuck, never on the bare id,
         or they leak into the top-of-page header after the first scroll. */
  /* normal header: nav fills the row so the menu can center inside it */
  #masthead.site-header .inside-header { padding-top: 12px !important; padding-bottom: 12px !important; }
  #masthead.site-header .inside-header > .site-logo { flex: 0 0 auto; }
  #masthead.site-header .inside-header > nav.main-navigation:not(.mobile-menu-control-wrapper):not(.is_stuck) { flex: 1 1 auto; min-width: 0; }
  #masthead.site-header .inside-header > nav.main-navigation:not(.mobile-menu-control-wrapper):not(.is_stuck) .inside-navigation { width: 100%; }
  #masthead.site-header .inside-header > nav.main-navigation:not(.mobile-menu-control-wrapper):not(.is_stuck) .main-nav { margin-left: auto !important; margin-right: auto !important; }
  /* STUCK band only: full-width dark band, inner contained exactly like the
     header (side padding 0 — grid-container has none on this site). */
  nav.main-navigation.is_stuck { width: 100% !important; left: 0; right: 0; }
  nav.main-navigation.is_stuck .inside-navigation {
    max-width: 1200px; margin-left: auto !important; margin-right: auto !important;
    padding: 12px 0 !important; box-sizing: border-box;
  }
  nav.main-navigation.is_stuck .main-nav { margin-left: auto !important; margin-right: auto !important; }
  /* 24 Jul, user request «القائمة قريبة جدا من الشعار وزر اللغة»: the auto
     centering margins collapse to 0 when the row is crowded (long EN labels),
     letting menu text touch the logo and the language pill. Padding inside the
     centered .main-nav guarantees the gap in both bars, both languages. */
  #masthead.site-header .inside-header > nav.main-navigation:not(.mobile-menu-control-wrapper):not(.is_stuck) .main-nav,
  nav.main-navigation.is_stuck .main-nav { padding-inline: 22px; }
  nav.main-navigation .navigation-branding { flex: 0 0 auto; margin: 0 !important; }
  .rtl nav.main-navigation .navigation-branding { margin: 0 !important; }
  nav.main-navigation .navigation-branding .sticky-navigation-logo { margin: 0 !important; }
  /* consistent spacing inside the control cluster (both bars) */
  .main-navigation .menu-bar-items { gap: 14px; }
  body.rtl .menu-bar-items a.hook-book-btn.hook-book-ar,
  body:not(.rtl) .menu-bar-items a.hook-book-btn.hook-book-en { margin-inline-start: 0 !important; }
}

/* ===== N. Desktop dropdown menus: open LEFT on RTL + fit the full item text ===== */
@media (min-width: 1150px) {
  /* auto width so long Arabic/English items are never clipped */
  .main-navigation ul ul { width: auto !important; min-width: 220px !important; }
  .main-navigation ul ul li a { white-space: nowrap !important; }
  /* RTL: first-level dropdown hangs from the item's RIGHT edge and grows left;
     nested flyouts open to the LEFT (mirror of the LTR default) */
  .rtl .main-navigation ul ul { left: auto !important; right: 0 !important; }
  .rtl .main-navigation ul ul ul { left: auto !important; right: 100% !important; }
}

/* ===== M. Slideout panel: brand row + breathing room from the top edge =====
   The brand row is a real <a class="slideout-brand"> home link printed by
   snippet 26308 (generate_inside_slideout_navigation) — not a ::before. */
.slideout-navigation .inside-navigation { padding-top: 14px !important; display: block; }
.slideout-navigation a.slideout-brand {
  display: block; color: #d4af37 !important; font-weight: 700;
  font-size: 18px; letter-spacing: .4px; padding: 12px 30px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10); margin-bottom: 6px;
  text-decoration: none; text-transform: none;
}
.slideout-navigation a.slideout-brand img {
  height: 40px; width: auto; display: block; max-width: none;
  margin-inline: auto; /* 24 Jul, user request: logo centered in the panel */
}
.slideout-navigation .main-nav { margin-top: 4px; }

/* ===== M2. Slideout menu items: bigger type + clear hover/tap feedback =====
   (no media query: the slideout itself only opens on mobile, and unconditional
   rules also style it correctly if the breakpoint ever changes) */
  /* nav. prefix beats the customizer's `.main-navigation .main-nav ul li a
     {font-size:16px !important}` which otherwise wins by stylesheet order */
  nav.slideout-navigation .main-nav > ul > li > a {
    font-size: 17px !important; line-height: 1.45 !important;
    padding: 14px 30px !important; color: #ffffff !important;
    transition: background-color .15s ease, color .15s ease;
  }
  nav.slideout-navigation .main-nav .sub-menu li a {
    font-size: 15px !important; line-height: 1.45 !important;
    padding: 11px 30px !important; color: #dfe3e6 !important;
  }
  /* soft separators between top-level items */
  .slideout-navigation .main-nav > ul > li { border-bottom: 1px solid rgba(255,255,255,.07); }
  /* clear finger/pointer feedback: gold tint bg + gold text (site hover colors) */
  .slideout-navigation .main-nav li:not(.header-book-btn) > a:hover,
  .slideout-navigation .main-nav li:not(.header-book-btn) > a:focus,
  .slideout-navigation .main-nav li.sfHover:not(.header-book-btn) > a,
  .slideout-navigation .main-nav li:not(.header-book-btn) > a:active {
    background-color: rgba(212,175,55,.13) !important; color: #d4af37 !important;
  }
  /* current page marked in gold */
  .slideout-navigation .main-nav li[class*="current-menu-"]:not(.header-book-btn) > a { color: #d4af37 !important; }
  /* Book Now REMOVED from the slideout menu (2026-07-21 request) — the always
     visible bar button covers booking; the menu item itself stays in the menus
     so nothing else breaks. */
  .slideout-navigation .main-nav li.header-book-btn { display: none !important; }
  /* accordion arrows: keep visible on the tinted rows */
  .slideout-navigation .dropdown-menu-toggle { color: inherit; }


/* ===== J. Hook-injected Book button in the header menu bar (Element: generate_menu_bar_items) =====
   The hook prints BOTH language anchors into every .menu-bar-items (mobile bar, site-nav, sticky clone).
   Language class .rtl lives on <body>, so we key off body.rtl / body:not(.rtl).
   2026-07-21: shown at ALL widths now. DOM order in menu-bar-items is
   [language pill] -> [book anchor], so Book Now sits at the OUTER edge of the
   header in both directions (far left on RTL, far right on LTR). The old Book
   Now MENU ITEM stays visible only inside the slideout panel; on the desktop
   nav it is hidden below to avoid a duplicate. */
.menu-bar-items a.hook-book-btn { display: none !important; }            /* hide the non-matching language anchor */
body.rtl .menu-bar-items a.hook-book-btn.hook-book-ar,
body:not(.rtl) .menu-bar-items a.hook-book-btn.hook-book-en {
  display: inline-flex !important; align-items: center !important;
  flex-shrink: 0 !important; white-space: nowrap !important;
}
@media (max-width: 1149px) {
  /* compact size (2026-07-21: smaller Book button so the hamburger always fits
     on 360px screens next to the bordered language pill), same in both bars */
  body.rtl .menu-bar-items a.hook-book-btn.hook-book-ar,
  body:not(.rtl) .menu-bar-items a.hook-book-btn.hook-book-en {
    height: 34px !important; line-height: 34px !important;
    padding: 0 10px !important; font-size: 13px !important; margin: 0 !important;
  }
}
@media (min-width: 1150px) {
  /* the primary menus still end with the Book Now menu item (kept for the
     slideout); hide it on the desktop nav + sticky clone, the hook anchor
     in menu-bar-items replaces it at the outer edge */
  #masthead .main-navigation .main-nav li.header-book-btn,
  #sticky-navigation .main-nav li.header-book-btn { display: none !important; }
  body.rtl .menu-bar-items a.hook-book-btn.hook-book-ar,
  body:not(.rtl) .menu-bar-items a.hook-book-btn.hook-book-en { margin-inline-start: 12px !important; }
}


/* ============================================================
   2026-07 header right-edge fix
   Real-device measure (390px iPhone): button.menu-toggle right
   edge sits +11px past viewport on EN (LTR), dragging
   nav#mobile-menu-control-wrapper -> 11px horizontal gap.
   AR (RTL) already clean at 0px. Root: GeneratePress
   ".main-navigation.has-branding .menu-toggle{padding-right:20px}"
   pushes the last item's box past the right content edge on LTR,
   and the LTR side lacks the explicit right padding the RTL side
   has (RTL has padding-right:12px). Fix = mirror RTL on LTR +
   neutralise the GP toggle padding-right + header-only clip for
   any residual sub-pixel. Scoped <=1149px. NOT shrink/gap.
   Reversible: delete this block.
   ============================================================ */
@media (max-width: 1149px) {
  /* mirror the clean RTL side: give LTR the same 12px right padding */
  html:not(.rtl) #masthead.site-header .inside-header {
    padding-right: 12px !important;   /* was: (none on LTR -> fell back to GP 0 30px, not containing toggle) */
  }
  /* neutralise GeneratePress .has-branding .menu-toggle padding-right:20px
     which pushes the toggle box past the right edge on LTR */
  #masthead.site-header .main-navigation.has-branding .menu-toggle,
  #masthead.site-header .inside-header > .mobile-menu-control-wrapper .menu-toggle {
    padding-right: 8px !important;    /* was: padding-right: 20px (GP has-branding) */
    padding-left: 8px !important;     /* keep symmetric with existing padding:8px */
  }
  /* guaranteed catch for any residual: clip on the HEADER only
     (never html/body). Only trims empty edge space beside the toggle. */
  #masthead.site-header .inside-header {
    max-width: 100% !important;       /* new */
    overflow-x: clip;                 /* new: header-scoped safety net */
  }
}