/* Beni Boarding Secondary School - Main Stylesheet */
:root {
  /* Premium multi-color palette: Purple · Blue · Red · Green */
  --primary: #5B2C6F;          /* Deep Purple */
  --primary-dark: #3D1A4A;
  --primary-light: #7D3C98;
  --secondary: #1A5276;        /* Royal Blue */
  --secondary-light: #2980B9;
  --accent-red: #C0392B;       /* Strong Red */
  --accent-red-light: #E74C3C;
  --accent-green: #1E8449;     /* Emerald Green */
  --accent-green-light: #27AE60;
  --gold: #D4AF37;
  --gold-light: #F5D76E;
  --accent: #D4AF37;          /* gold – used by footer headings & buttons */
  --accent-light: #F5D76E;
  --white: #ffffff;
  --light: #F4F6FB;
  --gray: #374151;  /* darkened for better heading/text visibility */
  --dark: #1A1A2E;
  --success: #1E8449;
  --danger: #C0392B;
  --warning: #F39C12;
  --shadow: 0 4px 24px rgba(91, 44, 111, 0.10);
  --shadow-lg: 0 16px 48px rgba(26, 82, 118, 0.15);
  --radius: 14px;
  --radius-sm: 8px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --font: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Noto Sans', sans-serif;
  --gradient-main: linear-gradient(135deg, #5B2C6F 0%, #1A5276 50%, #1E8449 100%);
  --gradient-hero: linear-gradient(135deg, rgba(91,44,111,0.92) 0%, rgba(26,82,118,0.88) 50%, rgba(30,132,73,0.85) 100%);
  --gradient-btn: linear-gradient(135deg, #5B2C6F, #1A5276);
  --gradient-btn-red: linear-gradient(135deg, #C0392B, #E74C3C);
  --gradient-btn-green: linear-gradient(135deg, #1E8449, #27AE60);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  color: var(--dark);
  background: var(--light);
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

ul { list-style: none; }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Ensure images and media never cause horizontal scroll */
img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}
iframe {
  max-width: 100%;
}

/* ========== HEADER ========== */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--white);
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.header-top {
  background: var(--gradient-main);
  color: var(--white);
  padding: 8px 0;
  font-size: 0.875rem;
}

.header-top .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.header-top a {
  color: var(--accent-light);
}

.header-top a:hover {
  color: var(--white);
}

.header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  gap: 16px;
  flex-wrap: nowrap; /* keep logo + hamburger on one row */
}

.logo-area {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0; /* critical: allows text to shrink/wrap instead of overflowing */
  overflow: visible;
}

.logo-area img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
}

.logo-text {
  min-width: 0;
  overflow: visible;
}

.logo-text h1 {
  font-size: 1.15rem;
  color: var(--primary);
  line-height: 1.2;
  font-weight: 700;
  white-space: normal;          /* allow full name to wrap on small screens */
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
}

.logo-text span {
  font-size: 0.75rem;
  color: var(--gray);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-desktop {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-desktop a {
  padding: 8px 14px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--dark);
  border-radius: 8px;
  white-space: nowrap;
}

.nav-desktop a:hover {
  background: rgba(91, 44, 111, 0.1);
  color: var(--primary);
}
.nav-desktop a.active {
  background: rgba(91, 44, 111, 0.12);
  color: var(--primary);
  font-weight: 700;
}

.nav-desktop a.admin-link {
  background: transparent;
  color: inherit;
  font-weight: 500;
}

.nav-desktop a.admin-link:hover {
  background: var(--accent-light);
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  background: none;
  border: none;
}

.hamburger span {
  display: block;
  width: 26px;
  height: 3px;
  background: var(--primary);
  border-radius: 2px;
  transition: var(--transition);
}

.mobile-menu {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-menu-content {
  position: absolute;
  top: 0;
  right: 0;
  width: min(320px, 85%);
  height: 100%;
  background: var(--white);
  padding: 20px;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
}

.mobile-menu.open .mobile-menu-content {
  transform: translateX(0);
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.close-menu {
  background: none;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  color: var(--primary);
}

.mobile-nav a {
  display: block;
  padding: 14px 16px;
  font-weight: 500;
  border-radius: 8px;
  margin-bottom: 4px;
}

.mobile-nav a:hover,
.mobile-nav a.active {
  background: var(--primary);
  color: var(--white);
}

/* ========== HERO SLIDER ========== */
.hero {
  position: relative;
  height: 560px;
  overflow: hidden;
  background: var(--secondary);
}

.hero-slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
  background-size: cover;
  background-position: center;
}

.hero-slide.active {
  opacity: 1;
  z-index: 1;
}

/* No dark overlay on slider – images show clearly */
.hero-slide::before {
  display: none !important;
  content: none !important;
}

.hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: var(--white);
  max-width: 700px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.65), 0 1px 3px rgba(0,0,0,0.5);
}

.hero-content h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  margin-bottom: 12px;
  line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.hero-content p {
  font-size: clamp(1rem, 2vw, 1.25rem);
  margin-bottom: 24px;
  opacity: 0.95;
}

.hero-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  transition: var(--transition);
}

.btn-primary {
  background: var(--accent);
  color: var(--dark);
}

.btn-primary:hover {
  background: var(--accent-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212,175,55,0.4);
}

.btn-outline {
  background: transparent;
  color: var(--white);
  border: 2px solid var(--white);
}

.btn-outline:hover {
  background: var(--white);
  color: var(--primary);
}

.btn-secondary {
  background: var(--secondary);
  color: var(--white);
}

.btn-secondary:hover {
  background: var(--primary);
}

.hero-dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 5;
}

.hero-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: none;
  cursor: pointer;
  transition: var(--transition);
}

.hero-dot.active {
  background: var(--accent);
  transform: scale(1.2);
}

.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  background: rgba(255,255,255,0.2);
  border: none;
  color: white;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1.4rem;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-nav:hover {
  background: var(--accent);
  color: var(--dark);
}

.hero-nav.prev { left: 20px; }
.hero-nav.next { right: 20px; }

/* ========== SECTIONS ========== */
.section {
  padding: 70px 0;
}

.section-header {
  text-align: center;
  margin-bottom: 48px;
}

.section-header h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--primary-dark);
  font-weight: 800;
  margin-bottom: 12px;
  position: relative;
  display: inline-block;
}

.section-header h2::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: var(--accent);
  border-radius: 2px;
}

.section-header p {
  color: var(--gray);
  max-width: 600px;
  margin: 16px auto 0;
}

/* Cards Grid */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.card-img {
  height: 200px;
  overflow: hidden;
  background: #e5e7eb;
}

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

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

.card-body {
  padding: 20px;
}

.card-body h3 {
  font-size: 1.15rem;
  color: var(--primary);
  margin-bottom: 8px;
}

.card-body p {
  color: var(--gray);
  font-size: 0.9rem;
  margin-bottom: 12px;
}

.card-meta {
  font-size: 0.8rem;
  color: var(--gray);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Facility Cards */
.facility-card {
  text-align: center;
  padding: 28px 20px;
}

.facility-icon {
  font-size: 2.8rem;
  margin-bottom: 16px;
}

.facility-card h3 {
  color: var(--primary-dark);
  font-weight: 800;
  margin-bottom: 10px;
  font-size: 1.15rem;
}

/* Principal – unique side card (not full-page band) */
.principal-section {
  background: transparent;
  color: var(--dark);
  padding: 50px 0;
}

.principal-wrap {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 32px;
  align-items: stretch;
  max-width: 1100px;
  margin: 0 auto;
}

.principal-card {
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(91, 44, 111, 0.12);
  overflow: hidden;
  border: 1px solid rgba(91, 44, 111, 0.08);
  display: flex;
  flex-direction: column;
}

.principal-card-top {
  background: var(--gradient-main);
  padding: 28px 24px 48px;
  text-align: center;
  color: #fff;
  position: relative;
}

.principal-card-top h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.02em;
}

.principal-photo {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  margin: -48px auto 0;
  position: relative;
  z-index: 2;
  background: #eee;
}

.principal-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.principal-card-body {
  padding: 20px 24px 28px;
  text-align: center;
  flex: 1;
}

.principal-card-body h3 {
  font-size: 1.25rem;
  color: var(--primary);
  margin-bottom: 4px;
}

.principal-card-body .designation {
  color: var(--secondary);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 14px;
}

.principal-card-body .message {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gray);
  text-align: left;
}

/* Right side of principal row can hold a short intro / quote */
.principal-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 8px;
}

.principal-side .quote-mark {
  font-size: 3rem;
  line-height: 1;
  color: var(--primary);
  opacity: 0.25;
  font-family: Georgia, serif;
}

.principal-side h3 {
  font-size: 1.5rem;
  color: var(--primary);
  margin-bottom: 12px;
}

.principal-side p {
  color: var(--gray);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 20px;
}

.principal-side .btn {
  align-self: flex-start;
}

/* Legacy class still used by JS – keep compatible */
.principal-content {
  display: contents;
}

@media (max-width: 768px) {
  .principal-wrap {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
  .principal-side {
    text-align: center;
    padding: 8px 0 0;
  }
  .principal-side .btn {
    align-self: center;
  }
}

/* About sections */
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.about-card {
  background: var(--white);
  padding: 28px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border-top: 4px solid var(--accent);
}

.about-card h3 {
  color: var(--primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Academics */
.level-card {
  text-align: center;
  padding: 32px 24px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.level-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.level-card .icon {
  font-size: 3rem;
  margin-bottom: 16px;
}

.level-card h3 {
  color: var(--primary);
  margin-bottom: 10px;
}

/* Gallery */
/* ========== GALLERY – Unique Premium Photo Frames ========== */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
  justify-content: center;
}
.gallery-filters button {
  padding: 8px 18px;
  border: 2px solid transparent;
  border-radius: 50px;
  background: #fff;
  color: var(--dark);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow);
}
.gallery-filters button:hover,
.gallery-filters button.active {
  background: var(--gradient-btn);
  color: #fff;
  box-shadow: 0 4px 16px rgba(91, 44, 111, 0.3);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px;
  padding: 10px 0 40px;
}

/* Unique multi-color photo frames */
.gallery-item {
  position: relative;
  background: #fff;
  border-radius: 6px;
  overflow: visible;
  cursor: pointer;
  transition: var(--transition);
  /* Outer frame – multi-color gradient border */
  padding: 10px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #5B2C6F, #1A5276, #1E8449, #C0392B) border-box;
  border: 4px solid transparent;
  border-radius: 12px;
  box-shadow:
    0 8px 28px rgba(91, 44, 111, 0.12),
    inset 0 0 0 1px rgba(255,255,255,0.8);
}

.gallery-item::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(91, 44, 111, 0.12);
  border-radius: 8px;
  pointer-events: none;
  z-index: 2;
}

/* Corner accents */
.gallery-item::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  width: 22px;
  height: 22px;
  border-top: 3px solid var(--primary);
  border-left: 3px solid var(--primary);
  border-radius: 4px 0 0 0;
  z-index: 3;
  opacity: 0.85;
}

.gallery-item img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  border-radius: 6px;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-item:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow:
    0 20px 50px rgba(91, 44, 111, 0.2),
    0 0 0 1px rgba(26, 82, 118, 0.15);
}

.gallery-item:hover img {
  transform: scale(1.06);
}

/* Alternating frame accent colors for variety */
.gallery-item:nth-child(4n+1) {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #5B2C6F, #7D3C98, #1A5276) border-box;
}
.gallery-item:nth-child(4n+1)::after {
  border-color: var(--primary);
}

.gallery-item:nth-child(4n+2) {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #1A5276, #2980B9, #1E8449) border-box;
}
.gallery-item:nth-child(4n+2)::after {
  border-color: var(--secondary);
  right: -2px;
  left: auto;
  border-left: none;
  border-right: 3px solid var(--secondary);
  border-radius: 0 4px 0 0;
}

.gallery-item:nth-child(4n+3) {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #1E8449, #27AE60, #5B2C6F) border-box;
}
.gallery-item:nth-child(4n+3)::after {
  border-color: var(--accent-green);
  top: auto;
  bottom: -2px;
  border-top: none;
  border-bottom: 3px solid var(--accent-green);
  border-radius: 0 0 0 4px;
}

.gallery-item:nth-child(4n+4) {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #C0392B, #E74C3C, #5B2C6F) border-box;
}
.gallery-item:nth-child(4n+4)::after {
  border-color: var(--accent-red);
  top: auto;
  bottom: -2px;
  right: -2px;
  left: auto;
  border-top: none;
  border-left: none;
  border-bottom: 3px solid var(--accent-red);
  border-right: 3px solid var(--accent-red);
  border-radius: 0 0 4px 0;
}

.gallery-overlay {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 14px 14px 12px;
  background: linear-gradient(transparent, rgba(26, 26, 46, 0.92));
  border-radius: 0 0 6px 6px;
  opacity: 1;
  transform: translateY(0);
  transition: var(--transition);
  z-index: 4;
  pointer-events: none;
}
.gallery-item:hover .gallery-overlay {
  opacity: 1;
  transform: translateY(0);
  background: linear-gradient(transparent, rgba(15, 10, 30, 0.95));
}
.gallery-overlay h4 {
  color: #fff;
  font-size: 0.95rem;
  margin-bottom: 4px;
  font-weight: 700;
  line-height: 1.25;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.gallery-overlay .gallery-caption {
  color: rgba(255,255,255,0.95);
  font-size: 0.78rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.gallery-overlay span.gallery-cat {
  color: rgba(255,255,255,0.8);
  font-size: 0.72rem;
  display: inline-block;
  margin-top: 4px;
  background: rgba(255,255,255,0.15);
  padding: 2px 8px;
  border-radius: 10px;
}

/* Lightbox premium frame */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(15, 10, 30, 0.92);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  backdrop-filter: blur(8px);
}
.lightbox.open {
  opacity: 1;
  visibility: visible;
}
.lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 85vh;
  /* Premium frame around lightbox image */
  padding: 12px;
  background:
    linear-gradient(#1a1a2e, #1a1a2e) padding-box,
    linear-gradient(135deg, #5B2C6F, #1A5276, #1E8449, #C0392B) border-box;
  border: 5px solid transparent;
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}
.lightbox-content img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gradient-btn);
  color: #fff;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.lightbox-nav:hover {
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 24px rgba(91, 44, 111, 0.5);
}
.lightbox-nav.prev { left: 20px; }
.lightbox-nav.next { right: 20px; }
.lightbox-close {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gradient-btn-red);
  color: #fff;
  border: 3px solid #fff;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(192, 57, 43, 0.4);
  transition: var(--transition);
  z-index: 5;
}
.lightbox-close:hover {
  transform: scale(1.1);
}

/* Notices */
.notice-item {
  background: var(--white);
  padding: 20px 24px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  border-left: 5px solid var(--secondary);
  transition: var(--transition);
}

.notice-item:hover {
  box-shadow: var(--shadow-lg);
}

.notice-item.important {
  border-left-color: var(--danger);
}

.notice-item .badge {
  display: inline-block;
  background: var(--danger);
  color: white;
  font-size: 0.7rem;
  padding: 3px 10px;
  border-radius: 20px;
  margin-left: 8px;
  font-weight: 600;
}

.notice-meta {
  font-size: 0.85rem;
  color: var(--gray);
  margin-top: 8px;
}

/* Search */
.search-box {
  position: relative;
  max-width: 500px;
  margin: 0 auto 32px;
}

.search-box input {
  width: 100%;
  padding: 14px 20px 14px 48px;
  border: 2px solid #e5e7eb;
  border-radius: 50px;
  font-size: 1rem;
  outline: none;
  transition: var(--transition);
}

.search-box input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(74,28,107,0.15);
}

.search-box .search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray);
}

.search-results {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-height: 400px;
  overflow-y: auto;
  display: none;
  position: absolute;
  width: 100%;
  top: 100%;
  left: 0;
  z-index: 100;
  margin-top: 8px;
}

.search-results.show {
  display: block;
}

.search-result-item {
  padding: 12px 18px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}

.search-result-item:hover {
  background: var(--light);
}

.search-result-item .type {
  font-size: 0.75rem;
  color: var(--primary);
  font-weight: 600;
  text-transform: uppercase;
}

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.contact-info-card {
  background: var(--gradient-main);
  color: white;
  padding: 36px;
  border-radius: var(--radius);
}

.contact-info-card h3 {
  margin-bottom: 24px;
  font-size: 1.4rem;
}

.contact-item {
  display: flex;
  gap: 14px;
  margin-bottom: 20px;
  align-items: flex-start;
}

.contact-item .icon {
  font-size: 1.4rem;
  min-width: 30px;
}

.contact-form {
  background: var(--white);
  padding: 36px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.form-group {
  margin-bottom: 18px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  font-size: 0.9rem;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  transition: var(--transition);
  outline: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--primary);
}

.form-group textarea {
  min-height: 120px;
  resize: vertical;
}

.map-container {
  margin-top: 40px;
  border-radius: var(--radius);
  overflow: hidden;
  height: 350px;
  background: #e5e7eb;
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Footer – compact professional bar */
.footer {
  background: linear-gradient(135deg, #2a1040 0%, #152a5c 100%);
  color: #ffffff !important;
  padding: 28px 0 0 !important;
}

.footer-grid {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 0.8fr !important;
  gap: 24px 32px !important;
  margin-bottom: 18px !important;
  align-items: start;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-brand img {
  width: 42px !important;
  height: 42px !important;
  object-fit: contain;
  margin-bottom: 6px !important;
}

.footer-brand h3 {
  font-size: 0.95rem !important;
  margin-bottom: 2px !important;
  line-height: 1.3;
  color: #ffffff !important;
  font-weight: 700;
}

.footer-brand p,
.footer-brand a {
  font-size: 0.8rem !important;
  color: rgba(255, 255, 255, 0.82) !important;
  margin-bottom: 2px !important;
  line-height: 1.4;
}

/* Hide extra long brand lines on compact footer if many <p> */
.footer-brand > p:nth-of-type(n+4) {
  display: none;
}

.footer h4 {
  font-size: 0.78rem !important;
  margin-bottom: 8px !important;
  color: #F5D76E !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer-links a {
  display: block;
  padding: 3px 0 !important;
  font-size: 0.8rem !important;
  color: rgba(255, 255, 255, 0.85) !important;
  line-height: 1.35;
}

.footer-links a:hover {
  color: #F5D76E !important;
}

.social-links {
  display: flex;
  gap: 8px;
  margin-top: 6px !important;
  flex-wrap: wrap;
  align-items: center;
}

.social-links a {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem !important;
  transition: var(--transition);
}

.social-links a:hover {
  background: #F5D76E;
  color: #1A1A2E !important;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 12px 0 !important;
  text-align: center;
  font-size: 0.75rem !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Compact footer: hide redundant 4th column "Info" / Academics bulk on small screens */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }
}
@media (max-width: 560px) {
  .footer {
    padding: 22px 0 0 !important;
  }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .footer-brand img {
    width: 36px !important;
    height: 36px !important;
  }
}

/* Utilities */
.badge-important {
  background: var(--danger);
  color: white;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 600;
}

.text-center { text-align: center; }
.mt-2 { margin-top: 16px; }
.mb-2 { margin-bottom: 16px; }
.hidden { display: none !important; }

/* Empty state */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--gray);
}

.empty-state .icon {
  font-size: 3rem;
  margin-bottom: 16px;
}

/* ========== RESPONSIVE – Mobile & PC friendly ========== */

/* Large tablets / small laptops */
@media (max-width: 1100px) {
  .nav-desktop a {
    padding: 8px 10px;
    font-size: 0.85rem;
  }
  .container {
    padding: 0 16px;
  }
}

/* Tablets and below – switch to mobile nav */
@media (max-width: 992px) {
  /* Hide all desktop tabs on mobile/tablet — use sidebar only */
  .nav-desktop,
  .header .nav-desktop,
  .header-main .nav-desktop {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .hamburger,
  .header .hamburger {
    display: flex !important;
    flex-shrink: 0 !important;
  }

  /* Give logo maximum space for full school branding */
  .logo-area,
  .header .logo-area {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
  }
  .logo-text h1,
  .header .logo-text h1 {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    font-size: 1.05rem !important;
    line-height: 1.2 !important;
    max-width: none !important;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .principal-wrap {
    grid-template-columns: 1fr;
    max-width: 480px;
  }

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

  .hero-content {
    padding: 0 24px;
    max-width: 100%;
    align-items: center;
    text-align: center;
  }
  .hero-buttons {
    justify-content: center;
  }

  .header-top .container {
    justify-content: center;
    text-align: center;
  }

  .cards-grid,
  .gallery-grid,
  .about-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

/* Mobile landscape / small tablets */
@media (max-width: 768px) {
  .hero {
    height: 420px;
    min-height: 360px;
  }
  .hero-nav {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }
  .hero-nav.prev { left: 10px; }
  .hero-nav.next { right: 10px; }

  .section {
    padding: 40px 0;
  }
  .section-header {
    margin-bottom: 28px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .header-top {
    font-size: 0.78rem;
    padding: 6px 0;
  }
  .header-top .container {
    flex-direction: column;
    gap: 6px;
  }

  .header-main {
    padding: 10px 0;
    gap: 10px;
  }

  .logo-area {
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
  }
  .logo-area img {
    width: 46px;
    height: 46px;
  }
  .logo-text h1 {
    font-size: 0.98rem;
    line-height: 1.18;
    white-space: normal;
  }
  .logo-text span {
    font-size: 0.68rem;
  }

  .principal-photo {
    width: 160px;
    height: 160px;
  }
  body.home-clean .principal-photo {
    width: 180px;
    height: 180px;
    margin: -48px auto 0;
  }

  .map-container,
  .map-wrap {
    height: 260px;
  }

  .search-box {
    margin: 0 0 8px;
  }

  .cards-grid,
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

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

  .btn {
    padding: 11px 22px;
    font-size: 0.9rem;
  }

  .detail-modal-box {
    max-height: 85vh;
  }
  .detail-modal-body {
    padding: 20px 18px 24px;
  }
  .detail-modal-body h2 {
    font-size: 1.25rem;
  }

  /* Improve touch targets */
  .mobile-nav a {
    padding: 15px 16px;
    font-size: 1rem;
  }
  .hamburger {
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
  }
}

/* Phones */
@media (max-width: 480px) {
  .hero {
    height: 360px;
    min-height: 300px;
  }
  .hero-content h2 {
    font-size: 1.55rem;
  }
  .hero-content p {
    font-size: 0.95rem;
    margin-bottom: 18px;
  }
  .hero-buttons {
    flex-direction: column;
    width: 100%;
    max-width: 280px;
  }
  .hero-buttons .btn {
    width: 100%;
  }

  .logo-area {
    gap: 8px;
  }
  .logo-text h1 {
    font-size: 0.88rem;
    line-height: 1.15;
    white-space: normal; /* full school name visible, wraps to 2 lines if needed */
  }
  .logo-area img {
    width: 40px;
    height: 40px;
  }
  .logo-text span {
    display: block; /* keep full branding: address under school name */
    font-size: 0.62rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .btn {
    padding: 10px 18px;
    font-size: 0.875rem;
  }

  .container {
    padding: 0 14px;
  }

  .section {
    padding: 32px 0;
  }

  .principal-photo {
    width: 140px;
    height: 140px;
    border-width: 4px;
  }
  body.home-clean .principal-photo {
    width: 160px;
    height: 160px;
    margin: -40px auto 0;
  }

  .map-container,
  .map-wrap {
    height: 220px;
  }

  .footer {
    padding: 40px 0 0;
  }

  .floating-smartboard {
    bottom: 14px;
    right: 12px;
    padding: 11px 16px;
    font-size: 0.8rem;
  }

  .btn-smartboard {
    padding: 5px 10px;
    font-size: 0.75rem;
  }

  /* Prevent horizontal overflow from long words */
  body {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

/* Very small phones */
@media (max-width: 360px) {
  .logo-text h1 {
    font-size: 0.82rem;
    line-height: 1.12;
  }
  .logo-area img {
    width: 36px;
    height: 36px;
  }
  .hero {
    height: 320px;
  }
  .hero-content h2 {
    font-size: 1.35rem;
  }
}

/* Animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-in {
  animation: fadeInUp 0.6s ease forwards;
}

/* Focus states for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ===== Notice Image Support ===== */
.notice-item .notice-img {
  margin-bottom: 12px;
  border-radius: 10px;
  overflow: hidden;
  max-height: 220px;
}
.notice-item .notice-img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

/* Facility card with image */
.facility-card .card-img {
  height: 180px;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  margin: -20px -20px 16px -20px;
}
.facility-card .card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.facility-card:hover .card-img img {
  transform: scale(1.05);
}

/* Better card polish */
.card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

/* Professional header polish */
.site-header {
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.97);
}

/* Section titles */
.section-title {
  position: relative;
  display: inline-block;
}
.section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #5b2c6f, #1a5276);
  margin: 8px auto 0;
  border-radius: 2px;
}


/* =====================================================
   PREMIUM DESIGN ENHANCEMENTS
   Colors: Purple · Blue · Red · Green
   ===================================================== */

/* Book Smart Board CTA Button */
.btn-smartboard {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gradient-btn-green);
  color: #fff !important;
  padding: 8px 18px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.875rem;
  box-shadow: 0 4px 14px rgba(30, 132, 73, 0.35);
  transition: var(--transition);
  border: none;
  white-space: nowrap;
}
.btn-smartboard:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(30, 132, 73, 0.5);
  background: linear-gradient(135deg, #27AE60, #1E8449);
  color: #fff !important;
}
.btn-smartboard::before {
  content: "";
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  background: url('../assets/cliparts/tv.svg') center/contain no-repeat;
  vertical-align: -0.15em;
}

/* Header top bar refinements */
.header-top {
  background: var(--gradient-main) !important;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.header-top .container {
  gap: 16px;
}
.header-top a {
  color: rgba(255,255,255,0.9) !important;
}
.header-top a:hover {
  color: var(--gold-light) !important;
}

/* Premium buttons */
.btn-primary {
  background: var(--gradient-btn) !important;
  border: none;
  box-shadow: 0 4px 16px rgba(91, 44, 111, 0.3);
}
.btn-primary:hover {
  box-shadow: 0 6px 24px rgba(91, 44, 111, 0.45);
  transform: translateY(-2px);
}
.btn-secondary {
  background: transparent;
  border: 2px solid var(--white);
  color: var(--white);
}
.btn-secondary:hover {
  background: var(--white);
  color: var(--primary);
}

/* Hero overlay disabled – clear photos */
.hero-slide::before {
  display: none !important;
  content: none !important;
}

/* Section titles with multi-color underline */
.section-title::after {
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent-green)) !important;
  width: 80px !important;
  height: 4px !important;
}

/* Cards with subtle color border on hover */
.card:hover {
  border-color: transparent;
  box-shadow: 0 16px 40px rgba(91, 44, 111, 0.12), 0 0 0 1px rgba(91, 44, 111, 0.08);
}

/* Notice important badge - red */
.badge, .notice-item.important .badge {
  background: var(--gradient-btn-red) !important;
  color: #fff !important;
}

/* Facility icon circle multi-color */
.facility-icon {
  background: linear-gradient(135deg, rgba(91,44,111,0.12), rgba(26,82,118,0.12)) !important;
  color: var(--primary) !important;
}

/* Footer premium – keep text readable on dark */
.footer {
  background: linear-gradient(160deg, #1A1A2E 0%, #2C1654 40%, #0D2137 100%) !important;
  color: #ffffff !important;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  color: rgba(255, 255, 255, 0.85) !important;
}
.footer a {
  color: rgba(255, 255, 255, 0.9) !important;
}
.footer a:hover {
  color: #F5D76E !important;
}
.footer h3,
.footer h4 {
  color: #F5D76E !important;
}
.footer-brand h3 {
  color: #ffffff !important;
}

/* Floating Book Smart Board – compact professional */
.floating-smartboard {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 999 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, #1E8449, #27AE60) !important;
  color: #fff !important;
  padding: 10px 16px !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  line-height: 1.2 !important;
  box-shadow: 0 6px 18px rgba(30, 132, 73, 0.35) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, padding 0.2s ease !important;
  text-decoration: none !important;
  max-width: calc(100vw - 32px);
  white-space: nowrap;
  animation: none !important;
}
.floating-smartboard:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(30, 132, 73, 0.45) !important;
  color: #fff !important;
}
.floating-smartboard:visited,
.floating-smartboard:active,
.floating-smartboard:focus {
  color: #fff !important;
  outline: none;
}
.floating-smartboard span,
.floating-smartboard .clip {
  font-size: 1rem !important;
  line-height: 1 !important;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 768px) {
  .floating-smartboard {
    bottom: 14px !important;
    right: 14px !important;
    padding: 9px 12px !important;
    font-size: 0.72rem !important;
    gap: 6px !important;
  }
  .btn-smartboard {
    padding: 6px 12px;
    font-size: 0.8rem;
  }
}

/* Nav active state multi-color */
.nav-desktop a.active,
.mobile-nav a.active {
  color: var(--primary) !important;
  position: relative;
  background: rgba(91, 44, 111, 0.12) !important;
}
.nav-desktop a.active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 14px;
  right: 14px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 2px;
}
.mobile-nav a.active {
  background: rgba(91, 44, 111, 0.1) !important;
}

/* Admin link accent */
.admin-link {
  background: var(--gradient-btn-red) !important;
  color: #fff !important;
  padding: 6px 14px !important;
  border-radius: 50px !important;
  font-size: 0.85rem !important;
}
.admin-link:hover {
  opacity: 0.9;
  color: #fff !important;
}

/* Smooth page sections */
.section {
  padding: 70px 0;
}
.section-alt {
  background: linear-gradient(180deg, #F4F6FB 0%, #EEF2FF 100%);
}

/* Premium form focus */
input:focus, textarea:focus, select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(91, 44, 111, 0.15) !important;
  outline: none;
}

/* Gallery hover multi-color glow */
.gallery-item:hover {
  box-shadow: 0 12px 32px rgba(91, 44, 111, 0.2);
}

/* =====================================================
   PROFESSIONAL PAGE COMPONENTS
   ===================================================== */

/* Page banner */
.page-banner {
  background: var(--gradient-main);
  color: #fff;
  padding: 56px 0 48px;
  text-align: center;
}
.page-banner h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.page-banner p {
  opacity: 0.9;
  font-size: 1.05rem;
}

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primary-dark);
  margin-bottom: 8px;
}

/* Pro intro (About) */
.pro-intro {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 48px;
  align-items: center;
}
.pro-intro-text h2 {
  font-size: 1.85rem;
  color: var(--dark);
  margin-bottom: 16px;
}
.pro-intro-text p {
  color: var(--gray);
  margin-bottom: 12px;
  line-height: 1.75;
}
.pro-stats {
  display: flex;
  gap: 28px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.pro-stats .stat {
  text-align: center;
  min-width: 90px;
}
.pro-stats .stat strong {
  display: block;
  font-size: 1.5rem;
  color: var(--primary);
  font-weight: 800;
}
.pro-stats .stat span {
  font-size: 0.8rem;
  color: var(--gray);
}
.pro-intro-visual {
  background: linear-gradient(145deg, #f8f5fc, #eef4fb);
  border-radius: 20px;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(91,44,111,0.08);
}
.pro-intro-visual img {
  max-width: 200px;
  filter: drop-shadow(0 8px 24px rgba(91,44,111,0.15));
}

/* Pro cards */
.pro-cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pro-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.04);
  transition: var(--transition);
}
.pro-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.pro-card-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
}
.pro-card.accent-purple .pro-card-bar { background: linear-gradient(90deg, #5B2C6F, #7D3C98); }
.pro-card.accent-blue .pro-card-bar { background: linear-gradient(90deg, #1A5276, #2980B9); }
.pro-card.accent-green .pro-card-bar { background: linear-gradient(90deg, #1E8449, #27AE60); }
.pro-card.accent-red .pro-card-bar { background: linear-gradient(90deg, #C0392B, #E74C3C); }
.pro-card h3 {
  font-size: 1.2rem;
  margin: 8px 0 12px;
  color: var(--dark);
}
.pro-card p {
  color: var(--gray);
  font-size: 0.95rem;
  line-height: 1.65;
}

.pro-cards-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.pro-mini-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,0.04);
  transition: var(--transition);
}
.pro-mini-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.pro-icon-img {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 14px;
}
.pro-mini-card h4 {
  font-size: 1rem;
  margin-bottom: 8px;
  color: var(--dark);
}
.pro-mini-card p {
  font-size: 0.875rem;
  color: var(--gray);
  line-height: 1.55;
}

/* Timeline */
.pro-timeline {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  padding-left: 32px;
}
.pro-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: linear-gradient(180deg, var(--primary), var(--secondary), var(--accent-green));
  border-radius: 2px;
}
.timeline-item {
  position: relative;
  margin-bottom: 32px;
}
.timeline-dot {
  position: absolute;
  left: -32px;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px rgba(91,44,111,0.2);
}
.timeline-content {
  background: #fff;
  padding: 20px 24px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,0.04);
}
.timeline-content h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: var(--primary);
}
.timeline-content p {
  color: var(--gray);
  font-size: 0.95rem;
  line-height: 1.65;
}

/* Academic levels */
.level-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.level-card-pro {
  display: flex;
  gap: 20px;
  background: #fff;
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,0.04);
  transition: var(--transition);
  align-items: flex-start;
}
.level-card-pro:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.level-img-wrap {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.level-img-wrap img {
  width: 72px;
  height: 72px;
  border-radius: 16px;
}
.level-body h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
  color: var(--dark);
}
.level-body p {
  color: var(--gray);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* Events unique cards */
.event-card-pro {
  display: grid;
  grid-template-columns: 70px 140px 1fr;
  gap: 0;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,0.04);
  transition: var(--transition);
  margin-bottom: 16px;
}
.event-card-pro:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.event-date-badge {
  background: var(--gradient-btn);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
}
.event-date-badge .day {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
}
.event-date-badge .month {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.9;
  margin-top: 4px;
}
.event-card-img {
  height: 100%;
  min-height: 120px;
}
.event-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.event-card-body {
  padding: 18px 20px;
}
.event-status {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 50px;
  margin-bottom: 8px;
}
.event-status.upcoming {
  background: rgba(30,132,73,0.12);
  color: var(--accent-green);
}
.event-status.previous {
  background: rgba(107,114,128,0.12);
  color: var(--gray);
}
.event-card-body h3 {
  font-size: 1.1rem;
  margin-bottom: 6px;
  color: var(--dark);
}
.event-card-body p {
  font-size: 0.9rem;
  color: var(--gray);
  margin-bottom: 10px;
  line-height: 1.5;
}
.event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--gray);
}
.event-meta .meta-icon {
  width: 14px;
  height: 14px;
  vertical-align: middle;
  border-radius: 3px;
  display: inline-block;
}

/* News unique cards */
.news-card-pro {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,0.04);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.news-card-pro:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.news-card-img {
  position: relative;
  height: 180px;
  overflow: hidden;
}
.news-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.news-card-pro:hover .news-card-img img {
  transform: scale(1.05);
}
.news-date-pill {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: var(--gradient-btn);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 50px;
}
.news-card-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.news-card-body h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: var(--dark);
  line-height: 1.35;
}
.news-card-body p {
  font-size: 0.9rem;
  color: var(--gray);
  line-height: 1.55;
  flex: 1;
  margin-bottom: 12px;
}
.news-read {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
}
.news-card-wide {
  flex-direction: row;
  max-height: none;
}
.news-card-wide .news-card-img {
  width: 280px;
  height: auto;
  min-height: 180px;
  flex-shrink: 0;
}
.news-card-wide .news-card-body {
  justify-content: center;
}

/* Contact pro */
.contact-pro {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: start;
}
.contact-lead {
  color: var(--gray);
  margin: 12px 0 28px;
  line-height: 1.65;
}
.contact-rows {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 28px;
}
.contact-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.contact-icon-img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  flex-shrink: 0;
}
.contact-row strong {
  display: block;
  font-size: 0.9rem;
  color: var(--dark);
  margin-bottom: 2px;
}
.contact-row p {
  font-size: 0.9rem;
  color: var(--gray);
  margin: 0;
}
.contact-row a {
  color: var(--primary);
  font-weight: 600;
}
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.btn-outline {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border: 2px solid var(--primary);
  color: var(--primary);
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.9rem;
  background: transparent;
  transition: var(--transition);
}
.btn-outline:hover {
  background: var(--primary);
  color: #fff;
}
.contact-form-pro {
  background: #fff;
  padding: 32px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(0,0,0,0.04);
}
.contact-form-pro h3 {
  font-size: 1.25rem;
  margin-bottom: 20px;
  color: var(--dark);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-group {
  margin-bottom: 16px;
}
.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--dark);
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  font-size: 0.95rem;
  font-family: inherit;
  transition: var(--transition);
  background: #fafafa;
}
.btn-block {
  width: 100%;
  justify-content: center;
  padding: 14px;
  font-size: 1rem;
}
.form-status {
  margin-top: 12px;
  font-size: 0.9rem;
  text-align: center;
}
.map-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,0.06);
  height: 360px;
}
.map-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Floating button – keep text visible */
.floating-smartboard {
  text-decoration: none !important;
  color: #fff !important;
}
.floating-smartboard:visited,
.floating-smartboard:active,
.floating-smartboard:focus {
  color: #fff !important;
  text-decoration: none !important;
}

