/* ================================================================
   Cave Spring Baptist Preschool — playful & warm
   Palette drawn from the pencil-mountain logo:
   mint, coral, navy on a warm cream canvas.
   ================================================================ */

:root {
  /* color */
  --cream:      oklch(0.983 0.012 85);
  --cream-deep: oklch(0.955 0.02 80);
  --mint:       oklch(0.91 0.062 185);
  --mint-soft:  oklch(0.955 0.035 185);
  --mint-bg:    oklch(0.89 0.105 185);
  --coral:      oklch(0.70 0.152 22);
  --coral-deep: oklch(0.62 0.16 22);
  --coral-soft: oklch(0.93 0.045 22);
  --coral-bg:   oklch(0.88 0.085 25);
  --sun:        oklch(0.88 0.125 90);
  --navy:       oklch(0.44 0.072 249);
  --navy-deep:  oklch(0.335 0.058 249);
  --ink:        oklch(0.30 0.045 249);
  --ink-soft:   oklch(0.46 0.035 249);

  /* type */
  --font-display: "Baloo 2", "Trebuchet MS", sans-serif;
  --font-body: "Nunito", "Segoe UI", sans-serif;
  --text-xl: clamp(2.1rem, 1.4rem + 3.2vw, 3.4rem);
  --text-lg: clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem);
  --text-md: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);

  /* space (4pt scale) */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --space-xl: clamp(4rem, 3rem + 4vw, 7rem);

  --radius: 1.25rem;
  --shadow: 0 10px 30px -12px oklch(0.44 0.072 249 / 0.28);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--navy-deep);
  line-height: 1.15;
  margin: 0 0 var(--space-md);
}

p { margin: 0 0 1.1em; max-width: 68ch; }

a { color: var(--coral-deep); }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--navy); color: var(--cream);
  padding: 0.6rem 1rem; border-radius: 0 0 0.75rem 0; z-index: 99;
}
.skip-link:focus { left: 0; top: 0; }

/* ---------- page transition wipe (tri-color crayon stripes) ---------- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none;
  background: linear-gradient(105deg,
    var(--mint) 0 34%,
    var(--coral) 34% 67%,
    var(--navy-deep) 67% 100%);
  transform: scaleX(0); transform-origin: left;
}
body.page-exit::after {
  transform: scaleX(1);
  transition: transform 0.38s cubic-bezier(0.76, 0, 0.24, 1);
}
html.wiping body::after { transform: scaleX(1); transform-origin: right; }
html.wiping body.page-enter::after {
  transform: scaleX(0);
  transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1) 0.05s;
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--cream);
  transition: box-shadow 0.3s ease;
}
.site-header.scrolled { box-shadow: 0 4px 20px -8px oklch(0.44 0.072 249 / 0.25); }

.header-inner {
  max-width: 72rem; margin: 0 auto;
  padding: 0.65rem clamp(1rem, 4vw, 2.5rem);
  display: flex; align-items: center; gap: var(--space-md);
}

.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.brand img { width: 54px; height: 54px; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.brand:hover img { transform: rotate(-8deg) scale(1.06); }
.brand-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.15rem; line-height: 1.1; color: var(--navy-deep);
}

.site-nav { margin-left: auto; }
.site-nav ul { list-style: none; display: flex; gap: clamp(0.25rem, 1.5vw, 1rem); margin: 0; padding: 0; align-items: center; }
.site-nav a {
  display: inline-block; padding: 0.45rem 0.8rem;
  font-weight: 700; text-decoration: none; color: var(--navy);
  border-radius: 999px; position: relative;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.site-nav a:hover { background: var(--mint-soft); color: var(--navy-deep); }
.site-nav a[aria-current="page"] { background: var(--mint); color: var(--navy-deep); }
.site-nav .nav-cta {
  background: var(--coral); color: oklch(0.99 0.005 22);
  box-shadow: 0 4px 12px -4px oklch(0.62 0.16 22 / 0.5);
}
.site-nav .nav-cta:hover { background: var(--coral-deep); color: oklch(0.99 0.005 22); transform: translateY(-1px); }

.nav-toggle {
  display: none; margin-left: auto;
  background: none; border: 2px solid var(--navy); border-radius: 0.6rem;
  padding: 0.35rem 0.6rem; font: inherit; font-weight: 800; color: var(--navy); cursor: pointer;
}

@media (max-width: 46rem) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--cream); padding: 0.5rem 1rem 1.25rem;
    box-shadow: 0 16px 24px -12px oklch(0.44 0.072 249 / 0.3);
  }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0.25rem; }
  .site-nav a { display: block; text-align: center; padding: 0.7rem; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(50rem 26rem at 88% -12%, oklch(0.92 0.07 22), transparent 62%),
    radial-gradient(44rem 24rem at -8% 14%, oklch(0.92 0.075 185), transparent 60%),
    var(--cream);
  overflow: hidden;
}
.hero-inner {
  position: relative; z-index: 1;
  max-width: 72rem; margin: 0 auto;
  padding: var(--space-xl) clamp(1rem, 4vw, 2.5rem) calc(var(--space-xl) * 0.8);
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.hero-inner.hero-solo { grid-template-columns: 1fr; padding-bottom: var(--space-lg); }
.hero h1 { font-size: var(--text-xl); }
.hero .lede { font-size: var(--text-md); color: var(--ink-soft); font-weight: 600; }

.hero-art { justify-self: center; position: relative; }
.hero-art img {
  width: min(24rem, 70vw);
  filter: drop-shadow(0 18px 30px oklch(0.44 0.072 249 / 0.25));
}

@media (max-width: 52rem) {
  .hero-inner { grid-template-columns: 1fr; text-align: left; }
  .hero-art { order: -1; }
  .hero-art img { width: min(15rem, 55vw); }
}

/* floating ambient shapes (injected by main.js) */
.drift {
  position: absolute; border-radius: 50%; pointer-events: none;
  opacity: 0.55; z-index: 0;
  animation: drift var(--dur, 10s) ease-in-out var(--delay, 0s) infinite alternate;
}
@keyframes drift {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(14px, -22px) rotate(8deg); }
}

