/* =============================================================================
   HEADER STYLES — شركة الإسراء لنقل وتغليف الأثاث
   Prefix  : es  (esHeader, esTopbar, esMainHdr, esMobile…)
   Colors  : Orange #F68712 | Blue #1E60AA | Navy #17224D
   Fonts   : Almarai (brand) + Cairo (UI/nav/buttons)
   Stack   : Bootstrap 5 RTL + Understrap — NO external animation libs
   ============================================================================= */

/* ── 1. Design Tokens ──────────────────────────────────────────────────────── */
:root {
  /* Brand palette */
  --es-orange        : #F68712;
  --es-orange-dark   : #d9750a;
  --es-orange-glow   : rgba(246, 135, 18, .28);
  --es-blue          : #1E60AA;
  --es-blue-dark     : #174e8c;
  --es-navy          : #17224D;
  --es-navy-72       : rgba(23, 34, 77, .72);
  --es-navy-10       : rgba(23, 34, 77, .10);
  --es-navy-06       : rgba(23, 34, 77, .06);
  --es-bg            : #F8F9FB;
  --es-white         : #ffffff;
  --es-wa-green      : #25d366;
  --es-wa-dark       : #1ebe5a;

  /* Topography */
  --es-font-brand    : 'Almarai', system-ui, sans-serif;
  --es-font-ui       : 'Cairo', 'Almarai', system-ui, sans-serif;

  /* Sizing */
  --es-topbar-h      : 44px;
  --es-main-h        : 96px;           /* desktop resting height */
  --es-main-h-scroll : 68px;           /* desktop after scroll */
  --es-mobile-pill-h : 64px;
  --es-touch         : 48px;           /* WCAG / HIG minimum */

  /* Radii */
  --es-r-pill        : 999px;
  --es-r-btn         : 50px;           /* very rounded per design */
  --es-r-card        : 20px;           /* mobile pill card */
  --es-r-drop        : 14px;

  /* Shadows */
  --es-shadow-sm     : 0 2px 12px rgba(23, 34, 77, .07);
  --es-shadow-md     : 0 6px 28px rgba(23, 34, 77, .11);
  --es-shadow-lg     : 0 10px 40px rgba(23, 34, 77, .15);

  /* Motion */
  --es-ease          : 220ms cubic-bezier(.4, 0, .2, 1);
  --es-ease-fast     : 140ms cubic-bezier(.4, 0, .2, 1);

  /* Z-index */
  --es-z-header      : 1030;
  --es-z-mobile      : 1040;
  --es-z-canvas      : 1050;
}

/* ── 2. Skip link ──────────────────────────────────────────────────────────── */
.esHeader-skipLink {
  position: fixed;
  top: -100px;
  inset-inline-start: 16px;
  z-index: 9999;
  padding: 10px 22px;
  background: var(--es-navy);
  color: var(--es-white);
  font-family: var(--es-font-ui);
  font-size: 14px;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  transition: top var(--es-ease);
}
.esHeader-skipLink:focus { top: 12px; outline: 3px solid var(--es-orange); }

/* ═══════════════════════════════════════════════════════════════════════════
   3. DESKTOP HEADER WRAPPER
   ═══════════════════════════════════════════════════════════════════════════ */
.esHeader {
  position: sticky;
  top: 0;
  z-index: var(--es-z-header);
  /* Promote to compositing layer — avoids paint during scroll */
  transform: translateZ(0);
}

/* ── 4. TOP BAR ────────────────────────────────────────────────────────────── */
.esTopbar {
  display: none;                       /* hidden on mobile by default */
  background: var(--es-bg);
  border-bottom: 1px solid var(--es-navy-10);
  height: var(--es-topbar-h);
  overflow: hidden;
  transition: height var(--es-ease), opacity var(--es-ease);
}

/* Show on desktop */
@media (min-width: 992px) { .esTopbar { display: block; } }

/* Collapse when scrolled */
.esHeader.is-scrolled .esTopbar {
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.esTopbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--es-topbar-h);
  gap: 24px;
  font-family: var(--es-font-ui);
  font-size: 12.5px;
  color: var(--es-navy-72);
}

.esTopbar__group {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.esTopbar__group--center {
  /* True center regardless of side widths */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.esTopbar__group--actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.esTopbar__ico {
  color: var(--es-orange);
  font-size: 11px;
  flex-shrink: 0;
}

.esTopbar__group strong { color: var(--es-navy); }

.esTopbar__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--es-navy);
  font-weight: 700;
  font-size: 12.5px;
  text-decoration: none;
  transition: color var(--es-ease-fast);
}
.esTopbar__link:hover { color: var(--es-orange); }

