/* =========================================
   SHREE BANESHWAR SHIKSHAN SANSTHA
   Design System
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Tiro+Devanagari+Marathi:ital@0;1&family=Noto+Sans:wght@400;500;600;700&family=Playfair+Display:wght@700;900&display=swap');

:root {
  /* Palette — inspired by saffron, ochre earth, deep indigo of Marathwada */
  --saffron:      #E8660A;
  --saffron-lt:   #F4892A;
  --ochre:        #C9A227;
  --deep-indigo:  #1A1F5E;
  --indigo-mid:   #2D3580;
  --cream:        #FDF6EC;
  --warm-white:   #FFFAF4;
  --charcoal:     #1C1C1C;
  --muted:        #6B6254;
  --divider:      #E0D5C5;
  --card-bg:      #FFFFFF;
  --footer-bg:    #0F1340;

  /* Typography */
  --font-display: 'Playfair Display', serif;
  --font-body:    'Noto Sans', sans-serif;
  --font-devan:   'Tiro Devanagari Marathi', serif;

  /* Spacing scale */
  --sp-xs: 0.5rem;
  --sp-sm: 1rem;
  --sp-md: 1.5rem;
  --sp-lg: 2.5rem;
  --sp-xl: 4rem;
  --sp-2xl: 6rem;

  --radius: 4px;
  --radius-lg: 12px;
  --shadow: 0 2px 16px rgba(26,31,94,0.10);
  --shadow-lg: 0 8px 40px rgba(26,31,94,0.16);
  --transition: 0.25s ease;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  background: var(--warm-white);
  color: var(--charcoal);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* =========================================
   NAVIGATION
   ========================================= */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255,250,244,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--divider);
  /* padding: 0 var(--sp-lg); */
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: box-shadow var(--transition);
}
.nav.scrolled { box-shadow: var(--shadow); }

.nav-brand {
  display: flex; align-items: center; gap: var(--sp-sm);
  flex: 0 1 auto;
  min-width: 0;   /* allow graceful shrink instead of pushing the nav wider */
}
.nav-logo {
  width: 42px; height: 42px;
  background: var(--deep-indigo);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-devan);
  color: var(--ochre);
  font-size: 1.2rem;
  font-weight: 700;
  flex-shrink: 0;
}
.nav-logo-img {
  width: 48px; height: 48px;
  object-fit: contain;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(201,162,39,0.4);
  background: #fff;
  padding: 2px;
}
.nav-title-wrap { display: flex; flex-direction: column; line-height: 1.2; }
.nav-title {
  font-family: var(--font-devan);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--deep-indigo);
}
.nav-subtitle {
  font-size: 0.68rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.nav-links {
  display: flex; align-items: center; gap: var(--sp-md);
  /* Translated labels (e.g. Marathi school names rendered in English) can be
     much wider than the originals. Allow the row to shrink and scroll rather
     than overflow into the logo. */
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links > li {
  flex: 0 0 auto;   /* keep each item on one line */
}
.nav-links a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--charcoal);
  position: relative;
  padding-bottom: 2px;
  transition: color var(--transition);
  white-space: nowrap;
}
.nav-links a::after {
  content: '';
  position: absolute; bottom: -2px; left: 0; right: 100%;
  height: 2px; background: var(--saffron);
  transition: right var(--transition);
}
.nav-links a:hover { color: var(--saffron); }
.nav-links a:hover::after { right: 0; }
.nav-links .btn-nav {
  background: var(--saffron);
  color: #fff;
  padding: 0.45rem 1.1rem;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 600;
  transition: background var(--transition), transform var(--transition);
}
.nav-links .btn-nav:hover {
  background: var(--deep-indigo);
  transform: translateY(-1px);
}
.nav-links .btn-nav::after { display: none; }

.hamburger {
  display: none;
  flex-direction: column; gap: 5px; cursor: pointer;
  background: none; border: none; padding: 4px;
}
.hamburger span {
  display: block; width: 24px; height: 2px;
  background: var(--charcoal);
  transition: var(--transition);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================
   HERO
   ========================================= */
.hero {
  min-height: 100vh;
  background:
    linear-gradient(135deg, rgba(20,24,74,0.80), rgba(45,53,128,0.72)),
    url('images/1 (6).jpeg') center 38% / cover no-repeat;
  position: relative;
  overflow: hidden;
  display: flex; align-items: center;
  padding-top: 68px;
}

.hero-pattern {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(232,102,10,0.18) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(201,162,39,0.15) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(45,53,128,0.4) 0%, transparent 70%);
}
/* Decorative geometric rings */
.hero-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.06);
}
.hero-ring-1 { width: 600px; height: 600px; top: -150px; right: -100px; }
.hero-ring-2 { width: 400px; height: 400px; top: -50px; right: 50px; }
.hero-ring-3 { width: 200px; height: 200px; top: 50px; right: 150px; }

.hero-content {
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto;
  padding: var(--sp-2xl) var(--sp-lg);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-xl);
  align-items: center;
}

.hero-motto {
  font-family: var(--font-devan);
  font-size: 1rem;
  color: var(--ochre);
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-md);
  display: flex; align-items: center; gap: var(--sp-sm);
}
.hero-motto::before { content: '॥'; }
.hero-motto::after { content: '॥'; }

