/*!
 * Haramain Taxi — shared site header / menu component.
 * All selectors are prefixed .hrw- to avoid colliding with theme styles
 * when this is dropped into an arbitrary WordPress theme.
 */
/* .hrw-main-nav and .hrw-nav-backdrop get re-parented to document.body at
   runtime (see haramain-menu.js) to escape a host theme's transformed
   ancestor — so these resets must NOT be scoped only to .hrw-menu-wrap
   descendants, or the drawer loses its styling once it's moved out. */
.hrw-menu-wrap :where(ul,li),
.hrw-main-nav :where(ul,li){margin:0;padding:0;list-style:none;box-sizing:border-box;}
.hrw-menu-wrap *,
.hrw-main-nav *,
.hrw-nav-backdrop{box-sizing:border-box;}
.hrw-menu-wrap,
.hrw-main-nav,
.hrw-nav-backdrop{font-family:'Poppins','Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;}

.hrw-topbar{background:#0b5d43;color:#e3f1ea;font-size:.85rem;}
.hrw-topbar-inner{
  max-width:1180px;margin:0 auto;padding:8px 20px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
}
.hrw-topbar a{color:#e3f1ea;text-decoration:none;}
.hrw-topbar .hrw-tb-links{display:flex;gap:18px;flex-wrap:wrap;}

/* Header stays white with colored text/logo — only surfaces like the
   topbar/footer/CTA bands switch to the solid brand green.

   The frosted-glass background/blur is on ::before, NOT on .hrw-header
   itself. backdrop-filter on an element implicitly clips anything that
   overflows its own box (the filter needs a bounded region to sample
   "what's behind" it to blur) — since the dropdown submenus below extend
   past the header's bottom edge, putting backdrop-filter directly on
   .hrw-header was silently cutting off any submenu item past roughly the
   header's own height, even though the dropdown's layout/position was
   otherwise correct. Moving it to a same-sized ::before layer behind the
   real content keeps the identical frosted look without imposing that
   clip on the header's actual children. */
.hrw-header{
  position:sticky;top:0;z-index:999990;
  font-family:'Inter',system-ui,sans-serif;
  width:100%;box-sizing:border-box;
}
.hrw-header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:#ffffffee;backdrop-filter:saturate(180%) blur(8px);
  box-shadow:0 2px 12px rgba(11,93,67,0.12);
}
/* align-items:flex-start (not center) + an explicit gap between the three
   top-level children (logo / menu / WhatsApp+hamburger) are both load-
   bearing here, not cosmetic. Previously there was NO gap between
   .hrw-main-nav and .hrw-nav-cta, and align-items was "center" — fine
   while the menu fits on one line, but once a longer WordPress menu
   forces .hrw-main-nav's own <ul> to wrap onto a 2nd internal line, "center"
   vertically centers the WhatsApp button/hamburger across BOTH of those
   wrapped lines, landing it right on top of whichever menu item ends up
   on line 2 (e.g. "Contact Us") — with zero horizontal gap, that item's
   text renders underneath the button, unreadable. align-items:flex-start
   pins the button/hamburger to line 1's height only, and the gap
   guarantees real breathing room even when nothing wraps. */
.hrw-nav-wrap{
  max-width:1180px;margin:0 auto;padding:14px 20px;
  display:flex;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;gap:14px 24px;
  box-sizing:border-box;width:100%;
}
.hrw-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.28rem;text-decoration:none;}
.hrw-logo .hrw-mark{
  width:40px;height:40px;border-radius:10px;flex-shrink:0;position:relative;
  background:#0b5d43;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem;font-weight:800;
}
.hrw-logo .hrw-mark i{
  position:absolute;bottom:8px;left:11px;width:18px;height:2.5px;border-radius:2px;
  background:#d4af37;font-style:normal;
}
.hrw-logo-h{color:#0b5d43;}
.hrw-logo-t{color:#d4af37;}
.hrw-logo small{display:block;font-family:'Inter';font-weight:600;font-size:.62rem;letter-spacing:.12em;color:#8a9891;text-transform:uppercase;}

body.hrw-nav-locked{overflow:hidden;}

/* On wide screens the nav is a normal in-header row. If the WordPress menu
   assigned to "Haramain Primary Menu" has more links than fit on one line
   next to the logo and call/WhatsApp buttons, DON'T silently clip them —
   flex-wrap lets extra links drop to a second line instead of overflowing
   past the edge of the page (where html,body{overflow-x:hidden} above would
   otherwise render them invisible). min-width:0 lets this flex item shrink
   instead of forcing the whole header to overflow. */
.hrw-main-nav{flex:1 1 auto;min-width:0;}
/* IMPORTANT: this targets only the top-level list (the one item_wrap
   creates directly inside .hrw-main-nav), NOT ".hrw-main-nav ul" — a WP
   menu item with children (e.g. "Blogs" with Umrah Guide, Ziyarat of
   Makkah, etc. underneath it) gets its own nested <ul class="sub-menu">
   right inside that <li>. An unscoped "ul" selector would apply this same
   always-visible flex row to that nested list too, making every child
   page render as a flush top-level sibling instead of a dropdown — exactly
   the multi-row wrapped mess this caused before this fix. */
.hrw-main-nav > ul{display:flex !important;flex-wrap:wrap;gap:10px 26px;justify-content:flex-end;}
.hrw-main-nav a{font-weight:600;font-size:.95rem;color:#152331;text-decoration:none;padding:6px 0;white-space:nowrap;}
.hrw-main-nav a:hover{color:#0b5d43;}
.hrw-main-nav .current-menu-item > a{color:#0b5d43;}

/* ---- Dropdown submenus (desktop: hover/focus reveal; mobile: below) ----
 * !important is used defensively here: some WordPress themes ship their own
 * "ul.sub-menu{display:none}"-style rules for their own nav markup, and
 * depending on stylesheet load order those can beat these rules on
 * specificity alone even though this file targets the more specific
 * ".hrw-main-nav" ancestor. !important removes that race entirely. */
.hrw-main-nav li{position:relative !important;}
.hrw-main-nav li:has(> ul.sub-menu) > a::after{
  content:"▾"; display:inline-block; font-size:.65em; margin-left:5px; opacity:.65; vertical-align:1px;
}
.hrw-main-nav ul.sub-menu{
  display:none !important;
  position:absolute !important; top:100% !important; left:0 !important; margin-top:8px !important;
  flex-direction:column; min-width:240px;
  background:#fff; border-radius:10px; padding:8px;
  box-shadow:0 16px 36px rgba(11,93,67,.18);
  z-index:100000 !important;
}
.hrw-main-nav li:hover > ul.sub-menu,
.hrw-main-nav li:focus-within > ul.sub-menu{ display:flex !important; }
.hrw-main-nav ul.sub-menu li{border:0;}
.hrw-main-nav ul.sub-menu a{
  display:block !important; padding:10px 12px; border-radius:6px; white-space:normal;
}
.hrw-main-nav ul.sub-menu a:hover{background:#f2f7f4;}
/* A sub-menu can itself have children (3rd level) — keep those flyouts
   from running off the right edge of the viewport. */
.hrw-main-nav ul.sub-menu ul.sub-menu{ top:0; left:100%; margin-top:0; margin-left:8px; }

.hrw-nav-cta{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.hrw-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border-radius:10px;font-weight:600;font-size:.9rem;
  background:#0e7a5f;color:#fff !important;text-decoration:none;border:none;cursor:pointer;
  flex-shrink:0;white-space:nowrap;
}
.hrw-btn:hover{background:#0a5c47;}

/* Hamburger: a real bordered chip (not bare lines) so it stays visible
   against any theme background, plus it morphs into a clear "X" when the
   drawer is open — there's no ambiguity about how to close the menu. */
.hrw-hamburger{
  display:none !important;
  width:44px;height:44px;min-width:44px;flex-shrink:0;
  align-items:center;justify-content:center;
  background:#f2f5f3 !important;border:1.5px solid #d8e2dd !important;border-radius:10px;
  cursor:pointer;padding:0;position:relative;z-index:1;
  /* Without this, a theme whose reset sets content-box makes the button
     44+3=47px of real estate while the bars below still assume 44 -- the
     bars end up visibly off-centre and the icon looks lopsided. */
  box-sizing:border-box !important;
  -webkit-appearance:none;appearance:none;
  -webkit-tap-highlight-color:transparent;
}
/* Each bar is centred on the button's midpoint via left/top 50% + a
   negative margin of half its own size, so the icon stays perfectly
   centred and symmetrical at ANY button size or box-sizing model. The
   previous version hard-coded top:15px/20.25px/25.5px and left:10px,
   which only lined up if the button computed to exactly 42x42 -- on the
   live site it did not, which is why the icon looked misshapen. */
.hrw-hamburger .hrw-bar{
  position:absolute;left:50%;top:50%;
  width:22px;height:2.5px;margin-left:-11px;margin-top:-1.25px;
  background:#0b5d43;border-radius:2px;
  transition:transform .25s ease,opacity .2s ease;
}
.hrw-hamburger .hrw-bar:nth-child(1){transform:translateY(-7px);}
.hrw-hamburger .hrw-bar:nth-child(2){transform:translateY(0);}
.hrw-hamburger .hrw-bar:nth-child(3){transform:translateY(7px);}
.hrw-hamburger[aria-expanded="true"] .hrw-bar:nth-child(1){transform:rotate(45deg);}
.hrw-hamburger[aria-expanded="true"] .hrw-bar:nth-child(2){opacity:0;}
.hrw-hamburger[aria-expanded="true"] .hrw-bar:nth-child(3){transform:rotate(-45deg);}

@media (max-width:860px){
  .hrw-main-nav{
    position:fixed;top:0;right:0;height:100vh;width:82%;max-width:320px;
    background:#fff;flex-direction:column;padding:0 26px 30px;
    transform:translateX(100%);transition:transform .3s ease;
    box-shadow:-8px 0 30px rgba(0,0,0,.18);
    z-index:2147483000;overflow-y:auto;
  }
  .hrw-main-nav.hrw-open{transform:translateX(0);}
  .hrw-main-nav > ul{flex-direction:column;gap:6px;margin-top:16px;}
  .hrw-main-nav ul li{border-bottom:1px solid #eef1ef;}
  .hrw-main-nav ul li a{display:block;padding:14px 2px;}
  .hrw-hamburger{display:flex !important;}

  /* Off-canvas drawer has no room for a floating hover dropdown, and touch
     devices don't hover reliably anyway — render sub-menus as an always-
     visible indented list directly under their parent instead. */
  .hrw-main-nav li:has(> ul.sub-menu) > a::after{ content:"";margin:0; }
  .hrw-main-nav ul.sub-menu,
  .hrw-main-nav ul.sub-menu ul.sub-menu{
    display:block !important; position:static !important;
    flex-direction:column; min-width:0; margin:4px 0 4px 14px; left:auto; top:auto;
    background:transparent; box-shadow:none; border-radius:0; padding:0;
    border-left:2px solid #e6ebe8;
  }
  .hrw-main-nav ul.sub-menu li{border-bottom:0;}
  .hrw-main-nav ul.sub-menu a{
    padding:11px 2px 11px 14px; font-size:.88rem; color:#4a5a52;
  }
}
@media (max-width:480px){
  .hrw-topbar .hrw-tb-links:last-child{display:none;}
  .hrw-logo small{display:none;}
  /* Collapse "WhatsApp Booking" to just the icon so the button + hamburger
     fit next to a real-length logo without overflowing narrow phones. */
  .hrw-btn .hrw-btn-label{display:none;}
  .hrw-btn{padding:11px 14px;}
}

/* Explicit close bar pinned to the top of the drawer — always present, so
   there is never any doubt about how to close the menu even if a theme's
   own CSS interferes with the hamburger button elsewhere on the page. */
.hrw-drawer-head{
  display:none;
  position:sticky;top:0;background:#fff;
  align-items:center;justify-content:space-between;
  padding:18px 2px 12px;margin-bottom:4px;border-bottom:1px solid #eef1ef;
}
.hrw-drawer-head span{font-weight:700;color:#0b5d43;font-size:.95rem;}
.hrw-drawer-close{
  width:34px;height:34px;border-radius:8px;border:1.5px solid #d8e2dd;background:#f2f5f3;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-size:18px;line-height:1;color:#0b5d43;padding:0;
}
@media (max-width:860px){ .hrw-drawer-head{display:flex;} }

/* The off-canvas mobile drawer is transformed fully off-screen with
   translateX(100%), but Chromium still counts its untransformed position
   toward the document's scrollable area, which can produce a phantom
   horizontal scrollbar on phones.
   IMPORTANT: this uses overflow-x:CLIP, not overflow-x:hidden. Per the CSS
   Overflow spec, setting only overflow-x to a non-visible value forces the
   computed overflow-y to become "auto" as a paired side effect — which
   turns <body> into an actual clipping scroll container. On a page whose
   content isn't much taller than the header, that silently clipped the
   desktop dropdown submenus added below (their layout was correct, they
   were just being cut off at body's own short content height). "clip" is
   the modern, purpose-built way to suppress one axis only, without
   triggering that unwanted auto-scroll-container side effect on the other. */
html,body{overflow-x:clip;max-width:100%;}

.hrw-nav-backdrop{
  display:none;position:fixed;inset:0;background:rgba(8,20,15,.45);z-index:2147482999;
}
.hrw-nav-backdrop.hrw-open{display:block;}