/* ============================================================================
   wu-mobile.css — shared mobile layer for the single-file showroom demos.

   Replaces the old inline <style id="mobile-responsive-override"> block that
   was pasted into each site. That block tried to make a desktop-only React app
   responsive purely by substring-matching inline style attributes. Two of its
   rules did real damage:

     [style*="display: flex"][style*="gap"] { flex-wrap: wrap; }
     [style*="grid-template-columns"]       { grid-template-columns: 1fr !important; }

   Applied to a header bar with a FIXED height (e.g. height: 64), wrapping the
   row pushed its contents outside the 64px box, so the nav overprinted the
   logo, the utility bar and the hero beneath it. That is the overlap you see
   on Ironclad.

   This file keeps the parts that genuinely worked (type clamping, lifting
   desktop max-widths, compressing huge section padding, collapsing real
   content grids) but exempts anything tagged with a wu-* class, and gives the
   header a real mobile layout instead of leaving it to chance:

     wu-navrow      the header row (logo | links | actions)
     wu-navlinks    the row of page links  -> becomes a scrollable tab strip
     wu-navactions  phone + primary CTA
     wu-utilbar     the thin utility/emergency strip above or below the header

   Tag those four in the site's JSX and the rest follows. Nothing here depends
   on JS, so it cannot get out of sync with React's render.
   ========================================================================= */

/* Hard guards: no horizontal overflow */
html, body { max-width: 100vw; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }

