/* ===== Top Bar (Audience Nav) ===== */
.top-bar {
  background: #111111;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  position: relative;
  z-index: 1001;
}

.top-bar-left {
  display: flex;
  align-items: center;
}

.top-bar-left a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.2s;
  border-right: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  gap: 6px;
}

.top-bar-left a:first-child {
  border-left: 1px solid rgba(255,255,255,0.1);
}

.top-bar-left a:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
}

.top-bar-left a svg {
  opacity: 0.6;
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-right: 20px;
}

.top-bar-right a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  font-size: 12px;
  transition: color 0.2s;
}

.top-bar-right a:hover {
  color: #ffcc00;
}

.top-bar-phone {
  color: rgba(255,255,255,0.5);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

.top-bar-phone:hover {
  color: #ffcc00;
}

@media (max-width: 768px) {
  .top-bar-right { display: none; }
  .top-bar-left a { padding: 8px 12px; font-size: 12px; }
}

/* ===== Photo Strip Animation ===== */
.photo-strip {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  height: 100vh;
  overflow: hidden;
  background: #1B5E20;
}

.photo-strip-track {
  display: flex;
  gap: 0;
  animation: scrollPhotos 40s linear infinite;
  height: 100%;
}

.photo-strip-track img {
  height: 100%;
  width: auto;
  min-width: 500px;
  object-fit: cover;
  opacity: 0.8;
  filter: grayscale(5%) brightness(1.1);
}

@keyframes scrollPhotos {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===== Navbar Base ===== */
.site-header {
  position: sticky !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
  transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Scrolled state (all pages) --- */
.site-header.scrolled {
  background: rgba(255,255,255,0.97) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* --- Subpages: always solid header --- */
body:not(.home) .site-header {
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* --- Homepage initial state: solid dark green bar for legibility --- */
.home .site-header:not(.scrolled) {
  background: #1B5E20 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.home .site-header:not(.scrolled) .wp-block-site-title a,
.home .site-header:not(.scrolled) .logo-icon {
  color: #fff !important;
}

.home .site-header:not(.scrolled) .logo-tagline {
  color: rgba(255,255,255,0.75) !important;
}

.home .site-header:not(.scrolled) .wp-block-navigation-item > a,
.home .site-header:not(.scrolled) .wp-block-navigation-item > button {
  color: #fff !important;
}

.home .site-header:not(.scrolled) .wp-block-navigation-item > a:hover,
.home .site-header:not(.scrolled) .wp-block-navigation-item > button:hover {
  color: #ffcc00 !important;
}

/* Force submenu links dark even on homepage transparent state */
.home .site-header:not(.scrolled) .wp-block-navigation__submenu-container .wp-block-navigation-item > a {
  color: #2d2d2d !important;
}

.home .site-header:not(.scrolled) .wp-block-navigation__submenu-container .wp-block-navigation-item > a:hover {
  color: #317d5d !important;
}

/* --- Dark text state (scrolled + subpages) --- */
.site-header.scrolled .wp-block-site-title a,
body:not(.home) .site-header .wp-block-site-title a {
  color: #1a1a1a !important;
}

.site-header.scrolled .logo-icon,
body:not(.home) .site-header .logo-icon {
  color: #ffcc00 !important;
}

.site-header.scrolled .logo-tagline,
body:not(.home) .site-header .logo-tagline {
  color: #6b6b6b !important;
}

.site-header.scrolled .wp-block-navigation-item > a,
.site-header.scrolled .wp-block-navigation-item > button,
body:not(.home) .site-header .wp-block-navigation-item > a,
body:not(.home) .site-header .wp-block-navigation-item > button {
  color: #2d2d2d !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Nav link hover (dark state) --- */
.site-header.scrolled .wp-block-navigation-item > a:hover,
.site-header.scrolled .wp-block-navigation-item > button:hover,
body:not(.home) .site-header .wp-block-navigation-item > a:hover,
body:not(.home) .site-header .wp-block-navigation-item > button:hover {
  color: #317d5d !important;
}

/* --- Active page indicator --- */
.site-header .wp-block-navigation-item.current-menu-item > a {
  color: #317d5d !important;
  font-weight: 600;
}

.home .site-header:not(.scrolled) .wp-block-navigation-item.current-menu-item > a {
  color: #ffcc00 !important;
}

/* --- Submenu dropdown --- */
.wp-block-navigation__submenu-container {
  background: #fff !important;
  border: 1px solid #e8e0d0 !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
  padding: 8px 0 !important;
}

.wp-block-navigation__submenu-container a {
  color: #2d2d2d !important;
  padding: 8px 20px !important;
  font-size: 14px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.wp-block-navigation__submenu-container a:hover {
  color: #317d5d !important;
  background: #f9f5ef !important;
}

/* ===== Mobile Navigation Overlay ===== */
.wp-block-navigation__responsive-container.is-menu-open {
  background: #fff !important;
  z-index: 100000 !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item button {
  color: #2d2d2d !important;
  font-size: 18px;
  padding: 12px 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover {
  color: #317d5d !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding-left: 20px !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a {
  font-size: 16px !important;
  color: #444 !important;
}

/* --- Mobile hamburger icon color on subpages --- */
body:not(.home) .site-header .wp-block-navigation__responsive-container-open {
  color: #2d2d2d !important;
}

.home .site-header:not(.scrolled) .wp-block-navigation__responsive-container-open {
  color: #fff !important;
}

/* ===== Hide Photo Strip on Subpages ===== */
body:not(.home) .photo-strip {
  display: none;
}

/* ===== Content Sections Above Photo Strip ===== */
.hero-section,
.news-section,
.section,
.alumni-section,
.mission-banner {
  position: relative;
  z-index: 1;
}
.news-section,
.section {
  background: #fff;
}

/* ===== Hero Section ===== */
.hero-section {
  min-height: 100vh;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, rgba(27, 94, 32, 0.35) 0%, rgba(49, 125, 93, 0.25) 50%, rgba(27, 94, 32, 0.35) 100%);
  pointer-events: none;
}

.hero-badge {
  display: inline-block;
  background: rgba(255, 204, 0, 0.2);
  color: #ffd633 !important;
  padding: 6px 16px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 24px;
  border: 1px solid rgba(255, 204, 0, 0.4);
}

.hero-stats-row {
  display: flex;
  gap: 48px;
  padding-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.2);
}

.hero-stat-number {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 2rem;
  font-weight: 800;
  color: #ffcc00;
  display: block;
}

.hero-stat-label {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  font-weight: 400;
}

/* ===== Section Labels ===== */
.section-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--wp--preset--color--primary);
  display: inline-block;
}

.section-label::before,
.section-label::after {
  content: '';
  display: inline-block;
  width: 30px;
  height: 1px;
  background: #c19661;
  vertical-align: middle;
  margin: 0 12px;
}

.section-label-light {
  color: #ffd633;
}

.section-label-light::before,
.section-label-light::after {
  background: rgba(255,255,255,0.3);
}

/* ===== About Cards ===== */
.about-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
  border: 1px solid #e8e0d0;
  border-bottom: 3px solid #ffcc00;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.about-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  border-bottom-color: #317d5d;
}

.about-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.about-card:hover img {
  transform: scale(1.05);
}

.about-card-body {
  padding: 32px 32px 32px;
}

/* ===== Director Image Frame ===== */
.director-image {
  position: relative;
}

.director-image img {
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  object-fit: cover;
  aspect-ratio: 3/4;
}

.director-image::after {
  content: '';
  position: absolute;
  inset: 12px -12px -12px 12px;
  border: 3px solid #ffcc00;
  border-radius: 20px;
  z-index: -1;
  opacity: 0.7;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.director-image:hover::after {
  opacity: 1;
  inset: 8px -8px -8px 8px;
}

/* ===== Principle Cards ===== */
.principle-card {
  padding: 32px;
  background: #fff;
  border-radius: 12px;
  border-left: 4px solid #ffcc00;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.principle-card:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  border-left-color: #317d5d;
}

/* ===== Feature Cards (Why Section) ===== */
.feature {
  padding: 32px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.feature::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #ffcc00, transparent);
  opacity: 0;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255, 204, 0, 0.25);
  transform: translateY(-4px);
}

.feature:hover::before {
  opacity: 1;
}

.feature-number {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 2.5rem;
  font-weight: 800;
  color: #ffcc00;
  opacity: 0.4;
  margin-bottom: 12px;
}

.features-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  align-items: start !important;
}

/* ===== Program Tabs ===== */
.programs-tabs .tab-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 40px;
  flex-wrap: wrap;
  justify-content: center;
}

.programs-tabs .tab-btn {
  padding: 10px 24px;
  border: 2px solid #e8e0d0;
  background: transparent;
  border-radius: 9999px;
  font-family: var(--wp--preset--font-family--body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: #444;
}

.programs-tabs .tab-btn:hover {
  border-color: #317d5d;
  color: #317d5d;
}

.programs-tabs .tab-btn.active {
  background: #317d5d;
  border-color: #317d5d;
  color: #fff;
  box-shadow: 0 2px 8px rgba(49, 125, 93, 0.3);
}

.programs-tabs .tab-btn:focus-visible,
.portal-tabs .tab-btn:focus-visible {
  outline: 2px solid #317d5d;
  outline-offset: 2px;
}

.programs-tabs .tab-content {
  display: none;
}

.programs-tabs .tab-content.active {
  display: block;
}

/* Ensure fade-in elements are visible inside active tab panels */
.tab-content.active .fade-in {
  opacity: 1;
  transform: translateY(0);
}

.tab-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
}

.tag {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(49, 125, 93, 0.1);
  color: #317d5d;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid rgba(49, 125, 93, 0.15);
}

.curriculum-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.highlight-card {
  padding: 32px;
  background: #f9f5ef;
  border-radius: 12px;
  margin-bottom: 16px;
  border: 1px solid #e8e0d0;
}

.highlight-card.accent {
  background: linear-gradient(135deg, #317d5d 0%, #1B5E20 100%);
  border-color: #317d5d;
  color: #fff;
}

.highlight-card.accent p {
  color: rgba(255,255,255,0.85);
}

/* ===== Faculty Grid ===== */
.faculty-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.faculty-card {
  padding: 32px 24px;
  text-align: center;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e8e0d0;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faculty-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.faculty-card.featured {
  border-color: #ffcc00;
  background: linear-gradient(to bottom, rgba(255, 204, 0, 0.08), #fff);
  box-shadow: 0 4px 20px rgba(193, 150, 97, 0.15);
}

.faculty-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  margin: 0 auto 16px;
  border: 3px solid #e8e0d0;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faculty-card:hover .faculty-photo {
  border-color: #317d5d;
  transform: scale(1.05);
}

.faculty-card.featured .faculty-photo {
  width: 90px;
  height: 90px;
  border-color: #ffcc00;
}

.faculty-role {
  font-size: 0.85rem;
  color: #317d5d;
  font-weight: 500;
  margin-bottom: 12px;
}

.faculty-bio {
  font-size: 0.85rem;
  color: #444;
  line-height: 1.6;
  text-align: left;
}

.faculty-more {
  text-align: center;
  margin-top: 40px;
  padding: 24px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e8e0d0;
}

/* ===== Admissions ===== */
.admissions-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
}

.step {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
}

.step-num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #317d5d 0%, #3ab07f 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(49, 125, 93, 0.3);
}

.info-card {
  padding: 32px;
  background: #f9f5ef;
  border-radius: 12px;
  margin-bottom: 16px;
  border: 1px solid #e8e0d0;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.info-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

.tuition-table {
  margin: 20px 0;
}

.tuition-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #e8e0d0;
}

.tuition-level {
  font-weight: 600;
  color: #1a1a1a;
}

.tuition-level span {
  font-weight: 400;
  color: #6b6b6b;
  font-size: 0.9rem;
}

.tuition-amount {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: #317d5d;
}

.tuition-amount span {
  font-size: 0.85rem;
  font-weight: 400;
  color: #6b6b6b;
}

.includes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* ===== Facts Grid ===== */
.facts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.fact-card {
  text-align: center;
  padding: 40px 24px;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fact-card:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-4px);
  border-color: rgba(255, 204, 0, 0.3);
}

.fact-number {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 3rem;
  font-weight: 800;
  color: #ffd633;
  margin-bottom: 4px;
}

.fact-label {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.8);
}

/* ===== News Grid ===== */
.news-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.news-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e8e0d0;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

.news-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.news-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.news-card:hover .news-img {
  transform: scale(1.05);
}

/* Homepage news grid card hover */
.news-section a[href]:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.2);
}
.news-section a[href]:hover img {
  transform: scale(1.05);
}

