/* ============================================================
   MOBILE FIXES — A Digital Company
   Loaded after style.min.css on every page (via header.php)
   Breakpoints: 1023px (tablet), 767px (tablet/phone), 480px (phone), 375px (small)

   NOTE ON THE DRAWER:
   The compiled style.min.css opens the drawer with `transform` rules marked
   !important, and main.min.js toggles the classes `active` + `open` (not
   `is-open`). To make the white right-side panel + overlay design below take
   effect — and stay compatible with main.min.js — the drawer rules here use
   !important and the open-state matches `is-open`, `open`, AND `active`.
   ============================================================ */

/* ── GLOBAL ── */
*, *::before, *::after { box-sizing: border-box; }

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

/* Prevent horizontal scroll on all pages */
body, html { overflow-x: hidden; max-width: 100vw; }

/* ── NAVBAR ── */
@media (max-width: 1023px) {
  .nav-links { display: none !important; }
  .mobile-menu-toggle { display: flex !important; }
}

@media (min-width: 1024px) {
  .mobile-menu-toggle { display: none !important; }
  .mobile-menu-drawer { display: none !important; }
  .mobile-drawer-overlay { display: none !important; }
}

/* ── MOBILE DRAWER (white right-side panel) ──
   Overrides the compiled full-screen dark drawer below 1024px. */
@media (max-width: 1023px) {
  .mobile-menu-drawer {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 0 !important;
    left: auto !important;
    right: 0 !important;
    width: min(320px, 90vw) !important;
    max-width: 90vw !important;
    height: 100vh !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    z-index: 99999 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    box-shadow: -4px 0 24px rgba(0,0,0,0.12) !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s ease !important;
  }

  /* Open state — matches the fallback script (is-open) and main.min.js (open/active) */
  .mobile-menu-drawer.is-open,
  .mobile-menu-drawer.open,
  .mobile-menu-drawer.active {
    transform: translateX(0) !important;
  }
}

/* Overlay behind drawer */
.mobile-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 99998;
}

.mobile-drawer-overlay.is-open {
  display: block;
}

/* Drawer header */
.mobile-drawer-header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px !important;
  border-bottom: 1px solid rgba(15,23,42,0.08);
}

.mobile-drawer-header .logo {
  color: var(--text-primary) !important;
  font-size: 0.95rem;
}

.mobile-drawer-close {
  color: var(--text-primary) !important;
  background: none;
  border: none;
  cursor: pointer;
}

/* Drawer links */
.mobile-drawer-links {
  padding: 8px 0 24px !important;
}

.mobile-nav-link {
  display: block !important;
  padding: 12px 20px !important;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(15,23,42,0.05);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.mobile-sub-link {
  display: block !important;
  padding: 9px 20px 9px 36px !important;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(15,23,42,0.04);
}

.mobile-nav-link:active,
.mobile-sub-link:active {
  background: rgba(37,99,235,0.04);
}

/* Bottom CTA inside the drawer — keep side gutters against the edge-to-edge links */
.mobile-menu-drawer .mobile-drawer-btn {
  width: calc(100% - 40px) !important;
  margin: 16px 20px !important;
}

/* ── HERO SECTION — TWO COLUMN → STACK ── */
@media (max-width: 1023px) {
  /* Stack hero grid to single column */
  .hero-two-col,
  [style*="grid-template-columns:1fr 420px"],
  [style*="grid-template-columns: 1fr 420px"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
  }

  /* Remove sticky on the form panel */
  .hero-form-panel,
  [style*="position:sticky"],
  [style*="position: sticky"] {
    position: relative !important;
    top: auto !important;
  }

  /* Reduce hero top padding on mobile */
  [style*="padding-top:130px"] {
    padding-top: 100px !important;
  }
}

@media (max-width: 767px) {
  [style*="padding-top:130px"] {
    padding-top: 90px !important;
  }
}

/* ── HERO STATS ROW ── */
@media (max-width: 480px) {
  /* Force stats to 3 equal columns */
  .hero-stats-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }

  .hero-stats-row > div {
    min-width: unset !important;
    padding: 12px 8px !important;
  }

  .hero-stats-row .stat-number {
    font-size: 1.2rem !important;
  }

  .hero-stats-row .stat-label {
    font-size: 0.62rem !important;
  }
}

