/*
Theme Name: Boat Party Theme
Description: Converted from single HTML file
Author: Example
Version: 1.0
*/

:root {
  --color-primary: #ec4899;
  --color-primary-dark: #db2777;
  --color-secondary: #5668f5;
  --color-background: #f5f5f0;
  --font-base: 'Montserrat', sans-serif;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 5rem;
}

/* ------------------------------------------------------------------
   Base typography & layout
-------------------------------------------------------------------*/
body { font-family: var(--font-base); }

.section {
  padding: var(--space-lg) var(--space-sm);
}
@media (min-width: 640px) {
  .section { padding-left: var(--space-md); padding-right: var(--space-md); }
}
@media (min-width: 1024px) {
  .section { padding-left: var(--space-lg); padding-right: var(--space-lg); }
}
.section-title { margin-bottom: var(--space-md); text-align: center; }

h1 { font-weight: 900; }
h2 { font-weight: 800; }
h3 { font-weight: 700; }

/* ------------------------------------------------------------------
   Global utilities
-------------------------------------------------------------------*/
html { scroll-behavior: smooth; }

.parallax {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  position: relative;
}
@media (max-width: 768px) {
  .parallax { background-attachment: scroll; }
}

/* Animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fadeInUp      { opacity: 0; transform: translateY(30px); }
.animate-fadeInUp.visible { animation: fadeInUp 0.8s ease-out forwards; }
.animation-delay-200   { animation-delay: 0.2s; }
.animation-delay-400   { animation-delay: 0.4s; }

/* Sticky CTA */
.sticky-cta {
  position: fixed; bottom: 20px; right: 20px; z-index: 1000;
  opacity: 0; transform: translateY(100px);
  transition: all 0.3s ease;
}
.sticky-cta.visible { opacity: 1; transform: translateY(0); }

/* Hover image effect */
.img-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.img-hover:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Footer wave */
.wave {
  position: absolute; top: -1px; left: 0; width: 100%; height: 80px;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113.64,31.08,1200,41.07V0H0Z" fill="%23ec4899"/></svg>');
  background-size: cover;
}

/* Swiper navigation colours */
.swiper-button-prev,
.swiper-button-next { color: var(--color-primary); }
.swiper-pagination-bullet-active { background: var(--color-primary); }

/* Gallery tweaks */
.mySwiper {
  position: relative;
  padding-bottom: 3rem; /* space for pagination bullets */
}
.mySwiper .swiper-button-prev,
.mySwiper .swiper-button-next {
  top: 50%;
  transform: translateY(-50%);
}
.mySwiper .swiper-slide img {
  width: 100%;
  height: 12rem;
  object-fit: cover;
  border-radius: 0.75rem;
}
@media (max-width: 768px) {
  .mySwiper .swiper-button-prev,
  .mySwiper .swiper-button-next {
    display: none; /* hide arrows on mobile */
  }
  .mySwiper .swiper-slide {
    padding-bottom: 3rem; /* prevent bullets overlapping buttons */
  }
}
@media (min-width: 768px) {
  .mySwiper .swiper-slide img { height: 16rem; }
  .mySwiper { padding-bottom: 0; }
}

/* Themed colours as utility classes */
.bg-ivory         { background-color: var(--color-background); }
.bg-teal          { background-color: var(--color-secondary); }
.text-teal        { color: var(--color-secondary); }
.hover\:bg-teal:hover { background-color: var(--color-secondary); }

/* Buttons */
.btn-primary {
  background-color: var(--color-primary);
  color:#fff;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-weight: bold;
  display:inline-block;
  transition: background-color .3s ease, transform .3s ease;
}
.btn-primary:hover {
  background-color: var(--color-primary-dark);
  transform: scale(1.05);
}

/* ------------------------------------------------------------------
   Section-specific styling & overlays
-------------------------------------------------------------------*/
#about {
  position: relative;
  background-image: url('https://utopiaparties.com/wp-content/uploads/2022/12/DSC00436-scaled-1.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  padding: 5rem 1rem;
  border-top: 4px solid var(--color-primary);
  border-bottom: 4px solid var(--color-primary);
  background-color: rgba(0,0,0,.1);
}
#about::before {
  content:''; position:absolute; inset:0;
  background: rgba(0,0,0,.5); z-index:1;
}
#about > * { position:relative; z-index:2; }
@media (max-width:768px){ #about{ background-attachment:scroll; } }

/* Icon styling for About section */
.about-card-icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem auto;
  background-color: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Icon styling for Stag & Hen section */
.stag-hen-card-icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem auto;
  background-color: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Icon styling for Bring section */
.bring-icon {
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  flex-shrink: 0;
}

/* Ensure SVG icons use the text color */
.bring-icon svg path {
  fill: currentColor !important;
}


#stag-hen {
  position:relative;
  background-image:url('https://utopiaparties.com/wp-content/uploads/2022/12/175283-1.jpg');
  background-attachment:fixed; background-size:cover; background-position:center;
  padding:5rem 1rem;
}
#stag-hen::before {
  content:''; position:absolute; inset:0;
  background:rgba(0,0,0,.6); z-index:1;
}
#stag-hen > * { position:relative; z-index:2; }
@media(max-width:768px){ #stag-hen{ background-attachment:scroll; } }

#testimonials {
  position:relative;
  background-image:url('https://utopiaparties.com/wp-content/uploads/2022/12/DSC04081-scaled-1.jpg');
  background-attachment:fixed; background-size:cover; background-position:center;
  padding:5rem 1rem;
}
#testimonials::before {
  content:''; position:absolute; inset:0;
  background:rgba(0,0,0,.5); z-index:1;
}
#testimonials > * { position:relative; z-index:2; }
@media(max-width:768px){ #testimonials{ background-attachment:scroll; } }

/* Event-card gradients */
#events .relative::before {
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom,rgba(0,0,0,.88) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,0)100%);
}
#events .relative .absolute::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top,rgba(0,0,0,.9),transparent);
}
#events .relative > * { position:relative; z-index:2; }
#events .relative img { width:100%; height:24rem; object-fit:cover; }
#events .relative .absolute { padding:1.5rem; color:#fff; }
#events .relative .absolute h3 { font-size:1.5rem; font-weight:bold; }
#events .relative .absolute p,
#events .relative .absolute ul { font-size:.875rem; }