.news-body {
  padding: 20px 24px 24px;
}

.news-card.featured-news {
  grid-column: span 2;
  grid-row: span 2;
  border: none;
}

.news-card.featured-news .news-img {
  height: 260px;
}

.news-card.featured-news .news-body {
  background: linear-gradient(135deg, #317d5d 0%, #1B5E20 100%);
  color: #fff;
}

.news-card.featured-news .news-date {
  color: #ffcc00;
}

.news-card.featured-news p {
  color: rgba(255,255,255,0.8);
}

.news-date {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #317d5d;
  margin-bottom: 8px;
}

/* ===== Alumni Cards ===== */
.alumni-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.alumni-card {
  padding: 32px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e8e0d0;
  text-align: center;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-top: 3px solid transparent;
}

.alumni-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  border-top-color: #ffcc00;
}

.alumni-icon {
  font-size: 2rem;
  margin-bottom: 16px;
}

.alumni-year {
  font-weight: 400;
  font-size: 0.85rem;
  color: #6b6b6b;
}

/* ===== Gallery Strip ===== */
.gallery-section {
  position: relative;
  z-index: 1;
  padding: 0;
  overflow: hidden;
  border-top: 4px solid #ffcc00;
  border-bottom: 4px solid #ffcc00;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0;
}

.gallery-item {
  overflow: hidden;
  aspect-ratio: 1;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.5s ease;
  filter: saturate(0.8);
}

