/* ============================================================
   SMARTOUCH — NAV CSS
   Shared navigation, hamburger, mobile menu
   ============================================================ */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav);
  display: flex;
  align-items: center;
  /* No justify-content: space-between — .nm is absolute-centred,
     .lang-sw uses margin-left:auto to pin to the right */
  padding: 0 40px;
  background: rgba(4,5,15,.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--b);
  transition: background .3s;
}
.nav.scrolled {
  background: rgba(4,5,15,.97);
  border-bottom-color: var(--b2);
}

/* Logo */
.nl {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fd);
  font-size: 17px;
  font-weight: 800;
  color: var(--w);
  text-decoration: none;
}
.ni {
  width: 32px;
  height: 32px;
  background: var(--grad);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(240,35,79,.4);
  flex-shrink: 0;
}

/* Desktop menu — absolutely centred so it stays in the middle
   regardless of the logo/CTA widths on either side */
.nm {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
}
.na {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--w40);
  cursor: pointer;
  transition: color .15s var(--ease-out-quart), background .15s var(--ease-out-quart);
  text-decoration: none;
}
@media (hover: hover) {
  .na:hover { color: var(--w); background: var(--w06); }
}
.na.act   { color: var(--w); background: var(--w06); }

/* CTA button — now lives inside .nm, separated by a small left margin */
.nb {
  padding: 9px 20px;
  border-radius: 10px;
  background: var(--grad);
  color: #fff;
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(240,35,79,.32);
  transition: box-shadow .18s var(--ease-out-quart), transform .18s var(--ease-out-quart);
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  margin-left: 10px; /* visual gap from plain nav links */
}
@media (hover: hover) {
  .nb:hover {
    box-shadow: 0 6px 24px rgba(240,35,79,.52);
    transform: translateY(-1px);
  }
}

/* Hamburger */
.ham {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  background: none;
  border: none;
}
.ham span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--w80);
  border-radius: 1px;
  transition: .2s;
}
.ham.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ham.open span:nth-child(2) { opacity: 0; }
.ham.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.mob {
  display: none;
  position: fixed;
  top: var(--nav);
  left: 0; right: 0;
  background: rgba(4,5,15,.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--b);
  padding: 12px 20px;
  flex-direction: column;
  gap: 2px;
  z-index: 999;
}
.mob.open { display: flex; }
.mob-lk {
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--w40);
  transition: color .15s var(--ease-out-quart), background .15s var(--ease-out-quart);
  text-decoration: none;
}
@media (hover: hover) {
  .mob-lk:hover { color: var(--w); background: var(--w06); }
}
.mob-ct {
  margin-top: 10px;
  padding: 13px;
  border-radius: 10px;
  background: var(--grad);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  display: block;
  text-decoration: none;
}

/* ----------------------------------------------------------
   NAV LOGO IMAGES
   ---------------------------------------------------------- */
