/*
 Theme Name:     Divi Child Theme - Sippin' on Sun
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Elegant Themes
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.0
*/

/* =Global Variables
------------------------------------------------------- */
:root {
	--button-gradient: linear-gradient(200deg, rgb(0, 27, 113) 0%, rgb(234, 0, 70) 100%);
	--button-gradient-hover: linear-gradient(270deg, rgb(0, 27, 113) 0%, rgb(234, 0, 70) 100%);
	--primary-color: #0d6efd;
	--secondary-color: #6c757d;
	--spacing-10: 10px;
	--spacing-20: 20px;
	--breakpoint-md: 980px;
	--breakpoint-sm: 768px;
}

/* =Theme customization starts here
------------------------------------------------------- */

/* GLOBAL */
body, html {
	overflow-x: hidden !important;
	max-width: 100vw !important;
	scroll-behavior: smooth;
}

.container {
	max-width: 100% !important;
	overflow-x: hidden !important;
}

a {
	color: white;
	transition: color 0.3s ease;
}

	a:hover, a:focus {
		color: #ffdd57; /* Adjust hover color */
		text-decoration: underline;
	}

#main-content {
	position:relative;
	z-index:999;
}

/* HEADERS */
h1, h2, h3, h4, h5 {
	display: block;
	margin: 0;
	padding: 0;
	word-break: keep-all;
	line-height: 1.2;
}

/* VERTICAL ALIGN */
.vertical-align {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* =Utility Classes
------------------------------------------------------- */

/* Spacing */
.p-20 {
	padding: 20px;
}

.m-20 {
	margin: 20px;
}

.pt-10 {
	padding-top: 10px;
}

.pb-10 {
	padding-bottom: 10px;
}

.pl-10 {
	padding-left: 10px;
}

.pr-10 {
	padding-right: 10px;
}

/* Text and Display */
.text-center {
	text-align: center;
}

.text-uppercase {
	text-transform: uppercase;
}

.flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.hidden {
	display: none !important;
}

.hidden-md {
	display: none;
}

@media all and (max-width: var(--breakpoint-md)) {
	.hidden-md {
		display: block;
	}
}

/* Button Styles */
.hero-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: left;
	margin-top: 1.5rem;
}

.btn {
	padding: 1rem 2rem;
	border-radius: 50px;
	text-decoration: none;
	font-weight: 500;
	font-family: 'Fredoka', sans-serif;
	font-size: 18px;
	min-width: 200px;
	text-align: center;
	transition: background-color 0.3s ease;
	box-shadow: 15px 18px 30px rgba(0, 0, 0, 0.37);
}

/* Primary CTA */
.btn-primary {
	background-color: #FFA833; /* Sunrise Orange */
	color: white;
}

	.btn-primary:hover {
		background-color: #e2952c;
		text-decoration: none;
	}

/* Secondary CTA */
.btn-secondary {
	background-color: #F2453D; /* Watermelon Red */
	color: white;
}

	.btn-secondary:hover {
		background-color: #d53a33;
		text-decoration: none;
	}

/* Responsive Stacking */
@media (max-width: 600px) {
	.hero-buttons {
		flex-direction: column;
		align-items: center;
	}
}

/* Helper Classes */
.border-rounded {
	border-radius: 5px;
}

.shadow {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Layout */
.grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-10);
}

.flex {
	display: flex;
}

.flex-column {
	display: flex;
	flex-direction: column;
}

/* Responsive Breakpoints */
@media all and (max-width: var(--breakpoint-md)) {
	/* Medium breakpoint styles */
}

@media all and (max-width: var(--breakpoint-sm)) {
	/* Small breakpoint styles */
}


/* VS Events */
/* 1) Wrapper: 3‑up grid on desktop, single‑column on smaller */
.vsel-shortcode-upcoming-events {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
}

	.vsel-shortcode-upcoming-events .vsel-content {
		flex: 1 1 calc(33.333% - 1rem);
		max-width: calc(33.333% - 1rem);
		box-sizing: border-box;
		/* Event card styling */
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; /* ← vertical centering */
		/*min-height: 300px; /* ← adjust height as needed */
		gap: 1.5rem;
		background-color: #FFF8EC;
		border-radius: 18px;
		padding: 28px 22px 10px 22px !important;
		margin-bottom: 1.5rem;
		width: 100%;
		font-family: 'Fredoka', sans-serif;
		box-shadow: none;
	}

/* 2) Responsive fallback: full‑width on tablets & below */
@media (max-width: 768px) {
	.vsel-shortcode-upcoming-events .vsel-content {
		flex: 1 1 100%;
		max-width: 100%;
		min-height: auto; /* let height shrink on mobile if desired */
	}
}

