/* =========================================================
   Ballet Baguio — Theme Overrides
   ========================================================= */

/* ---------------------------------------------------------
   1) Theme tokens / Bootstrap hooks
   --------------------------------------------------------- */
:root {
	--bs-link-color: var(--bs-primary);
	--bs-link-hover-color: var(--bs-secondary);
}

/* Global link colors (hard override for any stray defaults) */
a {
	color: var(--bs-primary);
}

a:hover, a:focus {
	color: var(--bs-secondary);
}

/* ---------------------------------------------------------
   2) Global backgrounds
   --------------------------------------------------------- */
.bg-page-soft, .hero-section {
	background: linear-gradient(135deg, rgba(214, 51, 132, 0.08),
		rgba(111, 66, 193, 0.10));
}

body .footer-bb {
	margin-top: 0 !important;
}

/* ---------------------------------------------------------
   3) Buttons
   --------------------------------------------------------- */
.btn-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--bs-primary);
	--bs-btn-border-color: var(--bs-primary);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--bs-primary);
	--bs-btn-hover-border-color: var(--bs-primary);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--bs-primary);
	--bs-btn-active-border-color: var(--bs-primary);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--bs-primary);
	--bs-btn-disabled-border-color: var(--bs-primary);
	/* Force override any Bootstrap explicit declarations */
	background-color: var(--bs-primary) !important;
	border-color: var(--bs-primary) !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
	.btn-primary:active:focus, .show>.btn-primary.dropdown-toggle {
	background-color: var(--bs-primary) !important;
	border-color: var(--bs-primary) !important;
}

.btn-outline-primary {
	--bs-btn-color: var(--bs-primary);
	--bs-btn-border-color: var(--bs-primary);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--bs-primary);
	--bs-btn-hover-border-color: var(--bs-primary);
	color: var(--bs-primary);
	border-color: var(--bs-primary);
}

.btn-outline-primary:hover, .btn-outline-primary:focus,
	.btn-outline-primary:active {
	color: #fff;
	background-color: var(--bs-primary);
	border-color: var(--bs-primary);
}

/* ---------------------------------------------------------
   4) Navbar
   --------------------------------------------------------- */
.navbar {
	padding-block: .4rem;
}
.navbar-logo{
  display:block;
  height:32px;       /* controls visual size */
  width:auto;        /* preserves 1500x200 ratio */
  object-fit:contain;
}

/* Brand */
.navbar-brand {
	padding: 0;
}

.navbar-brand span {
	font-weight: 600;
}

.navbar-brand img {
	height: 44px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	display: block;
}

@media ( max-width : 576px) {
	.navbar-brand img {
		height: 32px;
	}
}

/* Links */
.navbar-nav .nav-link {
	font-weight: 600;
	font-size: 1.05rem;
	letter-spacing: .02em;
}

.navbar-nav .nav-link.active {
	font-weight: 700;
}

.navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus, .navbar-nav .nav-link.active
	{
	color: var(--bs-secondary) !important;
}

/* Nav buttons (e.g., Login) */
.navbar-nav .btn {
	margin-top: 4px;
	padding-block: .35rem;
	font-weight: 600;
}

/* ---------------------------------------------------------
   Navbar dropdown (Light mode) — remove blue highlight
   --------------------------------------------------------- */
.navbar .dropdown-menu {
	border-color: rgba(0, 0, 0, 0.10);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10);
}

.navbar .dropdown-item {
	color: var(--bs-body-color);
}

.navbar .dropdown-item:hover, .navbar .dropdown-item:focus {
	color: #fff;
	background-color: rgba(214, 51, 132, 0.85);
}

.navbar .dropdown-item.active, .navbar .dropdown-item:active {
	color: #fff;
	background-color: var(--bs-primary);
}

/* Theme focus ring on dropdown toggle (keyboard accessibility) */
.navbar .dropdown-toggle:focus, .navbar .dropdown-toggle:focus-visible {
	outline: none;
	box-shadow: 0 0 0 0.2rem rgba(214, 51, 132, 0.35);
}

/* ---------------------------------------------------------
   Navbar toggler (Light mode) — themed background, no border
   --------------------------------------------------------- */
.navbar-toggler {
	border: none;
	box-shadow: none;
	padding: .45rem .6rem;
	border-radius: .6rem;
	background-color: rgba(214, 51, 132, 0.12); /* soft pink */
	transition: background-color .15s ease, box-shadow .15s ease;
}

/* Hover */
.navbar-toggler:hover {
	background-color: rgba(214, 51, 132, 0.18);
}

/* Focus + expanded (no clipping) */
.navbar-toggler:focus, .navbar-toggler:focus-visible, .navbar-toggler[aria-expanded="true"]
	{
	outline: none;
	box-shadow: none; /* prevent cutoff */
	background-color: rgba(214, 51, 132, 0.22);
}

/* Toggler icon color */
.navbar-toggler-icon, .navbar-toggler svg, .navbar-toggler svg * {
	stroke: var(--bs-primary);
	fill: var(--bs-primary);
}

/* ---------------------------------------------------------
   5) Page hero (generic)
   --------------------------------------------------------- */
.page-hero {
	width: 100%;
	overflow: hidden;
}

.page-hero--contained {
	border-radius: 0;
	max-height: 800px;
}

