/* Direction D: Bright Day body + A mega menu + palm motif (Eric, 2026-10-09) */

/* Theme tokens */
:root {
  --util-bg: var(--navy-deep);
  --util-ink: #fff;
  --hdr-bg: #fff;
  --hdr-ink: var(--navy);
  --hdr-line: rgba(0, 51, 88, .08);
  --mega-bg: #fff;
  --mega-ink: var(--ink);
  --mega-muted: #4a5b6c;
  --tab-bg: var(--mist);
  --tab-ink: var(--navy);
  --tab-on-bg: var(--navy);
  --tab-on-ink: #fff;
  --chip-bg: var(--mist);
  --chip-ink: var(--teal-ink);
  --feature-bg: var(--mist);
  --feature-ink: var(--ink);
  --foot-bg: var(--paper);
  --foot-ink: var(--navy);
  --accent: var(--aqua);
}

body {
  background: #fff;
  color: var(--ink);
  background-image: none;
}

h1, h2, h3 {
  color: var(--navy);
  font-family: Atma, sans-serif;
}

h2 {
  font-weight: 700;
}

.utility {
  background: var(--mist);
  color: var(--navy);
}

.site-header {
  background: #fff;
  color: var(--navy);
  border-bottom-color: var(--hdr-line);
}

.brand,
.brand img,
.nav__link,
.nav__toggle,
.menu-btn {
  color: var(--navy);
}

.hero {
  height: clamp(520px, 78vh, 760px);
  margin: 18px clamp(16px, 4vw, 32px) 0;
  border-radius: 30px;
  overflow: visible;
  isolation: isolate;
}

.hero:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -12px;
  bottom: -18px;
  width: 180px;
  height: 32px;
  background: var(--lime);
  clip-path: polygon(0 0, 10% 100%, 20% 0, 30% 100%, 40% 0, 50% 100%, 60% 0, 70% 100%, 80% 0, 90% 100%, 100% 0, 100% 100%, 0 100%);
}

.hero > img {
  border-radius: 30px;
}

.hero h1 span {
  background: #fff;
  color: var(--navy);
}

.hero h1 span:nth-child(3) {
  background: var(--lime);
  color: var(--navy);
}

.hero h1 span:before {
  background: linear-gradient(135deg, transparent 50%, var(--lime) 51%) 0 0 / 11px 14px repeat-y;
}

.today-card {
  background: #e6f9f4;
  color: var(--navy);
}

.today-card a {
  background: #fff;
  color: var(--navy);
}

.welcome {
  background: #fff;
}

.band {
  background: var(--mist);
}

.band:before,
.events:before,
.newsletter:before,
.site-footer:before {
  height: 10px;
  top: -9px;
  background: linear-gradient(135deg, transparent 50%, var(--mist) 51%) 0 0 / 20px 10px repeat-x;
}

.ticket-card {
  border-radius: 58% 42% 45% 55% / 50% 55% 45% 50%;
}

.ticket-card .button {
  background: var(--navy);
  color: #fff;
}

.animals {
  background: #fff;
}

.animal-row img {
  border-radius: 58% 42% 45% 55% / 50% 55% 45% 50%;
}

.animal-row span {
  color: var(--navy);
}

.elephant-story {
  background: #e6f9f4;
}

.story-card {
  border-radius: 58% 42% 45% 55% / 50% 55% 45% 50%;
}

.promos a {
  border-radius: 58% 42% 45% 55% / 50% 55% 45% 50%;
}

.events {
  background: var(--navy);
}

.news {
  background: #fff;
}

.newsletter {
  background: #e6f9f4;
}

.newsletter:before {
  background: linear-gradient(135deg, transparent 50%, #e6f9f4 51%) 0 0 / 20px 10px repeat-x;
}

.site-footer {
  background: var(--navy-deep);
}

.site-footer:before {
  background: linear-gradient(135deg, transparent 50%, var(--aqua) 51%) 0 0 / 20px 10px repeat-x;
}

.quick-bar {
  background: var(--mist);
  color: var(--navy);
}

@media (max-width: 759px) {
  .hero {
    margin-top: 12px;
    margin-inline: 16px;
  }

  .hero:before {
    width: 120px;
  }
}
.hero::after { border-radius: 30px; }
/* Blobs clip text: keep true blobs on text-free photos only; cards get a leaf corner instead */
.ticket-card { border-radius: 28px 28px 88px 28px; }
.story-card { border-radius: 28px 72px 28px 28px; }
.promos a { border-radius: 36px 110px 36px 110px; }