/* ============================================================
   Gronac — shared mobile polish
   ------------------------------------------------------------
   Included from every HTML page in /public so the same fixes
   apply everywhere without having to rewrite each page's own
   media queries.

   Strategy: this sheet only ADDS targeted fixes for mobile pain
   points and leaves desktop styling untouched. Each page's
   existing layout is the source of truth — these rules just
   patch the cracks that show up at narrow widths.

   Pain points addressed:
     1. iOS focus-zoom on inputs (font-size < 16px triggers it).
     2. Horizontal overflow from wide images/tables/code blocks.
     3. Pinch-tappable buttons (touch targets >= 36px).
     4. Modal cards overflowing tiny viewports.
     5. Form rows collapsing to one column on phones.
     6. Pricing/feature grids stacking instead of squishing.
     7. The schedule modal's multi-step composer at phone width.
   ============================================================ */

/* ── 1. iOS zoom-on-focus — applies regardless of screen size,
   since iOS triggers it at any width if base font-size < 16px.
   Use 16px on every typeable control. We can't always assume
   each page sized inputs to 16px (login.html was 15px). ── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
  font-size: 16px;
}

/* ── 2. Stop any rogue image/iframe pushing the page wider than the viewport. ── */
img, video, iframe, svg, canvas, embed, object {
  max-width: 100%;
  height: auto;
}

