/**
 * Z-Index Scale for HAD Consultants Website
 * 
 * This file establishes a consistent z-index scale to prevent conflicts
 * and eliminate the need for extreme z-index values.
 * 
 * Scale:
 * 1-9: Base level elements
 * 10-99: Component level (cards, badges)
 * 100-999: Page level (sidebars, headers)
 * 1000-1099: Overlay level (dropdowns, tooltips)
 * 1100+: Modal level (modals, alerts)
 */

:root {
  /* Base level - Normal flow elements */
  --z-base: 1;
  --z-below: -1;
  
  /* Component level - Cards, badges, etc */
  --z-component: 10;
  --z-component-hover: 20;
  
  /* Page level - Headers, sidebars */
  --z-page-header: 100;
  --z-page-sidebar: 110;
  --z-page-footer: 90;
  
  /* Overlay level - Dropdowns, tooltips */
  --z-dropdown: 1030;
  --z-sticky: 1040;
  --z-fixed: 1050;
  --z-tooltip: 1060;
  
  /* Modal level - Highest priority */
  --z-modal-backdrop: 1070;
  --z-modal: 1080;
  --z-notification: 1090;
  --z-critical: 1100;
}

/* Apply scale to existing components */

/* Header and Navigation */
.vl-header-area5,
#vl-header-sticky {
  z-index: var(--z-sticky) !important;
}

/* Dropdown Menus */
.vl-main-menu .sub-menu,
.has-dropdown .sub-menu,
.dropdown-menu {
  z-index: var(--z-dropdown) !important;
}

/* Mobile Menu */
.vl-offcanvas {
  z-index: var(--z-modal) !important;
}

.vl-offcanvas-overlay {
  z-index: var(--z-modal-backdrop) !important;
}

/* Hero Section - Keep below header */
.hero5 {
  z-index: var(--z-base);
  position: relative;
}

/* Loader */
.loader-wrap {
  z-index: var(--z-critical) !important;
}

/* Modals (Bootstrap compatibility) */
.modal-backdrop {
  z-index: var(--z-modal-backdrop) !important;
}

.modal {
  z-index: var(--z-modal) !important;
}

/* Tooltips and Popovers */
.tooltip {
  z-index: var(--z-tooltip) !important;
}

.popover {
  z-index: var(--z-dropdown) !important;
}

/* Video Players and Overlays */
.video-play-button {
  z-index: var(--z-component);
}

/* Progress/Scroll to Top */
.progress-wrap {
  z-index: var(--z-sticky) !important;
}

/* Utility Classes */
.z-below { z-index: var(--z-below) !important; }
.z-base { z-index: var(--z-base) !important; }
.z-component { z-index: var(--z-component) !important; }
.z-dropdown { z-index: var(--z-dropdown) !important; }
.z-fixed { z-index: var(--z-fixed) !important; }
.z-modal { z-index: var(--z-modal) !important; }

/* Remove any extreme z-index values */
[style*="z-index: 9999"],
[style*="z-index: 10000"],
[style*="z-index: 100000"] {
  z-index: var(--z-modal) !important;
}