/* mobile.css — responsive layer for the dc-runtime static site.
   All page styling is inline (React-serialized), so overrides target the
   inline `style` attribute and use !important. Loaded on every page. */

/* --- All-width fix (not mobile-specific) ---
   The desktop mega-menu triggers are <button>s. When the runtime opens a
   panel it sets the active trigger's inline color to lime and resets the
   others to "" — but a <button> doesn't inherit color, so an empty color
   falls back to its UA default (black), making the sibling triggers vanish.
   Give them their intended resting colour; the inline lime (no !important
   here) still wins for the active one. */
nav[data-mega-nav] [data-mega-trigger]{ color: #BCBFCC; }

@media (max-width: 1024px){
  html, body { overflow-x: hidden !important; }

  /* Collapse the desktop nav: hide its clusters + mega panels, keep the logo.
     mobile.js injects a hamburger + drawer as body children. */
  nav[data-mega-nav] > div { display: none !important; }

  /* Stack every multi-column grid into a single column. */
  [style*="grid-template-columns"]{ grid-template-columns: minmax(0,1fr) !important; }

  /* Section-header rows are flex: [heading][flex:1 hairline][kicker].
     Let them wrap and drop the stretched hairline so the kicker sits under
     the heading. Using wrap (not forced column) preserves centered heroes. */
  [style*="display: flex"]:has(> h1),
  [style*="display: flex"]:has(> h2),
  [style*="display: flex"]:has(> h3){ flex-wrap: wrap !important; }
  [style*="display: flex"]:has(> h1) > [style*="flex: 1"][style*="height: 1px"],
  [style*="display: flex"]:has(> h2) > [style*="flex: 1"][style*="height: 1px"],
  [style*="display: flex"]:has(> h3) > [style*="flex: 1"][style*="height: 1px"]{ display: none !important; }

  /* Tame oversized gaps so stacked content isn't miles apart. */
  [style*="gap: 40px"],[style*="gap: 44px"],[style*="gap: 48px"],
  [style*="gap: 56px"],[style*="gap: 64px"],[style*="gap: 72px"],
  [style*="gap: 80px"],[style*="gap: 96px"]{ gap: 24px !important; }

  /* Nothing wider than the screen (width cap only — no height:auto, which
     would blow up height-locked logos). */
  img, svg, video, canvas { max-width: 100% !important; }

  /* Marquees (testimonial / logo strips): freeze the JS animation and turn
     the strip into a contained horizontal swipe. mobile.js tags these. */
  [data-m-mq]{ transform: none !important; }
  [data-m-mqclip]{ max-width: 100% !important; overflow-x: auto !important;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  [data-m-mqclip]::-webkit-scrollbar{ display: none; }

  /* Type scale: shrink the large display/heading sizes. */
  [style*="font-size: 31px"]{ font-size: 30px !important; }
  [style*="font-size: 32px"]{ font-size: 31px !important; }
  [style*="font-size: 33px"]{ font-size: 31px !important; }
  [style*="font-size: 34px"]{ font-size: 32px !important; }
  [style*="font-size: 36px"]{ font-size: 33px !important; }
  [style*="font-size: 38px"]{ font-size: 33px !important; }
  [style*="font-size: 40px"]{ font-size: 34px !important; }
  [style*="font-size: 42px"]{ font-size: 35px !important; }
  [style*="font-size: 44px"]{ font-size: 36px !important; }
  [style*="font-size: 46px"]{ font-size: 37px !important; }
  [style*="font-size: 48px"]{ font-size: 38px !important; }
  [style*="font-size: 50px"]{ font-size: 38px !important; }
  [style*="font-size: 52px"]{ font-size: 39px !important; line-height: 1.05 !important; }
  [style*="font-size: 54px"]{ font-size: 40px !important; line-height: 1.05 !important; }
  [style*="font-size: 56px"]{ font-size: 41px !important; line-height: 1.05 !important; }
  [style*="font-size: 58px"]{ font-size: 42px !important; line-height: 1.05 !important; }
  [style*="font-size: 60px"]{ font-size: 43px !important; line-height: 1.05 !important; }
  [style*="font-size: 62px"]{ font-size: 43px !important; line-height: 1.05 !important; }
  [style*="font-size: 64px"]{ font-size: 44px !important; line-height: 1.05 !important; }
  [style*="font-size: 66px"]{ font-size: 45px !important; line-height: 1.05 !important; }
  [style*="font-size: 68px"]{ font-size: 46px !important; line-height: 1.05 !important; }
  [style*="font-size: 72px"]{ font-size: 48px !important; line-height: 1.05 !important; }
  [style*="font-size: 76px"]{ font-size: 48px !important; line-height: 1.05 !important; }
  [style*="font-size: 140px"]{ font-size: 60px !important; line-height: 1.05 !important; }
}

/* Phones: the design uses desktop section spacing everywhere (56px sides,
   ~90-100px vertical) which is far too generous on a phone — content gets
   squeezed to ~260px and sections float apart. Retune it. */
@media (max-width: 768px){
  /* Section horizontal padding 56px -> 22px (gives back ~68px of width). */
  [style*="px 56px"]{ padding-left: 22px !important; padding-right: 22px !important; }
  [style*="padding-left: 56px"]{ padding-left: 22px !important; }
  [style*="padding-right: 56px"]{ padding-right: 22px !important; }

  /* Big section vertical padding -> tighter, so sections don't float apart.
     Targets padding shorthands / longhands that start with a large top value. */
  [style*="padding: 72px"],[style*="padding: 80px"],[style*="padding: 84px"],
  [style*="padding: 88px"],[style*="padding: 90px"],[style*="padding: 92px"],
  [style*="padding: 96px"],[style*="padding: 100px"],[style*="padding: 104px"],
  [style*="padding: 110px"],[style*="padding: 120px"]{
    padding-top: 50px !important; padding-bottom: 50px !important;
  }
  [style*="padding-top: 72px"],[style*="padding-top: 80px"],[style*="padding-top: 88px"],
  [style*="padding-top: 90px"],[style*="padding-top: 96px"],[style*="padding-top: 100px"],
  [style*="padding-top: 110px"],[style*="padding-top: 120px"]{ padding-top: 50px !important; }
  [style*="padding-bottom: 72px"],[style*="padding-bottom: 80px"],[style*="padding-bottom: 88px"],
  [style*="padding-bottom: 90px"],[style*="padding-bottom: 96px"],[style*="padding-bottom: 100px"],
  [style*="padding-bottom: 110px"],[style*="padding-bottom: 120px"]{ padding-bottom: 50px !important; }

  /* Drop forced hero/section heights so there's no dead space up top. */
  [style*="min-height: 560px"],[style*="min-height: 600px"],[style*="min-height: 640px"],
  [style*="min-height: 680px"],[style*="min-height: 700px"],[style*="min-height: 720px"],
  [style*="min-height: 760px"],[style*="min-height: 80vh"],[style*="min-height: 85vh"],
  [style*="min-height: 90vh"],[style*="min-height: 100vh"],[style*="min-height:100vh"]{ min-height: 0 !important; }
}

/* Narrow phones: a little tighter still. */
@media (max-width: 400px){
  [style*="font-size: 76px"],[style*="font-size: 72px"],
  [style*="font-size: 68px"],[style*="font-size: 66px"]{ font-size: 42px !important; }
}