/* Pro layouts responsive */
@media (max-width: 992px) {
  .pro-intro { grid-template-columns: 1fr; }
  .pro-cards-3, .pro-cards-4 { grid-template-columns: 1fr 1fr; }
  .level-grid { grid-template-columns: 1fr; }
  .contact-pro { grid-template-columns: 1fr; }
  .event-card-pro { grid-template-columns: 60px 100px 1fr; }
  .news-card-wide { flex-direction: column; }
  .news-card-wide .news-card-img { width: 100%; height: 180px; }
}
@media (max-width: 640px) {
  .pro-cards-3, .pro-cards-4 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .event-card-pro { grid-template-columns: 56px 1fr; }
  .event-card-img { display: none; }
  .contact-form-pro {
    padding: 20px 16px;
  }
  .contact-form-pro h3 {
    font-size: 1.1rem;
  }
}

/* Detail Modal */
.detail-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.detail-modal[hidden] { display: none !important; }
.detail-modal:not([hidden]) { display: flex !important; }
.detail-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 10, 30, 0.75);
  backdrop-filter: blur(6px);
}
.detail-modal-box {
  position: relative;
  background: #fff;
  border-radius: 16px;
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,0.35);
  z-index: 1;
}
.detail-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--gradient-btn-red);
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  z-index: 2;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(192,57,43,0.35);
}
.detail-modal-img {
  width: 100%;
  max-height: 320px;
  overflow: hidden;
  background: #f0f0f5;
}
.detail-modal-img img {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  display: block;
}
.detail-modal-body {
  padding: 28px 28px 32px;
}
.detail-modal-meta {
  display: block;
  font-size: 0.85rem;
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 8px;
}
.detail-modal-body h2 {
  font-size: 1.45rem;
  color: var(--dark);
  margin-bottom: 16px;
  line-height: 1.3;
}
.detail-modal-content {
  font-size: 1rem;
  color: var(--gray);
  line-height: 1.75;
  white-space: pre-wrap;
}
.news-card-pro, .event-card-pro, .notice-item {
  cursor: pointer;
}

/* Extra mobile polish & safe areas */
@supports (padding: max(0px)) {
  .floating-smartboard {
    bottom: max(16px, env(safe-area-inset-bottom));
    right: max(16px, env(safe-area-inset-right));
  }
}

/* Prevent body scroll when mobile menu is open */
body.menu-open {
  overflow: hidden;
}

/* Better focus on mobile */
@media (hover: none) and (pointer: coarse) {
  .card:hover {
    transform: none;
  }
  .btn:hover {
    transform: none;
  }
  .nav-desktop a:hover {
    background: transparent;
  }
}

/* Ensure tables and wide content don't break layout */
table {
  max-width: 100%;
}
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ========== Home: News + Events side-by-side (compact) ========== */
.home-news-events {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.home-news-events .section-header {
  text-align: left;
  margin-bottom: 20px;
}

.home-news-events .section-header h2 {
  font-size: 1.35rem;
}

.home-news-events .section-header h2::after {
  left: 0;
  transform: none;
}

.home-compact-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

/* Ensure at least 2 news rows are visible on home */
#latest-news.home-compact-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
#latest-news .home-compact-item {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.home-compact-item {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 14px;
  align-items: stretch;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: var(--transition);
  border: 1px solid rgba(0,0,0,0.04);
}

.home-compact-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(91,44,111,0.12);
}

.home-compact-item .thumb {
  width: 88px;
  min-height: 88px;
  height: 100%;
  overflow: hidden;
  background: #f0f0f5;
  align-self: stretch;
}

.home-compact-item .thumb img {
  width: 100%;
  height: 100%;
  min-height: 88px;
  object-fit: cover;
  display: block;
}

.home-compact-item .body {
  padding: 10px 12px 10px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.home-compact-item .body h3 {
  font-size: 0.95rem;
  color: var(--primary);
  margin-bottom: 4px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-compact-item .body p {
  font-size: 0.8rem;
  color: var(--gray);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-compact-item .meta {
  font-size: 0.75rem;
  color: var(--secondary);
  margin-top: 4px;
}

@media (max-width: 768px) {
  .home-news-events {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* Featured gallery – layout controlled by body.home-clean .hc-gallery (5×2 = 10) */
@media (max-width: 480px) {
  .home-compact-item {
    grid-template-columns: 72px 1fr;
  }
  .home-compact-item .thumb {
    width: 72px;
    height: 72px;
  }
}

/* =====================================================
   BBSS CLEAN PROFESSIONAL DESIGN + FAST IMAGES
   ===================================================== */

/* Fast images */
img {
  max-width: 100%;
  height: auto;
  display: block;
  background: #eef1f6;
}
.hero-slide {
  background-color: #1a2744;
  background-size: cover;
  background-position: center;
  will-change: opacity;
}
.gallery-item img,
.home-compact-item .thumb img,
.card-img img,
.news-card-img img {
  content-visibility: auto;
}

/* Clipart helpers (no emoji) */
.clip {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.clip-lg { width: 1.4em; height: 1.4em; }
.clip-phone { background-image: url('../assets/cliparts/phone.svg'); }
.clip-email { background-image: url('../assets/cliparts/email.svg'); }
.clip-search { background-image: url('../assets/cliparts/search.svg'); }
.clip-tv { background-image: url('../assets/cliparts/tv.svg'); }
.clip-calendar { background-image: url('../assets/cliparts/calendar.svg'); }
.clip-news { background-image: url('../assets/cliparts/news.svg'); }
.clip-location { background-image: url('../assets/cliparts/location.svg'); }

/* Cleaner header */
.header {
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
}
.header-top {
  font-size: 0.8rem;
}

/* Hero – simple fade, no heavy effects */
.hero {
  height: 600px;
  min-height: 380px;
}
.hero-slide {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.9s ease;
}
.hero-slide.active {
  opacity: 1;
  z-index: 1;
}
.hero-slide::before {
  display: none !important;
  content: none !important;
}
.hero-content {
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.hero-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transition: background 0.25s, width 0.25s;
}
.hero-dot.active {
  background: #F5D76E;
  width: 22px;
  border-radius: 6px;
  box-shadow: none;
  transform: none;
}
.hero-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #F5D76E, #27AE60);
  z-index: 6;
  animation: heroProgress 6s linear infinite;
}
@keyframes heroProgress {
  from { width: 0; }
  to { width: 100%; }
}

/* Soft scroll reveal (lightweight) */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.reveal-child {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.visible .reveal-child,
.reveal-child.visible {
  opacity: 1;
  transform: none;
}

/* Hero entrance on home load */
.hero.hero-animate-in .hero-content,
.hc-hero.hero-animate-in .hero-content {
  animation: heroContentIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero.hero-animate-in .hero-content h2,
.hc-hero.hero-animate-in .hero-content h2 {
  animation: heroContentIn 0.85s 0.08s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero.hero-animate-in .hero-content p,
.hc-hero.hero-animate-in .hero-content p {
  animation: heroContentIn 0.85s 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero.hero-animate-in .hero-buttons,
.hc-hero.hero-animate-in .hero-buttons {
  animation: heroContentIn 0.85s 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes heroContentIn {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}

/* Home cards: gentle hover lift + shadow */
body.home-clean .hc-facility-card,
body.home-clean .home-compact-item,
body.home-clean .gallery-item,
body.home-clean .principal-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
body.home-clean .hc-facility-card:hover,
body.home-clean .home-compact-item:hover {
  transform: translateY(-4px);
}

/* CTA soft glow pulse */
body.home-clean .hc-cta.reveal.visible {
  animation: ctaGlow 2.2s ease-out 1;
}
@keyframes ctaGlow {
  0% { box-shadow: inset 0 0 0 0 rgba(255,255,255,0); }
  40% { box-shadow: inset 0 0 60px 0 rgba(255,255,255,0.08); }
  100% { box-shadow: inset 0 0 0 0 rgba(255,255,255,0); }
}

/* Floating smart board – no distracting pulse */
.floating-smartboard.float-pulse {
  animation: none !important;
}

/* Search bar entrance */
.hc-search-wrap.reveal {
  transform: translateY(-10px);
}
.hc-search-wrap.reveal.visible {
  transform: none;
}

/* Stagger gallery / facility tiles when parent becomes visible */
#featured-gallery .gallery-item.reveal-child,
#home-facilities .hc-facility-card.reveal-child,
#latest-news .home-compact-item.reveal-child,
#upcoming-events .home-compact-item.reveal-child {
  opacity: 0;
  transform: translateY(16px) scale(0.98);
}
#featured-gallery .gallery-item.reveal-child.visible,
#home-facilities .hc-facility-card.reveal-child.visible,
#latest-news .home-compact-item.reveal-child.visible,
#upcoming-events .home-compact-item.reveal-child.visible {
  opacity: 1;
  transform: none;
}

/* Principal card – clean */
.principal-card {
  transition: box-shadow 0.25s ease;
}
.principal-card:hover {
  box-shadow: 0 12px 32px rgba(91,44,111,0.14);
}
.principal-card::before { display: none; }

/* Gallery – simple hover */
.gallery-item {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  transition: box-shadow 0.25s ease;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.gallery-item:hover {
  box-shadow: 0 10px 28px rgba(0,0,0,0.12);
}
.gallery-item:hover img {
  transform: scale(1.05);
}

/* Compact list clean */
.home-compact-item {
  transition: box-shadow 0.2s ease;
}
.home-compact-item:hover {
  box-shadow: 0 6px 20px rgba(91,44,111,0.1);
}
.home-compact-item::after { display: none; }

/* Buttons clean */
.btn-primary::after { display: none; }
/* floating-smartboard base rules defined above */

/* Page banner simple */
.page-banner {
  background: linear-gradient(135deg, #5B2C6F, #1A5276) !important;
  position: relative;
  overflow: hidden;
}
.page-banner::before,
.page-banner::after {
  display: none;
}

/* Footer simple top edge */
.footer::before {
  display: none;
}

/* Search */
.search-box:focus-within {
  box-shadow: 0 4px 20px rgba(91,44,111,0.1);
}

/* Modal simple */
.detail-modal:not([hidden]) .detail-modal-box {
  animation: none;
}

/* Skeleton placeholder while images load */
.img-skeleton {
  background: linear-gradient(90deg, #eef1f6 25%, #e2e6ee 50%, #eef1f6 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-progress { animation: none; width: 100%; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media (max-width: 768px) {
  .hero { height: 360px; }
}
@media (max-width: 480px) {
  .hero { height: 300px; }
}

/* =====================================================
   HOME – PREMIUM PROFESSIONAL (red & green)
   ===================================================== */

body.home-clean {
  --r: #C0392B;
  --rd: #A93226;
  --g: #1E8449;
  --gd: #196F3D;
  --ink: #14141f;
  --muted: #5c6578;
  --bg: #ffffff;
  --soft: #f5f7fb;
  --card: #ffffff;
  --line: #e8ebf2;
  --shadow-sm: 0 2px 8px rgba(20, 20, 31, 0.04);
  --shadow-md: 0 8px 28px rgba(20, 20, 31, 0.08);
  --shadow-lg: 0 16px 48px rgba(20, 20, 31, 0.12);
  background: var(--bg);
  color: var(--ink);
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Hero — taller slider */
body.home-clean .hc-hero {
  height: auto;
  min-height: 380px;
  position: relative;
  overflow: visible;
}
/* No dark overlay covering slider photos */
body.home-clean .hc-hero .hero-slide::before {
  display: none !important;
  content: none !important;
  background: none !important;
}
body.home-clean .hc-hero .hero-slide::after {
  display: none !important;
  content: none !important;
}
body.home-clean .hero-content {
  text-shadow: 0 2px 12px rgba(0,0,0,0.65), 0 1px 3px rgba(0,0,0,0.45);
}
body.home-clean .hero-nav {
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.25);
}
body.home-clean .hero-nav:hover {
  background: var(--r);
  border-color: var(--r);
  color: #fff;
}
body.home-clean .hero-dot {
  background: rgba(255,255,255,0.45);
}
body.home-clean .hero-dot.active {
  background: #fff;
  width: 28px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  transform: none;
}
body.home-clean .hero-progress {
  height: 3px;
  background: linear-gradient(90deg, var(--r), var(--g));
}

/* Search bar — tighter under hero */
body.home-clean .hc-search-wrap {
  padding: 14px 0 8px;
  background: var(--soft);
}
body.home-clean .hc-search-wrap .search-box {
  max-width: 560px;
  margin: 0 auto;
  border-radius: 50px;
  border: 1.5px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s, box-shadow 0.2s;
}
body.home-clean .hc-search-wrap .search-box:focus-within {
  border-color: var(--g);
  box-shadow: 0 0 0 4px rgba(30, 132, 73, 0.12);
}
body.home-clean .hc-search-wrap .search-box input {
  border: none;
  background: transparent;
  padding: 14px 20px 14px 48px;
}

/* Sections — tighter gaps between blocks */
body.home-clean .hc-block {
  padding: 36px 0;
}
body.home-clean .hc-block.hc-alt {
  background: var(--soft);
}

body.home-clean .hc-heading {
  text-align: center;
  margin-bottom: 24px;
}
body.home-clean .hc-heading.left {
  text-align: left;
  margin-bottom: 24px;
}
body.home-clean .hc-heading h2 {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 12px;
  letter-spacing: -0.03em;
  line-height: 1.25;
}
body.home-clean .hc-heading p {
  color: var(--muted);
  margin: 12px 0 0;
  font-size: 1rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
body.home-clean .hc-heading.left p {
  margin-left: 0;
}
body.home-clean .hc-line {
  width: 56px;
  height: 4px;
  background: linear-gradient(90deg, var(--r), var(--g));
  margin: 0 auto;
  border-radius: 4px;
}
body.home-clean .hc-heading.left .hc-line {
  margin: 0;
}
body.home-clean .hc-line.green {
  background: linear-gradient(90deg, var(--g), #27AE60);
}

/* Principal */
body.home-clean .principal-wrap {
  max-width: 960px;
  margin: 0 auto;
  gap: 32px;
  align-items: stretch;
}
body.home-clean .principal-card {
  border-radius: 20px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: box-shadow 0.25s ease;
}
body.home-clean .principal-card:hover {
  box-shadow: var(--shadow-lg);
}
body.home-clean .principal-card-top {
  background: linear-gradient(135deg, var(--r) 0%, var(--rd) 100%) !important;
  padding: 28px 24px 52px !important;
}
body.home-clean .principal-card-top h2 {
  font-size: 1.05rem !important;
  font-weight: 700;
  letter-spacing: 0.02em;
}
body.home-clean .principal-photo {
  width: 220px;
  height: 220px;
  border: 5px solid #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,0.22);
  margin: -56px auto 0;
}
body.home-clean .principal-side {
  background: var(--card);
  border-radius: 20px;
  padding: 32px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  border-top: 4px solid var(--g);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body.home-clean .principal-side h3 {
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
body.home-clean .principal-side p {
  color: var(--muted);
  line-height: 1.7;
  font-size: 1.02rem;
}
body.home-clean .principal-side .btn-primary {
  background: var(--g) !important;
  border-radius: 10px;
  padding: 12px 26px;
  box-shadow: 0 4px 14px rgba(30, 132, 73, 0.3) !important;
  font-weight: 700;
  margin-top: 8px;
}
body.home-clean .principal-side .btn-primary:hover {
  background: var(--gd) !important;
  transform: translateY(-2px);
}

/* Gallery – 2 rows × 5 cols = up to 10 photos */
body.home-clean .hc-gallery.gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 14px;
  width: 100%;
}
body.home-clean .hc-gallery .gallery-item {
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  height: auto;
  min-height: 0;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  margin: 0;
  position: relative;
  grid-column: auto !important;
  grid-row: auto !important;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
body.home-clean .hc-gallery .gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
body.home-clean .hc-gallery .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
body.home-clean .hc-gallery .gallery-item:hover img {
  transform: scale(1.06);
}
body.home-clean .hc-gallery .gallery-item .gallery-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 12px 12px;
  background: linear-gradient(transparent, rgba(20, 20, 31, 0.9));
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 2;
  pointer-events: none;
}
body.home-clean .hc-gallery .gallery-item:hover .gallery-overlay {
  opacity: 1;
  transform: translateY(0);
}
body.home-clean .hc-gallery .gallery-item .gallery-overlay h4 {
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  margin: 0 0 2px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
body.home-clean .hc-gallery .gallery-item .gallery-overlay .gallery-caption {
  color: rgba(255,255,255,0.95);
  font-size: 0.72rem;
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.home-clean .hc-gallery .gallery-item .gallery-overlay span,
body.home-clean .hc-gallery .gallery-item .gallery-overlay .gallery-cat {
  color: rgba(255,255,255,0.8);
  font-size: 0.72rem;
}
body.home-clean .hc-gallery .gallery-item:nth-child(n+11) {
  display: none !important;
}
body.home-clean .hc-center {
  text-align: center;
  margin-top: 32px;
}

/* News / Events */
body.home-clean .hc-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
body.home-clean .home-compact-item {
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  overflow: hidden;
}
body.home-clean .home-compact-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
body.home-clean .home-compact-item .body h3 {
  font-weight: 700;
  color: var(--ink);
}
body.home-clean .hc-text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-weight: 700;
  font-size: 0.95rem;
  transition: gap 0.2s ease;
}
body.home-clean .hc-text-link:hover {
  gap: 10px;
  text-decoration: none;
}
body.home-clean .hc-text-link.red { color: var(--r); }
body.home-clean .hc-text-link.green { color: var(--g); }

/* Buttons */
body.home-clean .hc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 30px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
  border: 2px solid transparent;
  letter-spacing: 0.01em;
}
body.home-clean .hc-btn:hover {
  transform: translateY(-2px);
}
body.home-clean .hc-btn-green {
  background: var(--g);
  color: #fff;
  box-shadow: 0 4px 16px rgba(30, 132, 73, 0.28);
}
body.home-clean .hc-btn-green:hover {
  background: var(--gd);
  color: #fff;
  box-shadow: 0 6px 20px rgba(30, 132, 73, 0.35);
}
body.home-clean .hc-btn-white {
  background: #fff;
  color: var(--r);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
body.home-clean .hc-btn-white:hover {
  background: #fff;
  color: var(--rd);
  box-shadow: 0 6px 22px rgba(0,0,0,0.16);
}
body.home-clean .hc-btn-outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.65);
}
body.home-clean .hc-btn-outline:hover {
  background: #fff;
  color: var(--g);
  border-color: #fff;
}

/* CTA band */
body.home-clean .hc-cta {
  background: linear-gradient(120deg, var(--r) 0%, var(--rd) 35%, var(--gd) 100%);
  color: #fff;
  text-align: center;
  padding: 72px 24px;
  position: relative;
  overflow: hidden;
}
body.home-clean .hc-cta::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  pointer-events: none;
}
body.home-clean .hc-cta::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -5%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  pointer-events: none;
}
body.home-clean .hc-cta h2 {
  color: #fff;
  font-size: 2rem;
  font-weight: 800;
  margin: 0 0 14px;
  letter-spacing: -0.03em;
  position: relative;
  z-index: 1;
}
body.home-clean .hc-cta p {
  margin: 0 auto 28px;
  max-width: 520px;
  opacity: 0.95;
  font-size: 1.08rem;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}
body.home-clean .hc-cta-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

body.home-clean .footer {
  margin-top: 0;
  color: #ffffff !important;
}
body.home-clean .footer p,
body.home-clean .footer a,
body.home-clean .footer-bottom {
  color: rgba(255, 255, 255, 0.9) !important;
}
body.home-clean .footer h4 {
  color: #F5D76E !important;
}
body.home-clean .footer-brand h3 {
  color: #ffffff !important;
}
body.home-clean .footer a:hover {
  color: #F5D76E !important;
}

/* Responsive */
@media (max-width: 900px) {
  body.home-clean .hc-hero { height: 480px; min-height: 360px; }
  body.home-clean .hc-block { padding: 32px 0; }
  body.home-clean .hc-two { grid-template-columns: 1fr; gap: 28px; }
  /* Mobile/tablet gallery: 2 columns — large clear photos (not tiny 5-col) */
  body.home-clean .hc-gallery.gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 12px;
  }
  body.home-clean .principal-wrap {
    grid-template-columns: 1fr;
    max-width: 440px;
  }
  body.home-clean .hc-heading h2 { font-size: 1.55rem; }
  body.home-clean .hc-cta h2 { font-size: 1.65rem; }
}

@media (max-width: 640px) {
  body.home-clean .hc-gallery.gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  body.home-clean .hc-gallery .gallery-item {
    border-radius: 12px;
  }
}

@media (max-width: 520px) {
  body.home-clean .hc-hero { height: 360px; min-height: 300px; }
  body.home-clean .hc-block { padding: 28px 0; }
  body.home-clean .hc-search-wrap { padding: 12px 0 6px; }
  body.home-clean .hc-heading h2 { font-size: 1.4rem; }
  body.home-clean .hc-gallery.gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 10px;
  }
  body.home-clean .hc-cta { padding: 48px 16px; }
  body.home-clean .hc-cta h2 { font-size: 1.45rem; }
  body.home-clean .hc-btn { padding: 12px 22px; font-size: 0.9rem; }
}


/* =====================================================
   HOME MODERN – matches purple professional layout
   ===================================================== */

body.home-modern {
  --hm-purple: #6B2D9B;
  --hm-purple-dark: #4A1D6E;
  --hm-purple-deep: #3D1560;
  --hm-violet: #7C3AED;
  --hm-gold: #E8B923;
  --hm-gold-dark: #C99A12;
  --hm-ink: #1a1a2e;
  --hm-muted: #6b7280;
  --hm-soft: #f8f7fc;
  --hm-white: #ffffff;
  --hm-line: #ebe8f4;
  background: var(--hm-white);
  color: var(--hm-ink);
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

body.home-modern .container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
.hm-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hm-line);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.hm-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  gap: 12px;
  flex-wrap: nowrap;
}
.hm-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--hm-ink);
  flex-shrink: 0;
}
.hm-logo img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.hm-logo strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--hm-purple);
}
.hm-logo span {
  display: block;
  font-size: 0.72rem;
  color: var(--hm-muted);
}
.hm-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}
.hm-nav a {
  padding: 8px 12px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--hm-ink);
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.hm-nav a:hover {
  background: rgba(107, 45, 155, 0.08);
  color: var(--hm-purple);
}
.hm-nav a.active {
  color: var(--hm-purple);
  font-weight: 700;
  position: relative;
}
.hm-nav a.active::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  background: var(--hm-purple);
  border-radius: 2px;
}
.hm-nav-cta {
  background: linear-gradient(135deg, var(--hm-purple), var(--hm-violet)) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 50px !important;
  padding: 8px 16px !important;
}
.hm-nav-cta:hover {
  opacity: 0.92;
}
.hm-nav-cta.active::after { display: none; }
.hm-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.hm-hamburger span {
  display: block;
  width: 24px;
  height: 2.5px;
  background: var(--hm-purple);
  border-radius: 2px;
}

/* Mobile menu */
.hm-mobile-menu {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s, visibility 0.3s;
}
.hm-mobile-menu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.hm-mobile-menu-content {
  position: absolute;
  top: 0;
  right: 0;
  width: min(300px, 85%);
  height: 100%;
  background: #fff;
  padding: 20px;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
}
.hm-mobile-menu.open .hm-mobile-menu-content {
  transform: translateX(0);
}
.hm-mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.hm-close-menu {
  background: none;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  color: var(--hm-purple);
}
.hm-mobile-nav a {
  display: block;
  padding: 12px 14px;
  font-weight: 500;
  border-radius: 8px;
  text-decoration: none;
  color: var(--hm-ink);
  margin-bottom: 4px;
}
.hm-mobile-nav a:hover {
  background: var(--hm-purple);
  color: #fff;
}

/* Hero */
.hm-hero {
  position: relative;
  background: linear-gradient(135deg, #3D1560 0%, #6B2D9B 45%, #8B5CF6 100%);
  min-height: 480px;
  padding: 80px 0 100px;
  overflow: visible;
}
.hm-hero-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  color: #fff;
}
.hm-hero-content h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 14px;
  letter-spacing: -0.03em;
  color: #fff;
}
.hm-hero-content p {
  font-size: 1.1rem;
  opacity: 0.92;
  margin: 0 0 28px;
  color: rgba(255,255,255,0.92);
}
.hm-hero-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hm-hero-nav {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.hm-hero-nav:hover { background: rgba(255,255,255,0.3); }
.hm-hero-nav.prev { left: 16px; }
.hm-hero-nav.next { right: 16px; }

/* Stats cards */
.hm-stats-wrap {
  position: relative;
  z-index: 10;
  margin-top: -60px;
}
.hm-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.hm-stat {
  background: linear-gradient(160deg, #7C3AED, #5B21B6);
  color: #fff;
  border-radius: 16px;
  padding: 24px 18px;
  text-align: center;
  box-shadow: 0 12px 32px rgba(91, 33, 182, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hm-stat:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(91, 33, 182, 0.4);
}
.hm-stat-icon {
  display: block;
  font-size: 1.5rem;
  margin-bottom: 8px;
  opacity: 0.95;
}
.hm-stat strong {
  display: block;
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 4px;
}
.hm-stat span {
  font-size: 0.88rem;
  opacity: 0.9;
}

/* Buttons */
.hm-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
  border: 2px solid transparent;
}
.hm-btn:hover { transform: translateY(-2px); }
.hm-btn-gold {
  background: var(--hm-gold);
  color: #1a1a2e;
  box-shadow: 0 4px 16px rgba(232, 185, 35, 0.4);
}
.hm-btn-gold:hover {
  background: var(--hm-gold-dark);
  color: #1a1a2e;
}
.hm-btn-ghost {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border-color: rgba(255,255,255,0.5);
}
.hm-btn-ghost:hover {
  background: #fff;
  color: var(--hm-purple);
}
.hm-btn-purple {
  background: var(--hm-purple);
  color: #fff;
  box-shadow: 0 4px 16px rgba(107, 45, 155, 0.3);
}
.hm-btn-purple:hover {
  background: var(--hm-purple-dark);
  color: #fff;
}

/* Sections */
.hm-section {
  padding: 72px 0 64px;
}
.hm-about-section { background: var(--hm-soft); }
.hm-events-section { background: var(--hm-soft); }

.hm-label {
  display: inline-block;
  background: #f0ebf8;
  color: var(--hm-purple);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 50px;
  margin-bottom: 12px;
  text-align: center;
}
.hm-label.left { text-align: left; }
.hm-title {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  color: var(--hm-ink);
  margin: 0 0 12px;
  letter-spacing: -0.03em;
  text-align: center;
}
.hm-title.left { text-align: left; }
.hm-subtitle {
  text-align: center;
  color: var(--hm-muted);
  max-width: 560px;
  margin: 0 auto 40px;
  line-height: 1.65;
  font-size: 1.02rem;
}
.hm-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32px;
  gap: 16px;
  flex-wrap: wrap;
}
.hm-link-all {
  font-weight: 700;
  color: var(--hm-purple);
  text-decoration: none;
  font-size: 0.95rem;
}
.hm-link-all:hover { text-decoration: underline; }

/* Features */
.hm-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.hm-feature {
  background: #fff;
  border: 1px solid var(--hm-line);
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  transition: transform 0.25s, box-shadow 0.25s;
}
.hm-feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(107, 45, 155, 0.12);
}
.hm-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 16px;
}
.hm-feature-icon.purple { background: #ede9fe; }
.hm-feature-icon.blue { background: #dbeafe; }
.hm-feature-icon.green { background: #d1fae5; }
.hm-feature-icon.pink { background: #fce7f3; }
.hm-feature-icon.orange { background: #ffedd5; }
.hm-feature-icon.violet { background: #e0e7ff; }
.hm-feature h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--hm-ink);
}
.hm-feature p {
  font-size: 0.92rem;
  color: var(--hm-muted);
  line-height: 1.6;
  margin: 0;
}

/* About + Principal */
.hm-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.hm-about-text p {
  color: var(--hm-muted);
  line-height: 1.7;
  margin: 0 0 24px;
  font-size: 1.02rem;
}
.hm-principal-card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(107, 45, 155, 0.12);
  border: 1px solid var(--hm-line);
}
.hm-principal-bar {
  height: 72px;
  background: linear-gradient(90deg, #7C3AED, #3B82F6);
}
.hm-principal-body {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
  margin-top: -28px;
  position: relative;
  z-index: 1;
}
.hm-principal-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7C3AED, #5B21B6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.hm-principal-body strong {
  display: block;
  font-size: 1.05rem;
  color: var(--hm-ink);
}
.hm-principal-body span {
  font-size: 0.85rem;
  color: var(--hm-muted);
}
.hm-principal-msg {
  padding: 18px 24px 28px;
  color: var(--hm-muted);
  line-height: 1.7;
  font-size: 0.95rem;
  margin: 0;
}

/* News */
.hm-news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.hm-news-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--hm-line);
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  transition: transform 0.25s, box-shadow 0.25s;
  cursor: pointer;
}
.hm-news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.1);
}
.hm-news-banner {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
}
.hm-news-banner.cyan { background: linear-gradient(135deg, #22d3ee, #06b6d4); }
.hm-news-banner.mint { background: linear-gradient(135deg, #34d399, #10b981); }
.hm-news-banner.violet { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.hm-news-body {
  padding: 18px 20px 22px;
}
.hm-news-body time {
  font-size: 0.8rem;
  color: var(--hm-muted);
}
.hm-news-body h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 8px 0;
  color: var(--hm-ink);
  line-height: 1.35;
}
.hm-news-body p {
  font-size: 0.9rem;
  color: var(--hm-muted);
  line-height: 1.55;
  margin: 0;
}

/* Events */
.hm-events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.hm-event-card {
  display: flex;
  gap: 0;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--hm-line);
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s, transform 0.2s;
  cursor: pointer;
}
.hm-event-card:hover {
  box-shadow: 0 10px 28px rgba(107, 45, 155, 0.12);
  transform: translateY(-2px);
}
.hm-event-date {
  background: linear-gradient(160deg, #7C3AED, #5B21B6);
  color: #fff;
  padding: 16px 14px;
  text-align: center;
  min-width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hm-event-date strong {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}
.hm-event-date span {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.9;
  margin-top: 2px;
}
.hm-event-info {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hm-event-info h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--hm-ink);
}
.hm-event-info p {
  font-size: 0.85rem;
  color: var(--hm-muted);
  margin: 0;
}

/* Gallery 2 rows × 5 = 10 */
.hm-gallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 12px;
}
.hm-gallery .gallery-item,
.hm-gallery > * {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
.hm-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.hm-gallery .gallery-item:hover img,
.hm-gallery > *:hover img {
  transform: scale(1.05);
}
.hm-gallery .gallery-item:nth-child(n+11),
.hm-gallery > *:nth-child(n+11) {
  display: none !important;
}

/* CTA */
.hm-cta {
  background: linear-gradient(120deg, #6B2D9B 0%, #5B21B6 50%, #3B82F6 100%);
  color: #fff;
  text-align: center;
  padding: 64px 20px;
  margin: 0 20px 0;
  border-radius: 24px;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
}
.hm-cta h2 {
  font-size: 2rem;
  font-weight: 800;
  margin: 0 0 12px;
  color: #fff;
}
.hm-cta p {
  max-width: 520px;
  margin: 0 auto 20px;
  opacity: 0.95;
  line-height: 1.6;
  font-size: 1.05rem;
}
.hm-cta-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  justify-content: center;
  margin-bottom: 28px;
  font-size: 0.95rem;
  opacity: 0.95;
}

/* Footer */
.hm-footer {
  background: linear-gradient(160deg, #5B21B6 0%, #6B2D9B 50%, #7C3AED 100%);
  color: #fff;
  padding: 56px 0 0;
  margin-top: 48px;
}
.hm-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 36px;
}
.hm-footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.hm-footer-logo img {
  width: 42px;
  height: 42px;
}
.hm-footer-logo strong {
  font-size: 1rem;
  color: #fff;
}
.hm-footer-brand p {
  font-size: 0.9rem;
  opacity: 0.9;
  margin-bottom: 6px;
  color: rgba(255,255,255,0.9);
}
.hm-footer h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #F5D76E !important;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hm-footer-links a {
  display: block;
  padding: 4px 0;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.9) !important;
  text-decoration: none;
}
.hm-footer-links a:hover {
  color: #F5D76E !important;
}
.hm-footer p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.9);
  margin-bottom: 10px;
  line-height: 1.5;
}
.hm-social {
  display: flex;
  gap: 10px;
  margin: 12px 0;
}
.hm-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-decoration: none;
}
.hm-social a:hover {
  background: #F5D76E;
  color: #1a1a2e !important;
}
.hm-footer-note {
  font-size: 0.82rem !important;
  opacity: 0.85;
  margin-top: 12px;
}
.hm-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85) !important;
}

/* Responsive */
@media (max-width: 992px) {
  .hm-nav { display: none; }
  .hm-hamburger { display: flex !important; }
  .hm-header-actions { display: flex !important; }
  .hm-theme-toggle { display: inline-flex !important; }
  .hm-stats { grid-template-columns: repeat(2, 1fr); }
  .hm-features { grid-template-columns: repeat(2, 1fr); }
  .hm-about-grid { grid-template-columns: 1fr; }
  .hm-news-grid { grid-template-columns: 1fr 1fr; }
  .hm-events-grid { grid-template-columns: 1fr; }
  .hm-footer-grid { grid-template-columns: 1fr 1fr; }
  .hm-gallery { grid-template-columns: repeat(5, 1fr); gap: 8px; }
}
@media (max-width: 640px) {
  .hm-hero { padding: 56px 0 80px; min-height: 380px; }
  .hm-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hm-stat { padding: 18px 12px; }
  .hm-stat strong { font-size: 1.3rem; }
  .hm-features { grid-template-columns: 1fr; }
  .hm-news-grid { grid-template-columns: 1fr; }
  .hm-gallery { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .hm-footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .hm-cta { margin: 0 12px; border-radius: 18px; padding: 48px 16px; }
  .hm-cta h2 { font-size: 1.5rem; }
  .hm-section { padding: 48px 0 40px; }
}


/* =====================================================
   Admin button · Theme toggle · Dark mode · Unique hero
   ===================================================== */

.hm-header-actions {
  display: flex !important;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
  z-index: 20;
}

/* Admin in nav – always visible */
.hm-admin-link {
  background: linear-gradient(135deg, #C0392B, #E74C3C) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
  padding: 8px 16px !important;
  font-size: 0.85rem !important;
  box-shadow: 0 2px 10px rgba(192, 57, 43, 0.35);
}
.hm-admin-link:hover {
  opacity: 0.92;
  color: #fff !important;
}
.hm-admin-link.active::after { display: none !important; }

/* Theme toggle – high contrast, always visible */
.hm-theme-toggle {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  border: 2px solid #7C3AED !important;
  background: #7C3AED !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.4) !important;
  color: #fff !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 30 !important;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.hm-theme-toggle:hover {
  background: #6D28D9 !important;
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.5) !important;
}
.hm-theme-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s, transform 0.2s;
  font-size: 1.35rem;
  line-height: 1;
  color: #fff !important;
  pointer-events: none;
}
.hm-theme-sun {
  opacity: 1;
}
.hm-theme-moon {
  opacity: 0;
}

html[data-theme="dark"] .hm-theme-sun,
body.theme-dark .hm-theme-sun {
  opacity: 0;
}
html[data-theme="dark"] .hm-theme-moon,
body.theme-dark .hm-theme-moon {
  opacity: 1;
}
html[data-theme="dark"] .hm-theme-toggle,
body.theme-dark .hm-theme-toggle {
  background: #F5D76E !important;
  border-color: #F5D76E !important;
  color: #1a1a2e !important;
  box-shadow: 0 4px 14px rgba(245, 215, 110, 0.45) !important;
}
html[data-theme="dark"] .hm-theme-icon,
body.theme-dark .hm-theme-icon {
  color: #1a1a2e !important;
}

