// ========================================
// Modern Header Component Styles
// Contemporary e-commerce design with glassmorphism
// ========================================

// ==================
// MODERN VARIABLES
// ==================
$header-height: 70px;
$header-promo-height: 45px;
$header-mobile-height: 65px;

// Modern color palette
$primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
$accent-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
$glass-bg: rgba(255, 255, 255, 0.95);
$glass-border: rgba(255, 255, 255, 0.2);
$backdrop-blur: blur(20px);

// Z-index organization
$z-index-base: 100; // Cambiado de 500 a 100 para evitar conflictos con Drupal admin menu
$z-index-header: $z-index-base + 10;         // 110
$z-index-header-promo: $z-index-base + 5;    // 105
$z-index-header-nav: $z-index-base + 15;     // 115
$z-index-mobile-menu: $z-index-base + 25;    // 125
$z-index-search-overlay: $z-index-base + 50; // 150

// Modern spacing
$container-padding: clamp(1rem, 5vw, 2rem);
$element-gap: clamp(0.75rem, 2vw, 1.5rem);

// ==================
// PROMOTIONAL BAR - Modern Style
// ==================
.header-promo-bar {
  background: $primary-gradient;
  color: white;
  font-size: 0.9rem;
  line-height: $header-promo-height;
  text-align: center;
  position: relative;
  z-index: $z-index-header-promo;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    animation: shimmer 3s infinite;
  }

  .promo-content {
    padding: 0 $container-padding;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
  }
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

// ==================
// MAIN HEADER - Glassmorphism Design
// ==================
.site-header {
  background: $glass-bg;
  backdrop-filter: $backdrop-blur;
  -webkit-backdrop-filter: $backdrop-blur;
  border: 1px solid $glass-border;
  border-top: none;
  position: sticky;
  top: 0;
  z-index: $z-index-header;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 4px 32px rgba(0,0,0,0.1),
    0 2px 8px rgba(0,0,0,0.05);

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
      transparent,
      rgba(255,255,255,0.8) 20%,
      rgba(255,255,255,0.8) 80%,
      transparent
    );
  }

  // Scroll effect
  &.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow:
      0 8px 40px rgba(0,0,0,0.15),
      0 4px 12px rgba(0,0,0,0.1);
  }

  .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 $container-padding;
  }

  .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: $header-height;
    position: relative;

    @media (max-width: 768px) {
      height: $header-mobile-height;
    }
  }
}

// ==================
// MODERN IMPORTS
// ==================
@import 'elements/header-elements';
@import 'navigation/navigation';
@import 'overlays/header-overlays';
