/* Beer Courier — Custom Styles */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

* {
  font-family: 'Inter', sans-serif;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Hero gradient */
.hero-gradient {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d5986 50%, #1a3a5c 100%);
}

/* Card hover effect */
.feature-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Step connector line */
.step-line::after {
  content: '';
  position: absolute;
  top: 24px;
  left: calc(50% + 32px);
  width: calc(100% - 64px);
  height: 2px;
  background: linear-gradient(90deg, #eab308, #facc15);
}

/* Animated underline for nav links */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #eab308;
  transition: width 0.2s ease;
}
.nav-link:hover::after {
  width: 100%;
}

/* Floating animation */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}
.float-anim {
  animation: float 3s ease-in-out infinite;
}

/* Custom scrollbar — dark theme */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #1f2937; }
::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #6b7280; }

/* ─── PWA / Mobile ─────────────────────────────────────────────────────────── */

/* Safe-area padding helpers for iOS notch / home indicator */
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }
.pt-safe { padding-top:    env(safe-area-inset-top,    0px); }
.pl-safe { padding-left:   env(safe-area-inset-left,   0px); }
.pr-safe { padding-right:  env(safe-area-inset-right,  0px); }

/* Bottom nav including safe-area */
.bottom-nav-safe {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Spacer so main content is not hidden behind bottom nav */
.main-bottom-pad {
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
}

/* Ensure sticky top header clears iOS status bar */
.header-safe {
  padding-top: env(safe-area-inset-top, 0px);
}

/* Touch-friendly minimum tap target */
.touch-target {
  min-height: 44px;
  min-width: 44px;
}

/* ─── Dark theme utilities ──────────────────────────────────────────────────── */

/* Fade-in animation for SPA renders */
.fade-in {
  animation: fadeIn .15s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

/* Spinner */
.spin {
  animation: spin .7s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Stage stepper connector line */
.stepper-line {
  flex: 1;
  height: 2px;
  background: #374151;
}
.stepper-line.done {
  background: #22c55e;
}
.stepper-line.active {
  background: linear-gradient(90deg, #22c55e, #facc15);
}

/* ─── Accessibility ─────────────────────────────────────────────────────────── */

/* Visible keyboard-focus ring on all interactive elements (mouse clicks are
   unaffected — :focus-visible only triggers for keyboard/AT navigation). */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #eab308;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Respect users who ask for less motion — disable decorative animation. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}