/* Unique hero background */
body.home-modern .hm-hero {
  background:
    radial-gradient(ellipse 80% 60% at 10% 20%, rgba(139, 92, 246, 0.45) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 90% 80%, rgba(59, 130, 246, 0.35) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 50% 0%, rgba(236, 72, 153, 0.2) 0%, transparent 45%),
    linear-gradient(145deg, #2e1065 0%, #4c1d95 35%, #6d28d9 70%, #5b21b6 100%);
  position: relative;
  overflow: hidden;
}
body.home-modern .hm-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.06) 0%, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.05) 0%, transparent 2px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,0.04) 0%, transparent 2px);
  background-size: 48px 48px, 64px 64px, 40px 40px;
  pointer-events: none;
  z-index: 0;
}
body.home-modern .hm-hero::after {
  content: '';
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  top: -120px;
  right: -80px;
  pointer-events: none;
  z-index: 0;
}
body.home-modern .hm-hero-slides,
body.home-modern .hm-hero-content,
body.home-modern .hm-hero-nav,
body.home-modern .hm-stats-wrap {
  position: relative;
  z-index: 1;
}

/* Stats – linked to admin (visible ids) */
.hm-stat strong {
  letter-spacing: -0.02em;
}

/* ---------- DARK THEME ---------- */
html[data-theme="dark"] body.home-modern,
body.home-modern.theme-dark {
  --hm-ink: #f3f0ff;
  --hm-muted: #a89bc4;
  --hm-soft: #1a1228;
  --hm-white: #120c1c;
  --hm-line: #2d2240;
  background: #120c1c;
  color: #f3f0ff;
}

html[data-theme="dark"] .hm-header,
body.theme-dark .hm-header {
  background: rgba(18, 12, 28, 0.92);
  border-bottom-color: #2d2240;
}
html[data-theme="dark"] .hm-logo strong,
body.theme-dark .hm-logo strong {
  color: #c4b5fd;
}
html[data-theme="dark"] .hm-logo span,
body.theme-dark .hm-logo span {
  color: #a89bc4;
}
html[data-theme="dark"] .hm-nav a,
body.theme-dark .hm-nav a {
  color: #e9e4f5;
}
html[data-theme="dark"] .hm-nav a:hover,
body.theme-dark .hm-nav a:hover {
  background: rgba(124, 58, 237, 0.2);
  color: #c4b5fd;
}
html[data-theme="dark"] .hm-nav a.active,
body.theme-dark .hm-nav a.active {
  color: #c4b5fd;
}

html[data-theme="dark"] .hm-section,
body.theme-dark .hm-section {
  background: transparent;
}
html[data-theme="dark"] .hm-about-section,
html[data-theme="dark"] .hm-events-section,
body.theme-dark .hm-about-section,
body.theme-dark .hm-events-section {
  background: #1a1228;
}

html[data-theme="dark"] .hm-title,
body.theme-dark .hm-title {
  color: #f3f0ff;
}
html[data-theme="dark"] .hm-subtitle,
html[data-theme="dark"] .hm-feature p,
html[data-theme="dark"] .hm-about-text p,
html[data-theme="dark"] .hm-principal-msg,
html[data-theme="dark"] .hm-news-body p,
html[data-theme="dark"] .hm-news-body time,
html[data-theme="dark"] .hm-event-info p,
body.theme-dark .hm-subtitle,
body.theme-dark .hm-feature p,
body.theme-dark .hm-about-text p,
body.theme-dark .hm-principal-msg,
body.theme-dark .hm-news-body p,
body.theme-dark .hm-news-body time,
body.theme-dark .hm-event-info p {
  color: #a89bc4;
}

html[data-theme="dark"] .hm-feature,
html[data-theme="dark"] .hm-principal-card,
html[data-theme="dark"] .hm-news-card,
html[data-theme="dark"] .hm-event-card,
body.theme-dark .hm-feature,
body.theme-dark .hm-principal-card,
body.theme-dark .hm-news-card,
body.theme-dark .hm-event-card {
  background: #1e1530;
  border-color: #2d2240;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

html[data-theme="dark"] .hm-feature h3,
html[data-theme="dark"] .hm-news-body h3,
html[data-theme="dark"] .hm-event-info h3,
html[data-theme="dark"] .hm-principal-body strong,
body.theme-dark .hm-feature h3,
body.theme-dark .hm-news-body h3,
body.theme-dark .hm-event-info h3,
body.theme-dark .hm-principal-body strong {
  color: #f3f0ff;
}

html[data-theme="dark"] .hm-label,
body.theme-dark .hm-label {
  background: rgba(124, 58, 237, 0.25);
  color: #c4b5fd;
}

html[data-theme="dark"] .hm-link-all,
body.theme-dark .hm-link-all {
  color: #c4b5fd;
}

html[data-theme="dark"] .hm-mobile-menu-content,
body.theme-dark .hm-mobile-menu-content {
  background: #1a1228;
  color: #f3f0ff;
}
html[data-theme="dark"] .hm-mobile-nav a,
body.theme-dark .hm-mobile-nav a {
  color: #e9e4f5;
}
html[data-theme="dark"] .hm-hamburger span,
body.theme-dark .hm-hamburger span {
  background: #c4b5fd;
}

/* Footer text stays light on purple in both themes */
html[data-theme="dark"] .hm-footer,
body.theme-dark .hm-footer {
  color: #fff;
}
html[data-theme="dark"] .hm-footer a,
html[data-theme="dark"] .hm-footer p,
html[data-theme="dark"] .hm-footer-bottom,
body.theme-dark .hm-footer a,
body.theme-dark .hm-footer p,
body.theme-dark .hm-footer-bottom {
  color: rgba(255,255,255,0.9) !important;
}
html[data-theme="dark"] .hm-footer h4,
body.theme-dark .hm-footer h4 {
  color: #F5D76E !important;
}

/* Always-visible Admin chip next to theme toggle */
.hm-admin-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 50px;
  background: linear-gradient(135deg, #C0392B, #E74C3C);
  color: #fff !important;
  font-weight: 700;
  font-size: 0.82rem;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(192, 57, 43, 0.35);
  white-space: nowrap;
}
.hm-admin-btn:hover {
  opacity: 0.92;
  color: #fff !important;
}
@media (min-width: 993px) {
  /* Desktop already has Admin in nav – hide duplicate chip if desired; keep both for visibility */
  .hm-admin-btn { display: inline-flex; }
}


/* =====================================================
   Theme toggle + Dark mode for original home-clean theme
   ===================================================== */

/* old circular theme-toggle removed — see unified slider at end */


/* Make Admin stand out in original nav */
.nav-desktop a.admin-link,
.mobile-nav a[href*="admin"] {
  background: linear-gradient(135deg, #C0392B, #E74C3C) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
  padding: 8px 14px !important;
}
.nav-desktop a.admin-link:hover {
  opacity: 0.92;
  color: #fff !important;
}

/* ---- Dark theme for original site ---- */
html[data-theme="dark"] body,
body.theme-dark {
  background: #12101a !important;
  color: #eae6f5 !important;
}

html[data-theme="dark"] .header,
body.theme-dark .header {
  background: #1a1528 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) !important;
}

html[data-theme="dark"] .header-top {
  /* keep gradient */
}

html[data-theme="dark"] .logo-text h1,
body.theme-dark .logo-text h1 {
  color: #c4b5fd !important;
}
html[data-theme="dark"] .logo-text span,
body.theme-dark .logo-text span {
  color: #a89bc4 !important;
}

html[data-theme="dark"] .nav-desktop a,
body.theme-dark .nav-desktop a {
  color: #eae6f5 !important;
}
html[data-theme="dark"] .nav-desktop a:hover,
html[data-theme="dark"] .nav-desktop a.active,
body.theme-dark .nav-desktop a:hover,
body.theme-dark .nav-desktop a.active {
  background: rgba(124, 58, 237, 0.2) !important;
  color: #c4b5fd !important;
}

html[data-theme="dark"] body.home-clean,
body.home-clean.theme-dark {
  --ink: #eae6f5;
  --muted: #a89bc4;
  --bg: #12101a;
  --soft: #1a1528;
  background: #12101a !important;
  color: #eae6f5 !important;
}

html[data-theme="dark"] body.home-clean .hc-block.hc-alt,
body.home-clean.theme-dark .hc-block.hc-alt,
html[data-theme="dark"] body.home-clean .hc-search-wrap,
body.home-clean.theme-dark .hc-search-wrap {
  background: #1a1528 !important;
}

html[data-theme="dark"] body.home-clean .hc-heading h2,
body.home-clean.theme-dark .hc-heading h2 {
  color: #eae6f5 !important;
}
html[data-theme="dark"] body.home-clean .hc-heading p,
body.home-clean.theme-dark .hc-heading p {
  color: #a89bc4 !important;
}

html[data-theme="dark"] body.home-clean .principal-card,
html[data-theme="dark"] body.home-clean .principal-side,
html[data-theme="dark"] body.home-clean .home-compact-item,
html[data-theme="dark"] .card,
html[data-theme="dark"] .notice-item,
html[data-theme="dark"] .news-card-pro,
html[data-theme="dark"] .event-card-pro,
body.theme-dark .principal-card,
body.theme-dark .principal-side,
body.theme-dark .home-compact-item,
body.theme-dark .card,
body.theme-dark .notice-item,
body.theme-dark .news-card-pro,
body.theme-dark .event-card-pro {
  background: #1e1830 !important;
  border-color: #2d2640 !important;
  color: #eae6f5 !important;
}

html[data-theme="dark"] body.home-clean .principal-side h3,
html[data-theme="dark"] .principal-card-body h3,
html[data-theme="dark"] .home-compact-item .body h3,
body.theme-dark .principal-side h3,
body.theme-dark .principal-card-body h3,
body.theme-dark .home-compact-item .body h3 {
  color: #eae6f5 !important;
}

html[data-theme="dark"] body.home-clean .principal-side p,
html[data-theme="dark"] .principal-card-body .message,
html[data-theme="dark"] .home-compact-item .body p,
body.theme-dark .principal-side p,
body.theme-dark .principal-card-body .message,
body.theme-dark .home-compact-item .body p {
  color: #a89bc4 !important;
}

html[data-theme="dark"] .search-box,
html[data-theme="dark"] body.home-clean .hc-search-wrap .search-box,
body.theme-dark .search-box {
  background: #1e1830 !important;
  border-color: #2d2640 !important;
}
html[data-theme="dark"] .search-box input,
body.theme-dark .search-box input {
  background: transparent !important;
  color: #eae6f5 !important;
}

html[data-theme="dark"] .mobile-menu-content,
body.theme-dark .mobile-menu-content {
  background: #1a1528 !important;
  color: #eae6f5 !important;
}
html[data-theme="dark"] .mobile-nav a,
body.theme-dark .mobile-nav a {
  color: #eae6f5 !important;
}
html[data-theme="dark"] .hamburger span,
body.theme-dark .hamburger span {
  background: #c4b5fd !important;
}

/* Footer stays readable on dark purple */
html[data-theme="dark"] .footer,
body.theme-dark .footer {
  color: #fff !important;
}
html[data-theme="dark"] .footer a,
html[data-theme="dark"] .footer p,
html[data-theme="dark"] .footer-bottom,
body.theme-dark .footer a,
body.theme-dark .footer p,
body.theme-dark .footer-bottom {
  color: rgba(255,255,255,0.9) !important;
}
html[data-theme="dark"] .footer h4,
body.theme-dark .footer h4 {
  color: #F5D76E !important;
}


/* =====================================================
   Home layout: facilities + principal · unique frames
   Theme toggle fix (light fully restores)
   ===================================================== */

/* Facilities + Principal two columns */
body.home-clean .hc-facilities-principal {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 36px;
  align-items: start;
}
body.home-clean .hc-sub {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink, #1c1c28);
  margin: 0 0 8px;
}
body.home-clean .hc-facilities-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
body.home-clean .hc-facility-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 18px 16px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
  transition: transform 0.2s, box-shadow 0.2s;
  display: block;
}
body.home-clean .hc-facility-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(30, 132, 73, 0.12);
}
body.home-clean .hc-fac-icon {
  font-size: 1.5rem;
  margin-bottom: 8px;
}
body.home-clean .hc-facility-card h4 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--ink, #1c1c28);
}
body.home-clean .hc-facility-card p {
  font-size: 0.85rem;
  color: var(--muted, #667085);
  margin: 0;
  line-height: 1.45;
}
body.home-clean .hc-principal-col .principal-wrap {
  max-width: 100%;
  grid-template-columns: 1fr;
  gap: 0;
}
body.home-clean .hc-principal-col .principal-side {
  display: none; /* keep single card in side column */
}

/* Unique photo frames for home gallery */
body.home-clean .hc-gallery.gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 14px;
  width: 100%;
}
body.home-clean .hc-gallery .gallery-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin: 0;
  padding: 0;
  cursor: pointer;
  grid-column: auto !important;
  grid-row: auto !important;
  /* unique multi-color frame */
  border: 3px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #C0392B, #1E8449, #1A5276, #5B2C6F) border-box;
  box-shadow:
    0 6px 20px rgba(91, 44, 111, 0.12),
    inset 0 0 0 1px rgba(255,255,255,0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
body.home-clean .hc-gallery .gallery-item:nth-child(5n+1) {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #C0392B, #E74C3C) border-box;
}
body.home-clean .hc-gallery .gallery-item:nth-child(5n+2) {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #1E8449, #27AE60) border-box;
}
body.home-clean .hc-gallery .gallery-item:nth-child(5n+3) {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #1A5276, #2980B9) border-box;
}
body.home-clean .hc-gallery .gallery-item:nth-child(5n+4) {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #5B2C6F, #7D3C98) border-box;
}
body.home-clean .hc-gallery .gallery-item:nth-child(5n+5) {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #D4AF37, #C0392B) border-box;
}
body.home-clean .hc-gallery .gallery-item::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px;
  pointer-events: none;
  z-index: 2;
}
body.home-clean .hc-gallery .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  transition: transform 0.4s ease;
}
body.home-clean .hc-gallery .gallery-item:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 14px 36px rgba(91, 44, 111, 0.2);
}
body.home-clean .hc-gallery .gallery-item:hover img {
  transform: scale(1.06);
}
body.home-clean .hc-gallery .gallery-item:nth-child(n+11) {
  display: none !important;
}

/* Light theme must fully clear dark overrides */
html[data-theme="light"] body,
html:not([data-theme="dark"]) body:not(.theme-dark) {
  background: #ffffff;
  color: #1c1c28;
}
html[data-theme="light"] .header,
html:not([data-theme="dark"]) body:not(.theme-dark) .header {
  background: #ffffff !important;
}
html[data-theme="light"] .logo-text h1,
html:not([data-theme="dark"]) body:not(.theme-dark) .logo-text h1 {
  color: #5B2C6F !important;
}
html[data-theme="light"] .nav-desktop a,
html:not([data-theme="dark"]) body:not(.theme-dark) .nav-desktop a {
  color: #1A1A2E !important;
}
html[data-theme="light"] body.home-clean,
html:not([data-theme="dark"]) body.home-clean:not(.theme-dark) {
  background: #ffffff !important;
  color: #1c1c28 !important;
}
html[data-theme="light"] body.home-clean .hc-block.hc-alt,
html[data-theme="light"] body.home-clean .hc-search-wrap,
html:not([data-theme="dark"]) body.home-clean:not(.theme-dark) .hc-block.hc-alt,
html:not([data-theme="dark"]) body.home-clean:not(.theme-dark) .hc-search-wrap {
  background: #f7f8fa !important;
}
html[data-theme="light"] body.home-clean .hc-heading h2,
html[data-theme="light"] body.home-clean .hc-sub,
html:not([data-theme="dark"]) body.home-clean:not(.theme-dark) .hc-heading h2 {
  color: #1c1c28 !important;
}
html[data-theme="light"] body.home-clean .hc-facility-card,
html:not([data-theme="dark"]) body.home-clean:not(.theme-dark) .hc-facility-card {
  background: #fff !important;
  border-color: #eee !important;
}

/* Dark facilities cards */
html[data-theme="dark"] body.home-clean .hc-facility-card,
body.theme-dark .hc-facility-card {
  background: #1e1830 !important;
  border-color: #2d2640 !important;
}
html[data-theme="dark"] body.home-clean .hc-facility-card h4,
body.theme-dark .hc-facility-card h4 {
  color: #eae6f5 !important;
}
html[data-theme="dark"] body.home-clean .hc-facility-card p,
body.theme-dark .hc-facility-card p {
  color: #a89bc4 !important;
}
html[data-theme="dark"] body.home-clean .hc-sub,
body.theme-dark .hc-sub {
  color: #eae6f5 !important;
}

@media (max-width: 900px) {
  body.home-clean .hc-facilities-principal {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  body.home-clean .hc-facilities-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  body.home-clean .hc-facilities-grid {
    grid-template-columns: 1fr;
  }
  /* Mobile facilities: full-width large photo cards */
  body.home-clean .hc-facility-card-photo .hc-fac-photo {
    aspect-ratio: 16 / 10;
  }
}
@media (max-width: 520px) {
  body.home-clean .hc-facilities-grid {
    grid-template-columns: 1fr;
  }
  body.home-clean .hc-gallery.gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}


/* Theme toggle – force working light/dark on html + body */
html.theme-dark,
html[data-theme="dark"] {
  color-scheme: dark;
}
html[data-theme="light"],
html:not(.theme-dark):not([data-theme="dark"]) {
  color-scheme: light;
}

html[data-theme="dark"] body,
html.theme-dark body,
body.theme-dark {
  background: #12101a !important;
  color: #eae6f5 !important;
}

html[data-theme="light"] body,
html:not([data-theme="dark"]):not(.theme-dark) body:not(.theme-dark) {
  background: #ffffff !important;
  color: #1c1c28 !important;
}

html[data-theme="light"] .header,
html:not([data-theme="dark"]):not(.theme-dark) .header {
  background: #ffffff !important;
}

html[data-theme="dark"] .header,
html.theme-dark .header,
body.theme-dark .header {
  background: #1a1528 !important;
}

/* Empty facilities placeholder */
#home-facilities:empty::before {
  content: 'Loading facilities…';
  grid-column: 1 / -1;
  color: #667085;
  font-size: 0.95rem;
  padding: 12px 0;
}


/* Hide Contact Us button inside hero slider only */
.hero .hero-buttons a[href*="contact"],
.hero .hero-content a[href*="contact"],
.hc-hero .hero-buttons a[href*="contact"],
.hc-hero a.btn-outline[href*="contact"],
.hero a.btn-outline {
  display: none !important;
}

/* Facility cliparts (no emoji) */
body.home-clean .hc-fac-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(30, 132, 73, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  font-size: 0;
}
body.home-clean .hc-fac-clip {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}
html[data-theme="dark"] body.home-clean .hc-fac-icon,
body.theme-dark .hc-fac-icon {
  background: rgba(124, 58, 237, 0.2);
}

body.home-clean .hc-fac-empty {
  grid-column: 1 / -1;
  color: #667085;
  font-size: 0.95rem;
  padding: 16px 0;
  margin: 0;
}
html[data-theme="dark"] body.home-clean .hc-fac-empty,
body.theme-dark .hc-fac-empty {
  color: #a89bc4;
}
#home-facilities:empty::before { content: none; }


/* Home facilities – full photo cards (not tiny icons) */
body.home-clean .hc-facility-card-photo {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
}
body.home-clean .hc-facility-card-photo .hc-fac-photo {
  width: 100%;
  /* PC: taller photo area so cards look like full photo cards */
  aspect-ratio: 16 / 11;
  min-height: 180px;
  overflow: hidden;
  background: #eef1f5;
  margin: 0;
  border-radius: 0;
  display: block;
}
body.home-clean .hc-facility-card-photo .hc-fac-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.35s ease;
}
body.home-clean .hc-facility-card-photo:hover .hc-fac-photo img {
  transform: scale(1.05);
}
body.home-clean .hc-facility-card-photo .hc-fac-body {
  padding: 14px 16px 16px;
}
body.home-clean .hc-facility-card-photo .hc-fac-body h4 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}
body.home-clean .hc-facility-card-photo .hc-fac-body p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* PC: 2 large photo cards side by side */
body.home-clean .hc-facilities-grid {
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (min-width: 901px) {
  body.home-clean .hc-facility-card-photo .hc-fac-photo {
    aspect-ratio: 16 / 10;
    min-height: 220px;
  }
}
@media (max-width: 600px) {
  body.home-clean .hc-facilities-grid {
    grid-template-columns: 1fr;
  }
  body.home-clean .hc-facility-card-photo .hc-fac-photo {
    aspect-ratio: 16 / 10;
    min-height: 200px;
  }
}

/* Theme toggle visible on all pages */


/* =========================================================
   NEWS / NOTICE DETAIL ACTIONS ONLY
   Existing card/list sizes are intentionally untouched.
   ========================================================= */
.news-notice-detail-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #edf0f3;
}

.detail-action {
  min-height: 36px;
  padding: 0 13px;
  border: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s ease, filter .18s ease;
}

.detail-read-action {
  background: #f1f3f5;
  color: #30343b !important;
}

.detail-download-action {
  background: #27ae60;
  color: #fff !important;
}

.detail-full-action {
  background: #c0392b;
  color: #fff;
}

.detail-action:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.detail-content-full {
  display: block !important;
  -webkit-line-clamp: unset !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Only the detail modal image: keep the site's existing compact size. */
.detail-modal-img {
  max-height: 320px !important;
  overflow: hidden !important;
}

.detail-modal-img img {
  max-height: 320px !important;
  object-fit: cover !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

@media (max-width: 640px) {
  .news-notice-detail-actions {
    justify-content: flex-start;
  }
  .detail-action {
    min-height: 34px;
    padding: 0 10px;
    font-size: .72rem;
  }
}

/* BBSS NEWS NOTICE FINAL ACTION PATCH */

/* =========================================================
   COMPACT UNIQUE NEWS + NOTICES CARDS
   ========================================================= */
#notices-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#news-list.nn-grid,
.nn-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.nn-card {
  display: flex;
  gap: 12px;
  align-items: stretch;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(91, 44, 111, 0.08);
  border: 1px solid rgba(91, 44, 111, 0.06);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  padding: 0;
  margin: 0;
  border-left: none;
}

.nn-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(91, 44, 111, 0.14);
}

/* Notices: horizontal compact row */
#notices-list .nn-card {
  min-height: 96px;
}

#notices-list .nn-thumb {
  width: 88px;
  min-width: 88px;
  height: auto;
  min-height: 96px;
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #5B2C6F22, #1A527622);
  position: relative;
}

#notices-list .nn-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#notices-list .nn-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  background: linear-gradient(135deg, #5B2C6F18, #1A527618);
}

#notices-list .nn-card.important {
  border-left: 4px solid var(--accent-red, #C0392B);
}

/* News: vertical compact card in grid */
#news-list .nn-card,
.nn-grid .nn-card {
  flex-direction: column;
  gap: 0;
}

#news-list .nn-thumb,
.nn-grid .nn-thumb {
  width: 100%;
  height: 140px;
  min-height: 140px;
  overflow: hidden;
  position: relative;
  background: #eef1f5;
}

#news-list .nn-thumb img,
.nn-grid .nn-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

#news-list .nn-card:hover .nn-thumb img,
.nn-grid .nn-card:hover .nn-thumb img {
  transform: scale(1.05);
}

.nn-date-pill {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: linear-gradient(135deg, #5B2C6F, #1A5276);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 50px;
  letter-spacing: 0.02em;
}

.nn-body {
  flex: 1;
  padding: 12px 14px 12px 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#news-list .nn-body,
.nn-grid .nn-body {
  padding: 12px 14px 14px;
}

.nn-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.nn-cat {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--secondary, #1A5276);
  background: rgba(26, 82, 118, 0.08);
  padding: 2px 8px;
  border-radius: 50px;
}

.nn-card .badge {
  display: inline-block;
  background: var(--accent-red, #C0392B);
  color: #fff;
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 50px;
  font-weight: 700;
  margin: 0;
}

.nn-title {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--primary-dark);
  margin: 0 0 6px;
  line-height: 1.35;
}

.nn-excerpt {
  font-size: 0.8rem !important;
  color: var(--gray, #6B7280) !important;
  line-height: 1.45 !important;
  margin: 0 0 8px !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.nn-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
}

.nn-date {
  font-size: 0.72rem;
  color: var(--gray, #6B7280);
  font-weight: 500;
}

.nn-more {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary, #5B2C6F);
  white-space: nowrap;
}

/* Action buttons on cards (outside modal) */
.nn-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #edf0f3;
}

.nn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 11px;
  border: 0;
  border-radius: 50px;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.nn-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.nn-btn-read {
  background: #f1f3f5;
  color: #30343b !important;
}

.nn-btn-view {
  background: #c0392b;
  color: #fff !important;
}

.nn-btn-dl {
  background: #27ae60;
  color: #fff !important;
}

html[data-theme="dark"] .nn-actions,
body.theme-dark .nn-actions {
  border-top-color: #2d2640;
}
html[data-theme="dark"] .nn-btn-read,
body.theme-dark .nn-btn-read {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
  color: #ffffff !important;
  border: 1px solid #c4b5fd !important;
}

/* Home Latest News – same action buttons */
.home-compact-item .nn-actions {
  margin-top: 8px;
  padding-top: 6px;
  width: 100%;
}
.home-compact-item .nn-btn {
  min-height: 28px;
  padding: 0 9px;
  font-size: 0.68rem;
}
.home-compact-item .body {
  flex-wrap: wrap;
}

/* Home events: previous section under upcoming */
.hc-events-prev-head {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary, #5B2C6F);
  margin: 16px 0 6px;
  padding-top: 10px;
  border-top: 1px dashed rgba(91, 44, 111, 0.2);
  letter-spacing: 0.02em;
}
.hc-event-label {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 50px;
  margin-bottom: 4px;
  width: fit-content;
}
.hc-event-label.up {
  background: rgba(30, 132, 73, 0.12);
  color: #1E8449;
}
.hc-event-label.prev {
  background: rgba(107, 114, 128, 0.15);
  color: #6B7280;
}
html[data-theme="dark"] .hc-events-prev-head,
body.theme-dark .hc-events-prev-head {
  color: #c4b5fd;
  border-top-color: #2d2640;
}
html[data-theme="dark"] .hc-event-label.prev,
body.theme-dark .hc-event-label.prev {
  background: rgba(168, 155, 196, 0.15);
  color: #a89bc4;
}

/* Detail modal: clamp long text until Read More */
.detail-modal-content {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 11em;
  transition: max-height 0.25s ease;
}

.detail-modal-content.detail-content-full {
  display: block !important;
  -webkit-line-clamp: unset !important;
  max-height: none !important;
  overflow: visible !important;
}

.detail-modal-box {
  max-width: 560px;
}

.detail-modal-img {
  max-height: 220px !important;
}

.detail-modal-img img {
  max-height: 220px !important;
  object-fit: cover !important;
}

.detail-modal-body {
  padding: 20px 22px 24px !important;
}

.detail-modal-body h2 {
  font-size: 1.2rem !important;
  margin-bottom: 10px !important;
}

.news-notice-detail-actions {
  justify-content: flex-start;
  gap: 8px;
}

.detail-action {
  min-height: 34px;
  padding: 0 12px;
  font-size: 0.74rem;
  border-radius: 50px;
}

/* Dark theme support for compact cards */
html[data-theme="dark"] .nn-card,
body.theme-dark .nn-card {
  background: #1e1830 !important;
  border-color: #2d2640 !important;
  color: #eae6f5 !important;
}
html[data-theme="dark"] .nn-title,
body.theme-dark .nn-title {
  color: #eae6f5 !important;
}
html[data-theme="dark"] .nn-excerpt,
html[data-theme="dark"] .nn-date,
body.theme-dark .nn-excerpt,
body.theme-dark .nn-date {
  color: #a89bc4 !important;
}
html[data-theme="dark"] .nn-cat,
body.theme-dark .nn-cat {
  background: rgba(124, 58, 237, 0.2);
  color: #c4b5fd;
}
html[data-theme="dark"] .nn-more,
body.theme-dark .nn-more {
  color: #c4b5fd;
}

@media (max-width: 560px) {
  #notices-list .nn-thumb {
    width: 72px;
    min-width: 72px;
    min-height: 88px;
  }
  .nn-title { font-size: 0.9rem !important; }
  .nn-excerpt { font-size: 0.76rem !important; }
  #news-list.nn-grid,
  .nn-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   SCHOOL FOOTER – unique professional design + designer credit
   ========================================================= */
.footer.footer-animated,
.footer {
  background: linear-gradient(145deg, #1a0a28 0%, #152a5c 45%, #0a2e24 100%) !important;
  color: #fff !important;
  padding: 36px 0 0 !important;
  position: relative;
  overflow: hidden;
}

.footer.footer-animated::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 10% 0%, rgba(91, 44, 111, 0.35), transparent 55%),
    radial-gradient(ellipse 60% 40% at 90% 100%, rgba(30, 132, 73, 0.2), transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.footer.footer-animated::after {
  content: '';
  position: absolute;
  top: -30%;
  right: -6%;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(245, 215, 110, 0.05);
  pointer-events: none;
  animation: footerBlob 9s ease-in-out infinite alternate;
}

@keyframes footerBlob {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-28px, 20px) scale(1.1); }
}

.footer-grid {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 0.9fr !important;
  gap: 24px 28px !important;
  margin-bottom: 20px !important;
  position: relative;
  z-index: 1;
}

.footer-anim-item {
  opacity: 0;
  transform: translateY(22px);
  animation: footerSlideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--fi, 0) * 0.12s + 0.15s);
}

@keyframes footerSlideUp {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

.footer-brand img {
  width: 46px !important;
  height: 46px !important;
  object-fit: contain;
  margin-bottom: 8px !important;
  animation: footerLogoBounce 2.6s ease-in-out infinite;
  filter: drop-shadow(0 2px 6px rgba(245, 215, 110, 0.25));
}

@keyframes footerLogoBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.footer-brand h3 {
  font-size: 1rem !important;
  margin-bottom: 4px !important;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.footer-brand p,
.footer-brand a {
  font-size: 0.8rem !important;
  color: rgba(255,255,255,0.85) !important;
  margin-bottom: 2px !important;
}

.footer h4 {
  font-size: 0.75rem !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #F5D76E !important;
  margin-bottom: 10px !important;
  font-weight: 700;
}

.footer-links a {
  display: block;
  padding: 3px 0 !important;
  font-size: 0.8rem !important;
  color: rgba(255,255,255,0.88) !important;
  transition: transform 0.2s ease, color 0.2s ease;
}

.footer-links a:hover {
  color: #F5D76E !important;
  transform: translateX(5px);
}

.footer-smart-link {
  margin-top: 12px !important;
}

.footer-smart-link a {
  display: inline-block;
  font-size: 0.78rem !important;
  font-weight: 600;
  color: #F5D76E !important;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(245, 215, 110, 0.12);
  border: 1px solid rgba(245, 215, 110, 0.3);
  transition: all 0.25s ease;
}

.footer-smart-link a:hover {
  background: rgba(245, 215, 110, 0.25);
  color: #fff !important;
  transform: translateY(-1px);
}

.social-links a {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem !important;
  font-weight: 700;
  transition: var(--transition);
  border: 1px solid rgba(255,255,255,0.15);
}

.social-links a:hover {
  background: #F5D76E;
  color: #1A1A2E !important;
  border-color: #F5D76E;
  transform: scale(1.08);
}

/* ========== UNIQUE COPYRIGHT + DESIGNED BY BAR ========== */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  padding: 0 !important;
  position: relative;
  z-index: 1;
  opacity: 0;
  animation: footerSlideUp 0.75s 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.footer-copyright-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 20px;
  padding: 16px 12px !important;
  background: linear-gradient(90deg, rgba(0,0,0,0.15) 0%, rgba(245,215,110,0.06) 50%, rgba(0,0,0,0.15) 100%);
}

.footer-copy {
  font-size: 0.76rem !important;
  color: rgba(255,255,255,0.75) !important;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.footer-copy .copy-symbol {
  color: #F5D76E;
  font-weight: 700;
  font-size: 0.9rem;
}

.footer-divider {
  width: 1px;
  height: 22px;
  background: linear-gradient(to bottom, transparent, rgba(245,215,110,0.5), transparent);
  flex-shrink: 0;
}

.footer-credit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 10px;
  border-radius: 40px;
  background: linear-gradient(135deg, rgba(245, 215, 110, 0.16) 0%, rgba(39, 174, 96, 0.12) 100%);
  border: 1px solid rgba(245, 215, 110, 0.4);
  box-shadow:
    0 0 0 1px rgba(245, 215, 110, 0.08),
    0 4px 14px rgba(0, 0, 0, 0.2);
  animation: creditGlow 3s ease-in-out infinite;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.footer-credit:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(245, 215, 110, 0.2),
    0 6px 20px rgba(0, 0, 0, 0.25);
}

@keyframes creditGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(245, 215, 110, 0.08), 0 4px 14px rgba(0, 0, 0, 0.2); }
  50% { box-shadow: 0 0 12px 2px rgba(245, 215, 110, 0.22), 0 4px 16px rgba(0, 0, 0, 0.22); }
}

/* Clipart container */
.footer-credit-clipart {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  padding: 2px;
  animation: clipartFloat 2.8s ease-in-out infinite;
}

.footer-credit-clipart svg {
  display: block;
  width: 36px;
  height: 27px;
}

@keyframes clipartFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.footer-credit-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1.25;
}

.designed-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(245, 215, 110, 0.9);
  font-weight: 600;
}

