/* 
 * BUGEMA INSTITUTIONAL REPOSITORY - Modern Premium Stylesheet
 * Designed for DSpace 7.x Angular Frontend
 * Version: 2.2 — Dark Navy Navbar + Transparent Faculties Card
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Poppins:wght@400;500;600;700;800&display=swap');

/* =============================================
   CSS CUSTOM PROPERTIES
   ============================================= */
:root {
  --bu-blue: #1206ba;
  --bu-blue-dark: #0a0480;
  --bu-blue-light: #2d1fd4;
  --bu-gold: #ffd700;
  --bu-gold-dark: #d4af37;
  --bu-navy: #0b1c3a;
  --bu-navy-mid: #1a3a5c;
  --bu-white: #ffffff;
  --bu-light: #f0f4ff;
  --bu-glass: rgba(255, 255, 255, 0.1);
  --bu-glass-border: rgba(255, 255, 255, 0.18);
  --bu-shadow: 0 20px 60px rgba(18, 6, 186, 0.18);
  --bu-gold-glow: 0 0 20px rgba(255, 215, 0, 0.35);
  --transition-smooth: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --border-radius-lg: 20px;
  --border-radius-md: 12px;
  --border-radius-sm: 8px;
  --navbar-height: 64px;
}

/* =============================================
   BASE TYPOGRAPHY & BODY
   ============================================= */
body, html {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =============================================
   ★ UNIFIED SINGLE NAVBAR — KEY STYLES ★
   Merges the logo/login bar + communities bar
   into one compact, professional navbar
   ============================================= */

/* Outer header wrapper becomes a single horizontal flex row */
header.header,
ds-themed-header > header,
ds-header > header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  background: linear-gradient(135deg, #f5f6f8 0%, #f0f2f5 60%, #f5f6f8 100%) !important;
  border-bottom: none !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1050 !important;
  min-height: var(--navbar-height) !important;
  padding: 0 1rem !important;
  gap: 0 !important;
  backdrop-filter: blur(12px) !important;
}

/* ── Logo + Auth nav (first child nav) ──────── */
/* Remove the "container" width constraint so it doesn't block flex layout */
header.header > nav.navbar,
header.header > nav.container {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  min-height: unset !important;
  align-items: center !important;
}

/* Remove the flex-grow from the spacer div inside the first nav */
header.header > nav .d-flex.flex-grow-1:first-child {
  flex-grow: 0 !important;
  margin-right: 0.5rem !important;
}

header.header > nav .d-flex.flex-grow-1:last-child,
header.header > nav .d-flex.ml-auto {
  flex-grow: 0 !important;
  margin-left: 0 !important;
}

/* ── ds-themed-navbar takes the MIDDLE space ── */
header.header > ds-themed-navbar {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  align-self: stretch !important;
  min-width: 0 !important;
}

/* The inner ds-navbar wrapper */
header.header ds-themed-navbar > ds-navbar,
header.header ds-navbar {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  align-self: stretch !important;
}

/* The actual <nav> inside ds-navbar — transparent, no separate background */
header.header ds-navbar > nav.navbar,
header.header ds-navbar nav.navbar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-bottom: none !important;
  border-top: none !important;
  width: 100% !important;
  padding: 0 0.5rem !important;
  min-height: unset !important;
  display: flex !important;
  align-items: center !important;
}

/* Inner container inside the navbar */
header.header .navbar-inner-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

/* Force collapse to show as inline on desktop */
@media (min-width: 768px) {
  header.header ds-navbar .navbar-collapse,
  header.header .navbar-collapse {
    display: flex !important;
    flex-basis: auto !important;
    align-items: center !important;
  }

  header.header ds-navbar .navbar-nav,
  header.header .navbar-nav {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0.1rem !important;
  }
}

/* ── Nav Links (Communities & Collections, All of DSpace) ── */
header.header .navbar-nav .nav-link,
header.header ds-navbar .nav-link,
header.header .navbar-nav a {
  color: #ffffff !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  padding: 0.5rem 0.8rem !important;
  border-radius: 6px !important;
  transition: var(--transition-smooth) !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  letter-spacing: 0.02em !important;
  position: relative !important;
}

header.header .navbar-nav .nav-link:hover,
header.header ds-navbar .nav-link:hover {
  color: var(--bu-gold) !important;
  background: rgba(255, 215, 0, 0.08) !important;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.4) !important;
}

/* Gold underline hover indicator */
header.header .navbar-nav .nav-link::after,
header.header ds-navbar .nav-link::after {
  content: '' !important;
  position: absolute !important;
  bottom: 4px !important;
  left: 50% !important;
  width: 0 !important;
  height: 2px !important;
  background: var(--bu-gold) !important;
  border-radius: 2px !important;
  transform: translateX(-50%) !important;
  transition: width 0.25s ease !important;
}

header.header .navbar-nav .nav-link:hover::after,
header.header ds-navbar .nav-link:hover::after,
header.header .navbar-nav .nav-link.active::after {
  width: 60% !important;
}

/* Active nav item */
header.header .navbar-nav .nav-link.active,
header.header .navbar-nav .active .nav-link {
  color: var(--bu-gold) !important;
}

/* Dropdown menus in navbar */
header.header .dropdown-menu {
  background: var(--bu-navy) !important;
  border: 1px solid rgba(255, 215, 0, 0.2) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4) !important;
  overflow: hidden !important;
  margin-top: 4px !important;
}

header.header .dropdown-item {
  color: rgba(232, 237, 242, 0.9) !important;
  font-size: 0.875rem !important;
  padding: 0.55rem 1.2rem !important;
  transition: background 0.2s ease !important;
}

header.header .dropdown-item:hover {
  background: rgba(255, 215, 0, 0.1) !important;
  color: var(--bu-gold) !important;
}

