/* =========================================================
   AuditiePlacuta — CORE HEADER + MOBILE/TABLET NAV (NEON)
   ========================================================= */

/* ---- Theme & sizing tokens ---- */
:root{
    --ap-neon: rgba(22,241,211,.85);
    --ap-neon-glow: rgba(22,241,211,.28);
    --ap-text: #e6f1fb;
    --ap-bg: rgba(6,14,18,.92);

    --ap-hpad: 12px;      /* header horizontal padding */
    --ap-hdr-h: 76px;     /* header height desktop */
    --ap-logo-h: 56px;    /* logo img height desktop */
}

/* Tablet/Mobile tokens (same breakpoint everywhere) */
@media (max-width:1400px){
  :root{
    --ap-hpad: 12px;
    --ap-hdr-h: 68px;
    --ap-logo-h: 46px;
  }
}

/* =========================================================
   HEADER BASE — sticky, neon blur
   ========================================================= */
.gamfi-header-section,
.transparent-header{
  position: sticky;
  top: 0;
  z-index: 1060;
  background: var(--ap-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.menu-area .heaader-inner-area{
  display:flex;
  align-items:center;
  justify-content:space-between;  /* logo ↔ burger */
  min-height: var(--ap-hdr-h);
  padding: 8px var(--ap-hpad);
}

/* ---- Logo ---- */
.gamfi-header-section .logo img{
  height: var(--ap-logo-h);
  width: auto;
  object-fit: contain;
}

/* Hide desktop nav/greeting on tablet/mobile (desktop intact) */
@media (max-width:1400px){
  .header-menu,
  .user-menu-container{
    display:none !important;
  }
}

/* =========================================================
   NEON HAMBURGER (mobile + tablet)
   Flex item (no absolute), same height as the logo
   ========================================================= */

.ap-hamburger{ display:none; } /* hidden on desktop */

@media (max-width:1400px){
  .ap-hamburger{
    display:flex;                 /* visible */
    align-items:center;
    justify-content:center;
    margin-left:auto;             /* push to the right in the row */

    /* FIXED SIZE - SMALLER! */
    width:  20px !important;
    height: 20px !important;

    border-radius:16px;
    background: radial-gradient(120% 120% at 30% 20%,
                 rgba(22,241,211,.18), rgba(8,20,24,.72));
    border:1px solid rgba(22,241,211,.38);
    box-shadow:
      0 0 0 1px rgba(22,241,211,.10) inset,
      0 0 30px var(--ap-neon-glow),
      0 8px 28px rgba(0,0,0,.50);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    cursor:pointer;
  }
  .ap-hamburger:hover{ filter:brightness(1.06); box-shadow:0 0 34px rgba(22,241,211,.4); }
  .ap-hamburger:active{ transform:scale(.985); }
  .ap-hamburger:focus-visible{ outline:2px solid #16f1d3; outline-offset:2px; }

  /* bars (BIGGER + spaced a bit more) */
  .ap-hamburger .bars{
    position:relative;
    width: calc(var(--ap-logo-h) * .70);
    height: 5px;
    background: var(--ap-text);
    border-radius:2px;
    transition: background .18s ease;
  }
  .ap-hamburger .bars::before,
  .ap-hamburger .bars::after{
    content:"";
    position:absolute; left:0;
    width: calc(var(--ap-logo-h) * .70);
    height: 5px;
    background: var(--ap-text);
    border-radius:2px;
    transition: transform .22s ease, top .22s ease, opacity .22s ease, background .18s ease;
  }
  .ap-hamburger .bars::before{ top:-12px; }
  .ap-hamburger .bars::after { top: 12px; }

  /* “X” state (toggled by JS) */
  .ap-hamburger.is-open .bars{ background:transparent; }
  .ap-hamburger.is-open .bars::before{ top:0; transform:rotate(45deg);  background:#16f1d3; }
  .ap-hamburger.is-open .bars::after { top:0; transform:rotate(-45deg); background:#16f1d3; }

  /* subtle glow pulse while open (optional) */
  .ap-hamburger.glow{
    animation: apGlow 1.4s ease-in-out infinite;
  }
  @keyframes apGlow{
    0%,100%{ box-shadow: 0 0 26px var(--ap-neon-glow), 0 8px 26px rgba(0,0,0,.5); }
    50%    { box-shadow: 0 0 36px rgba(22,241,211,.45), 0 10px 28px rgba(0,0,0,.55); }
  }
}

/* =========================================================
   OFFCANVAS (drawer) — neon look
   ========================================================= */
#apMobileNav.offcanvas{
  background: rgba(6,14,18,.965);
  border-left:1px solid rgba(22,241,211,.22);
  box-shadow: -10px 0 30px rgba(0,0,0,.55),
              inset 0 0 0 1px rgba(22,241,211,.06);
}
#apMobileNav .offcanvas-title{ color:var(--ap-text); letter-spacing:.3px; }
#apMobileNav .btn-close-white{ filter: drop-shadow(0 0 6px var(--ap-neon-glow)); }

#apMobileNav .nav-link{
  color:var(--ap-text);
  padding:.7rem .55rem;
  border-radius:12px;
}
#apMobileNav .nav-link:hover{
  background: rgba(22,241,211,.10);
  box-shadow: inset 0 0 0 1px rgba(22,241,211,.28);
  text-decoration:none;
}

/* =========================================================
   SHARED NEON BUTTON (for login/logout inside drawer)
   ========================================================= */
.ap-btn-neon{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.65rem 1rem; border-radius:12px; font-weight:600;
  color:#002a25; background:var(--ap-neon);
  box-shadow:0 0 18px var(--ap-neon-glow);
  text-decoration:none;
}
.ap-btn-neon:hover{ filter:brightness(1.05); color:#001d19; text-decoration:none; }

/* =========================================================
 MOBILE MENU (offcanvas) — neon colors & transparent black
 ========================================================= */

#apMobileNav.offcanvas{
  background: rgba(6, 14, 18, 0.88) !important; /* transparent black */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-left: 1px solid rgba(22,241,211,0.22);
  box-shadow: -10px 0 30px rgba(0,0,0,0.65),
              inset 0 0 0 1px rgba(22,241,211,0.06);
}

/* menu title */
#apMobileNav .offcanvas-title{
  color: var(--ap-text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* normal nav links — neon green */
#apMobileNav .nav-link{
  color: #16f1d3 !important;
  font-weight: 600;
  padding: .8rem .7rem;
  border-radius: 10px;
  transition: all .2s ease;
}

#apMobileNav .nav-link:hover{
  background: rgba(22,241,211,.12);
  box-shadow: inset 0 0 0 1px rgba(22,241,211,.35);
  text-decoration: none;
  transform: translateX(3px);
}

/* divider line */
#apMobileNav hr{
  border-color: rgba(22,241,211,0.15);
  margin: .75rem 0;
}