.esTopbar__link--wa { color: #128c5e; }
.esTopbar__link--wa:hover { color: var(--es-wa-dark); }

.esTopbar__divider {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: var(--es-navy-10);
}

/* ── 5. MAIN HEADER BAR ────────────────────────────────────────────────────── */
.esMainHdr {
  background: var(--es-white);
  border-bottom: 1px solid var(--es-navy-10);
  box-shadow: var(--es-shadow-sm);
  transition: box-shadow var(--es-ease), min-height var(--es-ease);
}

.esHeader.is-scrolled .esMainHdr {
  box-shadow: var(--es-shadow-md);
}

.esMainHdr__nav {
  min-height: var(--es-main-h);
  padding-block: 0;
  align-items: center;
  transition: min-height var(--es-ease);
}

.esHeader.is-scrolled .esMainHdr__nav {
  min-height: var(--es-main-h-scroll);
}

/* Collapse fills remaining space */
.esMainHdr__collapse {
  flex-grow: 1;
  display: flex !important;            /* always flex on desktop */
  align-items: center;
}

/* ── 6. LOGO ───────────────────────────────────────────────────────────────── */
.esLogo {
  flex-shrink: 0;
  padding: 0;
  margin-inline-end: 32px;
  line-height: 1;
}

.esLogo__img {
  display: block;
  width: auto;
  height: 56px;
  max-width: 220px;
  object-fit: contain;
  object-position: center;
  transition: height var(--es-ease), max-width var(--es-ease);
}

.esHeader.is-scrolled .esLogo__img {
  height: 42px;
  max-width: 220px;
}

/* ── 7. NAVIGATION LINKS ───────────────────────────────────────────────────── */
.esNav {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  justify-content: center;            /* center the nav */
}

/* Every nav link */
.esNav > .nav-item > .nav-link {
  font-family: var(--es-font-ui);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--es-navy);
  padding: 6px 13px;
  border-radius: 8px;
  white-space: nowrap;
  position: relative;
  text-decoration: none;
  transition: color var(--es-ease-fast), background var(--es-ease-fast);
}

.esNav > .nav-item > .nav-link:hover,
.esNav > .nav-item > .nav-link:focus-visible {
  color: var(--es-blue);
  background: rgba(30, 96, 170, .06);
  outline: none;
}

/* Active indicator — orange text + short underline */
.esNav > .nav-item.current-menu-item > .nav-link,
.esNav > .nav-item.current-menu-ancestor > .nav-link {
  color: var(--es-orange);
  font-weight: 700;
}

.esNav > .nav-item.current-menu-item > .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  inset-inline: 13px;
  height: 2.5px;
  background: var(--es-orange);
  border-radius: 2px;
}

/* Dropdown caret */
.esNav .nav-link.dropdown-toggle::after {
  margin-inline-start: 4px;
  vertical-align: middle;
  opacity: .55;
}

/* Dropdown panel */
.esNav .dropdown-menu {
  border: 1px solid var(--es-navy-10);
  border-radius: var(--es-r-drop);
  box-shadow: var(--es-shadow-lg);
  padding: 10px;
  min-width: 210px;
  margin-top: 6px;
  /* CSS-only fade-in (no JS animation lib) */
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--es-ease-fast), transform var(--es-ease-fast);
  display: block;
  pointer-events: none;
  visibility: hidden;
}

.esNav .dropdown-menu.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}

.esNav .dropdown-item {
  font-family: var(--es-font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--es-navy);
  border-radius: 8px;
  padding: 10px 14px;
  transition: background var(--es-ease-fast), color var(--es-ease-fast);
}

.esNav .dropdown-item:hover,
.esNav .dropdown-item:focus {
  background: rgba(30, 96, 170, .07);
  color: var(--es-blue);
}

/* ── 8. DESKTOP CTA BUTTONS ────────────────────────────────────────────────── */
.esDesktopCta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Base button */
.esCta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--es-touch);
  padding: 0 22px;
  border-radius: var(--es-r-btn);
  font-family: var(--es-font-ui);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--es-ease), color var(--es-ease),
              box-shadow var(--es-ease), transform var(--es-ease-fast);
}

.esCta:focus-visible {
  outline: 3px solid var(--es-orange);
  outline-offset: 2px;
}

.esCta:active { transform: scale(.96); }