.hero-heading {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  margin-bottom: var(--sp-sm);
}
.hero-heading .accent { color: var(--saffron-lt); }

.hero-sub-marathi {
  font-family: var(--font-devan);
  font-size: 1.2rem;
  color: rgba(255,255,255,0.72);
  margin-bottom: var(--sp-md);
}

.hero-desc {
  font-size: 1rem;
  color: rgba(255,255,255,0.64);
  max-width: 520px;
  margin-bottom: var(--sp-lg);
  line-height: 1.8;
}

.hero-actions { display: flex; gap: var(--sp-sm); flex-wrap: wrap; }
.btn-primary {
  background: var(--saffron);
  color: #fff;
  padding: 0.85rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all var(--transition);
  display: inline-flex; align-items: center; gap: 0.5rem;
  cursor: pointer; border: none;
}
.btn-primary:hover { background: var(--saffron-lt); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(232,102,10,0.35); }
.btn-outline {
  background: transparent;
  color: #fff;
  padding: 0.85rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1.5px solid rgba(255,255,255,0.4);
  transition: all var(--transition);
  display: inline-flex; align-items: center; gap: 0.5rem;
  cursor: pointer;
}
.btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.1); }

.hero-stats {
  display: flex; gap: var(--sp-lg); margin-top: var(--sp-xl);
}
.stat-item { text-align: center; }
.stat-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--ochre);
  line-height: 1;
}
.stat-label {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

/* Hero right — school cards preview */
.hero-visual {
  display: flex; flex-direction: column; gap: var(--sp-md);
  animation: floatUp 0.8s ease both;
}
@keyframes floatUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.school-preview-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: var(--sp-md) var(--sp-lg);
  display: flex; align-items: center; gap: var(--sp-md);
  transition: all var(--transition);
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.school-preview-card:hover {
  background: rgba(255,255,255,0.13);
  transform: translateX(-4px);
  border-color: rgba(232,102,10,0.5);
}
.school-icon {
  width: 48px; height: 48px;
  background: rgba(232,102,10,0.2);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.school-preview-info h3 {
  font-family: var(--font-devan);
  font-size: 0.95rem;
  color: #fff;
  font-weight: 700;
}
.school-preview-info p {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  margin-top: 2px;
}
.school-arrow { margin-left: auto; color: var(--saffron); font-size: 1.2rem; }

/* =========================================
   SECTION COMMONS
   ========================================= */
.section { padding: var(--sp-2xl) var(--sp-lg); }
.section-inner { max-width: 1200px; margin: 0 auto; }

.eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--saffron);
  margin-bottom: var(--sp-sm);
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 900;
  color: var(--deep-indigo);
  line-height: 1.2;
  margin-bottom: var(--sp-sm);
}
.section-subtitle {
  font-family: var(--font-devan);
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 600px;
  margin-bottom: var(--sp-xl);
}
.divider-line {
  width: 60px; height: 3px;
  background: linear-gradient(90deg, var(--saffron), var(--ochre));
  border-radius: 2px;
  margin-bottom: var(--sp-lg);
}

/* =========================================
   ABOUT / MISSION STRIP
   ========================================= */
.mission-strip {
  background: linear-gradient(135deg, var(--saffron) 0%, #BF4E06 100%);
  padding: var(--sp-xl) var(--sp-lg);
  text-align: center;
}
.mission-strip blockquote {
  font-family: var(--font-devan);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  color: #fff;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}
.mission-strip cite {
  display: block;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
  margin-top: var(--sp-sm);
  font-style: normal;
  letter-spacing: 0.06em;
}

/* =========================================
   ABOUT SECTION
   ========================================= */
.about-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2xl);
  align-items: center;
}
.about-text p {
  color: var(--muted);
  margin-bottom: var(--sp-md);
  font-size: 0.97rem;
  line-height: 1.85;
  text-align: justify;
  text-justify: inter-word;
}
.about-highlight {
  background: var(--cream);
  border-left: 4px solid var(--saffron);
  padding: var(--sp-md);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  margin: var(--sp-lg) 0;
}
.about-highlight p {
  font-family: var(--font-devan);
  font-size: 1rem;
  color: var(--deep-indigo);
  margin: 0;
  font-style: italic;
}

.about-founder {
  background: var(--deep-indigo);
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.about-founder::before {
  content: '🕉';
  position: absolute; top: var(--sp-md); right: var(--sp-lg);
  font-size: 3rem; opacity: 0.1;
}
.founder-name {
  font-family: var(--font-devan);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ochre);
  margin-bottom: var(--sp-xs);
}
.founder-title {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--sp-md);
}
.founder-quote {
  font-size: 0.95rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.8);
  text-align: justify;
  text-justify: inter-word;
}

.timeline {
  margin-top: var(--sp-lg);
  position: relative;
  padding-left: 28px;
}
.timeline::before {
  content: '';
  position: absolute; left: 8px; top: 0; bottom: 0;
  width: 2px; background: var(--divider);
}
.timeline-item {
  position: relative;
  margin-bottom: var(--sp-md);
}
.timeline-item::before {
  content: '';
  position: absolute; left: -24px; top: 6px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--saffron);
  border: 2px solid var(--warm-white);
}
.timeline-year {
  font-weight: 700;
  color: var(--saffron);
  font-size: 0.85rem;
}
.timeline-text {
  font-size: 0.88rem;
  color: var(--muted);
  margin-top: 2px;
}

