/* ════════════════════════════════════════════════════════════
   BRVO Digital LLC — Mobile Optimization Layer
   Applies ONLY below 768px. Desktop/Tablet untouched.
════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── GLOBAL SAFETY NET ─────────────────────────────────── */
  html, body { overflow-x: hidden; max-width: 100vw; }
  * { box-sizing: border-box; }
  img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
  .wrap, [style*="max-width:1320px"], [style*="max-width: 1320px"],
  [style*="max-width:1100px"], [style*="max-width:900px"],
  [style*="max-width:800px"], [style*="max-width:780px"] {
    max-width: 100% !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* ── TOPBAR: hide on mobile ─────────────────────────────── */
  div[style*="height:40px"][style*="position:fixed"][style*="top:0"] { display: none !important; }

  /* ── MAIN HEADER: reposition since topbar is gone ──────── */
  header#brvoHeader {
    top: 0 !important;
    height: 64px !important;
  }
  header#brvoHeader > div { padding: 0 1rem !important; gap: 0.75rem !important; }
  header#brvoHeader svg[width="34"] { width: 28px !important; height: 28px !important; }
  header#brvoHeader > div > a[href] img { height: 26px !important; width: auto !important; max-width: 55vw; object-fit: contain; }

  body { padding-top: 64px !important; }

  /* Hide desktop nav only (never the mobile panel #brvoMobile) */
  header#brvoHeader .desktop-nav { display: none !important; }
  header#brvoHeader > div > a[href*="get-quote"],
  header#brvoHeader > div > a[href*="contact"],
  header#brvoHeader a[href*="contact"] { display: none !important; }
  /* ── Hide topbar on mobile (multiple selectors for reliability) ── */
  div[style*="height:40px"][style*="position:fixed"][style*="top:0"] { display: none !important; }
  div[style*="z-index:1002"] { display: none !important; }

  /* ── Burger above EVERYTHING, guaranteed tappable ── */
  #brvoBurger {
    display: flex !important;
    position: relative !important;
    z-index: 2000 !important;
    pointer-events: auto !important;
  }
  /* Mobile menu panel + overlay above header too */
  #brvoMobile { z-index: 2100 !important; }
  #brvoOverlay { z-index: 2050 !important; }

  /* Mobile panel width polish (visibility handled by .open class in header) */
  #brvoMobile {
    width: 86vw !important;
    max-width: 340px !important;
  }
  #brvoMobile a, #brvoMobile button {
    padding: 0.85rem 1.5rem !important;
    font-size: 1rem !important;
    min-height: 48px;
    display: flex !important;
    align-items: center;
  }
  #brvoMobile .bvh-mobile__sub { min-height: 42px; }

  /* ── HERO SECTIONS ──────────────────────────────────────── */
  .brvo-hero { min-height: auto !important; padding: 5.5rem 0 2rem !important; }
  .brvo-hero__inner { grid-template-columns: 1fr !important; gap: 2rem !important; padding: 0 1.25rem !important; text-align: center; }
  .brvo-hero__title { font-size: clamp(1.7rem, 7vw, 2.1rem) !important; }
  .brvo-hero__sub { font-size: 0.95rem !important; margin-left: auto; margin-right: auto; }
  .brvo-hero__cta { flex-direction: column; align-items: stretch !important; }
  .brvo-hero__cta .brvo-btn { width: 100%; justify-content: center; }
  .brvo-hero__trust { grid-template-columns: 1fr !important; }
  .brvo-hero__visual { display: none !important; }
  .brvo-hero__stats { grid-template-columns: repeat(2, 1fr) !important; margin: 2rem 1rem 0 !important; padding: 1.25rem !important; }
  .brvo-hero__shape, .brvo-hero__glow { display: none !important; }

  /* Legacy hero sections (inline styles in service pages) */
  section[style*="min-height:70vh"], section[style*="min-height:75vh"], section[style*="min-height:65vh"] {
    min-height: auto !important;
    padding: 5.5rem 0 3rem !important;
  }
  section[style*="min-height:calc(100vh"] { min-height: auto !important; padding: 5.5rem 0 3rem !important; }
  h1 { font-size: clamp(1.6rem, 7vw, 2.1rem) !important; line-height: 1.25 !important; }
  h2 { font-size: clamp(1.35rem, 6vw, 1.75rem) !important; line-height: 1.3 !important; }

  /* ── GRIDS: force single/double column ─────────────────── */
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(6,1fr)"],
  [style*="grid-template-columns: repeat(2,1fr)"],
  [style*="grid-template-columns: repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(5,1fr)"],
  [style*="grid-template-columns: repeat(6,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  /* Stats/quick-fact strips look better as 2-col */
  .stats-grid, [class*="stats-grid"] { grid-template-columns: repeat(2,1fr) !important; }

  /* Two-column layout sections (text+visual, content+sidebar) */
  section > div[style*="grid-template-columns:1fr 1fr"],
  section > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* ── CARDS ──────────────────────────────────────────────── */
  [style*="padding:2rem"] { padding: 1.5rem !important; }
  [style*="padding:1.75rem"] { padding: 1.25rem !important; }
  [style*="padding:3rem"] { padding: 1.75rem !important; }

  /* ── BUTTONS ────────────────────────────────────────────── */
  a[style*="display:inline-flex"][style*="padding:0.875rem 2rem"],
  a[style*="display:inline-flex"][style*="padding:0.95rem 2.25rem"],
  a[style*="display:inline-flex"][style*="padding:1rem 2.25rem"] {
    width: 100%;
    justify-content: center !important;
    box-sizing: border-box;
  }
  /* When two CTAs sit side by side, stack them */
  div[style*="display:flex"][style*="gap:1rem"][style*="justify-content:center"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* ── PRICING ────────────────────────────────────────────── */
  .pricing-grid, [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  .pricing-card[style*="transform:scale(1.03)"] { transform: none !important; }

  /* ── TIMELINE COMPONENT ─────────────────────────────────── */
  .timeline-item { grid-template-columns: 40px 1fr !important; direction: ltr !important; }
  .timeline-dot { width: 40px !important; height: 40px !important; font-size: 0.6rem !important; }
  .timeline-card { margin: 0 0 1.25rem 0.875rem !important; padding: 1.25rem !important; }

  /* ── SOLUTION TIMELINE (8-step) ─────────────────────────── */
  .brvo-timeline .timeline-item { grid-template-columns: 40px 1fr !important; }

  /* ── FORMS ──────────────────────────────────────────────── */
  form[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns:1fr 1fr"] input,
  div[style*="display:grid"][style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  input, select, textarea { font-size: 16px !important; } /* prevents iOS zoom-on-focus */

  /* ── SERVICES STICKY SIDEBAR PAGE ───────────────────────── */
  .svc-layout { grid-template-columns: 1fr !important; }
  .svc-sidebar { display: none !important; }
  .svc-mobile-tabs { display: flex !important; }

  /* ── FLOATING WIDGETS: never overlap content ───────────── */
  .brvo-float-left { bottom: 1rem !important; left: 1rem !important; gap: 0.6rem !important; }
  .brvo-float-btn { width: 46px !important; height: 46px !important; }
  .brvo-chat-wrap { bottom: 1rem !important; right: 1rem !important; }
  .brvo-chat-toggle { width: 48px !important; height: 48px !important; }
  .brvo-chat-panel { width: calc(100vw - 2rem) !important; right: -0.5rem !important; max-height: 70vh !important; }
  /* Push last section's bottom padding so floating buttons don't cover CTAs */
  section:last-of-type { padding-bottom: 6.5rem !important; }

  /* ── FOOTER ─────────────────────────────────────────────── */
  footer > div > div[style*="grid-template-columns:2.2fr"],
  footer > div > div[style*="grid-template-columns: 2.2fr"],
  footer [style*="grid-template-columns:2fr repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  footer { padding: 0 !important; }
  footer > div:first-child { padding: 3rem 1.25rem 0 !important; }
  footer .footer-bottom,
  footer > div[style*="border-top"] > div {
    flex-direction: column !important;
    text-align: center;
    gap: 0.875rem !important;
  }
  footer div[style*="display:flex"][style*="gap:1.5rem"] { justify-content: center !important; flex-wrap: wrap; }

  /* ── INDUSTRY/SERVICE PILL GRIDS ────────────────────────── */
  div[style*="flex-wrap:wrap"][style*="gap:0.75rem"][style*="justify-content:center"] {
    gap: 0.5rem !important;
  }

  /* ── PORTAL / ADMIN (if viewed on mobile) ──────────────── */
  .portal-sidebar, .admin-sidebar { display: none !important; }
  .portal-main, .admin-main { margin-left: 0 !important; padding: 1rem !important; }
  #portalMenuBtn, #adminMenuBtn { display: block !important; }

  /* ── EVERY SECTION: consistent comfortable padding ─────── */
  section { padding-top: 3.5rem; padding-bottom: 3.5rem; }

  /* ── TEXT: prevent overflow from long words/links ──────── */
  p, h1, h2, h3, h4, a, span { overflow-wrap: break-word; word-break: break-word; }

  /* ── TABLES: horizontal scroll container, not page ─────── */
  table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
}

/* ── Small phones (≤380px): tighter spacing ───────────────── */
@media (max-width: 380px) {
  .wrap, [style*="max-width:1320px"] { padding-left: 1rem !important; padding-right: 1rem !important; }
  .brvo-hero__title { font-size: 1.55rem !important; }
  .brvo-hero__stats { grid-template-columns: repeat(2,1fr) !important; margin: 1.5rem 0.75rem 0 !important; }
  .brvo-stat__num { font-size: 1.5rem !important; }
  section { padding-top: 2.75rem; padding-bottom: 2.75rem; }
}