/*
Theme Name: Firehouse Church Theme
Theme URI: https://firehousechurch.com
Author: Firehouse Church Team
Author URI: https://firehousechurch.com
Description: Custom WordPress theme for Firehouse Church Chicago featuring high-contrast typography, interactive testimony carousel, sermon showcase, photo gallery lightbox, and giving module.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: firehouse-church
Tags: custom-theme, church, modern, responsive, carousel, gallery, tailwind
*/

/* Custom Base & Utility Classes */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,400&family=Space+Grotesk:wght@400;500;600;700;800&display=swap');

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  color: #0a0a0a;
  background-color: #F6F5F2;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

.font-display {
  font-family: 'Space Grotesk', sans-serif !important;
}

.font-mono {
  font-family: 'JetBrains Mono', monospace !important;
}

.bg-fire-red {
  background-color: #D9231D !important;
}

.text-fire-red {
  color: #D9231D !important;
}

.border-fire-red {
  border-color: #D9231D !important;
}

.bg-cream-bg {
  background-color: #F6F5F2 !important;
}

.py-4\.5 {
  padding-top: 1.125rem !important;
  padding-bottom: 1.125rem !important;
}

/* Marquee animation */
.animate-marquee {
  display: flex;
  width: max-content;
  animation: marquee 50s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}

/* Modal and Overlay transitions */
.modal-overlay {
  transition: opacity 0.3s ease;
}

/* Hide scrollbar utility */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}