@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@600;700&display=swap');

/* Family Time theme: loaded after styles.css, so it only overrides what
   differs — the palette, the background images, and the subtitle. */

:root {
  --bg-base: #fff8e8;
  --bg-elevated: #ffeecb;
  --accent-orange: #e2591a;
  --accent-purple: #5b35c9;
  --accent-green: #0f8f5a;
  --text-primary: #2a2145;
  --text-muted: #5a4d7a;
  --border-glow: rgba(226, 89, 26, 0.25);
}

/* The mist/stars texture is an After Dark thing. */
body::before {
  display: none;
}

/* Drop cheerful art at /images/family-hero-bg.png and
   /images/family-footer-bg.png — the gradient shows until they exist. */
.hero {
  background-color: var(--bg-elevated);
  background-image:
    linear-gradient(to bottom, rgba(255, 248, 232, 0) 0%, var(--bg-base) 94%),
    url('/images/family-hero-bg.png'),
    linear-gradient(135deg, #ffd8a8 0%, #ffe9a8 50%, #bfe8ff 100%);
  background-size: cover;
  background-position: center;
}

footer {
  background-color: var(--bg-base);
  background-image:
    linear-gradient(to bottom, var(--bg-base) 0%, rgba(255, 248, 232, 0) 40%),
    url('/images/family-footer-bg.png'),
    linear-gradient(to top, #ffd8a8 0%, var(--bg-base) 100%);
  background-size: cover;
  background-position: center bottom;
}

.subtitle {
  font-family: 'Fredoka', 'Nunito', sans-serif;
  font-weight: 700;
  letter-spacing: 3px;
  color: #ff7a1a;
  text-shadow:
    3px 3px 0 #fff,
    5px 5px 0 #4cb8ff;
}

.checklist li,
.bring-list li {
  border-top-color: rgba(226, 89, 26, 0.15);
}

.cta {
  color: #fff;
  box-shadow: 0 8px 24px rgba(226, 89, 26, 0.3);
}

.mode-toggle {
  background: rgba(255, 255, 255, 0.6);
}

.mode-toggle:hover {
  background: #fff;
}

.map-embed iframe {
  filter: none;
}

.map-embed {
  box-shadow: 0 8px 24px rgba(90, 77, 122, 0.2);
}