.page-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Compatibility (if any page still uses it) */
.page-hero__img_wide {
	width: 100%;
	height: 75%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Awards hero sizing */
.page-hero--awards {
	height: clamp(260px, 65vh, 600px);
}

@media ( max-width : 575.98px) {
	.page-hero--awards {
		height: 320px;
	}
}

/* ---------------------------------------------------------
   6) Home hero media + testimonial overlay
   --------------------------------------------------------- */
.hero-media {
	max-height: clamp(360px, 60vh, 640px);
}

.hero-media__img {
	width: 100%;
	height: 100%;
	aspect-ratio: 2000/1164;
	object-fit: cover;
	object-position: center;
	display: block;
}

.hero-media__testimonial {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	max-width: min(800px, calc(100% - 2rem));
	padding: 2.5rem 1.75rem 1.5rem;
	border-radius: 1.25rem;
	background: rgba(255, 255, 255, 0.68);
	backdrop-filter: blur(3px);
	color: #1a1a1a;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.testimonial-quote {
	position: absolute;
	top: 0.6rem;
	left: 1.25rem;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 4rem;
	line-height: 1;
	font-weight: 700;
	margin-bottom: .25rem;
	color: var(--bs-primary);
	opacity: 0.9;
	pointer-events: none;
}

.testimonial-text {
	line-height: 1.55;
	margin-bottom: 0.1rem;
}

.testimonial-author {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 0.85rem;
	font-weight: 600;
	color: #555;
}

/* Home: Latest News cards */
.bb-news-card__img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.bb-news-card .card-text {
  position: relative;
}

.bb-news-card .card-text::before {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background-color: rgba(214, 51, 132, 0.6);
  margin: 0.75rem auto;
}
.bb-news-card .card-body {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.bb-news-card .bb-read-cta {
  display: inline-block;
  margin-top: 1.25rem;
}

/* Safe markdown spacing */
.bb-markdown p { margin-bottom: 0.75rem; }
.bb-markdown ul, .bb-markdown ol { padding-left: 1.25rem; }
.bb-markdown blockquote {
  padding-left: 1rem;
  border-left: 4px solid rgba(214, 51, 132, 0.35);
  opacity: 0.95;
}
/* ---------------------------------------------------------
   Markdown image centering (News / Events)
   --------------------------------------------------------- */

.bb-markdown img {
  display: block;
  margin: 1rem auto;     /* center horizontally */
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
}
/* ---------------------------------------------------------
   Center hero image inside News / Events modals
   --------------------------------------------------------- */
.modal:has(.bb-markdown) .modal-body > picture > img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
@media ( min-width : 992px) {
	.modal:has(.bb-markdown) .modal-body > picture > img {
	  max-width: 600px;
	}
}
/* ---------------------------------------------------------
   News / Events modals – dark mode theme
   --------------------------------------------------------- */
@media (prefers-color-scheme: dark) {

  /* Modal shell */
  .modal:has(.bb-markdown) .modal-content {
    background-color: #141414;
    color: #f1f1f1;
    border: 1px solid rgba(255, 255, 255, 0.12);
  }

  .modal:has(.bb-markdown) .modal-header,
  .modal:has(.bb-markdown) .modal-footer {
    border-color: rgba(255, 255, 255, 0.12);
  }

  /* Title */
  .modal:has(.bb-markdown) .modal-title {
    color: #ffffff;
  }

  /* Close button */
  .modal:has(.bb-markdown) .btn-close {
    filter: invert(1);
    opacity: 0.75;
  }

  .modal:has(.bb-markdown) .btn-close:hover {
    opacity: 1;
  }

  /* Footer button */
  .modal:has(.bb-markdown) .btn-outline-secondary {
    color: #f1f1f1;
    border-color: rgba(255, 255, 255, 0.35);
  }

  .modal:has(.bb-markdown) .btn-outline-secondary:hover {
    background-color: rgba(255, 255, 255, 0.08);
  }

  /* Markdown text */
  .modal:has(.bb-markdown) .bb-markdown {
    color: #e6e6e6;
  }

  .modal:has(.bb-markdown) .bb-markdown a {
    color: #ff5aa5; /* Ballet Baguio pink */
  }

  .modal:has(.bb-markdown) .bb-markdown blockquote {
    border-left-color: rgba(214, 51, 132, 0.6);
    color: #dddddd;
  }
}



@media ( min-width : 992px) {
	.testimonial-quote {
		font-size: 4.5rem;
		top: 0.4rem;
	}
}

@media ( max-width : 991.98px) {
	.hero-section .row.align-items-center {
		align-items: flex-start !important;
	}
	.hero-media {
		max-height: none;
	}
	.hero-media__img {
		height: auto;
		max-height: 52vh;
	}
	.hero-media__testimonial {
		position: static;
		margin-top: 1rem;
		max-width: 100%;
		border-radius: 1.25rem;
		padding: 2rem 1.25rem 1.1rem;
	}
	.testimonial-quote {
		position: static;
		display: inline-block;
		margin-bottom: .25rem;
		font-size: 3rem;
	}
}

/* ---------------------------------------------------------
   7) About pages typography (Our Story / Our Values)
   --------------------------------------------------------- */
.about-page h2 {
	font-size: 2.5rem;
	line-height: 1.3;
}

.about-page p {
	font-size: 1.2rem;
	line-height: 1.6;
}

@media ( max-width : 575.98px) {
	.about-page h2 {
		font-size: 1.5rem;
		line-height: 1.3;
	}
	.about-page p {
		font-size: 1rem;
		line-height: 1.6;
	}
}

/* ---------------------------------------------------------
   8) Awards page — list layout + readability
   --------------------------------------------------------- */
.awards-list {
	display: grid;
	gap: 1rem;
}

.awards-item {
	display: grid;
	grid-template-columns: 28px 1fr;
	gap: 0.75rem;
	align-items: start;
}

.awards-icon {
	font-size: 1.25rem;
	line-height: 1;
	margin-top: 0.15rem;
	opacity: 0.9;
	color: var(--bs-primary);
}

.awards-title {
	font-weight: 700;
}

.awards-meta {
	color: var(--bs-secondary-color);
	font-size: 0.95rem;
}

.awards-note {
	margin-top: 0.35rem;
}

.awards-page .awards-note .badge {
	color: var(--bs-primary);
	border-color: var(--bs-primary);
	background-color: rgba(214, 51, 132, 0.08);
	font-weight: 600;
}

.awards-page .awards-note .badge i, .awards-page .awards-note .badge svg
	{
	color: var(--bs-primary);
}

@media ( max-width : 575.98px) {
	.awards-page h1 {
		font-size: 1.5rem;
	}
	.awards-page .fs-5 {
		font-size: 1rem !important;
	}
	.awards-meta {
		font-size: 0.9rem;
	}
}

/* ---------------------------------------------------------
   9) Awards page — accordion theming (kills Bootstrap blue)
   --------------------------------------------------------- */
.awards-page .accordion {
	--bs-accordion-color: var(--bs-body-color);
	--bs-accordion-bg: #fff;
	--bs-accordion-border-color: rgba(0, 0, 0, 0.08);
	--bs-accordion-btn-color: #1a1a1a;
	--bs-accordion-btn-bg: #fff;
	--bs-accordion-active-color: var(--bs-primary);
	--bs-accordion-active-bg: rgba(255, 64, 191, 0.08);
	--bs-accordion-btn-focus-border-color: transparent;
	--bs-accordion-btn-focus-box-shadow: none;
}

.awards-page .accordion-item {
	border-left: none;
	border-right: none;
}

.awards-page .accordion-button {
	color: #1a1a1a !important;
	background-color: #fff !important;
	border-color: rgba(0, 0, 0, 0.08) !important;
	text-decoration: none;
}

/* Active (expanded) */
.awards-page .accordion-button:not(.collapsed) {
	color: var(--bs-primary) !important;
	font-weight: 700;
	background-color: rgba(255, 64, 191, 0.08) !important;
	box-shadow: none !important;
}

/* Hover states */
.awards-page .accordion-button:hover {
	background-color: rgba(255, 64, 191, 0.05) !important;
}

/* Keep active text pink on hover */
.awards-page .accordion-button:not(.collapsed):hover {
	color: var(--bs-primary) !important;
	background-color: rgba(255, 64, 191, 0.10) !important;
}

/* Focus ring */
.awards-page .accordion-button:focus {
	border-color: rgba(255, 64, 191, 0.35) !important;
	box-shadow: 0 0 0 0.2rem rgba(255, 64, 191, 0.18) !important;
	outline: 0;
}

.awards-page .accordion, .awards-page .accordion-item {
	border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Custom chevron */
.awards-page .accordion-button::after {
	background-image: none;
	content: "⌄";
	font-size: 1.2rem;
	font-weight: 600;
	color: #ff40bf;
	transform: rotate(0deg);
}

.awards-page .accordion-button:not(.collapsed)::after {
	transform: rotate(180deg);
}

/* =========================================================
   FACULTY — Cards
   ========================================================= */

/* Card itself should size naturally */
.faculty-card {
	display: flex;
	flex-direction: column;
	transition: transform .25s ease, box-shadow .25s ease;
}

/* Image area only is square */
.faculty-card picture {
	aspect-ratio: 1/1;
	width: 100%;
	overflow: hidden;
}

/* Image fills the square */
.faculty-card .faculty-headshot {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

/* Body remains visible */
.faculty-card .card-body {
	padding: 1rem;
	text-align: center;
}

/* =========================================================
   FACULTY — Headshot crop anchor (prioritize face)
   ========================================================= */

/* Keep square crop, but anchor to top so faces stay visible */
.faculty-card .faculty-headshot {
	object-fit: cover;
}

/* =========================================================
   FACULTY — Subtle hover lift + shadow
   ========================================================= */
@media ( hover : hover) {
	.faculty-card:hover {
		transform: translateY(-6px);
		box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
	}
}

/* Optional: soften hover on touch devices */
@media ( hover : none) {
	.faculty-card {
		transform: none;
	}
}

/* =========================================================
   FACULTY — Modal Container
   ========================================================= */
.faculty-modal {
	border: 0;
	border-radius: 22px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}

/* Close button */
.faculty-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 6;
	background: rgba(255, 255, 255, .92);
	border-radius: 999px;
	padding: 10px;
	opacity: 1;
}

/* =========================================================
   FACULTY — Modal Hero Layout
   ========================================================= */
.faculty-modal-hero {
	position: relative;
	min-height: 560px; /* desktop baseline height */
	overflow: hidden;
	background: #fff;
}

/* Pose image wrapper (fills hero; desktop gets right-half constraint below) */
.faculty-modal-poseWrap {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0; /* critical: stretch full height */
	left: 0;
	overflow: hidden;
	z-index: 1;
}

.faculty-modal-poseImg {
	width: 100%;
	height: 100%;
	display: block; /* avoids inline image gaps */
	object-fit: cover;
	object-position: right center;
	filter: saturate(1.04) contrast(1.02);
}

/* Overlay content layer (sits above bg) */
.faculty-modal-overlay {
	position: relative;
	z-index: 3;
	height: 100%;
	min-height: 560px; /* matches hero so bg doesn’t look “bottom only” */
	padding: 42px 46px 22px 46px;
	background: #fff;
}

/* =========================================================
   FACULTY — Desktop: Background on RIGHT HALF + Fade
   ========================================================= */
@media ( min-width : 992px) {
	/* Restrict image to right half while still filling hero height */
	.faculty-modal-poseWrap {
		left: 50%;
		right: 0;
		bottom: 0;
		top: 0;
		width: auto;
	}

	/* White fade from image edge → content */
	.faculty-modal-poseWrap::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 2;
		pointer-events: none;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%,
			rgba(255, 255, 255, 0.80) 18%, rgba(255, 255, 255, 0.40) 40%,
			rgba(255, 255, 255, 0.00) 70%);
	}
}

/* =========================================================
   FACULTY — Modal Content
   ========================================================= */

/* Remove the oval container styling */
.faculty-modal-profile {
	display: flex;
	justify-content: center;
	margin-bottom: 18px;
}

/* =========================================================
   FACULTY — Modal headshot (cropped like cards)
   ========================================================= */
.faculty-modal-headshot {
	width: 240px; /* choose the size you like */
	height: 320px; /* fixed height = enables cropping */
}

@media ( max-width : 576px) {
	.faculty-modal-headshot {
		width: 200px;
		height: 280px;
	}
}

.faculty-modal-title h2 {
	font-weight: 800;
	letter-spacing: .2px;
}

.faculty-nickname {
	color: var(--bs-primary);
	font-weight: 700;
	margin-bottom: 8px;
}

.faculty-designation {
	font-weight: 700;
	color: #222;
	margin-bottom: 18px;
}

/* Bio card */
.faculty-modal-body {
	max-width: 540px;
	padding: 18px;
	border-radius: 18px;
	background: rgba(214, 51, 132, .10);
	border: 1px solid rgba(214, 51, 132, .18);
	backdrop-filter: blur(6px);
}

.faculty-bio {
	color: #1a1a1a;
	line-height: 1.65;
	font-size: .98rem;
}

/* =========================================================
   FACULTY Bio — Mobile / Tablet
   ========================================================= */
/* Faculty bio: remove the “extra bottom gap” caused by last-child margins */
.faculty-bio>*:last-child {
	margin-bottom: 0 !important;
}

/* Specifically kill list bottom margins inside bios */
.faculty-bio ul, .faculty-bio ol {
	margin-bottom: 0 !important;
}

/* Optional: keep list indentation consistent */
.faculty-bio ul, .faculty-bio ol {
	padding-left: 1.25rem;
}

/* =========================================================
   FACULTY — Mobile / Tablet
   ========================================================= */
@media ( max-width : 991.98px) {
	.faculty-modal-hero {
		min-height: auto;
	}

	/* On smaller screens, show pose as a top banner image */
	.faculty-modal-poseWrap {
		position: relative;
		left: auto;
		right: auto;
		top: auto;
		bottom: auto;
		width: 100%;
		height: 320px;
	}

	/* Optional: remove desktop fade overlay on mobile */
	.faculty-modal-poseWrap::before {
		content: none;
	}
	.faculty-modal-poseImg {
		object-position: center;
	}
	.faculty-modal-overlay {
		min-height: auto;
		padding: 26px 22px 18px 22px;
		background: #fff;
	}
	.faculty-modal-body {
		max-width: 100%;
	}
}
/* =========================================================
   FACULTY MODAL — Mobile top wash (bg fades to white)
   ========================================================= */
@media ( max-width : 991.98px) {
	/* Ensure the hero is a positioning context */
	.faculty-modal-hero {
		position: relative;
		overflow: hidden;
	}

	/* BG layer becomes a short "wash" at the top */
	.faculty-modal-poseWrap {
		position: absolute;
		left: 0;
		right: 0;
		top: 0; /* align with top of modal */
		height: 220px; /* ~about half of a 200px headshot */
		z-index: 1;
		overflow: hidden;
	}
	.faculty-modal-poseImg {
		width: 100%;
		height: 100%;
		display: block;
		object-fit: cover;
		object-position: center top;
	}

	/* Vertical fade from image -> white */
	.faculty-modal-poseWrap::after {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		z-index: 2;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%,
			rgba(255, 255, 255, 0.55) 55%, rgba(255, 255, 255, 0.95) 85%,
			rgba(255, 255, 255, 1.00) 100%);
	}

	/* Put content above the wash and add top padding so it doesn't overlap */
	.faculty-modal-overlay {
		position: relative;
		z-index: 3;
		padding-top: 190px; /* leaves the wash visible behind top area */
		background: transparent; /* let the wash show */
	}

	/* Headshot: keep natural shape (no squeezing) */
	.faculty-modal-headshot {
		width: min(240px, 70vw);
		height: auto; /* IMPORTANT: prevents squeezing */
		max-height: 280px;
		object-fit: cover; /* still allows cropping */
	}
}

