/* /assets/css/header.css */

[hidden] { display: none !important; }

.site-topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  padding: 18px 20px;
  pointer-events: none; /* background stays interactive */
}

.site-topbar .inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: auto; /* header clickable */
}

.brand{
  font-family: inherit;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
  color: #fff;
  opacity: .9;
}

.topbar-actions{
  display: flex;
  align-items: center;
  gap: 10px;
}

.menu-wrap{
  position: relative;
}

/* ---------- Buttons ---------- */
.icon-btn{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,0); /* no solid fill */
  color: rgba(255,255,255,.92);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .15s ease, border-color .2s ease, filter .2s ease;
  overflow: hidden;

  position: relative;
  isolation: isolate; /* neon behind icon */
}

.icon-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.28);
}

/* ---------- Animated neon (ALWAYS ON) ---------- */
@keyframes neonShift {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

/* Fill layer (inside border), behind content */
.icon-btn::before,
.menu-item::before,
.menu-link::before{
  content: "";
  position: absolute;
  inset: 1px; /* neatly inside the border */
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(255,0,255,.98) 0%,
    rgba(255,0,255,.98) 30%,
    rgba(0,255,255,.98) 70%,
    rgba(0,255,255,.98) 100%
  );
  background-size: 300% 300%;
  opacity: 1; /* ALWAYS visible */
  animation: neonShift 4.2s linear infinite; /* slower */
  z-index: -1;
  pointer-events: none;
  filter: saturate(1.25) contrast(1.05);
}

/* Soft halo glow (still per element) */
.icon-btn::after,
.menu-item::after,
.menu-link::after{
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(255,0,255,0) 0%,
    rgba(255,0,255,.70) 35%,
    rgba(0,255,255,.70) 65%,
    rgba(0,255,255,0) 100%
  );
  background-size: 300% 300%;
  opacity: .85; /* ALWAYS visible */
  animation: neonShift 4.2s linear infinite;
  z-index: -2;
  pointer-events: none;
  filter: blur(14px);
}

/* Optional: slightly stronger on hover */
.icon-btn:hover,
.menu-item:hover,
.menu-link:hover{
  filter: brightness(1.06);
}

/* ---------- Panels (NO outer border box) ---------- */
.menu-panel{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;

  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;

  min-width: 170px;
}

.menu-panel--wide{
  min-width: 230px;
}

/* ---------- Menu buttons (centered + title-like styling) ---------- */
.menu-item,
.menu-link{
  text-align: center;
  font-family: inherit;           /* uses your site font stack */
  font-weight: 700;               /* thicker */
  letter-spacing: .08em;
  text-transform: uppercase;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Items */
.menu-item{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.10); /* tiny contrast only */
  color: rgba(255,255,255,.94);
  cursor: pointer;

  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.menu-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.menu-link{
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.10);
  color: rgba(255,255,255,.94);
  text-decoration: none;

  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.menu-link:hover,
.menu-item:hover{
  border-color: rgba(255,255,255,.22);
}

/* ---------- Mobile: make drawers ~33% smaller ---------- */
@media (max-width: 768px){
  .site-topbar{ padding: 12px 12px; }

  .icon-btn{
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .menu-panel{
    top: calc(100% + 8px);
    min-width: 120px; /* 170 -> ~120 */
  }
  .menu-panel--wide{
    min-width: 154px; /* 230 -> ~154 */
  }

  .menu-list{ gap: 7px; }

  .menu-item,
  .menu-link{
    padding: 8px 10px; /* smaller tap targets but still usable */
    border-radius: 10px;
    letter-spacing: .07em;
    font-size: 12px;
  }
}

.brand{
  display: flex;
  align-items: center;
  font-size: 16px;
}

.brand-logo{
	/* Make logo actually visible (was microscopic) */
	height: 4em;
  width: auto;
  display: block;
  opacity: .9;
}

@media (max-width: 520px){
	.brand-logo{ height: 3.2em; }
}


/* Home icon button (replaces logo) */
.home-btn svg{
  display:block;
}