/* Shared mobile behaviour for the public marketing / legal / blog / help surface.
 *
 * These pages have no shared stylesheet — each of the ~43 templates carries its own inline
 * <style>. Rather than editing every one, this file (and site-nav.js) is injected before
 * </head> by `inject_mobile()` in dashboard/common.py, so it lands AFTER each page's inline
 * rules and wins on equal specificity.
 *
 * Everything here is scoped to markup that site-nav.js creates (.mnav-*, .table-scroll) or to
 * a narrow media query, so a page that already ships its own mobile nav — marketing.html and
 * landing-accessbot.html both do — is left completely alone.
 */

/* ── Mobile nav drawer ────────────────────────────────────────────────────────
 * Sub-pages (blog, compare, help, legal, how-to) hid their nav with
 * `@media(max-width:760px){.nav-links a:not(.btn){display:none}}` and offered no
 * replacement, so a phone had no navigation at all. site-nav.js clones those links into
 * .mnav-drawer and adds the toggle; the header keeps its CTA button as-is.
 */
.mnav-toggle{
  display:none;background:none;border:0;padding:6px;line-height:0;cursor:pointer;
  color:var(--ink,#e8ecf7);margin-left:auto;
}
.mnav-toggle svg{width:26px;height:26px;display:block}
.mnav-drawer{display:none}

@media(max-width:860px){
  .mnav-toggle{display:block}
  .mnav-drawer{
    display:none;position:absolute;top:100%;left:0;right:0;z-index:60;
    flex-direction:column;align-items:stretch;gap:2px;
    padding:8px 20px 16px;
    background:var(--bg,#0b1020);
    border-bottom:1px solid var(--line,#26314f);
    box-shadow:0 12px 24px -12px rgba(0,0,0,.6);
  }
  .mnav-drawer.open{display:flex}
  .mnav-drawer a{
    display:block;padding:12px 4px;font-size:16px;
    color:var(--ink,#e8ecf7);text-decoration:none;
    border-bottom:1px solid var(--line,#26314f);
  }
  .mnav-drawer a:last-child{border-bottom:0}
  /* The CTA keeps its page-supplied .btn styling but goes full width at the foot of the drawer. */
  .mnav-drawer a.btn{
    margin-top:12px;padding:13px 16px;border-bottom:0;
    text-align:center;border-radius:12px;font-weight:600;
  }
  /* Header collapses to logo + toggle. Leaving the CTA in the row overlapped the wordmark at
     390px; it is the last item in the drawer instead, where it has room to be a real button. */
  .mnav-host .nav-links{display:none}
  .mnav-toggle{margin-left:auto}
}

/* The drawer is positioned against the header, which must therefore be a containing block. */
.mnav-host{position:relative}

/* ── Footer link row ──────────────────────────────────────────────────────────
 * `.foot` is display:flex and its inner link <div> is a flex item with the default
 * min-width:auto, so it refused to shrink below its ~559px max-content width. That forced
 * 189px of horizontal scroll on every page carrying this footer — and because the content
 * was wider than the viewport, mobile Chrome expanded the layout viewport to ~579px and
 * rendered the whole page zoomed out.
 */
.foot > div{min-width:0}
@media(max-width:860px){
  .foot{row-gap:10px}
  .foot a{display:inline-block;margin-right:14px;line-height:2}
}

/* ── Wide tables ──────────────────────────────────────────────────────────────
 * The comparison tables (/compare 746px, /whop-alternative 720px, /patreon-alternative)
 * overflow a 390px viewport. site-nav.js wraps any table wider than its container in this
 * scroller so the page itself stops scrolling sideways.
 */
.table-scroll{
  max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.table-scroll > table{margin:0}

/* ── General small-screen guards ──────────────────────────────────────────── */
@media(max-width:860px){
  /* Long unbroken strings (URLs, support addresses, API keys in the docs) are a common
     source of overflow on the legal and help pages. */
  body{overflow-wrap:break-word}
  pre,code{overflow-x:auto;max-width:100%}
  img,svg,video,iframe{max-width:100%;height:auto}
  /* Tap targets: the footer and nav links sit well under the 44px guideline otherwise. */
  .foot a{padding:2px 0}
}