/* Call — orange gradient, primary CTA */
.esCta--call {
  background: linear-gradient(135deg, #f9a13a 0%, var(--es-orange) 50%, #e8780a 100%);
  color: var(--es-white);
  box-shadow: 0 4px 18px var(--es-orange-glow);
}

.esCta--call:hover,
.esCta--call:focus-visible {
  background: linear-gradient(135deg, #faa940 0%, var(--es-orange-dark) 100%);
  color: var(--es-white);
  box-shadow: 0 8px 24px rgba(246, 135, 18, .40);
}

/* WhatsApp — navy solid */
.esCta--wa {
  background: var(--es-navy);
  color: var(--es-white);
  border-color: var(--es-navy);
}

.esCta--wa:hover,
.esCta--wa:focus-visible {
  background: var(--es-blue);
  border-color: var(--es-blue);
  color: var(--es-white);
  box-shadow: 0 4px 18px rgba(30, 96, 170, .30);
}

.esCta i { font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════════════════
   9. MOBILE FLOATING PILL HEADER
   ═══════════════════════════════════════════════════════════════════════════ */
.esMobileHdr {
  position: sticky;
  top: 0;
  z-index: var(--es-z-mobile);
  padding: 10px 16px;
  /* Promotes to composite layer */
  transform: translateZ(0);
  transition: padding var(--es-ease);
}

/* Slightly tighter when scrolled */
.esMobileHdr.is-scrolled { padding: 6px 16px; }

.esMobilePill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--es-mobile-pill-h);
  background: var(--es-white);
  border-radius: var(--es-r-card);
  box-shadow: var(--es-shadow-md);
  padding: 0 14px;
  gap: 8px;
  /* Subtle border */
  border: 1px solid var(--es-navy-10);
  transition: box-shadow var(--es-ease), border-color var(--es-ease);
}

.esMobileHdr.is-scrolled .esMobilePill {
  box-shadow: var(--es-shadow-lg);
}

/* Hamburger */
.esMobileToggler {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--es-touch);
  height: var(--es-touch);
  background: var(--es-bg);
  border: 1.5px solid var(--es-navy-10);
  border-radius: 12px;
  color: var(--es-navy);
  font-size: 17px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--es-ease-fast), border-color var(--es-ease-fast),
              color var(--es-ease-fast);
  /* Kill Bootstrap's focus shadow */
  box-shadow: none !important;
}

.esMobileToggler:hover,
.esMobileToggler:focus-visible {
  background: var(--es-navy);
  border-color: var(--es-navy);
  color: var(--es-white);
  outline: none;
}

/* Mobile logo (centered absolute) */
.esMobileLogo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  line-height: 1;
}

.esMobileLogo__img {
  display: block;
  width: 130px;
  height: auto;
  max-height: 40px;
  object-fit: contain;
}

/* Mobile action buttons */
.esMobileActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.esMobileAction {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--es-touch);
  height: var(--es-touch);
  border-radius: 14px;
  font-size: 18px;
  text-decoration: none;
  flex-shrink: 0;
  transition: background var(--es-ease-fast), color var(--es-ease-fast),
              box-shadow var(--es-ease-fast), transform var(--es-ease-fast);
}

.esMobileAction:active { transform: scale(.93); }

/* Call button — navy */
.esMobileAction--call {
  background: var(--es-navy);
  color: var(--es-white);
}

.esMobileAction--call:hover,
.esMobileAction--call:focus-visible {
  background: var(--es-blue);
  color: var(--es-white);
  box-shadow: 0 4px 14px rgba(23, 34, 77, .28);
  outline: none;
}

/* WhatsApp button — green */
.esMobileAction--wa {
  background: var(--es-wa-green);
  color: var(--es-white);
}

.esMobileAction--wa:hover,
.esMobileAction--wa:focus-visible {
  background: var(--es-wa-dark);
  color: var(--es-white);
  box-shadow: 0 4px 14px rgba(37, 211, 102, .35);
  outline: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. MOBILE DRAWER — pure CSS, zero Bootstrap offcanvas dependency
   ═══════════════════════════════════════════════════════════════════════════ */

/* Backdrop */
.esDrawer__backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(23, 34, 77, .45);
  backdrop-filter: blur(2px);
  z-index: 1049;
  opacity: 0;
  transition: opacity var(--es-ease);
}

.esDrawer__backdrop.is-open {
  display: block;
  opacity: 1;
}

/* Drawer panel */
.esDrawer {
  position: fixed;
  top: 0;
  right: 0;                            /* RTL: slides in from the right */
  width: min(320px, 88vw);
  height: 100dvh;
  background: var(--es-white);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  font-family: var(--es-font-ui);
  box-shadow: -8px 0 40px rgba(23, 34, 77, .18);
  border-radius: 20px 0 0 20px;
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(.4, 0, .2, 1),
              visibility 300ms;
  visibility: hidden;
  overflow: hidden;
}

