/* Global Header Spacing Fix - Fixes blank space issue across all pages */

/* Reset all excessive spacing */
* {
  margin-top: 0;
}

/* Standardize header behavior */
.site-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 12px; /* Leave space for scrollbar */
  z-index: 1000;
  height: 70px; /* Set explicit height */
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center; /* Center content vertically */
  padding: 0; /* Remove any default padding */
  box-sizing: border-box; /* Include padding/border in height */
  border: none; /* Remove any default border */
  margin: 0; /* Remove any default margin */
}

/* Ensure container inside header is properly positioned */
.site-header .container {
  width: 100%;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 20px; /* Horizontal padding only */
}

/* Fix header-flex alignment */
.site-header .header-flex {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0; /* Remove vertical padding that causes misalignment */
}

/* Dark mode header background */
body.dark-mode .site-header,
[data-theme="dark"] .site-header {
  background: rgba(26, 26, 26, 0.95);
}

/* Ensure logo is properly sized and centered */
.site-header .logo {
  display: flex;
  align-items: center;
  height: 100%;
}

.site-header .logo img {
  max-height: 50px; /* Ensure logo fits within header */
  height: auto;
  width: auto;
}

/* Center navigation items vertically */
.site-header .nav-list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  height: 100%;
}

.site-header .nav-item {
  display: flex;
  align-items: center;
  height: 100%;
}

.site-header .nav-item > a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 15px;
}

/* Mobile menu toggle positioning */
.site-header .mobile-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  padding: 0;
  margin: 0;
}

/* Modern navigation header fix */
.nav-modern {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 70px;
  background: white;
  display: flex;
  align-items: center;
}

/* Account for fixed header height - THIS IS THE KEY FIX */
body {
  padding-top: 40px !important; /* Reduced by 30px to move content up */
  margin-top: 0 !important;
}

/* For pages with nav-modern instead of site-header */
body:has(.nav-modern) {
  padding-top: 40px !important; /* Reduced by 30px */
}

/* Remove extra spacing from main content areas */
main, 
.dashboard-main, 
.main-content,
.content,
.page-content {
  margin-top: 0 !important;
  padding-top: 20px !important;
}

/* Hero sections should not have extra margin */
.hero-section,
.hero,
.hero-content {
  margin-top: 0 !important;
  padding-top: 40px !important;
}

/* Fix for sections immediately after header */
main > section:first-child,
.dashboard-main > section:first-child,
.content > section:first-child {
  margin-top: 0 !important;
}

/* Mobile menu fixes */
.mobile-menu:not(.active) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Ensure mobile menu doesn't push content */
.mobile-menu {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
}

/* Container fixes */
.container:first-child {
  margin-top: 0 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  body {
    padding-top: 30px !important; /* Reduced by 30px for mobile */
  }
  
  body:has(.nav-modern) {
    padding-top: 30px !important;
  }
  
  .hero-section,
  .hero {
    padding-top: 20px !important;
  }
  
  main,
  .dashboard-main,
  .main-content {
    padding-top: 10px !important;
  }
}

/* iOS specific fixes */
@supports (-webkit-touch-callout: none) {
  body {
    /* Use env() for iOS safe areas */
    padding-top: calc(120px + env(safe-area-inset-top)) !important;
  }
  
  .site-header,
  .nav-modern {
    padding-top: env(safe-area-inset-top);
  }
}

/* Specific page fixes */
.dashboard-page body {
  padding-top: 120px !important; /* Dashboard has larger header */
}

.login-page body,
.index-page body {
  padding-top: 80px !important; /* Landing pages have smaller header */
}

/* Debug helper - remove in production */
.debug-spacing {
  border: 2px solid red !important;
  background: rgba(255, 0, 0, 0.1) !important;
}