/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* Feed color themes — used by the Feed Grid component (section id set by its Feed Color property) */
#feed-navy { color: var(--bricks-color-mtubgo); }
#feed-navy h3 { color: var(--bricks-color-mtubgo); }
#feed-navy .learn-card-wrap.brxe-div { border-color: var(--bricks-color-mtubgo); }

#feed-lt-blue { color: var(--bricks-color-mhqhxh); }
#feed-lt-blue h3 { color: var(--bricks-color-mhqhxh); }
#feed-lt-blue .learn-card-wrap.brxe-div { border-color: var(--bricks-color-mhqhxh); }

#feed-yellow { color: var(--bricks-color-ruacug); }
#feed-yellow h3 { color: var(--bricks-color-ruacug); }
#feed-yellow .learn-card-wrap.brxe-div { border-color: var(--bricks-color-ruacug); }

#feed-red { color: var(--bricks-color-njijeb); }
#feed-red h3 { color: var(--bricks-color-njijeb); }
#feed-red .learn-card-wrap.brxe-div { border-color: var(--bricks-color-njijeb); }
/* Orchestra seating map — [orchestra_seating_map] shortcode */
.cso-seating-map { width: 100%; }
.cso-seating-map img {
	display: block;
	width: 100%;
	height: auto;
}

/* Musician bios — Instrument template "Meet the Musicians" cards.
   The .cso-bio-overlay div inside each card renders only when the repeater row
   has a bio; it is never shown, it's the data source for the fly-out pane. */
.brxe-jkexul:has(.cso-bio-overlay) { cursor: pointer; }
.cso-bio-overlay { display: none; }

/* Bio fly-out pane (markup rendered in wp_footer on instrument pages) */
.cso-bio-backdrop {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(12, 20, 39, 0.45);
	opacity: 0;
	transition: opacity 0.25s ease;
}
.cso-bio-backdrop.is-open { opacity: 1; }
.cso-bio-pane {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 10001;
	width: min(440px, 92vw);
	padding: 6rem 3rem 3rem;
	overflow-y: auto;
	background: #fff;
	border-radius: 0;
	box-shadow: -12px 0 40px rgba(12, 20, 39, 0.25);
	border-left: 6px solid var(--bricks-color-ruacug);
	transform: translateX(105%);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.cso-bio-pane.is-open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
	.cso-bio-pane, .cso-bio-backdrop { transition: none; }
}
.cso-bio-pane__photo {
	width: 14rem;
	height: 14rem;
	object-fit: cover;
	border-radius: 999px;
	border: 4px solid var(--bricks-color-mhqhxh);
	margin-bottom: 1.6rem;
}
.cso-bio-pane__name {
	color: var(--bricks-color-mtubgo);
	font-size: 2.6rem;
	margin: 0 0 0.4rem;
}
.cso-bio-pane__role {
	color: var(--bricks-color-njijeb);
	font-weight: 700;
	font-size: 1.6rem;
	margin: 0 0 1.6rem;
}
.cso-bio-pane__text {
	font-size: 1.7rem;
	line-height: 1.6;
	color: var(--bricks-color-mtubgo);
}
.cso-bio-pane__text p { margin: 0 0 1.4rem; }
.cso-bio-pane__text p:last-child { margin-bottom: 0; }
.cso-bio-pane__close {
	position: absolute;
	top: 1.6rem;
	right: 1.6rem;
	display: grid;
	place-items: center;
	place-content: center;
	width: 4.4rem;
	height: 4.4rem;
	border: none;
	border-radius: 999px;
	background: var(--bricks-color-mtubgo);
	cursor: pointer;
	transition: transform 0.15s ease, background-color 0.15s ease;
}
.cso-bio-pane__close::before,
.cso-bio-pane__close::after {
	content: "";
	grid-area: 1 / 1;
	width: 2rem;
	height: 0.4rem;
	border-radius: 999px;
	background: #fff;
}
.cso-bio-pane__close::before { transform: rotate(45deg); }
.cso-bio-pane__close::after { transform: rotate(-45deg); }
.cso-bio-pane__close:hover {
	background: var(--bricks-color-njijeb);
	transform: scale(1.1);
}

/* Header search overlay — playful, frosted-glass styling.
   transition: none is load-bearing: Bricks' own transition on this element gets
   stuck permanently "running" alongside Fancy Animations (same issue as the bio
   overlay), pinning it invisible. */
