/* =============================================================
   Martial Solutions — Mobile fixes pass (Apr 23, 2026)
   Addresses findings F1–F14 in Mobile Audit.html
   Loaded AFTER homepage-v2.css / homepage-v3-sections.css / industry.css
   ============================================================= */

/* ---- F9: Mobile drawer toggle button --------------------- */
.nav-burger {
  display: none;
  background: transparent;
  border: 1px solid var(--line, rgba(255,255,255,0.15));
  width: 44px; height: 44px;
  border-radius: 2px;
  align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  color: inherit;
  margin-left: 8px;
}
.nav-burger svg { width: 20px; height: 20px; display: block; }
.industry-page .nav-burger {
  border-color: var(--ink-line-strong);
  color: var(--ink);
}

/* Drawer overlay */
.nav-drawer-scrim {
  position: fixed; inset: 0;
  background: rgba(10, 10, 15, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 1090;
}
.nav-drawer-open .nav-drawer-scrim { opacity: 1; pointer-events: auto; }

.nav-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(86vw, 340px);
  background: oklch(0.16 0.01 285);
  color: oklch(0.91 0.02 70);
  z-index: 1100;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(.2,.6,.2,1);
  display: flex; flex-direction: column;
  box-shadow: -20px 0 60px -20px rgba(0,0,0,0.5);
  overflow-y: auto;
}
.industry-page .nav-drawer {
  background: oklch(0.18 0.012 270);
  color: oklch(0.95 0.005 85);
}
.nav-drawer-open .nav-drawer { transform: translateX(0); }
.nav-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav-drawer-head .label {
  font-family: var(--font-index, 'JetBrains Mono', monospace);
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: oklch(0.76 0.018 70);
}
.nav-drawer-close {
  background: transparent; border: 0;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  color: inherit; cursor: pointer;
}
.nav-drawer-close svg { width: 18px; height: 18px; }
.nav-drawer ul {
  list-style: none; margin: 0; padding: 8px 0;
}
.nav-drawer ul a,
.nav-drawer ul .section-label {
  display: block;
  padding: 14px 24px;
  font-family: var(--font-structure, 'Manrope', sans-serif);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: oklch(0.91 0.02 70);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  min-height: 48px;
}
.nav-drawer ul .section-label {
  font-family: var(--font-index, 'JetBrains Mono', monospace);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: oklch(0.70 0.018 70);
  padding-top: 22px;
  padding-bottom: 10px;
  border-bottom: 0;
  min-height: 0;
}
.nav-drawer ul a:hover { background: rgba(255,255,255,0.04); }
.industry-page .nav-drawer ul a { color: oklch(0.95 0.005 85); }
.industry-page .nav-drawer ul .section-label { color: oklch(0.74 0.008 85); }
.nav-drawer-cta {
  margin: 20px 22px 28px;
  padding: 16px 18px;
  background: var(--accent, oklch(0.74 0.09 72));
  color: oklch(0.12 0.008 285);
  border-radius: 3px;
  text-decoration: none;
  font-family: var(--font-structure, 'Manrope', sans-serif);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px;
}
.industry-page .nav-drawer-cta {
  background: var(--brand-blue, oklch(0.58 0.14 228));
  color: white;
}

/* ---- F1 + F9: mobile nav treatment ----------------------- */
@media (max-width: 780px) {
  .nav-container { gap: 10px; }
  .nav-burger {
    display: inline-flex;
    flex-shrink: 0;
    margin-left: 6px;
  }
  .nav-links {
    gap: 6px;
    flex-shrink: 1;
    min-width: 0;
  }
  /* Collapse the full nav-links list — drawer owns everything except the phone */
  .nav-links li:not(.nav-li-phone) { display: none; }
  .nav-phone {
    font-size: 0.78rem;
    padding: 8px 10px !important;
    margin-left: 0 !important;
    border-left: 0;
    border: 1px solid var(--accent, oklch(0.74 0.09 72));
    border-radius: 2px;
    min-height: 44px;
    display: inline-flex; align-items: center;
    color: var(--accent, oklch(0.74 0.09 72));
  }
  .industry-page .nav-phone {
    border-color: var(--brand-blue, oklch(0.58 0.14 228));
    color: var(--brand-blue, oklch(0.58 0.14 228));
  }
  .nav-logo {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    min-width: 0;
    flex-shrink: 1;
  }
  .nav-logo .tag { display: none; }
}