/* Card-overlay component */
.card-overlay {
  position: relative;
  overflow: hidden;
  height: auto;
  min-height: 20rem;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform .3s ease, box-shadow .3s ease;
}
.card-overlay img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform .3s ease;
}
.card-overlay:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 15px 25px rgba(0,0,0,.3);
}
.card-overlay:hover img {
  transform: scale(1.05);
}
.card-overlay figcaption {
  position: relative;
  z-index: 2;
  padding: 1.5rem;
  background-image: linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,0));
  color: #fff;
}
.card-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,.15)60%,rgba(0,0,0,0)100%);
}
@media(min-width:768px){ .card-overlay{ min-height:24rem; } }
@media(min-width:1024px){ .card-overlay{ min-height:28rem; } }

/* Google reviews */
.review-stars span {
  color: #fbbf24;
  margin: 0 2px;
}

.googleSwiper .swiper-slide {
  height: auto;
}

.overall-rating {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}
.overall-rating .review-stars span {
  font-size: 1.5rem;
}

.google-reviews-link {
  color: var(--color-secondary);
  text-decoration: underline;
  font-weight: bold;
}
.google-reviews-link:hover {
  color: var(--color-primary-dark);
}

/* Navigation enhancements */
#site-header {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#site-header nav {
  height: 5rem;
  transition: height 0.3s ease;
}

#site-header .logo {
  height: 8rem;
  transition: height 0.3s ease;
}

#site-header .nav-link {
  position: relative;
  font-size: 0.875rem;
  transition: font-size 0.3s ease;
}
#site-header .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background-color: #fff;
  transition: width 0.3s ease;
}
#site-header .nav-link:hover::after {
  width: 100%;
}

#site-header .dropdown > a .arrow {
  font-size: 0.65rem;
  transition: transform 0.3s ease;
}

#mobile-menu .mobile-dropdown .arrow {
  transition: transform 0.3s ease;
}

#mobile-menu .mobile-dropdown.open .arrow {
  transform: rotate(180deg);
}

#mobile-menu .mobile-dropdown.open > .nav-link::after {
  width: 100%;
}

/* Dropdown menu */
#site-header .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: rgba(236,72,153,0.9);
  backdrop-filter: blur(8px);
  border-radius: 0.5rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  padding: 0.5rem 0;
  min-width: 8rem;
  z-index: 100;
}
#site-header .dropdown-menu a {
  display: block;
  padding: 0.5rem 1rem;
  white-space: nowrap;
}
#site-header .dropdown-menu a:hover {
  background-color: #ec4899;
}
#site-header .dropdown:hover .dropdown-menu {
  display: block;
}

#site-header .dropdown:hover > a .arrow {
  transform: rotate(180deg);
}

#mobile-menu {
  transform: translateY(-1rem);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#mobile-menu.open {
  transform: translateY(0);
  opacity: 1;
}

#site-header.shrink nav {
  height: 4rem;
}

#site-header.shrink .logo {
  height: 4.5rem;
}

/* Maintain consistent menu link sizing when header shrinks */
#site-header.shrink .nav-link {
  font-size: 0.875rem;
}

#site-header.shrink #menu-toggle {
  font-size: 1.5rem;
}

/* Ticket card enhancements */
.ticket-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.ticket-card:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.ribbon {
  position: absolute;
  top: 0.5rem;
  right: -3rem;
  transform: rotate(45deg);
  background-color: #ff007e;
  color: #fff;
  border: 2px solid #000000;
  border-radius: 8px;
  padding: 0.25rem 2.5rem;
  font-size: 0.75rem;
  font-weight: 700;
}

/* FAQ accordion */
.faq-answer {
  display: none;
}
.faq-question svg {
  width: 1rem;
  height: 1rem;
}
.faq-item.open .faq-answer {
  display: block;
}
.faq-item.open .faq-question svg {
  transform: rotate(180deg);
}

/* Ensure mobile menu button styling matches links */
#mobile-menu .nav-link,
#mobile-menu button.nav-link {
  font-family: var(--font-base);
  font-size: 1.25rem;
  text-transform: uppercase;
}