.brxe-search .bricks-search-overlay {
	transition: none;
	background: rgba(255, 255, 255, 0.82);
	-webkit-backdrop-filter: blur(10px) saturate(1.2);
	backdrop-filter: blur(10px) saturate(1.2);
}
.brxe-search .bricks-search-overlay .title {
	font-size: clamp(3.6rem, 5vw, 5.6rem);
	color: var(--bricks-color-mtubgo);
	transform: rotate(-2deg);
	margin-bottom: 2rem;
}
.brxe-search .bricks-search-overlay .bricks-search-form {
	position: relative;
	width: min(780px, 94vw);
	max-width: none;
}
.brxe-search .bricks-search-overlay input[type="search"] {
	width: 100%;
	height: auto;
	border: 5px solid var(--bricks-color-ruacug);
	border-radius: 999px;
	padding: 2.4rem 12rem 2.4rem 4rem;
	font-size: clamp(2rem, 2.5vw, 2.7rem);
	background: #fff;
	box-shadow: 0 12px 32px rgba(12, 20, 39, 0.14);
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.brxe-search .bricks-search-overlay input[type="search"]:focus {
	border-color: var(--bricks-color-mhqhxh);
	box-shadow: 0 12px 32px rgba(12, 20, 39, 0.14), 0 0 0 6px rgba(140, 178, 255, 0.35);
	box-shadow: 0 12px 32px rgba(12, 20, 39, 0.14), 0 0 0 6px color-mix(in srgb, var(--bricks-color-mhqhxh) 30%, transparent);
}
.brxe-search .bricks-search-overlay button[type="submit"] {
	position: absolute;
	right: 1.1rem;
	top: 50%;
	transform: translateY(-50%);
	width: 7rem;
	height: 7rem;
	display: grid;
	place-items: center;
	border: none;
	border-radius: 999px;
	background: var(--bricks-color-njijeb);
	color: #fff;
	font-weight: 700;
	font-size: 2.2rem;
	cursor: pointer;
	transition: transform 0.15s ease, background-color 0.15s ease;
}
.brxe-search .bricks-search-overlay button[type="submit"]:hover,
.brxe-search .bricks-search-overlay button[type="submit"]:focus-visible {
	background: var(--bricks-color-mtubgo);
	transform: translateY(-50%) rotate(-6deg) scale(1.08);
}
.brxe-search .bricks-search-overlay .close {
	display: grid;
	place-items: center;
	place-content: center;
	width: 6rem;
	height: 6rem;
	border-radius: 999px;
	background: var(--bricks-color-mtubgo);
	/* The × text glyph never centers cleanly (font baseline metrics), so hide it
	   and draw a geometric X with two centered bars instead. */
	font-size: 0;
	line-height: 1;
	top: 2rem;
	right: 2rem;
	transition: transform 0.2s ease, background-color 0.2s ease;
}
.brxe-search .bricks-search-overlay .close::before,
.brxe-search .bricks-search-overlay .close::after {
	content: "";
	grid-area: 1 / 1;
	width: 2.8rem;
	height: 0.55rem;
	border-radius: 999px;
	background: #fff;
}
.brxe-search .bricks-search-overlay .close::before { transform: rotate(45deg); }
.brxe-search .bricks-search-overlay .close::after { transform: rotate(-45deg); }
.brxe-search .bricks-search-overlay .close:hover {
	background: var(--bricks-color-njijeb);
	transform: scale(1.1);
}

/* Header search toggle icon (scoped to the toggle only — element-level
   iconTypography also hits the overlay's close/submit buttons). */
.brxe-search > button.toggle {
	font-size: 2rem;
	color: var(--primary);
}

/* ---------- Search results page (template 1524) ---------- */
.cso-search-title {
	font-size: clamp(3.2rem, 5vw, 5rem);
	transform: rotate(-2deg);
}
.cso-search-summary { font-size: 2rem; }
.cso-term-pill {
	display: inline-block;
	background: var(--bricks-color-ruacug);
	color: var(--bricks-color-mtubgo);
	font-weight: 700;
	padding: 0.2rem 1.6rem;
	border-radius: 999px;
	transform: rotate(1.5deg);
}

/* Inline pill search — same look as the header overlay */
.cso-pill-search .bricks-search-form {
	position: relative;
	width: min(560px, 100%);
}
.cso-pill-search input[type="search"] {
	width: 100%;
	border: 4px solid var(--bricks-color-ruacug);
	border-radius: 999px;
	padding: 1.6rem 9rem 1.6rem 2.5rem;
	font-size: 1.9rem;
	background: #fff;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cso-pill-search input[type="search"]:focus {
	border-color: var(--bricks-color-mhqhxh);
	box-shadow: 0 0 0 5px rgba(140, 178, 255, 0.35);
}
.cso-pill-search button[type="submit"] {
	position: absolute;
	right: 0.7rem;
	top: 50%;
	transform: translateY(-50%);
	width: 4.6rem;
	height: 4.6rem;
	display: grid;
	place-items: center;
	border: none;
	border-radius: 999px;
	background: var(--bricks-color-njijeb);
	color: #fff;
	font-weight: 700;
	font-size: 1.6rem;
	cursor: pointer;
	transition: transform 0.15s ease, background-color 0.15s ease;
}
.cso-pill-search button[type="submit"]:hover {
	background: var(--bricks-color-mtubgo);
	transform: translateY(-50%) scale(1.08);
}

/* Result cards: gentle alternating tilt, straighten + grow on hover */
.brxe-4fueb6 { transition: transform 0.18s ease; }
.brxe-4fueb6:nth-child(odd) { transform: rotate(-1.2deg); }
.brxe-4fueb6:nth-child(even) { transform: rotate(1.2deg); }
.brxe-4fueb6:hover { transform: rotate(0deg) scale(1.04); }

/* No-results state */
.cso-no-results {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	align-items: flex-start;
	font-size: 2rem;
}
.cso-no-results-title { transform: rotate(-1.5deg); }
.cso-suggestion-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
}
.cso-suggestion-pills a {
	display: inline-block;
	padding: 1rem 2.4rem;
	border-radius: 999px;
	background: var(--bricks-color-mhqhxh);
	color: #fff !important;
	font-weight: 700;
	font-size: 1.8rem;
	text-decoration: none;
	transition: transform 0.15s ease, background-color 0.15s ease;
}
.cso-suggestion-pills a:nth-child(2) {
	background: var(--bricks-color-ruacug);
	color: var(--bricks-color-mtubgo) !important;
}
.cso-suggestion-pills a:nth-child(3) { background: var(--bricks-color-njijeb); }
.cso-suggestion-pills a:hover { transform: scale(1.06) rotate(-1deg); }

/* ---------- Composers page: pill filters + search (matches launched search bar) ---------- */
#brxe-cxfera .brx-filter-options,
#brxe-infera .brx-filter-options,
#brxe-exfera .brx-filter-options {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
}
#brxe-cxfera li { --pill: var(--bricks-color-mtubgo); }
#brxe-cxfera li:nth-child(2) { --pill: var(--bricks-color-mhqhxh); }
#brxe-cxfera li:nth-child(3) { --pill: var(--bricks-color-ruacug); }
#brxe-cxfera li:nth-child(4) { --pill: var(--bricks-color-njijeb); }
#brxe-cxfera li:nth-child(5) { --pill: var(--bricks-color-mhqhxh); }
#brxe-cxfera li:nth-child(6) { --pill: var(--bricks-color-njijeb); }
#brxe-infera li { --pill: var(--bricks-color-mtubgo); }
#brxe-infera li:nth-child(2) { --pill: var(--bricks-color-mhqhxh); } /* Strings */
#brxe-infera li:nth-child(3) { --pill: var(--bricks-color-mtubgo); } /* Woodwinds */
#brxe-infera li:nth-child(4) { --pill: var(--bricks-color-ruacug); } /* Brass */
#brxe-infera li:nth-child(5) { --pill: var(--bricks-color-njijeb); } /* Percussion */
#brxe-exfera li { --pill: var(--bricks-color-mtubgo); }
#brxe-exfera li:nth-child(2) { --pill: var(--bricks-color-mhqhxh); } /* Quiz */
#brxe-exfera li:nth-child(3) { --pill: var(--bricks-color-ruacug); } /* Game */
#brxe-exfera li:nth-child(4) { --pill: var(--bricks-color-njijeb); } /* Interactive */
#brxe-exfera li:nth-child(5) { --pill: var(--bricks-color-mhqhxh); } /* Flash Cards */
#brxe-exfera li:nth-child(6) { --pill: var(--bricks-color-njijeb); } /* Word Search */
#brxe-cxfera .brx-option-text.bricks-button,
#brxe-infera .brx-option-text.bricks-button,
#brxe-exfera .brx-option-text.bricks-button {
	display: inline-block;
	padding: 0.6rem 1.6rem;
	border-radius: 999px;
	background: var(--pill);
	color: #fff;
	font-weight: 700;
	font-size: 1.4rem;
	line-height: 1.2;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#brxe-cxfera li:nth-child(3) .brx-option-text.bricks-button,
