/* 
   Custom CSS bridge for Balaji Hospital (Tailwind CSS configuration)
   Author: Antigravity AI
*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
  --accent-font: 'Outfit', sans-serif;
  --primary-color: #064e3b; /* Deep Emerald Green */
}

html {
  scroll-behavior: smooth;
}

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

/* Global Heading Rules requested by the User */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--accent-font) !important;
  font-weight: 400 !important;
  line-height: 1.1em !important;
  color: var(--primary-color);
}

/* Navbar links match heading font */
header nav ul {
  font-family: var(--accent-font);
}

/* Custom Keyframe Animations not pre-configured in standard Tailwind */
@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes pulse-gold-red {
  0%, 100% { 
    transform: scale(1); 
    box-shadow: 0 0 20px rgba(185, 28, 28, 0.4); 
  }
  50% { 
    transform: scale(1.04); 
    box-shadow: 0 0 35px rgba(185, 28, 28, 0.7); 
  }
}

.animate-float {
  animation: float-slow 3s infinite ease-in-out;
}

.animate-pulse-hospital {
  animation: pulse-gold-red 2.5s infinite ease-in-out;
}

/* Instagram Reel Carousel */
.reel-carousel {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.reel-carousel::-webkit-scrollbar {
  display: none;
}
.reel-slide {
  flex-shrink: 0;
  width: 260px;
  scroll-snap-align: start;
}
.reel-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #000;
  border-radius: 0.75rem;
  clip-path: inset(52px 0 90px 0 round 0.75rem);
}
.reel-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  overflow: hidden;
}

/* Placeholder before iframe loads */
.reel-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #064e3b 0%, #065f46 55%, #0d9488 100%);
  cursor: pointer;
}
.reel-placeholder .play-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.22s ease, background 0.22s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.reel-placeholder:hover .play-icon {
  transform: scale(1.14);
  background: rgba(255,255,255,0.28);
}
.reel-placeholder .play-icon svg {
  width: 22px;
  height: 22px;
  fill: white;
  margin-left: 3px;
}

/* Mobile: smaller slides */
@media (max-width: 640px) {
  .reel-slide {
    width: 200px;
  }
}

/* Mobile menu transitions and positioning */
@media (max-width: 768px) {
  .nav-menu {
    position: absolute !important;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: white;
    flex-direction: column;
    padding: 2rem;
    gap: 1.5rem;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    border-top: 1px solid rgba(15, 23, 42, 0.05);
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .nav-menu.open {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: all !important;
  }
}