/**
 * School Chameleons theme overrides.
 */

/* WPBakery frontend / inline editor — show reveal content immediately */
.sc-wpb-editing .reveal,
.compose-mode .reveal,
body.vc_editor .reveal,
html.js_active body.compose-mode .reveal {
	opacity: 1 !important;
	transform: none !important;
}

.sc-wpb-editing .sc-vc-element,
.compose-mode .sc-vc-element {
	min-height: 40px;
}

/* WordPress admin bar — keep hero full-bleed (no white strip above nav) */
html.admin-bar {
	margin-top: 0 !important;
}

body.admin-bar #siteNav {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar #siteNav {
		top: 46px;
	}
}

body.admin-bar.page-home #siteNav {
	top: calc(31px + 32px);
}

body.admin-bar.page-home #siteNav.nav-past-hero {
	top: calc(16px + 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar.page-home #siteNav {
		top: calc(25px + 46px);
	}

	body.admin-bar.page-home #siteNav.nav-past-hero {
		top: calc(10px + 46px);
	}
}

/* WPBakery noscript fallback must not create a body line box above the hero */
body > noscript {
	display: none;
}

/* Dual logos (light over hero / dark on white bar) — matches static swap */
.site-nav .nav-logo {
	position: relative;
}

.site-nav .nav-logo-mark {
	height: 50px;
	width: auto;
	display: block;
	/* Prefer dual <img> swap over content:url (unreliable on <img>) */
	content: none !important;
}

.site-nav .nav-logo-mark--dark {
	display: none;
}

.site-nav.scrolled .nav-logo-mark--light {
	display: none;
}

.site-nav.scrolled .nav-logo-mark--dark {
	display: block;
}

/* Homepage white-card hero: dark logo + links from first paint */
.page-home .site-nav .nav-logo-mark--light {
	display: none;
}

.page-home .site-nav .nav-logo-mark--dark {
	display: block;
}

/* Beat Bootstrap .nav-link blue so colors match static header */
.site-nav a.nav-link,
.site-nav button.nav-link {
	color: rgba(255, 255, 255, .75);
	text-decoration: none;
}

.site-nav a.nav-link:hover,
.site-nav a.nav-link:focus,
.site-nav a.nav-link.active,
.site-nav button.nav-link:hover,
.site-nav button.nav-link:focus,
.site-nav button.nav-link.active {
	color: #fff;
}