#brxe-infera li:nth-child(4) .brx-option-text.bricks-button,
#brxe-exfera li:nth-child(3) .brx-option-text.bricks-button {
	color: var(--bricks-color-mtubgo); /* yellow pill needs dark text */
}
#brxe-cxfera label:hover .brx-option-text.bricks-button,
#brxe-infera label:hover .brx-option-text.bricks-button,
#brxe-exfera label:hover .brx-option-text.bricks-button {
	transform: scale(1.06) rotate(-1.5deg);
}
/* Active era: white + colored double ring, like a sticker */
#brxe-cxfera .brx-option-text.brx-option-active.bricks-button,
#brxe-infera .brx-option-text.brx-option-active.bricks-button,
#brxe-exfera .brx-option-text.brx-option-active.bricks-button {
	box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--pill);
	transform: scale(1.04);
}
#brxe-cxfsch input[type="search"] {
	border: 3px solid var(--bricks-color-ruacug);
	border-radius: 999px;
	padding: 1.1rem 2.2rem;
	font-size: 1.7rem;
	width: min(320px, 100%);
	background: #fff;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#brxe-cxfsch input[type="search"]:focus {
	border-color: var(--bricks-color-mhqhxh);
	box-shadow: 0 0 0 5px rgba(140, 178, 255, 0.35);
}

/* Composer cards: same playful tilt as search results */
.brxe-cxcard,
.brxe-incard,
.brxe-excard,
.brxe-rlcard {
	transform: rotate(var(--tilt, 0deg));
	transition: transform 0.18s ease;
}
.brxe-cxcard:nth-child(odd), .brxe-incard:nth-child(odd), .brxe-excard:nth-child(odd), .brxe-rlcard:nth-child(odd) { --tilt: -1.2deg; }
.brxe-cxcard:nth-child(even), .brxe-incard:nth-child(even), .brxe-excard:nth-child(even), .brxe-rlcard:nth-child(even) { --tilt: 1.2deg; }
.brxe-cxcard:hover, .brxe-incard:hover, .brxe-excard:hover, .brxe-rlcard:hover { transform: rotate(0deg) scale(1.04); }

/* Reshuffle pop-in when filter/search results swap (class added by JS on
   bricks/ajax/query_result/displayed, staggered per card) */
