/* =============================================
   Site-fix: Mobile responsiveness & layout fixes
   Injected into all static HTML pages via middleware
   ============================================= */

/* Prevent horizontal overflow on all devices */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

img {
  max-width: 100%;
  height: auto;
}

/* =============================================
   Header: show mobile header, hide desktop below 1200px
   The theme JS (deferred by WP Rocket) normally handles this,
   but we need it to work immediately on load.
   ============================================= */
@media screen and (max-width: 1200px) {
  #pxl-header-elementor .pxl-header-elementor-main {
    display: none !important;
  }
  #pxl-header-elementor #pxl-header-mobile {
    display: block !important;
  }
}

/* =============================================
   Hero section fix:
   - Remove negative margin that pulls content behind header
   - Use auto height on mobile instead of 100vh
   - Add padding-top so content clears the fixed header
   ============================================= */
@media screen and (max-width: 1200px) {
  /* Fix hero sections with negative top margins (pulls behind header) */
  .elementor-section-height-full {
    height: auto !important;
    min-height: 60vh;
  }
  .elementor-section-height-full > .elementor-container {
    height: auto !important;
  }

  /* Remove negative margins on top-level sections that hide content */
  .elementor-top-section[style*="margin-top"] {
    margin-top: 0 !important;
  }

  /* Give main content breathing room below the header */
  #pxl-main {
    padding-top: 0;
  }
}

@media screen and (max-width: 767px) {
  .elementor-section-height-full {
    min-height: 50vh;
    padding: 80px 15px 40px !important;
  }

  /* Ensure containers wrap on mobile */
  .elementor-section .elementor-container {
    flex-wrap: wrap;
  }

  .elementor-row {
    flex-wrap: wrap;
  }

  /* Stack 2- and 3-column layouts on phone */
  .elementor-column.elementor-col-50,
  .elementor-column.elementor-col-33,
  .elementor-column.elementor-col-25 {
    width: 100% !important;
  }
}

/* =============================================
   Mobile menu: slide-in panel + hamburger
   ============================================= */
#pxl-header-mobile .pxl-header-menu {
  background-color: #121c27;
  z-index: 10000;
}

#pxl-header-mobile .pxl-header-menu.active {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
}

#pxl-header-mobile .pxl-header-menu-backdrop.active {
  opacity: 1;
  visibility: visible;
}

/* Sub-menu expansion */
#pxl-header-mobile .pxl-header-nav .sub-menu {
  display: none;
  padding-left: 15px;
}

#pxl-header-mobile .pxl-header-nav .menu-item-has-children.open > .sub-menu {
  display: block;
}

#pxl-header-mobile .pxl-header-nav .menu-item-has-children > a::after {
  content: '\25BC';
  font-size: 10px;
  margin-left: 8px;
  display: inline-block;
  transition: transform 0.2s;
}

#pxl-header-mobile .pxl-header-nav .menu-item-has-children.open > a::after {
  transform: rotate(180deg);
}

/* Nav link styling */
#pxl-header-mobile .pxl-header-nav .pxl-menu-primary li a {
  display: block;
  padding: 10px 0;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#pxl-header-mobile .pxl-header-nav .pxl-menu-primary li a:hover {
  color: #fff;
}

/* Close button */
#pxl-header-mobile .pxl-menu-close {
  display: block !important;
  position: relative;
  width: 36px;
  height: 36px;
  cursor: pointer;
  margin-bottom: 20px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.12);
}

#pxl-header-mobile .pxl-menu-close::before,
#pxl-header-mobile .pxl-menu-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background-color: #fff;
}

#pxl-header-mobile .pxl-menu-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

#pxl-header-mobile .pxl-menu-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Hamburger icon */
.pxl-anchor-mobile-menu .pxl-anchor-divider {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  cursor: pointer;
}

.pxl-anchor-mobile-menu .pxl-icon-line {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #fff;
  transition: all 0.3s;
}