/* ── Custom styles that complement Tailwind ── */

/* Smooth scroll offset for fixed navbar */
section[id] {
  scroll-margin-top: 80px;
}

/* ── Mobile nav link ── */
.mobile-nav-link {
  display: block;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(168,85,247,.1);
  font-size: 1.125rem;
  color: rgba(232,224,240,.85);
  transition: color .3s, padding-left .3s;
}
.mobile-nav-link:last-child { border-bottom: none; }
.mobile-nav-link:hover {
  color: #fbbf24;
  padding-left: .5rem;
}

/* ── Navbar scroll state ── */
.navbar-scrolled {
  background: rgba(10,10,15,.92) !important;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(168,85,247,.15);
  box-shadow: 0 4px 30px rgba(0,0,0,.5);
}

/* ── Hamburger animation ── */
#menu-toggle.open #bar1 {
  transform: translateY(5px) rotate(45deg);
}
#menu-toggle.open #bar2 {
  opacity: 0;
  transform: scaleX(0);
}
#menu-toggle.open #bar3 {
  transform: translateY(-5px) rotate(-45deg);
}

/* ── Selection color ── */
::selection {
  background: rgba(168,85,247,.4);
  color: #fff;
}

/* ── Focus visible ── */
:focus-visible {
  outline: 2px solid #fbbf24;
  outline-offset: 2px;
}

/* ── Responsive tweaks ── */
@media (max-width: 640px) {
  .hero-mesh {
    background:
      radial-gradient(ellipse 80% 60% at 30% 50%, rgba(123,34,175,.5) 0%, transparent 60%),
      radial-gradient(ellipse 60% 50% at 70% 40%, rgba(180,83,9,.4) 0%, transparent 55%),
      #0a0a0f;
  }
}

/* ── Print styles ── */
@media print {
  body { background: #fff; color: #000; }
  .hero-mesh { background: #fff !important; }
  .gold-shimmer { color: #78350f; -webkit-text-fill-color: #78350f; background: none; }
}