@media (prefers-reduced-motion: no-preference) {
	@keyframes cso-pop {
		from { opacity: 0; transform: scale(0.5) rotate(var(--tilt, 0deg)); }
	}
	.cso-shuffling > * { animation: cso-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
	.cso-shuffling > *:nth-child(1) { animation-delay: 0.00s; }
	.cso-shuffling > *:nth-child(2) { animation-delay: 0.04s; }
	.cso-shuffling > *:nth-child(3) { animation-delay: 0.08s; }
	.cso-shuffling > *:nth-child(4) { animation-delay: 0.12s; }
	.cso-shuffling > *:nth-child(5) { animation-delay: 0.16s; }
	.cso-shuffling > *:nth-child(6) { animation-delay: 0.20s; }
	.cso-shuffling > *:nth-child(7) { animation-delay: 0.24s; }
	.cso-shuffling > *:nth-child(8) { animation-delay: 0.28s; }
	.cso-shuffling > *:nth-child(9) { animation-delay: 0.32s; }
	.cso-shuffling > *:nth-child(10) { animation-delay: 0.36s; }
	.cso-shuffling > *:nth-child(n+11) { animation-delay: 0.40s; }
}

/* ---------- Instruments page: family jump bar ---------- */
.cso-family-bar { padding-block: 2rem 0; }
.cso-family-bar .brxe-container {
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.6rem;
}
.cso-family-label {
	font-weight: 700;
	font-size: 1.8rem;
	color: var(--primary);
	margin: 0;
}


/* Seating map section: navy feed colors under its own id (the section previously
   reused #feed-navy, which duplicated the Woodwinds section id on the same page) */
#seating-map { color: var(--bricks-color-mtubgo); }
#seating-map h3 { color: var(--bricks-color-mtubgo); }

/* Family bar refinements: tan strip, hover-stable pill text, compact inline search */
.cso-family-bar {
	background: #f2e7d8; /* darker tan than the cream page background */
	padding-block: 2.4rem;
}
.cso-family-bar .cso-pill-search { margin-left: auto; }
.cso-family-bar .brxe-filter-search.cso-pill-search { width: min(320px, 100%); }
.cso-family-bar .cso-pill-search input[type="search"] {
	width: 100%;
	padding: 1.1rem 6.4rem 1.1rem 2.2rem;
	font-size: 1.6rem;
	border-width: 3px;
	box-shadow: none;
}
.cso-family-bar .brxe-filter-search { position: relative; }
.cso-filter-go {
	position: absolute;
	right: 0.55rem;
	top: 50%;
	transform: translateY(-50%);
	width: 3.6rem;
	height: 3.6rem;
	display: grid;
	place-items: center;
	border: none;
	border-radius: 999px;
	background: var(--bricks-color-njijeb);
	color: #fff;
	font-weight: 700;
	font-size: 1.25rem;
	cursor: pointer;
	transition: transform 0.15s ease, background-color 0.15s ease;
}
.cso-filter-go:hover,
.cso-filter-go:focus-visible {
	background: var(--bricks-color-mtubgo);
	transform: translateY(-50%) scale(1.08);
}
@media (max-width: 767px) {
	.cso-family-bar .cso-pill-search,
	.cso-family-bar .brxe-filter-search.cso-pill-search {
		margin-left: 0;
		width: 100%;
	}
}



/* Active-filter crumb chip beside the grid heading */
.cso-filter-crumb {
	display: inline-block;
	background: var(--bricks-color-mtubgo);
	color: #fff;
	margin-left: 1.4rem;
	padding: 0.5rem 1.8rem;
	border-radius: 999px;
	font-size: 0.5em;
	line-height: 1.3;
	vertical-align: middle;
	transform: rotate(-2deg);
	animation: cso-crumb-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cso-crumb-pop {
	from { opacity: 0; transform: scale(0.4) rotate(-8deg); }
	to { opacity: 1; transform: scale(1) rotate(-2deg); }
}

/* Larger card titles on the explorer grids and search results */
.brxe-incard h4,
.brxe-cxcard h4,
.brxe-excard h4,
.brxe-rlcard h4,
.brxe-4fueb6 h4 {
	font-size: clamp(1.9rem, 1.6vw, 2.5rem);
}


/* Mobile: era/family pills collapse into a dropdown */
.cso-mobile-filter { display: none; }
@media (max-width: 767px) {
	#brxe-infera, #brxe-cxfera, #brxe-exfera { display: none; }
	.cso-mobile-filter { display: block; width: 100%; }
	select.cso-mobile-filter {
		width: 100%;
		padding: 1.1rem 2.2rem;
		border: 3px solid var(--bricks-color-mtubgo);
		border-radius: 999px;
		background: #fff;
		color: var(--bricks-color-mtubgo);
		font-weight: 700;
		font-size: 1.6rem;
	}
}

/* "Listen" button on famous-works cards (composer + instrument templates) */
a.cso-listen-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	width: fit-content;
	margin-top: 0.6rem;
	padding: 0.7rem 2rem;
	border-radius: 999px;
	background: var(--bricks-color-njijeb);
	color: #fff !important;
	font-weight: 700;
	font-size: 1.5rem;
	text-decoration: none;
	transition: transform 0.15s ease, background-color 0.15s ease;
}
a.cso-listen-btn::before {
	content: "♪";
	font-size: 1.8rem;
	line-height: 1;
}
a.cso-listen-btn:hover,
a.cso-listen-btn:focus-visible {
	background: var(--bricks-color-mtubgo);
	transform: scale(1.07) rotate(-2deg);
}
@media (prefers-reduced-motion: no-preference) {
	@keyframes cso-note-dance {
		from { transform: rotate(-14deg) translateY(0); }
		to { transform: rotate(14deg) translateY(-3px); }
	}
	a.cso-listen-btn:hover::before,
	a.cso-listen-btn:focus-visible::before {
		animation: cso-note-dance 0.4s ease infinite alternate;
	}
}

/* ---------- Visit page ---------- */
/* Numbered works-list counter for page use (templates carry their own copy in a Code element) */
.card-works-list__wrapper { counter-increment: item; }
.card-works-list__wrapper .card-works-list__step:after { content: counter(item, decimal-leading-zero); }
.card-works-list__wrapper:nth-child(even) .card-works-list { flex-direction: row-reverse; }
@media (max-width: 767px) {
	.card-works-list__wrapper:nth-child(even) .card-works-list { flex-direction: column; }
}
.works-list__list { counter-reset: item; }

/* Generic brand pill link (external CTAs) */
a.cso-pill-link {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	padding: 0.9rem 2.4rem;
	border-radius: 999px;
	background: var(--bricks-color-njijeb);
	color: #fff !important;
	font-weight: 700;
	font-size: 1.6rem;
	text-decoration: none;
	transition: transform 0.15s ease, background-color 0.15s ease;
}
a.cso-pill-link:hover,
a.cso-pill-link:focus-visible {
	background: var(--bricks-color-mtubgo);
	transform: scale(1.06) rotate(-1.5deg);
}

/* Pro-tip callout */
.cso-protip {
	background: #f2e7d8;
	border-left: 6px solid var(--bricks-color-ruacug);
	border-radius: 1.2rem;
	padding: 1.6rem 2.2rem;
	font-weight: 600;
	width: fit-content;
}
.cso-protip::before { content: "\1F4A1 "; }

/* Music Manners cards */
.cso-manners-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--grid-gap);
	width: 100%;
}
@media (max-width: 991px) { .cso-manners-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 478px) { .cso-manners-grid { grid-template-columns: 1fr; } }
.cso-manner-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 2.4rem;
	border-radius: 1.8rem;
	background: var(--bricks-color-mtubgo);
	color: #fff;
	transform: rotate(var(--tilt, 0deg));
	transition: transform 0.18s ease;
}
.cso-manner-card:nth-child(odd) { --tilt: -1.2deg; }
.cso-manner-card:nth-child(even) { --tilt: 1.2deg; }
.cso-manner-card:hover { transform: rotate(0deg) scale(1.03); }
.cso-manner-card:nth-child(2) { background: var(--bricks-color-mhqhxh); }
.cso-manner-card:nth-child(3) { background: var(--bricks-color-ruacug); color: var(--bricks-color-mtubgo); }
.cso-manner-card:nth-child(4) { background: var(--bricks-color-njijeb); }
.cso-manner-card h4 { color: inherit; font-size: 2.2rem; margin: 0; }
.cso-manner-emoji { font-size: 4rem; line-height: 1; margin: 0; }

/* Editor-only placeholder notes (render only for logged-in users) */
.cso-editor-note {
	border: 2px dashed var(--bricks-color-njijeb);
	border-radius: 1.2rem;
	padding: 1.4rem 2rem;
	background: rgba(205, 22, 63, 0.06);
	font-size: 1.5rem;
	width: 100%;
}

/* Visit page tightening */
/* 360 tour: cap the 70vh walkthrough wrap to a sensible content-block height */
#brxe-tikgln {
	height: 54rem;
	max-height: 70vh;
	width: 100%;
}
/* Prose paragraphs (direct children of each section container) read better capped.
   NOTE: sections with a Feed Color carry _cssId, so they render as #feed-* — a
   #brxe-{id} selector never matches them. */
