/* Mobile Header Spacing Fixes */
/* This file ensures proper spacing for all pages with the fixed header */

/* Global body padding to account for fixed header */
body {
  padding-top: 120px !important;
}

/* Mobile-specific body padding */
@media (max-width: 768px) {
  body {
    padding-top: 100px !important;
  }
}

/* Ensure all main content areas have proper spacing */
main, .main-content, .page-content {
  padding-top: 0 !important;
  min-height: calc(100vh - 120px) !important;
}

/* Hero sections need extra top spacing */
.hero-section, 
.fluid-hero-modern,
section:first-of-type,
.hero {
  padding-top: 2rem !important;
  margin-top: 0 !important;
}

/* Specific page fixes */
.tiny-baby-page,
.contact-page,
.support-page,
.newsletter-page,
.about-page,
.training-page,
.donations-page {
  padding-top: 0 !important;
}

/* Ensure forms and content are visible */
form, .form-container, .content-area {
  margin-top: 1rem !important;
  padding-top: 0 !important;
}

/* Fix for specific sections that might be hidden */
.section:first-of-type {
  padding-top: 2rem !important;
}

/* Mobile navigation improvements */
@media (max-width: 768px) {
  .navbar {
    padding: 0.5rem 0 !important;
    min-height: auto !important;
  }
  
  .navbar-brand {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }
  
  .navbar-brand .main-title {
    font-size: 1rem !important;
    line-height: 1.1 !important;
  }
  
  .navbar-brand .tagline {
    font-size: 0.5rem !important;
    line-height: 1.1 !important;
    display: none !important; /* Hide tagline on mobile to save space */
  }
  
  .navbar-logo {
    width: 60px !important; /* Much smaller logo */
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
  }
  
  /* Make navbar more compact */
  .navbar .container {
    padding: 0 1rem !important;
  }
  
  /* Reduce overall header height */
  .navbar {
    height: auto !important;
    max-height: 70px !important;
  }
  
  /* Ensure content starts immediately below header */
  body {
    padding-top: 70px !important; /* Reduced from 100px */
  }
  
  /* Mobile menu positioning and sizing */
  @media (max-width: 768px) {
    .navbar-collapse, .collapse {
      position: absolute !important;
      top: 100% !important;
      left: 0 !important;
      right: 0 !important;
      background: rgba(0, 0, 0, 0.95) !important;
      border-radius: 0 0 6px 6px !important; /* Reduced from 8px */
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important; /* Smaller shadow */
      max-height: 125px !important; /* Reduced by 50% from 250px */
      overflow-y: auto !important;
      z-index: 1000 !important;
    }
    
    .navbar-nav {
      padding: 0.25rem !important; /* Reduced by 50% from 0.5rem */
      margin: 0 !important;
    }
    
    .navbar-nav .nav-link {
      padding: 0.2rem 0.25rem !important; /* Reduced by 50% from 0.4rem 0.5rem */
      font-size: 0.75rem !important; /* Smaller font */
      border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
      color: white !important;
    }
    
    .navbar-nav .nav-link:last-child {
      border-bottom: none !important;
    }
    
    .navbar-nav .btn {
      margin: 0.25rem 0 !important; /* Reduced by 50% from 0.5rem */
      width: 100% !important;
    }
  }
}

/* Ensure content is not hidden behind header */
.container, .page-container {
  padding-top: 0 !important;
}

