/* === Floating menu — anchored to the logo, sticky toggle, absolute card === */

/* The logo wrapper defines the positioning context so the menu card can be absolute inside it */
.hero-logo-wrap{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: visible !important;
}

/* The hamburger “floats” (sticks) while the logo block is on screen. It stops at the logo’s bottom */
.hero-logo-wrap .tkt-menu-toggle{
  position: sticky;
  top: 12px;           /* distance from viewport top while sticky */
  left: 0;             /* left edge of the wrapper */
  z-index: 60;

  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(232,197,71,.45);
  background: rgba(17,17,17,.35);
  backdrop-filter: blur(6px);
  color: #E8C547;
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset, 0 8px 24px rgba(0,0,0,.35);
  transition: transform .18s ease, box-shadow .25s ease, background .25s ease;
}
.tkt-menu-toggle:hover{ box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 10px 28px rgba(130,0,211,.28); }
.tkt-menu-toggle:active{ transform: scale(.96); }
.tkt-menu-toggle:focus-visible{ outline: 2px solid #E8C547; outline-offset: 2px; }

/* Panel hidden by default */
.tkt-menu-panel[hidden]{ display: none; }

/* Overlay covers the whole viewport */
.tkt-menu-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 55;
}

/* Card is absolutely positioned INSIDE the logo wrapper, directly below the toggle */
.tkt-menu-card{
  --toggle-size: 42px;
  position: absolute;
  left: 0;                                /* aligns under the toggle (which sits at left:0 of wrapper) */
  top: calc(var(--toggle-size) + 12px);   /* below the sticky toggle */
  width: min(88vw, 220px);
  max-height: calc(100dvh - 120px);
  overflow: visible;
  padding: 12px 12px 10px;
  border-radius: 16px;
  border: 1px solid rgba(232,197,71,.3);
  background: linear-gradient(180deg, rgba(24,24,24,.92), rgba(14,14,14,.92));
  box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 0 32px rgba(130,0,211,.2);
  transform: translateY(-6px) scale(.98);
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
  z-index: 62;
}

/* When open */
.tkt-menu-panel[data-open="true"] .tkt-menu-overlay{ opacity: 1; }
.tkt-menu-panel[data-open="true"] .tkt-menu-card{ opacity: 1; transform: translateY(0) scale(1); }

/* Subpanel — anchored to the right of the card; fills toward viewport bottom */
.tkt-subpanel{
  position: absolute;
  top: var(--sub-top, 0);
  left: calc(100% + 8px);
  width: var(--sub-width, 260px);
  max-height: calc(100dvh - var(--sub-top, 0) - 12px);
  overflow: auto;
  padding: 12px 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(232,197,71,.28);
  background: linear-gradient(180deg, rgba(24,24,24,.92), rgba(14,14,14,.92));
  box-shadow: 0 14px 36px rgba(0,0,0,.45), 0 0 22px rgba(130,0,211,.18);
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .22s ease, transform .22s ease;
  z-index: 63;
}
.tkt-subpanel[data-open="true"]{ opacity: 1; transform: translateX(0); }

@media (max-width: 600px){
  .tkt-subpanel{
    left: 0;                    /* overlap on small screens */
    width: min(92vw, 380px);
  }
}

/* Typography + links (match your gradients) */
.tkt-menu-title{
  margin: 4px 6px 10px;
  font-size: 1.05rem; font-weight: 700; letter-spacing:.02em;
  background: linear-gradient(90deg,#D4AF37 0%, #ffffff 50%, #D4AF37 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}

.tkt-menu-nav{ display:flex; flex-direction:column; gap:.1rem; padding: 2px; }
.tkt-link{
  display:block; padding:.5rem .6rem; border-radius:10px; text-decoration:none; font-weight:600;
  background: linear-gradient(90deg,#D4AF37 0%, #ffffff 50%, #D4AF37 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  transition: background-position .35s ease, box-shadow .25s ease;
  background-size: 200% auto;
}
.tkt-link:hover{
  background-position: 200% center;
  box-shadow: 0 0 0 1px rgba(232,197,71,.25) inset, 0 0 14px rgba(130,0,211,.35);
}
.tkt-disabled{ opacity:.6; cursor:default; }

.tkt-subpanel-nav{ display:flex; flex-direction:column; gap:.2rem; padding: 0 2px; }
.tkt-subpanel-back{
  appearance: none; background: transparent; border: 1px solid transparent;
  font-weight: 700; font-size: 0.95rem;
  padding: .35rem .55rem; margin: 6px 6px 8px;
  border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem;
}
.tkt-subpanel-back:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(232,197,71,.22);
  box-shadow: 0 0 0 1px rgba(232,197,71,.12) inset;
}
.tkt-subpanel-back:focus-visible{ outline: 2px solid #E8C547; outline-offset: 2px; }

/* Keep overlay behind the card but above page; nav stays below (default z-index) */