/* ============================================================
   aws_deploy-only overrides
   ------------------------------------------------------------
   This file exists ONLY on the aws_deploy branch and is never touched by
   Emergent (it only ever edits frontend/src/**). It's loaded via a single
   <link> tag added to frontend/public/index.html — that link tag is the
   ONLY line in a develop-owned file that aws_deploy needs, which is what
   keeps `git merge develop` into aws_deploy conflict-free going forward.
   Add any future AWS-only CSS overrides here rather than editing
   frontend/src/index.css or frontend/src/App.css directly.
   ============================================================ */

/* ============================================================
   Mobile Safari performance fix
   ------------------------------------------------------------
   Same fix as hubspot_modules/input.css on the hubspot-deploy branch.

   Root cause: a `position: fixed` header with `backdrop-filter: blur()`
   (the sitewide Navbar) forces Safari/WebKit to recompute that blur on
   every scroll frame for a layer that's always in the viewport. Several
   pages also stack 2-3 large CSS-blurred decorative "glow" orbs
   (blur-[100px] through blur-[150px]) on top of that.

   Fix: on small screens, drop the backdrop-blur on the fixed navbar
   (its existing bg-white/85 / bg-black/50 stays legible without it)
   and shrink every decorative blur radius to something cheaper to
   paint. Desktop is untouched.
   ============================================================ */
@media (max-width: 768px) {
  header.backdrop-blur-xl,
  header.backdrop-blur-md,
  header.backdrop-blur-sm {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background-color: rgba(255, 255, 255, 0.96) !important;
  }
  header.backdrop-blur-xl.bg-black\/50,
  header.backdrop-blur-md.bg-black\/50 {
    background-color: rgba(0, 0, 0, 0.85) !important;
  }

  .blur-\[100px\],
  .blur-\[120px\],
  .blur-\[130px\],
  .blur-\[140px\],
  .blur-\[150px\] {
    filter: blur(36px) !important;
  }
}