/* Dark mode version of the vertical fade */
@media ( max-width : 991.98px) {
	[data-bs-theme="dark"] .faculty-modal-poseWrap::after {
		background: linear-gradient(180deg, rgba(17, 17, 17, 0.00) 0%,
			rgba(17, 17, 17, 0.55) 55%, rgba(17, 17, 17, 0.92) 85%,
			rgba(17, 17, 17, 1.00) 100%);
	}
	[data-bs-theme="dark"] .faculty-modal-overlay {
		background: transparent;
	}
}

/* =========================================================
   FACULTY — Dark Mode
   ========================================================= */
[data-bs-theme="dark"] .faculty-modal {
	background: #111;
}

[data-bs-theme="dark"] .faculty-designation, [data-bs-theme="dark"] .faculty-bio
	{
	color: #f1f1f1;
}

[data-bs-theme="dark"] .faculty-modal-body {
	background: rgba(214, 51, 132, .14);
	border-color: rgba(214, 51, 132, .22);
}

/* Dark mode fade (desktop) */
@media ( min-width : 992px) {
	[data-bs-theme="dark"] .faculty-modal-overlay {
		background: #111;
	}
	[data-bs-theme="dark"] .faculty-modal-poseWrap::before {
		background: linear-gradient(90deg, rgba(17, 17, 17, 0.98) 0%,
			rgba(17, 17, 17, 0.80) 18%, rgba(17, 17, 17, 0.40) 40%,
			rgba(17, 17, 17, 0.00) 70%);
	}
}
/* =========================================================
   FACULTY — Learn More button color fix
   ========================================================= */

