/* =====================================================================
   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.
   ===================================================================== */

@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. */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* --- 3. let flex rows wrap instead of overflowing --------------------- */
  [style*="display:flex"]:not([style*="flex-direction:column"]) {
    flex-wrap: wrap !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. decorative elements pushed off-canvas ------------------------- */
  /* Hero compositions hang circles off the sides with negative offsets
     (left:-102px, right:-98px). On a phone they land on top of the text.
     Dropdown menus use a small negative offset too, so those are excluded. */
  [style*="position:absolute"][style*="left:-"]:not(.nav-menu),
  [style*="position:absolute"][style*="right:-"]:not(.nav-menu) {
    display: none !important;
  }

  /* A centred hero circle can stay, but must fit the viewport. */
  [style*="position:absolute"][style*="border-radius:50%"] {
    max-width: 78vw !important;
    max-height: 78vw !important;
  }

  /* --- 6. fixed pixel widths ------------------------------------------- */
  [style*="width:"]:not(img):not(svg) { 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; }
}