/**
 * IndiaSelo — mobile nav, services submenu scroll, site-wide responsive fixes.
 */

@media (max-width: 991px) {
  /* Full-screen mobile menu panel (opaque — no page bleed-through) */
  .header-area {
    z-index: 10050;
  }

  .header-area .main-nav .nav.nav-mobile-open {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 80px !important;
    width: 100% !important;
    max-height: calc(100dvh - 80px) !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 0 24px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
    background: #fff !important;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.15);
    z-index: 10051;
    box-sizing: border-box;
  }

  /* Dim page behind open menu */
  body.menu-open::before {
    content: "";
    position: fixed;
    inset: 0;
    top: 80px;
    background: rgba(15, 23, 42, 0.45);
    z-index: 10040;
    pointer-events: none;
  }

  body.menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
  }

  /* Services submenu — scrollable accordion (fixes non-scrollable list) */
  .header-area .main-nav .nav li.submenu > ul {
    display: none !important;
    height: auto !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0;
    padding: 0 !important;
    margin: 0 !important;
    transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.25s ease;
    border-top: 1px solid rgba(0, 102, 204, 0.12);
    background: #f8fafc !important;
  }

  .header-area .main-nav .nav li.submenu.opened > ul,
  .header-area .main-nav .nav li.submenu > ul.active {
    display: block !important;
    max-height: min(52dvh, 380px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    opacity: 1;
    padding: 6px 0 12px !important;
    margin-bottom: 8px !important;
  }

  .header-area .main-nav .nav li.submenu ul li a {
    white-space: normal !important;
    word-break: break-word;
    transform: none !important;
  }

  .header-area .main-nav .nav li.submenu ul li a:hover {
    transform: none !important;
    padding-left: 50px !important;
  }

  /* Kill hover collapse on touch devices */
  .header-area .main-nav .nav li.submenu:hover ul,
  .header-area .main-nav .nav li.submenu:focus ul {
    height: auto !important;
  }

  /* Vertical scrollbar only (no horizontal thumb) */
  .header-area .main-nav .nav::-webkit-scrollbar,
  .header-area .main-nav .nav li.submenu > ul::-webkit-scrollbar {
    width: 5px;
    height: 0;
  }

  .header-area .main-nav .nav::-webkit-scrollbar-thumb,
  .header-area .main-nav .nav li.submenu > ul::-webkit-scrollbar-thumb {
    background: rgba(0, 102, 204, 0.35);
    border-radius: 4px;
  }

  /* Services grid on homepage — single column, no horizontal scroll */
  .services .naccs .menu {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    margin-bottom: 24px !important;
  }

  .services .naccs .menu > div,
  .services .naccs .menu div .thumb {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .services .naccs .menu div .thumb a.service-link {
    min-height: 48px;
    font-size: 14px;
    padding: 14px 16px;
  }

  /* Hero & sections */
  .main-banner {
    padding-top: 100px !important;
    padding-bottom: 40px !important;
  }

  .main-banner .row {
    flex-direction: column;
  }

  .main-banner .right-image {
    margin-top: 24px;
    text-align: center;
  }

  .section-heading h4 {
    font-size: 1.5rem !important;
    line-height: 1.3;
  }

  .mobile-hook-section {
    padding: 24px 16px !important;
  }

  .hook-buttons,
  .hero-cta-buttons {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .hook-buttons a,
  .hero-cta-buttons .border-first-button,
  .hero-cta-buttons .btn-pay-now-hero {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Contact form */
  form#contact input,
  form#contact textarea,
  .contact-form input,
  .contact-form textarea {
    font-size: 16px !important;
    width: 100% !important;
    max-width: 100%;
  }

  /* Footer stacks */
  .footer-widget {
    margin-bottom: 28px;
  }

  /* Prevent horizontal page scroll */
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw;
  }

  img,
  video,
  iframe {
    max-width: 100%;
    height: auto;
  }

  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 480px) {
  .header-area .main-nav .logo img {
    max-width: 110px !important;
  }

  .main-banner h1,
  .main-banner .left-content h2 {
    font-size: 1.35rem !important;
    line-height: 1.35 !important;
  }

  .pre-header ul.info li {
    font-size: 11px;
  }
}

@media (min-width: 992px) {
  body.menu-open::before {
    display: none;
  }
}

/* Touch targets sitewide */
@media (hover: none) and (pointer: coarse) {
  .header-area .main-nav .nav li a,
  .menu-trigger,
  .border-first-button a,
  .btn-pay-now,
  .btn-pay-now-hero,
  .services .naccs .menu .service-link {
    min-height: 44px;
  }
}