/* Header Button Alignment and Spacing Fixes */

/* Fix for space-x-4 class to ensure proper spacing on mobile */
@media (max-width: 768px) {
  /* Override the space-x-4 class in the header for better spacing */
  header .space-x-4 > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  header .space-x-4 {
    display: flex;
    align-items: center;
    gap: 0.5rem !important;
  }
  
  /* Ensure buttons don't shrink too much */
  header .space-x-4 button {
    flex-shrink: 0;
  }
  
  /* Fix for the menu toggle button */
  header .space-x-4 .md\:hidden {
    margin-left: 0.5rem !important;
  }
  
  /* Better alignment for the header content */
  header .container.mx-auto {
    justify-content: space-between !important;
  }
  
  /* Fix for the logo alignment */
  header .flex.items-center {
    display: flex !important;
    align-items: center !important;
  }
}

/* Extra small devices (phones, 576px and down) */
@media (max-width: 576px) {
  /* Further adjustments for small screens */
  header .space-x-4 {
    gap: 0.375rem !important;
  }
  
  /* Make sure buttons are big enough to tap */
  header button {
    min-width: 44px;
    min-height: 32px;
  }
}

/* Improve header for landscape mode on mobile */
@media (max-width: 768px) and (orientation: landscape) {
  header .container {
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
    min-height: 50px !important;
  }
  
  header .flex.items-center a img {
    max-height: 32px !important;
  }
}