/* greeting text (Salut, Andrei) */
#apMobileNav .user-greet{
  color: #7daaa5;
  font-size: 0.9rem;
  margin: 0.4rem 0 0.6rem;
}

/* logout link — red glow */
#apMobileNav .logout-link{
  color: #ff4b4b !important;
  font-weight: 600;
  transition: all .25s ease;
}

#apMobileNav .logout-link:hover{
  color: #ff6b6b !important;
  text-shadow: 0 0 10px rgba(255,75,75,0.55);
  transform: translateX(3px);
}
#apMobileNav .logout-link{
  color:#ff4b4b !important;
  font-weight:600;
  transition:all .25s ease;
}
#apMobileNav .logout-link:hover{
  color:#ff6b6b !important;
  text-shadow:0 0 10px rgba(255,75,75,.55);
  transform:translateX(3px);
}
/* Force logout red inside the mobile offcanvas (beats Bootstrap + any theme) */
#apMobileNav .offcanvas-body a.logout-link.nav-link,
#apMobileNav .offcanvas-body li .logout-link.nav-link,
#apMobileNav a.logout-link {
  color: #ff4b4b !important;
  font-weight: 600;
}

#apMobileNav .offcanvas-body a.logout-link.nav-link:hover,
#apMobileNav a.logout-link:hover {
  color: #ff6b6b !important;
  text-shadow: 0 0 10px rgba(255,75,75,.55);
  transform: translateX(3px);
}
/* ===== Mobile menu title branding ===== */
#apMobileNav .ap-menu-title{
  color:#e6f1fb;
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase;
  position:relative;
  padding-left:2px;
  margin-bottom:.25rem;
}
#apMobileNav .ap-menu-title::after{
  content:"";
  position:absolute;
  left:0; bottom:-6px;
  width:56px; height:3px;
  border-radius:3px;
  background:linear-gradient(90deg,#16f1d3,rgba(22,241,211,.15));
  box-shadow:0 0 12px rgba(22,241,211,.35);
}

/* ===== Greeting pill (Salut, User) ===== */
#apMobileNav .ap-greet{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:600;
  color:#a6d5cf;
  background:rgba(22,241,211,.08);
  border:1px solid rgba(22,241,211,.18);
  padding:.45rem .7rem;
  border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(22,241,211,.06);
  margin-bottom:.65rem;
}
#apMobileNav .ap-greet::before{
  content:"👋";
  opacity:.9;
}

/* ===== Red logout link ===== */
#apMobileNav .nav-link.logout-link{
  color:#ff4b4b !important;
  font-weight:700;
}
#apMobileNav .nav-link.logout-link:hover{
  color:#ff6b6b !important;
  text-shadow:0 0 10px rgba(255,75,75,.55);
  transform:translateX(3px);
}