.gallery-item:hover img {
  transform: scale(1.1);
  filter: saturate(1.2);
}

/* ===== Giving ===== */
.giving-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.giving-card {
  padding: 32px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e8e0d0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.giving-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

.giving-levels .level {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #e8e0d0;
}

.level-name {
  font-weight: 600;
  color: #1a1a1a;
}

.level-amount {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  color: #317d5d;
}

.giving-list li {
  padding: 8px 0;
  border-bottom: 1px solid #e8e0d0;
  font-size: 0.95rem;
  color: #444;
}

.giving-list li:last-child {
  border-bottom: none;
}

/* ===== Renovation Banner ===== */
.renovation-banner {
  margin-top: 48px;
  padding: 48px;
  background: linear-gradient(135deg, #317d5d 0%, #1B5E20 100%);
  border-radius: 20px;
  color: #fff;
  box-shadow: 0 8px 32px rgba(27, 94, 32, 0.3);
  position: relative;
  overflow: hidden;
}

.renovation-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 204, 0, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

/* ===== Timeline ===== */
.timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 80px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e8e0d0;
}

.timeline-item {
  display: flex;
  gap: 32px;
  margin-bottom: 32px;
  position: relative;
}

.timeline-year {
  flex-shrink: 0;
  width: 80px;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: #317d5d;
  text-align: right;
  padding-top: 4px;
}

.timeline-content {
  padding: 20px 28px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e8e0d0;
  flex: 1;
  position: relative;
}

.timeline-content::before {
  content: '';
  position: absolute;
  left: -9px;
  top: 12px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffcc00;
  border: 3px solid #f9f5ef;
  box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.2);
}