/* 3) Meta container: simple vertical stack of its children */
.vsel-shortcode-upcoming-events .vsel-meta {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100% !important;
	height:100%;
	text-align: center;
	gap: 0.75rem;
}

	/* 4) Hide everything except date‑span, title, and link */
	.vsel-shortcode-upcoming-events .vsel-meta > :not(.vsel-meta-date):not(.vsel-meta-title):not(.vsel-meta-link),
	.vsel-shortcode-upcoming-events .vsel-meta-time,
	.vsel-shortcode-upcoming-events .vsel-meta-location,
	.vsel-shortcode-upcoming-events .vsel-info {
		display: none !important;
	}

/* 5) Strip out “Date:” label */
.vsel-shortcode-upcoming-events .vsel-meta-date {
	font-size: 0 !important;
	line-height: 0 !important;
	color: transparent !important;
	margin: 0;
	padding: 0;
}

	/* 6) Style the <span> inside .vsel-meta-date */
	.vsel-shortcode-upcoming-events .vsel-meta-date span {
		display: block;
		font-size: 1.5rem;
		font-weight: 500;
		color: #F2453D;
		text-transform: uppercase;
		line-height: 1.1;
		margin: 0 0 15px 0;
	}

/* 7) Event title styling */
.vsel-shortcode-upcoming-events .vsel-meta-title {
	display: block;
	font-size: 1.75rem !important;
	font-weight: 700;
	color: #1BAAA6;
	text-align: center;
	margin: 0;
}

/* 8) “More Info” button row */
.vsel-shortcode-upcoming-events .vsel-meta-link {
	width: 100%;
	text-align: center;
	margin-top: auto;
}

	.vsel-shortcode-upcoming-events .vsel-meta-link a {
		display: inline-block;
		background-color: #FFA833;
		color: #fff;
		padding: 1rem 2rem;
		border-radius: 50px;
		font-family: 'Fredoka', sans-serif;
		font-size: 1rem;
		font-weight: 700;
		text-decoration: none;
		box-shadow: 6px 8px 20px rgba(0,0,0,0.25);
		transition: background-color 0.3s ease;
	}

		.vsel-shortcode-upcoming-events .vsel-meta-link a:hover {
			background-color: #e2952c;
		}

/* Contact Form 7 */
/* ─── Contact Form 7 Base Inputs & Textareas ─── */
.wpcf7 .wpcf7-form-control {
	width: 100%;
	padding: 0.75rem 1rem;
	margin-bottom: 1rem;
	font-family: inherit;
	font-size: 1rem;
	color: #333;
	background: transparent;
	border: 2px solid #1BAAA6; /* Teal border */
	border-radius: 8px;
	box-sizing: border-box;
}

/* If you’re using <textarea> for Message */
.wpcf7 textarea.wpcf7-form-control {
	min-height: 8rem;
	resize: vertical;
}

/* Optional: style select and date inputs the same way */
.wpcf7 select.wpcf7-form-control,
.wpcf7 input[type="date"].wpcf7-form-control {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

/* Placeholder color */
.wpcf7 ::placeholder {
	color: #999;
}

/* Focus state */
.wpcf7 .wpcf7-form-control:focus {
	outline: none;
	border-color: #FFA833; /* Orange on focus */
}

/* ─── Submit Button ─── */
.wpcf7 input[type="submit"].wpcf7-form-control.wpcf7-submit {
	display: inline-block;
	width: 100%;
	padding: 1rem;
	margin-top: 0.5rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	color: #ffffff;
	background-color: #FFA833; /* Sunrise Orange */
	border: none;
	border-radius: 8px;
	cursor: pointer;
	box-shadow: 6px 8px 20px rgba(0, 0, 0, 0.25);
	transition: background-color 0.3s ease;
}

	/* Button hover */
	.wpcf7 input[type="submit"].wpcf7-form-control.wpcf7-submit:hover {
		background-color: #e2952c;
	}

/* Testimonial Photo */
.kid-photo-wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.kid-photo-wrapper::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 12px;
  width: 100%;
  height: 100%;
  background-color: #FDE68A;
  border-radius: 60% 40% 35% 65% / 60% 35% 65% 40%;
  z-index: 1;
  animation: sosFloatBlob 4s ease-in-out infinite;
}

.kid-photo {
  position: relative;
  z-index: 2;
  width: 100%;
  border-radius: 60% 40% 35% 65% / 60% 35% 65% 40%;
  object-fit: cover;
}

/* Blobby float animation only on background */
@keyframes sosFloatBlob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}