/* Site-wide mobile corrections. Loaded on every page, unlike the hackathon
   stylesheets which are scoped to the microsite. */

@media (max-width: 767px) {
  /* JetElements buttons ship with white-space: nowrap, so long labels such as
     "Speaker Registration 2026" render 646px wide and force the whole document
     to scroll sideways. */
  .jkit-button-wrapper,
  .jeg-elementor-kit .jkit-button-wrapper {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-align: center;
  }

  .jkit-button,
  .jeg-elementor-kit.jkit-button {
    max-width: 100% !important;
  }

  /* These widgets carry desktop negative horizontal margins (up to -83px) that
     push them past the viewport edge on a phone and force sideways scrolling.
     Only widgets measured as overflowing are listed; smaller intentional
     offsets elsewhere are left alone. */
  .elementor-element-2966bc64,
  .elementor-element-1997fe92,
  .elementor-element-2966bc64 > .elementor-widget-container,
  .elementor-element-1997fe92 > .elementor-widget-container,
  .elementor-element-5eb0f5cc > .elementor-widget-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .elementor-element-5eb0f5cc .elementor-image-gallery {
    max-width: 100% !important;
  }

  img,
  iframe,
  embed,
  object {
    max-width: 100%;
  }

  iframe {
    max-width: 100% !important;
  }

  .jkit-hamburger-menu,
  .jkit-hamburger-panel,
  [aria-label="open-menu"] {
    min-width: 44px;
    min-height: 44px;
  }

  /* Homepage hero is a 26MB desktop MP4 with play-on-mobile enabled. A still
     from the same film replaces it on phones; JS in wp_head strips the <video>
     so the file is not downloaded. */
  .elementor-element-4143c889 {
    background-image: url("hero-poster-20260918/mosque-expo-hero-poster-20260918-1280.jpg") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  .elementor-element-4143c889::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(7, 10, 18, 0.42);
    pointer-events: none;
    z-index: 0;
  }

  .elementor-element-4143c889 > .e-con-inner,
  .elementor-element-4143c889 > .elementor-container {
    position: relative;
    z-index: 1;
  }

  .elementor-element-4143c889 .elementor-background-video-container {
    display: none !important;
  }

  /* Hackathon microsite: 9–10px labels and 17px breadcrumb taps. */
  .mhh-small-label,
  .mhh-directory-meta,
  .mhh-brief-overline,
  .mhh-track-row__description > span,
  .mhh-brief-card dd span,
  .mhh-challenge-code,
  .mhh-event-update .mhh-kicker,
  .mhh-online .mhh-event-facts dd,
  .mhh-brief-sidebar .mhh-kicker,
  .mhh-build-board__label {
    font-size: 12px !important;
  }

  .mhh-track-row__brand,
  .mhh-online .mhh-hero__days span {
    font-size: 11px !important;
  }

  .mhh-brief-breadcrumb {
    font-size: 13px !important;
    gap: 10px !important;
  }

  .mhh-brief-breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .mhh a.mhh-brief-download {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 14px !important;
  }

  .mhh-online .mhh-hero__days li {
    font-size: 12px !important;
  }
}

@media (max-width: 1024px) {
  /* The off-canvas drawer's identity panel is measured beyond the viewport
     while the drawer is closed; keep it inside its own container. */
  #masthead .jkit-menu-wrapper .jkit-nav-site-title {
    max-width: 100%;
    min-width: 0;
  }

  /* Elementor pins the nav widget to position: relative, which collapses the
     opened drawer to a 12px sliver on a phone. The ID selector is needed to
     outrank that rule. Applies to every page, not just the microsite. */
  #masthead .jeg-elementor-kit.jkit-nav-menu .jkit-menu-wrapper {
    position: fixed !important;
    top: 0 !important;
    left: -110% !important;
    right: auto !important;
    width: min(360px, calc(100vw - 24px)) !important;
    max-width: none !important;
    height: 100dvh !important;
    justify-content: flex-end !important;
    transition: none !important;
  }

  #masthead .jeg-elementor-kit.jkit-nav-menu .jkit-menu-wrapper.active {
    left: 0 !important;
  }

  /* The drawer lives in a header widget stacked below the logo widget, so the
     page logo paints on top of the open drawer and you see it twice. Raising
     the nav widget above the logo widget fixes the paint order; the drawer's
     own z-index cannot, because it is trapped in the parent stacking context. */
  #masthead .elementor-element-1d7ee312 {
    z-index: 10 !important;
  }

  #masthead .jeg-elementor-kit.jkit-nav-menu .jkit-menu-wrapper {
    z-index: 10010 !important;
  }
}