/* Base outline button */
.faculty-card .btn-outline-primary {
	--bs-btn-color: var(--bs-primary);
	--bs-btn-border-color: var(--bs-primary);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--bs-primary);
	--bs-btn-hover-border-color: var(--bs-primary);
	--bs-btn-active-bg: var(--bs-primary);
	--bs-btn-active-border-color: var(--bs-primary);
}

/* Remove Bootstrap blue focus ring, replace with theme ring */
.faculty-card .btn-outline-primary:focus, .faculty-card .btn-outline-primary:focus-visible
	{
	box-shadow: 0 0 0 0.2rem rgba(214, 51, 132, 0.35);
	outline: none;
}

/* Keyboard-only accessibility (still visible, still pink) */
.faculty-card .btn-outline-primary:focus-visible {
	box-shadow: 0 0 0 0.25rem rgba(214, 51, 132, 0.45);
}
/* =========================================================
   FACULTY MODAL — Layout tweaks
   ========================================================= */

/* 2) Make name smaller + still elegant */
.faculty-name {
	font-size: clamp(1.6rem, 2.2vw, 2.2rem);
	font-weight: 800;
	letter-spacing: 0.1px;
	line-height: 1.15;
	margin: 0;
}

/* 3) Center image + nickname + role */
.faculty-modal-header {
	max-width: 760px;
	margin: 0 auto 18px auto;
}

