/* Spanish Header Optimization - Fixes for longer menu text */

/* Reduce spacing and font size for better fit on Spanish pages */
:root {
  --menu-gap-spanish: 1rem;
  --menu-link-padding-spanish: 0.4rem 0.8rem;
  --button-padding-spanish: 0.6rem 1.2rem;
}

/* Desktop optimizations for Spanish navigation */
@media (min-width: 769px) {
  /* Reduce gap between menu items */
  .header__navigation .menu__body {
    gap: var(--menu-gap-spanish);
  }
  
  /* Slightly reduce menu link font size and padding */
  .menu__link {
    font-size: 0.95rem;
    padding: var(--menu-link-padding-spanish);
    white-space: nowrap;
  }
  
  /* Optimize action buttons */
  .actions-header__button {
    padding: var(--button-padding-spanish);
    font-size: 0.9rem;
  }
  
  /* Reduce gap in actions header */
  .actions-header {
    gap: 0.4rem;
  }
}

/* Medium screen adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  .header__navigation .menu__body {
    gap: 0.8rem;
  }
  
  .menu__link {
    font-size: 0.9rem;
    padding: 0.3rem 0.6rem;
  }
  
  .actions-header__button {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
  }
}

/* Small desktop/large tablet adjustments */
@media (min-width: 769px) and (max-width: 900px) {
  .header__navigation .menu__body {
    gap: 0.6rem;
  }
  
  .menu__link {
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
  }
  
  .actions-header__button {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
  }
  
  /* Make action buttons stack if needed */
  .actions-header {
    flex-direction: column;
    gap: 0.3rem;
  }
}

/* Very tight screens - allow wrapping or scrolling */
@media (min-width: 769px) and (max-width: 820px) {
  .header__navigation {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .header__navigation::-webkit-scrollbar {
    display: none;
  }
  
  .menu__body {
    flex-wrap: nowrap;
    min-width: max-content;
  }
}

/* Enhanced mobile menu for Spanish */
@media (max-width: 768px) {
  .menu__link {
    font-size: 1.15rem;
    padding: 0.6rem 1rem;
  }
  
  .actions-header__button {
    font-size: 1rem;
    padding: 0.8rem 1.5rem;
    margin: 0.5rem 0;
  }
}

/* Language toggle optimization */
.language-toggle {
  flex-shrink: 0;
  margin-right: 0.5rem;
}

.language-btn {
  font-size: 0.9rem;
  padding: 0.2rem 0.4rem;
}

/* Header container flexibility */
.header__container {
  padding: 0 0.5rem;
}

@media (min-width: 769px) and (max-width: 1200px) {
  .header__container {
    max-width: 100%;
    padding: 0 1rem;
  }
}