/* MBC Midwifery — static export styles
   Mirrors src/styles.css design tokens, animations, and utilities. */

:root {
  --radius: 1rem;

  --cream: oklch(0.972 0.018 85);
  --ivory: oklch(0.985 0.01 85);
  --teal-deep: oklch(0.357 0.0344 220.5);
  --aqua: oklch(0.7227 0.1163 192.6);
  --aqua-soft: oklch(0.93 0.04 192);
  --gold: oklch(0.7497 0.058 95);
  --gold-soft: oklch(0.93 0.028 95);
  --blue: oklch(0.5827 0.143 240);
  --blue-deep: oklch(0.2419 0.1391 274);
  --blue-soft: oklch(0.94 0.03 240);

  --background: var(--cream);
  --foreground: oklch(0.22 0.06 260);
  --card: var(--ivory);
  --card-foreground: oklch(0.22 0.06 260);
  --primary: var(--blue-deep);
  --primary-foreground: var(--cream);
  --secondary: var(--blue-soft);
  --muted: oklch(0.95 0.02 240);
  --muted-foreground: oklch(0.48 0.04 250);
  --accent: var(--aqua-soft);
  --border: oklch(0.88 0.02 240);
  --ring: var(--blue);

  --gradient-hero: linear-gradient(160deg,
    color-mix(in oklab, var(--cream) 100%, transparent) 0%,
    color-mix(in oklab, var(--blue-soft) 70%, var(--cream)) 100%);
  --gradient-cta: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 60%, var(--aqua) 100%);
  --gradient-soft: radial-gradient(ellipse at top, color-mix(in oklab, var(--blue-soft) 80%, transparent), transparent 70%);

  --shadow-soft: 0 20px 60px -30px color-mix(in oklab, var(--blue-deep) 30%, transparent);
  --shadow-glow: 0 30px 80px -40px color-mix(in oklab, var(--blue) 45%, transparent);
  --shadow-card: 0 12px 40px -20px color-mix(in oklab, var(--blue-deep) 22%, transparent);
}

html { scroll-behavior: smooth; }
body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5 {
  font-family: 'Cormorant Garamond', 'Fraunces', ui-serif, Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.font-serif { font-family: 'Cormorant Garamond', Georgia, serif; }
.font-sans { font-family: 'Inter', system-ui, sans-serif; }

/* ----- Backgrounds ----- */
.bg-gradient-hero { background: var(--gradient-hero); }
.bg-gradient-cta { background: var(--gradient-cta); }
.bg-gradient-soft { background: var(--gradient-soft); }

/* ----- Shadows ----- */
.shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-glow { box-shadow: var(--shadow-glow); }
.shadow-card { box-shadow: var(--shadow-card); }

/* ----- Glass ----- */
.glass {
  background-color: color-mix(in oklab, var(--ivory) 70%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* ----- Blob shapes ----- */
.blob   { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; }
.blob-2 { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; }

/* ----- Animations ----- */
@keyframes float-slow {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(8px, -22px, 0) rotate(8deg); }
}
@keyframes float-slower {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(-14px, -16px, 0) rotate(-10deg); }
}
@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(20px, -30px, 0) rotate(15deg) scale(1.05); }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.85; }
}
@keyframes scroll-dot {
  0%   { transform: translate(-50%, -100%); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translate(-50%, 400%); opacity: 0; }
}
@keyframes marquee-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.animate-float-slow   { animation: float-slow 14s ease-in-out infinite; }
.animate-float-slower { animation: float-slower 20s ease-in-out infinite; }
.animate-drift        { animation: drift 18s ease-in-out infinite; }
.animate-shimmer      { animation: shimmer 6s ease-in-out infinite; }
.animate-scroll-dot   { animation: scroll-dot 2.4s ease-in-out infinite; }
.animate-marquee      { animation: marquee-x 40s linear infinite; }

