/* ==========================================================================
   MASJID ACHMAD BAIDLOWI - CUSTOM STYLES
   Alamat: Jl. Pucangan 3 No. 75, Surabaya
   Slogan: "Unggul di Dunia, Selamat di Akhirat"
   Colors:
     - Primary:    #087F73
     - Secondary:  #20B2A3
     - Background: #F8FCFA
     - Dark:       #173B35
     - White:      #FFFFFF
   ========================================================================== */

/* Smooth scroll behavior across the website */
html {
  scroll-behavior: smooth;
}

body {
  background-color: #F8FCFA;
  color: #173B35;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
}

/* Custom subtle pattern for Islamic elegance */
.bg-islamic-pattern {
  background-color: #087F73;
  background-image: radial-gradient(rgba(32, 178, 163, 0.18) 1.5px, transparent 1.5px), radial-gradient(rgba(32, 178, 163, 0.18) 1.5px, #087F73 1.5px);
  background-size: 36px 36px;
  background-position: 0 0, 18px 18px;
}

.bg-pattern-subtle {
  background-color: #F8FCFA;
  background-image: radial-gradient(rgba(8, 127, 115, 0.05) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}

/* Custom focus styles for accessibility */
a:focus-visible, button:focus-visible {
  outline: 2px solid #20B2A3;
  outline-offset: 2px;
}

/* Card hover transitions */
.card-hover-effect {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover-effect:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(8, 127, 115, 0.08), 0 10px 10px -5px rgba(8, 127, 115, 0.04);
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #F8FCFA;
}

::-webkit-scrollbar-thumb {
  background: #20B2A3;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #087F73;
}