/* ========================================
   MOBILE SCROLLBAR FIX - REMOVE ALL EXTRA SCROLLBARS
   Only applies to mobile devices (max-width: 767px)
   Ensures ONLY html element scrolls
   ======================================== */

@media (max-width: 767px) {
  /* ========================================
     ROOT ELEMENTS - ONLY HTML SCROLLS
     ======================================== */
  html {
    overflow-x: hidden !important;
    overflow-y: auto !important; /* ONLY html scrolls */
    height: 100% !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  body {
    overflow-x: hidden !important;
    overflow-y: visible !important; /* Body does NOT scroll */
    height: auto !important;
    min-height: 100vh !important;
    width: 100% !important;
    max-width: 100vw !important;
    position: relative !important;
  }

  /* ========================================
     MAIN LAYOUT CONTAINERS - NO SCROLLBARS
     ======================================== */
  #__next,
  #root,
  .App,
  main,
  .main-content,
  .page-content,
  .page-template,
  .main-content-gradient,
  .unified-gradient-wrapper,
  .home,
  .container,
  .container-fluid {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* ========================================
     HEADER - NO SCROLLBARS
     ======================================== */
  header,
  .header,
  .header-surface,
  .header-main,
  .header-container,
  .header-content,
  .logo-section,
  .logo-link,
  .logo-image {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Mobile menu can scroll when open */
  .nav {
    overflow-x: hidden !important;
  }

  .nav.nav-open {
    overflow-y: auto !important; /* Menu can scroll */
    overflow-x: hidden !important;
  }

  /* ========================================
     HERO SECTIONS - NO SCROLLBARS
     ======================================== */
  .hero,
  .home-hero-compact,
  .hero-cards-section,
  section.hero-cards-section,
  .hero-overlay,
  .hero-content {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  /* ========================================
     CONTENT SECTIONS - NO SCROLLBARS
     ======================================== */
  section,
  .section,
  .content-section,
  .services-section,
  .about-section {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  /* ========================================
     CARDS AND GRIDS - NO SCROLLBARS
     ======================================== */
  .card,
  .core-service-card,
  .hero-card,
  .service-card,
  .grid,
  .services-grid,
  .core-services__grid,
  .hero-cards-grid {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  /* ========================================
     PREFOOTER - NO SCROLLBARS
     ======================================== */
  .uwg-prefooter,
  .uwg-prefooter__container,
  .uwg-prefooter__col,
  .pre-footer-section {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Prefooter form elements */
  .pre-footer-form,
  .pre-footer-form .form-group,
  .contact-info,
  .company-info,
  .contact-details,
  .contact-item,
  .blog-posts,
  .blog-post,
  .blog-content,
  .company-section,
  .company-features {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  /* ========================================
     FOOTER - NO SCROLLBARS
     ======================================== */
  footer,
  .footer,
  .page-footer,
  .footer-container,
  .page-primary-footer,
  .region-primary-footer,
  .seo-footer,
  .seo-footer__grid,
  .seo-footer__brand,
  .seo-footer__group,
  .seo-footer__list,
  .seo-footer__cta,
  .seo-footer__bottom {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  /* ========================================
     FORMS - NO SCROLLBARS (except textarea)
     ======================================== */
  form,
  .form,
  .form-group,
  .form-row,
  input,
  select {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Textarea can scroll internally */
  textarea {
    overflow-x: hidden !important;
    overflow-y: auto !important; /* Textarea can scroll */
    resize: vertical !important;
  }

  /* ========================================
     NAVIGATION - NO SCROLLBARS (except menu)
     ======================================== */
  nav:not(.nav-open),
  .nav-list,
  .nav-item,
  .nav-link-container,
  .nav-link {
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  /* Dropdown menus */
  .dropdown-menu,
  .dropdown-content,
  .dropdown-list {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  /* ========================================
     IMAGES AND MEDIA - NO SCROLLBARS
     ======================================== */
  img,
  picture,
  video,
  .image,
  .thumbnail,
  .blog-thumbnail,
  .company-image {
    overflow: visible !important;
  }

  /* ========================================
     TEXT ELEMENTS - NO SCROLLBARS
     ======================================== */
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  div,
  article,
  aside {
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  /* ========================================
     BUTTONS AND LINKS - NO SCROLLBARS
     ======================================== */
  button,
  .btn,
  a,
  .link {
    overflow: visible !important;
  }

  /* ========================================
     SOCIAL LINKS - NO SCROLLBARS
     ======================================== */
  .social-links,
  .social-link {
    overflow: visible !important;
  }

  /* ========================================
     ALLOW SCROLLING ONLY FOR SPECIFIC UI ELEMENTS
     ======================================== */
  /* Only these specific elements can scroll internally */
  select,
  textarea,
  iframe,
  [role="dialog"],
  [role="menu"]:not(.nav),
  .review-modal,
  .review-modal-content,
  .blog-toc:not(.is-collapsed) .blog-toc__list,
  .lightbox-details {
    /* These can have internal scrolling */
  }

  /* ========================================
     PREVENT NESTED SCROLLBARS IN ALL CHILDREN
     ======================================== */
  * {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE and Edge */
  }

  *::-webkit-scrollbar {
    display: none !important; /* Chrome, Safari, Opera */
  }

  /* Exception: Allow scrollbar for html and textarea */
  html::-webkit-scrollbar,
  textarea::-webkit-scrollbar,
  .nav.nav-open::-webkit-scrollbar {
    display: block !important;
  }

  html {
    scrollbar-width: thin !important; /* Firefox */
    -ms-overflow-style: scrollbar !important; /* IE and Edge */
  }

  textarea {
    scrollbar-width: thin !important;
    -ms-overflow-style: scrollbar !important;
  }

  .nav.nav-open {
    scrollbar-width: thin !important;
    -ms-overflow-style: scrollbar !important;
  }
}