/* 4) Make description span full modal width */
.faculty-modal-body--full {
	max-width: 100%;
	width: 100%;
}

/* If your bio card felt too narrow before, widen it */
.faculty-modal-body--full {
	padding: 18px 18px;
}

/* Optional: make the bio card a little more "editorial" */
.faculty-modal-body--full {
	border-radius: 18px;
}

/* Ensure overlay can take full width */
.faculty-modal-overlay {
	width: 100%;
}

/* On desktop, keep hero consistent while allowing content to grow */
@media ( min-width : 992px) {
	.faculty-modal-overlay {
		min-height: 560px;
	}
}

/* Mobile spacing polish */
@media ( max-width : 991.98px) {
	.faculty-modal-header {
		margin-bottom: 14px;
	}
}

/* =========================================================
   FACULTY — Show pose background behind right side (desktop)
   ========================================================= */
@media ( min-width : 992px) {
	/* Let the pose show through on the right half */
	.faculty-modal-overlay {
		background: linear-gradient(90deg, rgba(255, 255, 255, 1.00) 0%,
			rgba(255, 255, 255, 1.00) 52%, rgba(255, 255, 255, 0.55) 70%,
			rgba(255, 255, 255, 0.00) 100%);
	}
}

/* Dark mode equivalent */
@media
(
min-width
:
992px)
{
[data-bs-theme="dark"] .faculty-modal-overlay {
	background: linear-gradient(90deg, rgba(17, 17, 17, 1.00) 0%,
		rgba(17, 17, 17, 1.00) 52%, rgba(17, 17, 17, 0.55) 70%,
		rgba(17, 17, 17, 0.00) 100%);
}

}
/* =========================================================
   FACULTY — Force close icon to be visible (override SVG)
   ========================================================= */

/* Common sizing + button look */
.faculty-modal .btn-close.faculty-modal-close {
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border-radius: 999px;
	opacity: 1;
	box-shadow: 0 10px 22px rgba(0, 0, 0, .10);
	background-color: rgba(255, 255, 255, .95);
	/* IMPORTANT: prevent theme filters from whitening it */
	filter: none !important;
}

/* Force a dark X in light mode */
.faculty-modal .btn-close.faculty-modal-close {
	background-image:
		url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M2.146 2.146a.5.5 0 0 1 .708 0L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854a.5.5 0 0 1 0-.708z' fill='%231a1a1a'/%3e%3c/svg%3e")
		!important;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1rem 1rem;
}

/* Dark mode: keep it readable */
[data-bs-theme="dark"] .faculty-modal .btn-close.faculty-modal-close {
	background-color: rgba(17, 17, 17, .70);
	box-shadow: 0 10px 22px rgba(0, 0, 0, .30);
	background-image:
		url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M2.146 2.146a.5.5 0 0 1 .708 0L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854a.5.5 0 0 1 0-.708z' fill='%23ffffff'/%3e%3c/svg%3e")
		!important;
}

/* Hover polish */
.faculty-modal .btn-close.faculty-modal-close:hover {
	transform: translateY(-1px);
}
/* =========================================================
   PROGRAMS
   ========================================================= */

/* ---------------------------------------------------------
   Program cards
   --------------------------------------------------------- */
.bb-program-card {
	border-radius: 0.75rem;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.12);
}

.bb-program-img {
	width: 100%;
	height: 190px;
	object-fit: cover;
}

/* ---------------------------------------------------------
   Promotion badge
   --------------------------------------------------------- */
