/* AirScopeX Mobile Overrides (drop-in) */
/* Place after style.css. Keeps desktop look intact; only overrides at small widths. */

/* 1) Base tweaks */
:root {
  --tap: 12px; /* minimum hit area padding */
}

html {
  scroll-behavior: smooth;
}
img,
svg,
canvas,
video {
  max-width: 100%;
  height: auto;
}

/* Improve tap targets on mobile */
@media (hover: none) and (pointer: coarse) {
  a,
  button,
  .btn,
  .nav-link,
  .dropdown-item,
  .list-group-item {
    padding-top: max(0.5rem, var(--tap));
    padding-bottom: max(0.5rem, var(--tap));
  }
}

/* 2) Header / Navbar */
@media (max-width: 576px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 1040;
    backdrop-filter: saturate(120%) blur(8px);
  }
  .brand-logo {
    width: 28px;
    height: 28px;
  }
  .navbar-brand {
    font-size: 1rem;
  }
  .navbar .form-control {
    font-size: .95rem;
  }
  .navbar .btn {
    padding: .45rem .7rem;
  }
}

/* 3) Layout wrappers */
:root {
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Map should fill viewport minus header on mobile */
@media (max-width: 768px) {
  #map,
  .map-wrap,
  .map-container {
    position: relative;
    height: calc(100dvh - var(--hdr-h, 56px));
    min-height: 420px;
    inset: 0;
  }
  body.homev2 {
    overflow-x: hidden;
  }
}

/* 4) Drawer: turn into bottom sheet on mobile */
.drawer,
.drawer-panel,
#drawer {
  will-change: transform, height;
}

@media (max-width: 768px) {
  .drawer,
  .drawer-panel,
  #drawer {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    max-height: min(86dvh, 720px);
    height: auto;
    transform: translateY(100%);
    transition: transform .28s ease;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35);
    background: var(--panel, rgba(18, 26, 44, 0.96));
    z-index: 1050;
  }
  .drawer.is-open,
  #drawer.is-open {
    transform: translateY(0);
  }
  .drawer-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: inherit;
    padding-top: .5rem;
  }
  .drawer .drag-handle {
    display: block;
    width: 48px;
    height: 4px;
    border-radius: 4px;
    background: var(--stroke, #22324a);
    margin: 6px auto 8px;
    opacity: 0.7;
  }
  .drawer-body {
    overflow: auto;
    max-height: calc(86dvh - 56px - var(--safe-bottom));
    -webkit-overflow-scrolling: touch;
  }
}

/* 5) Filters to right on desktop; stack on mobile */
@media (max-width: 768px) {
  .filter-panel,
  #filters,
  .filters-wrap {
    position: sticky;
    top: 0;
    z-index: 1035;
    padding: .5rem .75rem;
    margin: 0;
    background: var(--panel, rgba(18, 26, 44, 0.96));
    border-bottom: 1px solid var(--stroke, #22324a);
  }
  .filters-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
  }
  .filters-grid .btn,
  .filters-grid .form-control,
  .filters-grid .form-select {
    width: 100%;
  }
}

/* 6) Typography scale */
@media (max-width: 576px) {
  h1 {
    font-size: 1.30rem;
  }
  h2 {
    font-size: 1.15rem;
  }
  h3 {
    font-size: 1.05rem;
  }
  .lead {
    font-size: 1rem;
  }
  .display-1,
  .display-2,
  .display-3,
  .display-4 {
    font-size: 1.6rem;
  }
}

/* 7) Tables: enable horizontal scroll */
.table-responsive {
  overflow-x: auto;
}
@media (max-width: 768px) {
  table {
    font-size: .92rem;
  }
  .table th,
  .table td {
    white-space: nowrap;
  }
}

/* 8) Cards / panels spacing */
@media (max-width: 576px) {
  .card {
    border-radius: 14px;
  }
  .card-body {
    padding: .9rem;
  }
  .list-group-item {
    padding: .7rem .9rem;
  }
}