#feed-navy > .brxe-container > p,
#feed-lt-blue > .brxe-container > p,
#feed-yellow > .brxe-container > p,
#feed-red > .brxe-container > p,
#feed-red > .brxe-container > .brxe-text {
	max-width: 75ch;
}
/* Visit section subheadings: centered, with room above and below */
#feed-navy > .brxe-container > h4,
#feed-lt-blue > .brxe-container > h4,
#feed-yellow > .brxe-container > h4,
#feed-red > .brxe-container > h4 {
	width: 100%;
	max-width: 104rem;
	margin: 4rem auto 1.2rem;
	text-align: center;
	font-size: var(--text-xl);
	color: var(--bricks-color-mtubgo);
}

/* Visit numbered lists: center the zigzag and brand the step numbers.
   (Famous-works template sections use .gyrtpe, not #feed-*, so they're untouched.) */
#feed-navy .works-list__list,
#feed-red .works-list__list {
	width: 100%;
	max-width: 104rem;
	margin-inline: auto;
}
#feed-navy .card-works-list__wrapper,
#feed-red .card-works-list__wrapper {
	width: 100%;
}
#feed-navy .card-works-list,
#feed-red .card-works-list {
	flex-grow: 1;
}
#feed-navy .card-works-list__step,
#feed-red .card-works-list__step {
	color: var(--bricks-color-mtubgo);
}


/* Quick tips: 2-col card grid, red outline, tilt-straighten hover */
.cso-tips-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--grid-gap);
	width: 100%;
	max-width: 104rem;
	margin-inline: auto;
}
@media (max-width: 767px) { .cso-tips-grid { grid-template-columns: 1fr; } }
.cso-tip-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 2.4rem;
	border: 3px solid var(--bricks-color-njijeb);
	border-radius: 1.8rem;
	background: #fff;
	transform: rotate(var(--tilt, 0deg));
	transition: transform 0.18s ease;
}
.cso-tip-card p { color: var(--bricks-color-mtubgo); margin: 0; }
.cso-tip-card:nth-child(odd) { --tilt: -1.2deg; }
.cso-tip-card:nth-child(even) { --tilt: 1.2deg; }
.cso-tip-card:hover { transform: rotate(0deg) scale(1.03); }

/* Accessibility: light-blue box with navy text */
.cso-access-box {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	width: 100%;
	max-width: 104rem;
	margin-inline: auto;
	padding: 3.2rem;
	border-radius: 1.8rem;
	background: rgba(140, 178, 255, 0.22);
	background: color-mix(in srgb, var(--bricks-color-mhqhxh) 22%, #fff);
}
.cso-access-box p {
	color: var(--bricks-color-mtubgo);
	margin: 0;
	max-width: 75ch;
}

/* OneTap injects its toggle inside a static-flow <section> after the footer,
   adding ~115px of blank space on every page. The button itself is fixed, so
   the wrapper can safely take no flow space. */
section.onetap-container-toggle { height: 0; padding: 0; margin: 0; overflow: visible; }

/* Second filter row: taxonomy dropdowns on the explorer bars */
.cso-filter-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2rem;
	width: 100%;
	margin-top: 0.4rem;
}
.cso-tailor-label { font-size: 1.5rem; }
select.cso-filter-select {
	appearance: none;
	-webkit-appearance: none;
	padding: 0.8rem 4rem 0.8rem 1.8rem;
	border: 3px solid var(--bricks-color-mtubgo);
	border-radius: 999px;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23003262' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.6rem center;
	color: var(--bricks-color-mtubgo);
	font-weight: 700;
	font-size: 1.5rem;
	min-width: 16rem;
	width: auto;
	cursor: pointer;
	transition: border-color 0.15s ease, transform 0.15s ease;
}
select.cso-filter-select:hover,
select.cso-filter-select:focus-visible {
	border-color: var(--bricks-color-njijeb);
	transform: scale(1.03);
	outline: none;
}
@media (max-width: 767px) {
	select.cso-filter-select { width: 100%; }
}

/* ---------- Events Feed module (section template, source: main-site API) ---------- */
/* Centered wrapping flex (not grid) so partial rows — e.g. a composer with
   one or two annual performances — sit centered instead of left-aligned */
.cso-events-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--grid-gap);
	width: 100%;
}
.cso-events-grid > * {
	flex: 0 1 calc((100% - 2 * var(--grid-gap)) / 3);
	min-width: 0;
}
@media (max-width: 991px) { .cso-events-grid > * { flex-basis: calc((100% - var(--grid-gap)) / 2); } }
@media (max-width: 767px) { .cso-events-grid > * { flex-basis: 100%; } }
.cso-event-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 3px solid var(--bricks-color-mtubgo);
	border-radius: 1.8rem;
	overflow: hidden;
	transform: rotate(var(--tilt, 0deg));
	transition: transform 0.18s ease;
}
.cso-event-card:nth-child(odd) { --tilt: -1.2deg; }
.cso-event-card:nth-child(even) { --tilt: 1.2deg; }
.cso-event-card:hover { transform: rotate(0deg) scale(1.03); }
.cso-event-imgwrap {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--bricks-color-mtubgo); /* fallback when an event has no image */
	overflow: hidden;
}
.cso-event-imgwrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.cso-event-date {
	position: absolute;
	top: 1.2rem;
	left: 1.2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 7.2rem;
	height: 7.2rem;
	padding: 0 1.2rem;
	border-radius: 1.4rem;
	background: var(--bricks-color-njijeb);
	color: #fff;
	box-shadow: 0 4px 14px rgba(12, 20, 39, 0.35);
}
.cso-event-day { font-size: 2.8rem; font-weight: 700; line-height: 1; margin: 0; }
.cso-event-month { font-size: 1.3rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin: 0.2rem 0 0; }
.cso-event-info { display: flex; flex-direction: column; gap: 0.8rem; padding: 2rem 2.4rem 2.4rem; }
.cso-event-title { color: var(--bricks-color-mtubgo); font-size: 2rem; margin: 0; }
.cso-event-meta { color: var(--bricks-color-mtubgo); font-size: 1.4rem; margin: 0; opacity: 0.85; }
.cso-event-info .cso-pill-link { padding: 0.6rem 1.8rem; font-size: 1.4rem; }

