/**
 * iOS / mobile Safari compositor-safe overrides.
 * Desktop Chrome/Firefox unchanged — gated by touch + coarse pointer.
 */

@supports (-webkit-touch-callout: none) {
  @media (hover: none) and (pointer: coarse) {
    /* 1. Site header — no backdrop blur */
    .site-header {
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      background: rgb(252 252 250 / 0.96) !important;
    }

    body.has-image-hero .site-header--over-hero:not(.site-header--scrolled) {
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      background: rgb(8 10 18 / 0.84) !important;
    }

    body.has-image-hero .site-header--over-hero.site-header--scrolled .site-header,
    body.has-image-hero .site-header--over-hero.site-header--scrolled {
      background: rgb(252 252 250 / 0.96) !important;
    }

    /* 2. Method — replace large blur layers with gradients */
    .method__glow,
    .method__glow--center,
    .method__glow--sage,
    .method__haze {
      filter: none !important;
    }

    .method__glow--center {
      background: radial-gradient(
        circle,
        rgb(58 82 128 / 0.42) 0%,
        rgb(58 82 128 / 0.16) 42%,
        transparent 72%
      ) !important;
    }

    .method__glow--sage {
      background: radial-gradient(
        circle,
        rgb(123 134 118 / 0.24) 0%,
        rgb(123 134 118 / 0.08) 45%,
        transparent 72%
      ) !important;
    }

    .method__haze {
      background: radial-gradient(
        circle,
        rgb(246 244 239 / 0.12) 0%,
        rgb(246 244 239 / 0.04) 50%,
        transparent 72%
      ) !important;
    }

    /* 3. Results — keep bg/scrim, strip compositor-heavy filters */
    .results__bg,
    .results__scrim,
    .results::after,
    .results--has-bg::after {
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      filter: none !important;
      mix-blend-mode: normal !important;
    }

    /* 4. Footer atmosphere grain */
    .site-footer__atmosphere::after {
      mix-blend-mode: normal !important;
      opacity: 0.06 !important;
    }

    /* 5. Ask widget */
    .ask-widget__backdrop,
    .ask-widget__panel {
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      filter: none !important;
    }

    .ask-widget__backdrop {
      background: rgb(8 10 18 / 0.52) !important;
    }

    .ask-widget__panel {
      background: rgb(252 252 250 / 1) !important;
    }

    /* 6. Other homepage large layers */
    .try-it::after {
      filter: none !important;
      background: radial-gradient(
        circle,
        rgb(36 72 255 / 0.2) 0%,
        rgb(36 72 255 / 0.08) 45%,
        transparent 68%
      ) !important;
    }

    .try-it__stage {
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      background: rgb(255 255 255 / 0.97) !important;
    }
  }
}