/* Frosted glass nav on scroll */
.site-nav-section.elementor-sticky--effects .elementor-container {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.site-nav-section.elementor-sticky--effects {
  background-color: rgba(10, 10, 10, 0.85) !important;
  transition: background-color 0.3s ease;
}

/* Nav transparent by default */
.site-nav-section {
  background-color: transparent !important;
  transition: background-color 0.3s ease;
}

/* Nav scrolled fallback */
.site-nav-section.nav-scrolled {
  background-color: rgba(10, 10, 10, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Body link styling — red with underline */
.elementor-widget-text-editor a {
  color: #e82127;
  text-decoration: underline;
}
.elementor-widget-text-editor a:hover {
  color: #c0181d;
}

/* Product card hover effects */
.product-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.product-card img {
  transition: transform 0.3s ease;
}
.product-card:hover img {
  transform: scale(1.05);
}

/* Service card hover */
.service-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* Scroll indicator bounce */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}
.scroll-indicator {
  animation: bounce 2s infinite;
}

/* Space Grotesk global */
body, h1, h2, h3, h4, h5, h6, p, a, button, input, select, textarea {
  font-family: 'Space Grotesk', sans-serif;
}

/* =============================================================
   MOBILE RESPONSIVE FIXES
   Fixes: duplicate nav, oversized header, sticky filters,
   hero overlap, menu overlay, form inputs, footer z-index
   ============================================================= */

@media (max-width: 1024px) {

  /* --- Bug 1 & 2: Hide duplicate nav widget in Elementor sticky spacer --- */
  .elementor-sticky__spacer .elementor-widget-nav-menu {
    display: none !important;
  }
  .elementor-sticky__spacer {
    pointer-events: none !important;
  }

  /* --- Bug 1 & 2: Ensure toggle (hamburger/X) sits ABOVE the dropdown --- */
  .elementor-menu-toggle {
    position: relative !important;
    z-index: 10001 !important;
    align-self: flex-end !important;
  }

  /* --- Bug 3: Compact the fixed header from 212px to ~66px --- */
  .site-nav-section {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .site-nav-section > .e-con-inner,
  .site-nav-section > .elementor-element {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    gap: 0 !important;
  }
  .site-nav-section .elementor-widget-image img,
  .site-nav-section .elementor-widget-theme-site-logo img {
    max-height: 50px !important;
    width: auto !important;
  }

  /* --- Bug 5: Push page content below the fixed header on all pages --- */
  [data-elementor-type="wp-page"] > .e-con:first-child {
    padding-top: 80px !important;
  }

  /* --- Bug 6: Home page hero — remove excessive empty space --- */
  .elementor-element-347487d {
    min-height: auto !important;
    padding-top: 80px !important;
    padding-bottom: 20px !important;
  }

  /* --- Bug 8: Full-screen dark overlay when mobile menu is open --- */
  .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    min-height: 100vh !important;
    top: 66px !important;
    background-color: rgba(10, 10, 10, 0.98) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
    z-index: 10000 !important;
    padding-top: 10px !important;
    overflow-y: auto !important;
  }

  /* Menu item styling */
  .elementor-nav-menu--dropdown .elementor-item,
  .elementor-nav-menu--dropdown a.elementor-item {
    color: #ffffff !important;
    padding: 16px 24px !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    letter-spacing: 0.3px !important;
  }

  .elementor-nav-menu--dropdown .elementor-item:hover,
  .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
    color: #e82127 !important;
    background-color: rgba(232, 33, 39, 0.1) !important;
  }

  /* Align hamburger to the right */
  .elementor-widget-nav-menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
  }

  /* Hamburger icon color */
  .elementor-menu-toggle svg {
    fill: #ffffff !important;
  }

  /* --- Bug 12: Sticky filters below footer z-index --- */
  .product-tabs-nav {
    z-index: 50 !important;
  }
  footer,
  .elementor-location-footer,
  [data-elementor-type="footer"] {
    position: relative !important;
    z-index: 51 !important;
  }
}

/* --- Bug 4: Reduce sticky filter buttons size on phones --- */
@media (max-width: 767px) {
  .product-tabs-nav {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    top: 70px !important;
    gap: 6px !important;
  }
  .product-tabs-nav .elementor-element {
    margin-bottom: 0 !important;
  }

  /* --- Bug 10 & 11: Form fields full-width on mobile --- */
  .elementor-form .elementor-field {
    width: 100% !important;
    min-height: 48px !important;
  }
  .elementor-form .elementor-field-group {
    width: 100% !important;
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
}

/* --- Bug 4: Tablet sticky filter adjustments --- */
@media (min-width: 768px) and (max-width: 1024px) {
  .product-tabs-nav {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    top: 70px !important;
  }
}