.site-nav.scrolled a.nav-link,
.site-nav.scrolled button.nav-link {
	color: var(--body-txt, #475569);
}

.site-nav.scrolled a.nav-link:hover,
.site-nav.scrolled a.nav-link:focus,
.site-nav.scrolled a.nav-link.active,
.site-nav.scrolled button.nav-link:hover,
.site-nav.scrolled button.nav-link:focus,
.site-nav.scrolled button.nav-link.active {
	color: var(--blue, #2563eb);
}

.page-home .site-nav a.nav-link,
.page-home .site-nav button.nav-link,
.page-home .site-nav.scrolled a.nav-link,
.page-home .site-nav.scrolled button.nav-link,
.page-home .site-nav.nav-past-hero a.nav-link,
.page-home .site-nav.nav-past-hero button.nav-link {
	color: var(--ink, #0f172a);
	opacity: 1;
	background: transparent;
	border: 0;
}

.page-home .site-nav a.nav-link:hover,
.page-home .site-nav a.nav-link:focus,
.page-home .site-nav a.nav-link.active,
.page-home .site-nav button.nav-link:hover,
.page-home .site-nav button.nav-link:focus,
.page-home .site-nav button.nav-link.active,
.page-home .site-nav.scrolled a.nav-link:hover,
.page-home .site-nav.scrolled a.nav-link:focus,
.page-home .site-nav.scrolled a.nav-link.active,
.page-home .site-nav.scrolled button.nav-link:hover,
.page-home .site-nav.scrolled button.nav-link:focus,
.page-home .site-nav.scrolled button.nav-link.active {
	color: var(--blue, #2563eb);
	opacity: 1;
}

/* Keep Sign In filled blue on homepage (matches static) */
.page-home .site-nav .btn-nav-cta.dropdown-toggle,
.page-home .site-nav.scrolled .btn-nav-cta.dropdown-toggle,
.page-home .site-nav.nav-past-hero .btn-nav-cta.dropdown-toggle {
	background: #1D48BF !important;
	border-color: #1D48BF !important;
	color: #fff !important;
}

.nav-mobile-header .custom-logo-link img {
	max-height: 40px;
	width: auto;
}

/*
 * Theme container must beat Bootstrap’s .container max-widths so FAQ,
 * footer, and other grids share one content width (static --cw/--cx).
 * Section backgrounds stay edge-to-edge; only inner .container is capped.
 */
.container,
.site-footer > .container,
.sc-page-content .container,
.section > .container,
.about-section > .container,
.stats-section > .container,
.testi-section > .container {
	width: 100% !important;
	max-width: calc(var(--cw) + var(--cx) * 2) !important;
	margin-inline: auto !important;
	padding-inline: var(--cx) !important;
}

/* Full-bleed section shells (background edge-to-edge, content in .container) */
.site-footer,
.sc-page-content > section,
.sc-page-content > .sc-vc-element,
.page-home .section,
.page-home .about-section,
.page-home .stats-section,
.page-home .gallery-section,
.page-home .testi-section,
.page-home .hero-shell {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	box-sizing: border-box;
}

.site-footer {
	padding-inline: 0;
}

/* WPBakery “stretch” rows: avoid 100vw (scrollbar overflow / sideways shift) */
.sc-page-content .vc_row[data-vc-full-width="true"] {
	width: 100% !important;
	left: 0 !important;
	right: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0;
	padding-right: 0;
	transform: none !important;
}

/* WPBakery full-width sections */
.sc-page-content > .vc_row,
.sc-page-content > section,
.sc-page-content > .sc-vc-element {
	margin-left: 0;
	margin-right: 0;
}

/* Responsive visibility */
@media (min-width: 992px) {
	.sc-hide-desktop { display: none !important; }
}

@media (min-width: 768px) and (max-width: 991px) {
	.sc-hide-tablet { display: none !important; }
}

@media (max-width: 767px) {
	.sc-hide-mobile { display: none !important; }
}

/* WPBakery full-bleed hero shell — layout comes from style.css (.page-home .hero-*) */
.vc_row:has(.hero-shell),
.vc_row:has(.hero-shell) > .wpb_column > .vc_column-inner,
.wpb_column:has(.hero-shell) > .vc_column-inner {
	padding: 0 !important;
	margin: 0 !important;
}

/* Keep hero shell edge gutters identical to static (20px), even inside VC stretch rows */
.page-home .hero-shell,
.page-home .sc-vc-element.hero-shell,
.sc-page-content .hero-shell {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	box-sizing: border-box;
	padding: 20px;
}

.btn-mint {
	background: #8FE9D4;
	border: 1px solid #8FE9D4;
	color: #053B2E;
}

.btn-mint:hover {
	background: #7BDFC4;
	border-color: #7BDFC4;
	color: #053B2E;
}

/*
 * Homepage nav layout must match static style.css:
 * left/right = container grid (cw + cx*2), nav-inner padding = var(--cx).
 * Do NOT re-stretch to 1800px — that misaligns logo vs hero headline.
 * Colour / past-hero patch already live in style.css; keep only WP extras.
 */
.page-home .site-nav,
.page-home .site-nav.scrolled {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-bottom-color: transparent;
	box-shadow: none;
}

.page-home .site-nav .nav-inner {
	padding-block: 10px;
	max-width: none;
	padding-inline: var(--cx);
}

.page-home .site-nav .btn-nav-cta {
	background: #1D48BF !important;
	border-color: #1D48BF !important;
	color: #fff !important;
	box-shadow: none;
}

.page-home .site-nav .btn-nav-cta:hover {
	background: #1A3EA6 !important;
	border-color: #1A3EA6 !important;
	color: #fff !important;
}

.page-home .site-nav .nav-hamburger span,
.page-home .site-nav.scrolled .nav-hamburger span,
.page-home .site-nav.nav-past-hero .nav-hamburger span {
	background: var(--ink);
}

.page-home .site-nav .nav-link::after { display: none; }

.about-section { padding: var(--section-y) 0; background: var(--surface-1); }
.about-heading { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; line-height: 1.15; }

/* Stats bento — ensure section works outside / alongside .page-home rules */
.stats-section {
	padding-top: clamp(24px, 3vw, 40px);
	padding-bottom: clamp(140px, 18vw, 220px);
	background: #E7EDF9;
	position: relative;
}

.stats-section .bento-lavender .bento-num,
.stats-section .bento-mint .bento-num {
	color: var(--ink, #0F172A);
}

.stats-section .bento-navy .bento-num,
.stats-section .bento-blue .bento-num {
	color: #fff;
}

.stats-section .bento-photo-plain {
	background-size: cover;
	background-position: center;
}

/* Featured stories sits on navy (#03045E) — do not force light-surface arrow styles.
 * Arrow / CTA colours come from style.css (.page-home #featured-stories …). */

.story-carousel {
	display: grid;
	padding-block: 26px 8px;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
}

.story-carousel.dragging { cursor: grabbing; }

.story-card-v {
	grid-area: 1 / 1;
	justify-self: center;
	width: min(400px, 88vw);
	background: #fff;
	border-radius: 22px;
	padding: 16px;
	box-shadow: var(--s-sm, 0 2px 8px rgba(15, 23, 42, .08));
	transition: transform .8s cubic-bezier(.34, 1.15, .64, 1), opacity .6s ease, box-shadow .5s ease;
}

.story-card-v.role-center { transform: translateX(0) translateY(-10px) rotate(0deg) scale(1); opacity: 1; z-index: 5; box-shadow: var(--s-lg, 0 12px 40px rgba(15, 23, 42, .1)); }
.story-card-v.role-left { transform: translateX(-62%) translateY(10px) rotate(-6deg) scale(.88); opacity: .8; z-index: 3; }
.story-card-v.role-right { transform: translateX(62%) translateY(10px) rotate(6deg) scale(.88); opacity: .8; z-index: 3; }
.story-card-v.role-far-left { transform: translateX(-118%) translateY(26px) rotate(-11deg) scale(.76); opacity: .5; z-index: 1; }
.story-card-v.role-far-right { transform: translateX(118%) translateY(26px) rotate(11deg) scale(.76); opacity: .5; z-index: 1; }
.story-card-v.role-hidden { transform: translateX(0) translateY(14px) scale(.7); opacity: 0; z-index: 0; pointer-events: none; }

.story-card-v-thumb { border-radius: 16px; overflow: hidden; height: 210px; margin-bottom: 16px; }
.story-card-v-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; }
.story-card-v a { -webkit-user-drag: none; }
.story-card-v .story-card-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.story-card-v-title { font-size: 1.375rem; font-weight: 800; color: var(--ink, #0F172A); margin-bottom: 10px; }
.story-card-v-title a { color: inherit; }
.story-card-v-title a:hover { color: var(--blue, #2563EB); }
.story-card-v-excerpt { font-size: .9375rem; color: var(--body-txt, #475569); line-height: 1.6; margin-bottom: 18px; }
.story-card-v-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px solid var(--border, #E2E8F0); }
.story-carousel-nav { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }

@media (max-width: 900px) {
	.story-card-v.role-far-left,
	.story-card-v.role-far-right { opacity: 0; pointer-events: none; }
}

@media (max-width: 700px) {
	.story-card-v.role-left,
	.story-card-v.role-right { opacity: 0; pointer-events: none; }
}

.testi-section { background: #F1F5F9; }

.faq-email-link { color: #6366f1; font-weight: 600; }

/* Full-width page content — no container padding on sections */
.sc-page-content { padding: 0; margin: 0; max-width: none; }
.sc-page-content > .sc-vc-element,
.sc-page-content > section { margin: 0; }

.eyebrow.blue { background: var(--blue-lt); color: var(--blue); }

.newsletter-eyebrow { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.8); justify-content: center; }
.newsletter-heading { color: #fff; margin-block: 12px 14px; }
.newsletter-lead { color: rgba(255, 255, 255, 0.65); }
.newsletter-caption { color: rgba(255, 255, 255, 0.35); }
.newsletter-form-message.is-success { color: #86efac; }
.newsletter-form-message.is-error { color: #fca5a5; }
.newsletter-wrap { max-width: 600px; margin-inline: auto; }