@import '../../../sass/variables';

// ==================
// MAPAS Y VARIABLES
// ==================
$bp: (
  mobile: 768px,
  desktop: 769px
);

$colors: (
  main: #667eea,
  secondary: #764ba2,
  text: #374151,
  light-bg: rgba(255, 255, 255, .95),
  light-border: rgba(255, 255, 255, .2)
);

$grad-main: linear-gradient(135deg, var(--starman-primary-color, map-get($colors, main)), var(--starman-primary-hover, map-get($colors, secondary)));

// ==================
// KEYFRAMES
// ==================
@keyframes navShimmer { 0% { left: -100%; } 100% { left: 100%; } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px);} to { opacity: 1; transform: translateY(0);} }
@keyframes expandWidth { from { width: 0%; opacity: 0; } to { width: 60%; opacity: 1; } }

// ==================
// PLACEHOLDERS
// ==================
%menu-list {
  list-style: none; margin: 0; padding: 1.5rem; display: flex; flex-direction: column; gap: .25rem;
  @media (min-width: map-get($bp, desktop)) { flex-direction: row; align-items: center; height: 65px; padding: 0; gap: .5rem; }
}

%menu-item { position: relative; @media (min-width: map-get($bp, desktop)) { height: 65px; display: flex; align-items: center; } }

%menu-link {
  display: flex; align-items: center; padding: .875rem 1.25rem; color: map-get($colors, text); font-weight: 600; font-size: .95rem;
  text-decoration: none; border-radius: 12px; position: relative; overflow: hidden;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  &::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(102,126,234,.1), rgba(118,75,162,.1)); opacity: 0; transition: opacity .3s ease; }

  @media (min-width: map-get($bp, desktop)) {
    padding: 0 1.75rem; border-radius: 8px; color: white; font-weight: 700; height: 65px; text-shadow: 0 1px 2px rgba(0,0,0,.1);
  }

  &:hover, &.active {
    color: var(--starman-main-color, map-get($colors, main));
    background: rgba(102,126,234,.08); transform: translateY(-1px);
    &::before { opacity: 1; }
    @media (min-width: map-get($bp, desktop)) {
      background: rgba(255,255,255,.15) !important; color: white; transform: translateY(-2px);
      &::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
        width: 60%; height: 3px; border-radius: 2px;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
        animation: expandWidth .3s ease-out;
      }
    }
  }
}

// ==================
// MAIN NAVIGATION
// ==================
.main-navigation {

  @media (min-width: map-get($bp, desktop)) {
    position: static; box-shadow: 0 4px 20px rgba(102,126,234,.2), inset 0 1px 0 rgba(255,255,255,.1);
  }

  @media (max-width: map-get($bp, mobile)) {
    display: none !important; position: absolute; top: 100%; left: 1rem; right: 1rem;
    background: map-get($colors, light-bg) !important; backdrop-filter: blur(20px);
    border: 1px solid map-get($colors, light-border); border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.1);
    z-index: $z-index-mobile-menu; margin-top: 8px; opacity: 0;
    transform: translateY(-10px) scale(.95);
    transition: all .3s cubic-bezier(.4,0,.2,1);
  }

  &.show { @media (max-width: map-get($bp, mobile)) { display: block !important; opacity: 1; transform: translateY(0) scale(1); animation: slideDown .4s cubic-bezier(.4,0,.2,1); } }

  &.collapse.navbar-collapse {
    @media (max-width: map-get($bp, mobile)) { display: none !important; &.show { display: block !important; } }
    @media (min-width: map-get($bp, desktop)) { display: block !important; height: auto !important; }
  }

  .container { @media (min-width: map-get($bp, desktop)) { display: flex !important; align-items: center; min-height: 65px; padding: 0 $container-padding; } }

  ul, .navbar-nav, .main-menu-list { @extend %menu-list; }
  li, .nav-item, .main-menu-item { @extend %menu-item; }
  a, .nav-link, .main-menu-link { @extend %menu-link; }

  .dropdown-menu {
    @media (max-width: map-get($bp, mobile)) {
      margin-top: .75rem; margin-left: 1.25rem; padding-left: 1.25rem;
      border-left: 2px solid rgba(102,126,234,.3); border-radius: 8px; background: rgba(102,126,234,.05);
    }
    @media (min-width: map-get($bp, desktop)) {
      position: absolute; top: calc(100% + 8px); left: 0; min-width: 280px;
      background: map-get($colors, light-bg); backdrop-filter: blur(20px);
      border: 1px solid map-get($colors, light-border); border-radius: 16px;
      box-shadow: 0 20px 40px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.1);
      opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.95);
      transition: all .4s cubic-bezier(.4,0,.2,1); padding: 1rem 0; overflow: hidden;
      &::before { content: ''; position: absolute; top: -8px; left: 2rem; width: 16px; height: 16px;
        background: map-get($colors, light-bg); border: 1px solid map-get($colors, light-border);
        border-bottom: none; border-right: none; transform: rotate(45deg); backdrop-filter: blur(20px);
      }
      .nav-item:hover &, .main-menu-item:hover & { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
      a { color: map-get($colors, text) !important; padding: .75rem 1.5rem !important; font-weight: 500 !important; border-radius: 8px !important;
        margin: 0 .5rem !important;
        &:hover { background: rgba(102,126,234,.1) !important; color: map-get($colors, main) !important; transform: translateX(4px) !important; }
      }
    }
  }
}

// ==================
// OVERRIDES
// ==================
.site-header.modern .main-navigation.collapse.navbar-collapse,
nav.main-navigation.collapse.navbar-collapse,
header .main-navigation.collapse {
  @media (max-width: map-get($bp, mobile)) { display: none !important; &.show { display: block !important; } }
  @media (min-width: map-get($bp, desktop)) { display: block !important; background: $grad-main !important; }
}

.navbar-collapse { @media (max-width: map-get($bp, mobile)) { &:not(.show) { display: none !important; } } }
