/**
 * Baptism invitation model 1 – baby theme, pink (girl) / blue (boy), playful + animations.
 */
/* ---- Theme variables (girl = pink, boy = blue) ---- */
body.invitation-baptism.invitation-baptism-girl {
  --baptism-primary: #e91e8c;
  --baptism-primary-soft: #f8bbdd;
  --baptism-primary-pale: #fce4ec;
  --baptism-accent: #c2185b;
  --baptism-heart: #e91e8c;
}
body.invitation-baptism.invitation-baptism-boy {
  --baptism-primary: #1976d2;
  --baptism-primary-soft: #90caf9;
  --baptism-primary-pale: #e3f2fd;
  --baptism-accent: #0d47a1;
  --baptism-heart: #1976d2;
}

/* Prevent horizontal scroll (overflow can be on html in some browsers) */
html.invitation-baptism-root {
  overflow-x: hidden;
  max-width: 100vw;
}
body.invitation-baptism {
  font-family: 'Merriweather', Georgia, serif;
  position: relative;
  overflow-x: hidden;
  max-width: 100%;
}
body.invitation-baptism .script {
  font-family: 'Kaushan Script', cursive;
}

/* Girl theme: pink overlay on all background images */
body.invitation-baptism.invitation-baptism-girl .baptism-header::before {
  background: linear-gradient(to top,
    rgba(0,0,0,0.5) 0%,
    rgba(194, 24, 91, 0.25) 40%,
    rgba(233, 30, 140, 0.2) 100%);
}
body.invitation-baptism.invitation-baptism-girl .time::before {
  background-color: rgba(194, 24, 91, 0.25);
}
body.invitation-baptism.invitation-baptism-girl .dark-overlay::before {
  background-color: rgba(194, 24, 91, 0.25);
}

/* Boy theme: blue overlay on all background images */
body.invitation-baptism.invitation-baptism-boy .baptism-header::before {
  background: linear-gradient(to top,
    rgba(0,0,0,0.5) 0%,
    rgba(13, 71, 161, 0.25) 40%,
    rgba(25, 118, 210, 0.2) 100%);
}
body.invitation-baptism.invitation-baptism-boy .time::before {
  background-color: rgba(25, 118, 210, 0.25);
}
body.invitation-baptism.invitation-baptism-boy .dark-overlay::before {
  background-color: rgba(25, 118, 210, 0.25);
}

body.invitation-baptism .baptism-header .banner {
  position: relative;
  z-index: 1;
}

body.invitation-baptism .baptism-header-label {
  letter-spacing: 0.2em;
  animation: baptism-fade-in 0.8s ease-out;
}
body.invitation-baptism .baptism-header-name {
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
  animation: baptism-float-in 1s ease-out 0.2s both;
}

@keyframes baptism-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes baptism-float-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

body.invitation-baptism.invitation-baptism-boy .baptism-header::after {
  left: auto;
  right: 12%;
  animation-delay: 1s;
}

@keyframes baptism-bubble {
  0%, 100% { transform: scale(1) opacity: 0.4; }
  50%      { transform: scale(1.3) opacity: 0.6; }
}

/* Wrapper so bubble container height matches content (no extra blank space after footer) */
.baptism-content-wrap {
  position: relative;
}

/* Global margin bubbles – height = content, so no extra space below footer */
.baptism-margin-bubbles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  overflow-x: hidden;
  max-width: 100%;
}
.baptism-bubble {
  position: absolute;
  width: var(--bubble-size, 20px);
  height: var(--bubble-size, 20px);
  border-radius: 50%;
  background: var(--baptism-primary-soft);
  opacity: 0.22;
  animation: baptism-bubble 5s ease-in-out infinite;
  animation-delay: var(--bubble-delay, 0s);
}
.baptism-bubble-left {
  left: -45px;
  top: var(--bubble-top);
}
.baptism-bubble-right {
  right: -45px;
  top: var(--bubble-top);
}
@media (min-width: 768px) {
  .baptism-bubble-left { left: -35px; }
  .baptism-bubble-right { right: -35px; }
}

/* About section – cards for parents & godparents */
.baptism-about-section {
  background: linear-gradient(to bottom, var(--baptism-primary-pale) 0%, #fff 50%, #fafafa 100%);
  padding: 3rem 0 4rem;
  position: relative;
  overflow: visible;
}

/* Hovering toy decoration – sits at bottom of section, stays on top of next section */
.baptism-about-toy {
  position: absolute;
  width: clamp(80px, 18vw, 140px);
  height: auto;
  object-fit: contain;
  pointer-events: none;
  z-index: 50;
  bottom: -15px;
  left: 5%;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
}
@media (min-width: 768px) {
  .baptism-about-toy {
    bottom: -15px;
    left: 8%;
    animation-delay: 0.5s;
  }
}

/* Toy on RSVP section (baptism) – same treatment as bear on about */
body.invitation-baptism .baptism-rsvp-section {
  position: relative;
  overflow: visible;
}
.baptism-rsvp-toy {
  position: absolute;
  width: clamp(80px, 18vw, 140px);
  height: auto;
  object-fit: contain;
  pointer-events: none;
  z-index: 50;
  bottom: -15px;
  right: 5%;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
}
@media (min-width: 768px) {
  .baptism-rsvp-toy {
    bottom: -15px;
    right: 8%;
  }
}

.baptism-about-intro {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #374151;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  animation: baptism-fade-in 0.7s ease-out;
}

.baptism-about-card {
  background: #fff;
  border-radius: 1.25rem;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  border: 2px solid var(--baptism-primary-pale);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: baptism-fade-in 0.8s ease-out both;
  position: relative;
  overflow: hidden;
}
.baptism-about-card-parents { animation-delay: 0.1s; }
.baptism-about-card-godparents { animation-delay: 0.25s; }
.baptism-about-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

.baptism-about-card-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--baptism-primary);
  margin-bottom: 0.5rem;
}
.baptism-about-card-names {
  font-size: 1.1rem;
  color: #1f2937;
  font-family: 'Merriweather', Georgia, serif;
}

.baptism-about-carousel-img {
  height: min(60vh, 480px);
  object-fit: cover;
  border-radius: 1rem;
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

/* Countdown – accent color */
body.invitation-baptism .time .bg-white {
  border-color: var(--baptism-primary-pale);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
body.invitation-baptism #rsvpform .script,
body.invitation-baptism #rsvpform hr {
  color: var(--baptism-accent);
  border-color: var(--baptism-primary-soft);
}

/* Buttons / links – primary color */
body.invitation-baptism .btn-dark,
body.invitation-baptism a.btn-dark {
  background-color: var(--baptism-primary) !important;
  border-color: var(--baptism-primary) !important;
}
body.invitation-baptism .btn-dark:hover {
  background-color: var(--baptism-accent) !important;
  border-color: var(--baptism-accent) !important;
}

/* Location / menu cards – soft border */
body.invitation-baptism #location .card,
body.invitation-baptism #menu-section .card {
  border: 2px solid var(--baptism-primary-pale);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

/* Organizational details – overlay to match theme */
body.invitation-baptism #organizational-details::before {
  background: linear-gradient(135deg, var(--baptism-primary) 0%, var(--baptism-accent) 100%);
  opacity: 0.2;
}

/* Subtle floating animation for header name on scroll (optional) */
@keyframes baptism-soft-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
body.invitation-baptism .baptism-header-name {
  animation: baptism-float-in 1s ease-out 0.2s both;
}