/* ===== Contact Section ===== */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: start;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.contact-item svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: #ffd633;
  margin-top: 4px;
}

.cta-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 40px;
  backdrop-filter: blur(10px);
  border-top: 3px solid #ffcc00;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: 9999px;
  font-family: var(--wp--preset--font-family--body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(135deg, #ffcc00 0%, #ffd633 100%);
  color: #1a1a1a;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(255, 204, 0, 0.3);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #ffd633 0%, #ffcc00 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(255, 204, 0, 0.45);
}

.btn-outline {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.3);
}

.btn-outline:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.1);
}

.btn-block {
  width: 100%;
  text-align: center;
}

/* ===== Portal Tabs / Accordion ===== */
.portal-tabs .tab-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.portal-tabs .tab-btn {
  padding: 10px 24px;
  border: 2px solid #e8e0d0;
  background: transparent;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: #444;
}

.portal-tabs .tab-btn:hover {
  background: #f5f0e8;
  border-color: #d4c9b5;
}

.portal-tabs .tab-btn.active {
  background: #317d5d;
  border-color: #317d5d;
  color: #fff;
}

.portal-tabs .tab-content {
  display: none;
}

.portal-tabs .tab-content.active {
  display: block;
}

/* Accordion mode (mobile) */
.portal-tabs.accordion-mode .tab-buttons {
  display: none;
}