/* Divider in dropdowns */
header.header .dropdown-divider {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ── Logo ─────────────────────────────────── */
header.header .navbar-brand {
  margin: 0 0.5rem 0 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

header.header .navbar-brand img,
header.header img[alt*="logo"],
header.header img[alt*="Logo"] {
  height: 48px !important;
  width: auto !important;
  border-radius: 9px !important;
  border: 2px solid var(--bu-gold) !important;
  padding: 4px !important;
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 
    0 0 16px rgba(255, 215, 0, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.3) !important;
  transition: var(--transition-smooth) !important;
  display: block !important;
}

header.header .navbar-brand img:hover {
  transform: scale(1.05) !important;
  box-shadow: 
    0 0 26px rgba(255, 215, 0, 0.65),
    0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

/* ── Auth / Right-side actions ───────────── */
header.header .nav-link,
header.header a.nav-link,
header.header button.nav-link,
header.header .dropdown-toggle {
  color: #ffffff !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.02em !important;
  padding: 0.45rem 0.7rem !important;
  border-radius: var(--border-radius-sm) !important;
  transition: var(--transition-smooth) !important;
  border: none !important;
  background: transparent !important;
}

header.header .nav-link:hover,
header.header a.nav-link:hover,
header.header button.nav-link:hover {
  color: var(--bu-gold) !important;
  background: rgba(255, 215, 0, 0.08) !important;
}

/* Login/Register button — stands out with gold outline */
header.header ds-themed-auth-nav-menu .btn,
header.header ds-themed-auth-nav-menu button,
header.header .login-menu button,
header.header [ngbdropdowntoggle] {
  border: 1.5px solid rgba(255, 215, 0, 0.5) !important;
  border-radius: 6px !important;
  padding: 0.35rem 0.9rem !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  transition: var(--transition-smooth) !important;
}

header.header ds-themed-auth-nav-menu .btn:hover,
header.header [ngbdropdowntoggle]:hover {
  background: rgba(255, 215, 0, 0.15) !important;
  border-color: var(--bu-gold) !important;
  color: var(--bu-gold) !important;
}

/* Search icon in navbar */
header.header ds-themed-search-navbar .btn,
header.header .search-navbar button {
  color: #ffffff !important;
  background: transparent !important;
  border: none !important;
  padding: 0.4rem 0.6rem !important;
  font-size: 1rem !important;
  transition: var(--transition-smooth) !important;
}

header.header ds-themed-search-navbar .btn:hover {
  color: var(--bu-gold) !important;
  background: rgba(255, 215, 0, 0.08) !important;
  border-radius: 6px !important;
}

/* Hamburger toggler (mobile) */
header.header .navbar-toggler {
  border-color: rgba(255, 215, 0, 0.4) !important;
  color: rgba(232, 237, 242, 0.9) !important;
  padding: 0.3rem 0.6rem !important;
  border-radius: 6px !important;
}

header.header .navbar-toggler:hover {
  background: rgba(255, 215, 0, 0.1) !important;
}

header.header .navbar-toggler-icon {
  color: rgba(232, 237, 242, 0.9) !important;
}

/* Separator between logo and nav links */
header.header > ds-themed-navbar::before {
  content: '' !important;
  display: block !important;
  width: 1px !important;
  height: 32px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  margin: 0 0.5rem !important;
  flex-shrink: 0 !important;
  align-self: center !important;
}

/* ── Remove any old separate navbar styles ── */
.navbar-container,
ds-themed-navbar > ds-navbar > nav.navbar,
header.header ds-navbar nav {
  border-top: none !important;
}

/* =============================================
   HERO SECTION - FULL MAKEOVER
   ============================================= */
.background-image-container {
  position: relative !important;
  min-height: 500px !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  padding: 5rem 2.5rem !important;
  border-radius: 0 0 28px 28px !important;
  margin-bottom: 3rem !important;
  box-shadow: 0 20px 60px rgba(18, 6, 186, 0.25) !important;
  border: none !important;
}

/* Animated gradient overlay */
.background-image-container::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: 
    linear-gradient(135deg, rgba(10, 4, 140, 0.30) 0%, rgba(18, 6, 186, 0.28) 50%, rgba(8,  2, 100, 0.35) 100%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Dot grid overlay */
.background-image-container::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: 
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0) !important;
  background-size: 40px 40px !important;
  z-index: 1 !important;
  pointer-events: none !important;
  animation: particleDrift 30s linear infinite !important;
}

@keyframes particleDrift {
  0% { transform: translateY(0); }
  100% { transform: translateY(-40px); }
}

.background-image-container .hero-carousel {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}

.background-image-container .carousel-slide {
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  opacity: 0 !important;
  transition: opacity 2s ease-in-out !important;
}

.background-image-container .carousel-slide.active {
  opacity: 1 !important;
  animation: kenBurns 10s ease-in-out infinite alternate !important;
}

@keyframes kenBurns {
  0% { transform: scale(1.02) translateX(0); }
  100% { transform: scale(1.07) translateX(-6px); }
}

.background-image-container .hero-content {
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
}

.background-image-container .hero-logo {
  display: none !important;
}

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

.background-image-container h1,
.background-image-container .display-3 {
  font-family: 'Poppins', 'Inter', sans-serif !important;
  font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.6),
    0 0 60px rgba(18, 6, 186, 0.3) !important;
  letter-spacing: -0.5px !important;
  line-height: 1.15 !important;
  margin-bottom: 0.4rem !important;
  animation: heroFadeIn 0.8s ease-out both !important;
}

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

.background-image-container h2,
.background-image-container .text-light-gold {
  font-size: clamp(1rem, 2vw, 1.35rem) !important;
  color: var(--bu-gold) !important;
  font-weight: 500 !important;
  letter-spacing: 0.8px !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  animation: heroFadeIn 0.8s 0.2s ease-out both !important;
}

.background-image-container p.lead {
  font-size: 1.05rem !important;
  color: rgba(255, 255, 255, 0.88) !important;
  line-height: 1.8 !important;
  max-width: 580px !important;
  margin-top: 1.5rem !important;
  font-weight: 400 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
  animation: heroFadeIn 0.8s 0.4s ease-out both !important;
}

/* =============================================
   FACULTIES CARD — Transparent / Borderless
   Floats directly on the hero background
   ============================================= */
.background-image-container .faculties-card {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 0 0 1rem !important;
  box-shadow: none !important;
  max-height: 400px !important;
  animation: heroFadeIn 0.8s 0.3s ease-out both !important;
  position: relative !important;
  z-index: 3 !important;
  overflow: visible !important;
}

/* Gold accent line replaces the card top border */
.background-image-container .faculties-card::before {
  display: none !important;
}

.background-image-container .faculties-card .faculties-title {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: var(--bu-gold) !important;
  margin-bottom: 0.85rem !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 1px solid rgba(255, 215, 0, 0.25) !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.3) !important;
}

.background-image-container .faculties-card .list-group-item,
.background-image-container .faculties-card .faculty-compact-card {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  padding: 0.45rem 0 !important;
  transition: var(--transition-smooth) !important;
}

.background-image-container .faculties-card .list-group-item:hover,
.background-image-container .faculties-card .faculty-compact-card:hover {
  background: transparent !important;
  border-color: rgba(255, 215, 0, 0.2) !important;
  transform: translateX(6px) !important;
}

.background-image-container .faculties-card .list-group-item:last-child,
.background-image-container .faculties-card .faculty-compact-card:last-child {
  border-bottom: none !important;
}

.background-image-container .faculties-card a,
.background-image-container .faculties-card .faculty-card-link,
.background-image-container .faculties-card .lead {
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  letter-spacing: 0.01em !important;
}

.background-image-container .faculties-card a::before {
  content: '›' !important;
  color: var(--bu-gold) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease !important;
}

.background-image-container .faculties-card a:hover {
  color: var(--bu-gold) !important;
}

.background-image-container .faculties-card a:hover::before {
  transform: translateX(3px) !important;
}

/* Hide emoji characters from faculty names via font-family trick */
.background-image-container .faculties-card .faculty-icon,
.background-image-container .faculties-card .fa,
.background-image-container .faculties-card .fas {
  display: none !important;
}

/* =============================================
   SEARCH FORM SECTION
   ============================================= */
ds-themed-search-form .form-control,
ds-search-form .form-control {
  border-radius: 50px 0 0 50px !important;
  border: 2px solid #e0e8ff !important;
  padding: 0.85rem 1.5rem !important;
  font-size: 1rem !important;
  background: #ffffff !important;
  box-shadow: 0 8px 30px rgba(18, 6, 186, 0.08) !important;
  transition: var(--transition-smooth) !important;
  height: auto !important;
}

ds-themed-search-form .form-control:focus,
ds-search-form .form-control:focus {
  border-color: var(--bu-blue) !important;
  box-shadow: 0 0 0 4px rgba(18, 6, 186, 0.12), 0 8px 30px rgba(18, 6, 186, 0.1) !important;
  outline: none !important;
}

ds-themed-search-form .btn-primary,
ds-search-form .btn-primary {
  background: linear-gradient(135deg, var(--bu-blue) 0%, var(--bu-blue-light) 100%) !important;
  border: none !important;
  border-radius: 0 50px 50px 0 !important;
  padding: 0.85rem 1.8rem !important;
  font-weight: 600 !important;
  transition: var(--transition-smooth) !important;
  box-shadow: 0 4px 15px rgba(18, 6, 186, 0.35) !important;
}