.bb-badge-promo {
	background-color: rgba(214, 51, 132, 0.14) !important;
	color: var(--bs-primary) !important;
	border: 1px solid rgba(214, 51, 132, 0.22);
	font-weight: 600;
}

/* ---------------------------------------------------------
   Uniform swatches
   --------------------------------------------------------- */
.bb-swatch {
	display: inline-block;
	width: 0.75rem;
	height: 0.75rem;
	margin-right: 0.35rem;
	vertical-align: -1px;
	border-radius: 999px;
	border: 1px solid rgba(0, 0, 0, 0.15);
}

/* Swatch colors (keyed from getUniformColorKey()) */
.bb-swatch.is-light-pink {
	background-color: #f7b7d2;
}

.bb-swatch.is-mint-green {
	background-color: #7fdcc0;
}

.bb-swatch.is-lavender {
	background-color: #b7a5ff;
}

.bb-swatch.is-fuchsia-pink {
	background-color: #e645a5;
}

.bb-swatch.is-aqua-blue {
	background-color: #56cfe1;
}

.bb-swatch.is-royal-blue {
	background-color: #2f5fff;
}

.bb-swatch.is-maroon {
	background-color: #7a1f2b;
}

.bb-swatch.is-violet {
	background-color: #7b3fe4;
}

.bb-swatch.is-navy-blue {
	background-color: #142b6f;
}

.bb-swatch.is-black {
	background-color: #111;
}

/* ---------------------------------------------------------
   Mobile quick navigation
   --------------------------------------------------------- */

/* Smooth anchor scrolling */
html {
	scroll-behavior: smooth;
}

/* ---------------------------------------------------------
   Quicknav (light mode)
   --------------------------------------------------------- */
.bb-quicknav {
	position: sticky;
	top: 0;
	z-index: 1020; /* below navbar, above content */
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(8px);
	border-top: 1px solid rgba(214, 51, 132, 0.18);
	border-bottom: 1px solid rgba(214, 51, 132, 0.18);
}

.bb-quicknav__row {
	display: flex;
	gap: 0.5rem;
	flex-wrap: nowrap; /* single row */
	overflow-x: hidden; /* should not need scrolling */
	-webkit-overflow-scrolling: touch;
}

/* Key to preventing cropping: allow flex items to shrink */
.bb-quicknav a {
	flex: 1 1 0; /* share row equally */
	min-width: 0; /* allow shrink below content width */
	font-weight: 600;
	text-align: center;
	/* Let long labels wrap inside the button (still single row of buttons) */
	white-space: normal;
	line-height: 1.1;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

/* Inactive buttons should look like the other inactive buttons (Bootstrap secondary) */
.bb-quicknav .btn-outline-secondary {
	color: var(--bs-secondary);
	border-color: var(--bs-secondary);
	background-color: transparent;
}

/* Prevent “sticky hover/focus” from looking selected */
.bb-quicknav .btn-outline-secondary:hover, .bb-quicknav .btn-outline-secondary:focus
	{
	color: var(--bs-secondary);
	border-color: var(--bs-secondary);
	background-color: transparent;
	box-shadow: none;
}

/* Accessible ring for keyboard users only */
.bb-quicknav .btn-outline-secondary:focus-visible, .bb-quicknav .btn-check:focus-visible+.btn-outline-secondary
	{
	box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.35);
}

/* Script-applied active state */
.bb-quicknav a.is-active {
	color: var(--bs-primary);
	background-color: rgba(214, 51, 132, 0.14);
	border-color: rgba(214, 51, 132, 0.45);
}

.bb-quicknav a.is-active:hover {
	color: var(--bs-primary);
	background-color: rgba(214, 51, 132, 0.18);
	border-color: rgba(214, 51, 132, 0.55);
}

.bb-quicknav a.is-active:focus-visible {
	box-shadow: 0 0 0 0.25rem rgba(214, 51, 132, 0.28);
}

/* ---------------------------------------------------------
   Anchor offsets (for sticky quick nav)
   --------------------------------------------------------- */
.bb-anchor {
	scroll-margin-top: 88px;
}

@media ( min-width : 992px) {
	.bb-back-top { display: none;
	}
}

/* ---------------------------------------------------------
   Quicknav (dark mode means: inside Bootstrap [data-bs-theme="dark"])
   Glassy active state, single-row, white text
   --------------------------------------------------------- */
