@import url("theme_settings/theme_settings.css");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,700&family=Oswald:wght@500;600;700&display=swap");

/* ============================================================
   Tokens
   ============================================================ */
:root {
	/* Theme colors (CMS-driven, with diagnostic fallbacks) */
	--color-1:        var(--color-1-theme, #00ff00);
	--color-2:        var(--color-2-theme, #ff00ff);
	--color-over-1:   var(--color-over-1-theme, #ffffff);
	--color-over-2:   var(--color-over-2-theme, #ffffff);
	--color-1-isDark: var(--color-1-theme-isDark, 1);
	--color-2-isDark: var(--color-2-theme-isDark, 1);

	/* Supplementary surfaces, each paired with its own text color */
	--panel:      #ececea;
	--panel-over: #1d1d1b;
	--tile:       #f1f0ee;
	--tile-over:  #1d1d1b;

	--ink:       #1d1d1b;
	--ink-soft:  #4a4a48;
	--line:      #e2e0dc;
	--white:     #ffffff;

	--size-sm: 48rem;
	--size-md: 64rem;
	--size-lg: 80rem;
	--size-xl: 78rem;

	/* Inside-page overrides consumed by the #content_main rule */
	--inside-content-max: var(--size-xl);
	--inside-content-pad-x: clamp(0.5rem, 5%, 3rem);
	--inside-content-pad-y: 2rem;
}

/* ============================================================
   Base layout
   ============================================================ */
html { height: 100%; }

body {
	margin: 0;
	min-height: 100%;
	max-width: 100%;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ink);
	background: var(--white);
}

.site-header,
.site-footer { flex: none; }
#content_main { flex: 1 0 auto; }

.skip-link {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1000;
}
.skip-link:focus {
	width: auto;
	height: auto;
	padding: 0.5rem 1rem;
	background: var(--ink);
	color: var(--white);
	clip: auto;
	clip-path: none;
}

.hidden-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.material-icon {
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	-webkit-font-feature-settings: 'liga';
	font-feature-settings: 'liga';
}

.homepage figure { margin: 0; }

.section-inner {
	max-width: var(--size-xl);
	margin: 0 auto;
	padding: 0 clamp(1rem, 5%, 3.5rem);
}

.section { padding: clamp(2.25rem, 5vw, 3.75rem) 0; }

.section-heading,
.hero-title,
.photos-heading {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: 0.01em;
}
.section-heading {
	color: var(--ink);
	margin: 0 0 1.5rem;
}

/* Icon flattening for CMS-shipped SVGs — two-tone brand icons expose
   .color-fill and .transparency-change paths and opt in via .color-flatten. */
.flat-icon-colors svg.color-flatten .color-fill { fill: currentColor; }
.flat-icon-colors svg.color-flatten .transparency-change { fill: transparent; }
.flat-icon-colors svg:not(.color-flatten) { fill: currentColor; }

body a.btn {
	display: inline-block;
	font-weight: 600;
	font-size: 0.8rem;
	padding: 0.55rem 1.4rem;
	border: 1px solid var(--color-2);
	background: var(--color-2);
	color: var(--color-over-2);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body a.btn:hover,
body a.btn:focus-visible { background: var(--color-1); border-color: var(--color-1); color: var(--color-over-1); }
/* Buttons sitting on a --color-1 band invert to the band's own text color,
   which is the only pairing guaranteed to hold contrast there. */
body .hero a.btn:hover, body .hero a.btn:focus-visible,
body .about a.btn:hover, body .about a.btn:focus-visible,
body .photos a.btn:hover, body .photos a.btn:focus-visible {
	background: var(--color-over-1);
	border-color: var(--color-over-1);
	color: var(--color-1);
	filter: brightness(var(--color-1-isDark));
}

.ph {
	display: block;
	width: 100%;
	background:
		repeating-linear-gradient(45deg, rgba(0,0,0,0.02) 0 12px, rgba(0,0,0,0) 12px 24px),
		linear-gradient(135deg, #dddbd6, #cfccc6);
	color: var(--ink-soft);
}
.ph-hero, .ph-about, .ph-photo, .ph-card { display: grid; place-items: center; }
.ph .material-icon { font-size: 2.5rem; opacity: 0.45; }

.hero-carousel,
.hero-media .hero-image,
.hero-media .ph-hero,
.about-media img,
.about-media .ph-about,
.photos-grid img,
.photos-grid .ph-photo {
	box-sizing: border-box;
	border: 6px solid var(--white);
}

.section-action { margin-top: 1.75rem; }

/* ============================================================
   Header — two rows: identity/actions, then nav band
   ============================================================ */
.site-header {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--white);
}
.header-top-inner {
	max-width: var(--size-xl);
	margin: 0 auto;
	/* Right padding and min-height reserve the band the absolutely-positioned
	   menu toggle occupies, so it never lands on the row's own content. */
	min-height: 4.8rem;
	box-sizing: border-box;
	padding: 0.9rem clamp(1rem, 5%, 3.5rem);
	padding-right: 4.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
}
.header-identity {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	color: var(--ink);
	min-width: 0;
}
.header-actions { display: flex; align-items: center; gap: 1rem; }
#google_translate_element { display: none; }
@media (min-width: 48rem) { #google_translate_element { display: block; } }

.header-logo { width: 52px; height: 52px; object-fit: contain; }
.header-school-name {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: clamp(1.2rem, 2vw, 1.5rem);
	line-height: 1.2;
}

body a.header-donate {
	flex: none;
	font-weight: 600;
	font-size: 0.8rem;
	padding: 0.5rem 1.4rem;
	border: 1px solid var(--color-2);
	background: var(--color-2);
	color: var(--color-over-2);
	text-decoration: none;
}
body a.header-donate:hover,
body a.header-donate:focus-visible { background: var(--color-1); border-color: var(--color-1); color: var(--color-over-1); }

.header-navband {
	background: var(--white);
	border-top: 1px solid var(--line);
}

/* ---- Navigation: hamburger first, horizontal nav at --size-md ---- */
.sitenav-desktop { display: none; }
.menu-toggle { display: block; }

.menu-toggle {
	position: absolute;
	top: 1.15rem;
	right: clamp(1rem, 5%, 3.5rem);
	width: 2.5rem; height: 2.5rem;
	border: 0; background: transparent;
	color: var(--ink);
	cursor: pointer;
	z-index: 70;
}
.menu-toggle::after {
	font-family: 'Material Symbols Outlined';
	content: 'menu';
	font-size: 2rem;
}
.menu-toggle[aria-expanded="true"]::after { content: 'close'; }

.sitenav-mobile .nav-menu {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0.5rem 0;
	position: absolute;
	top: 100%;
	left: 0; right: 0;
	background: var(--white);
	border-bottom: 1px solid var(--line);
	box-shadow: 0 12px 24px rgba(0,0,0,0.08);
	z-index: 50;
}
.sitenav-mobile .nav-menu.show { display: block; }

.sitenav-mobile .nav-item { border-top: 1px solid var(--line); }
.sitenav-mobile .nav-item:first-child { border-top: 0; }
.sitenav-mobile .nav-item.dropdown {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
}
.sitenav-mobile .nav-item > .nav-item-inner {
	display: block;
	padding: 0.8rem clamp(1rem, 5%, 3.5rem);
	color: var(--ink);
	text-decoration: none;
	font-weight: 600;
}
.sitenav-mobile .nav-item > a.nav-item-inner { text-decoration: underline; text-decoration-color: var(--line); }
.sitenav-mobile .nav-item > a.nav-item-inner:hover,
.sitenav-mobile .nav-item > a.nav-item-inner:focus-visible { text-decoration-color: var(--ink); }
.sitenav-mobile .nav-item > .dropdown-toggle {
	grid-column: 2;
	border: 0; background: transparent;
	padding: 0 clamp(1rem, 5%, 3.5rem);
	height: 100%;
	color: var(--ink);
	cursor: pointer;
}
.sitenav-mobile .dropdown-toggle::after {
	font-family: 'Material Symbols Outlined';
	content: 'expand_more';
	font-size: 1.5rem;
	display: inline-block;
	transition: transform 0.15s ease;
}
.sitenav-mobile .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

/* Hover/focus surface goes on the row, not the label — a background on the
   anchor fills its grid cell and buries the toggle chevron beside it. */
.sitenav-mobile .nav-item:hover,
.sitenav-mobile .nav-item:focus-within { background: var(--panel); color: var(--panel-over); }

.sitenav-mobile .sub-menu-holder { grid-column: 1 / -1; display: none; }
.sitenav-mobile .sub-menu-holder:has(.sub-menu.show) { display: block; }
.sitenav-mobile .sub-menu { list-style: none; margin: 0; padding: 0; background: var(--tile); }
.sitenav-mobile .sub-menu-item.dropdown { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.sitenav-mobile .sub-menu-item > a {
	display: block;
	padding: 0.7rem clamp(1rem, 5%, 3.5rem) 0.7rem 2.25rem;
	color: var(--tile-over);
	text-decoration: none;
}
.sitenav-mobile .sub-menu-item > .dropdown-toggle {
	grid-column: 2;
	border: 0; background: transparent;
	padding: 0 clamp(1rem, 5%, 3.5rem);
	color: var(--tile-over);
	cursor: pointer;
}
/* Level-3 has no holder wrapper — the sub-menu itself carries .show */
.sitenav-mobile .sub-menu .sub-menu { display: none; grid-column: 1 / -1; }
.sitenav-mobile .sub-menu .sub-menu.show { display: block; }
.sitenav-mobile .sub-menu .sub-menu .sub-menu-item > a { padding-left: 3.25rem; color: var(--tile-over); text-decoration: none; }
.sitenav-mobile .sub-menu-item > a:hover,
.sitenav-mobile .sub-menu-item > a:focus-visible { background: var(--panel); color: var(--panel-over); }

@media (min-width: 64rem) {
	.sitenav-mobile { display: none; }
	.menu-toggle { display: none; }
	.sitenav-desktop { display: block; }

	.sitenav-desktop .nav-menu {
		list-style: none;
		margin: 0 auto;
		padding: 0 clamp(1rem, 5%, 3.5rem);
		max-width: var(--size-xl);
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 0 0.25rem;
	}
	.sitenav-desktop .nav-item { position: relative; }
	.sitenav-desktop .nav-item.dropdown {
		display: grid;
		grid-template-columns: 1fr;
	}
	.sitenav-desktop .nav-item > .nav-item-inner {
		display: block;
		padding: 0.7rem 0.5rem;
		color: var(--ink);
		font-size: 0.98rem;
		font-weight: 600;
		text-decoration: none;
		white-space: nowrap;
	}
	/* The native underline is the only resting-state signal separating link
	   items from CONTAINER labels sharing the same nav position. */
	.sitenav-desktop .nav-item > a.nav-item-inner { text-decoration: underline; text-decoration-color: currentColor; }
	.sitenav-desktop .nav-item.dropdown > .nav-item-inner {
		grid-column: 1; grid-row: 1;
		position: relative; z-index: 1;
		margin-right: 1.4rem;
	}
	.sitenav-desktop div.nav-item-inner { pointer-events: none; }

	.sitenav-desktop .nav-menu > .nav-item > .dropdown-toggle {
		grid-column: 1; grid-row: 1;
		width: 100%;
		justify-content: flex-end;
	}
	.sitenav-desktop .dropdown-toggle {
		border: 0; background: transparent;
		display: flex; align-items: center;
		padding: 0 0.3rem;
		color: var(--ink);
		cursor: pointer;
	}
	.sitenav-desktop .dropdown-toggle::after {
		font-family: 'Material Symbols Outlined';
		content: 'expand_more';
		font-size: 1.1rem;
		transition: transform 0.15s ease;
	}
	/* Panels open on hover as well as on the library's aria-expanded, so the
	   chevron tracks both rather than the attribute alone. */
	.sitenav-desktop .nav-item:hover > .dropdown-toggle::after,
	.sitenav-desktop .nav-item:focus-within > .dropdown-toggle::after,
	.sitenav-desktop .sub-menu-item:hover > .dropdown-toggle::after,
	.sitenav-desktop .sub-menu-item:focus-within > .dropdown-toggle::after,
	.sitenav-desktop .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
	.sitenav-desktop .nav-item:hover > .nav-item-inner,
	.sitenav-desktop .nav-item:focus-within > .nav-item-inner { color: var(--ink-soft); }
	.sitenav-desktop .nav-item:hover > .dropdown-toggle,
	.sitenav-desktop .nav-item:focus-within > .dropdown-toggle { color: var(--ink-soft); }

	.sitenav-desktop .sub-menu-holder {
		display: none;
		position: absolute;
		top: 100%; left: 0;
		min-width: 14rem;
		background: var(--color-1);
		border: 0;
		box-shadow: 0 14px 30px rgba(0,0,0,0.18);
		z-index: 60;
	}
	.sitenav-desktop .drop-left .sub-menu-holder { left: auto; right: 0; }
	.sitenav-desktop .sub-menu-holder:has(.sub-menu.show) { display: block; }
	.sitenav-desktop .sub-menu { list-style: none; margin: 0; padding: 0.35rem 0; }
	.sitenav-desktop .sub-menu-item { position: relative; }
	.sitenav-desktop .sub-menu-item.dropdown { display: grid; grid-template-columns: 1fr auto; align-items: center; }
	.sitenav-desktop .sub-menu-item > a {
		display: block;
		padding: 0.55rem 1rem;
		color: var(--color-over-1);
		text-decoration: none;
		font-size: 0.88rem;
	}
	.sitenav-desktop .sub-menu-item > .dropdown-toggle { color: var(--color-over-1); }
	.sitenav-desktop .sub-menu-item.dropdown > .dropdown-toggle { grid-column: 2; grid-row: 1; width: auto; }
	.sitenav-desktop .sub-menu-item > a:hover,
	.sitenav-desktop .sub-menu-item > a:focus-visible { background: var(--color-2); color: var(--color-over-2); }

	.sitenav-desktop .sub-menu .sub-menu { display: none; position: absolute; top: 0; left: 100%; min-width: 13rem; background: var(--color-1); border: 0; box-shadow: 0 14px 30px rgba(0,0,0,0.18); }
	.sitenav-desktop .sub-menu .sub-menu.show { display: block; }
	.sitenav-desktop .drop-left .sub-menu-item.dropdown > .sub-menu { left: auto; right: 100%; }
}

/* ============================================================
   Hero — panel full-bleed left, media raised on the right
   ============================================================ */
.hero { background: var(--white); padding: 0.75rem 0 2.5rem; }
.hero-inner { display: flex; flex-direction: column; }
.hero-panel {
	background: var(--color-1);
	padding: 2.25rem clamp(1rem, 6%, 3rem) 2.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.hero-title {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	line-height: 1.1;
	margin: 0 0 1rem;
	color: var(--color-over-1);
}
.hero-body { margin: 0 0 1.5rem; color: var(--color-over-1); font-size: 0.92rem; max-width: 26rem; }
.hero-body p { margin: 0 0 0.75rem; }
.hero-cta { align-self: center; }
body .hero-body a { color: inherit; }
.hero-media img,
.ph-hero { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.hero-carousel { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.hero-carousel .swiper-holder,
.hero-carousel .swiper,
.hero-carousel .swiper-wrapper { width: 100%; height: 100%; }
.hero-carousel .swiper-slide { height: 100%; }
.hero-carousel .swiper-slide figure { width: 100%; height: 100%; }
.hero-carousel .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-carousel .swiper-button-prev,
.hero-carousel .swiper-button-next { --swiper-navigation-color: var(--white); --swiper-navigation-bg: rgba(0,0,0,0.5); }
.hero-carousel:not(:has(.navigation-type-1)) .swiper-button-prev,
.hero-carousel:not(:has(.navigation-type-1)) .swiper-button-next { display: none; }

/* Pagination overlays the slide because the carousel is a fixed aspect box
   with overflow hidden — below-slide pagination would be clipped away. */
.hero-carousel .swiper-pagination { position: absolute; }
.hero-carousel {
	--swiper-pagination-color: var(--color-over-2);
	--swiper-pagination-bullet-text-color: var(--color-2);
	--swiper-pagination-bullet-size: 1.5rem;
}
.hero-carousel .numbered-pagination .swiper-pagination-bullet {
	place-content: center;
	color: var(--swiper-pagination-bullet-text-color, #000);
}

.hero-carousel figcaption {
	background-color: rgba(0,0,0,0.85);
	color: var(--white);
	padding: 0.6rem 0.9rem;
}
@media (min-width: 48rem) {
	.hero-carousel figcaption {
		position: absolute;
		left: 0;
		right: 0;
		background-color: rgba(0,0,0,0.75);
	}
	.hero-carousel figcaption.caption-position-top    { top: 0; }
	.hero-carousel figcaption.caption-position-bottom { bottom: 0; }

	.navigation-position-top    { --swiper-pagination-top: 0.5rem; --swiper-pagination-bottom: auto; }
	.navigation-position-bottom { --swiper-pagination-bottom: 0.5rem; --swiper-pagination-top: auto; }
	.navigation-position-left   { --swiper-pagination-left: 0.5rem; --swiper-pagination-right: auto; }
	.navigation-position-right  { --swiper-pagination-right: 0.5rem; --swiper-pagination-left: auto; }

	.hero-carousel .navigation-position-top    figcaption.caption-position-top    { padding-top:    calc(var(--swiper-pagination-bullet-size, 1rem) + 1rem); }
	.hero-carousel .navigation-position-bottom figcaption.caption-position-bottom { padding-bottom: calc(var(--swiper-pagination-bullet-size, 1rem) + 1rem); }
	.hero-carousel .navigation-position-left   figcaption                         { padding-left:   calc(var(--swiper-pagination-bullet-size, 1rem) + 1rem); }
	.hero-carousel .navigation-position-right  figcaption                         { padding-right:  calc(var(--swiper-pagination-bullet-size, 1rem) + 1rem); }

	.hero-carousel .navigation-type-1 figcaption { padding-left: calc(var(--swiper-navigation-size, 44px) + 0.5rem); padding-right: calc(var(--swiper-navigation-size, 44px) + 0.5rem); }
}
@media (max-width: 767px) {
	.hero-carousel .swiper-pagination-vertical {
		flex-direction: row;
		width: auto;
	}
}

.hero-carousel .swiper-autoplay-toggle-button {
	display: none;
	position: absolute;
	right: 0.6rem; bottom: 0.6rem;
	z-index: 5;
	width: 2.25rem; height: 2.25rem;
	border: 0; border-radius: 50%;
	background: rgba(0,0,0,0.5); color: var(--white);
	cursor: pointer;
}
.hero-carousel .swiper-autoplay-toggle-button::after { font-family: 'Material Symbols Outlined'; font-variation-settings: 'FILL' 1; content: 'pause'; font-size: 1.3rem; }
.hero-carousel .swiper-autoplay-toggle-button.paused::after { content: 'play_arrow'; }
@media (min-width: 48rem) { .hero-carousel .swiper-autoplay-toggle-button { display: block; } }
.ph-hero { min-height: 12rem; }

@media (min-width: 64rem) {
	.hero-inner {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		align-items: start;
	}
	.hero-panel {
		grid-column: 1 / 9;
		grid-row: 1;
		align-self: stretch;
		margin-top: 3rem;
		padding: 4rem clamp(2rem, 4vw, 4.5rem) 4.5rem clamp(1.5rem, 6vw, 6rem);
	}
	.hero-body { max-width: 32rem; }
	.hero-media {
		grid-column: 8 / 13;
		grid-row: 1;
		z-index: 1;
		margin-right: clamp(1rem, 5%, 3.5rem);
	}
	.hero-cta { align-self: flex-start; }
}

/* ============================================================
   News — flat cards in a carousel
   ============================================================ */
.news { background: var(--white); }
.news .swiper-container { position: relative; }
.news .swiper { width: 100%; }
.news-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--tile);
	color: var(--tile-over);
}
.news-photo { display: block; }
.news-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.news-photo-fallback { display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 2; background: var(--tile); }
.news-photo-fallback img { width: 55%; height: auto; aspect-ratio: auto; object-fit: contain; }
.news-body { padding: 1rem 1.1rem 1.3rem; }
.news-title { font-weight: 700; font-size: 0.95rem; margin: 0 0 0.4rem; line-height: 1.3; }
body .news-title a { color: var(--tile-over); text-decoration: none; }
body .news-title a:hover,
body .news-title a:focus-visible { text-decoration: underline; }
.news-summary { margin: 0; color: var(--ink-soft); font-size: 0.85rem; }

.carousel-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	margin-top: 1.75rem;
}
.news .swiper-button-prev,
.news .swiper-button-next {
	position: static;
	margin: 0;
	width: 2rem; height: 2rem;
	border: 0;
	background: transparent;
	color: var(--ink);
	--swiper-navigation-size: 1.6rem;
}
.swiper-container .swiper-button-prev::after,
.swiper-container .swiper-button-next::after {
	font-family: 'Material Symbols Outlined';
	font-variation-settings: 'FILL' 1;
	font-size: var(--swiper-navigation-size);
}
.swiper-container .swiper-button-prev::after { content: 'chevron_left'; }
.swiper-container .swiper-button-next::after { content: 'chevron_right'; }

@media (min-width: 64rem) {
	.carousel-controls { justify-content: flex-start; }
}

/* ============================================================
   Featured video
   ============================================================ */
.featured-video { background: var(--white); padding-top: 0.5rem; }
.video-frame {
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;
}
.video-frame video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.video-embed { position: relative; width: 100%; height: 100%; }
.video-embed :is(iframe, object, embed) { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ============================================================
   About — band with the photo raised above its top edge
   ============================================================ */
.about { background: var(--color-1); }
.about .section-heading { color: var(--color-over-1); }
.about-inner {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	padding-top: 2rem;
	padding-bottom: 2rem;
}
.ph-about,
.about-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.about-media { margin-top: 0; }
.about-text p,
.about-body { margin: 0; color: var(--color-over-1); font-size: 0.92rem; }
.about-body p { margin: 0 0 0.75rem; }
.about-cta { display: block; width: fit-content; margin: 1.5rem auto 0; }
@media (min-width: 64rem) {
	.about { margin-top: 3.5rem; }
	.about-inner { grid-template-columns: 1fr 1.8fr; }
	.about-media { margin-top: -5rem; margin-bottom: 2rem; }
	.about-cta { display: inline-block; width: auto; margin: 1.5rem 0 0; }
}

/* ============================================================
   Quick Links — photo cards with overlaid labels
   ============================================================ */
.quicklinks { background: var(--white); }
.quicklinks-grid {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}
.quicklink-card {
	display: block;
	position: relative;
	text-decoration: none;
}
.quicklink-figure { display: block; position: relative; overflow: hidden; }
.quicklink-media { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 0.8s ease; }
.quicklink-card:hover .quicklink-media,
.quicklink-card:focus-visible .quicklink-media { transform: scale(1.08); }
.quicklink-icon { display: grid; place-items: center; background: var(--tile); color: var(--color-1); filter: brightness(var(--color-1-isDark)); }
.quicklink-icon svg, .quicklink-icon img { width: 3rem; height: 3rem; }
/* The overlay is on the figure, not the card, so the label box below stays
   outside its bounds and keeps its own background. */
.quicklink-figure::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--color-1);
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}
.quicklink-card:hover .quicklink-figure::after,
.quicklink-card:focus-visible .quicklink-figure::after { opacity: 0.45; }
.quicklink-label {
	position: absolute;
	left: 1.5rem; right: 1.5rem; bottom: 1.1rem;
	z-index: 2;
	background: var(--white);
	padding: 0.6rem 0.5rem;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	color: var(--ink);
	box-shadow: 0 2px 8px rgba(0,0,0,0.12);
	transition: background-color 0.3s ease, color 0.3s ease;
}
.quicklink-card:hover .quicklink-label,
.quicklink-card:focus-visible .quicklink-label { color: var(--color-1); filter: brightness(var(--color-1-isDark)); }
@media (min-width: 48rem) { .quicklinks-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .quicklinks-grid { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   Learning Today — band with photos bleeding past its bottom
   ============================================================ */
.photos { background: var(--white); padding-bottom: clamp(2.25rem, 5vw, 3.75rem); }
.photos-band {
	background: var(--color-1);
	text-align: center;
	padding: clamp(2rem, 4.5vw, 3rem) 1rem;
}
.photos-heading {
	margin: 0;
	color: var(--color-over-1);
}
.photos-body { margin-top: clamp(1.5rem, 4vw, 3rem); }
.photos-grid {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}
.ph-photo,
.photos-grid img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.photos-grid figcaption { font-size: 0.82rem; color: var(--ink-soft); padding-top: 0.5rem; }
@media (min-width: 48rem) {
	.photos-grid { grid-template-columns: repeat(2, 1fr); }
	.photos-band { padding-bottom: clamp(6rem, 12vw, 11rem); }
	.photos-body { margin-top: clamp(-5rem, -10vw, -9rem); }
}

/* ============================================================
   School Song — spotlight message + video
   ============================================================ */
.song { background: var(--white); }
.song-inner {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}
.song-body { color: var(--ink-soft); font-size: 0.92rem; }
.song-body p { margin: 0 0 0.75rem; }
.song-cta { display: block; width: fit-content; margin: 1.5rem auto 0; }
.song-media video,
.song-media img,
.song-media .video-embed {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: #000;
	box-sizing: border-box;
	border: 6px solid var(--color-2);
}
.song-media .video-embed { position: relative; }
.song-media .video-embed :is(iframe, object, embed) { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 64rem) {
	.song-inner { grid-template-columns: 1.1fr 1fr; }
	.song-cta { display: inline-block; width: auto; margin: 1.5rem 0 0; }
}

/* ============================================================
   Events — strips with a date badge, plus a social column
   ============================================================ */
.events { background: var(--white); }
.events-layout {
	display: grid;
	gap: clamp(1.5rem, 4vw, 2.5rem);
	grid-template-columns: 1fr;
	align-items: start;
}
.events-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.event {
	display: flex;
	gap: 0.5rem;
	align-items: stretch;
	background: var(--tile);
	color: var(--tile-over);
}
.event-date {
	flex: none;
	width: 7rem;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.1rem;
	background: var(--white);
	color: var(--ink);
	border: 6px solid var(--color-2);
	margin: 0.9rem;
	padding: 0.75rem 0.5rem;
	text-align: center;
}
.event-month { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.event-day { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 1.6rem; line-height: 1; }
.event-info { display: flex; flex-direction: column; justify-content: center; padding: 0.9rem 1rem 0.9rem 0; }
.event-title { font-weight: 700; font-size: 0.95rem; margin: 0 0 0.25rem; }
body .event-title a { color: var(--tile-over); text-decoration: none; }
body .event-title a:hover,
body .event-title a:focus-visible { text-decoration: underline; }
.event-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; font-size: 0.82rem; color: var(--ink-soft); }
.event-meta span + span::before { content: "|"; margin-right: 0.5rem; color: var(--ink-soft); }

.events .section-action { display: flex; justify-content: center; }

.events-social ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.social-tile {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	min-height: 4.25rem;
	border: 6px solid var(--color-2);
	background: var(--white);
}
.social-tile svg,
.social-tile img { width: 2.4rem; height: 2.4rem; }
.social-tile:hover,
.social-tile:focus-visible { background: var(--tile); }

@media (min-width: 64rem) {
	.events-layout { grid-template-columns: 2.1fr 1fr; }
	.events-social ul { grid-template-columns: 1fr; }
	.events-social .social-tile { min-height: 4.5rem; }
	.events .section-action { justify-content: flex-start; }
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
	background: var(--color-1);
	color: var(--color-over-1);
}
.footer-inner {
	max-width: var(--size-xl);
	margin: 0 auto;
	padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1rem, 5%, 3.5rem);
}
.footer-identity {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding-bottom: 1.25rem;
}
.footer-logo { width: 54px; height: 54px; object-fit: contain; background: var(--white); border-radius: 50%; padding: 2px; }
.footer-school-name { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: clamp(1.2rem, 2vw, 1.5rem); }

.footer-middle {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	padding: 1.5rem 0;
}
.footer-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem 2rem; }
.footer-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
body .footer-links a,
body .footer-contact a { color: var(--color-over-1); text-decoration: underline; font-size: 1rem; }
body .footer-links a:hover,
body .footer-links a:focus-visible,
body .footer-contact a:hover,
body .footer-contact a:focus-visible { text-decoration: none; }

.footer-contact { font-style: normal; display: flex; flex-direction: column; gap: 0.5rem; font-size: 1rem; }
.footer-line { color: var(--color-over-1); }

.footer-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	padding: 1.5rem 0;
	border-top: 1px solid color-mix(in srgb, var(--color-over-1), transparent 75%);
}
.footer-logos-list { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.footer-logos .footer-social { margin: 0; }
.footer-logo-item {
	display: inline-flex;
	align-items: center;
}
.footer-logo-item img { display: block; height: 2.75rem; width: auto; max-width: 14rem; object-fit: contain; }

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem 1.5rem;
	padding-top: 1.25rem;
}
.footer-legal { display: flex; align-items: center; gap: 1.5rem; font-size: 1rem; }
.footer-edlio { color: inherit; }
.footer-edlio svg { width: 140px; height: 20px; fill: currentColor; display: block; }
body a.footer-login { color: inherit; display: inline-flex; align-items: center; gap: 0.35rem; text-decoration: none; font-size: 1rem; }
.footer-login svg { height: 1.5rem; width: auto; fill: currentColor; }
body a.footer-login:hover,
body a.footer-login:focus-visible { text-decoration: underline; }

.footer-social ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.6rem; }
body a.footer-circle {
	display: grid;
	place-items: center;
	width: 2.4rem; height: 2.4rem;
	border-radius: 50%;
	background: var(--color-over-1);
	color: var(--color-1);
	filter: brightness(var(--color-1-isDark));
	text-decoration: none;
}
.footer-circle svg,
.footer-circle img { width: 1.3rem; height: 1.3rem; }
body a.footer-circle:hover,
body a.footer-circle:focus-visible { background: color-mix(in srgb, var(--color-over-1), transparent 18%); }

@media (min-width: 64rem) {
	.footer-middle { grid-template-columns: 2fr 1fr; align-items: start; }
	.footer-contact { text-align: right; }
}

/* ============================================================
   Inside (CMS content) pages
   ============================================================ */
body:not(:has(.homepage)) #content_main {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--inside-content-max, var(--size-xl));
	margin-inline: auto;
	padding: var(--inside-content-pad-y, 2rem) var(--inside-content-pad-x, clamp(0.5rem, 5%, 3rem));
}
body .pageTitle {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	color: var(--ink);
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	body :where(.homepage, .site-header, .site-footer) *,
	body :where(.homepage, .site-header, .site-footer) *::before,
	body :where(.homepage, .site-header, .site-footer) *::after {
		transition-duration: 0.01ms;
		animation-duration: 0.01ms;
	}
}