@charset "UTF-8";

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/

.menu .menu-ingredients {
  margin-left: 95px;
  font-style: italic;
  font-size: 17px;
  font-family: var(--nav-font);
  color:#666666;
}

.font-green {
    color: #17bc77;
}

.font-hunter-green {
    color: #355E3B;
}

.font-dark-green {
    color: #355E3B;
}

.card-jump-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 9.5rem;
	padding: 0.45rem 1rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.85);
	background: rgba(58, 58, 58, 0.42);
	color: #ffffff !important;
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.card-jump-btn:hover,
.card-jump-btn:focus {
	background: rgba(58, 58, 58, 0.62);
	border-color: #ffffff;
	color: #ffffff !important;
	transform: translateY(-1px);
}

/* Bento card spacing + reveal polish for cards with CTA buttons */
.cards .card .card-body .card-content,
.cards-2 .card .card-body .card-content {
	display: block;
	max-height: 0;
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	transition: max-height 0.5s ease-in-out, opacity 0.35s ease-in-out;
}

.cards .card:hover .card-content,
.cards-2 .card:hover .card-content {
	max-height: 18rem;
	visibility: visible;
	opacity: 1;
}

.cards .card .card-body .card-content p,
.cards-2 .card .card-body .card-content p {
	padding-top: 8px;
}

.cards .card .card-body .card-content .text-center.mt-3,
.cards-2 .card .card-body .card-content .text-center.mt-3,
.hero .blog-item .blog-content .text-center.mt-3 {
	margin-top: 0.65rem !important;
}

/* Animated gradient background utility */
.bknd-anim-grad {
	background: linear-gradient(-45deg, #01492b, #002d1a, #000000, #0a0a0a);
	background-size: 400% 400%;
	animation: gradient 30s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/* Dark mode only: apply animated backgrounds to selected sections */
body.theme-dark.index-page #header,
body.theme-dark.index-page #hero,
body.theme-dark.index-page #gallery,
body.theme-dark.play-windance-page #header,
body.theme-dark.play-windance-page #packages,
body.theme-dark.play-windance-page #flyover,
body.theme-dark.clubhouse-page #header,
body.theme-dark.clubhouse-page #clubhouse {
	background: linear-gradient(-45deg, #01492b, #002d1a, #000000, #0a0a0a) !important;
	background-size: 400% 400% !important;
	animation: gradient 30s ease infinite;
}

/* Ensure animated dark headers are not masked by inner container fill */
body.theme-dark.index-page #header .header-container,
body.theme-dark.play-windance-page #header .header-container,
body.theme-dark.clubhouse-page #header .header-container {
	background: transparent;
}

/* Dark mode only: index about section parallax image + dark overlay */
body.theme-dark.index-page #about {
	position: relative;
	background-image: url("../img/uploads/Windance-18-w-clubhouse-1920x1279.jpg");
	background-attachment: fixed;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

body.theme-dark.index-page #about::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
	pointer-events: none;
}

body.theme-dark.index-page #about > .container {
	position: relative;
	z-index: 1;
}

.parallax-clubhouse-bg {
	background-image: url("../img/uploads/Windance-18-w-clubhouse-1920x1279.jpg");
	background-attachment: fixed;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.parallax-overlay-dark {
	position: relative;
	z-index: 0;
}

.parallax-overlay-dark::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
	z-index: -1;
}

/* Fixed attachment is unreliable on many mobile browsers */
@media (max-width: 991px) {
	.parallax-clubhouse-bg {
		background-attachment: scroll;
	}
}