/* =========================================================
   Malankara Orthodox Syrian Church — custom styles
   (Complements Tailwind utility classes)
   ========================================================= */

/* Bondrians display font */
@font-face {
  font-family: 'Bondrians';
  src: url('../fonts/Bondrians.otf') format('opentype'),
       url('../fonts/Bondrians.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.font-bondrians {
  font-family: 'Bondrians', serif;
}

:root {
  --brand-blue: #0A5599;
  --brand-blue-dk: #044E86;
  --brand-gold: #AC8853;
  --brand-gold-dk: #8C6B3E;
  --brand-navy: #073B6B;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Nunito', 'Figtree', 'Inter', system-ui, sans-serif;
  color: #1f2937;
  -webkit-font-smoothing: antialiased;
  opacity: 0;
  animation: pageFadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes pageFadeIn {
  to { opacity: 1; }
}

h1, h2, h3, .font-serif { font-family: 'Playfair Display', Georgia, serif; }
.font-display { font-family: 'Rakkas', cursive, serif; }

/* Subtle Orthodox cross/geometric texture used on light section backgrounds */
.pattern-cross {
  background-color: #ffffff;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(10, 85, 153, 0.06) 1px, transparent 0);
  background-size: 28px 28px;
}

.pattern-on-blue {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.08) 1px, transparent 0);
  background-size: 26px 26px;
}

/* Gradient helpers */
.hero-gold-panel {
  background: linear-gradient(135deg, #b8945c 0%, #9c7b45 60%, #8a6a39 100%);
}

.section-blue {
  background: linear-gradient(180deg, #0a5599 0%, #064c8a 100%);
}

/* Navigation link premium hover line transition */
.desktop-nav a {
  position: relative;
  padding-bottom: 2px;
}
.desktop-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: currentColor;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.desktop-nav a:hover::after {
  width: 100%;
}

/* ---- Full-width hero ---- */
#hero {
  height: 640px;
}
@media (max-width: 1024px) { #hero { height: 560px; } }
@media (max-width: 640px)  { #hero { height: 500px; } }

#hero .hero-swiper,
#hero .swiper-wrapper,
#hero .swiper-slide {
  height: 100% !important;
}

.hero-cinematic-overlay {
  background: linear-gradient(
    105deg,
    rgba(4, 15, 40, 0.82) 0%,
    rgba(7, 59, 107, 0.55) 38%,
    rgba(0, 0, 0, 0.18) 70%,
    transparent 100%
  );
}

.hero-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #AC8853;
  color: #fff;
  padding: 14px 28px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 8px 24px -4px rgba(172, 136, 83, 0.35);
}
.hero-cta-btn:hover {
  background: #8C6B3E;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -6px rgba(172, 136, 83, 0.5);
}
.hero-cta-btn i { transition: transform 0.3s ease; }
.hero-cta-btn:hover i { transform: translateX(4px); }

/* Swiper Custom Styles */
.hero-swiper {
  position: relative;
}

/* Customizing pagination bullets */
.hero-swiper .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.4);
  opacity: 1;
  width: 24px;
  height: 4px;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.hero-swiper .swiper-pagination-bullet-active {
  background: #AC8853; /* brand-gold */
  width: 40px;
}

/* Ken Burns effect: Zoom in slide image when active */
.hero-swiper .swiper-slide .swiper-zoom-image {
  transform: scale(1);
  transition: transform 8s ease-out;
}

.hero-swiper .swiper-slide-active .swiper-zoom-image {
  transform: scale(1.08);
}

/* Content animations inside slides */
.hero-swiper .slide-element {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), 
              transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hero-swiper .swiper-slide-active .slide-element {
  opacity: 1;
  transform: translateY(0);
}

.hero-swiper .slide-delay-1 { transition-delay: 0.1s; }
.hero-swiper .slide-delay-2 { transition-delay: 0.3s; }
.hero-swiper .slide-delay-3 { transition-delay: 0.5s; }
.hero-swiper .slide-delay-4 { transition-delay: 0.7s; }

/* News ticker continuous scroll (pauses on hover) */
.marquee-track { width: max-content; }
.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee-card {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.marquee-card:hover {
  transform: translateY(-4px);
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
}

/* Card hover lift */
.card-lift { transition: transform .35s ease, box-shadow .35s ease; }
.card-lift:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -12px rgba(7, 59, 107, .35); }