/* =========================================
   SCHOOLS SECTION
   ========================================= */
.schools-section { background: var(--cream); }
.schools-grid {
  display: grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-lg);
}
.school-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: all var(--transition);
  display: flex; flex-direction: column;
}
.school-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.school-card-header {
  background: var(--deep-indigo);
  padding: var(--sp-lg);
  position: relative;
  overflow: hidden;
}
.school-card-header::after {
  content: '';
  position: absolute; bottom: -20px; right: -20px;
  width: 80px; height: 80px;
  background: rgba(232,102,10,0.2);
  border-radius: 50%;
}
.school-card-icon {
  font-size: 2.5rem;
  margin-bottom: var(--sp-sm);
}
.school-card-name {
  font-family: var(--font-devan);
  font-size: 1.1rem;
  color: #fff;
  font-weight: 700;
  line-height: 1.4;
}
.school-card-location {
  font-size: 0.78rem;
  color: var(--ochre);
  margin-top: 4px;
  display: flex; align-items: center; gap: 4px;
}

.school-card-body { padding: var(--sp-lg); flex: 1; }
.school-card-est {
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--sp-sm);
}
.school-card-desc {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: var(--sp-md);
  text-align: justify;
  text-justify: inter-word;
}
.school-card-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: var(--sp-md);
}
.tag {
  background: rgba(26,31,94,0.07);
  color: var(--deep-indigo);
  padding: 3px 10px;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 600;
}
.school-card-footer {
  padding: 0 var(--sp-lg) var(--sp-lg);
}
.btn-school {
  display: block;
  text-align: center;
  background: var(--deep-indigo);
  color: #fff;
  padding: 0.7rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.88rem;
  transition: all var(--transition);
}
.btn-school:hover { background: var(--saffron); }

/* =========================================
   FEATURES / PILLARS
   ========================================= */
.pillars-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-lg);
}
.pillar-card {
  text-align: center;
  padding: var(--sp-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--divider);
  transition: all var(--transition);
  background: var(--card-bg);
}
.pillar-card:hover {
  border-color: var(--saffron);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.pillar-icon {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, rgba(232,102,10,0.1), rgba(201,162,39,0.1));
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
  margin: 0 auto var(--sp-md);
}
.pillar-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--deep-indigo);
  margin-bottom: var(--sp-xs);
}
.pillar-desc {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.7;
}

/* =========================================
   ACHIEVEMENTS
   ========================================= */
.achievements-section {
  background: var(--deep-indigo);
  color: #fff;
}
.achievements-section .section-title { color: #fff; }
.achievements-section .divider-line { background: linear-gradient(90deg, var(--ochre), var(--saffron)); }
.achievements-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-lg);
  text-align: center;
}
.achievement-num {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--ochre);
  line-height: 1;
}
.achievement-label {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  margin-top: 6px;
  font-family: var(--font-devan);
}

/* =========================================
   NOTABLE ALUMNI
   ========================================= */
.alumni-section { background: var(--cream); }
.alumni-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-md);
}
.alumni-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: var(--sp-md) var(--sp-lg);
  display: flex; gap: var(--sp-md); align-items: center;
  box-shadow: 0 1px 8px rgba(26,31,94,0.07);
  transition: all var(--transition);
  border: 1px solid var(--divider);
}
.alumni-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--saffron);
  transform: translateY(-2px);
}
.alumni-avatar {
  width: 96px; height: 116px;
  background: linear-gradient(135deg, var(--deep-indigo), var(--indigo-mid));
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ochre);
  font-weight: 700;
  font-size: 2rem;
  font-family: var(--font-devan);
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid rgba(232,102,10,0.25);
  box-shadow: 0 4px 12px rgba(26,31,94,0.15);
}
.alumni-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.alumni-name {
  font-family: var(--font-devan);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--deep-indigo);
}
.alumni-role {
  font-size: 0.78rem;
  color: var(--saffron);
  margin-top: 2px;
}
.alumni-school {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 2px;
}

/* =========================================
   CONTACT SECTION (on landing)
   ========================================= */
.contact-banner {
  background: linear-gradient(135deg, var(--deep-indigo), var(--indigo-mid));
  padding: var(--sp-xl) var(--sp-lg);
  text-align: center;
  color: #fff;
}
.contact-banner h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  margin-bottom: var(--sp-sm);
}
.contact-banner p {
  color: rgba(255,255,255,0.65);
  margin-bottom: var(--sp-lg);
}

/* =========================================
   FOOTER
   ========================================= */