/* ── TABLE OF CONTENTS ── */
@media (max-width: 767px) {
  /* Break 2-col TOC to single column */
  [style*="columns:2"],
  [style*="columns: 2"] {
    columns: 1 !important;
  }
}

/* ── SECTION PADDING ── */
@media (max-width: 767px) {
  [style*="padding:90px 0"],
  [style*="padding: 90px 0"] {
    padding: 56px 0 !important;
  }

  [style*="padding:80px 0"],
  [style*="padding: 80px 0"] {
    padding: 48px 0 !important;
  }

  [style*="padding:72px 0"],
  [style*="padding: 72px 0"] {
    padding: 44px 0 !important;
  }
}

/* ── PAIN POINTS GRID (minmax 290px) ── */
@media (max-width: 767px) {
  [style*="minmax(290px"] {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 540px) and (max-width: 767px) {
  [style*="minmax(290px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── USE CASES GRID (minmax 330px) ── */
@media (max-width: 767px) {
  [style*="minmax(330px"] {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 600px) and (max-width: 767px) {
  [style*="minmax(330px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── HOW IT WORKS GRID (minmax 240px) ── */
@media (max-width: 767px) {
  [style*="minmax(240px"] {
    grid-template-columns: 1fr !important;
  }

  /* Always hide connector arrows on mobile */
  .hiw-connector { display: none !important; }
}

@media (min-width: 540px) and (max-width: 767px) {
  [style*="minmax(240px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── CTA BAR (below How It Works) ── */
@media (max-width: 767px) {
  /* Stack the CTA bar — text left, button below */
  .glass-panel[style*="justify-content:space-between"],
  .glass-panel[style*="justify-content: space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
    padding: 24px !important;
  }

  .glass-panel[style*="justify-content:space-between"] .btn {
    width: 100% !important;
    text-align: center !important;
  }
}

/* ── GUARANTEE / FINAL CTA SECTION ── */
@media (max-width: 1023px) {
  /* Stack the grid-split layout */
  .grid-split {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }
}

@media (max-width: 767px) {
  .glass-panel.grid-split {
    padding: 28px 20px !important;
  }
}

/* ── TOOL CHIPS ── */
@media (max-width: 480px) {
  [style*="padding:7px 16px"] {
    padding: 6px 12px !important;
    font-size: 0.75rem !important;
  }
}

/* ── SECTION HEADINGS ── */
@media (max-width: 767px) {
  h1 { font-size: clamp(1.7rem, 6vw, 2.4rem) !important; }
  h2 { font-size: clamp(1.4rem, 5vw, 1.9rem) !important; }
  h3 { font-size: clamp(1rem, 4vw, 1.2rem) !important; }
}

/* ── HERO FORM ── */
@media (max-width: 1023px) {
  /* Full width form on tablet/mobile */
  #hero-lead-form,
  .hero-form-panel {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ── FLOATING AUDIT WIDGET ── */
/* Short label shown only on very small screens.
   NOTE: style.min.css hides ALL `.advisor-trigger span` at <=768px (icon-only
   on mobile, specificity 0,1,1). We raise specificity + use !important here so
   the short "Free Audit" label still wins at <=400px per Step 6. */
.advisor-trigger-text-short { display: none; }

@media (max-width: 400px) {
  .advisor-trigger .advisor-trigger-text-full { display: none !important; }
  .advisor-trigger .advisor-trigger-text-short { display: inline !important; }
}

@media (max-width: 480px) {
  .advisor-trigger {
    padding: 10px 16px !important;
    font-size: 0.78rem !important;
    gap: 7px !important;
  }

  /* Make panel a full-width bottom sheet on small phones */
  .advisor-panel {
    width: 100vw !important;
    right: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 90vh !important;
  }
}

/* ── FOOTER ── */
@media (max-width: 767px) {
  .footer-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }
}

/* ── AUTHOR ATTRIBUTION BLOCK ── */
@media (max-width: 480px) {
  [style*="width:fit-content"] {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ── BENTO CARDS ── */
@media (max-width: 480px) {
  .about-bento-card {
    padding: 20px !important;
  }
}

/* ── HOVER EFFECTS ──
   Desktop (pointer with hover) keeps the lift; touch devices do not get
   stuck in a hover/active state after a tap. */
@media (hover: hover) {
  .btn:hover {
    opacity: 0.92 !important;
    transform: translateY(-1px) !important;
  }
}

@media (hover: none) {
  .btn:hover { opacity: 1 !important; transform: none !important; }
  a:hover { opacity: 1 !important; }
}

/* ── CONTAINER PADDING ── */
@media (max-width: 767px) {
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width: 375px) {
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ── INTERNAL LINKS ROW ── */
@media (max-width: 480px) {
  [style*="display:flex;flex-wrap:wrap;gap:10px"] a {
    width: 100% !important;
    justify-content: flex-start !important;
  }
}

/* ── BADGE CHIPS ── */
@media (max-width: 375px) {
  .badge {
    font-size: 0.58rem !important;
    padding: 3px 8px !important;
  }
}

/* ============================================================
   PROMPT 3 ADDITIONS — services + industry pages
   (document-automation, ai-chatbot, voice-ai-agent, healthcare)
   ============================================================ */

/* Responsive grid overrides — class based (Step 2D) */
@media (max-width: 540px) {
  .grid-auto-290, .grid-auto-300, .grid-auto-280,
  .grid-auto-330, .grid-auto-240, .grid-auto-260, .grid-auto-230,
  .grid-auto-220, .grid-auto-160 {
    grid-template-columns: 1fr !important;
  }
}
@media (min-width: 541px) and (max-width: 767px) {
  .grid-auto-330, .grid-auto-300, .grid-auto-290, .grid-auto-280,
  .grid-auto-260, .grid-auto-240, .grid-auto-230, .grid-auto-220 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .grid-auto-330 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-auto-290, .grid-auto-280, .grid-auto-260, .grid-auto-230, .grid-auto-220 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-auto-240, .grid-auto-160 { grid-template-columns: repeat(4, 1fr) !important; }
}

/* Attribute-selector safety net — any auto-fit grid on these pages stacks on
   small screens even if no class was added (covers every minmax value in use). */
@media (max-width: 540px) {
  [style*="minmax(160px"], [style*="minmax(220px"], [style*="minmax(230px"],
  [style*="minmax(240px"], [style*="minmax(260px"], [style*="minmax(280px"],
  [style*="minmax(290px"], [style*="minmax(300px"], [style*="minmax(330px"] {
    grid-template-columns: 1fr !important;
  }
}

/* Two-column split layouts stack on mobile (Step 2F) */
@media (max-width: 767px) {
  .grid-two-col,
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* Table of contents single column (Step 2G) */
@media (max-width: 767px) {
  .toc-list { columns: 1 !important; }
}

/* CTA bars that use space-between stack vertically (Step 2H) */
@media (max-width: 767px) {
  .cta-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
    padding: 24px 20px !important;
  }
  .cta-bar .btn { width: 100% !important; text-align: center !important; }
}

/* Refined typography scale (Step 2E) — overrides the earlier block above */
@media (max-width: 767px) {
  h1 { font-size: clamp(1.65rem, 5.5vw, 2.2rem) !important; line-height: 1.15 !important; }
  h2 { font-size: clamp(1.3rem, 4.5vw, 1.8rem) !important; line-height: 1.2 !important; }
  h3 { font-size: clamp(0.95rem, 3.5vw, 1.1rem) !important; }
  p  { font-size: clamp(0.85rem, 2.8vw, 1rem) !important; }
}

/* Preview / mockup containers never exceed the viewport (chatbot + voice pages) */
@media (max-width: 767px) {
  .preview-contain { max-width: 100% !important; }
  .media-contain { width: 100% !important; max-width: 100% !important; }
  .illustration-contain { max-width: min(400px, 90vw) !important; margin-left: auto !important; margin-right: auto !important; }
}