/*
 * mobile.css — phone-only compaction that has to reach every page.
 *
 * THE THIRD no-reset stylesheet, after nav-light.css and touch-targets.css,
 * and it meets the bar their headers set: no :root, no reset, no body{}, no
 * bare element selector. Everything here is scoped to a class, and almost
 * everything is behind (max-width: 768px). It is linked from all THREE head
 * render points (Head.tsx, static.tsx, hubs.tsx), because the site has three
 * page families and a rule in one family's stylesheet reaches one family.
 * CLAUDE.md, "three page families".
 *
 * WHY THIS FILE EXISTS
 *
 * MOBILE_PLAN.md, 2026-09-11. The home page measured 14,074px tall at 390px,
 * 16.7 phone screens, with a 2,255px footer under every page. This file is
 * Phase 1: the pieces of that plan that are shared across page families.
 * Home-page-specific compaction lives in home.css beside the sections it
 * compacts, because that is where check-classes looks for them.
 *
 * Nothing here changes a desktop. The desktop layouts were measured and
 * tuned in August and are not this file's business.
 */

/* ── Footer columns as accordions ──────────────────────────────────────
   Three link columns, each a <details class="footer-col" open> with the
   column heading in its <summary>. `open` is in the markup, so with no
   JavaScript, and on every desktop, the footer is exactly what it was.
   mobile.js removes `open` under 768px on load, and only on load.

   Both container names are covered: the JSX footer uses .footer-links and
   the six legacy static pages use .footer-links-grid. Same markup shape,
   two class names, one rule.

   THE :not([open]) RULE IS THE WHOLE TRICK. A closed <details> hides its
   children with a UA `display: none`, and the page stylesheets set
   `.footer-col ul { display: flex }`, which beats it. Without this rule a
   "closed" column shows every link and gains a taller header, which is the
   exact bug the portal's filters shipped once. */
.footer-col > summary {
  list-style: none;
  cursor: default;
}
.footer-col > summary::-webkit-details-marker {
  display: none;
}

@media (max-width: 768px) {
  .footer-links,
  .footer-links-grid {
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .footer-col {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .footer-col > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .footer-col > summary h3,
  .footer-col > summary h4 {
    margin: 0;
  }
  /* A chevron drawn with two borders: no icon font, and it turns with the
     state so the row says which way it will go. */
  .footer-col > summary::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 1.5px solid rgba(255, 255, 255, 0.45);
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.45);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-right: 4px;
    flex: none;
  }
  .footer-col[open] > summary::after {
    transform: rotate(-135deg);
  }
  .footer-col:not([open]) > *:not(summary) {
    display: none !important;
  }
  .footer-col[open] > ul {
    padding-bottom: 1rem;
  }

  /* The rest of the footer's height on a phone was air. Measured after the
     accordions: 856px, of which the link rows were 156. The other 700 was
     88px of top padding, a 2rem headline block, a 3.5rem margin under the
     links and a column-stacked legal row with 1rem gaps. Both footers (the
     JSX one and the six legacy copies) share these class names and the id. */
  #footer {
    padding-top: 3rem;
    padding-bottom: 1.5rem;
  }
  .footer-top {
    gap: 1.25rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.25rem;
  }
  .footer-talk {
    font-size: 1.5rem;
  }
  .footer-form-label {
    margin-bottom: 0.6rem;
  }
  .footer-links,
  .footer-links-grid {
    margin-bottom: 1.25rem;
  }
  .footer-bottom {
    padding-top: 1rem;
    gap: 0.5rem;
  }
}

/* ── The sticky call to action ─────────────────────────────────────────
   Measured before this existed: the home page had no call to action in its
   body until the tenth screen, and /about's first was 7,277px down. A
   reader convinced at screen three had nowhere to go.

   A 56px bar pinned to the bottom of the viewport on phones, from the first
   screen to the footer. No JavaScript and no scroll threshold: it is simply
   there, which is the one behaviour that cannot fail when a tab is hidden
   or an IntersectionObserver never fires. The page gets padding-bottom of
   the same height so the footer's last row is still reachable.

   OPAQUE, not glass. The portal's More sheet shipped as nine per cent white
   over a near-black page and relied on backdrop-filter that iPhones did not
   deliver; the conversation behind it overlapped every link. A control that
   must read against whatever section is behind it gets a solid ground. */
.sticky-cta {
  display: none;
}

@media (max-width: 768px) {
  .sticky-cta {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    height: 56px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 16px calc(0px + env(safe-area-inset-bottom));
    box-sizing: content-box;
    background: #0a0a0a;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  }
  .sticky-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 44px;
    max-width: 420px;
    padding: 0 18px;
    border-radius: 999px;
    background: #d97706;
    color: #0a0a0a;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
    text-decoration: none;
  }
  .sticky-cta-note {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    white-space: nowrap;
  }
  /* Room for the bar, keyed on the bar being present rather than on a class
     someone has to remember to add to <html> in three shells. :has() is in
     every browser that gets this bar. (0,1,1) beats the page stylesheets'
     own body{} at (0,0,1). */
  body:has(> .sticky-cta) {
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
    scroll-padding-bottom: 72px;
  }
}

/* ── .phone-fold: long-form content that a phone gets on request ───────
   <details class="phone-fold" open> around a block that a desktop should
   show in full and a phone should offer as one row. First use: the
   service pages' essay (#service-deep-dive), 7,138px on a phone, between
   the process and the FAQ. mobile.js removes `open` under 768px on load.

   On a desktop the summary is display:none and the details is open, so
   the block renders as if the wrapper were not there. The summary is a
   real disclosure control on phones: 52px row, chevron, tap anywhere.
   Colours are set against a light ground because the first use sits on
   white; a second use on a dark section should override the two colour
   rules rather than this file growing a theme switch. */
.phone-fold > summary {
  display: none;
}
.phone-fold > summary::-webkit-details-marker {
  display: none;
}

@media (max-width: 768px) {
  .phone-fold > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 52px;
    padding: 0.5rem 0;
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-family: 'Sora', ui-sans-serif, system-ui, sans-serif;
  }
  .phone-fold-title {
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.01em;
    color: #0a0a0a;
  }
  .phone-fold-meta {
    margin-left: auto;
    font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
    font-size: 0.8rem;
    color: rgba(0, 0, 0, 0.5);
    white-space: nowrap;
  }
  .phone-fold > summary::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 1.5px solid rgba(0, 0, 0, 0.45);
    border-bottom: 1.5px solid rgba(0, 0, 0, 0.45);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-right: 4px;
    flex: none;
  }
  .phone-fold[open] > summary::after {
    transform: rotate(-135deg);
  }
  .phone-fold[open] > summary {
    margin-bottom: 1.5rem;
  }
  /* Same trick as the footer columns: the folded block may carry its own
     display, which would beat the UA's closed-details hiding. */
  .phone-fold:not([open]) > *:not(summary) {
    display: none !important;
  }
}