/* ── 3. Mobile-specific — phones / narrow tablets ── */
@media (max-width: 760px) {

  /* Kill horizontal scroll. Some pages have wide pre/code blocks. */
  html, body {
    overflow-x: hidden;
  }

  /* Pre/code blocks: keep within the viewport, wrap long lines. */
  pre, code {
    max-width: 100%;
    overflow-x: auto;
    word-wrap: break-word;
    white-space: pre-wrap;
  }

  /* Buttons need enough vertical room to be tap-friendly. Some pages
     define small buttons; bump the minimum without overriding visual
     style. */
  button,
  .btn,
  a.btn,
  input[type="submit"],
  input[type="button"] {
    min-height: 40px;
  }

  /* Two-column form rows (.field-row) appear on multiple pages; collapse
     them to one column. Use grid override so it works with both flex
     and grid implementations. */
  .field-row {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 14px !important;
  }

  /* Modals: many pages use .modal / .modal-card / .modal-backdrop.
     At phone width they should fill the screen edge-to-edge minus a
     small gutter, and not be wider than the viewport. */
  .modal,
  .modal-card {
    max-width: calc(100vw - 24px) !important;
    width: calc(100vw - 24px) !important;
    margin: 12px auto !important;
  }

  /* Modal padding gets cramped at phone width if pages used 28-32px. */
  .modal-head,
  .modal-body,
  .modal-foot {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Tables: anything in a .table-wrap / .scroll-x can be scrolled
     horizontally. Anything else, force a sane minimum break. */
  .table-wrap,
  .scroll-x,
  .overflow-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Public marketing nav links (Use cases / Pricing / About). Pages
     handle this already via .nav-links { display:none }, but some
     pages forgot — belt and braces. */
  header .nav-links,
  nav .nav-links {
    display: none !important;
  }

  /* Cards in feature/plan/value grids: stop them being narrower than
     their content (which causes the rounded card to be poked through
     by text). */
  .kf-card,
  .feature-card,
  .plan-card,
  .value-card,
  .feat,
  .mode-card {
    min-width: 0 !important;
  }

  /* The schedule modal's specific painful spots. */
  .step-dots {
    flex-wrap: wrap;
    gap: 6px !important;
  }
  .modal-foot {
    flex-direction: column-reverse !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  .modal-foot .btn {
    width: 100%;
  }

  /* The custom-avatar create modal — same fix. */
  .tab-row {
    flex-wrap: wrap;
  }
  .tab-btn {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Consent row in custom-avatar modal: stop the strong text from
     pushing the checkbox off-screen on narrow phones. */
  .consent-row {
    align-items: flex-start;
  }
  .consent-row span {
    min-width: 0;
  }

  /* App pages: when the sidebar is open as a sheet, prevent the page
     beneath from scrolling. Dashboard already does this via JS for the
     overlay, but the sheet itself can have a footer that gets clipped
     on small phones. Make sidebar full-width on phones. */
  .sidebar {
    width: 280px !important;
    max-width: 90vw !important;
  }

  /* Login / auth card spacing. login.html already has padding:32px 24px
     at this breakpoint; we just stop the page hero from going edge-to-
     edge on the wrap. */
  .auth-wrap {
    padding: 24px 12px !important;
  }
  .auth-card {
    padding: 28px 18px !important;
    max-width: 100% !important;
  }

  /* The big hero meeting-card mock on index.html: make it stack under
     the headline rather than try to fit beside it. */
  .hero-grid,
  .hero-row {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* Footer columns on marketing pages */
  footer .footer-grid,
  footer .foot-cols {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
}

/* ── 4. Tiny phones (< 380px) — last-resort tightenings ── */
@media (max-width: 380px) {
  /* Reduce hero typography one notch so it doesn't wrap awkwardly. */
  .hero h1,
  .page-head h1 {
    font-size: clamp(26px, 8vw, 34px) !important;
  }
  /* Modal padding one more nudge. */
  .modal-head,
  .modal-body,
  .modal-foot {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ============================================================
   5. PUBLIC-PAGE MOBILE NAV (injected by /js/mobile-nav.js)
   ------------------------------------------------------------
   The marketing pages hide .nav-links on phones but had no
   replacement, so the menu disappeared. The script injects a
   hamburger button (.m-nav-toggle) and a slide-out drawer
   (.m-nav-drawer). These styles show the button only on mobile
   and keep the desktop nav untouched.
   ============================================================ */

/* Hamburger button — hidden on desktop, shown on mobile only. */
.m-nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(120, 90, 55, .22);
  border-radius: 9px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #3f3122;
  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
}
.m-nav-toggle:active { background: rgba(120, 90, 55, .06); }

/* Drawer + backdrop live at the document root; hidden until .show. */
.m-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(30, 20, 10, .42);
  opacity: 0;
  transition: opacity .22s ease;
  z-index: 998;
}
.m-nav-backdrop.show { opacity: 1; }

.m-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(82vw, 320px);
  background: #fffdf9;
  box-shadow: -18px 0 50px rgba(40, 25, 10, .22);
  transform: translateX(100%);
  transition: transform .24s cubic-bezier(.4, 0, .2, 1);
  z-index: 999;
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
}
.m-nav-drawer.show { transform: translateX(0); }

.m-nav-inner {
  display: flex;
  flex-direction: column;
  padding: 18px 18px calc(22px + env(safe-area-inset-bottom, 0px));
  gap: 6px;
  height: 100%;
  overflow-y: auto;
}

.m-nav-close {
  align-self: flex-end;
  background: none;
  border: none;
  color: #6b5236;
  cursor: pointer;
  padding: 6px;
  margin: -4px -4px 6px 0;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
.m-nav-close:active { background: rgba(120, 90, 55, .07); }

.m-nav-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-bottom: 1px solid rgba(120, 90, 55, .12);
  padding-bottom: 12px;
  margin-bottom: 14px;
}
.m-nav-links a {
  display: block;
  padding: 13px 12px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #3f3122;
  text-decoration: none;
}
.m-nav-links a:active { background: rgba(242, 169, 59, .12); }
.m-nav-links a.current { color: #b4540d; background: rgba(242, 169, 59, .12); }

.m-nav-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}
.m-nav-actions .m-nav-login {
  display: block;
  text-align: center;
  padding: 13px 12px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #3f3122;
  text-decoration: none;
  border: 1px solid rgba(120, 90, 55, .22);
}
.m-nav-actions .m-nav-cta {
  display: block;
  text-align: center;
  width: 100%;
  font-size: 16px;
}

/* Show the hamburger only at the mobile breakpoint the pages use to hide
   .nav-links (max-width:860px on index; mobile-polish hides them at 760px).
   Use 860px so it matches the page that hides links earliest. */
@media (max-width: 860px) {
  .m-nav-toggle { display: inline-flex; }
  /* When the drawer mirrors the actions, hide the inline Log in on the bar so
     the nav doesn't get crowded next to the hamburger; keep the primary CTA
     visible on slightly wider phones but let it shrink. */
  header nav .nav-actions .nav-login,
  nav .nav-actions .nav-login { display: none; }
}

/* On very small phones, also fold the inline Try button into the drawer so the
   top bar is just brand + hamburger (prevents the CTA crowding the logo). */
@media (max-width: 560px) {
  header nav .nav-actions .btn,
  nav .nav-actions .btn { display: none; }
}