@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&family=Roboto:wght@300;400;500;700&family=Merriweather:wght@700;900&display=swap');
@import "tailwindcss";

/* Break out of the kit's container to go full-width */
.acaab-full-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

body { overflow-x: hidden; }

@theme {
  --font-sans: "Roboto", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Roboto Condensed", sans-serif;
  --font-serif: "Merriweather", ui-serif, Georgia, serif;
  
  --color-untan-navy: #003150;
  --color-untan-yellow: #feb401;
  --color-untan-blue: #1e40af;
  --color-primary-navy: #003150;
  --color-primary-gold: #feb401;
}

body {
  font-family: var(--font-sans);
  background-color: #ffffff;
  color: #334155;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

/* Hide scrollbar for carousel while keeping scroll functionality */
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Fade-in animation for dynamically loaded cards */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fade-in 0.4s ease both;
}

/* Explicitly scan all component files so arbitrary Tailwind classes compile */
@source "./**/*.tsx";

/* Stats bar 3-column layout (replaces md:grid-cols-[1fr_auto_1fr_auto_1fr]) */
@media (min-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr auto 1fr auto 1fr;
  }
}

/* Project carousel card widths (replaces w-[85vw] md:w-[60vw] lg:w-[38vw]) */
.proj-card { width: 75vw; }
@media (min-width: 768px)  { .proj-card { width: 42vw; } }
@media (min-width: 1024px) { .proj-card { width: 28vw; } }