/* Responsive fixes specifically for layout issues */

/* Fix for header layout on smaller screens */
@media (max-width: 767.98px) {
  /* Optimize header on mobile */
  #header.header-controls {
    padding: 0.5rem;
    flex-direction: column !important;
    position: relative;
    z-index: 10; /* Ensure header is above hero */
  }
  
  /* Logo container */
  #header.header-controls > div:first-child {
    width: 100%;
    justify-content: center;
    margin-bottom: 0.5rem;
  }
  
  /* Theme language container */
  .theme-lang-container {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 11; /* Above header */
  }
  
  /* Header controls */
  #header.header-controls > div:nth-child(2) {
    width: 100%;
    margin-top: 1.5rem;
  }
  
  /* Tab content needs more top padding */
  .tab-content {
    padding-top: 1rem;
  }
  
  /* Make sure auth buttons are well-spaced */
  .auth-buttons {
    justify-content: center !important;
    width: 100%;
    margin-top: 0.5rem; 
  }
  
  /* Hero section needs proper z-index and positioning */
  .hero {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1 !important;
  }
  
  .hero-content {
    min-height: calc(100vh - 90px) !important;
    padding-top: 4rem !important;
  }
}

@media (max-width: 575.98px) {
  /* More compact on smaller screens */
  .logo img {
    height: 50px !important;
    margin: 0 !important;
  }
  
  .auth-buttons .btn {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
  }
  
  #mainTabs .nav-link {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
  }
  
  /* Hero section needs proper padding */
  .hero {
    padding-top: 120px !important;
  }
  
  .hero-content {
    min-height: calc(100vh - 120px) !important;
    padding-top: 2rem !important;
  }
}

@media (max-width: 420px) {
  /* Further reduce sizes */
  .logo img {
    height: 40px !important;
  }
  
  .theme-lang-container {
    transform: scale(0.85);
    transform-origin: right top;
  }
  
  #mainTabs .nav-link {
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
  }
  
  .auth-buttons .btn {
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem;
    min-width: 70px;
  }
  
  .hero {
    padding-top: 140px !important;
  }
  
  .hero-content {
    min-height: calc(100vh - 140px) !important;
  }
}

@media (max-width: 359.98px) {
  /* Tiniest screens */
  .logo img {
    height: 35px !important;
  }
  
  .theme-lang-container {
    transform: scale(0.8);
  }
  
  #mainTabs .nav-link {
    padding: 0.3rem 0.4rem;
    font-size: 0.75rem;
  }
  
  .auth-buttons .btn {
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem;
    min-width: 65px;
  }
  
  .hero {
    padding-top: 150px !important;
  }
  
  .hero-content {
    min-height: calc(100vh - 150px) !important;
  }
}

/* Fix for scrollable hero section on mobile */
@media (min-width: 768px) {
  .hero {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding-top: 60px !important;
    z-index: 1 !important;
  }
  
  .hero-content {
    min-height: calc(100vh - 60px) !important;
    padding-top: 6rem !important;
  }
  
  /* Ensure header is above hero */
  #header {
    position: relative;
    z-index: 10 !important;
  }
}

/* Fix for browsers that have very small viewport heights */
@media (max-height: 600px) {
  .hero {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }
  
  .hero-content {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}