@media (max-width: 960px) {

  /* ---- content: collapse real multi-column grids (never the header) ---- */
  [style*="grid-template-columns"]:not([class*="wu-"]) {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* ---- content: let wide flex rows wrap (never the header) ---- */
  [style*="display: flex"][style*="gap"]:not([class*="wu-"]) { flex-wrap: wrap; }

  /* A row that spreads its children with space-between has no gap to match on,
     so the rule above misses it — and it is guaranteed to collide as soon as
     the viewport is narrower than its contents (Crown's dateline ran three
     spans straight into each other). Wrap those too. */
  [style*="space-between"]:not([class*="wu-"]) { flex-wrap: wrap; }

  /* ---- …but never wrap a row the author deliberately kept on one line ----
     Some flex rows are MEANT to overflow horizontally. A ticker/marquee is
     animated with translateX and sized to max-content; a clipped status bar
     sets flex-wrap/white-space nowrap with overflow:hidden. Wrapping those
     turns one scrolling line into a stack of clipped rows — which is exactly
     what happened to Ironclad's and Meridian's service tickers, and what
     overrode Climacore's explicit flexWrap:'nowrap' top bar.
     Each selector below is the author explicitly saying "keep this on one
     line", so it must beat the two generic wrap rules above. */
  [style*="display: flex"][style*="animation"]:not([class*="wu-"]),
  [style*="display: flex"][style*="flex-wrap: nowrap"]:not([class*="wu-"]),
  [style*="display: flex"][style*="white-space: nowrap"]:not([class*="wu-"]),
  [style*="display: flex"][style*="max-content"]:not([class*="wu-"]),
  [style*="display: flex"][style*="overflow-x"]:not([class*="wu-"]) {
    flex-wrap: nowrap !important;
  }

  /* ---- lift desktop max-widths ---- */
  [style*="max-width: 1300px"], [style*="max-width: 1240px"], [style*="max-width: 1200px"],
  [style*="max-width: 1180px"], [style*="max-width: 1160px"], [style*="max-width: 1140px"],
  [style*="max-width: 1120px"], [style*="max-width: 1100px"], [style*="max-width: 1080px"],
  [style*="max-width: 1060px"], [style*="max-width: 1040px"], [style*="max-width: 1020px"],
  [style*="max-width: 1000px"], [style*="max-width: 980px"],  [style*="max-width: 960px"],
  [style*="max-width: 920px"],  [style*="max-width: 900px"],  [style*="max-width: 880px"],
  [style*="max-width: 860px"],  [style*="max-width: 840px"],  [style*="max-width: 820px"],
  [style*="max-width: 800px"],  [style*="max-width: 780px"],  [style*="max-width: 760px"],
  [style*="max-width: 740px"],  [style*="max-width: 720px"],  [style*="max-width: 700px"],
  [style*="max-width: 680px"],  [style*="max-width: 660px"],  [style*="max-width: 640px"],
  [style*="max-width: 620px"],  [style*="max-width: 600px"],  [style*="max-width: 580px"],
  [style*="max-width: 560px"],  [style*="max-width: 540px"],  [style*="max-width: 520px"],
  [style*="max-width: 500px"]
  { max-width: 100% !important; width: 100% !important; box-sizing: border-box; }

  /* ---- display type ----
     Deliberately NOT clamped here. Enumerating pixel values in attribute
     selectors is exactly what failed before (78px and 148px heroes were never
     on the list). wu-mobile.js reads each element's real size and scales it
     against the viewport instead. This is only the safety net so nothing can
     run off the right edge in the moment before that script sweeps. */
  h1, h2, [style*="font-size"] { overflow-wrap: break-word; }

  /* ---- compress section padding ---- */
  [style*="padding: 120px"], [style*="padding: 112px"], [style*="padding: 104px"],
  [style*="padding: 96px"],  [style*="padding: 88px"],  [style*="padding: 80px"],
  [style*="padding: 72px"],  [style*="padding: 64px"]
  { padding: 44px 20px !important; }

  [style*="padding: 96px 40px"], [style*="padding: 96px 32px"], [style*="padding: 96px 24px"],
  [style*="padding: 80px 40px"], [style*="padding: 80px 32px"], [style*="padding: 80px 24px"],
  [style*="padding: 72px 40px"], [style*="padding: 72px 32px"]
  { padding: 44px 20px !important; }

  [style*="padding: 16px 40px"], [style*="padding: 20px 40px"], [style*="padding: 24px 40px"],
  [style*="padding: 28px 40px"], [style*="padding: 32px 40px"], [style*="padding: 40px 40px"]
  { padding-left: 18px !important; padding-right: 18px !important; }
}

/* ===========================================================================
   HEADER — a real mobile layout.
   Logo stays top-left, phone + CTA sit top-right, and the page links become a
   horizontally scrollable tab strip on their own row. No hamburger needed for
   3-6 items, nothing hidden behind a tap, and no JS to keep in sync.
   ======================================================================== */
@media (max-width: 900px) {

  .wu-navrow {
    /* some headers are `display:grid` with 1fr auto 1fr — normalise to flex so
       one set of rules covers every site */
    display: flex !important;
    grid-template-columns: none !important;
    height: auto !important;
    min-height: 0 !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 10px 14px !important;
    gap: 10px !important;
  }

  /* logo/brand keeps its natural width and stays first */
  .wu-navbrand { flex: 0 1 auto !important; min-width: 0 !important; }

  /* some headers use an empty <div style="flex:1"/> to push the nav right;
     once the row wraps that spacer claims a whole line of its own */
  .wu-navspacer { display: none !important; }

  /* phone + CTA hug the right on the same row as the logo */
  .wu-navactions {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  /* links drop to their own full-width row and scroll sideways if long */
  .wu-navlinks {
    flex: 1 0 100% !important;
    order: 9 !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    /* NB: do NOT normalise `gap` here. Sites set their own — Ridgeback uses
       gap:0 for a bordered segmented control, Crown uses gap:30 between plain
       text links. Forcing either one collapses the other into "WorkCraftHouse". */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -14px !important;
    padding: 0 14px !important;
  }
  .wu-navlinks::-webkit-scrollbar { display: none; }
  .wu-navlinks > * { flex: 0 0 auto !important; white-space: nowrap !important; }

  /* utility strip: wrap cleanly, drop the desktop `margin-left:auto` push */
  .wu-utilbar {
    height: auto !important;
    min-height: 0 !important;
    flex-wrap: wrap !important;
    /* desktop bars often use space-between with 2-3 spans; once they wrap that
       leaves ragged gaps, so pin everything left */
    justify-content: flex-start !important;
    align-items: baseline !important;
    gap: 2px 12px !important;
    padding: 6px 14px !important;
    font-size: 10px !important;
    line-height: 1.6 !important;
    white-space: normal !important;
  }
  .wu-utilbar > * { margin-left: 0 !important; flex: 0 1 auto !important; }

  /* a utility strip laid out as a grid gets the same treatment */
  .wu-utilbar[style*="grid-template-columns"] {
    display: flex !important;
    grid-template-columns: none !important;
  }
}

@media (max-width: 600px) {
  [style*="padding: 120px"], [style*="padding: 112px"], [style*="padding: 104px"],
  [style*="padding: 96px"],  [style*="padding: 88px"],  [style*="padding: 80px"],
  [style*="padding: 72px"],  [style*="padding: 64px"]
  { padding: 32px 16px !important; }

  [style*="padding: 16px 40px"], [style*="padding: 20px 40px"], [style*="padding: 24px 40px"],
  [style*="padding: 28px 40px"], [style*="padding: 32px 40px"], [style*="padding: 40px 40px"]
  { padding-left: 14px !important; padding-right: 14px !important; }

  .wu-navrow { padding: 8px 12px !important; gap: 8px !important; }
  .wu-navlinks { margin: 0 -12px !important; padding: 0 12px !important; }
  .wu-utilbar { padding: 5px 12px !important; font-size: 9.5px !important; }
}