ds-themed-search-form .btn-primary:hover,
ds-search-form .btn-primary:hover {
  background: linear-gradient(135deg, var(--bu-blue-dark) 0%, var(--bu-blue) 100%) !important;
  transform: translateX(2px) !important;
  box-shadow: 0 6px 20px rgba(18, 6, 186, 0.5) !important;
}

/* =============================================
   COMMUNITY / COLLECTION LIST ITEMS
   ============================================= */
.list-group-item {
  border-radius: var(--border-radius-md) !important;
  border: 1px solid #e8eef8 !important;
  margin-bottom: 0.6rem !important;
  padding: 1rem 1.2rem !important;
  transition: var(--transition-smooth) !important;
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.list-group-item:hover {
  box-shadow: 0 8px 25px rgba(18, 6, 186, 0.12) !important;
  transform: translateY(-2px) !important;
  border-color: rgba(18, 6, 186, 0.2) !important;
  background: #fafbff !important;
}

.list-group-item a,
.list-group-item .lead {
  color: var(--bu-blue) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.list-group-item a:hover {
  color: var(--bu-blue-dark) !important;
  text-decoration: underline !important;
}

/* =============================================
   BUTTONS (GLOBAL)
   ============================================= */
.btn-primary {
  background: linear-gradient(135deg, var(--bu-blue) 0%, var(--bu-blue-light) 100%) !important;
  border: none !important;
  border-radius: var(--border-radius-sm) !important;
  font-weight: 600 !important;
  padding: 0.6rem 1.4rem !important;
  transition: var(--transition-smooth) !important;
  box-shadow: 0 4px 15px rgba(18, 6, 186, 0.3) !important;
}

.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(18, 6, 186, 0.45) !important;
  background: linear-gradient(135deg, var(--bu-blue-dark) 0%, var(--bu-blue) 100%) !important;
}

.btn-secondary {
  background: transparent !important;
  border: 2px solid var(--bu-blue) !important;
  color: var(--bu-blue) !important;
  border-radius: var(--border-radius-sm) !important;
  font-weight: 600 !important;
  transition: var(--transition-smooth) !important;
}

.btn-secondary:hover {
  background: var(--bu-blue) !important;
  color: white !important;
  transform: translateY(-2px) !important;
}

/* =============================================
   BREADCRUMB
   ============================================= */
.breadcrumb {
  background: var(--bu-light) !important;
  border-radius: var(--border-radius-sm) !important;
  padding: 0.75rem 1rem !important;
  border: 1px solid #dde8ff !important;
}

.breadcrumb-item a { color: var(--bu-blue) !important; font-weight: 500 !important; }
.breadcrumb-item.active { color: #64748b !important; }

/* =============================================
   CARDS
   ============================================= */
.card {
  border-radius: var(--border-radius-md) !important;
  border: 1px solid #e8eef8 !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
  transition: var(--transition-smooth) !important;
  overflow: hidden !important;
}

.card:hover {
  box-shadow: 0 10px 30px rgba(18, 6, 186, 0.1) !important;
  transform: translateY(-3px) !important;
  border-color: rgba(18, 6, 186, 0.12) !important;
}

/* =============================================
   BADGES
   ============================================= */
.badge, .badge-secondary {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  padding: 0.35em 0.75em !important;
  border-radius: 50px !important;
}

.badge-secondary {
  background: linear-gradient(135deg, var(--bu-light), #dde8ff) !important;
  color: var(--bu-blue) !important;
  border: 1px solid rgba(18, 6, 186, 0.15) !important;
}

/* =============================================
   FOOTER
   ============================================= */
footer,
ds-footer > footer,
ds-themed-footer > footer {
  background: linear-gradient(135deg, #f5f6f8 0%, #f0f2f5 60%, #f5f6f8 100%) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-top: 3px solid var(--bu-gold) !important;
  padding: 2.5rem 0 !important;
  margin-top: 0 !important;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2) !important;
}

footer a, ds-footer a, ds-themed-footer a {
  color: var(--bu-gold) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

footer a:hover { color: #fff !important; text-decoration: underline !important; }

/* =============================================
   SCROLLBAR
   ============================================= */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--bu-blue), var(--bu-blue-light));
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--bu-blue-dark); }

/* =============================================
   SELECTION + LINKS
   ============================================= */
::selection { background: rgba(18, 6, 186, 0.2); color: var(--bu-blue-dark); }
a { color: var(--bu-blue) !important; transition: color 0.2s ease !important; }
a:hover { color: var(--bu-blue-dark) !important; }

/* =============================================
   RESPONSIVE — MOBILE NAVBAR
   ============================================= */
@media (max-width: 767px) {
  header.header,
  ds-themed-header > header {
    flex-wrap: wrap !important;
    min-height: auto !important;
    padding: 0.4rem 0.75rem !important;
  }

  header.header > nav.navbar,
  header.header > nav.container {
    width: 100% !important;
    flex: 1 1 100% !important;
    justify-content: space-between !important;
  }

  header.header > ds-themed-navbar {
    flex: 1 1 100% !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  header.header > ds-themed-navbar::before {
    display: none !important;
  }

  .background-image-container {
    min-height: 580px !important;
    padding: 3rem 1.2rem !important;
    border-radius: 0 0 20px 20px !important;
  }

  .background-image-container h1,
  .background-image-container .display-3 {
    font-size: 1.8rem !important;
  }

  .background-image-container .hero-logo {
    height: 72px !important;
    width: 72px !important;
    animation: none !important;
  }

  .background-image-container .faculties-card {
    margin-top: 1.5rem !important;
    max-height: 260px !important;
  }
}

@media (max-width: 480px) {
  .background-image-container { padding: 2rem 1rem !important; }
  .background-image-container h1 { font-size: 1.5rem !important; }
  header.header .navbar-brand img { height: 40px !important; }
}

/* =============================================
   PAGE ENTRANCE ANIMATION
   ============================================= */
ds-home-page, .home-component {
  animation: pageEnter 0.5s ease-out both !important;
}

@keyframes pageEnter {
  from { opacity: 0; }
  to { opacity: 1; }
}

.container.mt-4 {
  animation: fadeUpContent 0.6s ease-out both !important;
}

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

/* =============================================
   TABLE
   ============================================= */
.table { border-radius: var(--border-radius-md) !important; overflow: hidden !important; }
.table thead th {
  background: linear-gradient(135deg, var(--bu-blue), var(--bu-blue-light)) !important;
  color: white !important;
  font-weight: 600 !important;
  border: none !important;
  padding: 1rem !important;
}
.table tbody tr:hover { background: var(--bu-light) !important; }

/* =============================================
   ALERTS
   ============================================= */
.alert-info {
  background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
  border-color: rgba(18, 6, 186, 0.2) !important;
  color: var(--bu-blue-dark) !important;
  border-radius: var(--border-radius-md) !important;
  border-left: 4px solid var(--bu-blue) !important;
}


/* =============================================
   STRIP FIX + BRIGHT BLUE CONSISTENCY UPDATE
   Applied: to remove dark navy strip before footer
   and ensure navbar/hero match official BU blue
   ============================================= */

/* Remove any dark background on page wrapper that creates the strip */
body {
  background: #ffffff !important;
}

ds-home-page,
.home-component,
app-root,
ds-app,
main.container,
.main-content,
ds-root {
  background: transparent !important;
}

/* Eliminate the navy strip between content and footer */
footer,
ds-footer > footer,
ds-themed-footer > footer {
  margin-top: 0 !important;
}

/* Section just before footer - remove dark bg */
.container.mt-4 + *,
ds-home-page > div:last-child,
.page-content + footer {
  background: transparent !important;
}

/* Correct the gold border on footer to remain */
footer,
ds-footer > footer,
ds-themed-footer > footer {
  border-top: 3px solid var(--bu-gold) !important;
}


/* =============================================
   ROUND-2 FIXES: Hero, Navbar white text, Strip
   ============================================= */

/* 1. Ensure all navbar text/icons are white */
header.header .nav-link,
header.header a.nav-link,
header.header button.nav-link,
header.header .dropdown-toggle,
header.header .navbar-nav .nav-link,
header.header ds-navbar .nav-link,
header.header .navbar-nav a,
header.header ds-themed-search-navbar .btn,
header.header ds-themed-auth-nav-menu .btn,
header.header ds-themed-auth-nav-menu button {
  color: #ffffff !important;
}

header.header .nav-link:hover,
header.header a.nav-link:hover,
header.header button.nav-link:hover,
header.header .navbar-nav .nav-link:hover,
header.header ds-navbar .nav-link:hover {
  color: var(--bu-gold) !important;
}

/* 2. Hero overlay — darkened bright blue (not navy) */
.background-image-container::before {
  background: linear-gradient(
    135deg,
    rgba(10, 4, 140, 0.30) 0%,
    rgba(18, 6, 186, 0.28) 50%,
    rgba(8,  2, 100, 0.35) 100%
  ) !important;
  z-index: 1 !important;
}

/* 3. Hide logo in hero section */
.background-image-container .hero-logo,
.background-image-container img.hero-logo {
  display: none !important;
}

/* 4. Decorative badge to replace logo in hero */
.background-image-container .hero-content {
  position: relative !important;
}

.background-image-container .hero-content::before {
  content: '⬡  BUGEMA UNIVERSITY  ·  EST. 1948  ⬡' !important;
  display: inline-block !important;
  color: var(--bu-gold) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 3.5px !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(255, 215, 0, 0.35) !important;
  border-radius: 50px !important;
  padding: 0.4rem 1.2rem !important;
  margin-bottom: 1.4rem !important;
  background: rgba(255, 215, 0, 0.08) !important;
  backdrop-filter: blur(4px) !important;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.45) !important;
  animation: heroFadeIn 0.8s ease-out both !important;
}

/* 5. Fix the dark strip before footer */
ds-root > ds-app > div,
.main-content-wrapper,
app-root > main {
  background: #ffffff !important;
}

/* Remove gap that creates the navy strip */
footer,
ds-footer > footer,
ds-themed-footer > footer {
  margin-top: 0 !important;
  padding-top: 2.5rem !important;
}

/* Kill any dark background leaking above footer */
body > * > main > *:last-child {
  background: transparent !important;
}


/* =============================================
   HERO SCROLL-DOWN ARROW BUTTON
   Blinking/bouncing arrow to invite scrolling
   ============================================= */

/* Position the hero-content relatively so ::after positions correctly */
.background-image-container .hero-content {
  position: relative !important;
  padding-bottom: 5rem !important;
}

/* The scroll arrow — placed at bottom-center of hero via absolute */
.background-image-container .hero-content::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0.5rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 46px !important;
  height: 46px !important;
  border: 2.5px solid rgba(255, 215, 0, 0.75) !important;
  border-radius: 50% !important;
  background: rgba(18, 6, 186, 0.25) !important;
  backdrop-filter: blur(6px) !important;
  box-shadow:
    0 0 18px rgba(255, 215, 0, 0.30),
    0 0 0 0 rgba(255, 215, 0, 0.25) !important;
  animation: scrollPulse 2s ease-in-out infinite !important;
  display: block !important;
  z-index: 10 !important;
}

