/* ========================================
   SINGLE SCROLLBAR FIX - LOADS LAST, OVERRIDES ALL
   This file MUST load after all other CSS
   ======================================== */

/* CRITICAL: ONLY html scrolls - this is the single scrollbar */
html {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: 100% !important;
  /* Ensure no padding/margin that could affect fixed positioning */
  padding: 0 !important;
  margin: 0 !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
}

body {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  height: auto !important;
  min-height: 100vh !important;
  padding: 0 !important;
  margin: 0 !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
}

/* CRITICAL: Prevent main layout containers from scrolling */
/* These are the root containers that should never have scrollbars */
html body #__next,
html body #root,
html body .App,
html body main,
html body .page-template,
html body .main-content-gradient,
html body .unified-gradient-wrapper,
html body .home {
  overflow-y: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* CRITICAL: Prevent hero sections from creating scrollbars */
html body .hero,
html body .home-hero-compact,
html body .hero-cards-section,
html body section.hero-cards-section {
  overflow-y: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* CRITICAL: Prevent footer sections from creating scrollbars */
html body .footer,
html body footer,
html body .uwg-prefooter,
html body .pre-footer-section {
  overflow-y: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* CRITICAL: Prevent estimate form area from creating scrollbars */
html body .estimate-form,
html body .estimate-section,
html body .hero-overlay {
  overflow-y: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* CRITICAL: Prevent navigation area from creating scrollbars (but allow dropdowns) */
html body header,
html body .header,
html body nav,
html body .nav {
  overflow-y: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* Exception: Allow specific UI elements to scroll internally */
select,
textarea,
iframe,
[role="dialog"],
[role="menu"],
.mobile-menu,
.review-modal,
.review-modal-content,
.blog-toc:not(.is-collapsed) .blog-toc__list,
.lightbox-details {
  overflow-y: auto !important;
}

/* Maintain aspect ratio for service card images to avoid Next.js warnings */
.core-service-card__image {
  aspect-ratio: 670 / 536 !important;
  height: auto !important;
}
.core-service-card__img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover;
}

/* Footer/prefooter must never create nested scrollbars */
html body .uwg-prefooter,
html body .uwg-prefooter__container,
html body .uwg-prefooter__col,
html body .uwg-prefooter *,
html body .footer,
html body .footer .page-footer,
html body .footer .page-footer * {
  overflow-y: visible !important;
  overflow-x: hidden !important;
  max-height: none !important;
}

/* Fix sticky estimate button positioning relative to scrollbar */
.sticky-estimate-button {
  position: fixed !important;
  right: 0 !important;
  /* Position at viewport edge - flush against scrollbar */
  /* Remove any margins or padding on the right that could create a gap */
  margin: 0 !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
  padding-left: 0.75rem !important;
  /* Ensure box-sizing doesn't add extra space */
  box-sizing: border-box !important;
  /* Remove any border on the right */
  border-right: none !important;
  /* Make right edge flush - no border radius on right */
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 9999 !important;
  /* Ensure it stays fixed during scroll - critical for static positioning */
  will-change: transform !important;
  /* Ensure it's not affected by any parent transforms or positioning */
  isolation: isolate !important;
  /* Force it to the absolute edge - account for any body/html padding */
  inset-inline-end: 0 !important;
  /* Ensure no parent padding affects it */
  left: auto !important;
  width: auto !important;
  max-width: none !important;
  /* Prevent any scroll-related movement */
  position: fixed !important;
}

/* ========================================
   Mobile Menu Revamp (mobile only)
   ======================================== */
@media (max-width: 768px) {
  /* When menu is open, kill ancestor transforms that can clip fixed overlay */
  html.menu-open .header,
  body.menu-open .header {
    transform: none !important;
    -webkit-transform: none !important;
  }
  html.menu-open,
  body.menu-open { overflow: hidden !important; }

  .nav { display: none !important; }
  .nav.nav-open { display: flex !important; }

  .nav.nav-open {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(2, 6, 23, 0.98) !important;
    padding: 12px 14px 20px !important;
    z-index: 10001 !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    animation: uwgSlideIn .25s ease-out;
    pointer-events: auto !important;
  }

  @keyframes uwgSlideIn {
    from { transform: translateX(8%); opacity: .8; }
    to   { transform: translateX(0); opacity: 1; }
  }

  .mobile-menu-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 2px 10px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    margin-bottom: 10px !important;
    background: transparent !important;
  }
  .mobile-menu-title { color: #fff !important; font-size: 1.125rem !important; margin: 0 !important; }

  .mobile-menu-close {
    width: 40px !important;
    height: 40px !important;
    border: 0 !important;
    background: rgba(255,255,255,0.06) !important;
    color: #fff !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
  }
  .mobile-menu-close::before { content: '✕'; font-size: 1.25rem; line-height: 1; }

  .nav-list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 6px !important; }
  .nav-item { width: 100% !important; }
  .nav-item .nav-link {
    display: flex !important; align-items: center !important; gap: 8px !important;
    padding: 12px 10px !important; border-radius: 10px !important;
    background: rgba(255,255,255,0.06) !important; color: #fff !important; text-decoration: none !important;
  }

  .dropdown-toggle { margin-left: auto !important; background: transparent !important; border: 0 !important; color: #fff !important; font-size: 0 !important; }
  .dropdown-toggle::before { content: '▾'; font-size: 1rem; }

  .dropdown-menu { display: none !important; }
  .dropdown-menu.dropdown-active { display: block !important; }
  .dropdown-content { padding: 4px 8px 8px !important; }
  .dropdown-header h3 { color: #e5e7eb !important; font-size: .95rem !important; margin: 4px 0 6px !important; }
  .dropdown-list { list-style: none !important; margin: 0 !important; padding: 0 !important; }
  .dropdown-link { display: block !important; padding: 8px !important; color: #e2e8f0 !important; border-radius: 8px !important; text-decoration: none !important; }
  .dropdown-link:hover { background: rgba(255,255,255,0.08) !important; color: #ffffff !important; }

  .header-actions.mobile-actions { display: grid !important; gap: 8px !important; margin-top: 12px !important; }
  .header-actions.mobile-actions .btn { width: 100% !important; padding: 12px 16px !important; border-radius: 10px !important; background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.15) !important; color: #fff !important; }
  .header-actions.mobile-actions .btn:hover { background: rgba(255,255,255,0.14) !important; }

  .mobile-menu-toggle { width: 40px !important; height: 34px !important; padding: 6px !important; border: 0 !important; background: transparent !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; }
  .mobile-menu-toggle span { display: block !important; height: 2px !important; background: #fff !important; border-radius: 2px !important; transition: transform .2s ease, opacity .2s ease !important; }
  .mobile-menu-toggle.active span:nth-child(1) { transform: translateY(6px) rotate(45deg) !important; }
  .mobile-menu-toggle.active span:nth-child(2) { opacity: 0 !important; }
  .mobile-menu-toggle.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg) !important; }
}