/* SA-Kids site styles. Colors come from the Kadence palette variables (inc/settings.php). */
:root {
	--sak-green: var(--global-palette1, #3F6B26);
	--sak-green-dark: var(--global-palette2, #2F5D1E);
	--sak-ink: var(--global-palette3, #143A3A);
	--sak-text: var(--global-palette4, #2E3B3B);
	--sak-muted: var(--global-palette5, #4F5D5D);
	--sak-soft: var(--global-palette7, #F2F6EC);
	--sak-cream: var(--global-palette8, #FFF8E8);
	--sak-gold: var(--global-palette15, #F2B630);
	--sak-radius: 18px;
	--sak-shadow: 0 6px 24px rgba(20, 58, 58, .08);
}

/* Focus visibility (WCAG 2.4.7 / 2.4.11). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
	outline: 3px solid var(--sak-gold);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Header top bar ---------- */
.sak-topbar { display: flex; gap: 1.5rem; flex-wrap: wrap; font-size: .875rem; color: #fff; }
.sak-topbar a { color: #fff; text-decoration: none; }
.sak-topbar a:hover { text-decoration: underline; }
.sak-topbar__phone a { font-weight: 700; }

/* ---------- Buttons ---------- */
.sak-btn, .wp-block-button.is-style-sak-gold .wp-block-button__link {
	display: inline-block; padding: .8em 1.5em; border-radius: 999px; font-weight: 700; text-decoration: none; line-height: 1.2;
}
.sak-btn--outline { border: 2px solid var(--sak-green); color: var(--sak-green); background: transparent; margin: .25rem .25rem .25rem 0; }
.sak-btn--outline:hover { background: var(--sak-green); color: #fff; }
.wp-block-button.sak-gold .wp-block-button__link { background: var(--sak-gold); color: var(--sak-ink); }
.wp-block-button.sak-gold .wp-block-button__link:hover { background: var(--global-palette14, #F7A928); color: var(--sak-ink); }
.wp-block-button.sak-outline .wp-block-button__link { background: transparent; color: var(--sak-green); border: 2px solid var(--sak-green); }
.wp-block-button.sak-outline .wp-block-button__link:hover { background: var(--sak-green); color: #fff; }

/* ---------- Sections ---------- */
.sak-section { padding: clamp(2.5rem, 6vw, 5rem) 1.25rem; }
.sak-section > * { max-width: 1200px; margin-left: auto; margin-right: auto; }
.sak-section--soft { background: var(--sak-soft); }
.sak-section--cream { background: var(--sak-cream); }
.sak-section--ink { background: var(--sak-ink); color: #fff; }
.sak-section--ink h2, .sak-section--ink h3, .sak-section--ink a { color: #fff; }
.sak-narrow { max-width: 780px !important; }
.sak-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 800; color: var(--sak-green); margin-bottom: .25rem; }

/* ---------- Hero ---------- */
.sak-hero { background: var(--sak-cream); padding: clamp(2.5rem, 7vw, 6rem) 1.25rem; position: relative; overflow: hidden; }
.sak-hero::after { /* sunflower motif from the logo */
	content: ""; position: absolute; right: -120px; top: -120px; width: 380px; height: 380px; border-radius: 50%;
	background: radial-gradient(circle, var(--sak-gold) 0 28%, transparent 29%), repeating-conic-gradient(var(--sak-gold) 0 10deg, transparent 10deg 20deg);
	opacity: .18; pointer-events: none;
}
.sak-hero .wp-block-columns { max-width: 1200px; margin: 0 auto; align-items: center; gap: 2.5rem; }
.sak-hero h1 { margin-top: 0; }
.sak-hero .sak-lede { font-size: 1.2rem; color: var(--sak-muted); }
.sak-hero img { border-radius: var(--sak-radius); box-shadow: var(--sak-shadow); }
.sak-page-hero { background: var(--sak-cream); padding: clamp(2rem, 5vw, 3.5rem) 1.25rem; }
.sak-page-hero > * { max-width: 1200px; margin-left: auto; margin-right: auto; }
.sak-page-hero h1 { margin: 0 0 .5rem; }
.sak-page-hero p { font-size: 1.15rem; color: var(--sak-muted); max-width: 760px; margin-left: 0; }

/* ---------- Quick facts strip ---------- */
.sak-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; list-style: none; padding: 0 !important; margin: 0 auto; max-width: 1200px; }
.sak-facts li { background: #fff; border-radius: var(--sak-radius); padding: 1.1rem 1.2rem; box-shadow: var(--sak-shadow); }
.sak-facts strong { display: block; color: var(--sak-ink); font-size: 1.05rem; }
.sak-facts span { color: var(--sak-muted); font-size: .95rem; }

/* ---------- Cards ---------- */
.sak-cards { gap: 1.5rem !important; }
.sak-card { background: #fff; border-radius: var(--sak-radius); box-shadow: var(--sak-shadow); overflow: hidden; height: 100%; }
.sak-card > .wp-block-group__inner-container, .sak-card { padding-bottom: 1.25rem; }
.sak-card figure, .sak-card .wp-block-image { margin: 0 !important; }
.sak-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: 0; }
.sak-card h3, .sak-card p, .sak-card .wp-block-buttons { padding: 0 1.25rem; }
.sak-card h3 { margin-top: 1rem; }

/* ---------- Checklists ---------- */
ul.sak-checklist { list-style: none; padding-left: 0; }
ul.sak-checklist li { position: relative; padding-left: 1.9rem; margin: .45rem 0; }
ul.sak-checklist li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--sak-green); font-weight: 900; }

/* ---------- Steps ---------- */
ol.sak-steps { counter-reset: step; list-style: none; padding-left: 0; }
ol.sak-steps li { counter-increment: step; position: relative; padding: 0 0 1.25rem 3.25rem; }
ol.sak-steps li::before {
	content: counter(step); position: absolute; left: 0; top: -.1rem; width: 2.3rem; height: 2.3rem; border-radius: 50%;
	background: var(--sak-gold); color: var(--sak-ink); font-weight: 900; display: grid; place-items: center;
}

/* ---------- Tables ---------- */
.sak-table-wrap, .wp-block-table { overflow-x: auto; }
.wp-block-table table { border-collapse: collapse; width: 100%; min-width: 420px; }
.wp-block-table th { background: var(--sak-ink); color: #fff; text-align: left; }
.wp-block-table td, .wp-block-table th { padding: .6rem .8rem; border: 1px solid #dfe6e6; }
.wp-block-table tr:nth-child(even) td { background: var(--sak-soft); }

/* ---------- Notices (content awaiting school confirmation) ---------- */
.sak-note { background: var(--sak-cream); border-left: 5px solid var(--sak-gold); padding: .9rem 1.1rem; border-radius: 8px; font-size: .95rem; }

/* ---------- FAQ (details/summary) ---------- */
.wp-block-details { border-bottom: 1px solid #dfe6e6; padding: .9rem 0; }
.wp-block-details summary { font-weight: 800; color: var(--sak-ink); cursor: pointer; }

/* ---------- Embeds ---------- */
.sak-map iframe, .sak-tour iframe { width: 100%; border: 0; border-radius: var(--sak-radius); display: block; }
.sak-map iframe { aspect-ratio: 16 / 10; min-height: 300px; }
.sak-tour iframe { aspect-ratio: 16 / 10; min-height: 320px; background: #eee; }

/* ---------- Footer ---------- */
.sak-footer { background: var(--sak-ink); color: #d9e4e4; padding: 3rem 1.25rem 2rem; font-size: .95rem; }
.sak-footer__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 2.5rem; }
.sak-footer a { color: #fff; }
.sak-footer p { margin: 0 0 .5rem; }
.sak-footer__name, .sak-footer__heading { color: #fff; font-weight: 800; font-size: 1.05rem; }
.sak-footer__heading { margin-top: 1rem !important; }
.sak-footer ul { list-style: none; padding: 0; margin: 0 0 .5rem; }
.sak-footer li { margin: .3rem 0; }
.sak-licensing h3 { color: var(--sak-gold); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .25rem; }
.sak-licensing > div { margin-bottom: 1rem; }
.sak-footer .sak-licensing p { font-size: .88rem; line-height: 1.55; }
.site-footer .site-bottom-footer-wrap { color: #c9d6d6; font-size: .85rem; }
.site-footer .site-bottom-footer-wrap a { color: #fff; }
@media (max-width: 900px) { .sak-footer__inner { grid-template-columns: 1fr; gap: 1.5rem; } }

/* ---------- Mobile action bar ---------- */
.sak-actionbar { display: none; }
@media (max-width: 768px) {
	.sak-actionbar {
		display: grid; grid-template-columns: 1fr 1.3fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
		background: #fff; box-shadow: 0 -4px 18px rgba(0, 0, 0, .12); padding-bottom: env(safe-area-inset-bottom, 0);
	}
	.sak-actionbar a { text-align: center; padding: .85rem .25rem; font-weight: 800; font-size: .95rem; color: var(--sak-ink); text-decoration: none; }
	.sak-actionbar a.sak-actionbar__primary { background: var(--sak-gold); }
	body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0)); }
	.site-header-top-wrap { display: none; } /* top bar facts move to the action bar + footer on phones */
}

/* Forms (Fluent Forms) */
.fluentform .ff-btn-submit { border-radius: 999px !important; background: var(--sak-green) !important; font-weight: 800; padding: .8em 1.8em !important; }
.fluentform .ff-el-input--label label { font-weight: 700; color: var(--sak-ink); }

/* Header polish */
.site-header .header-button { white-space: nowrap; }
.main-navigation .primary-menu-container > ul > li.menu-item > a { padding-left: .7em; padding-right: .7em; font-weight: 700; }
/* Full-bleed sections: Kadence fullwidth layout + our inner max-width */
.content-area { margin-top: 0; margin-bottom: 0; }
.entry-content > .wp-block-group { margin-top: 0; margin-bottom: 0; }
.entry-content-wrap { padding: 0; }

/* Card images: fill the card; several legacy stock images have rounded corners baked in, so crop them slightly. */
.sak-card .wp-block-image { display: block; width: 100%; overflow: hidden; aspect-ratio: 3 / 2; }
.sak-card .wp-block-image img { width: 100% !important; height: 100% !important; object-fit: cover; transform: scale(1.12); }
.sak-hero .wp-block-image img, .wp-block-column > .wp-block-image img { width: 100%; height: auto; }
/* Mobile hero: keep the sunflower motif clear of the headline. */
@media (max-width: 768px) {
	.sak-hero::after { right: -190px; top: -190px; opacity: .1; }
	.sak-eyebrow { letter-spacing: .05em; }
}

/* Licensing block on light backgrounds: gold labels only pass contrast on the dark footer. */
.entry-content .sak-licensing h3 { color: var(--sak-green); }

/* Review fixes (Phase 3) */
.sak-card .wp-block-image a { display: block; width: 100%; height: 100%; }
.sak-logo-img img { max-width: 240px !important; width: auto !important; height: auto !important; display: block; margin: 0 auto; }
@media (max-width: 600px) {
	.wp-block-table table { min-width: 0; font-size: .95rem; }
	.wp-block-table td, .wp-block-table th { padding: .5rem .55rem; }
	/* Stacked comparison table: each row becomes a labeled card */
	table.sak-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	table.sak-stack, table.sak-stack tbody, table.sak-stack tr, table.sak-stack td { display: block; width: 100%; }
	table.sak-stack tr { margin-bottom: 1rem; border: 1px solid #dfe6e6; border-radius: 12px; overflow: hidden; }
	table.sak-stack td { border: 0; border-bottom: 1px solid #edf1f1; background: #fff !important; }
	table.sak-stack td:first-child { background: var(--sak-ink) !important; color: #fff; font-weight: 800; }
	table.sak-stack td:not(:first-child)::before { content: attr(data-label); display: block; font-size: .8rem; font-weight: 800; color: var(--sak-muted); text-transform: uppercase; letter-spacing: .04em; }
}

/* Photo rows: equal heights */
.sak-gallery .wp-block-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }

/* ---------- Slideshow (Gallery block with class "sak-slideshow"; see assets/slideshow.js) ---------- */
.sak-carousel { position: relative; }
.sak-carousel__track { position: relative; aspect-ratio: 4 / 3; border-radius: var(--sak-radius); overflow: hidden; box-shadow: var(--sak-shadow); background: var(--sak-ink); }
.sak-carousel__slide { position: absolute !important; inset: 0; margin: 0 !important; width: 100% !important; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s; }
.sak-carousel__slide.is-active { opacity: 1; visibility: visible; }
.sak-carousel__slide img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 0 !important; box-shadow: none !important; }
.sak-carousel__slide > a { display: block; height: 100%; }
.sak-carousel__slide figcaption {
	position: absolute !important; left: 0; right: 0; bottom: 0; margin: 0 !important; padding: 2.2rem 1.1rem .9rem !important; text-align: left !important;
	background: linear-gradient(to top, rgba(10, 30, 30, .88), rgba(10, 30, 30, .55) 70%, transparent) !important; color: #fff !important; font-size: .98rem !important; line-height: 1.4;
}
.sak-carousel__slide figcaption strong { display: block; font-size: 1.15rem; font-family: var(--global-heading-font-family); }
.sak-carousel__slide figcaption a { color: #fff; }
.sak-carousel__controls { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .75rem; }
.sak-carousel__controls button { border: 2px solid var(--sak-green); background: #fff; color: var(--sak-green); border-radius: 999px; min-width: 44px; height: 44px; padding: 0 .9rem; font-weight: 800; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.sak-carousel__controls button:hover { background: var(--sak-green); color: #fff; }
.sak-carousel__dots { display: flex; gap: .15rem; }
.sak-carousel__controls .sak-carousel__dot { min-width: 24px; width: 24px; height: 24px; padding: 0; border-radius: 50%; position: relative; border-color: transparent; background: transparent; }
.sak-carousel__controls .sak-carousel__dot::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #b9c7c7; }
.sak-carousel__controls .sak-carousel__dot[aria-current="true"]::after { background: var(--sak-green); inset: 5px; }
.sak-carousel__controls .sak-carousel__dot:hover { background: transparent; }
/* No-JS fallback: a simple grid */
.wp-block-gallery.sak-slideshow figcaption { font-size: .9rem; }
.sak-carousel__prev span, .sak-carousel__next span { font-size: 1.9rem; line-height: .8; position: relative; top: -.08em; }