/* =====================================================================
   nav-fix.css  —  sirf NAV BAR ka fix (mobile / tablet / desktop)
   Har page me existing <style> ke BAAD load hota hai. Baaki design nahi badalta.
   ===================================================================== */

/* Header: sticky rehta hai, nav ke andar text kabhi tootta nahi */
.site-header .header-inner { gap: 16px; }
.nav-links a.nav-item { white-space: nowrap; }
.logo-mark { flex-shrink: 1; min-width: 0; }

/* Laptop ki chhoti screen (1101–1240px): nav ek line me fit rahe */
@media (min-width: 1101px) and (max-width: 1240px) {
  .nav-links { gap: 16px; }
  .nav-links a.nav-item { font-size: 13.5px; }
  .social-links-wrap { gap: 8px; }
}

/* ---------- Tablet + Mobile (1100px tak): drawer menu ----------
   Pehle 900px tak hi burger tha, isliye 901–1100px (iPad landscape / chhote laptop)
   par nav overflow hota tha. Ab 1100px tak burger + drawer. */
@media (max-width: 1100px) {

  /* backdrop-filter ki wajah se "position: fixed" drawer header ke andar hi
     atak jata tha (screen ke bajay header ko reference banata tha). Hata diya. */
  .site-header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #ffffff;
  }

  .burger { display: flex; }

  .nav-links {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;                 /* purane browsers */
    height: 100dvh;                /* mobile browser ke address bar ke hisaab se */
    width: min(85vw, 320px);
    background: #ffffff;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
    padding: 22px 20px;
    transform: translateX(100%);
    visibility: hidden;            /* band drawer tab-focus na le */
    box-shadow: none;              /* band drawer ki shadow screen ke kinare par na dikhe */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s, box-shadow 0.3s ease;
    z-index: 1005;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .nav-links.open {
    transform: translateX(0);
    visibility: visible;
    box-shadow: -10px 0 35px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s, box-shadow 0.3s ease;
  }
  .nav-links > li { width: 100%; }

  .mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 6px;
  }
  .mobile-menu-title { font-size: 15px; font-weight: 800; color: #0d1b2a; }
  .close-drawer-btn {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #0d1b2a;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .nav-links a.nav-item {
    display: block;
    width: 100%;
    color: #0d9488;
    font-size: 15px;
    font-weight: 700;
    padding: 10px 0;
  }
  .nav-links a.nav-item.active { color: #0284c7; }

  .social-links-wrap { width: 100%; justify-content: flex-start; padding: 8px 0; }

  /* Client Login <a> inline tha, isliye width / margin lagta hi nahi tha */
  .client-login-btn {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 10px;
    padding: 12px !important;
  }

  /* Drawer khula ho to peeche ka page scroll na kare */
  html.nav-open, html.nav-open body { overflow: hidden; }
}

/* Bahut chhoti screen */
@media (max-width: 380px) {
  .logo-img { max-width: 130px; }
}