.esDrawer.is-open {
  transform: translateX(0);
  visibility: visible;
}

/* Lock scroll when drawer open */
body.es-drawer-open {
  overflow: hidden;
}

/* Drawer header */
.esDrawer__hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--es-navy-10);
  flex-shrink: 0;
}

.esDrawer__hdr img {
  display: block;
  height: 40px;
  width: auto;
}

.esDrawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--es-bg);
  border: 1px solid var(--es-navy-10);
  border-radius: 10px;
  color: var(--es-navy);
  font-size: 15px;
  cursor: pointer;
  transition: background var(--es-ease-fast), color var(--es-ease-fast);
  flex-shrink: 0;
}

.esDrawer__close:hover {
  background: var(--es-navy);
  color: var(--es-white);
  border-color: var(--es-navy);
}

/* Drawer body (scrollable) */
.esDrawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 16px 24px;
  -webkit-overflow-scrolling: touch;
}

/* Nav links */
.esDrawerNav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.esDrawerNav .nav-item + .nav-item {
  border-top: 1px solid var(--es-navy-06);
}

.esDrawerNav .nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--es-navy);
  text-decoration: none;
  transition: color var(--es-ease-fast);
}

.esDrawerNav .nav-link:hover,
.esDrawerNav .nav-link:focus-visible {
  color: var(--es-orange);
  outline: none;
}

.esDrawerNav .current-menu-item > .nav-link {
  color: var(--es-orange);
  font-weight: 700;
}

/* Dropdown inside drawer — collapsed by default, JS adds .es-open */
.esDrawer .esDrawerNav .dropdown-menu {
  position: static !important;
  display: block !important;           /* override Bootstrap's display:none */
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0;
  border-inline-start: 3px solid var(--es-orange);
  margin-inline-start: 12px;
  padding: 0 !important;
  background: transparent !important;
  transform: none !important;
  visibility: visible !important;
  transition: max-height 280ms cubic-bezier(.4, 0, .2, 1),
              opacity    200ms ease;
}

.esDrawer .esDrawerNav .dropdown-menu.es-open {
  max-height: 600px;
  opacity: 1;
  pointer-events: auto;
  padding: 4px 0 !important;
}

.esDrawerNav .dropdown-item {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--es-navy-72);
  padding: 10px 14px;
  border-radius: 6px;
  transition: color var(--es-ease-fast), background var(--es-ease-fast);
}

.esDrawerNav .dropdown-item:hover {
  color: var(--es-blue);
  background: rgba(30, 96, 170, .06);
}

/* Bottom CTA */
.esDrawer__cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--es-navy-10);
}

.esDrawer__ctaBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  border-radius: var(--es-r-btn);
  font-family: var(--es-font-ui);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--es-ease), box-shadow var(--es-ease), transform var(--es-ease-fast);
}

.esDrawer__ctaBtn:active { transform: scale(.97); }

.esDrawer__ctaBtn--call {
  background: linear-gradient(135deg, #f9a13a, var(--es-orange), #e8780a);
  color: var(--es-white);
  box-shadow: 0 4px 18px var(--es-orange-glow);
}
.esDrawer__ctaBtn--call:hover {
  background: linear-gradient(135deg, #faa940, var(--es-orange-dark));
  color: var(--es-white);
}

.esDrawer__ctaBtn--wa {
  background: var(--es-wa-green);
  color: var(--es-white);
  box-shadow: 0 4px 14px rgba(37, 211, 102, .28);
}
.esDrawer__ctaBtn--wa:hover {
  background: var(--es-wa-dark);
  color: var(--es-white);
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. DESKTOP COLLAPSED NAV (shouldn't show on ≥992px but safety net)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
  .esMainHdr__collapse { display: flex !important; }
  .esMobileHdr { display: none !important; }
}

/* ── Desktop-only: hide desktop header on mobile ── */
@media (max-width: 991.98px) {
  .esHeader { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. SCROLL PADDING (prevent anchor links hiding under sticky header)
   ═══════════════════════════════════════════════════════════════════════════ */
html {
  scroll-padding-top: calc(var(--es-mobile-pill-h) + 24px);
}

@media (min-width: 992px) {
  html {
    scroll-padding-top: calc(var(--es-topbar-h) + var(--es-main-h) + 12px);
  }
  .esHeader.is-scrolled ~ * html,
  html:has(.esHeader.is-scrolled) {
    scroll-padding-top: calc(var(--es-main-h-scroll) + 12px);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   13. PRINT
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  .esHeader,
  .esMobileHdr,
  .esDrawer,
  .esDrawer__backdrop { display: none !important; }
}