.designer-name {
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  background: linear-gradient(105deg, #F5D76E 0%, #ffffff 45%, #A7F3D0 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: creditShimmer 3.5s linear infinite;
  letter-spacing: 0.02em;
}

.credit-role {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  letter-spacing: 0.03em;
}

@keyframes creditShimmer {
  to { background-position: 200% center; }
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .footer-copyright-bar {
    flex-direction: column;
    gap: 12px;
    padding: 14px 10px !important;
  }
  .footer-divider {
    width: 48px;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(245,215,110,0.5), transparent);
  }
  .footer-credit {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-anim-item,
  .footer-bottom,
  .footer-brand img,
  .footer-credit,
  .footer-credit-clipart,
  .designer-name,
  .footer.footer-animated::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Hide floating Smart Board – kept only in home header */
.floating-smartboard { display: none !important; }

/* ========== Book Smart Board nav tab ========== */
.nav-desktop a.nav-smartboard {
  background: linear-gradient(135deg, #1E8449, #27AE60);
  color: #fff !important;
  padding: 6px 12px !important;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.78rem !important;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(30, 132, 73, 0.35);
  white-space: nowrap;
}
.nav-desktop a.nav-smartboard:hover {
  background: linear-gradient(135deg, #27AE60, #1E8449);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30, 132, 73, 0.45);
}
.nav-desktop a.nav-smartboard.active {
  background: linear-gradient(135deg, #F5D76E, #D4AF37);
  color: #1A1A2E !important;
}
.mobile-nav a.nav-smartboard {
  background: linear-gradient(135deg, #1E8449, #27AE60);
  color: #fff !important;
  border-radius: 10px;
  font-weight: 700;
  margin-top: 6px;
  text-align: center;
}

/* ========== ADMISSION PAGE ========== */
.nav-admission {
  color: #dc2626 !important;
  font-weight: 700;
}
.nav-admission.active {
  color: #b91c1c !important;
}
.admission-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 900px) {
  .admission-layout { grid-template-columns: 1fr; }
}
.admission-school-card {
  background: var(--card-bg, #fff);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  position: sticky;
  top: 90px;
}
.admission-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  display: block;
  margin: 0 auto 12px;
}
.admission-school-card h2 {
  font-size: 1.1rem;
  text-align: center;
  margin: 0 0 6px;
}
.admission-school-card > p {
  text-align: center;
  color: #6b7280;
  font-size: .9rem;
  margin: 0 0 14px;
}
.admission-info-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  font-size: .9rem;
}
.admission-info-list li {
  padding: 6px 0;
  border-bottom: 1px dashed rgba(0,0,0,.08);
}
.admission-note {
  font-size: .82rem;
  color: #64748b;
  line-height: 1.45;
  margin: 0;
}
.admission-form-wrap {
  background: var(--card-bg, #fff);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 24px 26px 28px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.admission-form-title {
  margin: 0 0 6px;
  font-size: 1.35rem;
}
.admission-form-lead {
  color: #64748b;
  margin: 0 0 18px;
  font-size: .95rem;
}
.adm-fieldset {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 16px 16px 8px;
  margin: 0 0 18px;
}
.adm-fieldset legend {
  font-weight: 700;
  padding: 0 8px;
  color: #1e3a5f;
  font-size: .95rem;
}
.photo-upload-row {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.photo-preview {
  width: 100px;
  height: 120px;
  border: 2px dashed #cbd5e1;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f8fafc;
  font-size: .75rem;
  color: #94a3b8;
  text-align: center;
}
.photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.form-hint {
  display: block;
  margin-top: 6px;
  font-size: .8rem;
  color: #64748b;
}
.adm-consent {
  margin: 8px 0 16px;
  font-size: .9rem;
}
.adm-consent label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
}
.admission-closed {
  max-width: 640px;
  margin: 0 auto;
}
.admission-closed-card {
  text-align: center;
  background: var(--card-bg, #fff);
  border-radius: 18px;
  padding: 40px 28px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.admission-closed-icon {
  font-size: 2.5rem;
  margin-bottom: 10px;
}
.admission-closed-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}
/* Hide only marked section links — never break mobile drawer / More menu */
body.admission-nav-hidden a.nav-admission,
body.results-nav-hidden a.nav-results,
body.calendar-nav-hidden a.nav-calendar,
body.routine-nav-hidden a.nav-routine {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.mobile-nav a.nav-admission[hidden],
.nav-desktop a.nav-admission[hidden],
.mobile-nav a.nav-results[hidden],
.nav-desktop a.nav-results[hidden],
.mobile-nav a.nav-calendar[hidden],
.nav-desktop a.nav-calendar[hidden],
.mobile-nav a.nav-routine[hidden],
.nav-desktop a.nav-routine[hidden],
.nav-more-menu a[hidden] {
  display: none !important;
}
.mobile-menu.open,
.mobile-menu.open .mobile-menu-content {
  pointer-events: auto !important;
}

/* ========== NAV FIX: protect logo + compact menu + More dropdown ========== */
/* Desktop: keep name on one line; mobile overrides are at end of file */
.logo-area {
  flex-shrink: 1;
  min-width: 0;
  max-width: min(380px, 40vw);
}
.logo-text h1 {
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}
.logo-text span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.header-main {
  gap: 12px;
}
.nav-desktop {
  flex: 1 1 auto;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 2px;
  min-width: 0;
}
.nav-desktop a {
  padding: 7px 10px;
  font-size: 0.82rem;
}
.nav-desktop a.nav-smartboard {
  padding: 6px 11px !important;
  font-size: 0.72rem !important;
}
.nav-desktop a.admin-link {
  padding: 4px !important;
  font-size: 0 !important;
  width: auto;
  height: auto;
  min-width: 0;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--dark, #1a1a2e) !important;
  font-weight: 500;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  overflow: visible;
  line-height: 0;
  border: none !important;
  opacity: 0.75;
}
.nav-desktop a.admin-link img {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
  filter: none;
}
.nav-desktop a.admin-link:hover {
  background: transparent !important;
  color: var(--primary, #5B2C6F) !important;
  opacity: 1;
  transform: none;
  box-shadow: none !important;
}

/* More dropdown */
.nav-more {
  position: relative;
}
.nav-more-btn {
  padding: 7px 10px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--dark);
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.nav-more-btn:hover,
.nav-more.open .nav-more-btn {
  background: rgba(91, 44, 111, 0.1);
  color: var(--primary);
}
.nav-more-btn .chev {
  font-size: 0.65rem;
  transition: transform 0.2s;
}
.nav-more.open .nav-more-btn .chev {
  transform: rotate(180deg);
}
.nav-more-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
  padding: 6px;
  z-index: 1200;
}
.nav-more.open .nav-more-menu {
  display: block;
  animation: navMoreIn 0.18s ease;
}
@keyframes navMoreIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.nav-more-menu a {
  display: block !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  font-size: 0.88rem !important;
  color: #1e293b !important;
  background: transparent !important;
  font-weight: 500 !important;
}
.nav-more-menu a:hover {
  background: rgba(91, 44, 111, 0.08) !important;
  color: var(--primary) !important;
}
.nav-more-menu a.active {
  background: rgba(91, 44, 111, 0.12) !important;
  color: var(--primary) !important;
  font-weight: 700 !important;
}
html[data-theme="dark"] .nav-more-menu,
body.theme-dark .nav-more-menu {
  background: #1e1b2e !important;
  border-color: rgba(196, 181, 253, 0.25) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.5) !important;
}
html[data-theme="dark"] .nav-more-menu a,
body.theme-dark .nav-more-menu a {
  color: #f1f5f9 !important;
}
html[data-theme="dark"] .nav-more-menu a:hover,
body.theme-dark .nav-more-menu a:hover,
html[data-theme="dark"] .nav-more-menu a.active,
body.theme-dark .nav-more-menu a.active {
  background: rgba(139, 92, 246, 0.25) !important;
  color: #ffffff !important;
}

/* Dark mode: "More" tab label itself */
html[data-theme="dark"] .nav-more-btn,
body.theme-dark .nav-more-btn,
html[data-theme="dark"] .nav-desktop .nav-more-btn,
body.theme-dark .nav-desktop .nav-more-btn {
  color: #f1f5f9 !important;
  background: transparent !important;
  opacity: 1 !important;
}
html[data-theme="dark"] .nav-more-btn:hover,
html[data-theme="dark"] .nav-more.open .nav-more-btn,
body.theme-dark .nav-more-btn:hover,
body.theme-dark .nav-more.open .nav-more-btn {
  background: rgba(139, 92, 246, 0.22) !important;
  color: #ffffff !important;
}
html[data-theme="dark"] .nav-more-btn .chev,
body.theme-dark .nav-more-btn .chev {
  color: #e9d5ff !important;
  opacity: 1 !important;
}

@media (max-width: 1200px) {
  .nav-desktop a { padding: 6px 8px; font-size: 0.78rem; }
  .logo-area { max-width: min(280px, 32vw); }
  .logo-area img { width: 48px; height: 48px; }
}

/* ========== ADMISSION PAGE — PREMIUM DESIGN ========== */
body[data-page="admission"] .page-banner {
  background: linear-gradient(135deg, #4c1d95 0%, #5b2c6f 40%, #15803d 100%);
  position: relative;
  overflow: hidden;
  padding: 48px 0 56px;
}
body[data-page="admission"] .page-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,0.12), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(245,200,76,0.15), transparent 45%);
  pointer-events: none;
}
body[data-page="admission"] .page-banner h1 {
  color: #fff;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  position: relative;
}
body[data-page="admission"] .page-banner p {
  color: rgba(255,255,255,0.88);
  position: relative;
  font-size: 1.05rem;
}
body[data-page="admission"] .page-banner .adm-banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 12px;
  position: relative;
}

.admission-steps {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #faf5ff, #f0fdf4);
  border-radius: 14px;
  border: 1px solid rgba(91, 44, 111, 0.1);
}
.admission-step {
  flex: 1;
  min-width: 120px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
}
.admission-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5b2c6f, #7c3aed);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.admission-step span {
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
}

.admission-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 28px;
  align-items: start;
}
.admission-school-card {
  background: linear-gradient(180deg, #fff 0%, #faf8ff 100%);
  border: 1px solid rgba(91, 44, 111, 0.12);
  border-radius: 20px;
  padding: 28px 22px;
  box-shadow: 0 12px 36px rgba(91, 44, 111, 0.08);
  position: sticky;
  top: 90px;
  overflow: hidden;
}
.admission-school-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #5b2c6f, #16a34a, #f5c84c);
}
.admission-logo {
  width: 88px;
  height: 88px;
  object-fit: contain;
  display: block;
  margin: 8px auto 14px;
  border-radius: 18px;
  background: #fff;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(91, 44, 111, 0.12);
}
.admission-school-card h2 {
  font-size: 1.15rem;
  text-align: center;
  margin: 0 0 6px;
  color: #5b2c6f;
  font-weight: 800;
}
.admission-school-card > p {
  text-align: center;
  color: #6b7280;
  font-size: .88rem;
  margin: 0 0 16px;
}
.admission-info-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  font-size: .88rem;
}
.admission-info-list li {
  padding: 9px 0;
  border-bottom: 1px dashed rgba(91, 44, 111, 0.12);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.admission-info-list li strong {
  color: #5b2c6f;
  min-width: 72px;
}
.admission-note {
  font-size: .8rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
  padding: 12px;
  background: #f8fafc;
  border-radius: 10px;
  border-left: 3px solid #16a34a;
}
.admission-form-wrap {
  background: #fff;
  border: 1px solid rgba(91, 44, 111, 0.1);
  border-radius: 20px;
  padding: 28px 30px 32px;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.06);
}
.admission-form-title {
  margin: 0 0 4px;
  font-size: 1.4rem;
  color: #1e293b;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.admission-form-lead {
  color: #64748b;
  margin: 0 0 20px;
  font-size: .95rem;
}
.adm-fieldset {
  border: 1px solid rgba(91, 44, 111, 0.1);
  border-radius: 16px;
  padding: 18px 18px 10px;
  margin: 0 0 20px;
  background: linear-gradient(180deg, #fefefe, #fafbff);
  position: relative;
}
.adm-fieldset legend {
  font-weight: 800;
  padding: 4px 12px;
  color: #5b2c6f;
  font-size: .92rem;
  background: linear-gradient(135deg, #faf5ff, #f0fdf4);
  border-radius: 8px;
  border: 1px solid rgba(91, 44, 111, 0.12);
}
.admission-form-wrap .form-group label {
  font-weight: 700;
  color: #334155;
  font-size: 0.82rem;
}
.admission-form-wrap .form-group input,
.admission-form-wrap .form-group select,
.admission-form-wrap .form-group textarea {
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 11px 14px;
  background: #f8fafc;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.admission-form-wrap .form-group input:focus,
.admission-form-wrap .form-group select:focus,
.admission-form-wrap .form-group textarea:focus {
  outline: none;
  border-color: #5b2c6f;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(91, 44, 111, 0.12);
}

/* Admission form validation – red highlight for missing / invalid fields */
.admission-form-wrap .form-group.has-error input,
.admission-form-wrap .form-group.has-error select,
.admission-form-wrap .form-group.has-error textarea,
.admission-form-wrap input.is-invalid,
.admission-form-wrap select.is-invalid,
.admission-form-wrap textarea.is-invalid {
  border-color: #ef4444 !important;
  background: #fef2f2 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important;
}
.admission-form-wrap .form-group.has-error label {
  color: #b91c1c;
}
.admission-form-wrap .field-error-msg {
  color: #dc2626;
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: 5px;
  display: block;
}
.admission-form-wrap input[type="checkbox"].is-invalid,
.admission-form-wrap .has-error input[type="checkbox"] {
  outline: 2px solid #ef4444;
  outline-offset: 2px;
}
.adm-consent.has-error,
.adm-consent:has(.is-invalid) {
  border: 1.5px solid #ef4444;
  background: #fef2f2;
  border-radius: 10px;
  padding: 10px 12px;
}
.adm-consent .field-error-msg {
  color: #dc2626;
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: 6px;
}
.admission-form-wrap .form-msg,
.form-msg.alert {
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
}
.form-msg.alert-error {
  background: #fff1f2;
  color: #be123c;
  border: 1px solid #fecdd3;
}
.form-msg.alert-success {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.photo-upload-row {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.photo-preview {
  width: 110px;
  height: 130px;
  border: 2px dashed #c4b5fd;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(180deg, #faf5ff, #f5f3ff);
  font-size: .75rem;
  color: #7c3aed;
  text-align: center;
  font-weight: 600;
}
.photo-preview.has-img {
  border-style: solid;
  border-color: #16a34a;
}
.adm-consent {
  margin: 12px 0 18px;
  padding: 14px 16px;
  background: #f0fdf4;
  border-radius: 12px;
  border: 1px solid #bbf7d0;
  font-size: .9rem;
}
.admission-form-wrap #ad-submit {
  background: linear-gradient(135deg, #5b2c6f, #7c3aed) !important;
  border: none;
  border-radius: 14px;
  padding: 14px 24px;
  font-size: 1rem;
  font-weight: 800;
  box-shadow: 0 10px 28px rgba(91, 44, 111, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}
.admission-form-wrap #ad-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(91, 44, 111, 0.38);
}
.admission-closed-card {
  text-align: center;
  background: linear-gradient(180deg, #fff, #faf8ff);
  border-radius: 22px;
  padding: 48px 32px;
  border: 1px solid rgba(91, 44, 111, 0.12);
  box-shadow: 0 16px 40px rgba(91, 44, 111, 0.08);
}
.admission-closed-icon {
  font-size: 3rem;
  margin-bottom: 12px;
}
.nav-admission {
  color: #dc2626 !important;
  font-weight: 700 !important;
}
.nav-admission.active {
  background: rgba(220, 38, 38, 0.1) !important;
  color: #b91c1c !important;
}

@media (max-width: 900px) {
  .admission-layout { grid-template-columns: 1fr; }
  .admission-school-card { position: static; }
}

/* ========== HOME CTA: Online Admission buttons ========== */
body.home-clean .hc-cta-badge {
  display: inline-block;
  position: relative;
  z-index: 1;
  margin-bottom: 12px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body.home-clean .hc-btn-admission {
  background: linear-gradient(135deg, #F5D76E, #D4AF37) !important;
  color: #1A1A2E !important;
  border: none !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.45) !important;
  padding: 14px 28px !important;
  border-radius: 12px !important;
}
body.home-clean .hc-btn-admission:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(212, 175, 55, 0.55) !important;
  filter: brightness(1.05);
}
body.home-clean .hc-cta-features {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  justify-content: center;
  margin-top: 26px;
  position: relative;
  z-index: 1;
}
body.home-clean .hc-cta-feat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.9rem;
  font-weight: 600;
}
body.home-clean .hc-cta-feat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #F5D76E;
  box-shadow: 0 0 0 3px rgba(245, 215, 110, 0.25);
}

/* Home CTA stays visible; only admission title/button hide when closed */

/* ========== ADMISSION FORM — THEME ATTRACTIVE ========== */
body[data-page="admission"] {
  background: linear-gradient(180deg, #f5f0fa 0%, #f0f7f3 40%, #f4f6fb 100%);
}
body[data-page="admission"] .section {
  padding-top: 28px;
  padding-bottom: 48px;
}
body[data-page="admission"] .page-banner {
  background: linear-gradient(125deg, #5B2C6F 0%, #1A5276 48%, #1E8449 100%) !important;
  padding: 52px 0 58px !important;
}
body[data-page="admission"] .page-banner h1 {
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
body[data-page="admission"] .adm-banner-badge {
  background: linear-gradient(135deg, rgba(245,215,110,0.95), rgba(212,175,55,0.9)) !important;
  color: #1A1A2E !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.admission-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 28px;
  align-items: start;
}
.admission-school-card {
  background: linear-gradient(165deg, #ffffff 0%, #faf5ff 55%, #f0fdf4 100%) !important;
  border: 1px solid rgba(91, 44, 111, 0.14) !important;
  border-radius: 22px !important;
  padding: 28px 22px !important;
  box-shadow: 0 16px 40px rgba(91, 44, 111, 0.1) !important;
}
.admission-school-card::before {
  height: 6px !important;
  background: linear-gradient(90deg, #5B2C6F, #1A5276, #1E8449, #D4AF37) !important;
}
.admission-logo {
  width: 96px !important;
  height: 96px !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 28px rgba(91, 44, 111, 0.18) !important;
  border: 3px solid #fff;
}
.admission-school-card h2 {
  color: #5B2C6F !important;
  font-size: 1.2rem !important;
}
.admission-info-list li strong {
  color: #5B2C6F !important;
}
.admission-note {
  background: linear-gradient(135deg, #f0fdf4, #ecfdf5) !important;
  border-left: 4px solid #1E8449 !important;
  color: #166534 !important;
}

.admission-form-wrap {
  background: #fff !important;
  border: 1px solid rgba(91, 44, 111, 0.12) !important;
  border-radius: 22px !important;
  padding: 30px 32px 36px !important;
  box-shadow: 0 18px 48px rgba(26, 82, 118, 0.08) !important;
  position: relative;
  overflow: hidden;
}
.admission-form-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #5B2C6F, #1A5276, #1E8449, #D4AF37);
}
.admission-form-title {
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #5B2C6F, #1A5276);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.admission-form-lead {
  color: #64748b !important;
  margin-bottom: 22px !important;
}

.admission-steps {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px !important;
  padding: 16px !important;
  background: linear-gradient(135deg, #faf5ff 0%, #eff6ff 50%, #f0fdf4 100%) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(91, 44, 111, 0.1) !important;
}
.admission-step {
  flex: 1;
  min-width: 130px;
  background: #fff;
  border: 1px solid rgba(91, 44, 111, 0.08);
  box-shadow: 0 4px 12px rgba(91, 44, 111, 0.05);
}
.admission-step-num {
  background: linear-gradient(135deg, #5B2C6F, #1A5276) !important;
  box-shadow: 0 4px 12px rgba(91, 44, 111, 0.3);
}

.adm-fieldset {
  border: 1px solid rgba(91, 44, 111, 0.12) !important;
  border-radius: 18px !important;
  padding: 20px 18px 12px !important;
  margin: 0 0 22px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%) !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.03);
}
.adm-fieldset legend {
  font-weight: 850 !important;
  padding: 6px 14px !important;
  color: #fff !important;
  font-size: 0.88rem !important;
  background: linear-gradient(135deg, #5B2C6F, #1A5276) !important;
  border-radius: 999px !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(91, 44, 111, 0.25);
  letter-spacing: 0.02em;
}
.admission-form-wrap .form-group label {
  color: #5B2C6F !important;
  font-weight: 750 !important;
  font-size: 0.84rem !important;
}
.admission-form-wrap .form-group input,
.admission-form-wrap .form-group select,
.admission-form-wrap .form-group textarea {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  background: #f8fafc !important;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
}
.admission-form-wrap .form-group input:focus,
.admission-form-wrap .form-group select:focus,
.admission-form-wrap .form-group textarea:focus {
  border-color: #5B2C6F !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(91, 44, 111, 0.12) !important;
  outline: none !important;
}
.photo-preview {
  border: 2px dashed #a78bfa !important;
  background: linear-gradient(180deg, #faf5ff, #f5f3ff) !important;
  border-radius: 14px !important;
  color: #5B2C6F !important;
}
.photo-preview.has-img,
.photo-preview:has(img) {
  border-style: solid !important;
  border-color: #1E8449 !important;
}
.adm-consent {
  background: linear-gradient(135deg, #f0fdf4, #ecfdf5) !important;
  border: 1px solid #86efac !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
}
.admission-form-wrap #ad-submit {
  background: linear-gradient(135deg, #5B2C6F 0%, #1A5276 50%, #1E8449 100%) !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 15px 28px !important;
  font-size: 1.05rem !important;
  font-weight: 850 !important;
  color: #fff !important;
  box-shadow: 0 12px 32px rgba(91, 44, 111, 0.35) !important;
  letter-spacing: 0.02em;
  cursor: pointer;
  width: 100%;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.admission-form-wrap #ad-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(26, 82, 118, 0.4) !important;
}

.admission-closed-card {
  background: linear-gradient(180deg, #fff, #faf5ff) !important;
  border: 1px solid rgba(91, 44, 111, 0.12) !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 50px rgba(91, 44, 111, 0.1) !important;
}

@media (max-width: 900px) {
  .admission-layout { grid-template-columns: 1fr !important; }
  .admission-form-wrap { padding: 22px 18px 28px !important; }
}

/* Compact "Admissions are open" band */
body.home-clean .hc-cta.hc-cta-compact {
  padding: 36px 20px !important;
}
body.home-clean .hc-cta.hc-cta-compact h2 {
  font-size: 1.45rem !important;
  margin: 0 0 18px !important;
}
body.home-clean .hc-cta.hc-cta-compact .hc-cta-btns {
  gap: 12px;
}
body.home-clean .hc-cta.hc-cta-compact .hc-btn {
  padding: 11px 22px !important;
  font-size: 0.92rem !important;
}
/* Hide only admission title + Online Admission when form is closed */
body.admission-nav-hidden .hc-cta-admission-title,
body.admission-nav-hidden .hc-cta-admission-btn,
.hc-cta-admission-title[hidden],
.hc-cta-admission-btn[hidden] {
  display: none !important;
}

/* ========== Nepal flag + today's date (header top) ========== */
.header-top .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.nepal-date-bar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
  padding: 2px 8px;
}
.nepal-flag-wrap {
  display: inline-flex;
  width: 28px;
  height: 34px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}
.nepal-flag-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.nepal-flag-wave {
  transform-origin: 8px 60px;
  animation: nepalFlagWave 2.4s ease-in-out infinite;
}
@keyframes nepalFlagWave {
  0%, 100% { transform: rotate(-3deg) skewY(0deg); }
  25% { transform: rotate(2deg) skewY(-1deg); }
  50% { transform: rotate(-2deg) skewY(1deg); }
  75% { transform: rotate(3deg) skewY(-0.5deg); }
}
.nepal-date-text {
  font-size: 0.82rem;
  font-weight: 650;
  color: inherit;
  white-space: nowrap;
  letter-spacing: 0.01em;
  opacity: 0.95;
}
.header-top .nepal-date-text {
  color: #fff;
}
html[data-theme="dark"] .header-top .nepal-date-text,
body.theme-dark .header-top .nepal-date-text {
  color: #e2e8f0;
}

@media (max-width: 900px) {
  .nepal-date-bar {
    order: 3;
    width: 100%;
    justify-content: center;
    padding: 4px 0 2px;
  }
  .nepal-date-text {
    font-size: 0.78rem;
    white-space: normal;
    text-align: center;
  }
}
@media (max-width: 480px) {
  .nepal-flag-wrap {
    width: 24px;
    height: 29px;
  }
  .nepal-date-text {
    font-size: 0.72rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nepal-flag-wave {
    animation: none;
  }
}

/* Nepal flag sizing for official proportions */
.nepal-flag-wrap {
  width: 32px !important;
  height: 36px !important;
}
.nepal-flag-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.nepal-date-text {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}
.nepal-flag-wave {
  transform-origin: 0% 50%;
  animation: nepalFlagWave 2.2s ease-in-out infinite;
}
@keyframes nepalFlagWave {
  0%, 100% { transform: rotate(-4deg) translateX(0); }
  50% { transform: rotate(3deg) translateX(1px); }
}

/* Static Nepal flag image — no animation */
.nepal-flag-wrap {
  width: 30px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  filter: none !important;
}
.nepal-flag-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.nepal-flag-wave,
.nepal-flag-svg {
  animation: none !important;
}

/* Nepal flag GIF */
.nepal-flag-wrap {
  width: 36px !important;
  height: 42px !important;
}
.nepal-flag-img {
  width: 36px;
  height: 42px;
  object-fit: contain;
  display: block;
}

/* Force transparent backgrounds for flag + school logo */
.nepal-flag-wrap,
.nepal-flag-img {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.nepal-flag-img {
  mix-blend-mode: normal;
  image-rendering: auto;
}
.logo-area img,
.header .logo-area img,
.admission-logo,
.footer-brand img {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Footer school logo — compact round white badge */
.footer .footer-brand img,
.footer-brand img {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-radius: 50% !important;
  padding: 4px !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
  margin-bottom: 8px !important;
  display: block !important;
  animation: none !important;
  filter: none !important;
}
.footer-brand {
  align-items: flex-start;
}

/* Header top logo — tight round white badge (dark mode friendly) */
.header .logo-area img,
.logo-area img {
  width: 52px !important;
  height: 52px !important;
  object-fit: contain !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-radius: 50% !important;
  padding: 3px !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
}
html[data-theme="dark"] .logo-area img,
body.theme-dark .logo-area img {
  background: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}



/* ========== Dark theme: soft form fields (not black) ========== */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group textarea,
html[data-theme="dark"] .form-group select,
html[data-theme="dark"] .contact-form input,
html[data-theme="dark"] .contact-form textarea,
html[data-theme="dark"] .contact-form select,
html[data-theme="dark"] .contact-form-pro input,
html[data-theme="dark"] .contact-form-pro textarea,
html[data-theme="dark"] .contact-form-pro select,
html[data-theme="dark"] .admission-form-wrap input,
html[data-theme="dark"] .admission-form-wrap textarea,
html[data-theme="dark"] .admission-form-wrap select,
html[data-theme="dark"] #contact-form input,
html[data-theme="dark"] #contact-form textarea,
html[data-theme="dark"] #contact-form select,
html[data-theme="dark"] #admission-form input,
html[data-theme="dark"] #admission-form textarea,
html[data-theme="dark"] #admission-form select,
body.theme-dark input,
body.theme-dark textarea,
body.theme-dark select,
body.theme-dark .form-group input,
body.theme-dark .form-group textarea,
body.theme-dark .form-group select,
body.theme-dark .contact-form input,
body.theme-dark .contact-form textarea,
body.theme-dark .admission-form-wrap input,
body.theme-dark .admission-form-wrap textarea,
body.theme-dark .admission-form-wrap select {
  background: #f3eefc !important;
  background-color: #f3eefc !important;
  color: #1a1528 !important;
  border: 1.5px solid #c4b5e0 !important;
  caret-color: #1a1528 !important;
  -webkit-text-fill-color: #1a1528 !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .form-group input::placeholder,
html[data-theme="dark"] .form-group textarea::placeholder,
html[data-theme="dark"] .admission-form-wrap input::placeholder,
html[data-theme="dark"] .admission-form-wrap textarea::placeholder,
html[data-theme="dark"] .contact-form input::placeholder,
html[data-theme="dark"] .contact-form textarea::placeholder,
body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
  color: #6b6280 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #6b6280 !important;
}
html[data-theme="dark"] .form-group label,
html[data-theme="dark"] .admission-form-wrap .form-group label,
html[data-theme="dark"] .contact-form label,
html[data-theme="dark"] .contact-form-pro label,
html[data-theme="dark"] .admission-form-title,
html[data-theme="dark"] .admission-form-lead,
html[data-theme="dark"] .contact-form-pro h3,
body.theme-dark .form-group label,
body.theme-dark .admission-form-wrap .form-group label,
body.theme-dark .contact-form label {
  color: #eae6f5 !important;
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus,
body.theme-dark input:focus,
body.theme-dark textarea:focus,
body.theme-dark select:focus {
  background: #faf8ff !important;
  border-color: #8b5cf6 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25) !important;
  color: #1a1528 !important;
  -webkit-text-fill-color: #1a1528 !important;
}

/* Theme toggle in header-top only — never overlap school name */
.header-main > .theme-toggle {
  display: none !important;
}
.header-top .theme-toggle {
  display: inline-flex !important;
  flex-shrink: 0;
}
.header-top .container {
  align-items: center;
}

/* ========== Contact Us: clear button + text colours ========== */
body[data-page="contact"] .contact-pro .contact-lead,
body[data-page="contact"] .contact-info-pro p,
body[data-page="contact"] .contact-row p {
  color: #475569 !important;
}
body[data-page="contact"] .contact-row strong,
body[data-page="contact"] .contact-form-pro h3 {
  color: #1e293b !important;
}
body[data-page="contact"] .contact-actions .btn-primary,
body[data-page="contact"] .contact-form-pro .btn-primary,
body[data-page="contact"] #contact-form .btn-primary {
  background: linear-gradient(135deg, #0f766e, #059669) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 18px rgba(5, 150, 105, 0.35) !important;
}
body[data-page="contact"] .contact-actions .btn-primary:hover,
body[data-page="contact"] .contact-form-pro .btn-primary:hover {
  background: linear-gradient(135deg, #0d9488, #10b981) !important;
  color: #ffffff !important;
}
body[data-page="contact"] .contact-actions .btn-outline {
  border: 2px solid #5B2C6F !important;
  color: #5B2C6F !important;
  background: #fff !important;
  font-weight: 700 !important;
}
body[data-page="contact"] .contact-actions .btn-outline:hover {
  background: #5B2C6F !important;
  color: #ffffff !important;
}

/* Dark theme contact text still readable */
html[data-theme="dark"] body[data-page="contact"] .contact-row strong,
html[data-theme="dark"] body[data-page="contact"] .contact-form-pro h3 {
  color: #f3eefc !important;
}
html[data-theme="dark"] body[data-page="contact"] .contact-lead,
html[data-theme="dark"] body[data-page="contact"] .contact-row p {
  color: #c4b5d9 !important;
}
html[data-theme="dark"] body[data-page="contact"] .contact-actions .btn-outline {
  background: transparent !important;
  border-color: #c4b5fd !important;
  color: #e9d5ff !important;
}

/* ========== Admission step numbers — always visible ========== */
.admission-step-num,
.admission-steps .admission-step-num,
body[data-page="admission"] .admission-step-num {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #5B2C6F !important;
  background-image: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 0.9rem !important;
  font-weight: 900 !important;
  display: grid !important;
  place-items: center !important;
  border: 2px solid #F5D76E !important;
  box-shadow: 0 4px 12px rgba(91, 44, 111, 0.35) !important;
  flex-shrink: 0 !important;
}
.admission-step span:not(.admission-step-num),
.admission-steps .admission-step > span:last-child {
  color: #1e293b !important;
  font-weight: 700 !important;
  -webkit-text-fill-color: #1e293b !important;
}
html[data-theme="dark"] .admission-step span:not(.admission-step-num),
html[data-theme="dark"] .admission-steps .admission-step > span:last-child {
  color: #f3eefc !important;
  -webkit-text-fill-color: #f3eefc !important;
}
html[data-theme="dark"] .admission-step-num,
html[data-theme="dark"] body[data-page="admission"] .admission-step-num {
  background: #F5D76E !important;
  color: #1a1528 !important;
  -webkit-text-fill-color: #1a1528 !important;
  border-color: #fff !important;
}
html[data-theme="dark"] .admission-steps {
  background: linear-gradient(135deg, #2a2040, #1e2a3a) !important;
  border-color: rgba(245, 215, 110, 0.25) !important;
}
html[data-theme="dark"] .admission-step {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.1) !important;
}


/* ========== Dark theme: form labels + typing always visible ========== */
/* Form cards stay light so labels use strong dark colour */
html[data-theme="dark"] .contact-form-pro,
html[data-theme="dark"] .admission-form-wrap,
html[data-theme="dark"] .contact-form,
body.theme-dark .contact-form-pro,
body.theme-dark .admission-form-wrap,
body.theme-dark .contact-form {
  background: #ffffff !important;
  color: #1a1528 !important;
}

html[data-theme="dark"] .form-group label,
html[data-theme="dark"] .contact-form-pro h3,
html[data-theme="dark"] .contact-form label,
html[data-theme="dark"] .admission-form-wrap .form-group label,
html[data-theme="dark"] .admission-form-title,
html[data-theme="dark"] .admission-form-lead,
html[data-theme="dark"] .adm-fieldset label,
html[data-theme="dark"] body[data-page="contact"] .form-group label,
html[data-theme="dark"] body[data-page="admission"] .form-group label,
body.theme-dark .form-group label,
body.theme-dark .contact-form-pro h3,
body.theme-dark .admission-form-wrap .form-group label,
body.theme-dark .admission-form-title {
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
  opacity: 1 !important;
  font-weight: 700 !important;
}

html[data-theme="dark"] .admission-form-title {
  background: none !important;
  color: #5B2C6F !important;
  -webkit-text-fill-color: #5B2C6F !important;
}

html[data-theme="dark"] .admission-form-lead,
body.theme-dark .admission-form-lead {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
}

/* Soft lavender fields + dark typed text (not black fields) */
html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group textarea,
html[data-theme="dark"] .form-group select,
html[data-theme="dark"] .contact-form-pro input,
html[data-theme="dark"] .contact-form-pro textarea,
html[data-theme="dark"] .admission-form-wrap input,
html[data-theme="dark"] .admission-form-wrap textarea,
html[data-theme="dark"] .admission-form-wrap select,
html[data-theme="dark"] #contact-form input,
html[data-theme="dark"] #contact-form textarea,
html[data-theme="dark"] #admission-form input,
html[data-theme="dark"] #admission-form textarea,
html[data-theme="dark"] #admission-form select,
body.theme-dark .form-group input,
body.theme-dark .form-group textarea,
body.theme-dark .form-group select {
  background: #f3eefc !important;
  background-color: #f3eefc !important;
  color: #1a1528 !important;
  -webkit-text-fill-color: #1a1528 !important;
  caret-color: #1a1528 !important;
  border: 1.5px solid #c4b5e0 !important;
}

html[data-theme="dark"] .form-group input:focus,
html[data-theme="dark"] .form-group textarea:focus,
html[data-theme="dark"] .form-group select:focus,
body.theme-dark .form-group input:focus,
body.theme-dark .form-group textarea:focus {
  background: #ffffff !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2) !important;
}

/* Theme toggle on all pages, header-top only */
body:not([data-page="home"]) .theme-toggle {
  display: inline-flex !important;
}
.header-main > .theme-toggle {
  /* avoid overlap with school name — prefer header-top */
}
.header-top .theme-toggle {
  display: inline-flex !important;
  flex-shrink: 0;
}

/* ========== Admission school details — fully visible in dark mode ========== */
html[data-theme="dark"] .admission-school-card,
body.theme-dark .admission-school-card,
html[data-theme="dark"] body[data-page="admission"] .admission-school-card {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid rgba(91, 44, 111, 0.18) !important;
  color: #1a1528 !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35) !important;
}
html[data-theme="dark"] .admission-school-card::before,
body.theme-dark .admission-school-card::before {
  background: linear-gradient(90deg, #5B2C6F, #1A5276, #1E8449, #D4AF37) !important;
}
html[data-theme="dark"] .admission-school-card h2,
body.theme-dark .admission-school-card h2,
html[data-theme="dark"] #admission-school-name {
  color: #5B2C6F !important;
  -webkit-text-fill-color: #5B2C6F !important;
  opacity: 1 !important;
}
html[data-theme="dark"] .admission-school-card > p,
html[data-theme="dark"] #admission-school-addr,
body.theme-dark .admission-school-card > p {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  opacity: 1 !important;
}
html[data-theme="dark"] .admission-info-list,
html[data-theme="dark"] .admission-info-list li,
body.theme-dark .admission-info-list,
body.theme-dark .admission-info-list li {
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
  opacity: 1 !important;
  border-bottom-color: rgba(91, 44, 111, 0.15) !important;
}
html[data-theme="dark"] .admission-info-list li strong,
body.theme-dark .admission-info-list li strong {
  color: #5B2C6F !important;
  -webkit-text-fill-color: #5B2C6F !important;
  opacity: 1 !important;
}
html[data-theme="dark"] .admission-info-list a,
html[data-theme="dark"] #admission-phone,
html[data-theme="dark"] #admission-email,
body.theme-dark .admission-info-list a {
  color: #1A5276 !important;
  -webkit-text-fill-color: #1A5276 !important;
  opacity: 1 !important;
  text-decoration: underline;
}
html[data-theme="dark"] .admission-note,
body.theme-dark .admission-note {
  background: linear-gradient(135deg, #f0fdf4, #ecfdf5) !important;
  border-left: 4px solid #1E8449 !important;
  color: #166534 !important;
  -webkit-text-fill-color: #166534 !important;
  opacity: 1 !important;
}
html[data-theme="dark"] .admission-logo,
body.theme-dark .admission-logo,
html[data-theme="dark"] #admission-side-logo {
  background: #ffffff !important;
  box-shadow: 0 8px 24px rgba(91, 44, 111, 0.2) !important;
  border: 2px solid #f3eefc !important;
}
html[data-theme="dark"] .admission-closed-card,
body.theme-dark .admission-closed-card {
  background: #ffffff !important;
  color: #1a1528 !important;
  border: 1px solid rgba(91, 44, 111, 0.15) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3) !important;
}
html[data-theme="dark"] .admission-closed-card h2,
html[data-theme="dark"] .admission-closed-card p,
body.theme-dark .admission-closed-card h2,
body.theme-dark .admission-closed-card p {
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
  opacity: 1 !important;
}
html[data-theme="dark"] .adm-fieldset legend,
body.theme-dark .adm-fieldset legend {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html[data-theme="dark"] .adm-fieldset,
body.theme-dark .adm-fieldset {
  background: #ffffff !important;
  border-color: rgba(91, 44, 111, 0.12) !important;
  color: #1a1528 !important;
}
html[data-theme="dark"] .adm-consent,
body.theme-dark .adm-consent {
  background: linear-gradient(135deg, #f0fdf4, #ecfdf5) !important;
  border: 1px solid #86efac !important;
  color: #166534 !important;
}
html[data-theme="dark"] .adm-consent label,
body.theme-dark .adm-consent label {
  color: #166534 !important;
  -webkit-text-fill-color: #166534 !important;
}


/* ===== Lightbox title & description (captions) ===== */
.lightbox-content h3#lightbox-title,
.lightbox-content #lightbox-title {
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  margin: 14px 8px 6px;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.lightbox-content p#lightbox-desc,
.lightbox-content #lightbox-desc {
  color: rgba(255,255,255,0.9);
  font-size: 0.92rem;
  line-height: 1.45;
  margin: 0 8px 8px;
  text-align: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* Mobile admin icon button */
.mobile-nav a.admin-link,
.mobile-nav a[href*="admin/login"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 6px !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: inherit !important;
  font-size: 0 !important;
  margin-top: 8px;
  box-shadow: none !important;
  opacity: 0.8;
}
.mobile-nav a.admin-link img,
.mobile-nav a[href*="admin/login"] img {
  width: 20px;
  height: 20px;
  display: block;
  filter: none;
}

/* ===== Verify / Success popup modals ===== */
.bbss-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 10, 30, 0.72);
  backdrop-filter: blur(8px);
  animation: bbssPopIn 0.25s ease;
}
@keyframes bbssPopIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.bbss-popup-box {
  width: min(440px, 100%);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  overflow: hidden;
  animation: bbssPopScale 0.28s cubic-bezier(.2,.8,.2,1);
}
@keyframes bbssPopScale {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.bbss-popup-box.success-box {
  border-top: 5px solid #16a34a;
}
.bbss-popup-box.verify-box {
  border-top: 5px solid #5B2C6F;
}
.bbss-popup-body {
  padding: 28px 24px 20px;
  text-align: center;
}
.bbss-popup-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
}
.bbss-popup-icon.verify {
  background: #f3e8ff;
  color: #5B2C6F;
}
.bbss-popup-icon.success {
  background: #dcfce7;
  color: #16a34a;
}
.bbss-popup-body h3 {
  margin: 0 0 10px;
  font-size: 1.2rem;
  color: #1a1a2e;
}
.bbss-popup-body p {
  margin: 0;
  color: #4b5563;
  font-size: 0.95rem;
  line-height: 1.5;
}
.bbss-popup-review {
  text-align: left;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 16px 0 0;
  max-height: 220px;
  overflow: auto;
  font-size: 0.88rem;
  color: #334155;
}
.bbss-popup-review dt {
  font-weight: 700;
  color: #5B2C6F;
  margin-top: 8px;
}
.bbss-popup-review dt:first-child { margin-top: 0; }
.bbss-popup-review dd {
  margin: 2px 0 0;
  color: #1e293b;
}
.bbss-popup-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 0 24px 24px;
  flex-wrap: wrap;
}
.bbss-popup-actions .btn {
  min-width: 120px;
}


/* Admin: plain lock icon, no red background */
.nav-desktop a.admin-link,
.mobile-nav a.admin-link,
.mobile-nav a[href*="admin/login"],
a.admin-link {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  color: #334155 !important;
  font-size: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 4px !important;
  border-radius: 6px !important;
}
.nav-desktop a.admin-link:hover,
.mobile-nav a.admin-link:hover,
a.admin-link:hover {
  background: transparent !important;
  background-image: none !important;
  color: #5B2C6F !important;
  box-shadow: none !important;
  transform: none !important;
}
.nav-desktop a.admin-link img,
.mobile-nav a.admin-link img,
a.admin-link img {
  width: 18px !important;
  height: 18px !important;
  filter: none !important;
  opacity: 0.85;
}
a.admin-link:hover img {
  opacity: 1;
}
html[data-theme="dark"] a.admin-link,
html[data-theme="dark"] .nav-desktop a.admin-link {
  color: #e2e8f0 !important;
}


/* Photo icon actions – small visible icons at bottom of image */
.card-img,
.nn-thumb,
.hc-fac-photo,
.home-compact-item .thumb {
  position: relative;
}
.photo-icon-actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 10px;
  background: linear-gradient(transparent, rgba(15, 10, 30, 0.65));
  z-index: 5;
  pointer-events: none;
}
.photo-icon-actions .pic-btn {
  pointer-events: auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  transition: transform 0.15s ease, filter 0.15s ease;
  color: #fff !important;
  padding: 0;
  line-height: 0;
}
.photo-icon-actions .pic-btn:hover {
  transform: scale(1.08);
  filter: brightness(1.08);
}
.photo-icon-actions .pic-view {
  background: #c0392b !important;
}
.photo-icon-actions .pic-dl {
  background: #16a34a !important;
}
.photo-icon-actions .pic-btn svg {
  display: block;
  flex-shrink: 0;
}

/* Facilities cards */
.facility-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.facility-card .card-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  margin: 0 0 12px;
  background: #eef1f5;
}
.facility-card .card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.facility-card .nn-actions,
.hc-facility-card .nn-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.facility-card .nn-btn-read,
.hc-facility-card .nn-btn-read {
  background: #f1f3f5 !important;
  color: #1e293b !important;
  border: none !important;
  font-size: 0.75rem !important;
  padding: 6px 12px !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
}
html[data-theme="dark"] .facility-card .nn-btn-read,
html[data-theme="dark"] .hc-facility-card .nn-btn-read,
html[data-theme="dark"] .hc-facility-card-photo .nn-btn-read,
body.theme-dark .facility-card .nn-btn-read,
body.theme-dark .hc-facility-card .nn-btn-read,
body.theme-dark .hc-facility-card-photo .nn-btn-read {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
  color: #ffffff !important;
  border: 1px solid #c4b5fd !important;
  box-shadow: 0 2px 10px rgba(109, 40, 217, 0.45) !important;
}
.hc-facility-card {
  cursor: default;
  text-decoration: none;
  color: inherit;
}
.hc-facility-card .hc-fac-body p,
.facility-card p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* Home compact: allow actions to show */
.home-compact-item {
  overflow: visible !important;
}
.home-compact-item .thumb {
  overflow: hidden;
  border-radius: 10px;
}
.home-compact-item .body {
  overflow: visible;
}
.home-compact-item .nn-actions {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}



/* Facilities: one-line description, equal card heights */
.facility-card,
.hc-facility-card-photo {
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
  min-height: 0;
}
.facility-card h3,
.hc-facility-card-photo .hc-fac-body h4 {
  margin-bottom: 6px !important;
  min-height: 1.4em;
}
.facility-card > p,
.hc-facility-card-photo .hc-fac-body > p {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 1 !important;
  line-clamp: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  max-height: 1.5em !important;
  margin: 0 0 8px !important;
  line-height: 1.45 !important;
  font-size: 0.88rem !important;
  color: #64748b;
}
.facility-card .nn-actions,
.hc-facility-card-photo .nn-actions {
  margin-top: auto !important;
  padding-top: 4px;
  border-top: none;
}
#facilities-grid,
.facilities-grid,
body.home-clean .hc-facilities-grid {
  align-items: stretch;
}
#facilities-grid .facility-card,
.hc-facilities-grid .hc-facility-card {
  align-self: stretch;
}


/* Dark mode: Read More clearly visible */
html[data-theme="dark"] .nn-btn-read,
body.theme-dark .nn-btn-read,
html[data-theme="dark"] .facility-card .nn-btn-read,
body.theme-dark .facility-card .nn-btn-read,
html[data-theme="dark"] .hc-facility-card .nn-btn-read,
body.theme-dark .hc-facility-card .nn-btn-read,
html[data-theme="dark"] .home-compact-item .nn-btn-read,
body.theme-dark .home-compact-item .nn-btn-read,
html[data-theme="dark"] .nn-card .nn-btn-read,
body.theme-dark .nn-card .nn-btn-read {
  background: #4c1d95 !important;
  color: #f8fafc !important;
  border: 1px solid rgba(196, 181, 253, 0.45) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
html[data-theme="dark"] .nn-btn-read:hover,
body.theme-dark .nn-btn-read:hover,
html[data-theme="dark"] .facility-card .nn-btn-read:hover,
body.theme-dark .facility-card .nn-btn-read:hover,
html[data-theme="dark"] .hc-facility-card .nn-btn-read:hover,
body.theme-dark .hc-facility-card .nn-btn-read:hover {
  background: #6d28d9 !important;
  color: #ffffff !important;
  border-color: #c4b5fd !important;
}
html[data-theme="dark"] .facility-card > p,
html[data-theme="dark"] .hc-facility-card-photo .hc-fac-body > p,
body.theme-dark .facility-card > p,
body.theme-dark .hc-facility-card-photo .hc-fac-body > p {
  color: #94a3b8 !important;
}


/* Dark mode Read More – high contrast (final override) */
html[data-theme="dark"] .nn-btn.nn-btn-read,
body.theme-dark .nn-btn.nn-btn-read,
html[data-theme="dark"] button.nn-btn-read,
body.theme-dark button.nn-btn-read {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
  color: #ffffff !important;
  border: 1px solid #c4b5fd !important;
  box-shadow: 0 2px 8px rgba(109, 40, 217, 0.4) !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-weight: 700 !important;
}
html[data-theme="dark"] .nn-btn.nn-btn-read:hover,
body.theme-dark .nn-btn.nn-btn-read:hover {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  color: #ffffff !important;
  border-color: #ede9fe !important;
}


/* Dark theme: More nav visible */
html[data-theme="dark"] .nav-more-btn,
body.theme-dark .nav-more-btn {
  color: #ffffff !important;
  font-weight: 600 !important;
}
html[data-theme="dark"] .nav-more-menu a,
body.theme-dark .nav-more-menu a {
  color: #f8fafc !important;
}


/* ========== News share ========== */
.nn-btn-share {
  background: #52228f !important;
  color: #fff !important;
  border-color: #52228f !important;
}
.nn-btn-share:hover {
  background: #3b176c !important;
  border-color: #3b176c !important;
}
.detail-share-action {
  background: #52228f !important;
  color: #fff !important;
  border-color: #52228f !important;
}
.bbss-share-overlay {
  position: fixed; inset: 0; z-index: 10050;
  background: rgba(15,23,42,.5);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.bbss-share-box {
  width: 100%; max-width: 420px;
  background: #fff; border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  overflow: hidden;
}
.bbss-share-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; border-bottom: 1px solid #e2e8f0; font-weight: 800;
}
.bbss-share-close {
  border: 0; background: transparent; font-size: 22px; cursor: pointer; line-height: 1; color: #64748b;
}
.bbss-share-thumb {
  background: #0f172a; max-height: 220px; overflow: hidden;
}
.bbss-share-thumb img {
  width: 100%; height: 220px; object-fit: contain; display: block;
}
.bbss-share-title {
  padding: 12px 14px 4px; font-weight: 800; color: #0f172a; font-size: 1rem;
}
.bbss-share-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 14px 16px;
}
.bbss-share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 12px; border-radius: 10px; font-weight: 800; font-size: .9rem;
  text-decoration: none; border: 1px solid #e2e8f0; background: #f8fafc; color: #0f172a; cursor: pointer;
}
.bbss-share-btn.wa { background: #25d366; border-color: #25d366; color: #fff; }
.bbss-share-btn.fb { background: #1877f2; border-color: #1877f2; color: #fff; }
.bbss-share-btn.tw { background: #0f172a; border-color: #0f172a; color: #fff; }
.bbss-share-btn.copy { background: #fff; }

.bbss-share-excerpt {
  padding: 0 14px 8px;
  color: #475569;
  font-size: .9rem;
  line-height: 1.45;
  max-height: 4.5em;
  overflow: hidden;
}


/* ========== Student / Parent Portal nav button ========== */
.nav-desktop a.nav-portal {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  color: #fff !important;
  background: linear-gradient(135deg, #6d28d9 0%, #0d9488 100%) !important;
  border: none !important;
  box-shadow: 0 8px 18px rgba(109, 40, 217, 0.28);
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.nav-desktop a.nav-portal:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(13, 148, 136, 0.32);
  color: #fff !important;
}
.nav-desktop a.nav-portal.active {
  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: 2px;
}
.mobile-nav a.nav-portal {
  display: block !important;
  margin: 8px 0 !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  text-align: center;
  color: #fff !important;
  background: linear-gradient(135deg, #6d28d9 0%, #0d9488 100%) !important;
  box-shadow: 0 8px 18px rgba(109, 40, 217, 0.22);
}


/* ===== Student / Parent Login — high visibility ===== */
.nav-desktop a.nav-portal,
.nav-desktop a.nav-portal:link,
.nav-desktop a.nav-portal:visited {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 9px 16px !important;
  margin-left: 6px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 0.8rem !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #7c3aed 0%, #0d9488 100%) !important;
  border: 2px solid rgba(255,255,255,0.35) !important;
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.35) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  position: relative !important;
  z-index: 5 !important;
}
.nav-desktop a.nav-portal:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}
.mobile-nav a.nav-portal {
  display: block !important;
  margin: 10px 12px !important;
  padding: 14px 16px !important;
  border-radius: 14px !important;
  text-align: center !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  color: #fff !important;
  background: linear-gradient(135deg, #7c3aed, #0d9488) !important;
  box-shadow: 0 10px 24px rgba(124,58,237,.28) !important;
}

/* Floating always-on button */
a.floating-portal {
  position: fixed !important;
  right: 16px !important;
  bottom: 22px !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  border-radius: 18px !important;
  text-decoration: none !important;
  color: #fff !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #6d28d9 0%, #0d9488 100%) !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.35), 0 0 0 3px rgba(255,255,255,0.25) !important;
  animation: fpPulse 2.4s ease-in-out infinite !important;
}
a.floating-portal .fp-ico { font-size: 22px; line-height: 1; }
a.floating-portal .fp-txt { font-size: 12px; line-height: 1.25; text-align: left; }
a.floating-portal:hover { filter: brightness(1.07); transform: translateY(-2px); }
@keyframes fpPulse {
  0%, 100% { box-shadow: 0 14px 36px rgba(15,23,42,.35), 0 0 0 3px rgba(255,255,255,.25); }
  50% { box-shadow: 0 16px 40px rgba(109,40,217,.45), 0 0 0 5px rgba(255,255,255,.35); }
}
@media (max-width: 640px) {
  a.floating-portal { right: 12px; bottom: 16px; padding: 11px 13px; border-radius: 16px; }
  a.floating-portal .fp-txt { font-size: 11px; }
}


/* ===== Floating portal (LEFT) + Smart Board (RIGHT) ===== */
a.floating-portal,
a.floating-smartboard-btn {
  position: fixed !important;
  bottom: 22px !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  border-radius: 18px !important;
  text-decoration: none !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.32), 0 0 0 3px rgba(255,255,255,0.25) !important;
}
a.floating-portal {
  left: 16px !important;
  right: auto !important;
  background: linear-gradient(135deg, #6d28d9 0%, #0d9488 100%) !important;
}
a.floating-smartboard-btn {
  right: 16px !important;
  left: auto !important;
  background: linear-gradient(135deg, #0878d1 0%, #0d9488 100%) !important;
}
a.floating-portal .fp-ico,
a.floating-smartboard-btn .fp-ico { font-size: 22px; line-height: 1; }
a.floating-portal:hover,
a.floating-smartboard-btn:hover { filter: brightness(1.07); transform: translateY(-2px); }
/* Hide old floating-smartboard class if any */
.floating-smartboard { display: none !important; }
@media (max-width: 640px) {
  a.floating-portal { left: 10px !important; bottom: 14px !important; padding: 10px 12px !important; }
  a.floating-smartboard-btn { right: 10px !important; bottom: 14px !important; padding: 10px 12px !important; }
  a.floating-portal .fp-txt,
  a.floating-smartboard-btn .fp-txt { font-size: 11px; }
}


/* =========================================================
   FOOTER v2 – compact + horizontal quick links
   ========================================================= */
.footer.footer-animated,
.footer {
  padding: 28px 0 0 !important;
}
.footer .footer-grid,
.footer-grid {
  display: grid !important;
  grid-template-columns: 1.2fr 1.6fr 0.8fr !important;
  gap: 20px 28px !important;
  margin-bottom: 14px !important;
  align-items: start !important;
}
.footer .footer-links,
.footer-links {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}
.footer .footer-links a,
.footer-links a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 12px !important;
  margin: 0 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.92) !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(245,215,110,0.22) !important;
  border-radius: 999px !important;
  line-height: 1.2 !important;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease !important;
  transform: none !important;
}
.footer .footer-links a:hover,
.footer-links a:hover {
  background: rgba(245,215,110,0.2) !important;
  color: #F5D76E !important;
  border-color: rgba(245,215,110,0.55) !important;
  transform: translateY(-2px) !important;
}
.footer h4 {
  margin-bottom: 10px !important;
}
.footer-brand p {
  max-width: 280px;
}
@media (max-width: 900px) {
  .footer .footer-grid,
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}


/* Force Calendar + Routine visible in mobile sidebar */
.mobile-nav a.nav-calendar,
.mobile-nav a.nav-routine,
.mobile-nav a[href="calendar"],
.mobile-nav a[href="routine"],
.mobile-nav a[href="calendar.html"],
.mobile-nav a[href="routine.html"] {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
body.calendar-nav-hidden .mobile-nav a.nav-calendar,
body.routine-nav-hidden .mobile-nav a.nav-routine {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}


/* =========================================================
   UNIFIED THEME SLIDER — same on every page
   ========================================================= */
button.theme-toggle,
.theme-toggle {
  all: unset;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 76px !important;
  height: 36px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  padding: 0 !important;
  margin: 0 0 0 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  position: relative !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}
button.theme-toggle .theme-track,
.theme-toggle .theme-track {
  position: relative !important;
  display: block !important;
  width: 76px !important;
  height: 36px !important;
  border-radius: 999px !important;
  background: #94a3b8 !important;
  box-shadow: inset 0 2px 5px rgba(15,23,42,.28) !important;
  overflow: hidden !important;
  transition: background .25s ease !important;
}
button.theme-toggle .theme-text,
.theme-toggle .theme-text {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-family: system-ui, -apple-system, Segoe UI, sans-serif !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  line-height: 1 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  transition: opacity .2s ease !important;
}
button.theme-toggle .theme-text-off,
.theme-toggle .theme-text-off {
  right: 11px !important;
  left: auto !important;
  color: #fff !important;
  opacity: 1 !important;
}
button.theme-toggle .theme-text-on,
.theme-toggle .theme-text-on {
  left: 12px !important;
  right: auto !important;
  color: #fff !important;
  opacity: 0 !important;
}
button.theme-toggle .theme-knob,
.theme-toggle .theme-knob {
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
  transition: transform .28s cubic-bezier(.4,0,.2,1) !important;
  transform: translateX(0) !important;
  color: #f59e0b !important;
}
button.theme-toggle .theme-knob svg,
.theme-toggle .theme-knob svg {
  width: 14px !important;
  height: 14px !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%,-50%) !important;
  transition: opacity .2s ease !important;
}
button.theme-toggle .icon-sun,
.theme-toggle .icon-sun { opacity: 1 !important; }
button.theme-toggle .icon-moon,
.theme-toggle .icon-moon { opacity: 0 !important; color: #312e81 !important; }

/* ON = dark mode */
html[data-theme="dark"] button.theme-toggle .theme-track,
html[data-theme="dark"] .theme-toggle .theme-track,
body.theme-dark button.theme-toggle .theme-track,
body.theme-dark .theme-toggle .theme-track,
button.theme-toggle.is-dark .theme-track,
.theme-toggle.is-dark .theme-track {
  background: #0f766e !important;
}
html[data-theme="dark"] button.theme-toggle .theme-knob,
html[data-theme="dark"] .theme-toggle .theme-knob,
body.theme-dark button.theme-toggle .theme-knob,
body.theme-dark .theme-toggle .theme-knob,
button.theme-toggle.is-dark .theme-knob,
.theme-toggle.is-dark .theme-knob {
  transform: translateX(40px) !important;
  color: #312e81 !important;
}
html[data-theme="dark"] button.theme-toggle .theme-text-off,
html[data-theme="dark"] .theme-toggle .theme-text-off,
body.theme-dark button.theme-toggle .theme-text-off,
body.theme-dark .theme-toggle .theme-text-off,
button.theme-toggle.is-dark .theme-text-off,
.theme-toggle.is-dark .theme-text-off {
  opacity: 0 !important;
}
html[data-theme="dark"] button.theme-toggle .theme-text-on,
html[data-theme="dark"] .theme-toggle .theme-text-on,
body.theme-dark button.theme-toggle .theme-text-on,
body.theme-dark .theme-toggle .theme-text-on,
button.theme-toggle.is-dark .theme-text-on,
.theme-toggle.is-dark .theme-text-on {
  opacity: 1 !important;
}
html[data-theme="dark"] button.theme-toggle .icon-sun,
html[data-theme="dark"] .theme-toggle .icon-sun,
body.theme-dark button.theme-toggle .icon-sun,
body.theme-dark .theme-toggle .icon-sun,
button.theme-toggle.is-dark .icon-sun,
.theme-toggle.is-dark .icon-sun {
  opacity: 0 !important;
}
html[data-theme="dark"] button.theme-toggle .icon-moon,
html[data-theme="dark"] .theme-toggle .icon-moon,
body.theme-dark button.theme-toggle .icon-moon,
body.theme-dark .theme-toggle .icon-moon,
button.theme-toggle.is-dark .icon-moon,
.theme-toggle.is-dark .icon-moon {
  opacity: 1 !important;
}

.header-top .container {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.header-top-right {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto !important;
}
.header-main > .theme-toggle {
  display: inline-flex !important;
}


/* FOOTER QUICK LINKS full set — never clip pills */
.footer .footer-links,
.footer-links {
  max-height: none !important;
  overflow: visible !important;
  flex-wrap: wrap !important;
}
.footer .footer-links a[hidden] {
  /* admission may still hide via JS when closed */
}


/* Footer social pills from admin */
.footer .social-links {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.footer .social-links a.social-pill,
.footer .social-links a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(245,215,110,0.28) !important;
  color: #fff !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.footer .social-links a.social-pill:hover {
  background: rgba(245,215,110,0.22) !important;
  color: #F5D76E !important;
}
.footer .social-letter {
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(245,215,110,0.25); font-size: 11px; font-weight: 900;
}


/* Footer Connect — logo-only social icons (admin managed) */
.footer .social-links {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
}
.footer .social-links a.social-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(245,215,110,0.3) !important;
  color: #fff !important;
  text-decoration: none !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease !important;
}
.footer .social-links a.social-icon-btn:hover {
  transform: translateY(-2px) scale(1.06);
  background: rgba(245,215,110,0.25) !important;
  border-color: rgba(245,215,110,0.55) !important;
  color: #F5D76E !important;
}
.footer .social-links a.social-icon-btn .social-icon-img {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
  border-radius: 4px !important;
  display: block !important;
}
.footer .social-links a.social-icon-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}
.footer .social-links a.social-icon-btn .social-letter {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(245,215,110,0.25); font-size: 12px; font-weight: 900;
  color: #fff;
}


/* Designer credit — name then role on next line */
.footer-credit-text{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1px;
  line-height:1.25;
}
.footer-credit .designer-name{
  font-weight:800;
  letter-spacing:.01em;
}
.footer-credit .credit-role{
  display:block;
  font-size:.78em;
  font-weight:600;
  opacity:.85;
}
.footer-credit .designed-label{
  opacity:.85;
  font-weight:600;
  font-size:.85em;
}


/* ===== PUBLIC NAV + SEARCH THEME FIX ===== */
/* Dark mode: all nav tabs same readable color (no mixed white/dark) */
html[data-theme="dark"] .nav-desktop a,
html[data-theme="dark"] .nav-desktop a.nav-smartboard,
html[data-theme="dark"] .nav-desktop a.admin-link,
html[data-theme="dark"] .nav-desktop a.nav-admission,
html[data-theme="dark"] .nav-desktop a.nav-results,
html[data-theme="dark"] .nav-desktop a.nav-calendar,
html[data-theme="dark"] .nav-desktop a.nav-routine,
html[data-theme="dark"] .nav-more-btn,
html[data-theme="dark"] .mobile-nav a,
body.theme-dark .nav-desktop a,
body.theme-dark .nav-desktop a.nav-smartboard,
body.theme-dark .nav-desktop a.admin-link,
body.theme-dark .nav-more-btn,
body.theme-dark .mobile-nav a {
  color: #eae6f5 !important;
  background: transparent !important;
}
html[data-theme="dark"] .nav-desktop a:hover,
html[data-theme="dark"] .nav-desktop a.active,
html[data-theme="dark"] .nav-more-btn:hover,
html[data-theme="dark"] .nav-more.open .nav-more-btn,
html[data-theme="dark"] .mobile-nav a:hover,
html[data-theme="dark"] .mobile-nav a.active,
body.theme-dark .nav-desktop a:hover,
body.theme-dark .nav-desktop a.active,
body.theme-dark .nav-more-btn:hover,
body.theme-dark .nav-more.open .nav-more-btn,
body.theme-dark .mobile-nav a:hover,
body.theme-dark .mobile-nav a.active {
  color: #c4b5fd !important;
  background: rgba(124, 58, 237, 0.22) !important;
}
html[data-theme="dark"] .nav-more-menu,
body.theme-dark .nav-more-menu {
  background: #1e1b2e !important;
  border-color: rgba(196, 181, 253, 0.25) !important;
}
html[data-theme="dark"] .nav-more-menu a,
body.theme-dark .nav-more-menu a {
  color: #f1f5f9 !important;
  background: transparent !important;
}
html[data-theme="dark"] .nav-more-menu a:hover,
html[data-theme="dark"] .nav-more-menu a.active,
body.theme-dark .nav-more-menu a:hover,
body.theme-dark .nav-more-menu a.active {
  color: #e9d5ff !important;
  background: rgba(124, 58, 237, 0.25) !important;
}

/* Light mode: all nav tabs consistent dark text */
html[data-theme="light"] .nav-desktop a,
html[data-theme="light"] .nav-more-btn,
html[data-theme="light"] .mobile-nav a,
html:not([data-theme="dark"]) body:not(.theme-dark) .nav-desktop a,
html:not([data-theme="dark"]) body:not(.theme-dark) .nav-more-btn,
html:not([data-theme="dark"]) body:not(.theme-dark) .mobile-nav a {
  color: #1A1A2E !important;
}
html[data-theme="light"] .nav-more-menu a,
html:not([data-theme="dark"]) body:not(.theme-dark) .nav-more-menu a {
  color: #1e293b !important;
  background: transparent !important;
}
html[data-theme="light"] .nav-more-menu,
html:not([data-theme="dark"]) body:not(.theme-dark) .nav-more-menu {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}

/* Header search results always high-contrast (backup if JS style lags) */
.header-search-item,
a.header-search-item {
  color: #0f172a !important;
  background: #f1f5f9 !important;
}
html[data-theme="dark"] .header-search-item,
html[data-theme="dark"] a.header-search-item,
body.theme-dark .header-search-item,
body.theme-dark a.header-search-item {
  color: #f8fafc !important;
  background: #0f172a !important;
}
.header-search-panel {
  z-index: 3000 !important;
}


/* ===== FULL PAGE LIGHT/DARK SURFACE FIX ===== */
/*
  Dark mode: page + cards + forms all dark with light text
  Light mode: page + cards + forms all light with dark text
*/

/* --- Page shell --- */
html[data-theme="dark"] body,
body.theme-dark {
  background: #12101a !important;
  color: #eae6f5 !important;
}
html[data-theme="light"] body,
html:not([data-theme="dark"]) body:not(.theme-dark) {
  background: #ffffff !important;
  color: #1a1a2e !important;
}

html[data-theme="dark"] .page-hero,
html[data-theme="dark"] .page-content,
html[data-theme="dark"] main,
html[data-theme="dark"] .section,
html[data-theme="dark"] .container > section,
body.theme-dark .page-hero,
body.theme-dark .page-content,
body.theme-dark main {
  color: #eae6f5 !important;
}
html[data-theme="dark"] .page-hero h1,
html[data-theme="dark"] .page-content h1,
html[data-theme="dark"] .page-content h2,
html[data-theme="dark"] .page-content h3,
html[data-theme="dark"] main h1,
html[data-theme="dark"] main h2,
html[data-theme="dark"] main h3,
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3 {
  color: #f3eefc !important;
}
html[data-theme="dark"] p,
html[data-theme="dark"] .lead,
html[data-theme="dark"] .muted,
body.theme-dark p {
  color: #b6adc9 !important;
}

/* --- Cards & white panels → dark surfaces --- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .contact-form-pro,
html[data-theme="dark"] .contact-info-card,
html[data-theme="dark"] .contact-info-pro,
html[data-theme="dark"] .notice-item,
html[data-theme="dark"] .news-card-pro,
html[data-theme="dark"] .news-card-wide,
html[data-theme="dark"] .event-card-pro,
html[data-theme="dark"] .facility-card,
html[data-theme="dark"] .teacher-card,
html[data-theme="dark"] .level-card,
html[data-theme="dark"] .pro-card,
html[data-theme="dark"] .admission-card,
html[data-theme="dark"] .result-card,
html[data-theme="dark"] .calendar-card,
html[data-theme="dark"] .routine-card,
html[data-theme="dark"] .about-card,
html[data-theme="dark"] .info-box,
html[data-theme="dark"] .content-box,
html[data-theme="dark"] .detail-modal .modal-content,
html[data-theme="dark"] .modal-content,
body.theme-dark .card,
body.theme-dark .contact-form-pro,
body.theme-dark .contact-info-card,
body.theme-dark .notice-item,
body.theme-dark .news-card-pro,
body.theme-dark .news-card-wide,
body.theme-dark .event-card-pro,
body.theme-dark .facility-card,
body.theme-dark .teacher-card,
body.theme-dark .level-card,
body.theme-dark .pro-card,
body.theme-dark .info-box,
body.theme-dark .content-box,
body.theme-dark .modal-content {
  background: #1e1830 !important;
  border-color: #2d2640 !important;
  color: #eae6f5 !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.35) !important;
}

html[data-theme="dark"] .contact-form-pro h3,
html[data-theme="dark"] .card-body h3,
html[data-theme="dark"] .news-card-pro h3,
html[data-theme="dark"] .event-card-pro h3,
html[data-theme="dark"] .teacher-card h3,
html[data-theme="dark"] .facility-card h3,
html[data-theme="dark"] .level-card h3,
body.theme-dark .contact-form-pro h3,
body.theme-dark .card-body h3 {
  color: #f3eefc !important;
}

html[data-theme="dark"] .contact-lead,
html[data-theme="dark"] .contact-row p,
html[data-theme="dark"] .card-body p,
html[data-theme="dark"] .card-meta,
body.theme-dark .contact-lead,
body.theme-dark .contact-row p,
body.theme-dark .card-body p {
  color: #b6adc9 !important;
}

html[data-theme="dark"] .contact-row strong,
html[data-theme="dark"] .contact-row a,
body.theme-dark .contact-row strong {
  color: #eae6f5 !important;
}
html[data-theme="dark"] .contact-row a,
body.theme-dark .contact-row a {
  color: #c4b5fd !important;
}

/* --- Forms / inputs --- */
html[data-theme="dark"] .form-group label,
html[data-theme="dark"] label,
body.theme-dark .form-group label,
body.theme-dark label {
  color: #eae6f5 !important;
}
html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group textarea,
html[data-theme="dark"] .form-group select,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
body.theme-dark .form-group input,
body.theme-dark .form-group textarea,
body.theme-dark .form-group select,
body.theme-dark input[type="text"],
body.theme-dark input[type="email"],
body.theme-dark input[type="tel"],
body.theme-dark input[type="search"],
body.theme-dark textarea,
body.theme-dark select {
  background: #12101a !important;
  border-color: #3d3554 !important;
  color: #f3eefc !important;
}
html[data-theme="dark"] .form-group input::placeholder,
html[data-theme="dark"] .form-group textarea::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
  color: #8b7fa8 !important;
  opacity: 1 !important;
}
html[data-theme="dark"] .form-group input:focus,
html[data-theme="dark"] .form-group textarea:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
body.theme-dark input:focus,
body.theme-dark textarea:focus {
  border-color: #a78bfa !important;
  background: #16122a !important;
  box-shadow: 0 0 0 3px rgba(167,139,250,.2) !important;
  color: #f3eefc !important;
}

/* Outline buttons on dark */
html[data-theme="dark"] .btn-outline,
body.theme-dark .btn-outline {
  border-color: #c4b5fd !important;
  color: #c4b5fd !important;
  background: transparent !important;
}
html[data-theme="dark"] .btn-outline:hover,
body.theme-dark .btn-outline:hover {
  background: #7c3aed !important;
  color: #fff !important;
  border-color: #7c3aed !important;
}

/* Tables */
html[data-theme="dark"] table,
html[data-theme="dark"] .data-table,
body.theme-dark table {
  background: #1e1830 !important;
  color: #eae6f5 !important;
}
html[data-theme="dark"] thead th,
html[data-theme="dark"] th,
body.theme-dark thead th,
body.theme-dark th {
  background: #16122a !important;
  color: #c4b5fd !important;
  border-color: #2d2640 !important;
}
html[data-theme="dark"] td,
body.theme-dark td {
  border-color: #2d2640 !important;
  color: #eae6f5 !important;
}
html[data-theme="dark"] tr:nth-child(even),
html[data-theme="dark"] tr:nth-child(even) td,
body.theme-dark tr:nth-child(even),
body.theme-dark tr:nth-child(even) td {
  background: #19142a !important;
}

/* Header main bar (logo + nav) in dark */
html[data-theme="dark"] .header,
body.theme-dark .header {
  background: #1a1528 !important;
}
html[data-theme="dark"] .logo-text h1,
body.theme-dark .logo-text h1 {
  color: #c4b5fd !important;
}
html[data-theme="dark"] .logo-text span,
body.theme-dark .logo-text span {
  color: #a89bc4 !important;
}

/* --- Light mode restore (force light surfaces) --- */
html[data-theme="light"] .contact-form-pro,
html[data-theme="light"] .card,
html[data-theme="light"] .notice-item,
html[data-theme="light"] .news-card-pro,
html[data-theme="light"] .event-card-pro,
html[data-theme="light"] .facility-card,
html[data-theme="light"] .teacher-card,
html:not([data-theme="dark"]) body:not(.theme-dark) .contact-form-pro,
html:not([data-theme="dark"]) body:not(.theme-dark) .card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.06) !important;
  color: #1a1a2e !important;
  box-shadow: 0 8px 28px rgba(15,23,42,.08) !important;
}
html[data-theme="light"] .contact-form-pro h3,
html[data-theme="light"] .form-group label,
html[data-theme="light"] .contact-row strong,
html:not([data-theme="dark"]) body:not(.theme-dark) .contact-form-pro h3,
html:not([data-theme="dark"]) body:not(.theme-dark) .form-group label {
  color: #1a1a2e !important;
}
html[data-theme="light"] .form-group input,
html[data-theme="light"] .form-group textarea,
html:not([data-theme="dark"]) body:not(.theme-dark) .form-group input,
html:not([data-theme="dark"]) body:not(.theme-dark) .form-group textarea {
  background: #fafafa !important;
  border-color: #e5e7eb !important;
  color: #1a1a2e !important;
}
html[data-theme="light"] .form-group input::placeholder,
html:not([data-theme="dark"]) body:not(.theme-dark) .form-group input::placeholder {
  color: #94a3b8 !important;
}
html[data-theme="light"] .contact-lead,
html[data-theme="light"] .contact-row p,
html:not([data-theme="dark"]) body:not(.theme-dark) .contact-lead {
  color: #64748b !important;
}
html[data-theme="light"] .btn-outline,
html:not([data-theme="dark"]) body:not(.theme-dark) .btn-outline {
  border-color: var(--primary, #5B2C6F) !important;
  color: var(--primary, #5B2C6F) !important;
  background: transparent !important;
}

/* Map wrap stays neutral */
html[data-theme="dark"] .map-wrap,
body.theme-dark .map-wrap {
  border-color: #2d2640 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.35) !important;
}

/* Page title bars / breadcrumbs */
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .breadcrumb,
body.theme-dark .page-title,
body.theme-dark .breadcrumb {
  color: #eae6f5 !important;
}
html[data-theme="dark"] .breadcrumb a,
body.theme-dark .breadcrumb a {
  color: #c4b5fd !important;
}


/* ===== EVERY-TAB FULL THEME FIX ===== */

/* Body + main text */
html[data-theme="dark"] body,
body.theme-dark {
  background:#12101a !important;
  color:#eae6f5 !important;
}
html[data-theme="light"] body,
html:not([data-theme="dark"]) body:not(.theme-dark) {
  background:#ffffff !important;
  color:#1a1a2e !important;
}

/* All major content surfaces — DARK */
html[data-theme="dark"] .card,
body.theme-dark .card,
html[data-theme="dark"] .pro-card,
body.theme-dark .pro-card,
html[data-theme="dark"] .pro-mini-card,
body.theme-dark .pro-mini-card,
html[data-theme="dark"] .sum-card,
body.theme-dark .sum-card,
html[data-theme="dark"] .contact-form-pro,
body.theme-dark .contact-form-pro,
html[data-theme="dark"] .contact-info-pro,
body.theme-dark .contact-info-pro,
html[data-theme="dark"] .contact-info-card,
body.theme-dark .contact-info-card,
html[data-theme="dark"] .notice-item,
body.theme-dark .notice-item,
html[data-theme="dark"] .news-card-pro,
body.theme-dark .news-card-pro,
html[data-theme="dark"] .news-card-wide,
body.theme-dark .news-card-wide,
html[data-theme="dark"] .event-card-pro,
body.theme-dark .event-card-pro,
html[data-theme="dark"] .facility-card,
body.theme-dark .facility-card,
html[data-theme="dark"] .teacher-card,
body.theme-dark .teacher-card,
html[data-theme="dark"] .team-card,
body.theme-dark .team-card,
html[data-theme="dark"] .team-card-body,
body.theme-dark .team-card-body,
html[data-theme="dark"] .team-card-info,
body.theme-dark .team-card-info,
html[data-theme="dark"] .level-card,
body.theme-dark .level-card,
html[data-theme="dark"] .admission-closed-card,
body.theme-dark .admission-closed-card,
html[data-theme="dark"] .admission-school-card,
body.theme-dark .admission-school-card,
html[data-theme="dark"] .admission-form-wrap,
body.theme-dark .admission-form-wrap,
html[data-theme="dark"] .admission-side,
body.theme-dark .admission-side,
html[data-theme="dark"] .res-card,
body.theme-dark .res-card,
html[data-theme="dark"] .res-form,
body.theme-dark .res-form,
html[data-theme="dark"] .res-main,
body.theme-dark .res-main,
html[data-theme="dark"] .res-hero,
body.theme-dark .res-hero,
html[data-theme="dark"] .rt-wrap,
body.theme-dark .rt-wrap,
html[data-theme="dark"] .rt-hero-card,
body.theme-dark .rt-hero-card,
html[data-theme="dark"] .rt-head-block,
body.theme-dark .rt-head-block,
html[data-theme="dark"] .cal-page-shell,
body.theme-dark .cal-page-shell,
html[data-theme="dark"] .cal-page-main,
body.theme-dark .cal-page-main,
html[data-theme="dark"] .cal-next-main,
body.theme-dark .cal-next-main,
html[data-theme="dark"] .page-banner,
body.theme-dark .page-banner,
html[data-theme="dark"] .info-box,
body.theme-dark .info-box,
html[data-theme="dark"] .content-box,
body.theme-dark .content-box,
html[data-theme="dark"] .search-box,
body.theme-dark .search-box,
html[data-theme="dark"] .search-results,
body.theme-dark .search-results,
html[data-theme="dark"] .hc-block,
body.theme-dark .hc-block,
html[data-theme="dark"] .hc-search-wrap,
body.theme-dark .hc-search-wrap,
html[data-theme="dark"] .principal-wrap,
body.theme-dark .principal-wrap,
html[data-theme="dark"] .home-compact-item,
body.theme-dark .home-compact-item,
html[data-theme="dark"] .principal-card,
body.theme-dark .principal-card,
html[data-theme="dark"] .principal-side,
body.theme-dark .principal-side,
html[data-theme="dark"] .detail-modal-box,
body.theme-dark .detail-modal-box,
html[data-theme="dark"] .detail-modal-content,
body.theme-dark .detail-modal-content,
html[data-theme="dark"] .detail-modal-body,
body.theme-dark .detail-modal-body,
html[data-theme="dark"] .lightbox-content,
body.theme-dark .lightbox-content,
html[data-theme="dark"] .mobile-menu-content,
body.theme-dark .mobile-menu-content,
html[data-theme="dark"] .team-toolbar,
body.theme-dark .team-toolbar,
html[data-theme="dark"] .team-search,
body.theme-dark .team-search,
html[data-theme="dark"] .team-empty,
body.theme-dark .team-empty,
html[data-theme="dark"] .team-loading,
body.theme-dark .team-loading,
html[data-theme="dark"] .gs-wrap,
body.theme-dark .gs-wrap,
html[data-theme="dark"] .gs-content,
body.theme-dark .gs-content,
html[data-theme="dark"] .cd-wrap,
body.theme-dark .cd-wrap,
html[data-theme="dark"] .cd-list,
body.theme-dark .cd-list,
html[data-theme="dark"] .cd-item,
body.theme-dark .cd-item,
html[data-theme="dark"] .timeline-item,
body.theme-dark .timeline-item,
html[data-theme="dark"] .timeline-content,
body.theme-dark .timeline-content,
html[data-theme="dark"] .pro-intro,
body.theme-dark .pro-intro,
html[data-theme="dark"] .pro-intro-text,
body.theme-dark .pro-intro-text,
html[data-theme="dark"] .pro-intro-visual,
body.theme-dark .pro-intro-visual,
html[data-theme="dark"] .pro-stats,
body.theme-dark .pro-stats,
html[data-theme="dark"] .section-alt,
body.theme-dark .section-alt,
html[data-theme="dark"] .admission-step,
body.theme-dark .admission-step,
html[data-theme="dark"] .team-page,
body.theme-dark .team-page,
html[data-theme="dark"] .team-inner,
body.theme-dark .team-inner,
html[data-theme="dark"] .gallery-grid .gallery-item,
body.theme-dark .gallery-grid .gallery-item,
html[data-theme="dark"] .filter-btn,
body.theme-dark .filter-btn,
html[data-theme="dark"] .clip-search,
body.theme-dark .clip-search,
html[data-theme="dark"] .empty,
body.theme-dark .empty,
html[data-theme="dark"] .rt-empty,
body.theme-dark .rt-empty,
html[data-theme="dark"] .cal-empty-note,
body.theme-dark .cal-empty-note,
html[data-theme="dark"] .lead-empty-msg,
body.theme-dark .lead-empty-msg,
html[data-theme="dark"] .admission-note,
body.theme-dark .admission-note,
html[data-theme="dark"] .res-msg,
body.theme-dark .res-msg,
html[data-theme="dark"] .form-status,
body.theme-dark .form-status,
html[data-theme="dark"] .form-hint,
body.theme-dark .form-hint {
  background:#1e1830 !important;
  border-color:#2d2640 !important;
  color:#eae6f5 !important;
}

/* Nested text inside surfaces — DARK */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] .page-label,
html[data-theme="dark"] .section-header h2,
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .team-tabs-label,
html[data-theme="dark"] .admission-form-title,
html[data-theme="dark"] .cd-list-title,
html[data-theme="dark"] .res-hero h1,
html[data-theme="dark"] .res-hero h2,
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4,
body.theme-dark h5,
body.theme-dark .page-label,
body.theme-dark .section-header h2,
body.theme-dark .admission-form-title {
  color:#f3eefc !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] .lead,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .contact-lead,
html[data-theme="dark"] .admission-form-lead,
html[data-theme="dark"] .form-hint,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .team-empty,
html[data-theme="dark"] .rt-empty,
html[data-theme="dark"] .cal-empty-note,
html[data-theme="dark"] .lead-empty-msg,
html[data-theme="dark"] small,
html[data-theme="dark"] .card-meta,
html[data-theme="dark"] .team-line,
html[data-theme="dark"] .team-count,
body.theme-dark p,
body.theme-dark li,
body.theme-dark .lead,
body.theme-dark .muted,
body.theme-dark .contact-lead,
body.theme-dark .form-hint,
body.theme-dark .empty,
body.theme-dark small,
body.theme-dark .card-meta {
  color:#b6adc9 !important;
}

html[data-theme="dark"] strong,
html[data-theme="dark"] label,
html[data-theme="dark"] .form-group label,
html[data-theme="dark"] .contact-row strong,
html[data-theme="dark"] .admission-info-list li,
body.theme-dark strong,
body.theme-dark label,
body.theme-dark .form-group label,
body.theme-dark .contact-row strong {
  color:#eae6f5 !important;
}

html[data-theme="dark"] a:not(.btn):not(.btn-primary):not(.btn-outline):not(.header-search-item):not(.nav-desktop a):not(.mobile-nav a),
body.theme-dark a:not(.btn):not(.btn-primary):not(.btn-outline):not(.header-search-item):not(.nav-desktop a):not(.mobile-nav a) {
  color:#c4b5fd;
}

/* Forms everywhere — DARK */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group textarea,
html[data-theme="dark"] .form-group select,
html[data-theme="dark"] .team-search input,
html[data-theme="dark"] .search-box input,
html[data-theme="dark"] .clip-search input,
html[data-theme="dark"] .res-form input,
html[data-theme="dark"] .res-form select,
html[data-theme="dark"] .admission-form-wrap input,
html[data-theme="dark"] .admission-form-wrap select,
html[data-theme="dark"] .admission-form-wrap textarea,
body.theme-dark input[type="text"],
body.theme-dark input[type="email"],
body.theme-dark input[type="tel"],
body.theme-dark input[type="search"],
body.theme-dark input[type="number"],
body.theme-dark input[type="password"],
body.theme-dark input[type="date"],
body.theme-dark textarea,
body.theme-dark select,
body.theme-dark .form-group input,
body.theme-dark .form-group textarea,
body.theme-dark .form-group select,
body.theme-dark .team-search input,
body.theme-dark .search-box input,
body.theme-dark .res-form input,
body.theme-dark .res-form select,
body.theme-dark .admission-form-wrap input,
body.theme-dark .admission-form-wrap select,
body.theme-dark .admission-form-wrap textarea {
  background:#12101a !important;
  border-color:#3d3554 !important;
  color:#f3eefc !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
  color:#8b7fa8 !important;
  opacity:1 !important;
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus,
body.theme-dark input:focus,
body.theme-dark textarea:focus,
body.theme-dark select:focus {
  border-color:#a78bfa !important;
  background:#16122a !important;
  color:#f3eefc !important;
  box-shadow:0 0 0 3px rgba(167,139,250,.2) !important;
}

/* Team tabs */
html[data-theme="dark"] .team-tab,
html[data-theme="dark"] .filter-btn,
body.theme-dark .team-tab,
body.theme-dark .filter-btn {
  background:#16122a !important;
  color:#c4b5fd !important;
  border-color:#3d3554 !important;
}
html[data-theme="dark"] .team-tab.active,
html[data-theme="dark"] .team-tab:hover,
html[data-theme="dark"] .filter-btn.active,
html[data-theme="dark"] .filter-btn:hover,
body.theme-dark .team-tab.active,
body.theme-dark .team-tab:hover,
body.theme-dark .filter-btn.active,
body.theme-dark .filter-btn:hover {
  background:rgba(124,58,237,.28) !important;
  color:#f3eefc !important;
  border-color:#7c3aed !important;
}

/* Tables all pages */
html[data-theme="dark"] table,
html[data-theme="dark"] .data-table,
html[data-theme="dark"] .results-table,
html[data-theme="dark"] .routine-table,
body.theme-dark table,
body.theme-dark .data-table {
  background:#1e1830 !important;
  color:#eae6f5 !important;
}
html[data-theme="dark"] th,
body.theme-dark th {
  background:#16122a !important;
  color:#c4b5fd !important;
  border-color:#2d2640 !important;
}
html[data-theme="dark"] td,
body.theme-dark td {
  border-color:#2d2640 !important;
  color:#eae6f5 !important;
}
html[data-theme="dark"] tr:nth-child(even) td,
body.theme-dark tr:nth-child(even) td {
  background:#19142a !important;
}

/* Buttons outline */
html[data-theme="dark"] .btn-outline,
body.theme-dark .btn-outline {
  border-color:#c4b5fd !important;
  color:#c4b5fd !important;
  background:transparent !important;
}
html[data-theme="dark"] .btn-outline:hover,
body.theme-dark .btn-outline:hover {
  background:#7c3aed !important;
  color:#fff !important;
}

/* Header nav consistency already handled; reinforce logo/header */
html[data-theme="dark"] .header,
body.theme-dark .header {
  background:#1a1528 !important;
}
html[data-theme="dark"] .logo-text h1,
body.theme-dark .logo-text h1 { color:#c4b5fd !important; }
html[data-theme="dark"] .logo-text span,
body.theme-dark .logo-text span { color:#a89bc4 !important; }

html[data-theme="dark"] .nav-desktop a,
html[data-theme="dark"] .nav-more-btn,
html[data-theme="dark"] .mobile-nav a,
body.theme-dark .nav-desktop a,
body.theme-dark .nav-more-btn,
body.theme-dark .mobile-nav a {
  color:#eae6f5 !important;
}
html[data-theme="dark"] .nav-desktop a:hover,
html[data-theme="dark"] .nav-desktop a.active,
html[data-theme="dark"] .nav-more-btn:hover,
html[data-theme="dark"] .nav-more.open .nav-more-btn,
html[data-theme="dark"] .mobile-nav a:hover,
html[data-theme="dark"] .mobile-nav a.active,
body.theme-dark .nav-desktop a:hover,
body.theme-dark .nav-desktop a.active,
body.theme-dark .nav-more-btn:hover,
body.theme-dark .mobile-nav a:hover,
body.theme-dark .mobile-nav a.active {
  color:#c4b5fd !important;
  background:rgba(124,58,237,.22) !important;
}
html[data-theme="dark"] .nav-more-menu,
body.theme-dark .nav-more-menu {
  background:#1e1b2e !important;
  border-color:rgba(196,181,253,.25) !important;
}
html[data-theme="dark"] .nav-more-menu a,
body.theme-dark .nav-more-menu a {
  color:#f1f5f9 !important;
}
html[data-theme="dark"] .nav-more-menu a:hover,
html[data-theme="dark"] .nav-more-menu a.active,
body.theme-dark .nav-more-menu a:hover,
body.theme-dark .nav-more-menu a.active {
  color:#e9d5ff !important;
  background:rgba(124,58,237,.25) !important;
}

/* Modals / lightbox */
html[data-theme="dark"] .detail-modal-backdrop,
html[data-theme="dark"] .lightbox,
body.theme-dark .detail-modal-backdrop,
body.theme-dark .lightbox {
  background:rgba(8,6,16,.82) !important;
}

/* ========== LIGHT MODE FORCE ========== */
html[data-theme="light"] .card,
html:not([data-theme="dark"]) body:not(.theme-dark) .card,
html[data-theme="light"] .pro-card,
html:not([data-theme="dark"]) body:not(.theme-dark) .pro-card,
html[data-theme="light"] .pro-mini-card,
html:not([data-theme="dark"]) body:not(.theme-dark) .pro-mini-card,
html[data-theme="light"] .sum-card,
html:not([data-theme="dark"]) body:not(.theme-dark) .sum-card,
html[data-theme="light"] .contact-form-pro,
html:not([data-theme="dark"]) body:not(.theme-dark) .contact-form-pro,
html[data-theme="light"] .contact-info-pro,
html:not([data-theme="dark"]) body:not(.theme-dark) .contact-info-pro,
html[data-theme="light"] .contact-info-card,
html:not([data-theme="dark"]) body:not(.theme-dark) .contact-info-card,
html[data-theme="light"] .notice-item,
html:not([data-theme="dark"]) body:not(.theme-dark) .notice-item,
html[data-theme="light"] .news-card-pro,
html:not([data-theme="dark"]) body:not(.theme-dark) .news-card-pro,
html[data-theme="light"] .news-card-wide,
html:not([data-theme="dark"]) body:not(.theme-dark) .news-card-wide,
html[data-theme="light"] .event-card-pro,
html:not([data-theme="dark"]) body:not(.theme-dark) .event-card-pro,
html[data-theme="light"] .facility-card,
html:not([data-theme="dark"]) body:not(.theme-dark) .facility-card,
html[data-theme="light"] .teacher-card,
html:not([data-theme="dark"]) body:not(.theme-dark) .teacher-card,
html[data-theme="light"] .team-card,
html:not([data-theme="dark"]) body:not(.theme-dark) .team-card,
html[data-theme="light"] .team-card-body,
html:not([data-theme="dark"]) body:not(.theme-dark) .team-card-body,
html[data-theme="light"] .team-card-info,
html:not([data-theme="dark"]) body:not(.theme-dark) .team-card-info,
html[data-theme="light"] .level-card,
html:not([data-theme="dark"]) body:not(.theme-dark) .level-card,
html[data-theme="light"] .admission-closed-card,
html:not([data-theme="dark"]) body:not(.theme-dark) .admission-closed-card,
html[data-theme="light"] .admission-school-card,
html:not([data-theme="dark"]) body:not(.theme-dark) .admission-school-card,
html[data-theme="light"] .admission-form-wrap,
html:not([data-theme="dark"]) body:not(.theme-dark) .admission-form-wrap,
html[data-theme="light"] .admission-side,
html:not([data-theme="dark"]) body:not(.theme-dark) .admission-side,
html[data-theme="light"] .res-card,
html:not([data-theme="dark"]) body:not(.theme-dark) .res-card,
html[data-theme="light"] .res-form,
html:not([data-theme="dark"]) body:not(.theme-dark) .res-form,
html[data-theme="light"] .res-main,
html:not([data-theme="dark"]) body:not(.theme-dark) .res-main,
html[data-theme="light"] .res-hero,
html:not([data-theme="dark"]) body:not(.theme-dark) .res-hero,
html[data-theme="light"] .rt-wrap,
html:not([data-theme="dark"]) body:not(.theme-dark) .rt-wrap,
html[data-theme="light"] .rt-hero-card,
html:not([data-theme="dark"]) body:not(.theme-dark) .rt-hero-card,
html[data-theme="light"] .rt-head-block,
html:not([data-theme="dark"]) body:not(.theme-dark) .rt-head-block,
html[data-theme="light"] .cal-page-shell,
html:not([data-theme="dark"]) body:not(.theme-dark) .cal-page-shell,
html[data-theme="light"] .cal-page-main,
html:not([data-theme="dark"]) body:not(.theme-dark) .cal-page-main,
html[data-theme="light"] .cal-next-main,
html:not([data-theme="dark"]) body:not(.theme-dark) .cal-next-main,
html[data-theme="light"] .page-banner,
html:not([data-theme="dark"]) body:not(.theme-dark) .page-banner,
html[data-theme="light"] .info-box,
html:not([data-theme="dark"]) body:not(.theme-dark) .info-box,
html[data-theme="light"] .content-box,
html:not([data-theme="dark"]) body:not(.theme-dark) .content-box,
html[data-theme="light"] .search-box,
html:not([data-theme="dark"]) body:not(.theme-dark) .search-box,
html[data-theme="light"] .search-results,
html:not([data-theme="dark"]) body:not(.theme-dark) .search-results,
html[data-theme="light"] .hc-block,
html:not([data-theme="dark"]) body:not(.theme-dark) .hc-block,
html[data-theme="light"] .hc-search-wrap,
html:not([data-theme="dark"]) body:not(.theme-dark) .hc-search-wrap,
html[data-theme="light"] .principal-wrap,
html:not([data-theme="dark"]) body:not(.theme-dark) .principal-wrap,
html[data-theme="light"] .home-compact-item,
html:not([data-theme="dark"]) body:not(.theme-dark) .home-compact-item,
html[data-theme="light"] .principal-card,
html:not([data-theme="dark"]) body:not(.theme-dark) .principal-card,
html[data-theme="light"] .principal-side,
html:not([data-theme="dark"]) body:not(.theme-dark) .principal-side,
html[data-theme="light"] .detail-modal-box,
html:not([data-theme="dark"]) body:not(.theme-dark) .detail-modal-box,
html[data-theme="light"] .detail-modal-content,
html:not([data-theme="dark"]) body:not(.theme-dark) .detail-modal-content,
html[data-theme="light"] .detail-modal-body,
html:not([data-theme="dark"]) body:not(.theme-dark) .detail-modal-body,
html[data-theme="light"] .lightbox-content,
html:not([data-theme="dark"]) body:not(.theme-dark) .lightbox-content,
html[data-theme="light"] .mobile-menu-content,
html:not([data-theme="dark"]) body:not(.theme-dark) .mobile-menu-content,
html[data-theme="light"] .team-toolbar,
html:not([data-theme="dark"]) body:not(.theme-dark) .team-toolbar,
html[data-theme="light"] .team-search,
html:not([data-theme="dark"]) body:not(.theme-dark) .team-search,
html[data-theme="light"] .team-empty,
html:not([data-theme="dark"]) body:not(.theme-dark) .team-empty,
html[data-theme="light"] .team-loading,
html:not([data-theme="dark"]) body:not(.theme-dark) .team-loading,
html[data-theme="light"] .gs-wrap,
html:not([data-theme="dark"]) body:not(.theme-dark) .gs-wrap,
html[data-theme="light"] .gs-content,
html:not([data-theme="dark"]) body:not(.theme-dark) .gs-content,
html[data-theme="light"] .cd-wrap,
html:not([data-theme="dark"]) body:not(.theme-dark) .cd-wrap,
html[data-theme="light"] .cd-list,
html:not([data-theme="dark"]) body:not(.theme-dark) .cd-list,
html[data-theme="light"] .cd-item,
html:not([data-theme="dark"]) body:not(.theme-dark) .cd-item,
html[data-theme="light"] .timeline-item,
html:not([data-theme="dark"]) body:not(.theme-dark) .timeline-item,
html[data-theme="light"] .timeline-content,
html:not([data-theme="dark"]) body:not(.theme-dark) .timeline-content,
html[data-theme="light"] .pro-intro,
html:not([data-theme="dark"]) body:not(.theme-dark) .pro-intro,
html[data-theme="light"] .pro-intro-text,
html:not([data-theme="dark"]) body:not(.theme-dark) .pro-intro-text,
html[data-theme="light"] .pro-intro-visual,
html:not([data-theme="dark"]) body:not(.theme-dark) .pro-intro-visual,
html[data-theme="light"] .pro-stats,
html:not([data-theme="dark"]) body:not(.theme-dark) .pro-stats,
html[data-theme="light"] .section-alt,
html:not([data-theme="dark"]) body:not(.theme-dark) .section-alt,
html[data-theme="light"] .admission-step,
html:not([data-theme="dark"]) body:not(.theme-dark) .admission-step,
html[data-theme="light"] .team-page,
html:not([data-theme="dark"]) body:not(.theme-dark) .team-page,
html[data-theme="light"] .team-inner,
html:not([data-theme="dark"]) body:not(.theme-dark) .team-inner,
html[data-theme="light"] .gallery-grid .gallery-item,
html:not([data-theme="dark"]) body:not(.theme-dark) .gallery-grid .gallery-item,
html[data-theme="light"] .filter-btn,
html:not([data-theme="dark"]) body:not(.theme-dark) .filter-btn,
html[data-theme="light"] .clip-search,
html:not([data-theme="dark"]) body:not(.theme-dark) .clip-search,
html[data-theme="light"] .empty,
html:not([data-theme="dark"]) body:not(.theme-dark) .empty,
html[data-theme="light"] .rt-empty,
html:not([data-theme="dark"]) body:not(.theme-dark) .rt-empty,
html[data-theme="light"] .cal-empty-note,
html:not([data-theme="dark"]) body:not(.theme-dark) .cal-empty-note,
html[data-theme="light"] .lead-empty-msg,
html:not([data-theme="dark"]) body:not(.theme-dark) .lead-empty-msg,
html[data-theme="light"] .admission-note,
html:not([data-theme="dark"]) body:not(.theme-dark) .admission-note,
html[data-theme="light"] .res-msg,
html:not([data-theme="dark"]) body:not(.theme-dark) .res-msg,
html[data-theme="light"] .form-status,
html:not([data-theme="dark"]) body:not(.theme-dark) .form-status,
html[data-theme="light"] .form-hint,
html:not([data-theme="dark"]) body:not(.theme-dark) .form-hint {
  background:#ffffff !important;
  border-color:rgba(15,23,42,.08) !important;
  color:#1a1a2e !important;
}
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] label,
html[data-theme="light"] .form-group label,
html[data-theme="light"] strong,
html:not([data-theme="dark"]) body:not(.theme-dark) h1,
html:not([data-theme="dark"]) body:not(.theme-dark) h2,
html:not([data-theme="dark"]) body:not(.theme-dark) h3,
html:not([data-theme="dark"]) body:not(.theme-dark) label,
html:not([data-theme="dark"]) body:not(.theme-dark) .form-group label {
  color:#1a1a2e !important;
}
html[data-theme="light"] p,
html[data-theme="light"] .lead,
html[data-theme="light"] .muted,
html[data-theme="light"] .contact-lead,
html[data-theme="light"] .form-hint,
html:not([data-theme="dark"]) body:not(.theme-dark) p,
html:not([data-theme="dark"]) body:not(.theme-dark) .contact-lead {
  color:#64748b !important;
}
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="tel"],
html[data-theme="light"] input[type="search"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] .form-group input,
html[data-theme="light"] .form-group textarea,
html[data-theme="light"] .form-group select,
html:not([data-theme="dark"]) body:not(.theme-dark) input[type="text"],
html:not([data-theme="dark"]) body:not(.theme-dark) input[type="email"],
html:not([data-theme="dark"]) body:not(.theme-dark) input[type="tel"],
html:not([data-theme="dark"]) body:not(.theme-dark) textarea,
html:not([data-theme="dark"]) body:not(.theme-dark) select,
html:not([data-theme="dark"]) body:not(.theme-dark) .form-group input,
html:not([data-theme="dark"]) body:not(.theme-dark) .form-group textarea {
  background:#fafafa !important;
  border-color:#e5e7eb !important;
  color:#1a1a2e !important;
}
html[data-theme="light"] input::placeholder,
html:not([data-theme="dark"]) body:not(.theme-dark) input::placeholder {
  color:#94a3b8 !important;
}
html[data-theme="light"] .team-tab,
html[data-theme="light"] .filter-btn,
html:not([data-theme="dark"]) body:not(.theme-dark) .team-tab,
html:not([data-theme="dark"]) body:not(.theme-dark) .filter-btn {
  background:#f8fafc !important;
  color:#334155 !important;
  border-color:#e2e8f0 !important;
}
html[data-theme="light"] .team-tab.active,
html[data-theme="light"] .filter-btn.active,
html:not([data-theme="dark"]) body:not(.theme-dark) .team-tab.active,
html:not([data-theme="dark"]) body:not(.theme-dark) .filter-btn.active {
  background:rgba(91,44,111,.12) !important;
  color:#5B2C6F !important;
  border-color:rgba(91,44,111,.25) !important;
}
html[data-theme="light"] .nav-desktop a,
html[data-theme="light"] .nav-more-btn,
html[data-theme="light"] .mobile-nav a,
html:not([data-theme="dark"]) body:not(.theme-dark) .nav-desktop a,
html:not([data-theme="dark"]) body:not(.theme-dark) .nav-more-btn,
html:not([data-theme="dark"]) body:not(.theme-dark) .mobile-nav a {
  color:#1A1A2E !important;
}
html[data-theme="light"] .header,
html:not([data-theme="dark"]) body:not(.theme-dark) .header {
  background:#ffffff !important;
}
html[data-theme="light"] .logo-text h1,
html:not([data-theme="dark"]) body:not(.theme-dark) .logo-text h1 {
  color:#5B2C6F !important;
}
html[data-theme="light"] table,
html:not([data-theme="dark"]) body:not(.theme-dark) table {
  background:#fff !important;
  color:#1a1a2e !important;
}
html[data-theme="light"] th,
html:not([data-theme="dark"]) body:not(.theme-dark) th {
  background:#f8fafc !important;
  color:#334155 !important;
}
html[data-theme="light"] td,
html:not([data-theme="dark"]) body:not(.theme-dark) td {
  color:#1a1a2e !important;
  border-color:#e2e8f0 !important;
}


/* ===== CRITICAL: VISIBLE TEXT + DARK SURFACES ===== */
/* Fixes white cards with faded text in dark mode on About, Academics, etc. */

html[data-theme="dark"] .timeline-content,
html[data-theme="dark"] .timeline-item .timeline-content,
html[data-theme="dark"] .pro-card,
html[data-theme="dark"] .pro-mini-card,
html[data-theme="dark"] .level-card,
html[data-theme="dark"] .level-card-pro,
html[data-theme="dark"] .card,
html[data-theme="dark"] .contact-form-pro,
html[data-theme="dark"] .contact-info-pro,
html[data-theme="dark"] .notice-item,
html[data-theme="dark"] .news-card-pro,
html[data-theme="dark"] .news-card-wide,
html[data-theme="dark"] .event-card-pro,
html[data-theme="dark"] .facility-card,
html[data-theme="dark"] .teacher-card,
html[data-theme="dark"] .team-card,
html[data-theme="dark"] .team-card-body,
html[data-theme="dark"] .admission-form-wrap,
html[data-theme="dark"] .admission-school-card,
html[data-theme="dark"] .admission-closed-card,
html[data-theme="dark"] .admission-side,
html[data-theme="dark"] .res-card,
html[data-theme="dark"] .res-form,
html[data-theme="dark"] .res-main,
html[data-theme="dark"] .rt-toolbar,
html[data-theme="dark"] .rt-hero-card,
html[data-theme="dark"] .rt-head-block,
html[data-theme="dark"] .rt-mini .rt-bottom,
html[data-theme="dark"] .search-box,
html[data-theme="dark"] .hc-block,
html[data-theme="dark"] .hc-search-wrap,
html[data-theme="dark"] .principal-card,
html[data-theme="dark"] .principal-side,
html[data-theme="dark"] .home-compact-item,
html[data-theme="dark"] .detail-modal-box,
html[data-theme="dark"] .detail-modal-content,
html[data-theme="dark"] .mobile-menu-content,
html[data-theme="dark"] .pro-intro-text,
html[data-theme="dark"] .pro-intro-visual,
html[data-theme="dark"] .section-alt,
html[data-theme="dark"] .sum-card,
html[data-theme="dark"] .cd-wrap,
html[data-theme="dark"] .cd-item,
html[data-theme="dark"] .gs-wrap,
html[data-theme="dark"] .gs-content,
html[data-theme="dark"] .cal-page-shell,
html[data-theme="dark"] .cal-page-main,
body.theme-dark .timeline-content,
body.theme-dark .pro-card,
body.theme-dark .pro-mini-card,
body.theme-dark .level-card,
body.theme-dark .level-card-pro,
body.theme-dark .card,
body.theme-dark .contact-form-pro,
body.theme-dark .notice-item,
body.theme-dark .news-card-pro,
body.theme-dark .event-card-pro,
body.theme-dark .facility-card,
body.theme-dark .teacher-card,
body.theme-dark .team-card,
body.theme-dark .rt-toolbar,
body.theme-dark .rt-hero-card,
body.theme-dark .rt-head-block,
body.theme-dark .admission-form-wrap,
body.theme-dark .res-form,
body.theme-dark .res-card,
body.theme-dark .mobile-menu-content {
  background: #1e1830 !important;
  border-color: #3d3554 !important;
  color: #eae6f5 !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.35) !important;
}

/* Headings on those cards — bright, readable */
html[data-theme="dark"] .timeline-content h3,
html[data-theme="dark"] .pro-card h3,
html[data-theme="dark"] .pro-mini-card h4,
html[data-theme="dark"] .level-card h3,
html[data-theme="dark"] .level-card-pro h3,
html[data-theme="dark"] .level-card-pro h4,
html[data-theme="dark"] .card h3,
html[data-theme="dark"] .contact-form-pro h3,
html[data-theme="dark"] .team-card h3,
html[data-theme="dark"] .teacher-card h3,
html[data-theme="dark"] .facility-card h3,
html[data-theme="dark"] .news-card-pro h3,
html[data-theme="dark"] .event-card-pro h3,
html[data-theme="dark"] .rt-head-block h2,
body.theme-dark .timeline-content h3,
body.theme-dark .pro-card h3,
body.theme-dark .pro-mini-card h4,
body.theme-dark .level-card-pro h3,
body.theme-dark .level-card-pro h4,
body.theme-dark .card h3,
body.theme-dark .contact-form-pro h3,
body.theme-dark .rt-head-block h2 {
  color: #f8f5ff !important;
}

/* Body text on those cards — soft but visible (NOT too light) */
html[data-theme="dark"] .timeline-content p,
html[data-theme="dark"] .pro-card p,
html[data-theme="dark"] .pro-mini-card p,
html[data-theme="dark"] .level-card p,
html[data-theme="dark"] .level-card-pro p,
html[data-theme="dark"] .card p,
html[data-theme="dark"] .card-body p,
html[data-theme="dark"] .team-card p,
html[data-theme="dark"] .teacher-card p,
html[data-theme="dark"] .facility-card p,
html[data-theme="dark"] .news-card-pro p,
html[data-theme="dark"] .event-card-pro p,
html[data-theme="dark"] .contact-lead,
html[data-theme="dark"] .contact-row p,
body.theme-dark .timeline-content p,
body.theme-dark .pro-card p,
body.theme-dark .pro-mini-card p,
body.theme-dark .level-card-pro p,
body.theme-dark .card p,
body.theme-dark .card-body p {
  color: #d4cce8 !important;
}

/* Override global faded p if any parent stayed white — force dark parent text only when card is dark */
html[data-theme="dark"] .timeline-content,
html[data-theme="dark"] .level-card-pro,
html[data-theme="dark"] .pro-card {
  background-color: #1e1830 !important;
}

/* Timeline dot border in dark */
html[data-theme="dark"] .timeline-dot,
body.theme-dark .timeline-dot {
  border-color: #1e1830 !important;
  box-shadow: 0 0 0 3px rgba(167,139,250,.35) !important;
}

/* Routine selects — visible in dark */
html[data-theme="dark"] .rt-toolbar label,
body.theme-dark .rt-toolbar label {
  color: #c4b5fd !important;
}
html[data-theme="dark"] .rt-toolbar select,
body.theme-dark .rt-toolbar select {
  background: #12101a !important;
  border-color: #4c4466 !important;
  color: #f3eefc !important;
}
html[data-theme="dark"] .rt-toolbar select option,
body.theme-dark .rt-toolbar select option {
  background: #1e1830;
  color: #f3eefc;
}
html[data-theme="dark"] .rt-lang button,
body.theme-dark .rt-lang button {
  background: #16122a !important;
  color: #eae6f5 !important;
  border-color: #3d3554 !important;
}
html[data-theme="dark"] .rt-lang button.active,
body.theme-dark .rt-lang button.active {
  background: #0f766e !important;
  color: #fff !important;
  border-color: #0f766e !important;
}
html[data-theme="dark"] .rt-empty,
body.theme-dark .rt-empty {
  color: #c4b5fd !important;
}
html[data-theme="dark"] .rt-foot-bar,
body.theme-dark .rt-foot-bar {
  background: #16122a !important;
  border-color: #2d2640 !important;
  color: #b6adc9 !important;
}

/* Forms on all pages */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
body.theme-dark input,
body.theme-dark textarea,
body.theme-dark select {
  background: #12101a !important;
  border-color: #4c4466 !important;
  color: #f3eefc !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
  color: #9b8fb8 !important;
  opacity: 1 !important;
}
html[data-theme="dark"] label,
body.theme-dark label {
  color: #eae6f5 !important;
}

/* LIGHT theme — never leave dark text washed out on white */
html[data-theme="light"] .timeline-content,
html[data-theme="light"] .pro-card,
html[data-theme="light"] .pro-mini-card,
html[data-theme="light"] .level-card-pro,
html[data-theme="light"] .level-card,
html[data-theme="light"] .card,
html[data-theme="light"] .contact-form-pro,
html[data-theme="light"] .rt-toolbar,
html[data-theme="light"] .rt-hero-card,
html:not([data-theme="dark"]) body:not(.theme-dark) .timeline-content,
html:not([data-theme="dark"]) body:not(.theme-dark) .pro-card,
html:not([data-theme="dark"]) body:not(.theme-dark) .pro-mini-card,
html:not([data-theme="dark"]) body:not(.theme-dark) .level-card-pro,
html:not([data-theme="dark"]) body:not(.theme-dark) .card,
html:not([data-theme="dark"]) body:not(.theme-dark) .contact-form-pro,
html:not([data-theme="dark"]) body:not(.theme-dark) .rt-toolbar,
html:not([data-theme="dark"]) body:not(.theme-dark) .rt-hero-card {
  background: #ffffff !important;
  border-color: rgba(15,23,42,.08) !important;
  color: #1a1a2e !important;
}
html[data-theme="light"] .timeline-content h3,
html[data-theme="light"] .pro-card h3,
html[data-theme="light"] .level-card-pro h3,
html[data-theme="light"] .level-card-pro h4,
html:not([data-theme="dark"]) body:not(.theme-dark) .timeline-content h3,
html:not([data-theme="dark"]) body:not(.theme-dark) .pro-card h3,
html:not([data-theme="dark"]) body:not(.theme-dark) .level-card-pro h3 {
  color: #5B2C6F !important;
}
html[data-theme="light"] .timeline-content p,
html[data-theme="light"] .pro-card p,
html[data-theme="light"] .level-card-pro p,
html[data-theme="light"] .pro-mini-card p,
html:not([data-theme="dark"]) body:not(.theme-dark) .timeline-content p,
html:not([data-theme="dark"]) body:not(.theme-dark) .pro-card p,
html:not([data-theme="dark"]) body:not(.theme-dark) .level-card-pro p {
  color: #475569 !important;
}
html[data-theme="light"] .rt-toolbar select,
html:not([data-theme="dark"]) body:not(.theme-dark) .rt-toolbar select {
  background: #fff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}
html[data-theme="light"] .rt-toolbar label,
html:not([data-theme="dark"]) body:not(.theme-dark) .rt-toolbar label {
  color: #64748b !important;
}
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html:not([data-theme="dark"]) body:not(.theme-dark) input,
html:not([data-theme="dark"]) body:not(.theme-dark) textarea,
html:not([data-theme="dark"]) body:not(.theme-dark) select {
  background: #fafafa !important;
  border-color: #e5e7eb !important;
  color: #1a1a2e !important;
}
html[data-theme="light"] label,
html:not([data-theme="dark"]) body:not(.theme-dark) label {
  color: #1a1a2e !important;
}


/* ===== RESULTS / ROUTINE / EVENTS VISIBILITY ===== */

/* Section headers on all pages */
html[data-theme="dark"] .section-header h2,
html[data-theme="dark"] .section h2,
body.theme-dark .section-header h2,
body.theme-dark .section h2 {
  color: #f3eefc !important;
}
html[data-theme="dark"] .section-header p,
html[data-theme="dark"] .section > .container > p,
body.theme-dark .section-header p {
  color: #c4b5fd !important;
}

/* Events cards */
html[data-theme="dark"] .event-card-pro,
body.theme-dark .event-card-pro {
  background: #1e1830 !important;
  border-color: #3d3554 !important;
  color: #eae6f5 !important;
}
html[data-theme="dark"] .event-card-body,
body.theme-dark .event-card-body {
  background: transparent !important;
  color: #eae6f5 !important;
}
html[data-theme="dark"] .event-card-body h3,
body.theme-dark .event-card-body h3 {
  color: #f8f5ff !important;
}
html[data-theme="dark"] .event-card-body p,
html[data-theme="dark"] .event-meta,
body.theme-dark .event-card-body p,
body.theme-dark .event-meta {
  color: #d4cce8 !important;
}

/* White section backgrounds forced transparent/dark */
html[data-theme="dark"] section.section[style*="background"],
html[data-theme="dark"] .section[style*="#fff"],
html[data-theme="dark"] .section[style*="white"],
body.theme-dark section.section[style*="background"] {
  background: #12101a !important;
}

/* Results page (backup if page CSS lags) */
html[data-theme="dark"] .res-main,
body.theme-dark .res-main {
  background: #12101a !important;
}
html[data-theme="dark"] .res-card,
body.theme-dark .res-card {
  background: #1e1830 !important;
  border-color: #3d3554 !important;
  color: #eae6f5 !important;
}
html[data-theme="dark"] .res-card h2,
body.theme-dark .res-card h2 {
  color: #f3eefc !important;
}
html[data-theme="dark"] .res-card .lead,
body.theme-dark .res-card .lead {
  color: #c4b5fd !important;
}
html[data-theme="dark"] .res-form label,
html[data-theme="dark"] .res-form .fg label,
body.theme-dark .res-form label,
body.theme-dark .res-form .fg label {
  color: #c4b5fd !important;
}
html[data-theme="dark"] .res-form input,
html[data-theme="dark"] .res-form select,
body.theme-dark .res-form input,
body.theme-dark .res-form select {
  background: #12101a !important;
  border-color: #4c4466 !important;
  color: #f3eefc !important;
}

/* Routine reinforcement */
html[data-theme="dark"] .rt-toolbar,
body.theme-dark .rt-toolbar {
  background: #1e1830 !important;
  border-color: #3d3554 !important;
  color: #eae6f5 !important;
}
html[data-theme="dark"] .rt-toolbar label,
body.theme-dark .rt-toolbar label {
  color: #c4b5fd !important;
}
html[data-theme="dark"] .rt-toolbar select,
body.theme-dark .rt-toolbar select {
  background: #12101a !important;
  border-color: #4c4466 !important;
  color: #f3eefc !important;
}
html[data-theme="dark"] .rt-empty,
html[data-theme="dark"] body[data-page="routine"] .rt-empty,
body.theme-dark .rt-empty {
  color: #d4cce8 !important;
}
html[data-theme="dark"] body[data-page="routine"] p,
body.theme-dark[data-page="routine"] p {
  color: #d4cce8 !important;
}

/* Cards grid generic (events may use .card) */
html[data-theme="dark"] .cards-grid .card,
html[data-theme="dark"] .cards-grid > article,
body.theme-dark .cards-grid .card {
  background: #1e1830 !important;
  border-color: #3d3554 !important;
  color: #eae6f5 !important;
}
html[data-theme="dark"] .cards-grid .card h3,
html[data-theme="dark"] .cards-grid .card-body h3,
body.theme-dark .cards-grid .card h3 {
  color: #f8f5ff !important;
}
html[data-theme="dark"] .cards-grid .card p,
html[data-theme="dark"] .cards-grid .card-body p,
body.theme-dark .cards-grid .card p {
  color: #d4cce8 !important;
}

/* Do NOT force all page <p> to ultra-light on white leftovers — prefer surface-scoped */


/* ===== DARK WHITE/YELLOW + IMAGE QUALITY ===== */

/* Sharper photos in lightbox, gallery, popups, cards */
.lightbox-img,
#lightbox-img,
.lightbox-content img,
.gallery-item img,
.card-img img,
.hero-slide,
.notice-popup img,
.popup-media img,
.popup-content img,
.nn-thumb img,
.event-card-img img,
.teacher-card img,
.team-avatar img,
.principal-photo img,
.detail-modal-img img,
.facility-card img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  -ms-interpolation-mode: bicubic;
}
.lightbox-content img,
#lightbox-img,
.detail-modal-img img,
.popup-media img,
.notice-popup img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  /* Prefer crisp full-res when zooming */
  image-rendering: auto;
}

/* ---------- DARK MODE: white + yellow everywhere ---------- */
html[data-theme="dark"],
body.theme-dark {
  --dark-text: #ffffff;
  --dark-text-soft: #f5f5f5;
  --dark-yellow: #f5d76e;
  --dark-yellow-hot: #ffe24a;
  --dark-yellow-dim: #e8c547;
}

html[data-theme="dark"] body,
body.theme-dark {
  color: #ffffff !important;
}

/* Headings → yellow */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] .section-header h2,
html[data-theme="dark"] .page-label,
html[data-theme="dark"] .page-banner h1,
html[data-theme="dark"] .logo-text h1,
html[data-theme="dark"] .res-card h2,
html[data-theme="dark"] .timeline-content h3,
html[data-theme="dark"] .pro-card h3,
html[data-theme="dark"] .level-card-pro h3,
html[data-theme="dark"] .level-card-pro h4,
html[data-theme="dark"] .event-card-body h3,
html[data-theme="dark"] .card-body h3,
html[data-theme="dark"] .nn-title,
html[data-theme="dark"] .contact-form-pro h3,
html[data-theme="dark"] .team-card h3,
html[data-theme="dark"] .teacher-card h3,
html[data-theme="dark"] .facility-card h3,
html[data-theme="dark"] .admission-form-title,
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4,
body.theme-dark .section-header h2,
body.theme-dark .logo-text h1,
body.theme-dark .res-card h2,
body.theme-dark .timeline-content h3,
body.theme-dark .pro-card h3,
body.theme-dark .level-card-pro h3,
body.theme-dark .event-card-body h3,
body.theme-dark .card-body h3,
body.theme-dark .nn-title,
body.theme-dark .contact-form-pro h3 {
  color: #f5d76e !important;
}

/* Body text → white */
html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] span,
html[data-theme="dark"] label,
html[data-theme="dark"] .lead,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .contact-lead,
html[data-theme="dark"] .contact-row p,
html[data-theme="dark"] .card-body p,
html[data-theme="dark"] .timeline-content p,
html[data-theme="dark"] .pro-card p,
html[data-theme="dark"] .level-card-pro p,
html[data-theme="dark"] .event-card-body p,
html[data-theme="dark"] .event-meta,
html[data-theme="dark"] .nn-excerpt,
html[data-theme="dark"] .form-hint,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .rt-empty,
html[data-theme="dark"] .res-card .lead,
html[data-theme="dark"] .section-header p,
html[data-theme="dark"] .logo-text span,
html[data-theme="dark"] strong,
html[data-theme="dark"] .form-group label,
html[data-theme="dark"] .res-form .fg label,
html[data-theme="dark"] .rt-toolbar label,
body.theme-dark p,
body.theme-dark li,
body.theme-dark label,
body.theme-dark .lead,
body.theme-dark .contact-lead,
body.theme-dark .card-body p,
body.theme-dark .timeline-content p,
body.theme-dark .pro-card p,
body.theme-dark .level-card-pro p,
body.theme-dark .event-card-body p,
body.theme-dark .nn-excerpt,
body.theme-dark .res-card .lead,
body.theme-dark .section-header p,
body.theme-dark .logo-text span,
body.theme-dark strong,
body.theme-dark .form-group label {
  color: #ffffff !important;
}

/* Links & accents → yellow */
html[data-theme="dark"] a:not(.btn):not(.btn-primary):not(.btn-outline):not(.header-search-item):not(.nav-desktop a):not(.mobile-nav a):not(.back-to-website-btn),
html[data-theme="dark"] .contact-row a,
html[data-theme="dark"] .btn-outline,
body.theme-dark a:not(.btn):not(.btn-primary):not(.btn-outline):not(.header-search-item):not(.nav-desktop a):not(.mobile-nav a),
body.theme-dark .contact-row a,
body.theme-dark .btn-outline {
  color: #f5d76e !important;
}
html[data-theme="dark"] .btn-outline,
body.theme-dark .btn-outline {
  border-color: #f5d76e !important;
}
html[data-theme="dark"] .btn-outline:hover,
body.theme-dark .btn-outline:hover {
  background: #f5d76e !important;
  color: #12101a !important;
  border-color: #f5d76e !important;
}

/* Nav tabs → white, active → yellow */
html[data-theme="dark"] .nav-desktop a,
html[data-theme="dark"] .nav-more-btn,
html[data-theme="dark"] .mobile-nav a,
html[data-theme="dark"] .nav-more-menu a,
body.theme-dark .nav-desktop a,
body.theme-dark .nav-more-btn,
body.theme-dark .mobile-nav a,
body.theme-dark .nav-more-menu a {
  color: #ffffff !important;
}
html[data-theme="dark"] .nav-desktop a:hover,
html[data-theme="dark"] .nav-desktop a.active,
html[data-theme="dark"] .nav-more-btn:hover,
html[data-theme="dark"] .nav-more.open .nav-more-btn,
html[data-theme="dark"] .mobile-nav a:hover,
html[data-theme="dark"] .mobile-nav a.active,
html[data-theme="dark"] .nav-more-menu a:hover,
html[data-theme="dark"] .nav-more-menu a.active,
body.theme-dark .nav-desktop a:hover,
body.theme-dark .nav-desktop a.active,
body.theme-dark .nav-more-btn:hover,
body.theme-dark .mobile-nav a.active,
body.theme-dark .nav-more-menu a:hover {
  color: #f5d76e !important;
  background: rgba(245, 215, 110, 0.12) !important;
}

/* Underlines / bars → yellow */
html[data-theme="dark"] .section-header h2::after,
body.theme-dark .section-header h2::after {
  background: #f5d76e !important;
}

/* Team tabs / filters */
html[data-theme="dark"] .team-tab,
html[data-theme="dark"] .filter-btn,
body.theme-dark .team-tab,
body.theme-dark .filter-btn {
  color: #ffffff !important;
  border-color: rgba(245, 215, 110, 0.35) !important;
}
html[data-theme="dark"] .team-tab.active,
html[data-theme="dark"] .filter-btn.active,
body.theme-dark .team-tab.active,
body.theme-dark .filter-btn.active {
  color: #12101a !important;
  background: #f5d76e !important;
  border-color: #f5d76e !important;
}

/* Form labels / inputs text white; placeholder softer white */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
body.theme-dark input,
body.theme-dark textarea,
body.theme-dark select {
  color: #ffffff !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Table text */
html[data-theme="dark"] th,
body.theme-dark th {
  color: #f5d76e !important;
}
html[data-theme="dark"] td,
body.theme-dark td {
  color: #ffffff !important;
}

/* Footer accents */
html[data-theme="dark"] .footer h4,
body.theme-dark .footer h4 {
  color: #f5d76e !important;
}
html[data-theme="dark"] .footer,
html[data-theme="dark"] .footer a,
html[data-theme="dark"] .footer p,
body.theme-dark .footer,
body.theme-dark .footer a,
body.theme-dark .footer p {
  color: #ffffff !important;
}
html[data-theme="dark"] .footer a:hover,
body.theme-dark .footer a:hover {
  color: #f5d76e !important;
}

/* Search results in dark */
html[data-theme="dark"] .header-search-item,
html[data-theme="dark"] a.header-search-item,
body.theme-dark .header-search-item {
  color: #ffffff !important;
}
html[data-theme="dark"] .header-search-item:hover,
body.theme-dark .header-search-item:hover {
  color: #f5d76e !important;
  background: rgba(245, 215, 110, 0.15) !important;
}

/* Notice / popup text */
html[data-theme="dark"] .notice-popup,
html[data-theme="dark"] .popup-content,
html[data-theme="dark"] .bbss-popup,
body.theme-dark .notice-popup,
body.theme-dark .popup-content {
  color: #ffffff !important;
}
html[data-theme="dark"] .notice-popup h3,
html[data-theme="dark"] .popup-content h3,
body.theme-dark .notice-popup h3 {
  color: #f5d76e !important;
}


/* ===== FORM LABELS + NO CROP DARK ===== */

/* Form field titles always visible in dark (yellow) */
html[data-theme="dark"] label,
html[data-theme="dark"] .form-group label,
html[data-theme="dark"] .res-form label,
html[data-theme="dark"] .res-form .fg label,
html[data-theme="dark"] .rt-toolbar label,
html[data-theme="dark"] .contact-form-pro label,
html[data-theme="dark"] .admission-form-wrap label,
body.theme-dark label,
body.theme-dark .form-group label,
body.theme-dark .res-form label,
body.theme-dark .res-form .fg label,
body.theme-dark .rt-toolbar label,
body.theme-dark .contact-form-pro label {
  color: #f5d76e !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Select/input text white in dark */
html[data-theme="dark"] select,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
body.theme-dark select,
body.theme-dark input,
body.theme-dark textarea {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Prevent content cards from clipping text */
html[data-theme="dark"] .card,
html[data-theme="dark"] .pro-card,
html[data-theme="dark"] .timeline-content,
html[data-theme="dark"] .level-card-pro,
html[data-theme="dark"] .contact-form-pro,
html[data-theme="dark"] .res-card,
html[data-theme="dark"] .rt-toolbar,
html[data-theme="dark"] .cal-showcase,
html[data-theme="dark"] .cal-showcase-body,
html[data-theme="dark"] .team-card,
html[data-theme="dark"] .event-card-pro,
html[data-theme="dark"] .event-card-body,
html[data-theme="dark"] .nn-card,
html[data-theme="dark"] .nn-body,
body.theme-dark .card,
body.theme-dark .pro-card,
body.theme-dark .timeline-content,
body.theme-dark .level-card-pro,
body.theme-dark .contact-form-pro,
body.theme-dark .res-card,
body.theme-dark .rt-toolbar,
body.theme-dark .cal-showcase-body,
body.theme-dark .event-card-body {
  overflow: visible !important;
}

/* Calendar card text */
html[data-theme="dark"] .cal-showcase-body h2,
body.theme-dark .cal-showcase-body h2 { color: #f5d76e !important; }
html[data-theme="dark"] .cal-showcase-body p,
html[data-theme="dark"] .cal-showcase-body .eyebrow,
body.theme-dark .cal-showcase-body p { color: #ffffff !important; }
html[data-theme="dark"] .cal-showcase-body .eyebrow,
body.theme-dark .cal-showcase-body .eyebrow { color: #f5d76e !important; }

/* Contact row titles */
html[data-theme="dark"] .contact-row strong,
body.theme-dark .contact-row strong { color: #f5d76e !important; }
html[data-theme="dark"] .contact-row p,
html[data-theme="dark"] .contact-row a,
body.theme-dark .contact-row p { color: #ffffff !important; }


/* ===== CLOSE-ALL + INTRO + CONTACT FORM FIX ===== */

/* About school introduction — no crop, dark readable */
.pro-intro,
.pro-intro-text,
.pro-intro-visual,
#about-intro {
  overflow: visible !important;
}
.pro-intro-text {
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
html[data-theme="dark"] .pro-intro-text,
html[data-theme="dark"] #about-intro,
html[data-theme="dark"] .pro-intro-visual,
body.theme-dark .pro-intro-text,
body.theme-dark #about-intro,
body.theme-dark .pro-intro-visual {
  overflow: visible !important;
  background: transparent !important;
}
html[data-theme="dark"] .pro-intro-text h2,
html[data-theme="dark"] .pro-intro-text .eyebrow,
body.theme-dark .pro-intro-text h2,
body.theme-dark .pro-intro-text .eyebrow {
  color: #f5d76e !important;
}
html[data-theme="dark"] .pro-intro-text p,
html[data-theme="dark"] #about-intro p,
html[data-theme="dark"] #about-intro strong,
body.theme-dark .pro-intro-text p,
body.theme-dark #about-intro p,
body.theme-dark #about-intro strong {
  color: #ffffff !important;
}
html[data-theme="dark"] .pro-stats .stat strong,
body.theme-dark .pro-stats .stat strong {
  color: #f5d76e !important;
}
html[data-theme="dark"] .pro-stats .stat span,
body.theme-dark .pro-stats .stat span {
  color: #ffffff !important;
}
html[data-theme="dark"] .pro-intro-visual,
body.theme-dark .pro-intro-visual {
  background: #1e1830 !important;
  border-color: #3d3554 !important;
}

/* Contact Get in touch + Send a message */
html[data-theme="dark"] .contact-info-pro,
html[data-theme="dark"] .contact-form-pro,
body.theme-dark .contact-info-pro,
body.theme-dark .contact-form-pro {
  overflow: visible !important;
  background: #1e1830 !important;
  border-color: #3d3554 !important;
  color: #ffffff !important;
}
html[data-theme="dark"] .contact-info-pro h2,
html[data-theme="dark"] .contact-info-pro h3,
html[data-theme="dark"] .contact-form-pro h3,
body.theme-dark .contact-info-pro h2,
body.theme-dark .contact-info-pro h3,
body.theme-dark .contact-form-pro h3 {
  color: #f5d76e !important;
}
/* Yellow field labels: Full Name*, Email*, Phone... */
html[data-theme="dark"] .contact-form-pro .form-group label,
html[data-theme="dark"] .contact-form-pro label,
html[data-theme="dark"] #contact-form label,
body.theme-dark .contact-form-pro .form-group label,
body.theme-dark .contact-form-pro label,
body.theme-dark #contact-form label {
  color: #f5d76e !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-weight: 700 !important;
}
/* Dark inputs, white typed text */
html[data-theme="dark"] .contact-form-pro input,
html[data-theme="dark"] .contact-form-pro textarea,
html[data-theme="dark"] #contact-form input,
html[data-theme="dark"] #contact-form textarea,
body.theme-dark .contact-form-pro input,
body.theme-dark .contact-form-pro textarea,
body.theme-dark #contact-form input,
body.theme-dark #contact-form textarea {
  background: #12101a !important;
  border: 2px solid #4c4466 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #f5d76e !important;
}
html[data-theme="dark"] .contact-form-pro input:focus,
html[data-theme="dark"] .contact-form-pro textarea:focus,
body.theme-dark .contact-form-pro input:focus,
body.theme-dark .contact-form-pro textarea:focus {
  border-color: #f5d76e !important;
  background: #16122a !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(245, 215, 110, 0.2) !important;
}
html[data-theme="dark"] .contact-form-pro input::placeholder,
html[data-theme="dark"] .contact-form-pro textarea::placeholder,
body.theme-dark .contact-form-pro input::placeholder,
body.theme-dark .contact-form-pro textarea::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.45) !important;
}
html[data-theme="dark"] .contact-row strong,
body.theme-dark .contact-row strong {
  color: #f5d76e !important;
}
html[data-theme="dark"] .contact-row p,
html[data-theme="dark"] .contact-row a,
html[data-theme="dark"] .contact-lead,
body.theme-dark .contact-row p,
body.theme-dark .contact-lead {
  color: #ffffff !important;
}

/* Results batch list empty text */
html[data-theme="dark"] .batch-list,
html[data-theme="dark"] .batch-list li,
html[data-theme="dark"] .batch-list h3,
body.theme-dark .batch-list,
body.theme-dark .batch-list li,
body.theme-dark .batch-list h3 {
  color: #ffffff !important;
  background: #1e1830 !important;
  border-color: #3d3554 !important;
}
html[data-theme="dark"] .batch-list li strong,
body.theme-dark .batch-list li strong {
  color: #f5d76e !important;
}
html[data-theme="dark"] .batch-list li span,
body.theme-dark .batch-list li span {
  color: rgba(255, 255, 255, 0.7) !important;
}


/* ===== CONTACT SIDE CARD NO CROP ===== */
.contact-pro {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible !important;
}
.contact-info-pro,
.contact-form-pro {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible !important;
}
.contact-info-pro {
  padding: 8px 4px;
}
html[data-theme="dark"] .contact-info-pro,
html[data-theme="dark"] .contact-form-pro,
body.theme-dark .contact-info-pro,
body.theme-dark .contact-form-pro {
  overflow: visible !important;
  background: #1e1830 !important;
  border: 1px solid #3d3554 !important;
  border-radius: 16px;
  padding: 24px 20px !important;
}
html[data-theme="dark"] .contact-info-pro .eyebrow,
html[data-theme="dark"] .contact-info-pro h2,
html[data-theme="dark"] .contact-form-pro h3,
html[data-theme="dark"] label[for="c-name"],
html[data-theme="dark"] label[for="c-email"],
html[data-theme="dark"] label[for="c-phone"],
html[data-theme="dark"] label[for="c-subject"],
html[data-theme="dark"] label[for="c-message"],
html[data-theme="dark"] .contact-form-pro .form-group label,
body.theme-dark .contact-info-pro .eyebrow,
body.theme-dark .contact-info-pro h2,
body.theme-dark .contact-form-pro h3,
body.theme-dark label[for="c-name"],
body.theme-dark label[for="c-email"],
body.theme-dark .contact-form-pro .form-group label {
  color: #f5d76e !important;
  -webkit-text-fill-color: #f5d76e !important;
}

/* =========================================================
   FIX: Light theme – footer school name & text must stay visible
   (global light h3/p rules were overriding footer white text)
   ========================================================= */
html[data-theme="light"] .footer,
html:not([data-theme="dark"]) body:not(.theme-dark) .footer,
body.theme-light .footer {
  background: linear-gradient(145deg, #1a0a28 0%, #152a5c 45%, #0a2e24 100%) !important;
  color: #ffffff !important;
}

html[data-theme="light"] .footer .footer-brand h3,
html[data-theme="light"] .footer-brand h3,
html[data-theme="light"] .footer h3,
html:not([data-theme="dark"]) body:not(.theme-dark) .footer .footer-brand h3,
html:not([data-theme="dark"]) body:not(.theme-dark) .footer-brand h3,
html:not([data-theme="dark"]) body:not(.theme-dark) .footer h3,
body.theme-light .footer .footer-brand h3,
body.theme-light .footer-brand h3,
body.theme-light .footer h3 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-theme="light"] .footer h4,
html:not([data-theme="dark"]) body:not(.theme-dark) .footer h4,
body.theme-light .footer h4 {
  color: #F5D76E !important;
  -webkit-text-fill-color: #F5D76E !important;
}

html[data-theme="light"] .footer p,
html[data-theme="light"] .footer a,
html[data-theme="light"] .footer .footer-brand p,
html[data-theme="light"] .footer .footer-brand a,
html[data-theme="light"] .footer .footer-links a,
html[data-theme="light"] .footer-bottom,
html[data-theme="light"] .footer-copy,
html[data-theme="light"] .footer-credit,
html[data-theme="light"] .footer-credit .credit-role,
html[data-theme="light"] .footer-credit .designed-label,
html:not([data-theme="dark"]) body:not(.theme-dark) .footer p,
html:not([data-theme="dark"]) body:not(.theme-dark) .footer a,
html:not([data-theme="dark"]) body:not(.theme-dark) .footer .footer-brand p,
html:not([data-theme="dark"]) body:not(.theme-dark) .footer .footer-brand a,
html:not([data-theme="dark"]) body:not(.theme-dark) .footer .footer-links a,
html:not([data-theme="dark"]) body:not(.theme-dark) .footer-bottom,
html:not([data-theme="dark"]) body:not(.theme-dark) .footer-copy,
body.theme-light .footer p,
body.theme-light .footer a,
body.theme-light .footer .footer-brand p,
body.theme-light .footer .footer-brand a,
body.theme-light .footer .footer-links a,
body.theme-light .footer-bottom,
body.theme-light .footer-copy {
  color: rgba(255, 255, 255, 0.9) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
}

html[data-theme="light"] .footer a:hover,
html[data-theme="light"] .footer .footer-links a:hover,
html:not([data-theme="dark"]) body:not(.theme-dark) .footer a:hover,
body.theme-light .footer a:hover {
  color: #F5D76E !important;
  -webkit-text-fill-color: #F5D76E !important;
}

/* Designer name gradient still works on dark footer */
html[data-theme="light"] .footer .designer-name,
html:not([data-theme="dark"]) body:not(.theme-dark) .footer .designer-name,
body.theme-light .footer .designer-name {
  background: linear-gradient(105deg, #F5D76E 0%, #ffffff 45%, #A7F3D0 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* =========================================================
   Protect content: visitors cannot select/copy text or images
   (allow form fields, buttons, and explicit download links)
   ========================================================= */
body {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

img, video, svg, canvas, picture {
  -webkit-user-drag: none !important;
  user-drag: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  pointer-events: auto;
}

/* Allow selection only where needed */
input, textarea, select, [contenteditable="true"],
.allow-select, .allow-select *,
a[download], a[download] *,
.bbss-btn-download, .bbss-btn-download *,
.detail-download-action, .detail-download-action *,
button, .btn, [role="button"] {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
}

/* Notice popup – Close all always visible & clear */
.bbss-btn-close-all {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  background: #fee2e2 !important;
  color: #b91c1c !important;
  border: 1px solid #fca5a5 !important;
  cursor: pointer !important;
  transition: background 0.15s, color 0.15s !important;
}
.bbss-btn-close-all:hover {
  background: #dc2626 !important;
  color: #fff !important;
  border-color: #dc2626 !important;
}
html[data-theme="dark"] .bbss-btn-close-all,
body.theme-dark .bbss-btn-close-all {
  background: rgba(220, 38, 38, 0.2) !important;
  color: #fca5a5 !important;
  border-color: rgba(220, 38, 38, 0.45) !important;
}
html[data-theme="dark"] .bbss-btn-close-all:hover,
body.theme-dark .bbss-btn-close-all:hover {
  background: #dc2626 !important;
  color: #fff !important;
}

/* =========================================================
   FIX: About page – School Introduction card crop
   (text + logo cards were clipped at bottom / edges)
   ========================================================= */
.pro-intro {
  display: grid !important;
  grid-template-columns: 1.35fr 0.75fr !important;
  gap: 28px !important;
  align-items: stretch !important;
  overflow: visible !important;
}

.pro-intro-text,
.pro-intro-visual {
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}

/* Text card styling so content is never clipped */
.pro-intro-text {
  padding: 28px 28px 24px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(91, 44, 111, 0.1) !important;
  background: #ffffff !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06) !important;
}

.pro-intro-visual {
  padding: 32px !important;
  border-radius: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(91, 44, 111, 0.1) !important;
  background: linear-gradient(145deg, #f8f5fc, #eef4fb) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06) !important;
}

.pro-intro-visual img {
  max-width: 220px !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* Stats row – full space, never cut off */
.pro-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px 28px !important;
  margin-top: 24px !important;
  margin-bottom: 0 !important;
  padding-bottom: 4px !important;
  overflow: visible !important;
}

.pro-stats .stat {
  text-align: center !important;
  min-width: 90px !important;
  overflow: visible !important;
}

.pro-stats .stat strong {
  display: block !important;
  font-size: 1.5rem !important;
  line-height: 1.2 !important;
  margin-bottom: 4px !important;
}

.pro-stats .stat span {
  display: block !important;
  font-size: 0.8rem !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}

/* Dark theme – readable cards, no crop */
html[data-theme="dark"] .pro-intro-text,
body.theme-dark .pro-intro-text {
  background: #1e1830 !important;
  border-color: #3d3554 !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35) !important;
  color: #eae6f5 !important;
  overflow: visible !important;
  padding: 28px 28px 24px !important;
}

html[data-theme="dark"] .pro-intro-visual,
body.theme-dark .pro-intro-visual {
  background: #1e1830 !important;
  border-color: #3d3554 !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35) !important;
  overflow: visible !important;
  padding: 32px !important;
}

html[data-theme="dark"] .pro-intro-text h2,
html[data-theme="dark"] .pro-intro-text .eyebrow,
body.theme-dark .pro-intro-text h2,
body.theme-dark .pro-intro-text .eyebrow {
  color: #f5d76e !important;
}

html[data-theme="dark"] .pro-intro-text p,
html[data-theme="dark"] #about-intro p,
html[data-theme="dark"] #about-intro strong,
body.theme-dark .pro-intro-text p,
body.theme-dark #about-intro p,
body.theme-dark #about-intro strong {
  color: #ffffff !important;
}

html[data-theme="dark"] .pro-stats .stat strong,
body.theme-dark .pro-stats .stat strong {
  color: #f5d76e !important;
}

html[data-theme="dark"] .pro-stats .stat span,
body.theme-dark .pro-stats .stat span {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Parent section must not clip children */
.section .pro-intro,
.section .container {
  overflow: visible !important;
}

/* Mobile / tablet – stack cleanly, still no crop */
@media (max-width: 900px) {
  .pro-intro {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .pro-intro-text,
  .pro-intro-visual {
    padding: 22px 20px !important;
  }
  .pro-intro-visual img {
    max-width: 180px !important;
  }
}

/* Notice popup action labels — visible in dark theme */
html[data-theme="dark"] .bbss-btn-zoom,
html[data-theme="dark"] .bbss-btn-download,
html[data-theme="dark"] .bbss-btn-next,
html[data-theme="dark"] .bbss-btn-prev,
body.theme-dark .bbss-btn-zoom,
body.theme-dark .bbss-btn-download,
body.theme-dark .bbss-btn-next,
body.theme-dark .bbss-btn-prev {
  background: #2a2438 !important;
  border-color: #4c4466 !important;
  color: #f5f3ff !important;
}
html[data-theme="dark"] .bbss-btn-zoom .bbss-btn-label,
html[data-theme="dark"] .bbss-btn-download .bbss-btn-label,
html[data-theme="dark"] .bbss-btn-next .bbss-btn-label,
html[data-theme="dark"] .bbss-btn-prev .bbss-btn-label,
html[data-theme="dark"] .bbss-btn-zoom .bbss-ico,
html[data-theme="dark"] .bbss-btn-download .bbss-ico,
html[data-theme="dark"] .bbss-btn-next .bbss-ico,
html[data-theme="dark"] .bbss-btn-prev .bbss-ico,
body.theme-dark .bbss-btn-zoom .bbss-btn-label,
body.theme-dark .bbss-btn-download .bbss-btn-label,
body.theme-dark .bbss-btn-next .bbss-btn-label,
body.theme-dark .bbss-btn-prev .bbss-btn-label,
body.theme-dark .bbss-btn-zoom .bbss-ico,
body.theme-dark .bbss-btn-download .bbss-ico,
body.theme-dark .bbss-btn-next .bbss-ico,
body.theme-dark .bbss-btn-prev .bbss-ico {
  color: #f5f3ff !important;
  opacity: 1 !important;
}

/* =====================================================
   Home Principal Sidebar — unique design, full photo
   (admin upload shows fully, no crop)
   ===================================================== */
body.home-clean .hc-principal-col .principal-wrap {
  max-width: 100%;
  display: block;
  grid-template-columns: 1fr;
  gap: 0;
}
body.home-clean .hc-principal-col .principal-side {
  display: none !important;
}

.principal-sidebar {
  background: linear-gradient(165deg, #ffffff 0%, #f7faf8 55%, #eef6f1 100%);
  border-radius: 22px;
  border: 1px solid rgba(30, 132, 73, 0.14);
  box-shadow:
    0 4px 6px rgba(15, 23, 42, 0.04),
    0 18px 40px rgba(30, 132, 73, 0.12);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
.principal-sidebar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #176b3a, #27AE60, #F5D76E, #176b3a);
  background-size: 200% 100%;
}
.principal-sidebar .ps-ribbon {
  margin: 18px 18px 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #176b3a 0%, #1e8449 100%);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  box-shadow: 0 6px 16px rgba(23, 107, 58, 0.28);
}

/* Full photo frame — no crop */
.principal-sidebar .ps-photo-frame {
  margin: 16px 18px 0;
  border-radius: 16px;
  background:
    radial-gradient(circle at 30% 20%, rgba(245, 215, 110, 0.25), transparent 55%),
    linear-gradient(160deg, #e8f5ee 0%, #d4ebe0 100%);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 0 0 1px rgba(23, 107, 58, 0.08),
    0 10px 28px rgba(15, 23, 42, 0.1);
  min-height: 220px;
  max-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 10px;
}
.principal-sidebar .ps-photo-frame img {
  width: 100%;
  height: 100%;
  max-height: 300px;
  object-fit: contain; /* show full photo — no cropping */
  object-position: center center;
  display: block;
  border-radius: 10px;
}

.principal-sidebar .ps-body {
  padding: 18px 20px 22px;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.principal-sidebar .ps-name {
  margin: 0 0 4px;
  font-size: 1.2rem;
  font-weight: 800;
  color: #14532d;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.principal-sidebar .ps-role {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: #c0392b;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.principal-sidebar .ps-divider {
  width: 48px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, #176b3a, #F5D76E);
  margin: 14px auto;
}
.principal-sidebar .ps-message {
  margin: 0 0 16px;
  font-size: 0.92rem;
  line-height: 1.65;
  color: #475569;
  text-align: left;
  max-height: 160px;
  overflow: auto;
}
.principal-sidebar .ps-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding: 10px 18px;
  border-radius: 999px;
  background: #176b3a;
  color: #fff !important;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(23, 107, 58, 0.3);
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}
.principal-sidebar .ps-link:hover {
  background: #0f5132;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(23, 107, 58, 0.35);
}

/* Dark theme */
html[data-theme="dark"] .principal-sidebar,
body.theme-dark .principal-sidebar {
  background: linear-gradient(165deg, #1a2332 0%, #15202b 100%);
  border-color: rgba(39, 174, 96, 0.25);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .principal-sidebar .ps-photo-frame,
body.theme-dark .principal-sidebar .ps-photo-frame {
  background: linear-gradient(160deg, #1e2d3d 0%, #152433 100%);
  border-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .principal-sidebar .ps-name,
body.theme-dark .principal-sidebar .ps-name {
  color: #a7f3d0;
}
html[data-theme="dark"] .principal-sidebar .ps-message,
body.theme-dark .principal-sidebar .ps-message {
  color: #94a3b8;
}

/* Also prevent crop on generic principal-photo when used elsewhere */
.principal-photo.principal-photo-full,
.principal-photo-full {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  border-radius: 14px !important;
  overflow: hidden;
  background: #eef6f1;
}
.principal-photo.principal-photo-full img,
.principal-photo-full img {
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: contain !important;
}

@media (max-width: 900px) {
  .principal-sidebar .ps-photo-frame {
    min-height: 180px;
    max-height: 260px;
  }
  .principal-sidebar .ps-photo-frame img {
    max-height: 240px;
  }
}

/* =====================================================
   Unique Hero Slider — full photo (no crop by default)
   ===================================================== */
.hero.hero-unique,
body.home-clean .hc-hero.hero-unique {
  position: relative;
  height: clamp(280px, 52vw, 560px);
  min-height: 260px;
  max-height: 620px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(39, 174, 96, 0.18), transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(245, 215, 110, 0.15), transparent 50%),
    linear-gradient(145deg, #0d3b24 0%, #14532d 40%, #1a3a4a 100%);
  border-bottom: none;
}
/* Soft wave bottom edge */
.hero.hero-unique::after,
body.home-clean .hc-hero.hero-unique::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 36px;
  z-index: 7;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,24 C240,48 480,0 720,20 C960,40 1200,8 1440,28 L1440,48 L0,48 Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}
html[data-theme="dark"] .hero.hero-unique::after,
html[data-theme="dark"] body.home-clean .hc-hero.hero-unique::after,
body.theme-dark .hero.hero-unique::after,
body.theme-dark.home-clean .hc-hero.hero-unique::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath fill='%231a1528' d='M0,24 C240,48 480,0 720,20 C960,40 1200,8 1440,28 L1440,48 L0,48 Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}

.hero.hero-unique .hero-slides,
body.home-clean .hc-hero.hero-unique .hero-slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero.hero-unique .hero-slide,
body.home-clean .hc-hero.hero-unique .hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.85s ease;
  background: none !important;
  background-image: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero.hero-unique .hero-slide.active,
body.home-clean .hc-hero.hero-unique .hero-slide.active {
  opacity: 1;
  z-index: 1;
}

/* Media stage — full image, never crops when fit=contain */
.hero.hero-unique .hero-media,
body.home-clean .hc-hero.hero-unique .hero-media {
  position: absolute;
  inset: 12px 12px 28px;
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.06), rgba(0,0,0,0.12)),
    #0f2f1c;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.12),
    0 12px 40px rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero.hero-unique .hero-img,
body.home-clean .hc-hero.hero-unique .hero-img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* default full photo */
  object-position: center center;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.hero.hero-unique .hero-fit-cover .hero-img,
body.home-clean .hc-hero.hero-unique .hero-fit-cover .hero-img {
  object-fit: cover;
}

/* Text overlay sits above media */
.hero.hero-unique .hero-content,
body.home-clean .hc-hero.hero-unique .hero-content {
  position: relative;
  z-index: 3;
  max-width: 640px;
  padding: 20px 28px;
  margin-left: 8%;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(13, 59, 36, 0.72), rgba(20, 83, 45, 0.55));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 10px 32px rgba(0,0,0,0.25);
  color: #fff;
  text-shadow: none;
}
.hero.hero-unique .hero-content h2,
body.home-clean .hc-hero.hero-unique .hero-content h2 {
  font-size: clamp(1.35rem, 3.2vw, 2.35rem);
  margin-bottom: 8px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.hero.hero-unique .hero-content p,
body.home-clean .hc-hero.hero-unique .hero-content p {
  opacity: 0.95;
  margin-bottom: 16px;
}
.hero.hero-unique .hero-slide-photo-only .hero-content {
  display: none;
}

/* Nav & dots */
.hero.hero-unique .hero-nav,
body.home-clean .hc-hero.hero-unique .hero-nav {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  font-size: 1.35rem;
  z-index: 8;
}
.hero.hero-unique .hero-nav:hover,
body.home-clean .hc-hero.hero-unique .hero-nav:hover {
  background: #27AE60;
  border-color: transparent;
  color: #fff;
}
.hero.hero-unique .hero-nav.prev { left: 18px; }
.hero.hero-unique .hero-nav.next { right: 18px; }

.hero.hero-unique .hero-dots,
body.home-clean .hc-hero.hero-unique .hero-dots {
  bottom: 42px;
  gap: 8px;
  z-index: 8;
}
.hero.hero-unique .hero-dot,
body.home-clean .hc-hero.hero-unique .hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(255,255,255,0.35);
}
.hero.hero-unique .hero-dot.active,
body.home-clean .hc-hero.hero-unique .hero-dot.active {
  width: 26px;
  border-radius: 8px;
  background: #F5D76E;
  border-color: transparent;
  box-shadow: 0 0 12px rgba(245, 215, 110, 0.5);
}

.hero.hero-unique .hero-progress,
body.home-clean .hc-hero.hero-unique .hero-progress {
  bottom: 0;
  height: 3px;
  z-index: 9;
  background: linear-gradient(90deg, #F5D76E, #27AE60, #176b3a);
}

@media (max-width: 768px) {
  .hero.hero-unique,
  body.home-clean .hc-hero.hero-unique {
    height: clamp(220px, 58vw, 380px);
  }
  .hero.hero-unique .hero-media,
  body.home-clean .hc-hero.hero-unique .hero-media {
    inset: 8px 8px 24px;
    border-radius: 14px;
  }
  .hero.hero-unique .hero-content,
  body.home-clean .hc-hero.hero-unique .hero-content {
    margin-left: 4%;
    margin-right: 4%;
    max-width: none;
    padding: 14px 16px;
  }
  .hero.hero-unique .hero-nav,
  body.home-clean .hc-hero.hero-unique .hero-nav {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 1.1rem;
  }
  .hero.hero-unique .hero-nav.prev { left: 10px; }
  .hero.hero-unique .hero-nav.next { right: 10px; }
  .hero.hero-unique .hero-dots,
  body.home-clean .hc-hero.hero-unique .hero-dots {
    bottom: 32px;
  }
}

@media (max-width: 480px) {
  .hero.hero-unique,
  body.home-clean .hc-hero.hero-unique {
    height: clamp(200px, 62vw, 300px);
  }
}

/* =====================================================
   Hero FIX: fill photo + unique side frames (no empty bars)
   ===================================================== */
.hero.hero-unique,
body.home-clean .hc-hero.hero-unique {
  position: relative;
  height: clamp(320px, 48vw, 520px);
  min-height: 280px;
  max-height: 560px;
  overflow: hidden;
  background: #0d3b24;
  border-radius: 0 0 24px 24px;
}

/* Remove wave if it conflicts — keep clean bottom curve via border-radius */
.hero.hero-unique::after,
body.home-clean .hc-hero.hero-unique::after {
  display: none !important;
}

/* Side decorative frames */
.hero-side-frame {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  z-index: 6;
  pointer-events: none;
  background:
    linear-gradient(180deg, #176b3a 0%, #0f5132 35%, #14532d 65%, #1a5c3a 100%);
  box-shadow: inset 0 0 0 1px rgba(245, 215, 110, 0.35);
}
.hero-side-left {
  left: 0;
  border-radius: 0 0 0 24px;
  background-image:
    repeating-linear-gradient(
      180deg,
      transparent 0 18px,
      rgba(245, 215, 110, 0.15) 18px 19px
    ),
    linear-gradient(180deg, #1e8449, #0d3b24);
}
.hero-side-right {
  right: 0;
  border-radius: 0 0 24px 0;
  background-image:
    repeating-linear-gradient(
      180deg,
      transparent 0 18px,
      rgba(245, 215, 110, 0.15) 18px 19px
    ),
    linear-gradient(180deg, #1e8449, #0d3b24);
}
/* Gold accent line on inner edge of frames */
.hero-side-left::after,
.hero-side-right::after {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #F5D76E, #27AE60, #F5D76E);
  opacity: 0.9;
}
.hero-side-left::after { right: 4px; }
.hero-side-right::after { left: 4px; }
/* Decorative dots on frames */
.hero-side-left::before,
.hero-side-right::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: #F5D76E;
  box-shadow: 0 0 0 3px rgba(245, 215, 110, 0.25), 0 -40px 0 #F5D76E, 0 40px 0 #F5D76E;
}
.hero-side-left::before { right: 9px; }
.hero-side-right::before { left: 9px; }

/* Photo fills the hero — no side empty space */
.hero.hero-unique .hero-media,
body.home-clean .hc-hero.hero-unique .hero-media {
  position: absolute;
  inset: 0;
  left: 28px;
  right: 28px;
  border-radius: 0;
  overflow: hidden;
  background: #0f2f1c;
  box-shadow: none;
  display: block;
}
.hero.hero-unique .hero-img,
body.home-clean .hc-hero.hero-unique .hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover !important; /* fill — no empty bars */
  object-position: center center;
  display: block;
}
.hero.hero-unique .hero-fit-contain .hero-img,
body.home-clean .hc-hero.hero-unique .hero-fit-contain .hero-img {
  object-fit: contain !important;
}

/* Content over photo */
.hero.hero-unique .hero-content,
body.home-clean .hc-hero.hero-unique .hero-content {
  position: relative;
  z-index: 3;
  max-width: 560px;
  margin-left: max(48px, 6%);
  padding: 18px 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(13, 59, 36, 0.78), rgba(20, 83, 45, 0.6));
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.18);
}

/* Nav sits inside side frames area */
.hero.hero-unique .hero-nav.prev,
body.home-clean .hc-hero.hero-unique .hero-nav.prev {
  left: 40px;
}
.hero.hero-unique .hero-nav.next,
body.home-clean .hc-hero.hero-unique .hero-nav.next {
  right: 40px;
}
.hero.hero-unique .hero-dots,
body.home-clean .hc-hero.hero-unique .hero-dots {
  bottom: 16px;
}

@media (max-width: 768px) {
  .hero-side-frame { width: 14px; }
  .hero.hero-unique .hero-media,
  body.home-clean .hc-hero.hero-unique .hero-media {
    left: 14px;
    right: 14px;
  }
  .hero.hero-unique .hero-nav.prev,
  body.home-clean .hc-hero.hero-unique .hero-nav.prev { left: 22px; }
  .hero.hero-unique .hero-nav.next,
  body.home-clean .hc-hero.hero-unique .hero-nav.next { right: 22px; }
  .hero-side-left::before,
  .hero-side-right::before { display: none; }
}

/* =====================================================
   Hero: REMOVE covering rectangle — clear full photo
   ===================================================== */
.hero.hero-unique .hero-content,
body.home-clean .hc-hero.hero-unique .hero-content,
.hero .hero-content,
body.home-clean .hero-content {
  background: none !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
  max-width: 560px !important;
  margin-left: max(40px, 5%) !important;
}

/* Keep text readable without a big panel */
.hero.hero-unique .hero-content h2,
body.home-clean .hc-hero.hero-unique .hero-content h2,
.hero .hero-content h2 {
  text-shadow:
    0 2px 8px rgba(0,0,0,0.75),
    0 0 20px rgba(0,0,0,0.45) !important;
  color: #fff !important;
}
.hero.hero-unique .hero-content p,
body.home-clean .hc-hero.hero-unique .hero-content p,
.hero .hero-content p {
  text-shadow:
    0 1px 6px rgba(0,0,0,0.7),
    0 0 12px rgba(0,0,0,0.4) !important;
  color: #fff !important;
}

/* Photo must fill — no inset gap that looks like a panel */
.hero.hero-unique .hero-media,
body.home-clean .hc-hero.hero-unique .hero-media {
  inset: 0 !important;
  left: 22px !important;
  right: 22px !important;
  top: 0 !important;
  bottom: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #0d3b24 !important;
}
.hero.hero-unique .hero-img,
body.home-clean .hc-hero.hero-unique .hero-img {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}

/* Photo-only slides: never show empty content box */
.hero-slide-photo-only .hero-content {
  display: none !important;
}

/* Thin side frames only */
.hero-side-frame {
  width: 22px !important;
  z-index: 6;
}
@media (max-width: 768px) {
  .hero-side-frame { width: 12px !important; }
  .hero.hero-unique .hero-media,
  body.home-clean .hc-hero.hero-unique .hero-media {
    left: 12px !important;
    right: 12px !important;
  }
}

/* =====================================================
   FINAL FIX: normal tab size + logo gap + no hero rectangle
   ===================================================== */

/* Restore original nav tab size */
.header .nav-desktop {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 4px !important;
  margin-left: 12px !important;
}
.header .nav-desktop > a,
.header .nav-desktop .nav-more-btn {
  padding: 8px 14px !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  line-height: 1.25 !important;
}
.header .nav-more-btn {
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  font-family: inherit !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* =====================================================
   HEADER LOGO + NAV – responsive, full school name always visible
   ===================================================== */

/* Desktop / large screens: keep name + nav on one row without overlap */
.header .header-main {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: nowrap !important;
}

.header .logo-area {
  flex: 0 1 auto !important;
  max-width: min(380px, 36%) !important;
  min-width: 0 !important;
  position: relative;
  z-index: 3;
  overflow: visible !important;
}

.header .logo-text h1 {
  font-size: clamp(0.95rem, 1.2vw, 1.15rem) !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: none !important;
}

.header .logo-text span {
  font-size: 0.7rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

.header .nav-desktop {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  justify-content: flex-end !important;
  gap: 2px !important;
  margin-left: 4px !important;
  position: relative;
  z-index: 1;
}

.header .nav-desktop > a,
.header .nav-desktop .nav-more-btn {
  padding: 6px 9px !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  border-radius: 7px !important;
  white-space: nowrap !important;
}

@media (max-width: 1280px) {
  .header .logo-area { max-width: min(320px, 32%) !important; }
  .header .nav-desktop > a,
  .header .nav-desktop .nav-more-btn {
    padding: 5px 7px !important;
    font-size: 0.76rem !important;
  }
}

@media (max-width: 1100px) {
  .header .logo-area { max-width: min(280px, 30%) !important; }
  .header .nav-desktop > a,
  .header .nav-desktop .nav-more-btn {
    padding: 5px 6px !important;
    font-size: 0.72rem !important;
  }
}

/* ===== MOBILE / TABLET – sidebar only + FULL school branding ===== */
@media (max-width: 992px) {
  /* Force-hide desktop nav tabs; only logo + hamburger remain */
  .header .nav-desktop,
  .header-main .nav-desktop,
  .nav-desktop {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 0 !important;
  }
  .header .hamburger,
  .hamburger {
    display: flex !important;
    flex-shrink: 0 !important;
  }
  .header .logo-area {
    flex: 1 1 auto !important;
    max-width: none !important;
    min-width: 0 !important;
    width: auto !important;
  }
  .header .logo-text {
    min-width: 0 !important;
  }
  .header .logo-text h1 {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
    max-width: none !important;
  }
  .header .logo-text span {
    display: block !important;
    font-size: 0.68rem !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    opacity: 0.9;
  }
}

@media (max-width: 768px) {
  .header .logo-area {
    gap: 10px !important;
  }
  .header .logo-area img {
    width: 44px !important;
    height: 44px !important;
  }
  .header .logo-text h1 {
    font-size: 0.92rem !important;
    line-height: 1.18 !important;
  }
}

@media (max-width: 480px) {
  .header .logo-area {
    gap: 8px !important;
  }
  .header .logo-area img {
    width: 40px !important;
    height: 40px !important;
  }
  .header .logo-text h1 {
    font-size: 0.86rem !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }
  .header .logo-text span {
    display: block !important;           /* keep full branding like desktop */
    font-size: 0.62rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }
}

@media (max-width: 360px) {
  .header .logo-area img {
    width: 36px !important;
    height: 36px !important;
  }
  .header .logo-text h1 {
    font-size: 0.8rem !important;
    line-height: 1.12 !important;
  }
}

/* HERO: kill every covering rectangle / glass panel */
.hero .hero-content,
.hc-hero .hero-content,
.hero.hero-unique .hero-content,
body.home-clean .hc-hero.hero-unique .hero-content,
body.home-clean .hero-content {
  background: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  outline: none !important;
}
.hero-slide-photo-only .hero-content,
.hero-slide:not(:has(h2)):not(:has(p)) .hero-content {
  display: none !important;
}

/* Full-bleed photo — side frames sit ON TOP of edges, not as empty bars */
.hero.hero-unique .hero-media,
body.home-clean .hc-hero.hero-unique .hero-media {
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}
.hero.hero-unique .hero-img,
body.home-clean .hc-hero.hero-unique .hero-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 30% !important;
}

/* Decorative side frames only (overlay, not covering photo body) */
.hero-side-frame {
  width: 10px !important;
  opacity: 0.95;
  z-index: 5;
  pointer-events: none;
}
@media (max-width: 768px) {
  .hero-side-frame { width: 6px !important; }
}

/* =====================================================
   MOBILE HEADER – full branding (name + address) + sidebar only
   Matches desired look: logo | school name + address | hamburger
   ===================================================== */
@media (max-width: 992px) {
  .header .header-main,
  .header-main {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    padding: 10px 0 !important;
  }
  .nav-desktop,
  .header .nav-desktop,
  .header-main .nav-desktop {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    flex: 0 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .hamburger,
  .header .hamburger {
    display: flex !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }
  .logo-area,
  .header .logo-area {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
  }
  .logo-area img,
  .header .logo-area img {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
  }
  .logo-text,
  .header .logo-text {
    display: block !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  .logo-text h1,
  .header .logo-text h1 {
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    max-width: none !important;
  }
  .logo-text span,
  .header .logo-text span {
    display: block !important;
    font-size: 0.68rem !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }
}
@media (max-width: 480px) {
  .logo-area img,
  .header .logo-area img {
    width: 40px !important;
    height: 40px !important;
  }
  .logo-text h1,
  .header .logo-text h1 {
    font-size: 0.88rem !important;
  }
  .logo-text span,
  .header .logo-text span {
    display: block !important;
    font-size: 0.62rem !important;
  }
}

/* =====================================================
   Teams page — leadership cards always keep gradient + white text
   (must not be forced to plain white/dark by theme overrides)
   ===================================================== */
.lead-card,
html[data-theme="light"] .lead-card,
html:not([data-theme="dark"]) body:not(.theme-dark) .lead-card,
html[data-theme="dark"] .lead-card,
body.theme-dark .lead-card {
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14) !important;
}
.lead-card.principal,
html[data-theme="light"] .lead-card.principal,
html[data-theme="dark"] .lead-card.principal,
body.theme-dark .lead-card.principal {
  background: linear-gradient(135deg, #0d9488, #0284c7) !important;
}
.lead-card.vice,
html[data-theme="light"] .lead-card.vice,
html[data-theme="dark"] .lead-card.vice,
body.theme-dark .lead-card.vice {
  background: linear-gradient(135deg, #7c3aed, #db2777) !important;
}
.lead-card.coord,
html[data-theme="light"] .lead-card.coord,
html[data-theme="dark"] .lead-card.coord,
body.theme-dark .lead-card.coord {
  background: linear-gradient(135deg, #ea580c, #eab308) !important;
}
.lead-card.founder,
html[data-theme="light"] .lead-card.founder,
html[data-theme="dark"] .lead-card.founder,
body.theme-dark .lead-card.founder {
  background: linear-gradient(135deg, #b45309, #dc2626) !important;
}
.lead-card.md,
html[data-theme="light"] .lead-card.md,
html[data-theme="dark"] .lead-card.md,
body.theme-dark .lead-card.md {
  background: linear-gradient(135deg, #1d4ed8, #7c3aed) !important;
}
.lead-card.finance,
html[data-theme="light"] .lead-card.finance,
html[data-theme="dark"] .lead-card.finance,
body.theme-dark .lead-card.finance {
  background: linear-gradient(135deg, #0f766e, #1d4ed8) !important;
}
.lead-card.empty,
html[data-theme="light"] .lead-card.empty,
html[data-theme="dark"] .lead-card.empty,
body.theme-dark .lead-card.empty {
  background: linear-gradient(135deg, #64748b, #94a3b8) !important;
  opacity: 0.95;
}
.lead-card .lead-name,
.lead-card .lead-role,
.lead-card .lead-desig,
.lead-card .lead-meta,
.lead-card .lead-meta a,
.lead-card .lead-empty-msg,
html[data-theme="light"] .lead-card .lead-name,
html[data-theme="light"] .lead-card .lead-role,
html[data-theme="light"] .lead-card .lead-desig,
html[data-theme="light"] .lead-card .lead-meta,
html[data-theme="light"] .lead-card .lead-meta a,
html[data-theme="light"] .lead-card .lead-empty-msg,
html:not([data-theme="dark"]) body:not(.theme-dark) .lead-card .lead-name,
html:not([data-theme="dark"]) body:not(.theme-dark) .lead-card .lead-role,
html:not([data-theme="dark"]) body:not(.theme-dark) .lead-card .lead-desig,
html:not([data-theme="dark"]) body:not(.theme-dark) .lead-card .lead-meta,
html:not([data-theme="dark"]) body:not(.theme-dark) .lead-card .lead-meta a,
html:not([data-theme="dark"]) body:not(.theme-dark) .lead-card .lead-empty-msg {
  color: #ffffff !important;
}
.lead-card .lead-meta a {
  text-decoration: underline;
  opacity: 0.95;
}

/* Homepage events: single upcoming + single previous spacing */
#upcoming-events .hc-events-prev-head {
  margin: 14px 0 8px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}
html[data-theme="dark"] #upcoming-events .hc-events-prev-head,
body.theme-dark #upcoming-events .hc-events-prev-head {
  color: #94a3b8;
}
#upcoming-events .home-compact-item {
  margin-bottom: 10px;
}

/* =====================================================
   Homepage — Principal message (premium card)
   ===================================================== */
.hc-principal-col .hc-heading.left {
  display: none; /* title is inside the card */
}
.principal-wrap#principal-message,
#principal-message.principal-wrap {
  display: block;
  max-width: none;
  margin: 0;
}
.pm-card {
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(91, 44, 111, 0.1);
  box-shadow: 0 16px 40px rgba(26, 82, 118, 0.1);
  height: 100%;
}
html[data-theme="dark"] .pm-card,
body.theme-dark .pm-card {
  background: #1a1628;
  border-color: rgba(196, 181, 253, 0.15);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.pm-card-head {
  padding: 18px 22px 14px;
  background: linear-gradient(135deg, #5B2C6F 0%, #1A5276 55%, #1E8449 100%);
  color: #fff;
}
.pm-card-kicker {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 4px;
}
.pm-card-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff !important;
  line-height: 1.3;
}
.pm-card-body {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 18px;
  padding: 22px;
  align-items: start;
}
@media (max-width: 560px) {
  .pm-card-body {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 20px 16px 18px;
  }
  .pm-card-footer {
    flex-direction: column;
    align-items: center !important;
    gap: 12px !important;
  }
  .pm-card-message {
    text-align: left;
  }
}
.pm-card-photo-wrap {
  position: relative;
  width: 120px;
  flex-shrink: 0;
}
.pm-card-photo,
.pm-card-photo-placeholder {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 4px solid #fff;
  box-shadow: 0 8px 24px rgba(91, 44, 111, 0.2);
  background: linear-gradient(135deg, #ede9fe, #dbeafe);
}
html[data-theme="dark"] .pm-card-photo,
body.theme-dark .pm-card-photo {
  border-color: #2a2438;
}
.pm-card-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  font-weight: 800;
  color: #5B2C6F;
}
.pm-card-ribbon {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #C0392B, #D4AF37);
  box-shadow: 0 4px 12px rgba(192, 57, 43, 0.35);
}
.pm-card-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pm-card-message {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #334155;
  max-height: 11.9em; /* ~7 lines */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
}
html[data-theme="dark"] .pm-card-message,
body.theme-dark .pm-card-message {
  color: #e2e8f0;
}
.pm-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(91, 44, 111, 0.1);
}
html[data-theme="dark"] .pm-card-footer,
body.theme-dark .pm-card-footer {
  border-top-color: rgba(196, 181, 253, 0.15);
}
.pm-card-identity strong {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  color: #1e1b4b;
}
html[data-theme="dark"] .pm-card-identity strong,
body.theme-dark .pm-card-identity strong {
  color: #f5f3ff;
}
.pm-card-identity span {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #1A5276;
  margin-top: 2px;
}
html[data-theme="dark"] .pm-card-identity span,
body.theme-dark .pm-card-identity span {
  color: #93c5fd;
}
.pm-card-link {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #5B2C6F !important;
  background: rgba(91, 44, 111, 0.08);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.pm-card-link:hover {
  background: #5B2C6F;
  color: #fff !important;
}
html[data-theme="dark"] .pm-card-link,
body.theme-dark .pm-card-link {
  color: #c4b5fd !important;
  background: rgba(196, 181, 253, 0.12);
}
html[data-theme="dark"] .pm-card-link:hover,
body.theme-dark .pm-card-link:hover {
  background: #7c3aed;
  color: #fff !important;
}

/* Keep facilities + principal balanced */
.hc-facilities-principal {
  align-items: stretch;
}
.hc-principal-col {
  display: flex;
  flex-direction: column;
}
.hc-principal-col .principal-wrap {
  flex: 1;
}



/* ===== Visibility fixes for headings (2026-09-24) ===== */
.section-header h2,
.pro-intro-text h2,
.pro-card h3,
.timeline-content h3,
.facility-card h3,
.about-card h3,
.card-body h3,
.principal-card-body h3 {
  color: var(--primary-dark) !important;
  font-weight: 800;
}
.page-banner h1 {
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.page-banner p {
  color: rgba(255,255,255,0.95) !important;
  opacity: 1;
}

/* ===== Visibility fixes for headings (2026-09-24) ===== */
.section-header h2,
.pro-intro-text h2,
.pro-card h3,
.timeline-content h3,
.facility-card h3,
.about-card h3,
.card-body h3,
.principal-card-body h3 {
  color: var(--primary-dark) !important;
  font-weight: 800;
}
.page-banner h1 {
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.page-banner p {
  color: rgba(255,255,255,0.95) !important;
  opacity: 1;
}

/* ===== Admission open: Results moves to More ===== */
body.results-nav-hidden .nav-desktop > a.nav-results {
  /* Results is moved into .nav-more-menu by JS; hide any leftover in main */
  display: none !important;
}
body.admission-nav-hidden .nav-desktop > a.nav-admission,
body.admission-nav-hidden .mobile-nav > a.nav-admission {
  display: none !important;
}
.nav-more-menu a.nav-results,
.nav-more-menu a.nav-admission {
  display: block;
}


/* ===== Layout containment & card visibility (2026-09-24) ===== */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
.section {
  overflow-x: hidden;
}
.cards-grid,
.gallery-grid,
.nn-grid,
#notices-list,
#news-list,
#facilities-grid {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.nn-card,
.facility-card,
.card {
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.nn-body,
.nn-title,
.facility-card h3,
.facility-card p {
  overflow-wrap: break-word;
  word-break: break-word;
}
/* Notices list: ensure cards stay inside padded container */
#notices-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}
#notices-list .nn-card {
  width: 100%;
  max-width: 100%;
}
/* Facility cards: stronger title + readable body */
.facility-card h3,
.cards-grid .facility-card h3,
.nn-card .nn-title {
  color: #3D1A4A !important;
  font-weight: 800 !important;
}
.facility-card p,
.nn-excerpt {
  color: #374151 !important;
}
/* Page banner always high-contrast */
.page-banner h1 {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.page-banner p {
  color: rgba(255,255,255,0.95) !important;
  opacity: 1 !important;
}

/* Contact page: stronger headings + clear card containment */
body[data-page="contact"] .contact-info-pro h2,
body[data-page="contact"] .contact-form-pro h3 {
  color: #3D1A4A !important;
  font-weight: 800 !important;
}
body[data-page="contact"] .contact-info-pro,
body[data-page="contact"] .contact-form-pro {
  background: #ffffff;
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 4px 20px rgba(91, 44, 111, 0.08);
  border: 1px solid rgba(91, 44, 111, 0.06);
  box-sizing: border-box;
  max-width: 100%;
}
body[data-page="contact"] .contact-pro {
  gap: 28px;
}
@media (max-width: 768px) {
  body[data-page="contact"] .contact-info-pro,
  body[data-page="contact"] .contact-form-pro {
    padding: 20px 16px;
  }
}

/* ===== Unified page heading banner (matches website, both themes) ===== */
.page-banner,
.page-banner.res-hero,
section.res-hero {
  background: linear-gradient(135deg, #5B2C6F 0%, #1A5276 55%, #1E8449 100%) !important;
  color: #ffffff !important;
  padding: 56px 0 48px !important;
  text-align: center !important;
  position: relative;
  overflow: hidden;
  border: none !important;
}
.page-banner h1,
.page-banner.res-hero h1,
section.res-hero h1 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
  font-weight: 800 !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.page-banner p,
.page-banner.res-hero p,
section.res-hero p {
  color: rgba(255,255,255,0.95) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.95) !important;
  opacity: 1 !important;
  font-size: 1.05rem !important;
  margin: 0;
}

/* Dark theme: same website gradient (do not flatten to solid dark) */
html[data-theme="dark"] .page-banner,
body.theme-dark .page-banner,
html[data-theme="dark"] .page-banner.res-hero,
body.theme-dark .page-banner.res-hero,
html[data-theme="dark"] section.res-hero,
body.theme-dark section.res-hero {
  background: linear-gradient(135deg, #4A1C6B 0%, #1E3A8A 50%, #166534 100%) !important;
  color: #ffffff !important;
  border: none !important;
}
html[data-theme="dark"] .page-banner h1,
body.theme-dark .page-banner h1,
html[data-theme="dark"] .page-banner p,
body.theme-dark .page-banner p,
html[data-theme="dark"] .page-banner.res-hero h1,
body.theme-dark .page-banner.res-hero h1,
html[data-theme="dark"] .page-banner.res-hero p,
body.theme-dark .page-banner.res-hero p {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Light theme: keep website gradient (do not force white) */
html[data-theme="light"] .page-banner,
html:not([data-theme="dark"]) body:not(.theme-dark) .page-banner,
html[data-theme="light"] .page-banner.res-hero,
html:not([data-theme="dark"]) body:not(.theme-dark) .page-banner.res-hero {
  background: linear-gradient(135deg, #5B2C6F 0%, #1A5276 55%, #1E8449 100%) !important;
  color: #ffffff !important;
}
html[data-theme="light"] .page-banner h1,
html:not([data-theme="dark"]) body:not(.theme-dark) .page-banner h1,
html[data-theme="light"] .page-banner p,
html:not([data-theme="dark"]) body:not(.theme-dark) .page-banner p {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ========== Colorful animated hero frame ========== */
.hero.hc-hero,
section.hero,
body.home-clean .hc-hero {
  position: relative;
  margin: 22px auto 36px;
  max-width: min(1180px, calc(100% - 36px));
  /* height comes from inner slides area */
  height: auto !important;
  min-height: 0 !important;
  border-radius: 24px;
  overflow: visible !important;
  isolation: isolate;
  /* THICK colourful border via padding */
  padding: 8px !important;
  background: linear-gradient(
    120deg,
    #ef4444 0%,
    #f59e0b 16%,
    #22c55e 33%,
    #06b6d4 50%,
    #3b82f6 66%,
    #a855f7 83%,
    #ec4899 100%
  ) !important;
  background-size: 300% 300% !important;
  animation: heroBorderShift 6s linear infinite !important;
  box-shadow:
    0 20px 48px rgba(15, 23, 42, 0.16),
    0 0 28px rgba(168, 85, 247, 0.22);
  transition: box-shadow 0.35s ease, filter 0.35s ease;
}
/* Faster border animation while slide is changing — NO filter on photos */
.hero.hc-hero.is-transitioning,
section.hero.is-transitioning,
body.home-clean .hc-hero.is-transitioning {
  animation-duration: 0.9s !important;
  /* do not use filter here — it colour-shifts the photo */
  box-shadow:
    0 22px 56px rgba(15, 23, 42, 0.2),
    0 0 40px rgba(239, 68, 68, 0.35),
    0 0 56px rgba(59, 130, 246, 0.3);
}
@keyframes heroBorderShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Inner photo area */
.hero.hc-hero > .hero-slides,
section.hero > .hero-slides,
body.home-clean .hc-hero > .hero-slides {
  position: relative !important;
  inset: auto !important;
  display: block;
  width: 100%;
  height: clamp(300px, 48vw, 520px) !important;
  min-height: 280px;
  border-radius: 16px !important;
  overflow: hidden !important;
  z-index: 1;
  background: #0f172a;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}
.hero.hc-hero .hero-slide,
section.hero .hero-slide,
body.home-clean .hc-hero .hero-slide {
  border-radius: 16px;
  position: absolute;
  inset: 0;
}

/* Kill old pseudo borders that conflicted */
.hero.hc-hero::before,
section.hero::before,
body.home-clean .hc-hero::before {
  content: none !important;
  display: none !important;
}
.hero.hc-hero::after,
section.hero::after,
body.home-clean .hc-hero::after {
  content: none !important;
  display: none !important;
}

.hero.hc-hero .hero-nav,
section.hero .hero-nav {
  z-index: 8;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.75);
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(10px);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.hero.hc-hero .hero-nav:hover,
section.hero .hero-nav:hover {
  background: rgba(22, 163, 74, 0.92);
  border-color: #fff;
  transform: scale(1.06);
}
.hero.hc-hero .hero-dots,
section.hero .hero-dots {
  z-index: 8;
  bottom: 18px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.hero.hc-hero .hero-progress,
section.hero .hero-progress {
  z-index: 8;
  left: 8px;
  right: 8px;
  bottom: 8px;
  width: auto;
  border-radius: 0 0 14px 14px;
  height: 4px;
  background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e, #3b82f6, #a855f7);
  background-size: 200% 100%;
  animation: heroBorderShift 3s linear infinite;
}

@media (max-width: 700px) {
  .hero.hc-hero,
  section.hero,
  body.home-clean .hc-hero {
    margin: 12px 12px 24px;
    max-width: none;
    border-radius: 18px;
    padding: 6px !important;
  }
  .hero.hc-hero > .hero-slides,
  section.hero > .hero-slides,
  body.home-clean .hc-hero > .hero-slides {
    height: clamp(220px, 54vw, 320px) !important;
    border-radius: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero.hc-hero,
  section.hero,
  body.home-clean .hc-hero,
  .hero.hc-hero .hero-progress {
    animation: none !important;
  }
}

/* ========== Cinematic hero transitions ========== */
.hero .hero-slides {
  overflow: hidden;
}
.hero .hero-slide {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.02);
  transition:
    opacity 0.85s cubic-bezier(.4,0,.2,1),
    transform 0.95s cubic-bezier(.22,1,.36,1),
    visibility 0.85s,
    filter 0.85s ease;
  filter: blur(0);
  z-index: 0;
}
.hero .hero-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  transform: scale(1);
}
/* Slow living zoom while slide is active */
.hero .hero-slide.active.fx-kenburns,
.hero .hero-slide.active:not(.is-entering) {
  animation: heroKenBurns 7s ease-out forwards;
}
@keyframes heroKenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* --- Enter effects --- */
.hero .hero-slide.is-entering.fx-zoom {
  animation: heroInZoom 0.9s cubic-bezier(.22,1,.36,1) both;
}
.hero .hero-slide.is-entering.fx-slide.dir-next {
  animation: heroInSlideNext 0.85s cubic-bezier(.22,1,.36,1) both;
}
.hero .hero-slide.is-entering.fx-slide.dir-prev {
  animation: heroInSlidePrev 0.85s cubic-bezier(.22,1,.36,1) both;
}
.hero .hero-slide.is-entering.fx-fade-up {
  animation: heroInFadeUp 0.9s cubic-bezier(.22,1,.36,1) both;
}
.hero .hero-slide.is-entering.fx-wipe {
  animation: heroInWipe 0.95s cubic-bezier(.22,1,.36,1) both;
}
.hero .hero-slide.is-entering.fx-rotate {
  animation: heroInRotate 0.9s cubic-bezier(.22,1,.36,1) both;
}

/* --- Leave effects --- */
.hero .hero-slide.is-leaving.fx-zoom-out {
  animation: heroOutZoom 0.75s ease both;
  z-index: 1;
}
.hero .hero-slide.is-leaving.fx-slide-out.dir-next {
  animation: heroOutSlideNext 0.75s ease both;
  z-index: 1;
}
.hero .hero-slide.is-leaving.fx-slide-out.dir-prev {
  animation: heroOutSlidePrev 0.75s ease both;
  z-index: 1;
}
.hero .hero-slide.is-leaving.fx-fade-up-out {
  animation: heroOutFade 0.7s ease both;
  z-index: 1;
}
.hero .hero-slide.is-leaving.fx-wipe-out {
  animation: heroOutWipe 0.8s ease both;
  z-index: 1;
}
.hero .hero-slide.is-leaving.fx-rotate-out {
  animation: heroOutRotate 0.75s ease both;
  z-index: 1;
}

@keyframes heroInZoom {
  from { opacity: 0; transform: scale(1.18); filter: blur(6px); }
  to   { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes heroOutZoom {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.92); filter: blur(4px); }
}
@keyframes heroInSlideNext {
  from { opacity: 0; transform: translateX(12%) scale(1.04); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes heroOutSlideNext {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-10%); }
}
@keyframes heroInSlidePrev {
  from { opacity: 0; transform: translateX(-12%) scale(1.04); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes heroOutSlidePrev {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(10%); }
}
@keyframes heroInFadeUp {
  from { opacity: 0; transform: translateY(8%) scale(1.06); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes heroOutFade {
  from { opacity: 1; }
  to   { opacity: 0; filter: blur(3px); }
}
@keyframes heroInWipe {
  from { opacity: 0; clip-path: inset(0 100% 0 0); transform: scale(1.05); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); transform: scale(1); }
}
@keyframes heroOutWipe {
  from { opacity: 1; clip-path: inset(0 0 0 0); }
  to   { opacity: 0; clip-path: inset(0 0 0 60%); }
}
@keyframes heroInRotate {
  from { opacity: 0; transform: scale(1.12) rotate(-2deg); filter: blur(5px); }
  to   { opacity: 1; transform: scale(1) rotate(0); filter: blur(0); }
}
@keyframes heroOutRotate {
  from { opacity: 1; transform: scale(1) rotate(0); }
  to   { opacity: 0; transform: scale(1.06) rotate(1.5deg); filter: blur(3px); }
}

/* Text / buttons entrance */
.hero .hero-content.hero-content-in h2 {
  animation: heroTextIn 0.7s 0.15s cubic-bezier(.22,1,.36,1) both;
}
.hero .hero-content.hero-content-in p {
  animation: heroTextIn 0.7s 0.28s cubic-bezier(.22,1,.36,1) both;
}
.hero .hero-content.hero-content-in .hero-buttons {
  animation: heroTextIn 0.7s 0.4s cubic-bezier(.22,1,.36,1) both;
}
@keyframes heroTextIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Dots pulse when active */
.hero .hero-dot.active {
  animation: heroDotPulse 0.45s ease;
}
@keyframes heroDotPulse {
  0%   { transform: scale(0.7); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero .hero-slide,
  .hero .hero-slide.active,
  .hero .hero-content.hero-content-in h2,
  .hero .hero-content.hero-content-in p,
  .hero .hero-content.hero-content-in .hero-buttons {
    animation: none !important;
    transition: opacity 0.3s ease !important;
  }
}

/* Hero auto-colorize disabled — photos show natural colours */