/* squiggle under key headings — draws itself in */
.squiggle { display: block; width: 9rem; height: 0.75rem; margin-top: 0.35rem; color: var(--coral); }
.squiggle path.draw {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: draw 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.45s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; text-decoration: none; font-weight: 800;
  font-family: var(--font-display); font-size: 1.05rem;
  padding: 0.8rem 1.8rem; border-radius: 999px;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, background-color 0.2s ease;
}
.btn-primary {
  background: var(--coral); color: oklch(0.99 0.005 22);
  box-shadow: 0 8px 20px -8px oklch(0.62 0.16 22 / 0.6);
}
.btn-primary:hover { background: var(--coral-deep); transform: translateY(-3px); box-shadow: 0 14px 26px -10px oklch(0.62 0.16 22 / 0.65); }
.btn-secondary {
  background: transparent; color: var(--navy-deep);
  box-shadow: inset 0 0 0 2.5px var(--navy);
}
.btn-secondary:hover { background: var(--navy); color: var(--cream); transform: translateY(-3px); }
.btn:active { transform: translateY(0); }

/* ---------- sections ---------- */
.section { padding: var(--space-xl) clamp(1rem, 4vw, 2.5rem); }
.section-inner { max-width: 72rem; margin: 0 auto; }
.section-mint { background: var(--mint-bg); }
.section-coral { background: var(--coral-bg); }
.section-navy { background: var(--navy-deep); color: oklch(0.93 0.02 200); }
.section-navy h2, .section-navy h3 { color: oklch(0.97 0.015 185); }

/* ---------- wave dividers ----------
   background = color of the section ABOVE
   currentColor (path fill) = color of the section BELOW  */
.wave { display: block; width: 100%; height: clamp(2.5rem, 6vw, 4.5rem); margin-bottom: -1px; }
.wave path { fill: currentColor; }
.from-cream { background: var(--cream); }
.from-mint  { background: var(--mint-bg); }
.from-coral { background: var(--coral-bg); }
.to-cream { color: var(--cream); }
.to-mint  { color: var(--mint-bg); }
.to-coral { color: var(--coral-bg); }
.to-navy  { color: var(--navy-deep); }

.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.split.split-uneven { grid-template-columns: 1.2fr 0.8fr; }
@media (max-width: 52rem) { .split, .split.split-uneven { grid-template-columns: 1fr; } }

/* arch-shaped photos echo the pencil mountains in the logo */
.arch {
  border-radius: 40% 40% var(--radius) var(--radius) / 28% 28% var(--radius) var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.arch img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.arch:hover img { transform: scale(1.05); }
.arch-tall { aspect-ratio: 3 / 4; }
.arch-wide { aspect-ratio: 4 / 3; }

.photo-tilt-l { transform: rotate(-2deg); }
.photo-tilt-r { transform: rotate(2deg); }

/* offering list — crayon-dot bullets (on saturated mint) */
.offer-list { list-style: none; margin: var(--space-md) 0; padding: 0; display: grid; gap: 0.85rem; }
.offer-list li {
  display: flex; align-items: center; gap: 0.9rem;
  font-weight: 800; font-size: 1.1rem; color: var(--navy-deep);
}
.offer-list .dot {
  flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.2rem;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.offer-list li:hover .dot { transform: scale(1.18) rotate(-8deg); }
.offer-list li:nth-child(3n + 1) .dot { background: var(--cream); color: var(--navy-deep); }
.offer-list li:nth-child(3n + 2) .dot { background: var(--coral); color: oklch(0.99 0.005 22); }
.offer-list li:nth-child(3n + 3) .dot { background: var(--navy); color: var(--mint); }

/* info panel (calendar dates) */
.panel {
  background: var(--cream); border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: var(--shadow);
}
.date-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.date-list li { display: flex; gap: 1rem; align-items: baseline; }
.date-list .mark {
  flex: none; font-family: var(--font-display); font-weight: 700; font-size: 1.6rem;
  color: var(--coral);
}

/* ---------- footer ---------- */
.site-footer { background: var(--navy-deep); color: oklch(0.9 0.025 200); }
.footer-inner {
  max-width: 72rem; margin: 0 auto;
  padding: var(--space-lg) clamp(1rem, 4vw, 2.5rem);
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-lg);
  align-items: center;
}
.site-footer img { width: 92px; }
.site-footer address { font-style: normal; line-height: 1.8; }
.site-footer a { color: var(--mint); text-decoration-thickness: 1px; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; text-align: right; }
.footer-nav a { color: oklch(0.9 0.025 200); font-weight: 700; text-decoration: none; }
.footer-nav a:hover { color: var(--mint); }
@media (max-width: 46rem) {
  .footer-inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .footer-nav ul { text-align: center; }
}

/* ---------- motion ---------- */
.reveal { opacity: 0; transform: translateY(26px); }
.revealed {
  opacity: 1; transform: none;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.floaty { animation: float 6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .floaty, .drift, .squiggle path.draw { animation: none; }
  .squiggle path.draw { stroke-dasharray: none; stroke-dashoffset: 0; }
  .btn, .site-nav a, .brand img, .arch img, .offer-list .dot { transition: none; }
  body::after { display: none; }
}