footer {
  background: var(--footer-bg);
  color: rgba(255,255,255,0.7);
  padding: var(--sp-2xl) var(--sp-lg) var(--sp-lg);
}
.footer-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-xl);
  margin-bottom: var(--sp-xl);
}
.footer-brand-name {
  font-family: var(--font-devan);
  font-size: 1.1rem;
  color: #fff;
  font-weight: 700;
  margin-bottom: var(--sp-xs);
}
.footer-brand-sub {
  font-size: 0.78rem;
  color: var(--ochre);
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-md);
}
.footer-desc {
  font-size: 0.85rem;
  line-height: 1.8;
  text-align: justify;
  text-justify: inter-word;
}
.footer-col-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ochre);
  margin-bottom: var(--sp-md);
}
.footer-links li { margin-bottom: 0.6rem; }
.footer-links a {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  transition: color var(--transition);
}
.footer-links a:hover { color: var(--saffron-lt); }
.footer-divider {
  border: none; border-top: 1px solid rgba(255,255,255,0.1);
  max-width: 1200px; margin: 0 auto var(--sp-lg);
}
.footer-bottom {
  max-width: 1200px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
}
.footer-motto {
  font-family: var(--font-devan);
  color: rgba(255,255,255,0.4);
}

/* =========================================
   INNER PAGE: SCHOOL PAGE
   ========================================= */
.school-page-hero {
  background: var(--deep-indigo);
  padding: calc(68px + var(--sp-xl)) var(--sp-lg) var(--sp-xl);
  position: relative;
  overflow: hidden;
}
.school-page-hero::before {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 50%; height: 100%;
  background: radial-gradient(ellipse at right, rgba(232,102,10,0.15), transparent 70%);
}
.school-page-breadcrumb {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.45);
  margin-bottom: var(--sp-sm);
}
.school-page-breadcrumb a { color: var(--ochre); }
.school-page-breadcrumb a:hover { text-decoration: underline; }
.school-page-title {
  font-family: var(--font-devan);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  color: #fff;
  font-weight: 700;
  line-height: 1.3;
  max-width: 700px;
  margin-bottom: var(--sp-sm);
}
.school-page-meta {
  display: flex; gap: var(--sp-md); flex-wrap: wrap;
  margin-top: var(--sp-md);
}
.meta-pill {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50px;
  padding: 0.35rem 1rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.75);
  display: flex; align-items: center; gap: 6px;
}

.school-content {
  max-width: 1200px; margin: 0 auto;
  padding: var(--sp-2xl) var(--sp-lg);
  display: grid; grid-template-columns: 1fr 340px; gap: var(--sp-2xl);
  align-items: start;
}
.school-main-text { }
.school-section-head {
  display: flex; align-items: center; gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
}
.school-section-num {
  width: 32px; height: 32px;
  background: var(--saffron);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.school-section-label {
  font-family: var(--font-devan);
  font-size: 1.3rem;
  color: var(--deep-indigo);
  font-weight: 700;
}
.school-article {
  font-family: var(--font-devan);
  font-size: 1rem;
  color: var(--muted);
  line-height: 2;
  margin-bottom: var(--sp-lg);
}
.school-article p { margin-bottom: var(--sp-sm); }
.school-article strong { color: var(--charcoal); }

.school-sidebar-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--divider);
  overflow: hidden;
  margin-bottom: var(--sp-md);
  position: sticky; top: 88px;
}
.sidebar-card-header {
  background: var(--deep-indigo);
  padding: var(--sp-md) var(--sp-lg);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ochre);
}
.sidebar-card-body { padding: var(--sp-md) var(--sp-lg); }
.sidebar-stat { margin-bottom: var(--sp-sm); }
.sidebar-stat-num {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--deep-indigo);
  line-height: 1;
}
.sidebar-stat-label {
  font-size: 0.78rem;
  color: var(--muted);
}
.sidebar-divider { height: 1px; background: var(--divider); margin: var(--sp-sm) 0; }

.alumni-list-school { margin-top: var(--sp-md); }
.alumni-item {
  display: flex; align-items: flex-start; gap: var(--sp-sm);
  padding: var(--sp-sm) 0;
  border-bottom: 1px solid var(--divider);
}
.alumni-item:last-child { border-bottom: none; }
.alumni-dot {
  width: 8px; height: 8px;
  background: var(--saffron);
  border-radius: 50%;
  margin-top: 7px;
  flex-shrink: 0;
}
.alumni-item-name {
  font-family: var(--font-devan);
  font-size: 0.88rem;
  color: var(--deep-indigo);
  font-weight: 600;
}
.alumni-item-role {
  font-size: 0.75rem;
  color: var(--muted);
}

/* Hostel features grid */
.features-grid-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-sm);
  margin: var(--sp-md) 0;
}
.feature-item {
  display: flex; align-items: center; gap: var(--sp-sm);
  padding: var(--sp-sm);
  background: var(--cream);
  border-radius: var(--radius);
  font-size: 0.85rem;
  color: var(--charcoal);
}
.feature-item .fi { font-size: 1.2rem; }

/* Heads table */
.heads-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin-top: var(--sp-md);
}
.heads-table th {
  background: var(--deep-indigo);
  color: rgba(255,255,255,0.8);
  padding: 0.6rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.78rem;
}
.heads-table td {
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--divider);
  color: var(--muted);
}
.heads-table tr:nth-child(even) td { background: var(--cream); }
.heads-table .name-cell {
  font-family: var(--font-devan);
  color: var(--charcoal);
  font-weight: 500;
}