/* ---- F1b: Sticky tap-to-call bar on industry pages ------- */
.mobile-call-bar {
  display: none;
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 900;
  background: var(--brand-blue, oklch(0.58 0.14 228));
  color: white;
  padding: 12px 16px;
  border-radius: 6px;
  box-shadow: 0 8px 24px -6px rgba(20, 25, 55, 0.35);
  text-decoration: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-structure, 'Manrope', sans-serif);
  font-weight: 600;
  font-size: 0.92rem;
  min-height: 52px;
}
.mobile-call-bar .label {
  font-family: var(--font-index, 'JetBrains Mono', monospace);
  font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  opacity: 0.85;
  display: block; margin-bottom: 2px;
}
.mobile-call-bar .num {
  font-family: var(--font-display, 'Ibarra Real Nova', serif);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0;
}
.mobile-call-bar .phone-glyph {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: grid; place-items: center;
  flex: none;
}
.mobile-call-bar .phone-glyph svg { width: 16px; height: 16px; }
@media (max-width: 780px) {
  .industry-page .mobile-call-bar { display: flex; }
  .industry-page main { padding-bottom: 92px; }
}

/* ---- F2 + F11: Two-line CTA labels ----------------------- */
.btn-stack {
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  gap: 2px !important;
  line-height: 1.15;
}
.btn-stack .btn-l1 {
  font-size: 0.78rem; letter-spacing: 0.1em; opacity: 0.9;
}
.btn-stack .btn-l2 {
  font-family: var(--font-display, 'Ibarra Real Nova', serif);
  font-size: 1.05rem; letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
}

/* ---- F4: Hero H1 reflow on small screens ----------------- */
@media (max-width: 520px) {
  .hero-h1 {
    font-size: clamp(1.9rem, 9vw, 2.4rem) !important;
    text-wrap: balance;
    max-width: 16ch;
  }
  .industry-page .ind-hero h1 {
    font-size: clamp(1.9rem, 9vw, 2.4rem);
    max-width: 14ch;
  }
}

