/* Acers Preschool — site styles (Bootstrap 5 companion) */

:root {
	--brand: #463E75;
	--brand-dark: #37305c;
	--brand-light: #7973b5;
	--brand-tint: #eeecf7;
	--accent: #3a7d3a;      /* tree-foliage green from the logo */
	--accent-dark: #2e642e;
	--accent-light: #9fd49f;
	--ink: #2b2e31;
	--bg-soft: #f7f5fb;
	--font-display: "Baloo 2", "Nunito", system-ui, sans-serif;
	--font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
	font-family: var(--font-body);
	color: var(--ink);
}

h1, h2, h3, h4, h5, .navbar-brand, .btn {
	font-family: var(--font-display);
}

h1, h2, h3 {
	color: var(--brand);
	font-weight: 700;
}

a {
	color: var(--brand);
}

a:hover {
	color: var(--brand-dark);
}

:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
}

.skip-link {
	position: absolute;
	z-index: 2000;
	background: #fff;
	padding: .5rem 1rem;
}

/* --- Buttons --- */
.btn-brand {
	--bs-btn-bg: var(--brand);
	--bs-btn-border-color: var(--brand);
	--bs-btn-color: #fff;
	--bs-btn-hover-bg: var(--brand-dark);
	--bs-btn-hover-border-color: var(--brand-dark);
	--bs-btn-hover-color: #fff;
	--bs-btn-active-bg: var(--brand-dark);
	--bs-btn-active-color: #fff;
	border-radius: 50rem;
	padding-inline: 1.25rem;
}

.btn-accent {
	--bs-btn-bg: var(--accent);
	--bs-btn-border-color: var(--accent);
	--bs-btn-color: #fff;
	--bs-btn-hover-bg: var(--accent-dark);
	--bs-btn-hover-border-color: var(--accent-dark);
	--bs-btn-hover-color: #fff;
	--bs-btn-active-bg: var(--accent-dark);
	--bs-btn-active-color: #fff;
	font-weight: 600;
}

.btn-outline-light-pill {
	border-radius: 50rem;
}

/* --- Navbar --- */
.site-navbar {
	box-shadow: 0 2px 12px rgba(70, 62, 117, .08);
}

.site-navbar .nav-link {
	font-weight: 600;
	color: var(--ink);
}

.site-navbar .nav-link.active {
	color: var(--brand);
	box-shadow: inset 0 -3px 0 var(--accent);
}

.site-navbar .nav-social .nav-link {
	font-size: 1.15rem;
	color: var(--brand);
}

.dropdown-item.active,
.dropdown-item:active {
	background-color: var(--brand);
}

/* --- Page title band --- */
.page-title {
	background: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%);
	color: #fff;
	padding: 2.5rem 0;
}

.page-title h1 {
	color: #fff;
	margin-bottom: 0;
}

/* --- Sections --- */
.section {
	padding: 3.5rem 0;
}

.section-soft {
	background: var(--bg-soft);
}

.band-brand {
	background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
	color: #fff;
}

.band-brand h1, .band-brand h2, .band-brand h3 {
	color: #fff;
}

.band-brand a:not(.btn) {
	color: var(--accent-light);
}

.section-heading {
	margin-bottom: 2rem;
}

.section-heading::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin-top: .5rem;
	border-radius: 2px;
	background: var(--accent);
}

.text-center > .section-heading::after,
.section-heading.text-center::after {
	margin-inline: auto;
}

/* --- Hero carousel --- */
.hero-carousel .carousel-item img {
	width: 100%;
	height: min(70vh, 620px);
	object-fit: cover;
}

.hero-carousel .carousel-caption {
	background: rgba(43, 36, 77, .65);
	border-radius: .75rem;
	padding: .75rem 1.5rem;
	backdrop-filter: blur(2px);
}

.hero-carousel .carousel-caption h2 {
	color: #fff;
	font-size: 1.35rem;
	margin: 0;
}

/* --- Program cards --- */
.program-card {
	border: 0;
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(70, 62, 117, .12);
	transition: transform .2s ease, box-shadow .2s ease;
	height: 100%;
}

.program-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 28px rgba(70, 62, 117, .2);
}

.program-card img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

.program-card .card-title {
	color: var(--brand);
}

.program-icons {
	color: var(--accent);
	font-size: 1.1rem;
}

/* --- Testimonials --- */
.testimonial-card {
	background: #fff;
	border-radius: 1rem;
	box-shadow: 0 6px 18px rgba(70, 62, 117, .1);
	padding: 2rem;
	height: 100%;
}

.testimonial-card .bi-quote {
	font-size: 2rem;
	color: var(--accent);
}

.testimonial-name {
	color: var(--brand);
	font-weight: 700;
	margin-bottom: 0;
}

.testimonial-relation {
	color: #6c6f73;
	font-size: .9rem;
}

/* --- Gallery --- */
.gallery-grid img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	border-radius: .75rem;
	cursor: zoom-in;
	transition: transform .2s ease, box-shadow .2s ease;
}

.gallery-grid img:hover {
	transform: scale(1.02);
	box-shadow: 0 8px 20px rgba(70, 62, 117, .25);
}

#lightboxModal img {
	max-height: 82vh;
	object-fit: contain;
}

/* --- Forms --- */
.form-card {
	background: #fff;
	border-radius: 1rem;
	box-shadow: 0 6px 18px rgba(70, 62, 117, .1);
	padding: 2rem;
}

/* Honeypot: hidden from humans, present for bots. */
.hp-field {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Contact --- */
#map {
	width: 100%;
	height: 380px;
	border-radius: .75rem;
}

/* --- Footer --- */
.site-footer {
	background: var(--brand-dark);
	color: #d9d6ea;
	padding-top: 3rem;
	margin-top: 4rem;
}

.site-footer a {
	color: #fff;
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--accent-light);
}

.footer-heading {
	font-family: var(--font-display);
	color: #fff;
}

.footer-heading::after {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	margin-top: .4rem;
	border-radius: 2px;
	background: var(--accent-light);
}

.footer-links li {
	margin-bottom: .35rem;
}

.footer-social {
	font-size: 1.35rem;
}

.footer-bottom {
	background: rgba(0, 0, 0, .2);
}

@media (prefers-reduced-motion: reduce) {
	.program-card,
	.gallery-grid img {
		transition: none;
	}
}