/* 9) Forms */
@media (max-width: 576px) {
  .form-control,
  .form-select {
    font-size: 16px;
  } /* avoid iOS zoom */
  .input-group > .btn {
    font-size: 16px;
  }
}

/* 10) Buttons: full-width where appropriate */
@media (max-width: 576px) {
  .btn.wide,
  .btn-block,
  .btn-full {
    width: 100%;
  }
}

/* 11) Utilities for color contrast issues (light/dark modes) */
.text-muted {
  color: var(--muted, #93a5bd) !important;
}
.muted {
  color: var(--muted, #93a5bd) !important;
}

/* 12) Fix Bootstrap offcanvas z-index if used with drawer */
.offcanvas {
  z-index: 1060;
}

/* 13) Footer safe area */
@media (max-width: 768px) {
  footer {
    padding-bottom: max(12px, var(--safe-bottom));
  }
}

/* Added mobile-specific overrides for homepage and about page revamp */
/* === HOMEPAGE & ABOUT MOBILE OVERRIDES (SAFE) === */

/* Mobile hero background image override */
@media (max-width: 576px) {
  .homev2 .hero {
    min-height: calc(100vh - 56px) !important;
    margin-top: 56px !important;
    padding: 0 !important;
  }

  .homev2 .hero-content {
    padding: 0 16px !important;
    margin: 0 auto !important;
  }

  /* Stack CTA buttons with gap */
  .homev2 .hero-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: center !important;
  }

  .homev2 .btn-cta-primary,
  .homev2 .btn-cta-secondary {
    width: 100% !important;
    max-width: 320px !important;
  }

  .homev2 .hero-title {
    font-size: clamp(1.6rem, 6vw, 2.3rem) !important;
    line-height: 1.15 !important;
  }

  .homev2 .hero-subtitle {
    font-size: clamp(0.95rem, 3.8vw, 1.05rem) !important;
  }
}

/* Tablet adjustments for hero centering */
@media (max-width: 768px) {
  .homev2 .hero {
    min-height: calc(100vh - 56px) !important;
    margin-top: 56px !important;
  }
}

/* Tablet adjustments */
@media (max-width: 1024px) {
  .homev2 .hero-title {
    font-size: clamp(2rem, 5vw, 3rem) !important;
  }

  .homev2 .hero-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.2rem) !important;
  }

  .homev2 .feature-card {
    padding: 24px 20px !important;
  }
}

/* Mobile phone adjustments */
@media (max-width: 768px) {
  .homev2 .hero {
    min-height: calc(100vh - 56px) !important;
    margin-top: 56px !important;
  }

  .homev2 .hero-content {
    transform: translateY(5vh) !important;
  }

  .homev2 .hero-title {
    font-size: 2.2rem !important;
    margin-bottom: 12px !important;
  }

  .homev2 .hero-subtitle {
    font-size: 1rem !important;
    margin-bottom: 24px !important;
  }

  /* Reduce shadows on mobile for performance */
  .homev2 .feature-card {
    box-shadow: var(--shadow-sm) !important;
  }

  .homev2 .counter-box {
    padding: 20px 16px !important;
  }

  .homev2 .counter-value {
    font-size: 2.2rem !important;
  }

  .homev2 .counter-label {
    font-size: 0.9rem !important;
  }

  /* About page mobile */
  .aboutv2 .about-main {
    padding-top: 60px !important;
  }

  .aboutv2 .about-section {
    margin-bottom: 50px !important;
  }

  .aboutv2 .about-card,
  .aboutv2 .capability-card,
  .aboutv2 .benefit-card {
    padding: 24px 20px !important;
  }

  .aboutv2 .timeline-item {
    gap: 16px !important;
  }

  .aboutv2 .timeline-dot {
    width: 42px !important;
    height: 42px !important;
  }

  .aboutv2 .timeline-item:not(:last-child)::before {
    left: 20px !important;
  }

  .aboutv2 .timeline-content {
    padding: 14px 18px !important;
  }

  .aboutv2 .developer-card {
    flex-direction: column !important;
    text-align: center !important;
    padding: 28px 20px !important;
  }

  .aboutv2 .developer-avatar {
    width: 80px !important;
    height: 80px !important;
  }

  .aboutv2 .developer-links {
    justify-content: center !important;
  }
}

