/* =======================================
   AL6ABE3 Premium Nav – focus on menu
   ======================================= */

:root{
  --al6-bg:#070a0d;
  --al6-bg2:#04060a;
  --al6-text:#eaf2f6;
  --al6-muted:rgba(234,242,246,.72);
  --al6-cyan:#00e5ff;
  --al6-cyan-soft:rgba(0,229,255,.18);
  --al6-stroke:rgba(255,255,255,.12);
}

/* Sticky glassy header */
header.wp-block-template-part,
.wp-site-blocks > header.wp-block-template-part{
  position: sticky !important;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  background:
    radial-gradient(520px 220px at 0 0, rgba(0,229,255,.20), transparent 65%),
    rgba(4,6,10,.86) !important;
  border-bottom: 1px solid var(--al6-stroke);
}

/* Layout inside header: logo + nav */
header.wp-block-template-part > .wp-block-group{
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

/* Site title */
header.wp-block-template-part .wp-block-site-title{
  font-size: 1.05rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--al6-muted);
}

/* Base nav layout */
header.wp-block-template-part .wp-block-navigation{
  font-size: .95rem;
}

header.wp-block-template-part .wp-block-navigation__container{
  display: flex;
  align-items: center;
  gap: 1.35rem;
}

/* Links – pill buttons */
header.wp-block-template-part .wp-block-navigation__container > li > a{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border-radius: 999px;
  color: var(--al6-text);
  text-decoration: none;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .78rem;
  font-weight: 500;
  transition:
    color .16s ease-out,
    background-color .16s ease-out,
    box-shadow .18s ease-out,
    transform .18s ease-out;
}

/* Cyan glow underline (hidden by default) */
header.wp-block-template-part .wp-block-navigation__container > li > a::after{
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(0,229,255,0),
    rgba(0,229,255,.75),
    rgba(0,229,255,0)
  );
  opacity: 0;
  transform: scaleX(.5);
  transform-origin: center;
  transition:
    opacity .18s ease-out,
    transform .18s ease-out;
}

/* Hover state */
header.wp-block-template-part .wp-block-navigation__container > li > a:hover{
  color: var(--al6-cyan);
  background: rgba(255,255,255,.04);
  box-shadow:
    0 0 0 1px rgba(0,229,255,.36),
    0 0 26px rgba(0,229,255,.32);
  transform: translateY(-1px);
}

header.wp-block-template-part .wp-block-navigation__container > li > a:hover::after{
  opacity: 1;
  transform: scaleX(1);
}

/* Active/current menu item */
header.wp-block-template-part .wp-block-navigation-item__current-menu-item > a,
header.wp-block-template-part .current-menu-item > a{
  color: var(--al6-cyan);
  background: rgba(255,255,255,.06);
  box-shadow:
    0 0 0 1px rgba(0,229,255,.55),
    0 0 30px rgba(0,229,255,.45);
}

header.wp-block-template-part .wp-block-navigation-item__current-menu-item > a::after,
header.wp-block-template-part .current-menu-item > a::after{
  opacity: 1;
  transform: scaleX(1);
}

/* Make last item feel like CTA (e.g. Designer / Cart) */
header.wp-block-template-part .wp-block-navigation__container > li:last-child > a{
  background:
    radial-gradient(120% 220% at 0 0, rgba(0,229,255,.35), rgba(0,229,255,.10));
  color: var(--al6-text);
  box-shadow:
    0 0 0 1px rgba(0,229,255,.35),
    0 12px 26px rgba(0,0,0,.65);
}

header.wp-block-template-part .wp-block-navigation__container > li:last-child > a::after{
  display: none;
}

/* Responsive tweaks */
@media (max-width: 782px){
  header.wp-block-template-part > .wp-block-group{
    padding-inline: 14px;
  }

  header.wp-block-template-part .wp-block-navigation__container{
    gap: .35rem;
  }

  /* When nav is open in mobile, keep items stacked nicely */
  header.wp-block-template-part
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container{
    align-items: flex-start;
    padding-block: 10px 14px 16px;
  }

  header.wp-block-template-part .wp-block-navigation__container > li > a{
    width: 100%;
    justify-content: flex-start;
    padding-inline: 10px 14px;
  }
}