/* =========================================
   1. VARIABLES & THEME SETUP
   ========================================= */
:root {
  --brand-teal: #3CB5A7;
  --brand-teal-hover: #2D9C8F;
  --brand-purple: #9B5496;
  --brand-purple-hover: #7D4378;
  --brand-dark-purple: #702f6b;

  /* Default (Light) state */
  --btn-bg: var(--brand-teal);
  --btn-hover: var(--brand-teal-hover);
}

/* Bootstrap 5 Dark Mode Selector */
[data-bs-theme="dark"] {
  --btn-bg: var(--brand-purple);
  --btn-hover: var(--brand-purple-hover);
}

/* Custom Color Variables for light mode */
html[data-bs-theme="light"] {
	--bs-primary: #8a77ad;
	--bs-primary-rgb: 138, 119, 173;
	--bs-secondary: #C6E2E1;
	--bs-secondary-rgb: 198, 226, 225;
	--bs-success: #78C2AD;
	--bs-success-rgb: 120, 194, 173;
	--bs-info: #DBE8F3;
	--bs-info-rgb: 219, 232, 243;
	--bs-warning: #F8D8D8;
	--bs-warning-rgb: 248, 216, 216;
	--bs-dark-blue: #4F6D7A;
	--bs-light-pink-gradient: linear-gradient(135deg, #fce4ec, #f8bbd0);
	--bs-light-blue-gradient: linear-gradient(135deg, #e3f2fd, #bbdefb);
	--bs-light-contact-info: #f9f9f9;
	.bg-brand-gradient { color: var(--brand-dark-purple) !important; }
    .custom-card-border { border-color: rgba(155, 84, 150, 0.3) !important; }

	/* Form specifics for Light Mode */
	--bs-input-bg: #ffffff;
	--bs-input-text: #000000;
	--bs-input-border: #dcdcdc;
}

/* Custom Color Variables for dark mode */
html[data-bs-theme="dark"] {
	--bs-primary: #b39ddb;
	--bs-primary-rgb: 179, 157, 219;
	--bs-secondary: #80cbc4;
	--bs-secondary-rgb: 128, 203, 196;
	--bs-success: #a5d6a7;
	--bs-success-rgb: 165, 214, 167;
	--bs-info: #90caf9;
	--bs-info-rgb: 144, 202, 249;
	--bs-warning: #ef9a9a;
	--bs-warning-rgb: 239, 154, 154;
	--bs-dark-blue: #e0f2f7;
	--bs-light-pink-gradient: linear-gradient(135deg, #4a148c, #880e4f);
	--bs-light-blue-gradient: linear-gradient(135deg, #283593, #3F4B75);
	--bs-light-contact-info: #1b1f23;
	.bg-brand-gradient { color: #ffffff !important; }
    .custom-card-border { border-color: rgba(255, 255, 255, 0.3) !important; }

	/* Form specifics for Dark Mode */
	--bs-input-bg: #2b3035;
	--bs-input-text: #e0e0e0;
	--bs-input-border: #495057;
}

/* =========================================
   2. GLOBAL STYLES & TYPOGRAPHY
   ========================================= */
html {
	overflow-y: scroll;
    scroll-behavior: smooth;
}

/* reduce animation for accessibility */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
	font-family: 'Open Sans', sans-serif;
	line-height: 1.6;
	color: var(--bs-body-color);
	background-color: var(--bs-body-bg);
	transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
	font-family: 'Comfortaa', sans-serif;
	font-weight: 700;
	color: var(--bs-heading-color);
}

.display-4, .display-6 {
	font-weight: 300;
}

.text-primary { color: var(--bs-primary) !important; }
.text-secondary { color: var(--bs-secondary) !important; }
.text-dark-blue { color: var(--bs-dark-blue) !important; }

/* =========================================
   3. NAVBAR
   ========================================= */
.navbar > .container {
	display: flex !important;
	align-items: center !important;
}

/* Navbar Brand */
.navbar-brand {
	display: inline-flex !important;
	align-items: center;
	padding-top: 0;
	padding-bottom: 0;
	margin-right: 1rem;
	height: 100%;
	/* Scales font smoothly from 1.4rem to 1.8rem based on screen width */
	font-size: clamp(1.4rem, 1rem + 3vw, 1.8rem);
	letter-spacing: -0.5px;
	line-height: 1; /* Crucial: Matches text height to font size */
}

/* The Logo */
.logo {
	display: block;
	width: 50px;
	height: auto;
	aspect-ratio: 341 / 253;
	margin-right: 10px;
}

.navbar-brand span {
	display: inline-block; /* Required for margin-top to work on Safari */
	vertical-align: middle;
	white-space: nowrap;
}

/* A. Mobile & Portrait Tablets (Hamburger Menu View) */
@media (max-width: 991.98px) {
	.navbar-brand span {
		margin-top: 2px; /* Slight optical nudge for small screens */
	}
}

/* B. Tablet Landscape */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.navbar-brand span {
		margin-top: 4px; /* The specific fix for your iPad Mini 2 */
	}

	.navbar-nav {
		align-items: center; /* Ensure links align with brand */
	}
}

/* C. Desktop (Laptops & Large Screens) */
@media (min-width: 1200px) {
	.navbar-brand span {
		margin-top: 1px; /* Subtle polish for large screens */
	}

	.navbar-nav {
		align-items: center;
	}
}

/* Theme Toggle Button Clean-up */
#theme-toggle {
	border-radius: 50px;
	padding: 0.25rem 1rem; /* Reduced padding to prevent stretching navbar */
	font-weight: 500;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	line-height: 1;
	height: 38px; /* Force consistent height */
	margin-top: auto;
	margin-bottom: auto;
}

#theme-toggle i {
	font-size: 1.1em;
}

/* =========================================
   4. SECTIONS & CARDS
   ========================================= */
/* Hero Section */
.hero-section {
	background: var(--bs-light-pink-gradient);
	color: var(--bs-dark-blue);
	padding: 6rem 0;
	position: relative;
	overflow: hidden;
}

.hero-section::before {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: image-set(
        url('/img/floral-background-with-bokeh.webp') type('image/webp'),
        url('/img/floral-background-with-bokeh.jpg') type('image/jpeg')
    ) no-repeat center center;
	background-size: cover;
	opacity: 0.6;
	z-index: 0;
}

.hero-section > .container {
	position: relative;
	z-index: 1;
}

.hero-section h1 {
	text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   Hero Section Buttons
   ========================================================================== */

/* Base Styles Scoped to the Hero Section */
.hero-section .btn-gentle-paths,
.hero-section .btn-outline-gentle {
	border-radius: 8px;
	padding: 10px 24px;
	font-weight: 500;
	transition: all 0.3s ease;
}

/* -------------------------
   Light Theme: Outline Button
   ------------------------- */
[data-bs-theme="light"] .hero-section .btn-outline-gentle {
	border: 2px solid var(--brand-purple, #9b8abb);
	color: var(--brand-purple, #9b8abb);
	background-color: transparent;
}

[data-bs-theme="light"] .hero-section .btn-outline-gentle:hover,
[data-bs-theme="light"] .hero-section .btn-outline-gentle:focus {
	background-color: var(--brand-purple, #9b8abb);
	border-color: var(--brand-purple, #9b8abb);
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: 0 4px 15px color-mix(in srgb, var(--brand-purple, #9b8abb) 30%, transparent);
}

[data-bs-theme="dark"] .hero-section .btn-outline-gentle {
	border: 2px solid color-mix(in srgb, var(--brand-purple, #9b8abb) 60%, white);
	color: #ffffff;
	background-color: color-mix(in srgb, white 5%, transparent); /* Subtle frosting */
}

[data-bs-theme="dark"] .hero-section .btn-outline-gentle:hover,
[data-bs-theme="dark"] .hero-section .btn-outline-gentle:focus {
	background-color: color-mix(in srgb, var(--brand-purple, #9b8abb) 80%, white);
	border-color: color-mix(in srgb, var(--brand-purple, #9b8abb) 80%, white);
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: 0 4px 15px color-mix(in srgb, var(--brand-purple, #9b8abb) 50%, transparent);
}

/* Cards */
.card {
	border: none;
	border-radius: 1.25rem;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
	transform: translateY(-8px);
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
}

.card-img-top {
	border-top-left-radius: 1.25rem;
	border-top-right-radius: 1.25rem;
	width: 100%;
	height: auto;
}

/* Mini Header */
.mini-header {
	background: var(--bs-light-blue-gradient);
	padding: 40px 0;
	text-align: center;
	position: relative;
	overflow: hidden;
	border-radius: 0 0 50% 50% / 0 0 20px 20px;
	box-shadow: inset 0 -10px 20px rgba(255,255,255,0.1);
	transition: all 0.3s ease;
	margin-bottom: 40px;
}

.mini-header h1 {
	color: var(--bs-dark-blue) !important;
	font-size: 2.8rem;
	font-weight: 600;
	margin: 0;
}

[data-bs-theme="dark"] .mini-header {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

/* CTA Section */
.cta-section {
	background: var(--bs-light-blue-gradient);
	color: var(--bs-dark-blue);
	padding: 4rem 0;
	border-radius: 1rem;
}

/* =========================================
   5. FORMS & BUTTONS
   ========================================= */
.contact-section {
	display: flex;
	gap: 30px;
	margin-top: 30px;
}

.form-container, .info-container {
	flex: 1;
}

label {
	display: block;
	margin-bottom: 5px;
	font-weight: bold;
	color: var(--bs-body-color); /* Updated to use variable for dark mode support */
}

input[type="text"],
input[type="email"],
textarea {
	width: 100%;
	padding: 12px;
	margin-bottom: 20px;
	/* Updated to use variables */
	background-color: var(--bs-input-bg);
	color: var(--bs-input-text);
	border: 1px solid var(--bs-input-border);
	border-radius: 6px;
	box-sizing: border-box;
	transition: border-color 0.3s, background-color 0.3s;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
	border-color: #a2c4c9;
	outline: none;
}

textarea {
	resize: vertical;
	min-height: 150px;
}

button {
	background-color: #a2c4c9;
	color: white;
	padding: 12px 20px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: 1em;
	transition: background-color 0.3s;
}

button:hover {
	background-color: #8faeb2;
}

.btn-gentle-paths {
  background-color: var(--btn-bg) !important;
  border-color: var(--btn-bg) !important;
  color: #fff !important;
  transition: all 0.3s ease-in-out;
}

.btn-gentle-paths:hover {
  background-color: var(--btn-hover) !important;
  border-color: var(--btn-hover) !important;
}

/* Info Container */
.info-container {
	background-color: var(--bs-light-contact-info);
	padding: 20px;
	border-radius: 8px;
}

.info-container h2 {
	color: var(--bs-heading-color);
	margin-top: 0;
	border-bottom: 2px solid var(--bs-border-color); /* Dynamic border color */
	padding-bottom: 10px;
	margin-bottom: 15px;
}

.info-container p { margin: 10px 0; }

.info-container a {
	color: #a2c4c9;
	text-decoration: none;
}

/* Image Fade In */
.reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.8s ease-out;
}

/* Final state: visible and in position */
.reveal.active {
	opacity: 1;
	transform: translateY(0);
}

.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }

/* Membership Rates */
.rate-card {
    background-color: var(--bs-body-bg); /* matches theme */
    border: 1px solid var(--bs-border-color); /* Subtle grey border */
    border-radius: 2rem; /* The nice rounded pill shape */
    padding: 2.5rem 1.5rem;
    height: 100%; /* Forces all cards to match height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s;
    position: relative;
    gap: 0.5rem; /* Adds even spacing between elements */
}

/* Hover Effect */
.rate-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    border-color: var(--bs-primary);
}

/* Family Rate Special Styling */
.rate-card.highlighted {
    border: 2px solid var(--brand-purple); /* Thicker purple border */
    background-color: rgba(155, 84, 150, 0.03); /* Very faint purple tint */
}

/* Typography */
.age-label {
    font-family: 'Comfortaa', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--bs-heading-color);
}

.price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--bs-primary);
    line-height: 1.2;
    margin-top: 0.5rem;
}

.price small {
    font-size: 1rem;
    font-weight: 400;
    opacity: 0.8;
}

.rate-card.highlighted .price {
    color: var(--brand-purple);
}

.sub-label {
    font-size: 0.9rem;
    margin-top: -0.25rem; /* Pulls it closer to the label */
}

.extra-info {
    font-size: 0.8rem;
    font-style: italic;
    opacity: 0.8;
}

/* The small line inside the Family card */
.rate-divider {
    width: 50%;
    height: 1px;
    background-color: var(--bs-border-color);
    margin: 1rem 0;
}

/* 10% discount text */
#btn-annually > span {
	color: #ffffff;
}

[data-bs-theme="dark"] #btn-annually > span {
	color: #004000;
}

/* ==========================================================================
   Meet & Greet Section
   ========================================================================== */

.meet-greet-card {
    border-radius: 24px;
    transition: all 0.3s ease;
    text-align: center;
}

/* Light Theme */
[data-bs-theme="light"] .meet-greet-card {
    background-color: #fdfaf5; /* Brand Cream */
    /* Mixes 15% brand purple with transparency for a dynamic, tinted border */
    border: 1px solid color-mix(in srgb, var(--brand-purple, #9b8abb) 15%, transparent);
    color: #4a5568; /* Soft Slate */
}

/* Dark Theme */
[data-bs-theme="dark"] .meet-greet-card {
    background-color: rgba(255, 255, 255, 0.03); /* Bumped slightly from 0.02 for better contrast */
    /* Tint the dark mode border with brand color rather than stark white */
    border: 1px solid color-mix(in srgb, var(--brand-purple, #9b8abb) 20%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* Added for better Safari support */
}

/* Typography */
.meet-greet-section h2,
.meet-greet-section span,
.meet-greet-section .btn-outline-gentle {
    font-family: 'Comfortaa', sans-serif;
}

.meet-greet-section .text-primary {
    color: var(--brand-purple, #9b8abb) !important;
}

.meet-greet-section span {
    font-size: 0.95rem;
    opacity: 0.85;
}

/* Button Styling */
.meet-greet-section .btn-outline-gentle {
    font-size: 1.1rem;
    padding: 12px 35px;
    border-radius: 12px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    border: 2px solid var(--brand-purple, #9b8abb);
    color: var(--brand-purple, #9b8abb);
    /* Dynamic 10% opacity background */
    background-color: color-mix(in srgb, var(--brand-purple, #9b8abb) 10%, transparent);
}

.meet-greet-section .btn-outline-gentle:hover,
.meet-greet-section .btn-outline-gentle:focus {
    background-color: var(--brand-purple, #9b8abb);
    color: #ffffff;
    /* Dynamic shadow using the brand variable */
    box-shadow: 0 4px 15px color-mix(in srgb, var(--brand-purple, #9b8abb) 40%, transparent);
    transform: translateY(-2px);
}

/* =========================================
   SERVICES PAGE STYLES
   ========================================= */

/* 1. The Service Card */
.service-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 1.5rem; /* Matches your Membership Cards */
    padding: 2rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}

/* 2. The Icon Bubbles */
.icon-box {
    width: 60px;
    height: 60px;
    border-radius: 50%; /* Circle */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Color Helpers for Icons */
.bg-teal-light { background-color: rgba(60, 181, 167, 0.15); }
.text-teal { color: var(--brand-teal); }

.bg-purple-light { background-color: rgba(155, 84, 150, 0.15); }
.text-purple { color: var(--brand-purple); }

.bg-brand-gradient {
    background: var(--bs-light-pink-gradient); /* Reusing your gradient */
}

/* 3. Typography Tweaks */
.service-card h4 {
    font-family: 'Comfortaa', sans-serif;
    font-weight: 700;
}

/* 4. List Styling */
.service-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-list li {
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    color: var(--bs-secondary-color);
    line-height: 1.5;
    position: relative;
    padding-left: 1.5rem; /* Space for custom bullet */
}

/* Custom Bullet Points */
.service-list li::before {
    content: '\f26a'; /* Bootstrap Icon check2 */
    font-family: bootstrap-icons;
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--brand-teal);
    font-weight: bold;
}

/* Override for Non-Member "Check List" (Circle checks) */
.check-list li::before {
    content: '\f26b'; /* check-circle-fill */
    color: var(--brand-purple);
}

/* 5. Custom Tab Pills */
.nav-pills .nav-link {
    background-color: transparent;
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
    transition: all 0.3s ease;
}

.nav-pills .nav-link:hover {
    background-color: rgba(60, 181, 167, 0.05);
    border-color: var(--brand-teal);
    color: var(--brand-teal);
}

.nav-pills .nav-link.active {
    background-color: var(--brand-teal) !important;
    border-color: var(--brand-teal) !important;
    color: white !important;
    transform: scale(1.05); /* Slight pop when active */
}

/* In Dark Mode, adjust the active text color if needed */
[data-bs-theme="dark"] .service-card {
    background-color: var(--bs-body-bg);
}

/*** FAQ ***/
/* The Outer Card */
.custom-faq-accordion .accordion-item {
    border-radius: 1rem !important; /* Forces rounded corners on all sides */
    overflow: hidden; /* Clips the inner content to the rounded corners */
    transition: transform 0.2s ease;
}

.custom-faq-accordion .accordion-item:hover {
    transform: scale(1.01); /* Very subtle pop on hover */
}

/* The Header/Button */
.custom-faq-accordion .accordion-button {
    background-color: var(--bs-body-bg);
    color: var(--bs-heading-color);
    font-family: 'Comfortaa', sans-serif;
    padding: 1.25rem 1.5rem;
    box-shadow: none !important; /* Removes Bootstrap's blue focus glow */
}

/* When the accordion is open */
.custom-faq-accordion .accordion-button:not(.collapsed) {
    background-color: rgba(var(--bs-primary-rgb), 0.05); /* Very light brand tint */
    color: var(--brand-purple);
    border-bottom: 1px solid rgba(var(--bs-primary-rgb), 0.1);
}

/* The "Arrow" Icon */
.custom-faq-accordion .accordion-button::after {
    transition: transform 0.3s ease;
    filter: sepia(100%) hue-rotate(250deg) saturate(100%); /* Adjusts icon color to match brand */
}

/* The Answer Body */
.custom-faq-accordion .accordion-body {
    line-height: 1.7;
    padding: 1.5rem;
    font-size: 0.95rem;
}

/* Dark Mode Tweaks */
[data-bs-theme="dark"] .custom-faq-accordion .accordion-item {
    background-color: #2b3035;
    border: 1px solid rgba(255,255,255,0.05) !important;
}

[data-bs-theme="dark"] .custom-faq-accordion .accordion-button:not(.collapsed) {
    background-color: rgba(var(--bs-primary-rgb), 0.15);
}

/*** ***/
/* Sidebar Icon Styling */
.info-container .icon-box {
	width: 45px;
	height: 45px;
	flex-shrink: 0;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
}

.btn-outline-purple {
	color: var(--brand-purple);
	border: 2px solid var(--brand-purple);
}

.btn-outline-purple:hover {
	background-color: var(--brand-purple);
	color: white;
}


/* Footer */
.footer { border-top: 1px solid var(--bs-border-color); }
.footer a { color: var(--bs-secondary-color); }
.footer a:hover { color: var(--bs-primary); }
.footer .disclaimer, .footer .medical-emergency { font-size: 16px; }

.footer-location-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 20px;
  color: #a0aec0; /* Match your muted gray text */
}

.no-break {
  white-space: nowrap;
}

/* =========================================
   6. RESPONSIVE & PRINT
   ========================================= */
@media (max-width: 600px) {
	.contact-section {
		flex-direction: column;
	}

	.container {
		padding: 20px 10px;
		width: 100%;
	}

	/* Small layout tweak for rates on very small screens */
	.membership-rates {
		flex-wrap: wrap;
		gap: 10px;
	}
	.membership-rates > div {
		width: 48%;
	}

	.footer-location-container {
		flex-direction: column; /* Stacks icon on top of text */
		text-align: center;
		gap: 5px;
	}

	.location-text {
		font-size: 0.9rem; /* Slightly smaller for mobile screens */
		line-height: 1.5;
	}

}

@media print {
	.navbar, footer, .hero-section, .d-print-none {
		display: none !important;
	}

	/* .mini-header, .mini-header h1, .mini-header p {
		border: 0 !important;
		box-shadow: none !important;
		background: none !important;
		padding: 0 !important;
		color: #000000 !important;
	} */

	.alert-warning {
		background-color: #ffffff !important;
		color: #000000 !important;
		border-color: #000000 !important;
	}

	body {
		background-color: white !important;
		color: black !important;
		font-size: 12pt;
	}

	.container {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	h3 {
		page-break-after: avoid;
		margin-top: 20pt;
	}
}