/* =====================================================================
   mobile.css — responsive rescue for the flattened design pages.

   The Claude Design pages were composed at desktop width and flattened with
   their inline styles intact. Across the 40 design pages there is not a single
   @media rule: 130 multi-column grids that never collapse, ~1,400 flex rows
   that never wrap, and 376 absolutely-positioned decorations placed at fixed
   (often negative) offsets. On a 375px screen the result is text sitting
   underneath images and content clipped off the right edge — not merely ugly,
   genuinely unreadable, and a ranking factor on mobile-first indexing.

   Everything here has to use !important: the rules it overrides are inline
   style attributes, which otherwise always win.

   This is a rescue layer, not a redesign. It makes every page readable and
   tap-able on a phone; pages with elaborate desktop compositions will still
   look better after a designer revisits them.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Typography, at every width — NOT inside the media query below.

   This file is the one stylesheet that reaches all 123 pages (site.css only
   covers the 86 template pages), so the two rules that must apply on desktop
   as well as mobile live here rather than in a fourth stylesheet.

   The design review kept flagging the same thing: a heading's last word and
   its full stop dropping onto a line of their own — "Business shouldn't be
   this / hard.", "...under real staffing / pressure.", "...watched once and /
   forgotten." Seven instances were listed and there are more; it is a
   line-breaking problem, not a copy problem, so it is fixed once here instead
   of by rewording anything.

     balance  distributes a heading evenly across its lines, so no line is left
              holding a single short word.
     pretty   leaves body copy alone except that it refuses to end a paragraph
              with a lone word on the last line.

   Both degrade to normal wrapping in browsers that don't support them.
   --------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p, li, figcaption, blockquote { text-wrap: pretty; }

@media (max-width: 767px) {

  /* --- 1. nothing may force the page sideways -------------------------- */
  html, body { max-width: 100% !important; overflow-x: hidden !important; }

  /* --- 2. stack multi-column grids ------------------------------------- */
  /* Any inline grid becomes a single column. At 375px there is no useful
     two-column layout, and these were all authored for ~1200px. */
  /* minmax(0,1fr), not 1fr. A plain 1fr resolves its minimum to min-content, so
     a wide child (an app mock-up, a table, a long unbroken string) forces the
     column wider than the screen and the text runs off the edge. minmax(0,...)
     lets the column shrink. Same reason flex children need min-width:0. */
  [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [style*="grid-template-columns"] > *,
  [style*="display:flex"]:not([style*="width:max-content"]) > * {
    min-width: 0 !important;
  }

  /* --- 3. let flex rows wrap instead of overflowing --------------------- */
  /* Wrapping is right for ordinary rows, but NOT for a marquee: those are
     `display:flex; width:max-content` with a scrolling animation, and wrapping
     one turns the partner-logo strip into a 2,000px vertical stack. */
  [style*="display:flex"]:not([style*="flex-direction:column"]):not([style*="width:max-content"]):not(summary) {
    flex-wrap: wrap !important;
  }

  /* An accordion header is "question ... +". It is a flex row, so the blanket
     rule above wrapped it — and because the + is `flex:none`, a long question
     filled the first line and dropped the + onto a second one, left-aligned
     under the text. That is 98 accordions across /faqs/ and
     /ad-on-ai-division/. Keep the row intact and let the question wrap
     internally instead. */
  summary[style*="display:flex"] { flex-wrap: nowrap !important; }
  summary[style*="display:flex"] > *:not([style*="flex:none"]) { min-width: 0 !important; }

  /* An accordion header on the division pages is a bare 21px line of text —
     less than half the ~44px a thumb reliably hits, on a control whose whole
     job is to be tapped. /faqs/ and /programs/ already pad theirs (62px and
     56px), and min-height leaves those alone rather than stacking on top.
     The flex pair centres the question in the taller box; summaries that
     already set their own display keep it. */
  details > summary { min-height: 44px; box-sizing: border-box; }
  details > summary:not([style*="display:flex"]) { display: flex; align-items: center; }

  /* Same failure, much more of it: an icon chip followed by a line of copy — a
     tick and its bullet, a number and its label. The chip is `flex:none`, so
     the blanket wrap rule puts the copy on its own line and leaves the chip
     stranded above it. That was 142 rows across 23 pages, including the
     homepage and every division page.

     Scoped to rows with EXACTLY two children (:has(> :nth-child(2)) and not
     :nth-child(3)), because a row of several flex:none chips is a different
     thing and genuinely should wrap. */
  [style*="display:flex"]:has(> [style*="flex:none"]):has(> :nth-child(2)):not(:has(> :nth-child(3))):not([style*="width:max-content"]):not([style*="flex-direction:column"]) {
    flex-wrap: nowrap !important;
  }
  [style*="display:flex"]:has(> [style*="flex:none"]):has(> :nth-child(2)):not(:has(> :nth-child(3))) > *:not([style*="flex:none"]) {
    min-width: 0 !important;
  }
  [style*="width:max-content"] {
    flex-wrap: nowrap !important;
    width: max-content !important;
  }
  [style*="width:max-content"] > * { flex: none !important; min-width: auto !important; }

  /* The partner strip is spaced for a 1200px desktop row: a 110px gap between
     logos that are themselves only ~150px wide. On a 390px phone that means
     you almost never see more than one logo at a time, and the band reads as
     an empty white strip that happens to drift — which is why it kept being
     reported as "the logos don't work" even though it was scrolling, loading
     and sized correctly the whole time. Tighten the gap so two logos share the
     screen and it reads as a row. The other marquees on the site set their own
     spacing (or none), so this only touches the one that needs it. */
  [style*="animation:adonMarquee"][style*="gap:110px"] { gap: 34px !important; }

  /* --- 4. media never exceeds the screen -------------------------------- */
  /* height is deliberately NOT touched: many of these images are inside
     object-fit:cover frames where height:100% is doing real work. */
  img, svg, video, iframe, canvas, picture { max-width: 100% !important; }

  /* --- 5. desktop geometry that doesn't survive a phone ---------------- */
  /* These three classes are applied by scripts/mobile-fixups.js, which can look
     at the actual numbers in the inline styles — something CSS can't do. The
     earlier version of this file used blanket rules and HID content that ran
     off-canvas, which is why images went missing on mobile. */

  /* Containers locked to a desktop height reserve a screenful of empty space. */
  .aog-m-autoh { height: auto !important; min-height: 0 !important; }

  /* Absolutely-positioned wrappers that hold an image: put them back in the
     flow so they stack and stay visible, instead of overlapping or vanishing. */
  .aog-m-stack {
    position: static !important;
    left: auto !important; right: auto !important;
    top: auto !important; bottom: auto !important;
    transform: none !important;
    width: auto !important; max-width: 100% !important;
    margin: 0 auto 14px !important;
  }
  .aog-m-stack img { width: 100% !important; height: auto !important; }

  /* A logo chip pinned to a card's top corner, with the card's copy centred
     and full-width beneath it. There is room on a wide card; at 390px the
     heading runs under the chip and gets clipped. Put the chip back in the
     flow, centred above the copy. Applied by scripts/mobile-fixups.js, which
     can read the chip's pixel width and so tell a chip from a hero image. */
  .aog-m-corner {
    position: static !important;
    top: auto !important; right: auto !important;
    left: auto !important; bottom: auto !important;
    transform: none !important;
    margin: 0 auto 16px !important;
  }

  /* A 999px radius on a box that has wrapped to several rows becomes a giant
     oval whose curve clips its own contents — this is what broke the header. */
  .aog-m-pill {
    border-radius: 18px !important;
    row-gap: 12px !important;
    padding: 14px 16px !important;
    justify-content: flex-start !important;
  }

  /* --- 6. fixed pixel widths ------------------------------------------- */
  /* A marquee is deliberately wider than the screen and clipped by its parent —
     capping it to 100% stops it scrolling. */
  [style*="width:"]:not(img):not(svg):not([style*="width:max-content"]) { max-width: 100% !important; }

  /* --- 7. text that refuses to break ------------------------------------ */
  [style*="white-space:nowrap"] { white-space: normal !important; }

  /* --- 8. tame desktop-scale type --------------------------------------- */
  /* Headline sizes were picked for a wide column; at 375px they wrap into a
     column of single words. clamp() keeps the design's intent while fitting. */
  h1 { font-size: clamp(1.75rem, 8vw, 2.4rem) !important; line-height: 1.15 !important; }
  h2 { font-size: clamp(1.35rem, 6vw, 1.9rem) !important; line-height: 1.2 !important; }

  /* --- 9. dropdown menus ------------------------------------------------ */
  /* These open on :hover only — the flatten dropped the runtime that handled
     clicks — so on a touch device they never open. They stay hidden
     (opacity:0 / pointer-events:none) and are only pinned here so their 300px
     desktop width can't push the layout sideways.
     Expanding them into the flow was tried and rejected: it buried the page
     content under several screens of links. It isn't needed either, because
     every dropdown destination is also linked from the hub page its trigger
     points at (/about-us/, /ad-on-workforce/), so a tap still reaches
     everything — just one level deeper.
     A proper tap-to-open menu needs a few lines of JS; noted as follow-up. */
  .nav-menu {
    left: 0 !important;
    right: auto !important;
    width: auto !important;
    max-width: 100vw !important;
  }

  /* Opened by assets/js/mobile-nav.js on first tap. Rendered in normal flow
     rather than as an overlay so it can't run off the right edge, and so the
     rest of the header stays reachable while it's open. */
  .nav-prog.nav-open .nav-menu {
    position: static !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    padding-top: 4px !important;
    /* The page transitions opacity and transform (.18s). Those two were the
       only properties in this block that failed to take effect — cancelling the
       transition makes the state change apply immediately, which is what's
       wanted for a tap-to-open menu anyway. */
    transition: none !important;
  }

  /* --- 10. tap targets --------------------------------------------------- */
  /* Nav and footer links render at 17-19px tall, below the 24px WCAG 2.2
     minimum and well below a comfortable thumb target. Prose links are
     deliberately excluded — enlarging a link inside a sentence breaks the line
     box and is explicitly exempt from the target-size requirement. */
  header a[href], footer a[href], .nav-menu a[href],
  button, [role="button"], input[type="submit"] {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }
  p a[href], li a[href], h1 a[href], h2 a[href], h3 a[href] {
    min-height: 0 !important;
    display: inline !important;
  }

  /* --- 11. horizontal padding so text is not flush to the bezel --------- */
  body.reference main { padding-left: 1rem !important; padding-right: 1rem !important; }

  /* --- 12. header specifics ------------------------------------------- */
  /* A 1px-wide vertical rule separating logo from nav. Once the row wraps it
     becomes a stray line floating under the logo. */
  .aog-m-pill span[style*="width:1px"] { display: none !important; }

  /* 22px gaps between wrapped rows pushed the header to 203px tall. */
  .aog-m-pill { gap: 10px !important; }
  .aog-m-pill > div[style*="display:flex"] { gap: 12px !important; }
}