/* ============================================================
   mobile-faq.css — FAQ page mobile polish pass
   Same pattern as public/mobile-qc.css. Load it after globals.css
   on the FAQ route (or globally — every rule is scoped to .lbd-faq
   and gated to <=640px, so no other surface is touched).

   SCOPE HOOK: the FAQ page renders through LegalShell, which returns
   a bare <React.Fragment> with no page wrapper to hang rules on. Add
   a one-line hook in LegalShell so this file can target the FAQ:

     export function LegalShell({ eyebrow, title, italic, lede,
                                  children, lastUpdated, note, pageClass }) {
       return (
         <React.Fragment>
           <SiteNav />
           <main className={"lbd-legal " + (pageClass || "")}>
             ...header + section...
           </main>
           <SiteFooter />
         </React.Fragment>
       );
     }

   ...then in Faq.jsx pass pageClass="lbd-faq" to <LegalShell>.
   (Privacy / Security can reuse the same file with their own
   pageClass later — the card treatment suits any LegalShell page.)

   WHAT IT DOES on phones:
   - Reclaims the desktop header's 168px nav gap (mobile nav is a 56px bar).
   - Turns the always-open ruled Q&A list into a stacked scan of distinct,
     tappable-feeling cards — each numbered in mono (on-brand tabular nums).
   - Bumps the question to a clear heading and the answer to a comfortable
     mobile measure; makes inline links obvious tap targets.
   Desktop (>640px) is completely unchanged.
   ============================================================ */

@media (max-width: 640px) {
  /* Header — clear the 56px glass bar without the desktop 168px void. */
  .lbd-faq > header.section--ivory {
    padding-top: 92px !important;
    padding-bottom: 26px !important;
  }
  .lbd-faq > header .eyebrow { margin-bottom: 18px !important; }
  .lbd-faq > header .lbd-display { max-width: 100% !important; }
  .lbd-faq > header .lbd-lede {
    margin-top: 16px !important;
    max-width: 100% !important;
    font-size: 17px !important;
  }

  /* Answer body — tighten the seam under the header, trim the tail. */
  .lbd-faq > section.section--cream {
    padding-top: 10px !important;
    padding-bottom: 52px !important;
  }
  .lbd-faq .section--cream .section__inner {
    max-width: 100% !important;
    counter-reset: faq;
  }

  /* Each question becomes a distinct card, not a ruled paragraph. */
  .lbd-faq .section--cream .section__inner > article {
    counter-increment: faq;
    padding: 20px 18px !important;
    margin-bottom: 12px;
    background: var(--cream-elevated);
    border: 1px solid var(--paper-line-strong);
    border-bottom: 1px solid var(--paper-line-strong) !important; /* replaces the inline hairline */
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
  }

  /* Mono index — on-brand scannability marker, tabular numbers. */
  .lbd-faq .section--cream .section__inner > article::before {
    content: counter(faq, decimal-leading-zero);
    display: block;
    font-family: var(--font-mono);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--sage-deep);
    margin-bottom: 9px;
  }

  /* Question reads as a clear heading you'd tap. */
  .lbd-faq .section--cream .section__inner > article > .lbd-h3 {
    font-size: 20px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.015em !important;
    margin-bottom: 11px !important;
  }

  /* Answers — comfortable mobile measure; links become obvious tap targets. */
  .lbd-faq .section--cream .section__inner > article .lbd-body {
    font-size: 16.5px !important;
    line-height: 1.6 !important;
  }
  .lbd-faq .section--cream .section__inner > article a {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    word-break: break-word;
  }

  /* Closing note + "last updated" stamp sit apart from the card stack. */
  .lbd-faq .section--cream .section__inner > div:last-child {
    margin-top: 22px !important;
  }
}