@media ( prefers-color-scheme : dark) {
	.bb-quicknav {
		background: rgba(18, 18, 18, 0.92);
		backdrop-filter: blur(10px);
		border-top: 1px solid rgba(255, 255, 255, 0.12);
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	}
	.bb-quicknav__row {
		display: flex;
		gap: 0.5rem;
		flex-wrap: nowrap;
		overflow-x: hidden;
	}

	/* Single row behavior + wrap text inside each button */
	.bb-quicknav a {
		flex: 1 1 0;
		min-width: 0;
		font-weight: 600;
		text-align: center;
		white-space: normal;
		line-height: 1.1;
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}

	/* Inactive buttons: dark neutral with white text */
	.bb-quicknav .btn-outline-secondary {
		color: #fff;
		background-color: rgba(255, 255, 255, 0.04);
		border-color: rgba(255, 255, 255, 0.28);
	}

	/* Prevent sticky hover/focus from looking selected */
	.bb-quicknav .btn-outline-secondary:hover, .bb-quicknav .btn-outline-secondary:focus
		{
		color: #fff;
		background-color: rgba(255, 255, 255, 0.04);
		border-color: rgba(255, 255, 255, 0.28);
		box-shadow: none;
	}

	/* Keyboard-only focus ring (themed) */
	.bb-quicknav .btn-outline-secondary:focus-visible, .bb-quicknav .btn-check:focus-visible+.btn-outline-secondary
		{
		box-shadow: 0 0 0 0.25rem rgba(214, 51, 132, 0.45);
	}

	/* ---------------------------------------------------------
     Active (script-applied): GLASSY on-theme plum/pink
     --------------------------------------------------------- */
	.bb-quicknav a.is-active {
		color: #fff !important;
		/* glassy fill */
		background: linear-gradient(135deg, rgba(214, 51, 132, 0.55),
			rgba(214, 51, 132, 0.22));
		border-color: rgba(214, 51, 132, 0.70);
		/* glass highlights */
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0
			rgba(255, 255, 255, 0.20), inset 0 -1px 0 rgba(0, 0, 0, 0.25);
	}

	/* Keep active themed on real hover devices */
	@media ( hover : hover) and (pointer: fine) {
		.bb-quicknav a.is-active:hover {
			background: linear-gradient(135deg, rgba(214, 51, 132, 0.65),
				rgba(214, 51, 132, 0.28));
			border-color: rgba(214, 51, 132, 0.80);
		}
	}

	/* Active keyboard focus */
	.bb-quicknav a.is-active:focus-visible {
		box-shadow: 0 0 0 0.25rem rgba(214, 51, 132, 0.55), 0 10px 22px
			rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.20), inset 0
			-1px 0 rgba(0, 0, 0, 0.25);
	}
}





/* ---------------------------------------------------------
   11) Misc utilities + component helpers
   --------------------------------------------------------- */
.bg-bb-light {
	background-color: rgba(214, 51, 132, 0.06);
}

.text-bb-primary {
	color: var(--bs-primary) !important;
}

.text-bb-secondary {
	color: var(--bs-secondary) !important;
}

/* Classes Offered modal cards */
.class-level-card {
	cursor: pointer;
}

.class-level-card:focus {
	outline: 2px solid rgba(0, 0, 0, 0.15);
	outline-offset: 2px;
}

/* Class detail page */
.class-detail-image-wrap {
	display: flex;
	justify-content: center;
}

.class-detail-image {
	max-width: 520px;
	width: 100%;
	border: 8px solid var(--bs-primary);
	background: #fff;
}

/* ---------------------------------------------------------
   12) Footer
   --------------------------------------------------------- */
.footer-bb {
	font-size: 0.85rem;
}

.footer-bb a {
	color: var(--bs-primary);
	text-decoration: none;
}

.footer-bb a:hover {
	color: var(--bs-secondary);
}

.footer-social {
	font-size: 1.4rem;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	padding: 0.15rem;
}

.footer-right {
	gap: 1rem;
}

@media ( min-width : 992px) {
	.footer-left, .footer-center {
		white-space: nowrap;
	}
	.footer-center {
		display: inline-flex;
		align-items: center;
		gap: .5rem;
	}
}

@media ( max-width : 991.98px) {
	.footer-row {
		text-align: center;
		align-items: center !important;
	}
	.footer-center {
		order: 1;
	}
	.footer-right {
		order: 2;
		margin-top: .5rem;
	}
	.footer-left {
		order: 3;
		margin-top: .75rem;
		font-size: 0.8rem;
		opacity: 0.85;
	}
	.footer-social {
		font-size: 1.6rem;
	}
	.footer-right {
		gap: 1.25rem;
	}
}

/* ---------------------------------------------------------
   13) Dark mode (auto-detected)
   --------------------------------------------------------- */
