/* ============================================
   1818 Meridian House — Custom Styles
   ============================================ */

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
}

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

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #040B16;
}
::-webkit-scrollbar-thumb {
  background: #1D3557;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #D4A843;
}

/* Selection */
::selection {
  background: rgba(212, 168, 43, 0.3);
  color: #FFF9E8;
}

/* Navbar transition states */
#navbar.scrolled {
  background: rgba(4, 11, 22, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(212, 168, 43, 0.1);
}

#navbar.scrolled .font-display,
#navbar.scrolled a:not(.bg-gold-500) {
  color: #fff !important;
}

/* Mobile menu states */
#mobileMenu.open {
  opacity: 1 !important;
  pointer-events: all !important;
}

/* Reveal animations — progressive enhancement */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 0.7s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
  }
  .reveal.revealed {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Gold shimmer on CTA hover */
.bg-gold-500 {
  position: relative;
  overflow: hidden;
}
.bg-gold-500::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
.bg-gold-500:hover::after {
  transform: translateX(100%);
}

/* Input autofill styling for dark theme */
input:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px #0A1628 inset !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #D4A843;
}

/* Print styles */
@media print {
  body { background: #fff; color: #000; }
  .bg-gold-500, a.bg-gold-500 { background: #333 !important; color: #fff !important; }
}