/* Chevron arrow drawn with a nested selector trick using box-shadow lines */
/* We use the ::before of the ::after's sibling — the hero-badge::after */
.background-image-container .hero-content::before {
  /* Keep existing badge BUT also handle z-index */
  z-index: 10 !important;
  position: relative !important;
}

/* Arrow chevron drawn inside the circle via a span-less CSS trick */
/* We inject the down arrow character via a new pseudo on the container */
.background-image-container::after {
  /* Override existing dot-grid animation, repurpose for scroll arrow text */
  content: '⌄' !important;
  position: absolute !important;
  bottom: 2.2rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 46px !important;
  height: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--bu-gold) !important;
  font-size: 2.2rem !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  background: transparent !important;
  background-image: none !important;
  background-size: unset !important;
  z-index: 10 !important;
  pointer-events: none !important;
  animation: arrowBounce 1.6s ease-in-out infinite !important;
  text-shadow:
    0 0 12px rgba(255, 215, 0, 0.80),
    0 0 28px rgba(255, 215, 0, 0.45) !important;
}

@keyframes scrollPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.45), 0 0 18px rgba(255, 215, 0, 0.25); opacity: 0.9; transform: translateX(-50%) translateY(0); }
  50%  { box-shadow: 0 0 0 10px rgba(255, 215, 0, 0), 0 0 28px rgba(255, 215, 0, 0.40); opacity: 1;   transform: translateX(-50%) translateY(6px); }
  100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0), 0 0 18px rgba(255, 215, 0, 0.25); opacity: 0.9; transform: translateX(-50%) translateY(0); }
}

@keyframes arrowBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.85; }
  50%       { transform: translateX(-50%) translateY(8px); opacity: 1; }
}

/* On mobile: tuck the arrow lower */
@media (max-width: 767px) {
  .background-image-container .hero-content {
    padding-bottom: 4rem !important;
  }
  .background-image-container::after {
    bottom: 1.5rem !important;
    font-size: 1.8rem !important;
  }
  .background-image-container .hero-content::after {
    width: 38px !important;
    height: 38px !important;
  }
}


/* =============================================
   HERO TEXT ROTATOR — 5 Inspiring Messages
   Pure CSS cycling lead text for hero section
   Each message visible ~5s, full cycle = 30s
   ============================================= */

/* 1. Hide the static lead text, fix container height */
.background-image-container p.lead {
  visibility: hidden !important;
  position: relative !important;
  height: 2.2em !important;
  overflow: hidden !important;
  margin-top: 1.5rem !important;
}

/* 2. The cycling text block — 5 messages stacked vertically */
/*    Each line is 2.2em tall, total = 11em                  */
.background-image-container p.lead::before {
  content:
    "Let your scholarly work reach where it is supposed to.\A"
    "Preserving Bugema's knowledge legacy for generations to come.\A"
    "From Uganda to the world — research without borders.\A"
    "Discover \B7 Explore \B7 Cite \B7 Contribute \B7 Advance.\A"
    "Every dissertation, thesis and article — archived for eternity.";
  visibility: visible !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  white-space: pre-line !important;
  line-height: 2.2em !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  letter-spacing: 0.01em !important;
  animation: heroCycleText 30s ease-in-out infinite !important;
  will-change: transform, opacity !important;
}

