/* Prevent horizontal scrolling and improve mobile stability */
html, body {
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

* {
  box-sizing: border-box;
}

/* Ensure containers don't cause horizontal scroll */
.container, .max-w-6xl, .max-w-7xl {
  width: 100%;
  max-width: 100%;
}

/* Fix any potential overflow issues */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* Mobile-specific stability improvements */
@media (max-width: 768px) {
  /* Prevent zoom on inputs */
  input, select, textarea {
    font-size: 16px !important;
  }
  
  /* Improve touch scrolling */
  body {
    -webkit-overflow-scrolling: touch;
  }
  
  /* Prevent horizontal bounce */
  .overflow-hidden {
    overflow-x: hidden !important;
  }
  
  /* Fix flex container issues on mobile */
  .flex-wrap {
    overflow: hidden;
  }
}

/* Subtle vibes without a build pipeline */
.nav-link { @apply text-white/80 hover:text-mine-gold transition; }
.nav-drawer-link { @apply text-white/80 hover:text-mine-gold transition py-2; }
.btn-primary { @apply inline-flex items-center gap-2 rounded-full bg-mine-gold text-rustic-black px-5 py-2 font-semibold shadow-soft hover:brightness-110 transition touch-manipulation min-h-[44px]; }
.btn-secondary { @apply inline-flex items-center gap-2 rounded-full border border-white/20 text-white px-5 py-2 hover:bg-white/10 transition touch-manipulation min-h-[44px]; }
.card { @apply rounded-2xl border border-white/10 bg-white/5 backdrop-blur-sm shadow-soft; }
.fade-in { animation: fadeIn .7s ease-out both; }
@keyframes fadeIn { from {opacity:0; transform: translateY(8px)} to {opacity:1; transform:none} }

/* Gold shimmer headline */
.gold-shimmer {
  background: linear-gradient(90deg, #C8A349 0%, #F5E1A4 25%, #C8A349 50%, #B08B2E 75%, #C8A349 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% auto; animation: shimmer 4s linear infinite;
}
@keyframes shimmer { to { background-position: 200% center; } }

/* Carousel baseline (progressively enhanced by JS) */
.carousel { position: relative; border-radius: 1rem; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); }
.carousel-slide { display: none; position: relative; }
.carousel-slide.is-active { display: block; }
.carousel-img { width: 100%; height: 22rem; object-fit: cover; filter: saturate(1.05) contrast(1.05); }
.carousel-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1rem 1.25rem;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,.6) 100%);
}
.caption-title { font-weight: 700; font-size: 1.125rem; }
.caption-sub { color: rgba(255,255,255,0.8); font-size: .9rem; }

.carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.45); color: white; width: 2.25rem; height: 2.25rem;
  border-radius: 9999px; border: 1px solid rgba(255,255,255,.15);
  display: grid; place-items: center;
}
.carousel-btn:hover { background: rgba(0,0,0,.65); }
.carousel-btn.prev { left: .5rem; }
.carousel-btn.next { right: .5rem; }
.carousel-dots { display: flex; gap: .5rem; justify-content: center; margin-top: .75rem; }
.carousel-dots button { width: .5rem; height: .5rem; border-radius: 9999px; background: rgba(255,255,255,.35); }
.carousel-dots button[aria-current="true"] { background: #C8A349; }

.input { @apply w-full px-3 py-3 rounded-lg bg-black/40 border border-white/15 outline-none focus:ring-2 focus:ring-mine-gold text-base min-h-[44px]; }
.selectable { @apply w-full text-left p-3 rounded-xl border border-white/10 bg-white/5 hover:bg-white/10 transition; }
.selectable.selected { @apply ring-2 ring-mine-gold; }
.pill { @apply text-xs px-2 py-0.5 rounded-full border border-white/20 text-white/70; }

.social-link { @apply inline-flex items-center justify-center h-9 w-9 rounded-full border border-white/15 text-white/80 hover:text-mine-gold hover:border-mine-gold transition touch-manipulation; }

/* Hero Action Buttons */
.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #D4AF37 0%, #FFD700 50%, #D4AF37 100%);
  color: #000;
  font-weight: 600;
  font-size: 1.125rem;
  border-radius: 1rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.hero-btn:hover {
  background: linear-gradient(135deg, #FFD700 0%, #D4AF37 50%, #FFD700 100%);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}

.hero-btn:active {
  transform: translateY(0) scale(0.98);
}

.hero-btn svg {
  transition: transform 0.2s ease;
}

.hero-btn:hover svg {
  transform: scale(1.1);
}

/* Enhanced button glow effect */
.hero-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255,255,255,0.1), transparent, rgba(255,255,255,0.1));
  border-radius: 2rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hero-btn:hover::before {
  opacity: 1;
}

/* Focus states for accessibility */
.hero-btn:focus {
  outline: none;
  ring: 4px;
  ring-color: rgba(200, 163, 73, 0.5);
  ring-offset: 2px;
  ring-offset-color: #000;
}