/* Fix for any existing padding-top conflicts */
*[style*="padding-top"] {
  padding-top: 0 !important;
}

  /* Ensure proper z-index for all content */
  .content, .page-content, main {
    position: relative !important;
    z-index: 1 !important;
  }
  
  /* Mobile menu optimizations */
  @media (max-width: 768px) {
    #mobileMenu, .mobile-menu {
      max-height: 125px !important; /* Reduced by 50% from 250px */
      overflow-y: auto !important;
      padding: 0.25rem !important; /* Reduced by 50% from 0.5rem */
      background: rgba(0, 0, 0, 0.95) !important;
      border-radius: 6px !important; /* Slightly smaller radius */
      margin: 0.25rem !important; /* Reduced by 50% from 0.5rem */
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important; /* Smaller shadow */
      display: none !important; /* Hidden by default */
    }
    
    /* When not hidden, show it */
    #mobileMenu:not(.hidden), .mobile-menu:not(.hidden) {
      display: block !important;
    }
    
    #mobileMenu .nav-link, .mobile-menu .nav-link {
      padding: 0.2rem 0.25rem !important; /* Reduced by 50% from 0.4rem 0.5rem */
      font-size: 0.75rem !important; /* Smaller font */
      border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    #mobileMenu .nav-link:last-child, .mobile-menu .nav-link:last-child {
      border-bottom: none !important;
    }
    
    /* Style the mobile navigation list */
    .mobile-nav {
      list-style: none !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    
    .mobile-nav li {
      margin: 0 !important;
      padding: 0 !important;
    }
    
    .mobile-nav .nav-link,
    .mobile-nav .btn {
      display: block !important;
      width: 100% !important;
      text-align: left !important;
      color: white !important;
      text-decoration: none !important;
    }
    
    /* Make mobile menu more compact */
    .mobile-menu-container {
      position: absolute !important;
      top: 100% !important; /* Position below navbar */
      left: 0 !important;
      right: 0 !important;
      z-index: 1000 !important;
      background: transparent !important;
    }
    
    /* Ensure mobile menu doesn't block content */
    .mobile-menu-overlay {
      background: rgba(0, 0, 0, 0.5) !important;
      backdrop-filter: blur(5px) !important;
    }
  }

/* ===== SCROLL-BASED HEADER HIDING ===== */
/* Only apply on mobile devices */
@media (max-width: 768px) {
  .navbar {
    transition: transform 0.3s ease-in-out !important;
    transform: translateY(0) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
  }
  
  /* Hide header when scrolling up */
  .navbar.header-hidden {
    transform: translateY(-100%) !important;
  }
  
  /* Ensure smooth transitions */
  .navbar * {
    transition: all 0.3s ease-in-out !important;
  }
  
  /* Adjust body padding when header is hidden */
  body.header-hidden {
    padding-top: 0 !important;
  }
  
  /* Show header when scrolling down */
  .navbar.header-visible {
    transform: translateY(0) !important;
  }
  
  /* Additional mobile optimizations */
  .navbar-brand .logo-text {
    flex-direction: column !important;
    gap: 0.1rem !important;
  }
  
  /* Ensure mobile menu button is properly sized */
  .mobile-toggle {
    padding: 0.5rem !important;
    font-size: 1.2rem !important;
  }
  
  /* ===== FLOATING NAVIGATION ARROWS ===== */
  .floating-nav-arrows {
    position: fixed !important;
    right: 1rem !important;
    bottom: 2rem !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    opacity: 0 !important;
    transform: translateX(100px) !important;
    transition: all 0.3s ease-in-out !important;
  }
  
  .floating-nav-arrows.visible {
    opacity: 1 !important;
    transform: translateX(0) !important;
  }
  
  .nav-arrow {
    width: 3rem !important;
    height: 3rem !important;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(0, 0, 0, 0.8) !important;
    color: white !important;
    font-size: 1.2rem !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
  }
  
  .nav-arrow:hover {
    background: rgba(0, 0, 0, 0.9) !important;
    transform: scale(1.1) !important;
  }
  
  .nav-arrow.active {
    background: rgba(79, 70, 229, 0.9) !important;
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4) !important;
  }
  
  .nav-arrow:not(.active) {
    opacity: 0.7 !important;
  }
  
  /* Specific arrow colors */
  .back-arrow {
    background: rgba(239, 68, 68, 0.9) !important;
  }
  
  .back-arrow:hover {
    background: rgba(239, 68, 68, 1) !important;
  }
  
  .up-arrow {
    background: rgba(34, 197, 94, 0.9) !important;
  }
  
  .up-arrow:hover {
    background: rgba(34, 197, 94, 1) !important;
  }
  
  .down-arrow {
    background: rgba(59, 130, 246, 0.9) !important;
  }
  
  .down-arrow:hover {
    background: rgba(59, 130, 246, 1) !important;
  }
}