/* ---------------------------------------------------------------------------
   mobile.css — the phone layer (added 2026-09-09)

   Why this file exists
   --------------------
   Every page on this site is built from *inline* styles (style="display:flex")
   plus a frozen, purged Tailwind build. A stylesheet rule cannot override an
   inline style unless it carries !important — which is why the desktop nav
   (`.fs-nav-links`, 454px of links) never collapsed on a phone and forced every
   page to ~540px inside a 390px screen. That is the whole "not mobile friendly"
   symptom: the page is wider than the phone and the user pans sideways.

   The `!important` here is deliberate and load-bearing. Do not strip it.

   The site's own inline @media blocks are all `min-width` (1024px+), i.e. they
   only ever scale the layout UP for large monitors. This is the one place that
   handles small screens.

   Pairs with the mobile-nav builder at the bottom of assets/site.js, which
   clones the existing nav links into the slide-down panel — so adding or
   removing a nav link in the HTML needs no change here.
--------------------------------------------------------------------------- */

/* Defaults (desktop): the phone-only affordances stay hidden. */
.rw-menu-btn { display: none; }
#rw-mobile-menu { display: none; }

@media (max-width: 860px) {

  /* ---- 1. Never pan sideways ------------------------------------------- */
  html, body { max-width: 100% !important; overflow-x: hidden !important; }

  /* ---- 2. The header becomes an app bar --------------------------------- */
  header.fs-site-nav .fs-nav-inner {
    padding: 10px 16px !important;
    gap: 10px !important;
  }

  /* The desktop link row and the loose /blog link move into the panel. */
  header.fs-site-nav .fs-nav-links { display: none !important; }
  header.fs-site-nav .fs-nav-inner > a.fs-nav-link { display: none !important; }

  /* Right cluster keeps the CTA pill (the one thing worth a tap up here);
     the plain "Sign in" text link moves into the panel. */
  header.fs-site-nav .fs-nav-inner > div { gap: 10px !important; }
  header.fs-site-nav .fs-nav-inner > div > a.fs-nav-link { display: none !important; }

  header.fs-site-nav .fs-cta-pill {
    padding: 10px 16px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }

  /* Keep the wordmark on one line — at 390px it otherwise wraps to two, which
     pushes the fixed bar from ~62px to ~86px and eats the top of the page. */
  header.fs-site-nav .fs-brand {
    display: flex !important;
    align-items: center;
    gap: 6px;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    font-size: 19px !important;
    white-space: nowrap !important;
  }

  .rw-menu-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: none;
    padding: 0;
    border: 1px solid #E0DED6;
    border-radius: 9px;
    background: #FFFFFF;
    color: #111111;
    cursor: pointer;
  }
  .rw-menu-btn:active { background: #F4F2EC; }
  .rw-menu-btn span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    position: relative;
  }
  .rw-menu-btn span::before,
  .rw-menu-btn span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 160ms ease, opacity 120ms ease;
  }
  .rw-menu-btn span::before { top: -6px; }
  .rw-menu-btn span::after  { top: 6px; }
  .rw-menu-btn[aria-expanded="true"] span { background: transparent; }
  .rw-menu-btn[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
  .rw-menu-btn[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

  /* ---- 3. The slide-down menu ------------------------------------------- */
  #rw-mobile-menu {
    display: block;
    position: fixed;
    top: var(--rw-bar-h, 62px);
    left: 0;
    right: 0;
    z-index: 60;
    background: #FFFFFF;
    border-top: 1px solid #E8E6DF;
    border-bottom: 1px solid #E8E6DF;
    box-shadow: 0 22px 44px -26px rgba(0, 0, 0, 0.45);
    max-height: calc(100vh - var(--rw-bar-h, 62px));
    overflow-y: auto;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 160ms ease, transform 180ms ease;
  }
  #rw-mobile-menu.rw-open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  #rw-mobile-menu a {
    display: block;
    padding: 15px 20px;
    border-bottom: 1px solid #F1EFE9;
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    color: #111111 !important;
    text-decoration: none;
  }
  #rw-mobile-menu a:last-child { border-bottom: 0; }
  #rw-mobile-menu a[data-active="true"] { color: #B8860B !important; }
  #rw-mobile-menu a.rw-menu-cta {
    margin: 12px 20px 18px;
    padding: 14px 18px;
    border-radius: 8px;
    background: #0A2540;
    color: #FFFFFF !important;
    text-align: center;
    border-bottom: 0;
  }

  /* ---- 4. Content clears the (shorter) fixed bar -------------------------
     Driven by the real measured bar height (site.js sets --rw-bar-h and keeps
     it in sync on resize) rather than a hard-coded number — a hard number goes
     wrong the moment the bar wraps, hiding the top of every page behind it. */
  main { padding-top: calc(var(--rw-bar-h, 62px) + 14px) !important; }

  /* ---- 5. The footer stacks --------------------------------------------- */
  .fs-site-foot { padding-top: 44px !important; }
  .fs-site-foot > div {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 36px !important;
  }

  /* ---- 5b. The second header family ------------------------------------
     The legal/FAQ/pricing/landing pages use a simpler `<header class="lp">`
     (brand + 4-6 short links, each `margin-left:20px`) instead of the
     `.fs-site-nav` app bar. With so few short links a hamburger is overkill —
     letting the row wrap under the brand is both simpler and one tap fewer.
     These pages get no `.rw-menu-btn`; that is intentional, not a gap. */
  header.lp .wrap {
    flex-wrap: wrap !important;
    gap: 10px 0 !important;
    padding: 14px 20px !important;
  }
  header.lp nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 18px !important;
    width: 100% !important;
  }
  header.lp nav a {
    margin-left: 0 !important;
    font-size: 15px !important;
    padding: 6px 0 !important;
  }

  /* Shared content container on those pages. */
  .wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* ---- 5c. The sample-redaction demo (redact-pdf.html) ------------------
     Its title bar is one flex row with the stage chip pushed right by
     `margin-left:auto`; at phone width the filename + chip don't fit, so let
     the row wrap and drop the auto margin. */
  .rwdemo-bar { flex-wrap: wrap !important; row-gap: 6px !important; }
  .rwdemo-stage { margin-left: 0 !important; }

  /* ---- 5d. The app-store strip (2026-09-14) ---------------------------------
     A plain <div> straight inside <main>, so it gets none of the section side
     padding; on a phone it sat 4px from the screen edge. Give it the same
     gutter as everything else. */
  #rw-app-banner { margin-left: 16px !important; margin-right: 16px !important; }

  /* ---- 6. Comfortable reading + tap targets ----------------------------- */
  main > section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  main img, main svg, main video, main table { max-width: 100% !important; }
  main table { display: block !important; overflow-x: auto !important; }
}