/* ----- Reveal on scroll ----- */  

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ----- Floating botanicals & squiggle wrappers ----- */
.floating-botanicals,
.squiggle-path {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* ----- Wave divider wrapper ----- */
.wave-divider { line-height: 0; }
.wave-divider svg { display: block; height: 80px; width: 100%; }
@media (min-width: 768px) {
  .wave-divider svg { height: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  .animate-float-slow,
  .animate-float-slower,
  .animate-drift,
  .animate-shimmer,
  .animate-scroll-dot,
  .animate-marquee { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}






/* Containers */
.container-sm{max-width:48rem;margin:0 auto;padding:0 1.5rem}
.container-md{max-width:64rem;margin:0 auto;padding:0 1.5rem}
.container-lg{max-width:72rem;margin:0 auto;padding:0 1.5rem}
.container-xl{max-width:80rem;margin:0 auto;padding:0 1.5rem}

/* Service Hero */
.service-hero{position:relative;overflow:hidden;background:var(--gradient-hero);padding:9rem 0 6rem}
@media(min-width:640px){.service-hero{padding-top:11rem}}
.service-hero-grid{display:grid;gap:3rem;align-items:center}
@media(min-width:1024px){.service-hero-grid{grid-template-columns:1.2fr 1fr}}
.eyebrow{margin-bottom:.75rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.3em;color:var(--gold)}
.hero-title{font-size:2.25rem;line-height:1.05;color:var(--primary)}
@media(min-width:640px){.hero-title{font-size:3rem}}
@media(min-width:1024px){.hero-title{font-size:3.75rem}}
.text-aqua{color:var(--aqua)}
.hero-lede{margin-top:1.5rem;max-width:36rem;font-size:1rem;line-height:1.7;color:var(--muted-foreground)}
@media(min-width:640px){.hero-lede{font-size:1.125rem}}
.ceu-badge{margin-top:1.5rem;display:inline-flex;align-items:center;gap:.5rem;border-radius:9999px;border:1px solid color-mix(in oklab,var(--gold) 40%,transparent);background:var(--gold-soft);padding:.5rem 1.25rem;font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--primary)}
.ceu-badge svg{color:var(--gold)}

/* Medallion */
.hero-medallion{position:relative;margin:0 auto;display:grid;place-items:center;height:18rem;width:18rem;border-radius:9999px;background:color-mix(in oklab,var(--cream) 60%,transparent);box-shadow:var(--shadow-card);backdrop-filter:blur(8px);border:1px solid color-mix(in oklab,var(--gold) 30%,transparent)}
@media(min-width:640px){.hero-medallion{height:20rem;width:20rem}}
.medallion-ring{position:absolute;inset:1rem;border-radius:9999px;border:1px dashed color-mix(in oklab,var(--gold) 40%,transparent);animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.medallion-fill{position:absolute;inset:2.5rem;border-radius:9999px;background:var(--gradient-cta);opacity:.9;box-shadow:var(--shadow-glow)}
.medallion-icon{position:relative;color:var(--primary-foreground)}

/* Intro */
.intro-section{padding:5rem 0}
.intro-section .container-sm{display:flex;flex-direction:column;gap:1.5rem}
.intro-paragraph{font-size:1rem;line-height:1.9;color:var(--foreground);opacity:.85}
@media(min-width:640px){.intro-paragraph{font-size:1.125rem}}

/* Highlights */
.highlights-section{background:var(--ivory);padding:6rem 0}
.section-title{font-size:1.875rem;color:var(--primary)}
@media(min-width:640px){.section-title{font-size:2.25rem}}
.highlights-grid{margin-top:3.5rem;display:grid;gap:1.25rem}
@media(min-width:640px){.highlights-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.highlights-grid{grid-template-columns:repeat(3,1fr)}}
.highlight-card{height:100%;border-radius:1.75rem;border:1px solid color-mix(in oklab,var(--gold) 25%,transparent);background:var(--card);padding:1.75rem;box-shadow:var(--shadow-card);transition:all .5s}
.highlight-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-glow)}
.highlight-icon{display:grid;place-items:center;height:2.75rem;width:2.75rem;border-radius:1rem;background:var(--aqua-soft);color:var(--aqua);transition:transform .5s}
.highlight-card:hover .highlight-icon{transform:rotate(6deg) scale(1.1)}
.highlight-card h3{margin-top:1.25rem;font-size:1.25rem;color:var(--primary)}
.highlight-card p{margin-top:.5rem;font-size:.875rem;line-height:1.7;color:var(--muted-foreground)}

/* Callouts */
.callouts-section{padding:6rem 0}
.callouts-section .container-md{display:flex;flex-direction:column;gap:1.5rem}
.callout-card{position:relative;overflow:hidden;border-radius:2rem;border:1px solid color-mix(in oklab,var(--gold) 30%,transparent);background:linear-gradient(to bottom right,var(--cream),var(--ivory));padding:2.5rem;box-shadow:var(--shadow-card);transition:all .5s}
.callout-card:hover{box-shadow:var(--shadow-glow)}
.callout-blob{position:absolute;right:-5rem;top:-5rem;height:15rem;width:15rem;border-radius:9999px;background:color-mix(in oklab,var(--aqua) 10%,transparent);transition:transform .7s}
.callout-card:hover .callout-blob{transform:scale(1.25)}
.callout-content{position:relative}
.callout-content h3{font-size:1.5rem;color:var(--primary)}
@media(min-width:640px){.callout-content h3{font-size:1.875rem}}
.callout-content p{margin-top:1rem;max-width:40rem;font-size:1rem;line-height:1.7;color:var(--foreground);opacity:.8}
.callout-cta{margin-top:1.5rem;display:inline-flex;align-items:center;gap:.5rem;border-radius:9999px;background:var(--primary);padding:.75rem 1.5rem;font-size:.875rem;font-weight:500;color:var(--primary-foreground);text-decoration:none;box-shadow:var(--shadow-soft);transition:all .3s}
.callout-cta:hover{transform:scale(1.03);box-shadow:var(--shadow-glow)}

/* CTA section */
.cta-section{padding:5rem 0}
.cta-title{font-size:1.875rem;color:var(--primary-foreground)}
@media(min-width:640px){.cta-title{font-size:2.25rem}}
.cta-sub{margin:1rem auto 0;max-width:36rem;color:var(--primary-foreground);opacity:.8}
.btn-cream{margin-top:2rem;display:inline-flex;align-items:center;gap:.5rem;border-radius:9999px;background:var(--cream);padding:.875rem 2rem;font-size:.875rem;font-weight:500;color:var(--primary);text-decoration:none;box-shadow:var(--shadow-soft);transition:all .3s}
.btn-cream:hover{transform:scale(1.03);background:var(--ivory)}

/* Services list (hub) */
.services-list{margin-top:4rem;display:flex;flex-direction:column;gap:1.5rem}
.service-row{display:grid;align-items:center;gap:1.5rem;border-radius:2rem;border:1px solid color-mix(in oklab,var(--gold) 25%,transparent);background:var(--card);padding:2rem 2.5rem;box-shadow:var(--shadow-card);text-decoration:none;color:inherit;transition:all .5s}
@media(min-width:640px){.service-row{grid-template-columns:auto 1fr auto}}
.service-row:hover{transform:translateY(-4px);border-color:color-mix(in oklab,var(--aqua) 40%,transparent);box-shadow:var(--shadow-glow)}
.service-row-left{display:flex;align-items:center;gap:1.5rem}
.service-num{font-size:3rem;color:var(--gold);opacity:.6;transition:opacity .5s}
@media(min-width:640px){.service-num{font-size:3.75rem}}
.service-row:hover .service-num{opacity:1}
.service-icon-circle{display:grid;place-items:center;height:4rem;width:4rem;border-radius:9999px;background:var(--aqua-soft);color:var(--aqua);transition:all .5s}
.service-icon-circle svg{width:1.75rem;height:1.75rem}
.service-row:hover .service-icon-circle{transform:scale(1.1) rotate(6deg)}
.service-row-body h3{font-size:1.5rem;color:var(--primary);transition:color .3s}
@media(min-width:640px){.service-row-body h3{font-size:1.875rem}}
.service-row:hover .service-row-body h3{color:var(--aqua)}
.service-row-body p{margin-top:.5rem;max-width:40rem;font-size:.875rem;line-height:1.7;color:var(--muted-foreground)}
@media(min-width:640px){.service-row-body p{font-size:1rem}}
.service-row-arrow{display:none;place-items:center;height:3.5rem;width:3.5rem;border-radius:9999px;background:var(--primary);color:var(--primary-foreground);box-shadow:var(--shadow-soft);transition:all .5s}
@media(min-width:640px){.service-row-arrow{display:grid}}
.service-row:hover .service-row-arrow{background:var(--aqua);transform:rotate(-25deg)}

/* Testimonial */
.testimonial-card{position:relative;border-radius:2rem;border:1px solid color-mix(in oklab,var(--gold) 25%,transparent);background:var(--card);padding:2.5rem;box-shadow:var(--shadow-card)}
@media(min-width:640px){.testimonial-card{padding:3.5rem}}
.testimonial-card blockquote{font-size:1.25rem;line-height:1.7;color:var(--primary)}
@media(min-width:640px){.testimonial-card blockquote{font-size:1.5rem}}
.testimonial-card figcaption{margin-top:1.5rem;font-size:.875rem;text-transform:uppercase;letter-spacing:.25em;color:var(--gold)}
.quote-icon{position:absolute;top:-1.25rem;left:2.5rem;display:grid;place-items:center;border-radius:9999px;background:var(--gradient-cta);padding:.75rem;color:var(--primary-foreground);box-shadow:var(--shadow-soft)}
.quote-icon svg{width:1.5rem !important;height:1.5rem !important}

/* Floating botanicals placeholder */
.floating-botanicals{pointer-events:none;position:absolute;inset:0;overflow:hidden}