/* Image zoom inside fixed frame */
.img-frame { overflow: hidden; }
.img-frame img { transition: transform .6s ease; }
.img-frame:hover img { transform: scale(1.06); }

/* Animated Hamburger Button */
#menuToggle {
  position: relative;
}
#menuToggle .hamburger-line {
  position: absolute;
  left: 8px;
  top: calc(50% - 1px);
  width: 24px;
  height: 2px;
  background-color: currentColor;
  border-radius: 999px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
#menuToggle .line-top {
  transform: translateY(-6px);
}
#menuToggle .line-middle {
  transform: translateY(0);
}
#menuToggle .line-bottom {
  transform: translateY(6px);
}

/* Active State morphing into X */
#menuToggle.is-active .line-top {
  transform: translateY(0) rotate(45deg);
}
#menuToggle.is-active .line-middle {
  opacity: 0;
  transform: scaleX(0);
}
#menuToggle.is-active .line-bottom {
  transform: translateY(0) rotate(-45deg);
}

/* Modern Drawer Layout */
#mobileMenuDrawer {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.25);
}
#mobileMenuOverlay {
  transition: opacity 0.3s ease;
}

/* Mobile Nav Stagger Slide In */
.mobile-nav-link {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#mobileMenuDrawer.translate-x-0 .mobile-nav-link {
  opacity: 1;
  transform: translateX(0);
}

.mobile-nav-link:nth-child(1) { transition-delay: 100ms; }
.mobile-nav-link:nth-child(2) { transition-delay: 150ms; }
.mobile-nav-link:nth-child(3) { transition-delay: 200ms; }
.mobile-nav-link:nth-child(4) { transition-delay: 250ms; }
.mobile-nav-link:nth-child(5) { transition-delay: 300ms; }
.mobile-nav-link:nth-child(6) { transition-delay: 350ms; }
.mobile-nav-link:nth-child(7) { transition-delay: 400ms; }
.mobile-nav-link:nth-child(8) { transition-delay: 450ms; }
/* Line clamp fallback */
.clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* Calendar list item animations */
.calendar-item {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.calendar-item:hover:not(.active-calendar-item) {
  transform: translateX(4px);
  background-color: rgba(255, 255, 255, 0.05);
}

.active-calendar-item {
  background-color: #ffffff !important;
  color: #073B6B !important;
  border-color: #ffffff !important;
  transform: scale(1.02);
  box-shadow: 0 10px 20px -5px rgba(7, 59, 107, 0.15);
}

/* Unity Banner Gradient Overlay */
.unity-gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(140, 107, 62, 0.92) 0%, rgba(7, 59, 107, 0.8) 50%, rgba(4, 78, 134, 0.25) 100%);
  z-index: 1;
}

/* Button arrow transitions */
.btn-hover-arrow {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-hover-arrow i {
  transition: transform 0.3s ease;
}
.btn-hover-arrow:hover i {
  transform: translateX(4px);
}
.btn-hover-arrow:hover {
  box-shadow: 0 6px 15px -3px rgba(172, 136, 83, 0.4);
}

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

.reveal-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
  opacity: 1;
  transform: none;
}

.delay-75  { transition-delay: 75ms !important; }
.delay-100 { transition-delay: 100ms !important; }
.delay-150 { transition-delay: 150ms !important; }
.delay-200 { transition-delay: 200ms !important; }
.delay-300 { transition-delay: 300ms !important; }
.delay-400 { transition-delay: 400ms !important; }
.delay-500 { transition-delay: 500ms !important; }

/* Interactive Search Modal Overlay */
#searchModal {
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#searchModal.opacity-100 {
  pointer-events: auto;
}
#searchContainer {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

/* Map marker hotspots (Google Map Model) */
.map-marker-btn {
  transform: translate(-50%, -50%);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}
.map-marker-btn span.relative {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, background-color 0.3s ease;
}
.map-marker-btn:hover span.relative,
.map-marker-btn.active-marker span.relative {
  transform: scale(1.35);
  background-color: #AC8853; /* brand-gold */
  border-color: #ffffff;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
}
.map-marker-btn.active-marker span.absolute {
  background-color: rgba(172, 136, 83, 0.6);
  animation-duration: 1.2s;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}