/* ---------- Message Board: sticky-note wall ---------- */
.cso-notes-wall {
	margin-bottom: 6rem;
	columns: 3;
	column-gap: var(--grid-gap);
	width: 100%;
}
/* Intro reads navy, not the section's yellow theme color */
#feed-yellow > .brxe-container > .brxe-text-basic:not(.cso-editor-note) {
	color: var(--bricks-color-mtubgo);
}
@media (max-width: 991px) { .cso-notes-wall { columns: 2; } }
@media (max-width: 767px) { .cso-notes-wall { columns: 1; } }
.cso-note-card {
	display: block;
	break-inside: avoid;
	margin-bottom: var(--grid-gap);
	padding: 2.4rem;
	border-radius: 0.4rem 1.8rem 0.4rem 1.8rem;
	background: #fff7d6;
	box-shadow: 0 6px 16px rgba(12, 20, 39, 0.12);
	transform: rotate(var(--tilt, 0deg));
	transition: transform 0.18s ease;
}
.cso-note-card:nth-child(4n+1) { --tilt: -1.6deg; background: #fff7d6; }  /* yellow */
.cso-note-card:nth-child(4n+2) { --tilt: 1.4deg; background: #e5eefc; }   /* light blue */
.cso-note-card:nth-child(4n+3) { --tilt: -1deg; background: #fde8ed; }    /* pink/red */
.cso-note-card:nth-child(4n+4) { --tilt: 1.8deg; background: #e9f6ec; }   /* mint */
.cso-note-card:hover { transform: rotate(0deg) scale(1.03); }
.cso-note-msg p, .cso-note-msg { color: var(--bricks-color-mtubgo); font-size: 1.7rem; line-height: 1.5; margin: 0; }
.cso-note-sig {
	margin: 1.2rem 0 0;
	color: var(--bricks-color-njijeb);
	font-weight: 700;
	font-size: 1.5rem;
}


/* Related Activities module */
.cso-related-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--grid-gap);
	width: 100%;
}
@media (max-width: 991px) { .cso-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 478px) { .cso-related-grid { grid-template-columns: 1fr; } }

/* Related Activities: the shared learn-card class carries grid-column: span 3
   (from its original home-grid context); neutralize it in this module's grid. */
.cso-related-grid > .brxe-rlcard.brxe-div { grid-column: auto; }

/* ---------- Kids Club page ---------- */
.cso-howit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 991px) { .cso-howit-grid { grid-template-columns: 1fr; } }
.cso-kc-closer {
	font-weight: 700;
	font-size: 1.9rem;
	color: var(--bricks-color-mtubgo);
	text-align: center;
	width: 100%;
	margin-top: 1.6rem;
}
.cso-sched-title { color: var(--bricks-color-njijeb); font-size: 1.9rem; margin: 0; }

/* Kids Club: musician trading cards */
.cso-sched-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	counter-reset: tcard;
	max-width: none;
}
@media (max-width: 991px) { .cso-sched-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 478px) { .cso-sched-grid { grid-template-columns: 1fr; } }
.cso-trading-card {
	counter-increment: tcard;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	aspect-ratio: 3 / 4;
	padding: 1.6rem 1.6rem 3.2rem;
	background: #fff;
	border: 5px solid var(--bricks-color-mtubgo);
	border-radius: 1.4rem;
	box-shadow: 0 6px 16px rgba(12, 20, 39, 0.15);
	transform: rotate(var(--tilt, 0deg));
	transition: transform 0.18s ease;
}
.cso-trading-card::before {
	content: "";
	position: absolute;
	inset: 0.7rem;
	border: 2px dashed var(--bricks-color-mhqhxh);
	border-radius: 0.9rem;
	pointer-events: none;
}
.cso-trading-card:nth-child(odd) { --tilt: -1.4deg; }
.cso-trading-card:nth-child(even) { --tilt: 1.4deg; }
.cso-trading-card:hover { transform: rotate(0deg) scale(1.05); z-index: 2; }
.cso-trading-card .cso-sched-title {
	position: relative;
	background: var(--bricks-color-njijeb);
	color: #fff;
	font-size: 1.6rem;
	text-align: center;
	padding: 0.8rem 1rem;
	border-radius: 0.8rem;
	margin: 0.4rem 0.4rem 0;
}
.cso-trading-card p {
	position: relative;
	color: var(--bricks-color-mtubgo);
	text-align: center;
	font-size: 1.5rem;
	line-height: 1.7;
	margin: auto 0;
}
.cso-trading-card p strong {
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 1.2rem;
	color: var(--bricks-color-njijeb);
	margin-bottom: 0.4rem;
}
.cso-trading-card::after {
	content: counter(tcard) " / 13";
	position: absolute;
	bottom: 1.2rem;
	right: 1.6rem;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--bricks-color-mhqhxh);
}

/* Feature nav cards (bottom of landing pages): navy gradient scrim over the
   photo so the white title/description keep contrast on busy images */
.card-two-col-feature__img::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(
		180deg,
		rgba(0, 50, 98, 0) 18%,
		rgba(0, 50, 98, 0.72) 55%,
		rgba(0, 50, 98, 0.95) 100%
	);
	pointer-events: none;
}

/* Symphony note attachments: kid art sits on the sticky note above the
   message; a PDF shows as a small navy chip that opens in a new tab */
.cso-note-card .cso-note-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.6rem;
	margin-bottom: 1.2rem;
	border: 3px solid rgba(255, 255, 255, 0.75);
	box-shadow: 0 2px 6px rgba(0, 50, 98, 0.18);
}
a.cso-note-file {
	display: inline-block;
	margin-bottom: 1rem;
	padding: 0.4rem 1.4rem;
	border-radius: 999px;
	background: var(--bricks-color-mtubgo);
	color: #fff;
	font-size: 1.3rem;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s ease;
}
a.cso-note-file:hover {
	background: var(--bricks-color-njijeb);
	color: #fff;
	transform: scale(1.05);
}

/* Student art gallery: horizontal snap strip of polaroid-style drawings
   (section template "Student Art Gallery", loop stcard) */
.cso-art-strip {
	display: flex;
	align-items: flex-start; /* each polaroid hugs its own drawing height */
	gap: 2.4rem;
	overflow-x: auto;
	padding: 1.6rem 0.6rem 2.4rem;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}