.nav-logo-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
}
.nav-logo-wordmark {
  height: 36px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
@media (max-width: 480px) {
  .nav-logo-wordmark { display: none; }
}

/* ----------------------------------------------------------
   DROPDOWN TRIGGER
   ---------------------------------------------------------- */
.ni-drop {
  position: relative;
}
.na-drop {
  background: none;
  border: none;
  font-family: var(--fb);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--w40);
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 8px;
  transition: color .15s var(--ease-out-quart), background .15s var(--ease-out-quart);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
@media (hover: hover) {
  .na-drop:hover { color: var(--w); background: var(--w06); }
}
.ni-drop.act .na-drop { color: var(--w); background: var(--w06); }

.nav-caret {
  flex-shrink: 0;
  opacity: .5;
  transition: transform .2s var(--ease-out-quart), opacity .15s;
}
.ni-drop.open .nav-caret,
.ni-drop.hovered .nav-caret {
  transform: rotate(180deg);
  opacity: 1;
}

/* ----------------------------------------------------------
   DROPDOWN PANEL
   ---------------------------------------------------------- */
.ndrop {
  position: absolute;
  /* Sit flush at 100% — top padding creates the invisible hover bridge */
  top: 100%;
  left: 0;
  min-width: 196px;
  background: rgba(4,5,15,.98);
  border: 1px solid var(--b2);
  border-radius: 12px;
  /* 10px top padding = hover bridge so cursor moving down doesn't lose hover */
  padding: 10px 6px 6px;
  box-shadow: 0 16px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .15s var(--ease-out-quart), transform .15s var(--ease-out-quart);
  z-index: 9999;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  /* Invisible top border so the panel visually appears 8px below button */
  border-top: 8px solid transparent;
  background-clip: padding-box;
}
/* Open states — JS-managed (.open) is primary; CSS hover is enhancement only */
.ni-drop.open .ndrop {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
@media (hover: hover) {
  /* CSS hover as enhancement — JS hover-delay handles the gap tolerance */
  .ni-drop.hovered .ndrop {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}

.ndrop-lk {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--w60);
  text-decoration: none;
  transition: color .12s, background .12s;
  white-space: nowrap;
}
@media (hover: hover) {
  .ndrop-lk:hover { color: var(--w); background: var(--w06); }
}
.ndrop-lk:focus-visible { color: var(--w); background: var(--w06); outline: none; }

.ndrop-sub {
  padding-left: 22px;
  font-size: 12px;
  color: var(--w40);
}
@media (hover: hover) {
  .ndrop-sub:hover { color: var(--w60); background: var(--w06); }
}

.ndrop-sep {
  height: 1px;
  background: var(--b);
  margin: 5px 6px;
}
.ndrop-grp {
  font-size: 10px;
  font-weight: 700;
  color: var(--w30);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px 2px;
}

/* ----------------------------------------------------------
   MOBILE DROPDOWN
   ---------------------------------------------------------- */
.mob-drop {
  display: flex;
  flex-direction: column;
}
.mob-drop-btn {
  background: none;
  border: none;
  text-align: left;
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 500;
  color: var(--w40);
  padding: 12px 14px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color .15s, background .15s;
  width: 100%;
}
.mob-drop-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (hover: hover) {
  .mob-drop-btn:hover { color: var(--w); background: var(--w06); }
}
.mob-caret {
  flex-shrink: 0;
  opacity: .5;
  margin-left: auto;
  transition: transform .2s var(--ease-out-quart);
}
.mob-drop.open .mob-caret { transform: rotate(180deg); opacity: 1; }
.mob-sub {
  display: none;
  flex-direction: column;
  gap: 1px;
  padding: 0 0 4px 14px;
  border-left: 1px solid var(--b);
  margin: 0 14px 6px;
}
.mob-drop.open .mob-sub { display: flex; }
.mob-sub-lk {
  padding: 9px 12px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--w40);
  text-decoration: none;
  transition: color .12s, background .12s;
}
@media (hover: hover) {
  .mob-sub-lk:hover { color: var(--w); background: var(--w06); }
}
.mob-sub-indent {
  font-size: 12px;
  color: var(--w30);
  padding-left: 20px;
}

/* Language switcher pill (EN | AR) — pinned to the right */
.lang-sw {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 4px 12px;
  color: rgba(255,255,255,.5);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;  /* push to the right of the flex row */
}
.lang-sw span { color: rgba(255,255,255,.9); }
.lang-sw a {
  color: rgba(255,255,255,.5);
  text-decoration: none;
  transition: color .15s;
}
@media (hover: hover) { .lang-sw a:hover { color: #fff; } }
.lang-sw-sep { opacity: .35; }

/* Mobile language row */
.mob-lang-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--b);
  font-size: 12px;
  font-weight: 600;
}
.mob-lang-lbl { color: var(--w80); }
.mob-lang-sep { color: var(--w20); }
.mob-lang-ar {
  color: var(--pink);
  text-decoration: none;
  font-weight: 700;
}
@media (hover: hover) { .mob-lang-ar:hover { text-decoration: underline; } }

/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  .nav  { padding: 0 20px; }
  .nm   { display: none; }
  .nb   { display: none; }
  .lang-sw { display: none; }   /* shown in mob menu instead */
  .ham  { display: flex; }
}