.portal-tabs.accordion-mode .accordion-header {
  display: block;
  width: 100%;
  padding: 16px 20px;
  background: #f9f5ef;
  border: 1px solid #e8e0d0;
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.portal-tabs.accordion-mode .accordion-header.active {
  background: #317d5d;
  color: #fff;
  border-color: #317d5d;
}

.portal-tabs.accordion-mode .tab-content {
  display: none;
  padding: 20px;
}

.portal-tabs.accordion-mode .tab-content.active {
  display: block;
}

/* ===== Document Download Cards ===== */
.document-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid #e8e0d0;
  border-radius: 12px;
  margin-bottom: 12px;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.document-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

.document-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.document-info h4 {
  margin-bottom: 4px;
}

.document-info p {
  font-size: 0.85rem;
  color: #6b6b6b;
}

/* ===== School Life Mosaic ===== */
.school-life-section {
  position: relative;
  z-index: 1;
  background: #fff;
}

.life-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 280px;
  gap: 4px;
}

.mosaic-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.mosaic-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), filter 0.6s ease;
}

.mosaic-item:hover img {
  transform: scale(1.08);
}

.mosaic-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px 20px 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.mosaic-item:hover .mosaic-caption {
  opacity: 1;
  transform: translateY(0);
}

.mosaic-tall {
  grid-row: span 2;
}

.mosaic-wide {
  grid-column: span 2;
}

@media (max-width: 1024px) {
  .life-mosaic {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 240px;
  }
  .mosaic-wide {
    grid-column: span 1;
  }
}

@media (max-width: 768px) {
  .life-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 200px;
  }
  .mosaic-tall {
    grid-row: span 1;
  }
  .mosaic-caption {
    opacity: 1;
    transform: translateY(0);
    font-size: 12px;
    padding: 24px 12px 10px;
  }
}

@media (max-width: 480px) {
  .life-mosaic {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 160px;
  }
}

/* ===== Featured Video ===== */
.video-section {
  position: relative;
  z-index: 1;
}

.video-showcase {
  max-width: 1000px;
  margin: 0 auto;
}

.video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}

@media (max-width: 768px) {
  .video-grid {
    grid-template-columns: 1fr;
  }
}

.video-frame {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.4);
  border: 2px solid rgba(255,255,255,0.1);
}

.video-frame iframe,
.video-frame video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-meta {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 20px;
  flex-wrap: wrap;
}

.video-tag {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 9999px;
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  font-weight: 500;
}