/* Center the strip while it fits, without breaking scroll when it overflows */
.cso-art-card:first-child { margin-left: auto; }
.cso-art-card:last-child { margin-right: auto; }
/* Center the "Our Art Gallery!" header (shared .slider-header is space-between) */
#brxe-sthead { justify-content: center; }
.cso-art-strip::-webkit-scrollbar { height: 0.8rem; }
.cso-art-strip::-webkit-scrollbar-thumb {
	background: var(--bricks-color-mhqhxh);
	border-radius: 999px;
}
.cso-art-card {
	flex: 0 0 auto;
	width: min(26rem, 70vw);
	margin: 0;
	scroll-snap-align: center;
	background: #fff;
	padding: 1.2rem 1.2rem 1.4rem;
	border-radius: 0.4rem;
	box-shadow: 0 6px 16px rgba(12, 20, 39, 0.18);
	transform: rotate(-2deg);
	transition: transform 0.2s ease;
}
.cso-art-card:nth-child(even) { transform: rotate(2deg); }
.cso-art-card:hover { transform: rotate(0deg) scale(1.04); z-index: 1; }
.cso-art-card .cso-art-img,
.cso-art-card .cso-art-img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.2rem;
}
.cso-art-name {
	margin: 1rem 0 0;
	text-align: center;
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--bricks-color-mtubgo);
}
.cso-art-empty {
	text-align: center;
	font-size: 1.7rem;
	color: var(--bricks-color-mtubgo);
}

/* Pronunciation button: small circle next to composer/instrument names,
   plays the ACF pronunciation_audio clip (JS in wp_footer) */
.cso-say-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}
a.cso-say-btn {
	display: inline-grid;
	place-items: center;
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 999px;
	background: var(--bricks-color-mtubgo);
	font-size: 1.5rem;
	line-height: 1;
	text-decoration: none;
	transition: transform 0.15s ease, background-color 0.15s ease;
}
a.cso-say-btn:hover {
	background: var(--bricks-color-njijeb);
	transform: scale(1.1);
}
a.cso-say-btn.is-playing {
	background: var(--bricks-color-njijeb);
	animation: cso-say-pulse 0.9s ease-in-out infinite;
}
@keyframes cso-say-pulse {
	50% { transform: scale(1.15); }
}

/* Visit landing: three cards linking to the Visit subpages */
.cso-visit-nav {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--grid-gap, 2.4rem);
}
@media (max-width: 991px) {
	.cso-visit-nav { grid-template-columns: 1fr; }
}
a.cso-visit-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 4px solid var(--bricks-color-mtubgo);
	border-radius: 1.6rem;
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
a.cso-visit-card:hover {
	transform: translateY(-6px) rotate(-1deg);
	box-shadow: 0 14px 30px rgba(0, 50, 98, 0.18);
}
.cso-visit-card__img,
.cso-visit-card__img img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}
.cso-visit-card__title {
	color: var(--bricks-color-mtubgo);
	font-size: 2.4rem;
	margin: 2rem 2.4rem 0.8rem;
}
.cso-visit-card__text {
	color: var(--bricks-color-mtubgo);
	font-size: 1.6rem;
	line-height: 1.5;
	margin: 0 2.4rem 1.6rem;
}
.cso-visit-card__cta {
	color: var(--bricks-color-njijeb);
	font-weight: 700;
	font-size: 1.5rem;
	margin: auto 2.4rem 2.2rem;
}
a.cso-visit-card:hover .cso-visit-card__cta { text-decoration: underline; }

/* Header nav dropdown (Visit subpages) — ID-scoped to out-rank Bricks'
   own #brxe-qrmgyf sub-menu styles */
#brxe-qrmgyf .bricks-nav-menu .sub-menu {
	background: #fff;
	border: 3px solid var(--bricks-color-mtubgo);
	border-radius: 1.2rem;
	box-shadow: 0 12px 28px rgba(0, 50, 98, 0.18);
	padding: 0.8rem;
	min-width: 22rem;
	overflow: hidden;
}
#brxe-qrmgyf .bricks-nav-menu .sub-menu li a {
	display: block;
	padding: 0.9rem 1.4rem;
	border-radius: 0.8rem;
	color: var(--primary);
	font-size: 15px;
	font-weight: 600;
	transition: background-color 0.15s ease, color 0.15s ease;
}
#brxe-qrmgyf .bricks-nav-menu .sub-menu li a:hover,
#brxe-qrmgyf .bricks-nav-menu .sub-menu li a:focus-visible {
	background: var(--bricks-color-mhqhxh);
	color: var(--bricks-color-mtubgo);
}

/* Letter-split headline effect: space characters get their own inline-block
   .char span, which collapses to zero width — preserve it */
.brxe-heading .char { white-space: pre; }

/* Filter reset button (grid pages: Composers, Instruments, Play) */
button.cso-filter-reset {
	padding: 0.8rem 1.8rem;
	border: 3px solid var(--bricks-color-mtubgo);
	border-radius: 999px;
	background: transparent;
	color: var(--bricks-color-mtubgo);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 2.3rem; /* matches the .cso-filter-select pills' 45px height */
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
button.cso-filter-reset:hover,
button.cso-filter-reset:focus-visible {
	background: var(--bricks-color-mtubgo);
	color: #fff;
}
button.cso-filter-reset.brx-no-active-filter { display: none; }

/* Consent prompt over Genially spots held by Cookiebot */
.cso-consent-note {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	padding: 1.2rem 2.4rem;
	border: 3px solid var(--bricks-color-mtubgo);
	border-radius: 999px;
	background: #fff;
	color: var(--bricks-color-mtubgo);
	font-weight: 700;
	font-size: 1.6rem;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 50, 98, 0.18);
	white-space: nowrap;
}
.cso-consent-note:hover,
.cso-consent-note:focus-visible {
	background: var(--bricks-color-mtubgo);
	color: #fff;
}
/* Hide Genially's endless spinner while consent is pending */
.container-wrapper-genially:has(.cso-consent-note) .loader-genially { display: none; }

/* Click-to-play facades over parked Canva/Genially embeds */
.cso-embed-facade {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.4rem;
	width: 100%;
	height: 100%;
	padding: 0;
	background: linear-gradient(135deg, var(--bricks-color-mtubgo), #1d5a9e);
	border: 0;
	border-radius: inherit;
	cursor: pointer;
}
.cso-embed-facade__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 7.2rem;
	height: 7.2rem;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease;
}
.cso-embed-facade__btn::after {
	content: "";
	margin-left: 0.7rem;
	border-style: solid;
	border-width: 1.5rem 0 1.5rem 2.6rem;
	border-color: transparent transparent transparent var(--bricks-color-mtubgo);
}
.cso-embed-facade:hover .cso-embed-facade__btn,
.cso-embed-facade:focus-visible .cso-embed-facade__btn {
	transform: scale(1.1);
}
.cso-embed-facade__label {
	color: #fff;
	font-size: 1.9rem;
	font-weight: 700;
}

