@keyframes fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fade-in .4s ease-out; }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.ticker-track {
  animation: marquee 22s linear infinite;
  padding-right: 3rem;
}
.ticker-track:hover { animation-play-state: paused; }

.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
.custom-scrollbar { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }

.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-none { scrollbar-width: none; }

@keyframes scale-up {
  from { opacity: 0; transform: scale(.95) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.animate-scale-up { animation: scale-up .2s ease-out; }

#chat-window-box.open { display: flex; }

/* Tailwind's compiled bundle only includes object-cover (never object-contain),
   so logos/photos needing "contain" behavior get these dedicated rules instead
   of relying on a missing utility class (which silently falls back to the
   default object-fit: fill and stretches the image). */
.logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.chancellor-photo {
  width: 100%;
  height: 100%;
  max-height: 350px;
  object-fit: contain;
  display: block;
}

.leader-photo-box { background: #0f172a; }
.leader-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ---------- Content pages (sitemap subpages sourced from biu.edu.in) ---------- */
.content-page-hero {
  background: linear-gradient(120deg, #0f172a 0%, #1e293b 55%, #1e3a8a 100%);
  padding: 2.5rem 1rem 2.25rem;
}
.content-page-hero-inner { max-width: 64rem; margin: 0 auto; }
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.9rem;
}
.breadcrumb a { color: rgba(255, 255, 255, 0.75); text-decoration: none; }
.breadcrumb a:hover { color: #f59e0b; }
.breadcrumb span.sep { opacity: 0.4; }
.breadcrumb span.current { color: #f59e0b; }
.content-page-hero h1 {
  color: #fff;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
}
@media (min-width: 768px) {
  .content-page-hero h1 { font-size: 2.15rem; }
}
.content-page-source {
  margin-top: 0.6rem;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
}
.content-page-source a { color: #f59e0b; text-decoration: none; }
.content-page-source a:hover { text-decoration: underline; }

.content-page-body { max-width: 64rem; margin: 0 auto; padding: 2rem 1rem 4rem; width: 100%; box-sizing: border-box; }

.content-article {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.75rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  color: #334155;
  font-size: 0.92rem;
  line-height: 1.75;
}
@media (min-width: 768px) { .content-article { padding: 2.5rem; } }

.content-article h2 {
  color: #0f172a;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 2rem 0 0.9rem;
  padding-left: 0.85rem;
  border-left: 4px solid #f59e0b;
}
.content-article h2:first-child { margin-top: 0; }
.content-article h3 {
  color: #1e293b;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 1.5rem 0 0.65rem;
}
.content-article p { margin: 0 0 1rem; }
.content-article ul, .content-article ol { margin: 0 0 1.1rem; padding-left: 1.4rem; }
.content-article li { margin: 0.35rem 0; }
.content-article ul > li { list-style: disc; }
.content-article ol > li { list-style: decimal; }
.content-article a { color: #1e3a8a; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(30,58,138,0.3); }
.content-article a:hover { color: #f59e0b; }
.content-article strong { color: #0f172a; font-weight: 700; }
.content-article blockquote {
  margin: 1.25rem 0;
  padding: 0.9rem 1.1rem;
  background: #f8fafc;
  border-left: 4px solid #1e3a8a;
  border-radius: 0.5rem;
  color: #475569;
  font-style: italic;
}
.content-article table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: 0.85rem; }
.content-article th, .content-article td { border: 1px solid #e2e8f0; padding: 0.55rem 0.7rem; text-align: left; }
.content-article th { background: #f1f5f9; color: #0f172a; font-weight: 700; }
.content-article tr:nth-child(even) td { background: #f8fafc; }
.content-article img { max-width: 100%; height: auto; border-radius: 0.6rem; margin: 1rem 0; }
.content-article hr { border: none; border-top: 1px solid #e2e8f0; margin: 1.75rem 0; }

.content-article .info-card {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
  color: #1e3a8a;
  font-size: 0.85rem;
}
.content-article .contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 1.25rem 0;
}
@media (min-width: 640px) { .content-article .contact-grid { grid-template-columns: 1fr 1fr; } }
.content-article .contact-grid > div {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.6rem;
  padding: 0.85rem 1rem;
  font-size: 0.82rem;
}
.content-article .contact-grid strong { display: block; color: #0f172a; margin-bottom: 0.2rem; }

.content-page-not-found {
  max-width: 40rem;
  margin: 4rem auto;
  text-align: center;
  padding: 0 1rem;
  color: #475569;
}

/* ---------- Photos inside content-article (profiles, logos, activity galleries) ---------- */
.content-article .profile-photo {
  width: 160px;
  height: 190px;
  object-fit: cover;
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  margin: 0 0 1.25rem;
  display: block;
}

.content-article .logo-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.25rem 0;
}
@media (min-width: 640px) { .content-article .logo-strip { grid-template-columns: repeat(4, 1fr); } }
.content-article .logo-strip figure {
  margin: 0;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.6rem;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}
.content-article .logo-strip img { max-width: 100%; max-height: 70px; width: auto; height: auto; object-fit: contain; margin: 0; }
.content-article .logo-strip figcaption { font-size: 0.7rem; font-weight: 600; color: #475569; line-height: 1.3; }

.content-article .photo-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.25rem 0;
}
@media (min-width: 640px) { .content-article .photo-gallery { grid-template-columns: repeat(3, 1fr); } }
.content-article .photo-gallery figure { margin: 0; }
.content-article .photo-gallery img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  border-radius: 0.6rem;
  border: 1px solid #e2e8f0;
  margin: 0 0 0.4rem;
}
.content-article .photo-gallery figcaption { font-size: 0.75rem; color: #475569; line-height: 1.35; }

.content-article table td img.recognition-logo,
.content-article .recognition-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  margin: 0;
  border-radius: 0.3rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

/* ---------- Horizontal megamenu strip (sits below the header, replaces the old hamburger sitemap overlay) ---------- */
.megamenu-strip {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.megamenu-strip .megamenu {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
}
.megamenu { position: relative; }
.mm-bar {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* overflow-x:auto only where the bar actually needs to scroll (touch/no-hover,
   see the (hover: none) block below) -- setting it unconditionally here would
   force overflow-y to auto too (a CSS quirk when only one axis is non-visible),
   which clips the absolutely-positioned dropdown panels even though their own
   computed style still reports visible/opacity:1. */

.mm-item { position: relative; display: flex; align-items: stretch; flex-shrink: 0; }

.mm-toplink,
.mm-toplink-static {
  display: flex;
  align-items: center;
  padding: 0.75rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #475569;
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s ease, background 0.15s ease;
  border-radius: 0.4rem;
}
.mm-item:hover > .mm-toplink,
.mm-item.mm-open > .mm-toplink { color: #1e3a8a; background: #f1f5f9; }

.mm-caret {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  padding: 0;
  margin-left: -0.4rem;
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.15s ease;
}
.mm-caret-icon { width: 13px; height: 13px; }
.mm-item:hover .mm-caret,
.mm-item.mm-open .mm-caret { color: #1e3a8a; }
.mm-item.mm-open .mm-caret { transform: rotate(180deg); }

.mm-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px) scale(0.98);
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(.16,1,.3,1), transform 0.2s cubic-bezier(.16,1,.3,1), visibility 0.2s;
  padding-top: 0.6rem;
}
@media (hover: hover) {
  .mm-item-has-panel:hover > .mm-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); }
}
.mm-item.mm-open > .mm-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); }

.mm-panel-inner {
  display: flex;
  align-items: stretch;
  gap: 1.75rem;
  background: linear-gradient(160deg, #0f172a 0%, #16213f 55%, #0f172a 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  box-shadow: 0 24px 48px -12px rgba(2, 6, 23, 0.45), 0 2px 8px rgba(2, 6, 23, 0.2);
  padding: 1.5rem;
  /* Width is set inline by app.js, sized to how much content the panel
     actually holds (see sizeMegaPanel). This is just the pre-JS fallback. */
  width: 420px;
  max-width: min(96vw, 1320px);
  max-height: 75vh;
  overflow-y: auto;
}

.mm-grid {
  /* Columns are built explicitly by app.js (buildBalancedColumns): each
     .mm-group's real height is measured, then groups are greedily packed
     into the shortest-so-far column. CSS multi-column (column-width/
     column-fill:balance) was tried first but its balancing is unreliable
     with only a couple of unevenly-sized break-inside:avoid blocks -- it
     would dump everything into one column and leave the rest of the grid's
     width empty, or badly imbalance two columns (a wall of blank space
     under the shorter one). Explicit JS packing gives a predictable,
     correctly-sized result every time. This flex-wrap is just the pre-JS /
     no-JS fallback: each group becomes its own item and wraps naturally. */
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  /* app.js caps the column count to what actually fits the current viewport
     width before building .mm-col children, so this should never need to
     wrap; nowrap guards against an unexpected 2nd row (which would make the
     panel needlessly tall) rather than silently degrading to that. */
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0 2rem;
}

.mm-col {
  display: flex;
  flex-direction: column;
  width: 190px;
  flex: 0 0 190px;
  min-width: 0;
}
/* Width is set inline (app.js, MM_SPLIT_WIDTH) to match its .mm-group-split
   child -- this is just the shape (no shrink/fixed-basis fight with .mm-col). */
.mm-col-wide { flex: 0 0 auto; }

.mm-group {
  display: block;
  width: 100%;
  min-width: 0;
  margin-bottom: 1.35rem;
}
.mm-group:last-child { margin-bottom: 0; }
/* A group whose list is too long to balance against anything else (e.g. the
   12-line "Constituent Institutions" list) gets its own double-wide column
   (see buildBalancedColumns in app.js) and splits its own list into 2 CSS
   columns internally instead of running the panel past max-height into a
   scrollbar. */
.mm-group-split .mm-group-list {
  /* column-count is a no-op on a flex container (the base .mm-group-list
     rule) -- switch back to block flow so multi-column actually applies,
     and use margin instead of the flex gap for spacing between items. */
  display: block;
  column-count: 2;
  column-gap: 1.5rem;
}
.mm-group-split .mm-group-list li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 0.45rem;
}
.mm-group-heading { margin-bottom: 0.55rem; padding-bottom: 0.4rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.mm-group-title {
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: color 0.15s ease;
}
/* Theme accent yellow -- these are the category headings (IQAC, NAAC,
   Governance, Constituent Institutions, ...), not interactive menu items, so
   they carry the accent color outright rather than only on hover. Scoped to
   .mm-group-heading (not just .mm-group-title) because a non-linked heading
   also carries .mm-link-static for its base font styling, and that rule
   comes later in the cascade -- at equal specificity it would otherwise win
   and leave the heading white. */
.mm-group-heading .mm-group-title { color: #f59e0b; }
a.mm-group-title:hover { color: #fbbf24; }
.mm-group-flat .mm-group-title {
  /* Flat groups are a single clickable link styled like a sub-item, not a
     heading -- keep the white "menu item" look and only turn yellow on
     hover, same as .mm-link below. */
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.83rem;
  color: rgba(255, 255, 255, 0.78);
  padding: 0.3rem 0 0.3rem 0.85rem;
  position: relative;
  transition: color 0.15s ease, padding-left 0.15s ease;
}
.mm-group-flat .mm-group-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.28);
  transform: translateY(-50%) scale(1);
  transition: background 0.15s ease, transform 0.2s cubic-bezier(.34,1.56,.64,1);
}
.mm-group-flat a.mm-group-title:hover { color: #f59e0b; padding-left: 1.1rem; }
.mm-group-flat a.mm-group-title:hover::before { background: #f59e0b; transform: translateY(-50%) scale(1.6); }

.mm-group-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.mm-link, .mm-link-static {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: color 0.15s ease, transform 0.15s cubic-bezier(.34,1.56,.64,1);
}
a.mm-link:hover { transform: translateX(3px); color: #f59e0b; }
.mm-ext-icon { width: 10px; height: 10px; opacity: 0.55; flex-shrink: 0; }

/* Touch devices only (no mouse/trackpad hover): horizontally scrollable bar,
   tap-to-open panels stack full width below it. Anything with real hover
   support -- including a desktop browser window narrower than 1024px --
   keeps the floating hover-overlay behavior instead. */
@media (hover: none) {
  .mm-bar {
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .mm-bar::-webkit-scrollbar { display: none; }
  .mm-panel {
    position: static;
    transform: none;
    padding-top: 0.5rem;
    display: none;
  }
  /* !important on transform: the base .mm-item.mm-open > .mm-panel rule
     (higher specificity, three classes) sets translateX(-50%) for the
     desktop floating overlay and still wins over the plain .mm-panel rule
     above despite media-query order, shifting every open panel half its
     width off-screen to the left on touch devices without this. */
  .mm-item.mm-open > .mm-panel { display: block; opacity: 1; visibility: visible; pointer-events: auto; transform: none !important; }
  .mm-item { flex-direction: column; }
  .mm-panel-inner { width: 100% !important; max-width: 100%; max-height: 60vh; overflow-y: auto; flex-direction: column; }
  .mm-grid { flex-direction: column; }
  .mm-col { width: 100%; flex-basis: auto; }
  /* !important overrides the fixed 190px inline width app.js sets on each
     .mm-group while measuring for the desktop column layout -- without this,
     that inline style sticks and every group is stranded at 190px wide
     inside a full-width mobile panel, leaving a large blank strip beside
     every link. */
  .mm-group { width: 100% !important; margin-bottom: 1.1rem; }
  .mm-group-split .mm-group-list { column-count: 1; }
}

/* ---------- Programmes Offered: college accordions + course cards ----------
   The compiled Tailwind bundle (assets_index.css) is a purged static build --
   it only contains utility classes actually used elsewhere in the theme, so
   new hover/group/transform combinations added here wouldn't exist in it.
   These effects are written by hand instead of as Tailwind utility classes. */
/* Just enough of a button reset to look like the plain banner it replaces --
   deliberately NOT resetting background here, since the banner now relies on
   its own bg-blue-900 utility class instead of a photo. */
.college-accordion-toggle { appearance: none; border: 0; padding: 0; }
.college-accordion-chevron { transition: transform 0.25s cubic-bezier(.16,1,.3,1); }
.college-accordion-chevron.is-open { transform: rotate(180deg); }

.course-card {
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.course-card:hover {
  background-color: #fff;
  border-color: #fcd34d; /* amber-300 */
  box-shadow: 0 10px 25px -8px rgba(15, 23, 42, 0.18);
  transform: translateY(-3px);
}
.course-card-title { transition: color 0.15s ease; }
.course-card:hover .course-card-title { color: #1e3a8a; /* blue-900 */ }
.course-card-cta { transition: color 0.2s ease, gap 0.2s ease; }
.course-card:hover .course-card-cta { color: #d97706; /* amber-600 */ gap: 0.5rem; }

/* ---------- single-biu_course.php ---------- */
.single-course-link { transition: color 0.15s ease; }
.single-course-link:hover { color: #172554; /* blue-950 */ }
.single-course-cta { display: inline-flex; }

/* Content saved from the admin's rich-text (wp_editor) fields -- eligibility,
   admission process, outcomes, etc. Its own <p>/<ul>/<strong> tags need real
   spacing since it's no longer plain text run through whitespace-pre-line. */
.biu-rich-text p { margin: 0 0 0.75em; }
.biu-rich-text p:last-child { margin-bottom: 0; }
.biu-rich-text ul, .biu-rich-text ol { margin: 0 0 0.75em; padding-left: 1.25em; }
.biu-rich-text li { margin-bottom: 0.25em; }
.biu-rich-text a { color: #1e3a8a; text-decoration: underline; }
.biu-rich-text strong { color: #334155; }

/* ---------- Programmes Offered: grid / list view toggle ---------- */
.view-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 0.375rem;
  border: 0;
  background: none;
  color: #94a3b8; /* slate-400 */
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.view-toggle-btn:hover { color: #475569; /* slate-600 */ }
.view-toggle-btn.is-active { background-color: #0f172a; /* slate-900 */ color: #fff; }

/* List view: one course per row instead of the 2-up grid, and lay each card
   out as a compact horizontal row (title/badges left, details right) rather
   than the tall stacked grid card. */
#colleges-container.list-view [id^="college-courses-"] { grid-template-columns: 1fr; }
#colleges-container.list-view .course-card { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem; }
#colleges-container.list-view .course-card > div:first-child { flex: 0 0 auto; min-width: 220px; }
#colleges-container.list-view .course-card > div:nth-child(2) { flex: 1 1 auto; border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
#colleges-container.list-view .course-card > div:nth-child(2) > div { flex: 0 1 auto; }
#colleges-container.list-view .course-card-cta { flex: 0 0 auto; }