/* Capital Digital Wallet -- custom styles
   Tailwind (CDN) handles almost everything; this file only covers
   the few things utility classes can't: smooth scroll, the font,
   focus outlines, and small animation/scrollbar touches. */

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
}

/* Off-canvas mobile menu -- the slide transform and its "open" state
   live here as real, always-compiled CSS (not as Tailwind utility
   classes added purely at runtime), so the animation never depends
   on the CDN build re-scanning the page for a class that only ever
   appears via JavaScript. main.js just toggles `.is-open`. */
#mobileMenu {
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
}
#mobileMenu.is-open {
  transform: translateX(0);
}

#menuOverlay {
  transition: opacity 0.2s ease-in-out;
}

/* Thin scrollbar inside the mobile menu */
#mobileMenu::-webkit-scrollbar {
  width: 4px;
}
#mobileMenu::-webkit-scrollbar-thumb {
  background: #e5e7eb;
  border-radius: 9999px;
}

/* Accessible focus state, in brand secondary blue */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #0015E4;
  outline-offset: 2px;
}

/* Gentle entrance animation used on a few section headers */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-up {
  animation: fadeInUp 0.6s ease both;
}

/* Native <details> FAQ arrow rotation */
details[open] .faq-chevron {
  transform: rotate(180deg);
}
.faq-chevron {
  transition: transform 0.2s ease-in-out;
}