/* ---- F5: Homepage hero meta → single-line trust ticker --- */
@media (max-width: 640px) {
  .hero-meta {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px 10px !important;
    padding-top: 14px !important;
    border-top: 1px dashed rgba(235, 220, 190, 0.15);
    margin-top: 18px;
  }
  .hero-meta .row {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    grid-template-columns: none !important;
    gap: 6px !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 0.68rem !important;
  }
  .hero-meta .row .k { color: var(--accent, oklch(0.74 0.09 72)); }
  .hero-meta .row + .row::before {
    content: "·";
    opacity: 0.4;
    margin-right: 10px;
    color: var(--parchment-muted, #bbb);
  }
}

/* ---- F6: Industry hero tag contrast + size --------------- */
.industry-page .ind-hero-tag {
  background: oklch(0.88 0.06 var(--accent-h));
  color: oklch(0.32 var(--accent-c) var(--accent-h));
  font-weight: 600;
}
@media (max-width: 520px) {
  .industry-page .ind-hero-tag { font-size: 0.74rem; }
}

/* ---- F7: Demo card scales below 400px -------------------- */
@media (max-width: 420px) {
  .industry-page .ind-demo-card { padding: 22px 18px 22px; }
  .industry-page .ind-demo-cta {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .industry-page .ind-demo-cta .phone-ico { width: 30px; height: 30px; }
  .industry-page .ind-demo-cta .phone-ico svg { width: 14px; height: 14px; }
  .industry-page .ind-demo-cta .demo-num {
    font-size: 1.05rem;
    white-space: normal;
  }
}

/* ---- F3: Form stacks + F8: label size -------------------- */
@media (max-width: 480px) {
  .industry-page .ind-demo-form-row {
    grid-template-columns: 1fr !important;
  }
}
.industry-page .ind-demo-form .label-text,
.industry-page .ind-waitlist .label-text {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: none;
  font-family: var(--font-structure, 'Manrope', sans-serif);
  font-weight: 600;
  color: var(--ink-muted);
}
.industry-page .ind-demo-form input {
  min-height: 44px;
  font-size: 16px; /* prevent iOS zoom-on-focus */
}

/* ---- F10: Pain cards stack icon above on mobile ---------- */
@media (max-width: 520px) {
  .industry-page .ind-pain {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 20px 20px 22px;
  }
  .industry-page .ind-pain-ico {
    width: 32px; height: 32px;
  }
  .industry-page .ind-pain-ico svg { width: 14px; height: 14px; }
  .industry-page .ind-pain h3 { font-size: 1.02rem; }
}

/* ---- F11: CTA strip button + F2 industry hero CTAs ------- */
@media (max-width: 520px) {
  .industry-page .ind-cta-strip .btn-white {
    letter-spacing: 0.04em;
    padding: 14px 18px;
    font-size: 0.78rem;
    width: 100%;
    justify-content: center;
  }
  .industry-page .ind-hero-ctas .btn {
    letter-spacing: 0.04em;
    padding: 14px 14px;
  }
  .industry-page .ind-hero-ctas .btn-stack .btn-l1 {
    letter-spacing: 0.1em;
    font-size: 0.72rem;
  }
}

/* ---- F12: FAQ → details/summary on mobile ---------------- */
.industry-page .ind-faq-item details summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 28px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.35;
}
.industry-page .ind-faq-item details summary::-webkit-details-marker { display: none; }
.industry-page .ind-faq-item details summary::after {
  content: "+";
  position: absolute;
  right: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--font-structure);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--brand-blue);
  transition: transform 0.2s;
  line-height: 1;
}
.industry-page .ind-faq-item details[open] summary::after {
  content: "–";
}
.industry-page .ind-faq-item details p {
  margin-top: 10px;
  font-family: var(--font-reading);
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--ink-muted);
}
@media (min-width: 781px) {
  /* Restore static card layout on desktop */
  .industry-page .ind-faq-item details summary { list-style: none; }
}

/* ---- F13: Footer link tap targets ------------------------ */
.industry-page .site-footer .footer-grid a {
  padding: 10px 0;
  margin-bottom: 0;
  min-height: 40px;
}
@media (max-width: 780px) {
  .industry-page .site-footer .footer-grid a { padding: 12px 0; }
  .site-footer .footer-grid a {
    padding: 10px 0 !important;
    margin-bottom: 0 !important;
    min-height: 40px;
  }
}

/* ---- Industries: mobile tap targets & stack ---------------- */
@media (max-width: 780px) {
  .industry-link {
    min-height: 48px;
    padding-top: 14px;
    padding-bottom: 16px;
  }
  .industry-link-name { font-size: 1.1rem; }
  .industries-soon { padding: var(--s-md) var(--s-md) var(--s-lg); }
  .industries-catchall {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 22px 20px !important;
  }
  .industries-catchall .btn { width: 100%; justify-content: center; }
}
@media (max-width: 380px) {
  .industry-link-desc { font-size: 0.84rem; }
  .industry-soon-hint { font-size: 0.78rem; }
}

/* ---- Anti-zoom on iOS form focus ------------------------- */
.industry-page input[type="text"],
.industry-page input[type="tel"],
.industry-page input[type="email"],
.industry-page input[type="url"] {
  font-size: 16px;
}