/* 3. Keyframes — fade+slide for each of 5 messages         */
/*    Each message gets 20% of the 30s cycle = 6s per msg   */
/*    Fade-in: 1.5% | Visible: 15% | Fade-out: 1.5%         */
@keyframes heroCycleText {
  /* — Message 1 — */
  0%     { transform: translateY(0);      opacity: 0; }
  2%     { transform: translateY(0);      opacity: 1; }
  17%    { transform: translateY(0);      opacity: 1; }
  19%    { transform: translateY(0);      opacity: 0; }

  /* — Message 2 — */
  20%    { transform: translateY(-2.2em); opacity: 0; }
  22%    { transform: translateY(-2.2em); opacity: 1; }
  37%    { transform: translateY(-2.2em); opacity: 1; }
  39%    { transform: translateY(-2.2em); opacity: 0; }

  /* — Message 3 — */
  40%    { transform: translateY(-4.4em); opacity: 0; }
  42%    { transform: translateY(-4.4em); opacity: 1; }
  57%    { transform: translateY(-4.4em); opacity: 1; }
  59%    { transform: translateY(-4.4em); opacity: 0; }

  /* — Message 4 — */
  60%    { transform: translateY(-6.6em); opacity: 0; }
  62%    { transform: translateY(-6.6em); opacity: 1; }
  77%    { transform: translateY(-6.6em); opacity: 1; }
  79%    { transform: translateY(-6.6em); opacity: 0; }

  /* — Message 5 — */
  80%    { transform: translateY(-8.8em); opacity: 0; }
  82%    { transform: translateY(-8.8em); opacity: 1; }
  97%    { transform: translateY(-8.8em); opacity: 1; }
  99%    { transform: translateY(-8.8em); opacity: 0; }

  /* — Loop back — */
  100%   { transform: translateY(0);      opacity: 0; }
}

/* 4. Subtle animated underline accent below the cycling text */
.background-image-container p.lead::after {
  content: '' !important;
  position: absolute !important;
  bottom: -0.6rem !important;
  left: 0 !important;
  height: 2px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--bu-gold) 30%,
    var(--bu-gold) 70%,
    transparent 100%
  ) !important;
  border-radius: 2px !important;
  animation: underlineWave 30s ease-in-out infinite !important;
  opacity: 0.6 !important;
}

@keyframes underlineWave {
  0%,  19% { width: 0%;   opacity: 0; }
  2%,  17% { width: 55%;  opacity: 0.7; }
  20%, 39% { width: 0%;   opacity: 0; }
  22%, 37% { width: 65%;  opacity: 0.7; }
  40%, 59% { width: 0%;   opacity: 0; }
  42%, 57% { width: 70%;  opacity: 0.7; }
  60%, 79% { width: 0%;   opacity: 0; }
  62%, 77% { width: 60%;  opacity: 0.7; }
  80%, 99% { width: 0%;   opacity: 0; }
  82%, 97% { width: 58%;  opacity: 0.7; }
  100%     { width: 0%;   opacity: 0; }
}

/* 5. Also give h2 subtitle a typewriter underline shimmer */
.background-image-container h2,
.background-image-container .text-light-gold {
  position: relative !important;
  display: inline-block !important;
}

.background-image-container h2::after,
.background-image-container .text-light-gold::after {
  content: '' !important;
  position: absolute !important;
  bottom: -4px !important;
  left: 0 !important;
  width: 100% !important;
  height: 1.5px !important;
  background: linear-gradient(
    90deg,
    var(--bu-gold) 0%,
    rgba(255, 215, 0, 0.3) 50%,
    var(--bu-gold) 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: shimmerLine 3s linear infinite !important;
  opacity: 0.7 !important;
}

@keyframes shimmerLine {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .background-image-container p.lead {
    height: 4em !important;
  }
  .background-image-container p.lead::before {
    font-size: 0.92rem !important;
    line-height: 2em !important;
  }
  @keyframes heroCycleText {
    0%   { transform: translateY(0);      opacity: 0; }
    2%   { transform: translateY(0);      opacity: 1; }
    17%  { transform: translateY(0);      opacity: 1; }
    19%  { transform: translateY(0);      opacity: 0; }
    20%  { transform: translateY(-2em);   opacity: 0; }
    22%  { transform: translateY(-2em);   opacity: 1; }
    37%  { transform: translateY(-2em);   opacity: 1; }
    39%  { transform: translateY(-2em);   opacity: 0; }
    40%  { transform: translateY(-4em);   opacity: 0; }
    42%  { transform: translateY(-4em);   opacity: 1; }
    57%  { transform: translateY(-4em);   opacity: 1; }
    59%  { transform: translateY(-4em);   opacity: 0; }
    60%  { transform: translateY(-6em);   opacity: 0; }
    62%  { transform: translateY(-6em);   opacity: 1; }
    77%  { transform: translateY(-6em);   opacity: 1; }
    79%  { transform: translateY(-6em);   opacity: 0; }
    80%  { transform: translateY(-8em);   opacity: 0; }
    82%  { transform: translateY(-8em);   opacity: 1; }
    97%  { transform: translateY(-8em);   opacity: 1; }
    99%  { transform: translateY(-8em);   opacity: 0; }
    100% { transform: translateY(0);      opacity: 0; }
  }
}


/* =============================================
   NAVBAR — Dark Charcoal Grey
   Prevents blue overcrowding with hero + footer
   ============================================= */

header.header,
ds-themed-header > header,
ds-header > header {
  background: linear-gradient(
    135deg,
    #1e2228 0%,
    #282d38 60%,
    #1c2128 100%
  ) !important;
  border-bottom: none !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45) !important;
}

/* Keep the inner nav elements transparent */
header.header > nav.navbar,
header.header > nav.container,
header.header ds-navbar > nav.navbar,
header.header ds-navbar nav.navbar,
header.header .navbar-inner-container {
  background: transparent !important;
}

/* Ensure all text in navbar stays white on the grey bg */
header.header .nav-link,
header.header a.nav-link,
header.header button.nav-link,
header.header .dropdown-toggle,
header.header .navbar-nav .nav-link,
header.header ds-navbar .nav-link,
header.header .navbar-nav a {
  color: #ffffff !important;
}

header.header .nav-link:hover,
header.header a.nav-link:hover,
header.header .navbar-nav .nav-link:hover,
header.header ds-navbar .nav-link:hover {
  color: var(--bu-gold) !important;
  background: rgba(255, 215, 0, 0.08) !important;
}

/* Dropdown menu matches the grey theme */
header.header .dropdown-menu {
  background: #f5f6f8 !important;
  border: 1px solid rgba(255, 215, 0, 0.2) !important;
}

header.header .dropdown-item {
  color: rgba(255, 255, 255, 0.9) !important;
}

header.header .dropdown-item:hover {
  background: rgba(255, 215, 0, 0.1) !important;
  color: var(--bu-gold) !important;
}

/* Mobile nav stays grey */
@media (max-width: 767px) {
  header.header,
  ds-themed-header > header {
    background: #f5f6f8 !important;
  }
}


/* =============================================
   NAVBAR — Near-White Light Grey + Dark Text
   + Always-Expanded Search Bar
   ============================================= */

/* 1. Near-white navbar background */
header.header,
ds-themed-header > header,
ds-header > header {
  background: #f5f6f8 !important;
  border-bottom: none !important;
  box-shadow:
    0 2px 20px rgba(0, 0, 0, 0.12),
    0 1px 0 rgba(0, 0, 0, 0.06) !important;
}

/* 2. All inner navs stay transparent */
header.header > nav.navbar,
header.header > nav.container,
header.header ds-navbar > nav.navbar,
header.header ds-navbar nav.navbar,
header.header .navbar-inner-container {
  background: transparent !important;
}