/* Kids Club Card embed ([kids_club_card]) — desktop only */
.cso-kcc-embed__frame {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	border-radius: 1.6rem;
	overflow: hidden;
	border: 4px solid var(--bricks-color-mtubgo);
	box-shadow: 0 10px 26px rgba(0, 50, 98, 0.16);
	background: #fff;
}
.cso-kcc-embed__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.cso-kcc-embed__mobile {
	display: none;
	text-align: center;
	font-size: 1.7rem;
	font-weight: 700;
	color: var(--bricks-color-mtubgo);
	margin: 0;
}
@media (max-width: 991px) {
	.cso-kcc-embed__frame { display: none; }
	.cso-kcc-embed__mobile { display: block; }
}

/* ---------- Learn tracks: Building Blocks & Theory Fundamentals ---------- */
/* Card grids on the two landing pages (numbered, 4-color cycle) */
.cso-bb-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--grid-gap, 2.4rem);
	width: 100%;
	counter-reset: bbcard;
}
@media (max-width: 991px) { .cso-bb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 478px) { .cso-bb-grid { grid-template-columns: 1fr; } }
a.cso-bb-card {
	counter-increment: bbcard;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 2.4rem;
	border-radius: 1.8rem;
	background: #fff;
	border: 3px solid rgba(0, 50, 98, 0.12);
	box-shadow: 0 4px 12px rgba(12, 20, 39, 0.08);
	color: var(--bricks-color-mtubgo);
	text-decoration: none;
	transform: rotate(var(--tilt, 0deg));
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
a.cso-bb-card:hover { border-color: var(--bricks-color-njijeb); }
a.cso-bb-card:nth-child(odd) { --tilt: -1.2deg; }
a.cso-bb-card:nth-child(even) { --tilt: 1.2deg; }
a.cso-bb-card:hover { transform: rotate(0deg) scale(1.04); box-shadow: 0 12px 26px rgba(12, 20, 39, 0.2); }
a.cso-bb-card::before {
	content: counter(bbcard);
	display: grid;
	place-items: center;
	width: 4rem;
	height: 4rem;
	border-radius: 999px;
	font-size: 2rem;
	font-weight: 700;
	color: #fff;
	background: var(--bricks-color-njijeb);
}
a.cso-bb-card:nth-child(4n+2)::before { background: var(--bricks-color-mtubgo); }
a.cso-bb-card:nth-child(4n+3)::before { background: var(--bricks-color-ruacug); color: var(--bricks-color-mtubgo); }
a.cso-bb-card:nth-child(4n)::before { background: var(--bricks-color-mhqhxh); color: var(--bricks-color-mtubgo); }
.cso-bb-card__title { color: inherit; font-size: 2.2rem; margin: 0.6rem 0 0; }
.cso-bb-card__q { color: inherit; font-size: 1.5rem; line-height: 1.4; margin: 0; opacity: 0.85; }
.cso-domain-intro { font-size: 1.7rem; max-width: 75ch; color: var(--bricks-color-mtubgo); }

/* Single track pages */
.cso-track-question {
	text-align: center;
	color: var(--bricks-color-njijeb);
	font-weight: 700;
	font-size: 2.2rem;
}
.cso-track-content { max-width: 84rem; margin-inline: auto; font-size: 1.7rem; line-height: 1.65; color: var(--bricks-color-mtubgo); }
.cso-track-content p, .cso-track-content ul { margin: 0 0 1.6rem; }
.cso-track-content h4 { color: var(--bricks-color-njijeb); font-size: 2.2rem; margin: 3rem 0 1rem; }
.cso-track-content .cso-alphabet {
	text-align: center;
	font-size: 2.4rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--bricks-color-njijeb);
}
/* Vocabulary lists */
.cso-vocab { margin: 0 0 2rem; }
.cso-vocab dt {
	display: inline;
	font-weight: 700;
	color: var(--bricks-color-njijeb);
}
.cso-vocab dt::after { content: ": "; }
.cso-vocab dd { display: inline; margin: 0; }
.cso-vocab dd::after { content: ""; display: block; margin-bottom: 0.9rem; }
/* Pending-asset notes: only visible to logged-in editors */
.cso-img-pending { display: none; }
body.logged-in .cso-img-pending {
	display: block;
	border: 2px dashed var(--bricks-color-njijeb);
	border-radius: 1.2rem;
	padding: 1.2rem 1.8rem;
	background: rgba(205, 22, 63, 0.06);
	font-size: 1.5rem;
}
/* Quiz button */
a.cso-quiz-btn {
	display: inline-block;
	padding: 1rem 2.4rem;
	border-radius: 999px;
	background: var(--bricks-color-njijeb);
	color: #fff;
	font-weight: 700;
	font-size: 1.7rem;
	text-decoration: none;
	transition: transform 0.15s ease, background-color 0.15s ease;
}
a.cso-quiz-btn:hover {
	background: var(--bricks-color-mtubgo);
	color: #fff;
	transform: scale(1.05) rotate(-1deg);
}

/* Hero with "Hide Cover Image?" toggled on: text spans the full grid, centered */
.interior-header .grid-col-12 > .interior-header-content:only-child {
	grid-column: 1 / -1;
}
/* Letter-split headline: words grouped by the wp_footer post-processor so
   lines can only break between words, never mid-word */
.brxe-heading .char-word {
	display: inline-block;
	white-space: nowrap;
}

/* Learn hub: four-across variant of the Visit nav cards */
.cso-visit-nav.cso-visit-nav--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1199px) { .cso-visit-nav.cso-visit-nav--four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cso-visit-nav.cso-visit-nav--four { grid-template-columns: 1fr; } }

/* Prize Ladder Genially embed (Kids Club, client-built): framed to match
   the Kids Club Card embed above it */
.prize-ladder-desktop .container-wrapper-genially {
	width: 100%;
	border: 4px solid var(--bricks-color-mtubgo);
	border-radius: 1.6rem;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 10px 26px rgba(0, 50, 98, 0.16);
}

/* Symphony Memories gallery slider (native rebuild of the Gallery Slider
   component, minus its code element): show slides peeking outside the track */
.brxe-12a629 .splide__track { overflow: visible; } /* Photo Gallery component slider */