/* Mobile Header and Layout Fixes */

/* Ensure fixed header doesn't overlap content */
@media (max-width: 767px) {
  /* Fix body and html */
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    width: 100% !important;
  }

  /* Fixed header with consistent height */
  header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 60px !important; /* Fixed height */
    z-index: 1000 !important;
    background: rgba(0, 0, 0, 0.95) !important;
    backdrop-filter: blur(10px) !important;
  }

  /* Main content padding to avoid header */
  body.homepage {
    padding-top: 60px !important; /* Match header height */
  }

  /* Hero section adjustments */
  #hero {
    margin-top: 0 !important;
    padding-top: 0 !important; /* Remove extra padding */
    min-height: calc(100vh - 60px) !important;
  }

  /* Remove any conflicting padding from wrapper divs */
  #hero > div:first-child {
    padding-top: 0 !important;
  }

  /* Ensure cards are properly sized */
  #hero .grid > div {
    margin-bottom: 0.75rem;
  }

  /* Fix floating navigation position */
  .mobile-nav-container {
    position: fixed !important;
    bottom: 1rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 999 !important;
    max-width: 90vw !important;
  }

  /* Ensure sections don't overlap */
  .story-section {
    position: relative !important;
    overflow: hidden !important;
  }

  /* Mobile menu fixes */
  #mobile-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 2000 !important;
  }

  #mobile-menu > div:last-child {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2001 !important;
  }
}

/* Desktop header behavior */
@media (min-width: 768px) {
  body.homepage {
    padding-top: 0 !important;
  }
  
  header {
    height: auto !important;
  }
}