/* ===== Single Article Styling ===== */
.single-article .article-category a {
  background: var(--wp--preset--color--primary, #317d5d);
  color: #fff !important;
  padding: 4px 14px;
  border-radius: 9999px;
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.single-article .article-featured-image img {
  width: 100%;
  border-radius: 12px;
}

.single-article .article-content p:first-of-type::first-letter {
  font-size: 3.2em;
  float: left;
  line-height: 0.8;
  margin: 0.05em 0.1em 0 0;
  font-weight: 800;
  color: var(--wp--preset--color--primary, #317d5d);
  font-family: var(--wp--preset--font-family--heading);
}

.single-article .article-content p {
  font-size: 1.05rem;
  line-height: 1.85;
  color: #333;
  margin-bottom: 1.4em;
}

.single-article .article-content img {
  border-radius: 8px;
  margin: 1.5em 0;
}

.single-article .article-content blockquote {
  border-left: 4px solid var(--wp--preset--color--accent, #ffcc00);
  padding: 16px 24px;
  margin: 2em 0;
  background: #f9f5ef;
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: #444;
}

.article-footer {
  margin-top: 48px;
}

.back-to-news {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--wp--preset--color--primary, #317d5d);
  color: #fff !important;
  text-decoration: none;
  border-radius: 9999px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.back-to-news:hover {
  background: #265f48;
  transform: translateY(-1px);
}

.article-navigation {
  gap: 16px;
}

.article-navigation a {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--wp--preset--color--primary, #317d5d) !important;
  text-decoration: none;
  padding: 8px 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.article-navigation a:hover {
  color: var(--wp--preset--color--accent, #ffcc00) !important;
}

/* ===== Collapsible Faculty Bios ===== */
.faculty-card .bio-summary {
  font-size: 0.85rem;
  color: #444;
  line-height: 1.6;
}

.faculty-card details {
  margin-top: 4px;
}

.faculty-card details summary {
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--wp--preset--color--primary, #317d5d);
  padding: 6px 0;
  list-style: none;
  user-select: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faculty-card details summary::-webkit-details-marker {
  display: none;
}

.faculty-card details summary::after {
  content: ' \25BC';
  font-size: 0.7em;
  margin-left: 4px;
}

.faculty-card details[open] summary::after {
  content: ' \25B2';
}

.faculty-card details summary:hover {
  color: var(--wp--preset--color--accent, #ffcc00);
}

.faculty-card details .faculty-bio {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Fade-in Animation ===== */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Ensure content is visible if JS doesn't load */
@media (prefers-reduced-motion: reduce) {
  .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===== Content Sections z-index ===== */
.section-relative {
  position: relative;
  z-index: 1;
}

/* ===== Selection Color ===== */
::selection {
  background: rgba(255, 204, 0, 0.3);
  color: #1a1a1a;
}

/* ===== Footer Links ===== */
.footer-link-list {
  list-style: none;
  padding: 0;
}

.footer-link-list li {
  margin-bottom: 10px;
}

.footer-link-list a:hover {
  color: #ffd633 !important;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .features-grid {
    grid-template-columns: 1fr;
  }

  .faculty-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .news-card.featured-news {
    grid-column: span 2;
  }

  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .giving-grid {
    grid-template-columns: 1fr;
  }

  .alumni-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .hero-badge {
    font-size: 11px;
    padding: 5px 14px;
    letter-spacing: 0.5px;
  }

  .hero-stats-row {
    flex-wrap: wrap;
    gap: 24px;
  }

  .admissions-grid {
    grid-template-columns: 1fr;
  }

  .tab-grid {
    grid-template-columns: 1fr;
  }

  .facts-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .news-grid {
    grid-template-columns: 1fr;
  }

  .news-card.featured-news {
    grid-column: span 1;
    grid-row: span 1;
  }

  .news-card.featured-news .news-img {
    height: 180px;
  }

  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .alumni-grid {
    grid-template-columns: 1fr;
  }

  .photo-strip-track img {
    min-width: 350px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .renovation-banner {
    padding: 32px;
  }

  .faculty-grid {
    grid-template-columns: 1fr;
  }

  .timeline::before {
    left: 60px;
  }

  .timeline-year {
    width: 60px;
    font-size: 0.95rem;
  }

  .section-label::before,
  .section-label::after {
    width: 20px;
    margin: 0 8px;
  }
}

@media (max-width: 480px) {
  .facts-grid {
    grid-template-columns: 1fr;
  }

  .includes-grid {
    grid-template-columns: 1fr;
  }

  .programs-tabs .tab-buttons {
    gap: 6px;
  }

  .programs-tabs .tab-btn {
    padding: 8px 16px;
    font-size: 13px;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .news-img {
    height: 140px;
  }
}

/* ===== Mudcloth Pattern Background ===== */
/* Inspired by Malian bògòlanfini (mudcloth) — subtle geometric crosses and dots */
.mudcloth-bg {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M20 0v4M20 36v4M0 20h4M36 20h4' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1.5'/%3E%3Ccircle cx='20' cy='20' r='1.5'/%3E%3Ccircle cx='0' cy='0' r='1'/%3E%3Ccircle cx='40' cy='0' r='1'/%3E%3Ccircle cx='0' cy='40' r='1'/%3E%3Ccircle cx='40' cy='40' r='1'/%3E%3C/g%3E%3C/svg%3E");
}

.mudcloth-bg-dark {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.035'%3E%3Cpath d='M18 20h4M20 18v4' stroke='%23ffffff' stroke-opacity='0.035' stroke-width='1.5'/%3E%3Ccircle cx='20' cy='20' r='1.5'/%3E%3Ccircle cx='0' cy='0' r='1'/%3E%3Ccircle cx='40' cy='0' r='1'/%3E%3Ccircle cx='0' cy='40' r='1'/%3E%3Ccircle cx='40' cy='40' r='1'/%3E%3C/g%3E%3C/svg%3E");
}

/* ===== Kente Border Strip ===== */
/* Inspired by Ashanti kente cloth — alternating woven color blocks */
.kente-border {
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    #317d5d 0px,
    #317d5d 20px,
    #ffcc00 20px,
    #ffcc00 40px,
    #1B5E20 40px,
    #1B5E20 60px,
    #c19661 60px,
    #c19661 80px,
    #ffcc00 80px,
    #ffcc00 100px,
    #317d5d 100px,
    #317d5d 120px
  );
  width: 100%;
  position: relative;
  z-index: 2;
}

.kente-border-thin {
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    #317d5d 0px,
    #317d5d 16px,
    #ffcc00 16px,
    #ffcc00 32px,
    #c19661 32px,
    #c19661 48px
  );
}

/* ===== Enhanced Mission Banner ===== */
.mission-banner {
  position: relative;
  overflow: hidden;
}

.mission-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%231a1a1a' stroke-opacity='0.06' stroke-width='1'%3E%3Cpath d='M30 10 L40 25 L30 40 L20 25Z'/%3E%3Ccircle cx='30' cy='25' r='4'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

.mission-banner > * {
  position: relative;
  z-index: 1;
}

/* ===== Enhanced Dark Sections ===== */
.section-dark {
  position: relative;
  overflow: hidden;
}

.section-dark::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.025'%3E%3Cpath d='M18 20h4M20 18v4' stroke='%23ffffff' stroke-opacity='0.025' stroke-width='1.5'/%3E%3Ccircle cx='20' cy='20' r='1.5'/%3E%3Ccircle cx='0' cy='0' r='1'/%3E%3Ccircle cx='40' cy='0' r='1'/%3E%3Ccircle cx='0' cy='40' r='1'/%3E%3Ccircle cx='40' cy='40' r='1'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

.section-dark > * {
  position: relative;
  z-index: 1;
}

/* ===== Footer Cultural Accent ===== */
.site-footer {
  position: relative;
}

.footer-kente {
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    #317d5d 0px,
    #317d5d 16px,
    #ffcc00 16px,
    #ffcc00 32px,
    #1B5E20 32px,
    #1B5E20 48px,
    #c19661 48px,
    #c19661 64px
  );
  margin-bottom: 0;
}

/* ===== Sankofa Symbol ===== */
.sankofa-mark {
  display: inline-block;
  width: 28px;
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M65 20 C80 20 90 35 85 50 C80 65 65 70 55 60 L60 75 C60 85 50 90 40 85 C30 80 25 65 35 55 C45 45 55 50 55 60 C65 70 80 60 80 50 C80 35 70 25 60 30 C55 33 50 25 55 20 Z' fill='rgba(255,204,0,0.6)' stroke='none'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.8;
}

/* ===== Enhanced School Life Mosaic ===== */
.mosaic-caption {
  opacity: 1 !important;
  transform: none !important;
  font-size: 13px !important;
  padding: 30px 16px 12px !important;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 100%) !important;
}

/* ===== Section Divider ===== */
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 0;
}

.section-divider::before,
.section-divider::after {
  content: '';
  height: 1px;
  flex: 1;
  max-width: 120px;
  background: linear-gradient(90deg, transparent, #e8e0d0, transparent);
}

/* ===== Responsive News Grid (homepage) ===== */
@media (max-width: 768px) {
  .news-section > div > div[style*="grid-template-columns"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  .news-section > div > div[style*="grid-template-columns"] > a {
    min-height: 200px !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
}