/* Mobile nav drawer — native <dialog> + GSAP (see fp-drawer.js) */



.fp-drawer {

  margin: 0;

  padding: 0;

  border: none;

  max-width: none;

  max-height: none;

  width: 100%;

  height: 100%;

  background: transparent;

  overflow: hidden;

}



.fp-drawer::backdrop {

  background: rgba(0, 0, 0, 0.62);

  backdrop-filter: blur(6px);

  -webkit-backdrop-filter: blur(6px);

}



.fp-drawer__panel {

  position: fixed;

  inset-block: 0;

  inset-inline-end: 0;

  z-index: 1;

  display: flex;

  flex-direction: column;

  width: min(100%, 20rem);

  max-width: 100%;

  padding: var(--header-h) 1.25rem 1.5rem;

  border-inline-start: 1px solid rgba(0, 255, 65, 0.28);

  background: rgba(5, 5, 5, 0.96);

  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.55), inset 1px 0 0 rgba(0, 255, 65, 0.08);

  overflow-x: hidden;

  touch-action: pan-y;

  will-change: transform;

}



.fp-drawer__header {

  display: flex;

  align-items: center;

  margin-bottom: 0.75rem;

  padding-bottom: 0.75rem;

  border-bottom: 1px solid rgba(0, 255, 65, 0.15);

}



.fp-drawer__title {

  margin: 0;

  font-family: var(--font-display, "Share Tech Mono", monospace);

  font-size: 0.7rem;

  font-weight: 600;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  color: var(--terminal-light, #39ff14);

}



.fp-drawer__close {

  position: absolute;

  top: calc((var(--header-h) - 2.5rem) / 2);

  right: 1rem;

  z-index: 2;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 2.5rem;

  height: 2.5rem;

  flex-shrink: 0;

  border: 1px solid rgba(0, 255, 65, 0.35);

  background: rgba(0, 0, 0, 0.4);

  color: var(--terminal-light, #39ff14);

  cursor: pointer;

  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.15s ease;

}



.fp-drawer__close:hover {

  border-color: rgba(57, 255, 20, 0.65);

  background: rgba(0, 255, 65, 0.08);

  color: #fff;

}



.fp-drawer__close:active {

  transform: scale(0.94);

}



.fp-drawer__close:focus-visible {

  outline: 2px solid var(--terminal-light, #39ff14);

  outline-offset: 2px;

}



.fp-drawer__nav {

  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 0.15rem;

  min-width: 0;

  overflow-x: hidden;

  overflow-y: auto;

  overscroll-behavior: contain;

  overscroll-behavior-x: none;

  padding-block: 0.25rem;

  margin: 0;

  list-style: none;

}



.fp-drawer__link {

  display: flex;

  align-items: center;

  justify-content: flex-start;

  min-width: 0;

  max-width: 100%;

  overflow: hidden;

  padding: 0.85rem 0.65rem;

  margin-inline: -0.65rem;

  border-radius: 0;

  color: rgba(255, 255, 255, 0.88);

  text-decoration: none;

  font-size: 1rem;

  font-weight: 500;

  line-height: 1.3;

  transition: color 0.2s ease;

  will-change: transform, opacity;

}



.fp-drawer__link:hover {

  color: rgba(255, 255, 255, 0.95);

}



.fp-drawer__link:focus-visible {

  outline: 2px solid var(--terminal-light, #39ff14);

  outline-offset: 2px;

}



.fp-drawer__footer-cta {

  display: flex;

  flex-direction: column;

  gap: 0.85rem;

}



.fp-drawer__footer {

  margin-top: auto;

  padding-top: 1rem;

  border-top: 1px solid rgba(0, 255, 65, 0.15);

  display: flex;

  flex-direction: column;

  gap: 1rem;

}



.fp-drawer__cta {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.5rem;

  width: 100%;

  padding: 0.75rem 1rem;

  font-size: 0.875rem;

  font-weight: 700;

  text-decoration: none;

  color: var(--color-bg, #050505);

  background: linear-gradient(90deg, var(--terminal, #00ff41), var(--terminal-light, #39ff14));

  box-shadow: var(--glow-terminal, 0 0 28px rgba(0, 255, 65, 0.35));

  transition: filter 0.2s ease, transform 0.15s ease;

}



.fp-drawer__cta:hover {

  filter: brightness(1.1);

}



.fp-drawer__cta:active {

  transform: scale(0.98);

}



.fp-drawer__cta:focus-visible {

  outline: 2px solid #fff;

  outline-offset: 3px;

}



@media (min-width: 1024px) {

  .fp-drawer {

    display: none !important;

  }

}



@media (prefers-reduced-motion: reduce) {

  .fp-drawer__link,

  .fp-drawer__close {

    transition: none;

  }

}