/* ============================================================
   MOBILE NAVIGATION
   Single source of truth for the hamburger drawer + Services
   submenu, shared by every page. Desktop nav stays in each
   page's own stylesheet — everything here only applies at
   mobile widths, so it can never fight the desktop rules.
   ============================================================ */

/* hidden by default; only ever shown at mobile widths below */
.hamburger {
  display: none;
}

@media (max-width: 768px) {
  /* ---- hamburger icon ---- */
  .hamburger {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 36px;
    height: 32px;
    cursor: pointer;
    background: none;
    border: none;
    justify-self: end;
    position: relative;
    z-index: 2000;
  }

  .hamburger span {
    width: 28px;
    height: 2px;
    background: #fff;
    display: block;
    transition:
      transform 0.4s cubic-bezier(0.77, 0, 0.18, 1),
      opacity 0.3s ease;
  }

  .hamburger.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* ---- drawer ----
     Full width on mobile: at 80%, the leftover sliver outside the drawer
     showed whatever the page behind it happened to render there (cut-off
     hero text, decorative shapes) - it read as a rendering glitch rather
     than part of the design. Full width gives the drawer its own clean
     surface with nothing bleeding in from behind it. */
  .main-nav {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    left: auto !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    background: #050505 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 80px 40px !important;
    gap: 26px !important;
    transition: right 0.45s cubic-bezier(0.77, 0, 0.18, 1) !important;
    z-index: 1500 !important;
  }

  .main-nav.active {
    right: 0 !important;
  }

  /* !important here because an unrelated page-load intro animation
     (gsap.to("nav a", {...}) on some pages, meant for the desktop
     header reveal) also matches these links since .main-nav is itself
     a <nav> element. GSAP writes its own inline transform style, which
     would otherwise beat a plain (non-important) rule here and leave
     the drawer's links visually stuck mid-slide. */
  .main-nav a {
    font-size: 18px !important;
    width: 100% !important;
    opacity: 0 !important;
    transform: translateX(40px) !important;
    transition:
      opacity 0.4s ease,
      transform 0.4s ease;
  }

  .main-nav.active a {
    opacity: 1 !important;
    transform: translateX(0) !important;
  }

  .main-nav.active a:nth-child(1) {
    transition-delay: 0.1s;
  }
  .main-nav.active a:nth-child(2) {
    transition-delay: 0.15s;
  }
  .main-nav.active a:nth-child(3) {
    transition-delay: 0.2s;
  }
  .main-nav.active a:nth-child(4) {
    transition-delay: 0.25s;
  }
  .main-nav.active a:nth-child(5) {
    transition-delay: 0.3s;
  }

  /* ---- Services submenu ----
     Anchored absolutely (not in normal flow) so opening/closing it never
     changes the height of the column above - HOME/ABOUT/SERVICES stay
     exactly where they are, and WORK/CONTACT/socials don't get pushed
     around either. It floats as its own card under the button instead,
     capped with its own scroll so a long list can't run off-screen. */
  .dropdown {
    width: 100%;
  }

  .dropdown-content {
    position: absolute !important;
    top: 100% !important;
    left: -40px !important;
    right: -40px !important;
    margin-top: 10px !important;
    background: #0d0d0d !important;
    backdrop-filter: none !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important;
    display: none !important;
    min-width: 0 !important;
    width: auto !important;
    max-height: 45vh !important;
    overflow-y: auto !important;
    padding: 14px 40px !important;
    z-index: 5 !important;
  }

  .dropdown.active .dropdown-content {
    display: flex !important;
    flex-direction: column !important;
  }

  .dropdown-content a {
    font-size: 14px !important;
  }

  /* ---- RTL: drawer slides from the left, content hugs the right ---- */
  .ar .main-nav {
    right: auto !important;
    left: -100% !important;
    align-items: flex-end !important;
  }

  .ar .main-nav.active {
    left: 0 !important;
    right: auto !important;
  }

  /* links/dropdown-toggle are width:100% for a full-row touch target;
     without this their text defaults to left-aligned (direction is
     inherited as ltr from .ar header), leaving an awkward gap before
     the drawer's right edge instead of hugging it. */
  .ar .main-nav a,
  .ar .dropdown > a {
    text-align: right !important;
  }

  /* .dropbtn is a flex row (icon + label), so text-align above has no
     effect on it - it needs justify-content to hug the right edge like
     every other link, otherwise "SERVICES" stays stuck on the left while
     its own submenu items hang from the right. */
  .ar .dropdown > a {
    justify-content: flex-end !important;
  }

  /* quick-links + lang toggle hide while the drawer is open, instead
     of getting half-clipped by its edge */
  header:has(.main-nav.active) .mobile-quick,
  header:has(.main-nav.active) .header-lang-toggle {
    visibility: hidden;
  }
}

/* lock background scroll while the drawer is open */
body.nav-open {
  overflow: hidden;
}

/* keep the logo above the drawer regardless of viewport width */
.logo {
  position: relative;
  z-index: 2000;
}