/* 3. Dark text on light background — flip from white to dark */
header.header .nav-link,
header.header a.nav-link,
header.header button.nav-link,
header.header .dropdown-toggle,
header.header .navbar-nav .nav-link,
header.header ds-navbar .nav-link,
header.header .navbar-nav a,
header.header ds-themed-search-navbar .btn,
header.header ds-themed-auth-nav-menu .btn,
header.header ds-themed-auth-nav-menu button {
  color: #1a1d2e !important;
}

/* 4. Hover → university bright blue */
header.header .nav-link:hover,
header.header a.nav-link:hover,
header.header button.nav-link:hover,
header.header .navbar-nav .nav-link:hover,
header.header ds-navbar .nav-link:hover,
header.header ds-themed-search-navbar .btn:hover {
  color: var(--bu-blue) !important;
  background: rgba(18, 6, 186, 0.06) !important;
}

/* 5. Gold underline hover indicator stays */
header.header .navbar-nav .nav-link::after,
header.header ds-navbar .nav-link::after {
  background: var(--bu-blue) !important;
}

/* 6. Active nav link = university blue */
header.header .navbar-nav .nav-link.active,
header.header .navbar-nav .active .nav-link {
  color: var(--bu-blue) !important;
}

/* 7. Dropdown stays clean light */
header.header .dropdown-menu {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
}
header.header .dropdown-item {
  color: #1a1d2e !important;
}
header.header .dropdown-item:hover {
  background: rgba(18, 6, 186, 0.06) !important;
  color: var(--bu-blue) !important;
}
header.header .dropdown-divider {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* 8. Logo border adapts to light bg */
header.header .navbar-brand img,
header.header img[alt*="logo"],
header.header img[alt*="Logo"] {
  border: 2px solid var(--bu-gold) !important;
  box-shadow:
    0 0 12px rgba(255, 215, 0, 0.3),
    0 3px 10px rgba(0, 0, 0, 0.15) !important;
  background: #ffffff !important;
}

/* 9. Login button — blue outline on light bg */
header.header ds-themed-auth-nav-menu .btn,
header.header ds-themed-auth-nav-menu button,
header.header [ngbdropdowntoggle] {
  border: 1.5px solid rgba(18, 6, 186, 0.4) !important;
  color: var(--bu-blue) !important;
}
header.header ds-themed-auth-nav-menu .btn:hover,
header.header [ngbdropdowntoggle]:hover {
  background: rgba(18, 6, 186, 0.08) !important;
  border-color: var(--bu-blue) !important;
  color: var(--bu-blue) !important;
}

/* 10. Hamburger on mobile */
header.header .navbar-toggler {
  border-color: rgba(18, 6, 186, 0.3) !important;
  color: #1a1d2e !important;
}

/* ─── ALWAYS-EXPANDED SEARCH BAR ─────────────────────────────────── */

/* Force the search input container to always be visible */
ds-themed-search-navbar .search-navbar,
ds-search-navbar .search-navbar,
header.header ds-themed-search-navbar form,
header.header ds-search-navbar form {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: auto !important;
  max-width: 260px !important;
  overflow: visible !important;
}

/* Show the input field always */
ds-themed-search-navbar input[type="text"],
ds-themed-search-navbar input[type="search"],
ds-search-navbar input[type="text"],
ds-search-navbar input[type="search"],
header.header .search-query {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 180px !important;
  max-width: 200px !important;
  border: 1.5px solid rgba(18, 6, 186, 0.25) !important;
  border-radius: 6px 0 0 6px !important;
  padding: 0.35rem 0.75rem !important;
  font-size: 0.85rem !important;
  background: #ffffff !important;
  color: #1a1d2e !important;
  transition: all 0.25s ease !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.06) !important;
}

ds-themed-search-navbar input:focus,
ds-search-navbar input:focus {
  border-color: var(--bu-blue) !important;
  box-shadow: 0 0 0 3px rgba(18, 6, 186, 0.12) !important;
  outline: none !important;
  width: 220px !important;
}

/* Hide the toggle/expand icon button (no longer needed) */
ds-themed-search-navbar .open-search,
ds-search-navbar .open-search,
ds-themed-search-navbar .toggle-search,
ds-search-navbar .toggle-search,
header.header ds-themed-search-navbar > button,
header.header ds-search-navbar > button {
  display: none !important;
}

/* Search submit button */
ds-themed-search-navbar button[type="submit"],
ds-search-navbar button[type="submit"],
ds-themed-search-navbar .search-button,
ds-search-navbar .search-button {
  background: var(--bu-blue) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0 6px 6px 0 !important;
  padding: 0.35rem 0.75rem !important;
  font-size: 0.85rem !important;
  display: flex !important;
  align-items: center !important;
  transition: background 0.2s ease !important;
}
ds-themed-search-navbar button[type="submit"]:hover,
ds-search-navbar button[type="submit"]:hover {
  background: var(--bu-blue-dark) !important;
}

/* Separator line between logo and nav on light bg */
header.header > ds-themed-navbar::before {
  background: rgba(0, 0, 0, 0.12) !important;
}

/* Mobile: collapse gracefully */
@media (max-width: 767px) {
  header.header {
    background: #f5f6f8 !important;
  }
  ds-themed-search-navbar input[type="text"],
  ds-themed-search-navbar input[type="search"] {
    width: 130px !important;
    max-width: 150px !important;
  }
}


/* =============================================
   NAVBAR — Remove gold border-bottom line
   ============================================= */
header.header,
ds-themed-header > header,
ds-header > header {
  border-bottom: none !important;
  border: none !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.10) !important;
}


/* =============================================
   REMOVE GAP BETWEEN NAVBAR AND HERO SECTION
   Targets all common wrappers that add spacing
   ============================================= */

/* 1. Page-level container that wraps the hero */
ds-home-page,
.home-component,
ds-home-page > *:first-child,
.home-component > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 2. The hero container itself */
.background-image-container {
  margin-top: 0 !important;
}

/* 3. DSpace app root / main content wrappers */
ds-app > div > main,
ds-app > main,
.main-content,
app-root > ds-app > div,
[role="main"],
main.container,
main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 4. Any container div that sits between header and hero */
ds-root > ds-app > div > main > *:first-child,
ds-root > ds-app > main > *:first-child,
ds-home-page > div:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 5. Bootstrap container that may add top spacing */
.container.mt-4:first-child,
.container.mt-3:first-child,
.container-fluid:first-child {
  margin-top: 0 !important;
}

/* 6. Catch-all: first child of every possible page wrapper */
ds-home-page .container:first-child,
ds-home-page .row:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* =============================================
   SCROLL CTA ARROW — CLEAN REWRITE (Round 10)
   Single element, bottom-center of hero,
   glowing gold ring + bouncing chevron
   ============================================= */

/* 1. Reset the old scattered arrow pieces */

/* Reset hero-content extra padding & old ::after circle */
.background-image-container .hero-content {
  padding-bottom: 0 !important;
  position: static !important;
}
.background-image-container .hero-content::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}

/* 2. Arrow lives on the hero container ::after
      — overrides the old dot-grid / arrowBounce from earlier rounds */
.background-image-container {
  overflow: hidden !important;
}

.background-image-container::after {
  /* ── Layout ── */
  content: '' !important;
  position: absolute !important;
  bottom: 2rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 20 !important;

  /* ── Size & Shape ── */
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;

  /* ── Style: glowing gold ring ── */
  border: 2.5px solid rgba(255, 215, 0, 0.80) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  background-image: none !important;
  background-size: unset !important;

  /* ── No dot-grid interference ── */
  background-color: rgba(255, 255, 255, 0.07) !important;

  /* ── Pointer ── */
  cursor: pointer !important;
  pointer-events: auto !important;

  /* ── Animation ── */
  animation: ctaArrowRing 2s ease-in-out infinite !important;

  /* ── Glow shadow ── */
  box-shadow:
    0 0 0 0 rgba(255, 215, 0, 0.55),
    0 0 20px rgba(255, 215, 0, 0.22) !important;
}