/* =========================================
   CONTACT PAGE
   ========================================= */
.contact-hero {
  background: var(--deep-indigo);
  padding: calc(68px + var(--sp-xl)) var(--sp-lg) var(--sp-xl);
  text-align: center;
}
.contact-page-title {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: var(--sp-sm);
}
.contact-page-sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.6);
}

.contact-layout {
  max-width: 1100px; margin: 0 auto;
  padding: var(--sp-2xl) var(--sp-lg);
  display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-2xl);
}
.contact-info-block { }
.contact-info-title {
  font-family: var(--font-devan);
  font-size: 1.4rem;
  color: var(--deep-indigo);
  font-weight: 700;
  margin-bottom: var(--sp-lg);
}
.contact-school-entry {
  margin-bottom: var(--sp-lg);
  padding: var(--sp-md);
  border-radius: var(--radius-lg);
  border: 1px solid var(--divider);
  background: var(--card-bg);
}
.cse-name {
  font-family: var(--font-devan);
  font-size: 1rem;
  font-weight: 700;
  color: var(--deep-indigo);
  margin-bottom: var(--sp-xs);
}
.cse-detail {
  display: flex; gap: 8px;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 4px;
  align-items: flex-start;
}
.cse-detail span:first-child { flex-shrink: 0; }

.contact-form-wrap {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: var(--sp-xl);
  box-shadow: var(--shadow);
}
.form-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--deep-indigo);
  margin-bottom: var(--sp-lg);
}
.form-group { margin-bottom: var(--sp-md); }
.form-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--divider);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--charcoal);
  background: var(--warm-white);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--saffron);
  box-shadow: 0 0 0 3px rgba(232,102,10,0.12);
}
.form-textarea { resize: vertical; min-height: 130px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
.btn-submit {
  width: 100%;
  background: var(--saffron);
  color: #fff;
  border: none;
  padding: 0.9rem;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
  margin-top: var(--sp-sm);
}
.btn-submit:hover { background: var(--deep-indigo); transform: translateY(-1px); }
.form-success {
  display: none;
  text-align: center;
  padding: var(--sp-lg);
}
.form-success.show { display: block; }
.form-success .success-icon { font-size: 3rem; margin-bottom: var(--sp-sm); }
.form-success p { color: var(--muted); }

/* =========================================
   SCROLL ANIMATIONS
   ========================================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================
   INLINE GRID HELPERS (used inside school pages)
   ========================================= */
.inline-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.inline-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}


/* =========================================
   RESPONSIVE — TABLET  (≤1024px)
   ========================================= */