/* Small mobile phones */
@media (max-width: 480px) {
  .homev2 .hero {
    min-height: 65vh !important;
  }

  .homev2 .hero-title {
    font-size: 1.9rem !important;
  }

  .homev2 .hero-subtitle {
    font-size: 0.95rem !important;
  }

  .homev2 .btn-cta-primary,
  .homev2 .btn-cta-secondary {
    padding: 12px 24px !important;
    font-size: 0.95rem !important;
    min-height: 48px !important;
  }

  .homev2 .feature-card {
    padding: 20px 16px !important;
    min-height: 110px !important;
  }

  .homev2 .feature-card i {
    font-size: 2rem !important;
  }

  .homev2 .feature-card strong {
    font-size: 1rem !important;
  }

  .homev2 .counter-value {
    font-size: 1.9rem !important;
  }

  .homev2 .counter-label {
    font-size: 0.85rem !important;
  }

  .homev2 .scroll-indicator {
    width: 44px !important;
    height: 44px !important;
    bottom: 24px !important;
  }

  /* About page small mobile */
  .aboutv2 .about-card-icon {
    width: 56px !important;
    height: 56px !important;
  }

  .aboutv2 .about-card-icon i {
    font-size: 1.75rem !important;
  }

  .aboutv2 .about-card-title {
    font-size: 1.3rem !important;
  }

  .aboutv2 .about-card-text {
    font-size: 0.95rem !important;
  }

  .aboutv2 .capability-card i,
  .aboutv2 .benefit-card i {
    font-size: 2rem !important;
  }

  .aboutv2 .timeline-dot {
    width: 38px !important;
    height: 38px !important;
  }

  .aboutv2 .timeline-item:not(:last-child)::before {
    left: 18px !important;
  }

  .aboutv2 .timeline-content h3 {
    font-size: 1.05rem !important;
  }

  .aboutv2 .timeline-content p {
    font-size: 0.9rem !important;
  }

  .aboutv2 .faq-accordion .accordion-button {
    padding: 14px 16px !important;
    font-size: 0.95rem !important;
  }

  .aboutv2 .faq-accordion .accordion-body {
    padding: 14px 16px !important;
    font-size: 0.95rem !important;
  }

  .aboutv2 .developer-avatar {
    width: 70px !important;
    height: 70px !important;
  }

  .aboutv2 .developer-name {
    font-size: 1.3rem !important;
  }

  .aboutv2 .developer-bio {
    font-size: 0.95rem !important;
  }
}

/* Extra small devices */
@media (max-width: 360px) {
  .homev2 .hero-title {
    font-size: 1.7rem !important;
  }

  .homev2 .hero-subtitle {
    font-size: 0.9rem !important;
  }

  .homev2 .btn-cta-primary,
  .homev2 .btn-cta-secondary {
    padding: 10px 20px !important;
    font-size: 0.9rem !important;
  }

  .homev2 .feature-card {
    padding: 16px 12px !important;
  }

  .homev2 .counter-value {
    font-size: 1.7rem !important;
  }
}

/* Ensure no horizontal overflow */
@media (max-width: 768px) {
  .homev2,
  .aboutv2 {
    overflow-x: hidden !important;
  }

  .homev2 .container,
  .aboutv2 .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Fix for services section not overlapping hero */
@media (max-width: 576px) {
  .homev2 .main-content,
  .homev2 #features {
    position: static !important;
    top: auto !important;
    transform: none !important;
    margin-top: 0 !important;
  }
}

/* Adding uploaded image as mobile background for hero section */
/* Mobile background image override using uploaded image */
@media (max-width: 768px) {
  .homev2 .hero-bg {
    background-image: url("https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-2AKlzGgROHOjWeNqqxZwMcN5nelztA.png") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
}