/* 3. The actual chevron arrow drawn via a nested pseudo trick on ::before */
/*    We use the .background-image-container itself's wrapping div          */
/*    Since we can't nest pseudos, we draw the chevron inside ::after       */
/*    using a rotated-border approach via a sibling selector trick.          */

/* Draw the chevron inside the circle using clip on the before of container  */
.background-image-container > *:last-child::after,
.background-image-container .hero-content ~ *::after {
  display: none !important;
}

/* ── Use the dot-grid slot for the chevron character ── */
/* We already set ::after to the ring above.             */
/* Now add the chevron text on top using a wrapper trick.*/
/* Best workaround: use background-image: url("data:...") */
/* Or: use content with a gradient mask — use CSS border chevron */

/* Place the chevron via content on a real ::after with border trick */
/* Override content on the ring circle to show chevron */
.background-image-container::after {
  content: '' !important;  /* keep empty — chevron drawn via border below */
  /* CSS-drawn downward chevron inside the circle */
  background-image:
    linear-gradient(
      to bottom right,
      transparent 50%,
      rgba(255, 215, 0, 0.85) 50%
    ),
    linear-gradient(
      to bottom left,
      transparent 50%,
      rgba(255, 215, 0, 0.85) 50%
    ) !important;
  background-size: 14px 10px, 14px 10px !important;
  background-position: calc(50% - 7px) 58%, calc(50% + 7px) 58% !important;
  background-repeat: no-repeat, no-repeat !important;
}

/* 4. Blinking pulse ring animation */
@keyframes ctaArrowRing {
  0% {
    transform: translateX(-50%) translateY(0);
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.65), 0 0 18px rgba(255,215,0,0.20);
    opacity: 0.85;
    border-color: rgba(255, 215, 0, 0.80) !important;
  }
  40% {
    transform: translateX(-50%) translateY(6px);
    box-shadow: 0 0 0 14px rgba(255,215,0,0), 0 0 28px rgba(255,215,0,0.38);
    opacity: 1;
    border-color: rgba(255, 215, 0, 1) !important;
  }
  60% {
    transform: translateX(-50%) translateY(6px);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(0);
    box-shadow: 0 0 0 0 rgba(255,215,0,0), 0 0 18px rgba(255,215,0,0.20);
    opacity: 0.85;
    border-color: rgba(255, 215, 0, 0.80) !important;
  }
}

/* 5. Mobile: slightly smaller, same position */
@media (max-width: 767px) {
  .background-image-container::after {
    width: 42px !important;
    height: 42px !important;
    bottom: 1.2rem !important;
    background-size: 11px 8px, 11px 8px !important;
    background-position: calc(50% - 5.5px) 58%, calc(50% + 5.5px) 58% !important;
  }
}


/* =============================================
   ROUND 11 — Kill ALL old pseudo-element arrows
   Real button handled by injected JS below
   ============================================= */

/* Kill every previous ::after arrow attempt */
.background-image-container::after,
.background-image-container .hero-content::after {
  display: none !important;
  content: none !important;
  animation: none !important;
  border: none !important;
  background: transparent !important;
  background-image: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}

/* ── Real scroll CTA button ── */
#bu-scroll-cta {
  position: absolute !important;
  bottom: 1.8rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 100 !important;

  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  border: 2.5px solid rgba(255, 215, 0, 0.85) !important;
  background: rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  outline: none !important;
  padding: 0 !important;

  color: var(--bu-gold) !important;
  font-size: 1.5rem !important;
  line-height: 1 !important;

  animation: buScrollCTA 2s ease-in-out infinite !important;
  box-shadow:
    0 0 0 0 rgba(255, 215, 0, 0.55),
    0 0 18px rgba(255, 215, 0, 0.22) !important;
  transition: background 0.2s ease !important;
}

#bu-scroll-cta:hover {
  background: rgba(255, 215, 0, 0.18) !important;
  border-color: var(--bu-gold) !important;
}

#bu-scroll-cta svg {
  width: 22px !important;
  height: 22px !important;
  stroke: var(--bu-gold) !important;
  fill: none !important;
  stroke-width: 2.5 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  pointer-events: none !important;
}

@keyframes buScrollCTA {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
    box-shadow: 0 0 0 0 rgba(255,215,0,0.55), 0 0 18px rgba(255,215,0,0.20);
    opacity: 0.88;
  }
  45% {
    transform: translateX(-50%) translateY(8px);
    box-shadow: 0 0 0 16px rgba(255,215,0,0), 0 0 28px rgba(255,215,0,0.40);
    opacity: 1;
  }
  55% {
    transform: translateX(-50%) translateY(8px);
    opacity: 1;
  }
}


/* =============================================
   HERO CYCLING TEXT — Larger font on desktop
   ============================================= */

/* Desktop: 768px and up */
@media (min-width: 768px) {
  .background-image-container p.lead {
    height: 2.8em !important;  /* taller container for bigger text */
  }

  .background-image-container p.lead::before {
    font-size: 1.35rem !important;
    line-height: 2.8em !important;
    font-weight: 400 !important;
    letter-spacing: 0.015em !important;
  }
}

/* Large desktop: 1200px and up — even bigger */
@media (min-width: 1200px) {
  .background-image-container p.lead {
    height: 3em !important;
  }

  .background-image-container p.lead::before {
    font-size: 1.55rem !important;
    line-height: 3em !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em !important;
  }
}

/* Wide screens: 1600px and up */
@media (min-width: 1600px) {
  .background-image-container p.lead {
    height: 3.2em !important;
  }

  .background-image-container p.lead::before {
    font-size: 1.75rem !important;
    line-height: 3.2em !important;
  }
}

/* Also update the keyframe translateY values to match new line-height on desktop */
/* We can't use @media inside @keyframes in older browsers, so we re-define
   the animation name for desktop with updated translateY offsets */
@media (min-width: 768px) {
  .background-image-container p.lead::before {
    animation: heroCycleTextDesktop 30s ease-in-out infinite !important;
  }

  @keyframes heroCycleTextDesktop {
    0%     { transform: translateY(0);       opacity: 0; }
    2%     { transform: translateY(0);       opacity: 1; }
    17%    { transform: translateY(0);       opacity: 1; }
    19%    { transform: translateY(0);       opacity: 0; }

    20%    { transform: translateY(-2.8em);  opacity: 0; }
    22%    { transform: translateY(-2.8em);  opacity: 1; }
    37%    { transform: translateY(-2.8em);  opacity: 1; }
    39%    { transform: translateY(-2.8em);  opacity: 0; }

    40%    { transform: translateY(-5.6em);  opacity: 0; }
    42%    { transform: translateY(-5.6em);  opacity: 1; }
    57%    { transform: translateY(-5.6em);  opacity: 1; }
    59%    { transform: translateY(-5.6em);  opacity: 0; }

    60%    { transform: translateY(-8.4em);  opacity: 0; }
    62%    { transform: translateY(-8.4em);  opacity: 1; }
    77%    { transform: translateY(-8.4em);  opacity: 1; }
    79%    { transform: translateY(-8.4em);  opacity: 0; }

    80%    { transform: translateY(-11.2em); opacity: 0; }
    82%    { transform: translateY(-11.2em); opacity: 1; }
    97%    { transform: translateY(-11.2em); opacity: 1; }
    99%    { transform: translateY(-11.2em); opacity: 0; }

    100%   { transform: translateY(0);       opacity: 0; }
  }
}