@media (max-width: 1024px) {
  :root {
    --sp-lg: 2rem;
    --sp-xl: 3rem;
    --sp-2xl: 4rem;
  }
  .nav { padding: 0 1.25rem; }
  /* School pages carry the most nav items (plus two long school names that
     grow further once translated). Tighten spacing here so they stay on one
     row for longer before the horizontal-scroll fallback kicks in. */
  .nav-links { gap: 1rem; }
  .nav-links a { font-size: 0.82rem; }
  .nav-links .btn-nav { padding: 0.4rem 0.85rem; }
  .hero-content {
    grid-template-columns: 1fr;
    padding: 3rem 1.25rem 2.5rem;
    gap: 2rem;
  }
  .hero-visual { display: none; }
  .hero-stats { gap: 1.5rem; flex-wrap: wrap; }
  .section { padding: 3rem 1.25rem; }
  .section-inner { padding: 0; }
  .about-grid          { grid-template-columns: 1fr; gap: 2rem; }
  .schools-grid        { grid-template-columns: 1fr 1fr; }
  .pillars-grid        { grid-template-columns: repeat(2, 1fr); }
  .achievements-grid   { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .alumni-grid         { grid-template-columns: 1fr 1fr; }
  .school-content      { grid-template-columns: 1fr; padding: 2.5rem 1.25rem; }
  .school-sidebar-card { position: static; }
  .school-page-hero    { padding: calc(68px + 2rem) 1.25rem 2rem; }
  .footer-inner        { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-bottom       { flex-direction: column; gap: .75rem; text-align: center; }
  .inline-grid-3 { grid-template-columns: 1fr; gap: .85rem; }
}

/* =========================================
   RESPONSIVE — MOBILE  (≤768px)
   ========================================= */
@media (max-width: 768px) {
  :root {
    --sp-xs:  0.4rem;
    --sp-sm:  0.75rem;
    --sp-md:  1rem;
    --sp-lg:  1.25rem;
    --sp-xl:  2rem;
    --sp-2xl: 3rem;
  }

  /* ─── NAV ─── */
  .nav {
    padding: 0 1rem;
    height: 58px;
  }
  .nav-logo-img {
    width: 36px;
    height: 36px;
  }
  .nav-brand { gap: .5rem; }
  .nav-title  { font-size: .75rem; }
  .nav-subtitle { display: none; }

  .nav-links {
    display: none;
    flex-direction: column;
    align-items: stretch;
  }
  .nav-links.mobile-open {
    display: flex;
    position: fixed;
    top: 58px; left: 0; right: 0;
    background: var(--warm-white);
    border-bottom: 2px solid var(--divider);
    padding: .5rem 1rem 1rem;
    gap: 0;
    z-index: 999;
    box-shadow: 0 8px 24px rgba(26,31,94,.14);
    /* Undo the desktop horizontal-scroll behaviour: the mobile menu is a
       vertical list and must be allowed to grow/scroll downward instead. */
    overflow-x: visible;
    overflow-y: auto;
    max-height: calc(100vh - 58px);
    justify-content: flex-start;
  }
  .nav-links.mobile-open > li {
    width: 100%;
  }
  .nav-links.mobile-open li a {
    display: block;
    padding: .7rem .5rem;
    font-size: .92rem;
    border-bottom: 1px solid var(--divider);
    width: 100%;
  }
  .nav-links.mobile-open li:last-child a { border-bottom: none; }
  .nav-links.mobile-open .btn-nav {
    display: block;
    margin-top: .5rem;
    text-align: center;
    border-radius: 8px;
    padding: .7rem;
    border-bottom: none;
  }
  .hamburger { display: flex; }

  /* ─── HERO ─── */
  .hero { padding-top: 58px; min-height: auto; }
  .hero-content {
    grid-template-columns: 1fr;
    padding: 2rem 1rem 2.5rem;
    gap: 1.5rem;
  }
  .hero-visual { display: none; }
  .hero-ring   { display: none; }
  .hero-motto  { font-size: .8rem; letter-spacing: .02em; }
  .hero-heading { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .hero-sub-marathi { font-size: .95rem; }
  .hero-desc { font-size: .88rem; margin-bottom: 1.25rem; }
  .hero-actions {
    flex-direction: column;
    gap: .6rem;
  }
  .btn-primary,
  .btn-outline {
    width: 100%;
    justify-content: center;
    padding: .8rem 1rem;
    font-size: .9rem;
  }
  .hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem 1rem;
    margin-top: 1.5rem;
  }
  .stat-item { text-align: left; }
  .stat-num  { font-size: 1.75rem; }
  .stat-label { font-size: .68rem; }

  /* ─── MISSION STRIP ─── */
  .mission-strip { padding: 1.75rem 1rem; }
  .mission-strip blockquote { font-size: 1rem; }

  /* ─── SECTIONS ─── */
  .section { padding: 2.5rem 1rem; }
  .section-title    { font-size: 1.5rem; }
  .section-subtitle { font-size: .88rem; margin-bottom: 1.25rem; }
  .eyebrow { font-size: .7rem; }

  /* ─── ABOUT ─── */
  .about-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .about-text p { font-size: .9rem; }
  .about-highlight { padding: 1rem; }
  .about-founder   { padding: 1.25rem; }
  .founder-name    { font-size: 1.15rem; }
  .timeline { padding-left: 18px; }
  .timeline-item::before { left: -18px; width: 9px; height: 9px; }
  .timeline-year   { font-size: .8rem; }
  .timeline-text   { font-size: .82rem; }

  /* ─── SCHOOLS GRID ─── */
  .schools-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .school-card-header { padding: 1.1rem 1.1rem .85rem; }
  .school-card-icon   { font-size: 1.8rem; margin-bottom: .5rem; }
  .school-card-name   { font-size: .95rem; }
  .school-card-body   { padding: .85rem 1.1rem; }
  .school-card-desc   { font-size: .84rem; }
  .school-card-footer { padding: 0 1.1rem 1.1rem; }
  .tag { font-size: .68rem; }

  /* ─── PILLARS ─── */
  .pillars-grid {
    grid-template-columns: 1fr 1fr;
    gap: .85rem;
  }
  .pillar-card  { padding: 1rem .85rem; }
  .pillar-icon  { width: 44px; height: 44px; font-size: 1.3rem; margin-bottom: .75rem; }
  .pillar-title { font-size: .84rem; }
  .pillar-desc  { font-size: .75rem; }

  /* ─── ACHIEVEMENTS ─── */
  .achievements-section .section-inner { padding: 0 1rem; }
  .achievements-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 2rem !important;
  }
  .achievement-num   { font-size: 2.4rem; }
  .achievement-label { font-size: .75rem; }
  /* 3-col highlight cards inside achievements → stack */
  .achievements-section [style*="repeat(3,1fr)"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .75rem !important;
  }

  /* ─── ALUMNI ─── */
  .alumni-section .section-inner { padding: 0 1rem; }
  .alumni-grid {
    grid-template-columns: 1fr;
    gap: .75rem;
  }
  .alumni-card { padding: .85rem 1rem; }
  .alumni-avatar { width: 72px; height: 88px; font-size: 1.5rem; }
  .alumni-name   { font-size: .84rem; }
  .alumni-role   { font-size: .7rem; }
  .alumni-school { font-size: .68rem; }

  /* ─── CONTACT BANNER ─── */
  .contact-banner { padding: 2rem 1rem; }
  .contact-banner h2 { font-size: 1.35rem; }
  .contact-banner p  { font-size: .85rem; }

  /* ─── FOOTER ─── */
  footer { padding: 2.5rem 1rem 1rem; }
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .footer-brand-name { font-size: .95rem; }
  .footer-brand-sub  { font-size: .72rem; }
  .footer-desc       { font-size: .82rem; }
  .footer-col-title  { font-size: .72rem; margin-bottom: .6rem; }
  .footer-links a    { font-size: .82rem; }
  .footer-bottom {
    flex-direction: column;
    gap: .4rem;
    text-align: center;
    font-size: .7rem;
  }
  .footer-motto { font-size: .7rem; }

  /* ─── SCHOOL INNER PAGE HERO ─── */
  .school-page-hero {
    padding: calc(58px + 1.25rem) 1rem 1.5rem;
  }
  /* logo badge inside hero */
  .school-page-hero > .section-inner > div:first-child img {
    width: 52px; height: 52px;
  }
  .school-page-breadcrumb { font-size: .7rem; }
  .school-page-title      { font-size: 1.3rem; line-height: 1.35; }
  .school-page-meta {
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .75rem;
  }
  .meta-pill { font-size: .65rem; padding: .2rem .6rem; }

  /* ─── SCHOOL INNER PAGE CONTENT ─── */
  .school-content {
    grid-template-columns: 1fr;
    padding: 1.5rem 1rem;
    gap: 1.25rem;
    max-width: 100%;
  }
  .school-section-head { gap: .5rem; margin-bottom: .75rem; }
  .school-section-num  { width: 28px; height: 28px; font-size: .78rem; }
  .school-section-label { font-size: 1rem; }
  .school-article  { font-size: .88rem; line-height: 1.9; }
  .school-article p { margin-bottom: .75rem; }

  .features-grid-2 { grid-template-columns: 1fr; gap: .45rem; }
  .feature-item    { padding: .65rem .85rem; font-size: .82rem; }

  /* Heads table — horizontal scroll on mobile */
  .heads-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .heads-table { min-width: 420px; font-size: .75rem; }
  .heads-table th { padding: .45rem .65rem; font-size: .68rem; }
  .heads-table td { padding: .45rem .65rem; }

  /* Sidebar stacked below content */
  .school-sidebar-card { position: static; margin-bottom: .85rem; }
  .sidebar-card-header { padding: .75rem 1rem; font-size: .72rem; }
  .sidebar-card-body   { padding: .85rem 1rem; }
  .sidebar-stat-num    { font-size: 1.5rem; }
  .sidebar-stat-label  { font-size: .72rem; }

  /* Alumni list on school page */
  .alumni-list-school { margin-top: .85rem; }
  .alumni-item        { padding: .6rem 0; }
  .alumni-item-name   { font-size: .84rem; }
  .alumni-item-role   { font-size: .72rem; }

  /* Inline stat boxes on school pages */
  [style*="repeat(3,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: .75rem !important;
  }
  [style*="repeat(2,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: .6rem !important;
  }
}

/* =========================================
   RESPONSIVE — SMALL MOBILE  (≤480px)
   ========================================= */
@media (max-width: 480px) {
  /* Nav */
  .nav-title    { font-size: .7rem; }
  .nav-logo-img { width: 32px; height: 32px; }
  .nav-brand    { gap: .4rem; }

  /* Hero */
  .hero-content   { padding: 1.5rem .85rem 2rem; }
  .hero-heading   { font-size: clamp(1.45rem, 8vw, 1.85rem); }
  .hero-stats     { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .stat-num       { font-size: 1.55rem; }
  .stat-label     { font-size: .64rem; }
  .hero-motto     { font-size: .72rem; }

  /* Pillars → 1 col */
  .pillars-grid { grid-template-columns: 1fr; gap: .65rem; }
  .pillar-card  { display: flex; gap: .85rem; align-items: flex-start; padding: .85rem 1rem; text-align: left; }
  .pillar-icon  { margin: 0; width: 38px; height: 38px; flex-shrink: 0; }

  /* Achievements */
  .achievements-grid { grid-template-columns: 1fr 1fr; gap: .85rem; }
  .achievement-num   { font-size: 2rem; }

  /* School page */
  .school-page-hero  { padding: calc(56px + 1rem) .85rem 1.25rem; }
  .school-page-title { font-size: 1.15rem; }
  .school-content    { padding: 1.25rem .85rem; }

  /* Sidebar inline stats grid on school pages */
  [style*="repeat(3,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: .6rem !important;
  }

  /* Footer */
  footer { padding: 2rem .85rem 1rem; }
  .footer-col-title { font-size: .68rem; }
  .footer-links a   { font-size: .78rem; }

  /* Section */
  .section       { padding: 2rem .85rem; }
  .section-title { font-size: 1.3rem; }
  .eyebrow       { font-size: .65rem; }

  /* Schools grid gap */
  .schools-grid { gap: .75rem; }

  /* Buttons */
  .btn-primary, .btn-outline { font-size: .85rem; padding: .72rem .9rem; }

  /* Contact banner */
  .contact-banner h2 { font-size: 1.2rem; }
}

/* =========================================
   RESPONSIVE — VERY SMALL  (≤360px)
   ========================================= */
@media (max-width: 360px) {
  .nav-title { display: none; }
  .hero-heading { font-size: 1.3rem; }
  .section { padding: 1.75rem .7rem; }
  .school-content { padding: 1rem .7rem; }
  .school-page-hero { padding: calc(56px + .85rem) .7rem 1rem; }
  .stat-num { font-size: 1.4rem; }
  .meta-pill { font-size: .58rem; padding: .15rem .45rem; }
  .hero-stats { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .achievements-grid { grid-template-columns: 1fr 1fr; }
  .achievement-num { font-size: 1.75rem; }
  .alumni-avatar { width: 58px; height: 70px; font-size: 1.2rem; }
  footer { padding: 1.75rem .7rem .85rem; }
}

/* =========================================
   LANGUAGE SWITCHER — custom select, default English
   (Google Translate itself is fully hidden; this select
   drives it via the googtrans cookie, so it never affects
   nav layout and always looks like a native site control.)
   ========================================= */
.nav-translate {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
#google_translate_element {
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  display: block !important;
}
.lang-switcher {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff;
  border: 1.5px solid rgba(232,102,10,0.35);
  border-radius: 50px;
  padding: 0.4rem 1.6rem 0.4rem 0.9rem;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--deep-indigo);
  cursor: pointer;
  height: 34px;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(26,31,94,0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%231A1F5E'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
}
.lang-switcher:hover,
.lang-switcher:focus {
  border-color: var(--saffron);
  box-shadow: 0 4px 14px rgba(232,102,10,0.2);
  outline: none;
}

/* Hide Google's small decorative bits, but NOT the top banner —
   see the banner handling below. */
.goog-te-gadget-icon,
.goog-tooltip,
.goog-tooltip:hover {
  display: none !important;
}
.goog-text-highlight { background: none !important; box-shadow: none !important; }

/* ---- Google Translate top banner ----
   When a translation is active Google injects a fixed banner at the very
   top of the viewport and pushes <body> down via an inline `top` value.
   Our .nav is position:fixed/top:0, so it ignores that shift and the banner
   would cover it. Instead of fighting the banner, we move the nav down by
   the banner's height so both are fully visible and nothing overlaps.
   The `translated-ltr`/`translated-rtl` classes are added to <html> by
   Google only while a translation is showing. */
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame {
  z-index: 2000 !important; /* above .nav (z-index:1000) */
}
/* --sbss-banner-h is kept up to date by JS (it measures the real banner).
   The fallback values below apply before/if that measurement is unavailable. */
html.translated-ltr,
html.translated-rtl {
  --sbss-banner-h: 39px;
}
html.translated-ltr .nav,
html.translated-rtl .nav {
  top: var(--sbss-banner-h);
}
/* Anchor-link targets sit under the fixed nav; keep them clear of the
   banner too so in-page links don't land behind it. */
html.translated-ltr section[id],
html.translated-rtl section[id] {
  scroll-margin-top: calc(68px + var(--sbss-banner-h));
}
/* The mobile menu drops from under the nav, so it must move down too. */
html.translated-ltr .nav-links.mobile-open,
html.translated-rtl .nav-links.mobile-open {
  top: calc(58px + var(--sbss-banner-h));
  max-height: calc(100vh - 58px - var(--sbss-banner-h));
}
@media (max-width: 900px) {
  /* On narrow screens Google's banner text wraps onto two lines, making it
     roughly twice as tall. Use a larger fallback so the nav is never covered
     even before JS measures the real height. */
  html.translated-ltr,
  html.translated-rtl {
    --sbss-banner-h: 66px;
  }
  html.translated-ltr section[id],
  html.translated-rtl section[id] {
    scroll-margin-top: calc(58px + var(--sbss-banner-h));
  }
}

@media (max-width: 900px) {
  .nav-translate {
    width: 100%;
    justify-content: center;
    padding: 0.6rem 0.5rem 0.2rem;
  }
  .lang-switcher { width: auto; min-width: 90px; }
}

/* =========================================
   NOTRANSLATE — proper nouns Google Translate
   mis-translates/mis-transliterates. See
   notranslate-words.json + notranslate.js
   ========================================= */
.notranslate {
  /* Purely a translation-protection marker; must not alter appearance. */
  display: inline;
}

/* =========================================
   HAND-WRITTEN BILINGUAL CONTENT
   Used on pages where accuracy matters too much for
   machine translation (dada-jivan-pravas + school pages).
   Elements are marked data-lang="mr" or data-lang="en", and
   the English ones start with the native `hidden` HTML
   attribute already in the markup (works correctly across
   <p>, <div>, <li>, <span> with no CSS needed -- that's the
   point of using `hidden` rather than a display:none class).
   sbss-bilingual.js toggles that attribute directly when the
   visitor switches language.

   The rule below IS still required, despite `hidden` being a
   browser default: several existing rules elsewhere in this
   file (e.g. the mobile nav's `.nav-links.mobile-open li a
   { display: block; }`) are normal-priority author styles,
   and normal author styles always beat the browser's default
   [hidden] styling in the cascade, regardless of selector
   specificity. Without this !important override, a hidden
   nav/footer link would still render once a more specific
   layout rule sets its own `display` value. This is a global,
   site-wide rule, but safe: [hidden] is used nowhere else in
   this codebase for any other purpose (verified against
   aria-hidden and the unrelated .hidden CSS class, which are
   different selectors and unaffected).
   ========================================= */
[hidden] {
  display: none !important;
}