@media ( prefers-color-scheme : dark) {
	:root {
		--bs-body-bg: #121212;
		--bs-body-color: #f1f1f1;
		--bs-primary: #d63384;
		--bs-secondary: #6f42c1;
		--bs-link-color: var(--bs-primary);
		--bs-link-hover-color: var(--bs-secondary);
		--bs-border-color: #2c2c2c;
		--bs-muted: #bbbbbb;
		--bs-focus-ring-color: rgba(214, 51, 132, 0.55);
		--bs-focus-ring-width: 0.25rem;
	}
	body {
		background-color: var(--bs-body-bg);
		color: var(--bs-body-color);
	}

	/* Navbar */
	.navbar, .navbar-brand, .navbar-nav .nav-link {
		background-color: #1a1a1a !important;
		color: #f1f1f1 !important;
	}
	.nav-link:hover {
		color: var(--bs-secondary) !important;
	}

	/* Cards */
	.card {
		background-color: #1e1e1e !important;
		border-color: #2c2c2c !important;
		color: var(--bs-body-color);
	}
	.card .text-muted {
		color: #bbbbbb !important;
	}

	/* Login dark overlay */
	.login-bg+div {
		background: rgba(0, 0, 0, 0.75) !important;
	}

	/* Dark mode background tint */
	.bg-page-soft, .hero-section {
		background: linear-gradient(135deg, rgba(214, 51, 132, 0.15),
			rgba(111, 66, 193, 0.20));
	}
	.hero-media__testimonial {
		background: rgba(30, 30, 30, 0.75);
		color: #f1f1f1;
	}
	.testimonial-author {
		color: #ccc;
	}

	/* ---------------------------------------------------------
   Navbar toggler (Dark mode) — themed background, no border
   --------------------------------------------------------- */
	.navbar-toggler {
		border: none !important;
		box-shadow: none !important;
		padding: .45rem .6rem;
		border-radius: .6rem;
		background-color: rgba(214, 51, 132, 0.22); /* pink glow on dark */
		transition: background-color .15s ease;
	}

	/* Hover */
	.navbar-toggler:hover {
		background-color: rgba(214, 51, 132, 0.30);
	}

	/* Focus + expanded (no clipping, no ring) */
	.navbar-toggler:focus, .navbar-toggler:focus-visible, .navbar-toggler[aria-expanded="true"]
		{
		outline: none !important;
		box-shadow: none !important;
		background-color: rgba(214, 51, 132, 0.38);
	}

	/* Bootstrap default toggler icon (data-URI SVG) */
	.navbar-toggler-icon {
		background-image:
			url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
			!important;
	}

	/* If toggler uses real SVG/icon markup */
	.navbar-toggler svg, .navbar-toggler svg * {
		stroke: #ffffff !important;
		fill: #ffffff !important;
	}
	.navbar-toggler i, .navbar-toggler .bi {
		color: #ffffff !important;
	}

	/* Navbar dropdown menu */
	.navbar .dropdown-menu {
		background-color: #1e1e1e !important;
		border-color: rgba(255, 255, 255, 0.12) !important;
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
	}
	.navbar .dropdown-item {
		color: #f1f1f1 !important;
	}
	.navbar .dropdown-item:hover, .navbar .dropdown-item:focus {
		color: #fff !important;
		background-color: rgba(214, 51, 132, 0.18) !important;
	}
	.navbar .dropdown-item.active, .navbar .dropdown-item:active {
		color: #fff !important;
		background-color: rgba(214, 51, 132, 0.28) !important;
	}
	.navbar .dropdown-divider {
		border-top-color: rgba(255, 255, 255, 0.10) !important;
	}
	.navbar .dropdown-toggle::after {
		border-top-color: rgba(255, 255, 255, 0.7);
	}

	/* =========================================================
   Dark Mode — Awards Accordion 
   ========================================================= */
	/* Make the accordion itself dark */
	.awards-page .accordion {
		--bs-accordion-color: #f1f1f1;
		--bs-accordion-bg: #1e1e1e;
		--bs-accordion-border-color: rgba(255, 255, 255, 0.12);
		--bs-accordion-btn-color: #f1f1f1;
		--bs-accordion-btn-bg: #1e1e1e;
		/* Active header */
		--bs-accordion-active-color: var(--bs-primary);
		--bs-accordion-active-bg: rgba(214, 51, 132, 0.16);
		/* Focus */
		--bs-accordion-btn-focus-border-color: rgba(214, 51, 132, 0.35);
		--bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem
			rgba(214, 51, 132, 0.18);
	}

	/* Header buttons */
	.awards-page .accordion-button {
		background-color: #1e1e1e !important;
		color: #f1f1f1 !important;
		border-color: rgba(255, 255, 255, 0.12) !important;
	}

	/* Active (expanded) header */
	.awards-page .accordion-button:not(.collapsed) {
		background-color: rgba(214, 51, 132, 0.16) !important;
		color: var(--bs-primary) !important;
		font-weight: 700;
		box-shadow: none !important;
	}

	/* Hover – keep active title pink (avoid turning white/gray/black) */
	.awards-page .accordion-button:hover {
		background-color: rgba(214, 51, 132, 0.10) !important;
		color: #fff !important;
	}
	.awards-page .accordion-button:not(.collapsed):hover {
		background-color: rgba(214, 51, 132, 0.18) !important;
		color: var(--bs-primary) !important;
	}

	/* Accordion body */
	.awards-page .accordion-body {
		background-color: #1e1e1e !important;
		color: #f1f1f1 !important;
	}

	/* Item separators */
	.awards-page .accordion-item {
		background-color: #1e1e1e !important;
		border-color: rgba(255, 255, 255, 0.12) !important;
	}

	/* Awards list readability in dark */
	.awards-page .awards-title {
		color: #f1f1f1 !important;
	}
	.awards-page .awards-meta {
		color: rgba(241, 241, 241, 0.72) !important;
	}

	/* Icons + pills stay on-brand */
	.awards-page .awards-icon {
		color: var(--bs-primary) !important;
	}
	.awards-page .awards-note .badge {
		color: var(--bs-primary) !important;
		border-color: rgba(214, 51, 132, 0.45) !important;
		background-color: rgba(214, 51, 132, 0.12) !important;
	}

	/* Chevron color in dark */
	.awards-page .accordion-button::after {
		color: var(--bs-primary) !important;
	}

	/* Faculty Page - Faculty Name*/
	.faculty-name {
		color: #1a1a1a !important;
	}
	.btn-check:active+.btn-outline-primary:focus, .btn-check:checked+.btn-outline-primary:focus,
		.btn-outline-primary.active:focus, .btn-outline-primary.dropdown-toggle.show:focus,
		.btn-outline-primary:active:focus {
		box-shadow: 0 0 0 0.25rem rgba(214, 51, 132, 0.55);
	}

	/* Optional: normal keyboard focus for outline-primary */
	.btn-outline-primary:focus, .btn-check:focus+.btn-outline-primary {
		box-shadow: 0 0 0 0.25rem rgba(214, 51, 132, 0.45);
	}
	/* Headings inside white sections = dark text */
	.bg-white h1, .bg-white h2, .bg-white h3, .bg-white h4, .bg-white h5,
		.bg-white h6 {
		color: #1a1a1a !important;
	}

	/* Exception: headings inside card bodies stay light */
	.card-body h1, .card-body h2, .card-body h3, .card-body h4, .card-body h5,
		.card-body h6 {
		color: #f1f1f1 !important;
	}
	.class-level-card:focus {
		outline-color: rgba(255, 255, 255, 0.25);
	}
}