@media (min-width: 1200px) {
  .background-image-container p.lead::before {
    animation: heroCycleTextLg 30s ease-in-out infinite !important;
  }

  @keyframes heroCycleTextLg {
    0%     { transform: translateY(0);       opacity: 0; }
    2%     { transform: translateY(0);       opacity: 1; }
    17%    { transform: translateY(0);       opacity: 1; }
    19%    { transform: translateY(0);       opacity: 0; }

    20%    { transform: translateY(-3em);    opacity: 0; }
    22%    { transform: translateY(-3em);    opacity: 1; }
    37%    { transform: translateY(-3em);    opacity: 1; }
    39%    { transform: translateY(-3em);    opacity: 0; }

    40%    { transform: translateY(-6em);    opacity: 0; }
    42%    { transform: translateY(-6em);    opacity: 1; }
    57%    { transform: translateY(-6em);    opacity: 1; }
    59%    { transform: translateY(-6em);    opacity: 0; }

    60%    { transform: translateY(-9em);    opacity: 0; }
    62%    { transform: translateY(-9em);    opacity: 1; }
    77%    { transform: translateY(-9em);    opacity: 1; }
    79%    { transform: translateY(-9em);    opacity: 0; }

    80%    { transform: translateY(-12em);   opacity: 0; }
    82%    { transform: translateY(-12em);   opacity: 1; }
    97%    { transform: translateY(-12em);   opacity: 1; }
    99%    { transform: translateY(-12em);   opacity: 0; }

    100%   { transform: translateY(0);       opacity: 0; }
  }
}


/* =============================================
   ROUND 14 — Fix cycling text line-break issue
   Force single-line on desktop with nowrap
   ============================================= */

/* Desktop: prevent wrapping, keep single line */
@media (min-width: 768px) {
  /* Container: single-line height, clip overflow */
  .background-image-container p.lead {
    height: 2.4em !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  /* Text block: nowrap so sentences never break */
  .background-image-container p.lead::before {
    white-space: nowrap !important;
    font-size: 1.2rem !important;
    line-height: 2.4em !important;
    animation: heroCycleNoWrap 30s ease-in-out infinite !important;
  }

  @keyframes heroCycleNoWrap {
    0%     { transform: translateY(0);       opacity: 0; }
    2%     { transform: translateY(0);       opacity: 1; }
    17%    { transform: translateY(0);       opacity: 1; }
    19%    { transform: translateY(0);       opacity: 0; }

    20%    { transform: translateY(-2.4em);  opacity: 0; }
    22%    { transform: translateY(-2.4em);  opacity: 1; }
    37%    { transform: translateY(-2.4em);  opacity: 1; }
    39%    { transform: translateY(-2.4em);  opacity: 0; }

    40%    { transform: translateY(-4.8em);  opacity: 0; }
    42%    { transform: translateY(-4.8em);  opacity: 1; }
    57%    { transform: translateY(-4.8em);  opacity: 1; }
    59%    { transform: translateY(-4.8em);  opacity: 0; }

    60%    { transform: translateY(-7.2em);  opacity: 0; }
    62%    { transform: translateY(-7.2em);  opacity: 1; }
    77%    { transform: translateY(-7.2em);  opacity: 1; }
    79%    { transform: translateY(-7.2em);  opacity: 0; }

    80%    { transform: translateY(-9.6em);  opacity: 0; }
    82%    { transform: translateY(-9.6em);  opacity: 1; }
    97%    { transform: translateY(-9.6em);  opacity: 1; }
    99%    { transform: translateY(-9.6em);  opacity: 0; }

    100%   { transform: translateY(0);       opacity: 0; }
  }
}

/* Large desktop 1200px+ — slightly bigger, still nowrap */
@media (min-width: 1200px) {
  .background-image-container p.lead {
    height: 2.6em !important;
  }

  .background-image-container p.lead::before {
    font-size: 1.35rem !important;
    line-height: 2.6em !important;
    animation: heroCycleNoWrapLg 30s ease-in-out infinite !important;
  }

  @keyframes heroCycleNoWrapLg {
    0%     { transform: translateY(0);       opacity: 0; }
    2%     { transform: translateY(0);       opacity: 1; }
    17%    { transform: translateY(0);       opacity: 1; }
    19%    { transform: translateY(0);       opacity: 0; }

    20%    { transform: translateY(-2.6em);  opacity: 0; }
    22%    { transform: translateY(-2.6em);  opacity: 1; }
    37%    { transform: translateY(-2.6em);  opacity: 1; }
    39%    { transform: translateY(-2.6em);  opacity: 0; }

    40%    { transform: translateY(-5.2em);  opacity: 0; }
    42%    { transform: translateY(-5.2em);  opacity: 1; }
    57%    { transform: translateY(-5.2em);  opacity: 1; }
    59%    { transform: translateY(-5.2em);  opacity: 0; }

    60%    { transform: translateY(-7.8em);  opacity: 0; }
    62%    { transform: translateY(-7.8em);  opacity: 1; }
    77%    { transform: translateY(-7.8em);  opacity: 1; }
    79%    { transform: translateY(-7.8em);  opacity: 0; }

    80%    { transform: translateY(-10.4em); opacity: 0; }
    82%    { transform: translateY(-10.4em); opacity: 1; }
    97%    { transform: translateY(-10.4em); opacity: 1; }
    99%    { transform: translateY(-10.4em); opacity: 0; }

    100%   { transform: translateY(0);       opacity: 0; }
  }
}

/* Wide 1600px+ */
@media (min-width: 1600px) {
  .background-image-container p.lead {
    height: 2.8em !important;
  }

  .background-image-container p.lead::before {
    font-size: 1.5rem !important;
    line-height: 2.8em !important;
    animation: heroCycleNoWrapXl 30s ease-in-out infinite !important;
  }

  @keyframes heroCycleNoWrapXl {
    0%     { transform: translateY(0);       opacity: 0; }
    2%     { transform: translateY(0);       opacity: 1; }
    17%    { transform: translateY(0);       opacity: 1; }
    19%    { transform: translateY(0);       opacity: 0; }

    20%    { transform: translateY(-2.8em);  opacity: 0; }
    22%    { transform: translateY(-2.8em);  opacity: 1; }
    37%    { transform: translateY(-2.8em);  opacity: 1; }
    39%    { transform: translateY(-2.8em);  opacity: 0; }

    40%    { transform: translateY(-5.6em);  opacity: 0; }
    42%    { transform: translateY(-5.6em);  opacity: 1; }
    57%    { transform: translateY(-5.6em);  opacity: 1; }
    59%    { transform: translateY(-5.6em);  opacity: 0; }

    60%    { transform: translateY(-8.4em);  opacity: 0; }
    62%    { transform: translateY(-8.4em);  opacity: 1; }
    77%    { transform: translateY(-8.4em);  opacity: 1; }
    79%    { transform: translateY(-8.4em);  opacity: 0; }

    80%    { transform: translateY(-11.2em); opacity: 0; }
    82%    { transform: translateY(-11.2em); opacity: 1; }
    97%    { transform: translateY(-11.2em); opacity: 1; }
    99%    { transform: translateY(-11.2em); opacity: 0; }

    100%   { transform: translateY(0);       opacity: 0; }
  }
}