/* ==========================================================================
   Design2Serve — Responsive Overrides
   Ye file style.css ke BAAD load honi chahiye (header.php mein link order dekho)
   Yahan sirf breakpoint-specific fixes rakhte hain, taake style.css clean rahe
   ========================================================================== */

/* ---- Mobile header fix (<=900px) ----
   Problem: header-actions mein theme-toggle + lang-switcher + Start a Project +
   burger ek saath fit nahi ho rahe the, header apni pill-width se overflow
   kar raha tha jisse pura page horizontally scroll ho raha tha.
   Fix: "Start a Project" ko header se hata ke mobile-menu ke andar daal diya,
   baaki elements thode compact kar diye. */
@media (max-width: 900px) {
  .site-header {
    padding: 10px 10px 10px 18px; /* TUNABLE: header ka mobile padding */
  }

  .header-actions {
    gap: 6px; /* TUNABLE: icons ke beech ka gap */
  }

  /* Header ke andar wala "Start a Project" chhupao — CTA ab mobile-menu mein hai */
  .header-actions > .btn-primary {
    display: none;
  }

  .theme-toggle {
    width: 34px; /* TUNABLE: mobile icon size */
    height: 34px;
  }

  .lang-switcher-btn {
    height: 34px; /* TUNABLE: mobile lang button size */
    padding: 0 10px;
    font-size: 12px;
    gap: 4px;
  }

  .burger {
    width: 38px; /* TUNABLE: mobile burger size */
    height: 38px;
  }

  .logo {
    font-size: 17px; /* TUNABLE: chhote logo taake jagah bache */
  }
}

/* ---- Extra-small phones (<=420px) ----
   Bohot chhoti screens (iPhone SE, purane Android) pe aur bhi tight hota hai */
@media (max-width: 420px) {
  .header-actions {
    gap: 4px;
  }

  .lang-switcher-btn {
    padding: 0 8px;
    font-size: 11px;
  }

  .lang-switcher-menu {
    right: -10px; /* TUNABLE: dropdown ko screen ke andar rakhne ke liye */
    min-width: 130px;
  }

  .logo {
    font-size: 15px;
  }
}

/* ---- "Start a Project" CTA jo ab mobile fullscreen menu ke andar hai ---- */
.mobile-menu .mobile-cta {
  margin-top: 34px; /* TUNABLE: nav links aur button ke beech spacing */
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 10px;
}

@media (max-width: 1299px) {
  .pricing-features {
    height: unset;
  }
}