/* Bright Minds Learning — Phase 1 site
   Minimal custom CSS. Tailwind handles the heavy lifting via the CDN.
   Light mode only. Inter font set globally. */

html { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
body { font-family: inherit; }

/* Smooth focus rings */
:focus-visible { outline: 2px solid #0E7490; outline-offset: 2px; }

/* Slightly tighter heading rhythm */
h1, h2, h3 { letter-spacing: -0.01em; }
h1 { letter-spacing: -0.02em; }

/* Card hover-lift: gentle elevation for bordered cards */
.card-lift { transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease; }
.card-lift:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -14px rgba(15, 23, 42, .22); border-color: #0E7490; }

/* Image zoom: wrap an <img> with .img-zoom for a slow scale on hover */
.img-zoom { overflow: hidden; }
.img-zoom > img { transition: transform .6s ease; }
.img-zoom:hover > img { transform: scale(1.05); }

/* Subtle dot-grid texture; layer over a tinted background */
.dot-grid {
  background-image: radial-gradient(rgba(14, 116, 144, .14) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* Soft glow ring for hero image */
.glow-ring { box-shadow: 0 0 0 1px rgba(14, 116, 144, .2), 0 30px 60px -28px rgba(14, 116, 144, .35); }

/* Wave divider — drop between two sections to soften the hard edge.
   Place inside a wrapper that has the *next* section's background color.
   Default fill is white (light section above slate-50 / amber section below).
   Override with --wave-fill on the element to change color. */
.wave-divider {
  --wave-fill: #ffffff;
  display: block;
  width: 100%;
  height: 36px;
  margin: 0;
  background:
    radial-gradient(circle at 18px 0, var(--wave-fill) 18px, transparent 19px) repeat-x;
  background-size: 36px 36px;
  background-position: 0 -18px;
}
@media (min-width: 768px) {
  .wave-divider { height: 48px; background-size: 48px 48px; background-position: 0 -24px; }
  .wave-divider { background-image: radial-gradient(circle at 24px 0, var(--wave-fill) 24px, transparent 25px); }
}

/* Snap-scroll lab strip: horizontal swipe gallery, no JS */
.snap-strip {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 1.5rem;
  -webkit-overflow-scrolling: touch;
  padding: .25rem 1.5rem 1.25rem;
  scrollbar-width: thin;
  scrollbar-color: #0E7490 #e2e8f0;
}
.snap-strip::-webkit-scrollbar { height: 8px; }
.snap-strip::-webkit-scrollbar-track { background: #e2e8f0; border-radius: 4px; }
.snap-strip::-webkit-scrollbar-thumb { background: #0E7490; border-radius: 4px; }
.snap-card {
  flex: 0 0 78%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
@media (min-width: 640px)  { .snap-card { flex-basis: 48%; } }
@media (min-width: 1024px) { .snap-card { flex-basis: 32%; } }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .card-lift, .img-zoom > img { transition: none; }
  .card-lift:hover { transform: none; }
  .img-zoom:hover > img { transform: none; }
}

/* Print: keep links readable but drop nav/footer if anyone prints a page */
@media print {
  header, footer { display: none; }
  body { background: white; color: black; }
  a { color: #0E7490; text-decoration: underline; }
}