/* Mobile performance overrides: preserve the design while reducing paint work. */
@media (max-width: 1024px) {
  html {
    scroll-behavior: auto;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100% !important;
    overscroll-behavior-y: auto;
    touch-action: pan-y;
  }

  body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    position: static !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
    touch-action: pan-y;
  }

  body > main {
    position: relative !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    touch-action: pan-y;
  }

  .siteHeader {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: #fff !important;
  }

  .heroGlow,
  .orbit,
  .heroWave {
    display: none !important;
  }

  .bigDrop,
  .floatingCard,
  .videoPlayer,
  .featuredEventPoster,
  .calendarEventPoster,
  .calendarAside,
  .eventGrid article,
  .donationCard,
  .quickAccessCard {
    box-shadow: none !important;
  }

  .calendarAside {
    position: static !important;
  }

  .videoPlayer,
  .videoPlayer iframe {
    touch-action: pan-y;
  }

  #manifesto,
  .featuredEventSection,
  .featuredEventGrid,
  .featuredEventPoster,
  .featuredEventCopy,
  .eventsSection,
  .eventGrid,
  .donationOptions,
  .donationCard,
  .donationContent,
  .calendarPage,
  .calendarLayout,
  .calendarMain,
  .calendarAside {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    contain: none !important;
    touch-action: pan-y;
  }

  #manifesto {
    scroll-margin-top: 84px;
  }

  .featuredEventPoster {
    transform: none !important;
  }

  .welcomeGate {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100svh !important;
    min-height: 0 !important;
    padding: 10px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    align-items: center !important;
  }

  .welcomeGate::before {
    inset: 7px !important;
  }

  .welcomeGatePanel {
    width: min(560px, 100%) !important;
    margin: auto !important;
    padding: clamp(20px, 4svh, 32px) 20px !important;
    box-shadow: 0 14px 38px rgba(58, 29, 32, 0.16) !important;
  }

  .welcomeGatePanel > img {
    width: clamp(145px, 38vw, 190px) !important;
    margin-bottom: clamp(12px, 2svh, 18px) !important;
  }

  .welcomeGatePanel > p {
    margin-bottom: 8px !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
  }

  .welcomeGatePanel > h1 {
    margin: 8px 0 12px !important;
    font-size: clamp(31px, 8vw, 42px) !important;
    line-height: 1 !important;
  }

  .welcomeGatePanel > span {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  .welcomeGateButton {
    min-width: 0 !important;
    min-height: 48px !important;
    margin-top: 17px !important;
    padding: 13px 20px !important;
  }

  .welcomeGatePanel > small {
    margin-top: 12px !important;
    font-size: 8px !important;
  }

  .welcomeGateSignature,
  .welcomeGateGlowTwo {
    display: none !important;
  }
}

@media (max-width: 420px) and (max-height: 700px) {
  .welcomeGate {
    align-items: start !important;
  }

  .welcomeGatePanel {
    padding: 16px 18px !important;
  }

  .welcomeGatePanel > img {
    width: 135px !important;
    margin-bottom: 9px !important;
  }

  .welcomeGatePanel > h1 {
    margin: 6px 0 9px !important;
    font-size: 29px !important;
  }

  .welcomeGatePanel > span {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  .welcomeGateButton {
    min-height: 44px !important;
    margin-top: 12px !important;
  }

  .welcomeGatePanel > small {
    margin-top: 8px !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  .button,
  .quickAccessCard,
  .civilHomeLinks > a,
  .donationCard summary > b,
  .menuToggle span {
    transition: none !important;
  }
}