/* AB Insights — Custom styles (complements Tailwind CDN) */

/* Smooth scroll for the whole page */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px; /* offset for sticky nav height */
}

/* Better font rendering on macOS/iOS */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Prevent content jump when scrollbar appears */
html {
  overflow-y: scroll;
}

/* ---- Dark-background autofill fix ---- */
/* Prevents browser's yellow/white autofill from breaking dark form fields */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: #f1f5f9;
  -webkit-box-shadow: 0 0 0px 1000px #1e293b inset;
  transition: background-color 5000s ease-in-out 0s;
  caret-color: #f1f5f9;
}

/* ---- Nav scroll shadow ---- */
/* Add shadow to nav when page is scrolled (applied via JS if desired) */
.nav-scrolled {
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.06);
}

/* ---- Section step connector line (desktop) ---- */
/* The horizontal line between step numbers in "How We Work" */
/* These are rendered inline via Tailwind; this is a backup */
.step-connector {
  position: absolute;
  top: 20px;
  left: 50%;
  width: 100%;
  height: 1px;
  background-color: #e2e8f0;
}

/* ---- Focus ring accessibility ---- */
/* Ensure all interactive elements have a visible focus ring */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #4B2E83;
  outline-offset: 2px;
}

/* ---- Smooth link transitions ---- */
a {
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, opacity 150ms ease;
}

/* ---- Mobile nav transition ---- */
#mobile-menu {
  transition: max-height 200ms ease, opacity 200ms ease;
}

/* ---- Card hover refinement ---- */
/* Ensures cards in "What We Do" have a clean lift */
.service-card:hover {
  transform: translateY(-2px);
}

/* ---- Metric number styling ---- */
/* Tabular numbers for the results section */
[data-cms^="metric"] {
  font-variant-numeric: tabular-nums;
}

/* ---- Form button loading state ---- */
button[type="submit"].loading {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- Print styles ---- */
@media print {
  nav, footer, #contact form, .no-print {
    display: none !important;
  }
  html {
    scroll-behavior: auto;
  }
  body {
    font-size: 12pt;
  }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}