/* ==========================================================================
   UPSIDE — mobile header (<= 767px only)
   Edge-to-edge sticky bar: burger flush left, logo flush right,
   full-screen menu overlay. Tablet and desktop are untouched.
   ========================================================================== */
@media (max-width: 767px) {

  /* ---- the bar --------------------------------------------------------- */
  header.elementor-location-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 4px 16px rgba(0, 0, 0, .05);
  }

  header.elementor-location-header > .e-con {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 16px !important;
    min-height: 64px;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px;
  }

  /* The desktop-nav container is empty on mobile (its only child is
     .elementor-hidden-mobile) but still occupies the full row, which forced
     the logo and burger to wrap onto a second line. */
  header.elementor-location-header #menu.e-child {
    display: none !important;
  }

  /* ---- logo: hugs the right edge (first child in RTL) ------------------- */
  header.elementor-location-header .elementor-widget-image {
    width: auto !important;
    flex: 0 0 auto;
  }

  header.elementor-location-header .elementor-widget-image figure,
  header.elementor-location-header .elementor-widget-image a {
    display: block;
    line-height: 0;
    margin: 0;
  }

  header.elementor-location-header .elementor-widget-image img {
    display: block;
    height: 40px;
    width: auto;
    max-width: none;
  }

  /* ---- burger: hugs the left edge, no grey box ------------------------- */
  header.elementor-location-header .elementor-widget-nav-menu {
    width: auto !important;
    flex: 0 0 auto;
    /* static so the dropdown below anchors to the sticky header, not to
       this widget — this is what makes the overlay full-bleed. */
    position: static !important;
  }

  header.elementor-location-header .elementor-menu-toggle {
    background: transparent !important;
    border: 0 !important;
    padding: 8px !important;
    margin: 0 !important;
    border-radius: 8px;
  }

  header.elementor-location-header .elementor-menu-toggle svg {
    width: 28px;
    height: 28px;
    fill: #33373D;
  }

  /* ---- the open menu: full-screen overlay ------------------------------ */
  /* Anchored to the sticky header with left/right rather than width:100%,
     because on a fixed element width:100% resolves against the viewport
     INCLUDING the scrollbar and overflows. */
  header.elementor-location-header .elementor-nav-menu--dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    /* WP Rocket's Used CSS pass renders the page with the menu CLOSED, so it
       drops BOTH of Elementor's open-state rules: the one lifting max-height
       and the one restoring transform: scaleY(1). The menu then stays
       permanently collapsed and flattened. So own the open/closed state here
       outright — this file is excluded from that pass and cannot be stripped.
       Driven off aria-expanded, which Elementor's JS toggles reliably; the
       dropdown precedes the toggle in the DOM, hence :has() on the widget
       rather than a sibling combinator. */
    transform: none !important;
    max-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    background: #fff !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: none !important;
    border: 0 !important;
  }

  /* open */
  header.elementor-location-header
    .elementor-widget-nav-menu:has(.elementor-menu-toggle[aria-expanded="true"])
    .elementor-nav-menu--dropdown {
    max-height: none !important;
    height: calc(100vh - 64px) !important;
    height: calc(100dvh - 64px) !important;
    padding: 8px 0 40px !important;
  }

  header.elementor-location-header .elementor-nav-menu--dropdown .elementor-nav-menu {
    width: 100%;
  }

  header.elementor-location-header .elementor-nav-menu--dropdown .elementor-item {
    display: flex;
    justify-content: flex-start !important;
    text-align: right !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    padding: 20px 24px !important;
    color: #33373D !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
  }

  header.elementor-location-header .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
    color: #375EFB !important;
    background: transparent !important;
  }

  header.elementor-location-header .elementor-nav-menu--dropdown li:last-child .elementor-item {
    border-bottom: 0;
  }
}

/* ==========================================================================
   Site-wide repair — NOT mobile-only, hence outside the media query above.

   hello-elementor prints .page-header > h1.entry-title on every page, and the
   site hid it in CSS because Elementor supplies the real heading. That hiding
   rule was lost when WP Rocket's Used CSS set was regenerated, so a raw
   "Home Page" title started showing above the hero on desktop and mobile
   alike. It lives here because this file is excluded from the Used CSS pass
   and therefore cannot be stripped again.
   ========================================================================== */
body.elementor-page .page-header,
body.elementor-page .page-header .entry-title {
  display: none !important;
}