/*
Theme Name: Luna Care (Hello Elementor Child)
Theme URI: https://lunacare.co.ke/
Description: Granular Elementor Child Theme for Luna Care Colposcopy & Medical Center. Replaces the default Hello Elementor header/footer with the Luna Care Celestial Header & Footer, provides organic masks (.luna-sanctuary-arch, .luna-soft-pebble, .luna-ambient-float), celestial moon/star/lotus animations, and Call-Only Booking modal integration.
Author: Luna Care Design Team
Template: hello-elementor
Version: 3.0.0
Text Domain: hello-elementor-luna-care
*/

:root {
  --luna-blue: #82A8F8;
  --luna-blue-dark: #5B84E8;
  --luna-blue-deep: #2E58C8;
  --luna-blue-soft: #EEF3FE;
  --luna-blue-tint: #F6F9FF;
  --luna-pink: #F49DB6;
  --luna-pink-dark: #E07A97;
  --luna-pink-soft: #FCE8EE;
  --luna-pink-tint: #FFF6F9;
  --luna-indigo: #4B4578;
  --luna-indigo-deep: #2C274E;
  --luna-slate: #4F5B7C;
  --luna-cream: #FFFCFA;
  --luna-anim-speed: 1;

  --e-global-color-primary: var(--luna-indigo);
  --e-global-color-secondary: var(--luna-blue);
  --e-global-color-text: var(--luna-slate);
  --e-global-color-accent: var(--luna-pink);
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--luna-slate);
  background-color: var(--luna-cream);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(130, 168, 248, 0.10) 0%, transparent 38%),
    radial-gradient(circle at 88% 22%, rgba(244, 157, 182, 0.12) 0%, transparent 42%);
  overflow-x: hidden;
  margin: 0;
}

/* Hide default WordPress page title above Elementor canvas */
.page-header, .entry-header {
  display: none !important;
}

h1, h2, h3, .font-editorial, .elementor-heading-title {
  font-family: 'Fraunces', Georgia, serif;
}

.font-script {
  font-family: 'Caveat', cursive !important;
}

/* Sticky Header Support */
.luna-sticky-header {
  position: sticky;
  top: 0;
  z-index: 999;
  backdrop-filter: blur(14px);
  background-color: rgba(255, 255, 255, 0.90) !important;
  box-shadow: 0 4px 24px -6px rgba(75, 69, 120, 0.08);
}

/* ==========================================================================
   ELEMENTOR REUSABLE ORGANIC MASK & ELEVATION CLASSES
   ========================================================================== */
.luna-sanctuary-arch,
.luna-sanctuary-arch img,
.luna-sanctuary-arch .elementor-widget-container {
  border-radius: 220px 220px 44px 44px !important;
  overflow: hidden;
}

.luna-soft-pebble,
.luna-soft-pebble > .elementor-widget-wrap,
.luna-soft-pebble > .elementor-column-wrap {
  border-radius: 36px 56px 36px 56px !important;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.luna-soft-pebble:hover,
.luna-soft-pebble:hover > .elementor-widget-wrap {
  border-radius: 52px 36px 52px 36px !important;
  transform: translateY(-5px);
}

.luna-organic-petal,
.luna-organic-petal img {
  border-radius: 46% 54% 44% 56% / 48% 44% 56% 52% !important;
  transition: border-radius 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s ease;
}

.luna-ambient-float,
.luna-ambient-float > .elementor-widget-wrap,
.luna-ambient-float > .elementor-column-wrap {
  box-shadow: 0 24px 60px -15px rgba(75, 69, 120, 0.10), 0 8px 24px -8px rgba(244, 157, 182, 0.12) !important;
  border: none !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.luna-ambient-float:hover {
  transform: translateY(-4px);
}

/* Smooth rounded corners on Elementor Accordion items */
.luna-faq-accordion .elementor-accordion-item {
  border: none !important;
  border-radius: 24px !important;
  margin-bottom: 14px !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
  box-shadow: 0 14px 36px -10px rgba(75, 69, 120, 0.08) !important;
}

/* ==========================================================================
   DYNAMIC CELESTIAL & BOTANICAL ANIMATIONS (Moon, Stars, Blooming Lotus)
   ========================================================================== */
@keyframes moonFloat {
  0%, 100% { transform: translateY(0px) rotate(-4deg); }
  50% { transform: translateY(-14px) rotate(4deg); }
}
@keyframes starTwinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.85) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.18) rotate(12deg); }
}
@keyframes lotusBreathe {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.90; }
  50% { transform: scale(1.04) rotate(1.5deg); opacity: 1; }
}
@keyframes petalDrift {
  0%, 100% { transform: translate(0px, 0px) rotate(0deg); }
  33% { transform: translate(6px, -10px) rotate(6deg); }
  66% { transform: translate(-5px, -4px) rotate(-4deg); }
}

.luna-animate-moon {
  animation: moonFloat calc(8s / var(--luna-anim-speed, 1)) ease-in-out infinite;
}
.luna-animate-star {
  animation: starTwinkle calc(4.2s / var(--luna-anim-speed, 1)) ease-in-out infinite;
}
.luna-animate-lotus {
  animation: lotusBreathe calc(7s / var(--luna-anim-speed, 1)) ease-in-out infinite;
}
.luna-animate-petal {
  animation: petalDrift calc(9s / var(--luna-anim-speed, 1)) ease-in-out infinite;
}

body.luna-disable-motion .luna-animate-moon,
body.luna-disable-motion .luna-animate-star,
body.luna-disable-motion .luna-animate-lotus,
body.luna-disable-motion .luna-animate-petal {
  animation: none !important;
}