/* JNJ Express — site styles
   Tailwind CDN handles utilities. This file is for things Tailwind can't do cleanly:
   custom fonts, image placeholders, sticky bottom bar, focus rings on dark backgrounds. */

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

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: #ffffff; /* slate-950 */
  color: #0f172a; /* slate-100 */
  -webkit-font-smoothing: antialiased;
}

.font-display {
  font-family: 'Bebas Neue', 'Inter', sans-serif;
  letter-spacing: 0.01em;
}

/* ---------- Focus styles (Tailwind defaults are weak on dark backgrounds) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #2563eb; /* blue-600 */
  outline-offset: 2px;
}

/* ---------- Image placeholders (labeled so they don't look broken) ---------- */
.img-placeholder {
  position: relative;
  background:
    linear-gradient(135deg, rgba(29, 78, 216, 0.08) 0%, rgba(2, 6, 23, 0.0) 50%),
    linear-gradient(45deg, #f8fafc 25%, #0f172a 25%, #0f172a 50%, #f8fafc 50%, #f8fafc 75%, #0f172a 75%);
  background-size: 100% 100%, 24px 24px;
  border: 1px solid rgba(29, 78, 216, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #3b82f6; /* blue-500 */
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1rem;
}
.img-placeholder::before {
  content: '📷';
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  font-size: 1rem;
  opacity: 0.6;
}

/* ---------- Sticky mobile call bar ---------- */
.sticky-call {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: #1d4ed8;
  color: #ffffff;
  font-weight: 800;
  text-align: center;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  box-shadow: 0 -6px 20px rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.sticky-call:hover { background: #2563eb; }
@media (min-width: 768px) {
  .sticky-call { display: none; }
  body { padding-bottom: 0; }
}
body { padding-bottom: 4rem; } /* room for sticky bar on mobile */

/* ---------- Hero pay numbers ---------- */
.pay-headline {
  font-family: 'Bebas Neue', sans-serif;
  line-height: 0.9;
  letter-spacing: 0.005em;
}

/* ---------- Stat band dividers ---------- */
.stat-divider { border-color: rgba(29, 78, 216, 0.25); }

/* ---------- Form polish ---------- */
.field {
  background: #f8fafc;
  border: 1px solid #475569;
  color: #0f172a;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  width: 100%;
  font-size: 1rem;
  transition: border-color 0.15s, background 0.15s;
}
.field:focus {
  border-color: #1d4ed8;
  background: #0f172a;
}
.field.invalid {
  border-color: #ef4444;
  background: #450a0a;
}
.field-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 0.5rem;
}
.field-error {
  color: #fca5a5;
  font-size: 0.8rem;
  margin-top: 0.35rem;
  display: none;
}
.field-error.show { display: block; }
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.radio-pill {
  border: 1px solid #475569;
  background: #f8fafc;
  color: #475569;
  padding: 0.625rem 1rem;
  border-radius: 9999px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.15s;
}
.radio-pill input { display: none; }
.radio-pill:has(input:checked) {
  background: #1d4ed8;
  color: #ffffff;
  border-color: #1d4ed8;
  font-weight: 700;
}

/* ---------- Buttons ---------- */
.btn-brand {
  background: #1d4ed8;
  color: #ffffff;
  font-weight: 800;
  padding: 0.875rem 1.5rem;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1rem;
  transition: background 0.15s, transform 0.05s;
}
.btn-brand:hover { background: #2563eb; }
.btn-brand:active { transform: translateY(1px); }

.btn-outline {
  background: transparent;
  color: #0f172a;
  border: 2px solid #0f172a;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1rem;
  transition: all 0.15s;
}
.btn-outline:hover {
  background: rgba(255,255,255,0.08);
  border-color: #2563eb;
  color: #2563eb;
}

/* ---------- Nav active link ---------- */
.nav-link.active { color: #2563eb; }

/* ---------- Subtle entrance for hero ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.5s ease-out both; }
.fade-up-2 { animation: fadeUp 0.6s 0.1s ease-out both; }
.fade-up-3 { animation: fadeUp 0.7s 0.2s ease-out both; }

/* ---------- Tribute styling ---------- */
.tribute {
  border-top: 1px solid #0f172a;
  padding: 1rem 0;
  text-align: center;
  font-size: 0.8rem;
  color: #64748b;
}
.tribute a {
  color: #475569;
  text-decoration: underline;
  text-decoration-color: rgba(29, 78, 216, 0.5);
  text-underline-offset: 3px;
}
.tribute a:hover { color: #2563eb; }

/* ---------- Section spacing helpers ---------- */
.section { padding: 4rem 1rem; }
@media (min-width: 768px) { .section { padding: 6rem 1.5rem; } }

/* ---------- Mobile menu ---------- */
.mobile-menu { display: none; }
.mobile-menu.open { display: block; }