/* =====================================================
   LFU Alumni — Modern UI Redesign v2
   Loads after style.css. Visual overrides only.
   No functionality, PHP, or JS structures changed.
   ===================================================== */

/* ---- Design Tokens ---- */
:root {
  --clr-primary:       #0A2463;
  --clr-primary-light: #1a3a8f;
  --clr-accent:        #FF6B35;
  --clr-accent-dark:   #e85a25;
  --clr-text:          #1a1a2e;
  --clr-muted:         #6c757d;
  --clr-bg:            #f8f9fc;
  --clr-white:         #ffffff;
  --clr-border:        rgba(0,0,0,0.09);

  --shadow-sm:  0 2px 12px rgba(0,0,0,0.07);
  --shadow-md:  0 8px 30px rgba(0,0,0,0.12);
  --shadow-lg:  0 16px 48px rgba(0,0,0,0.16);

  --radius:    12px;
  --radius-sm: 8px;
  --speed:     0.28s;
  --ease:      cubic-bezier(0.4,0,0.2,1);
}

/* ---- Base ---- */
body {
  font-family: 'Poppins', 'Ubuntu', sans-serif !important;
  color: var(--clr-text) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}
html { scroll-behavior: smooth !important; }

h1,h2,h3,h4,h5,h6 {
  font-family: 'Poppins','Ubuntu',sans-serif !important;
  color: var(--clr-text) !important;
  font-weight: 600 !important;
}
h1 { font-size: 30px !important; }
h2 { font-size: 22px !important; }
h3 { font-size: 17px !important; }
h4 { font-size: 14px !important; }

h1::after, h2::after {
  background: linear-gradient(90deg,var(--clr-accent),var(--clr-primary)) !important;
  height: 3px !important; width: 40px !important;
  border-radius: 2px !important; bottom: -12px !important;
}

p { color: var(--clr-muted) !important; line-height: 1.75 !important; }

a { color: var(--clr-primary) !important; transition: color var(--speed) var(--ease) !important; }
a:hover,a:active { color: var(--clr-accent) !important; text-decoration: none !important; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--clr-accent) !important; outline-offset: 2px !important;
}


/* ===================================================
   STICKY NAVIGATION WRAPPER
   =================================================== */
.navigation-wrapper {
  position: sticky !important;
  top: 0 !important;
  z-index: 1030 !important;
}
.navigation-wrapper > .background { display: none !important; }

/* ---- Top bar ---- */
.navigation-wrapper .secondary-navigation-wrapper {
  background: var(--clr-primary) !important;
  border-bottom: none !important;
  height: auto !important;
  line-height: 1 !important;
  padding: 9px 0 !important;
  overflow: visible !important;
}
.navigation-wrapper .secondary-navigation-wrapper .navigation-contact {
  color: rgba(255,255,255,0.75) !important;
  font-size: 12px !important; font-weight: 500 !important;
  float: left !important; line-height: 1.8 !important;
}
.navigation-wrapper .secondary-navigation-wrapper .navigation-contact .opacity-70 {
  color: var(--clr-accent) !important; font-weight: 600 !important; opacity: 1 !important;
}
.navigation-wrapper .secondary-navigation-wrapper ul.secondary-navigation { margin-bottom: 0 !important; }
.navigation-wrapper .secondary-navigation-wrapper ul.secondary-navigation li {
  display: inline-block !important; margin-left: 8px !important; padding: 0 !important;
}
.navigation-wrapper .secondary-navigation-wrapper ul.secondary-navigation li a {
  color: rgba(255,255,255,0.8) !important;
  font-size: 12px !important; font-weight: 500 !important;
  padding: 4px 14px !important; border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  display: inline-block !important; line-height: 1.6 !important;
  transition: all var(--speed) var(--ease) !important;
}
.navigation-wrapper .secondary-navigation-wrapper ul.secondary-navigation li a:hover {
  background: rgba(255,255,255,0.15) !important;
  color: var(--clr-white) !important; border-color: rgba(255,255,255,0.35) !important;
}

/* ---- Primary Navbar ---- */
.navigation-wrapper .primary-navigation-wrapper {
  background: var(--clr-white) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 0 !important; position: relative !important; z-index: 1 !important;
  transition: box-shadow var(--speed) var(--ease), background var(--speed) var(--ease) !important;
}
.navigation-wrapper .primary-navigation-wrapper.nav-scrolled {
  box-shadow: var(--shadow-md) !important;
  background: rgba(255,255,255,0.97) !important;
  backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;
}

/* Kill the big brand ::before/::after decorations */
.navigation-wrapper .primary-navigation-wrapper header .navbar-brand::before,
.navigation-wrapper .primary-navigation-wrapper header .navbar-brand::after { display: none !important; }

.navigation-wrapper .primary-navigation-wrapper header.navbar {
  background: transparent !important; border: none !important;
  margin-bottom: 0 !important; min-height: 66px !important;
}
.navigation-wrapper .primary-navigation-wrapper header .navbar-brand {
  padding: 10px 0 10px 15px !important; height: auto !important; line-height: 1 !important;
}
.navigation-wrapper .primary-navigation-wrapper header .navbar-brand img {
  max-height: 46px !important; width: auto !important;
}

/* Nav links */
.navigation-wrapper .primary-navigation-wrapper header nav .navbar-nav li { padding: 0 !important; }
.navigation-wrapper .primary-navigation-wrapper header nav .navbar-nav li a {
  color: var(--clr-text) !important;
  font-weight: 500 !important; font-size: 13.5px !important;
  padding: 22px 15px !important; position: relative !important;
  background: transparent !important;
  transition: color var(--speed) var(--ease) !important;
}
.navigation-wrapper .primary-navigation-wrapper header nav .navbar-nav li a::before {
  content: '' !important; position: absolute !important;
  bottom: 12px !important; left: 15px !important; right: 15px !important;
  height: 2px !important; background: var(--clr-accent) !important; border-radius: 2px !important;
  transform: scaleX(0) !important; transform-origin: left !important;
  transition: transform var(--speed) var(--ease) !important;
}
.navigation-wrapper .primary-navigation-wrapper header nav .navbar-nav li a:hover::before,
.navigation-wrapper .primary-navigation-wrapper header nav .navbar-nav li.active > a::before {
  transform: scaleX(1) !important;
}
.navigation-wrapper .primary-navigation-wrapper header nav .navbar-nav li a:hover,
.navigation-wrapper .primary-navigation-wrapper header nav .navbar-nav li a:focus,
.navigation-wrapper .primary-navigation-wrapper header nav .navbar-nav li a:active {
  color: var(--clr-primary) !important; background: transparent !important;
}
.navigation-wrapper .primary-navigation-wrapper header nav .navbar-nav li.active a {
  color: var(--clr-accent) !important; background: transparent !important;
}
.navigation-wrapper .primary-navigation-wrapper header nav .navbar-nav li a.has-child::after {
  color: var(--clr-muted) !important; font-size: 11px !important;
}

/* Dropdown */
.navigation-wrapper .primary-navigation-wrapper header nav .navbar-nav li .child-navigation {
  background: var(--clr-white) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid var(--clr-border) !important;
  padding: 6px 0 !important; top: 58px !important; overflow: hidden !important;
}
.navigation-wrapper .primary-navigation-wrapper header nav .navbar-nav li .child-navigation li {
  border-bottom: 1px solid rgba(0,0,0,0.04) !important; padding: 0 !important;
}
.navigation-wrapper .primary-navigation-wrapper header nav .navbar-nav li .child-navigation li:last-child { border: none !important; }
.navigation-wrapper .primary-navigation-wrapper header nav .navbar-nav li .child-navigation li a {
  color: var(--clr-text) !important;
  font-size: 13px !important; font-weight: 400 !important;
  padding: 10px 20px !important; white-space: nowrap !important; display: block !important;
  transition: all var(--speed) var(--ease) !important;
}
.navigation-wrapper .primary-navigation-wrapper header nav .navbar-nav li .child-navigation li a::before { display: none !important; }
.navigation-wrapper .primary-navigation-wrapper header nav .navbar-nav li .child-navigation li a:hover {
  background: var(--clr-bg) !important; color: var(--clr-primary) !important; padding-left: 26px !important;
}
.navigation-wrapper .primary-navigation-wrapper header nav .navbar-nav li .child-navigation li:first-child a::after,
.navigation-wrapper .primary-navigation-wrapper header nav .navbar-nav li .child-navigation li:first-child a::before { display: none !important; }

/* Hamburger */
.navigation-wrapper .primary-navigation-wrapper .navbar-toggle {
  border: 1.5px solid var(--clr-border) !important; border-radius: var(--radius-sm) !important;
  padding: 7px 10px !important; margin-top: 16px !important; background: transparent !important;
}
.navigation-wrapper .primary-navigation-wrapper .navbar-toggle .icon-bar {
  background-color: var(--clr-text) !important; border-radius: 2px !important; height: 2px !important;
}

@media (max-width: 767px) {
  .navigation-wrapper .primary-navigation-wrapper header nav.navbar-collapse {
    background: var(--clr-white) !important;
    border-top: 1px solid var(--clr-border) !important; box-shadow: var(--shadow-md) !important; padding: 8px 0 !important;
  }
  .navigation-wrapper .primary-navigation-wrapper header nav .navbar-nav li a {
    padding: 12px 20px !important; font-size: 14px !important;
  }
  .navigation-wrapper .primary-navigation-wrapper header nav .navbar-nav li a::before { display: none !important; }
  .navigation-wrapper .primary-navigation-wrapper header nav .navbar-nav li .child-navigation {
    position: static !important; opacity: 1 !important; visibility: visible !important;
    box-shadow: none !important; border: none !important;
    border-top: 1px solid var(--clr-border) !important;
    border-radius: 0 !important; background: var(--clr-bg) !important;
  }
}


/* ===================================================
   HERO — Homepage Carousel
   =================================================== */
#homepage-carousel {
  background: linear-gradient(135deg,#071d52 0%,var(--clr-primary) 45%,#1045c0 100%) !important;
  padding: 56px 0 60px !important; position: relative !important; overflow: hidden !important;
}
#homepage-carousel::before {
  content: '' !important; position: absolute !important;
  top: -80px !important; right: -80px !important;
  width: 520px !important; height: 520px !important;
  background: radial-gradient(circle,rgba(255,107,53,0.18) 0%,transparent 65%) !important;
  pointer-events: none !important; z-index: 0 !important;
}
#homepage-carousel .homepage-carousel-wrapper { position: relative !important; z-index: 2 !important; }
#homepage-carousel > .container > .homepage-carousel-wrapper > .background,
#homepage-carousel .slider-inner { display: none !important; }

/* Slide images */
#homepage-carousel .image-carousel {
  border-radius: var(--radius) !important; overflow: hidden !important; box-shadow: var(--shadow-lg) !important;
}
#homepage-carousel .image-carousel .image-carousel-slide img {
  width: 100% !important; height: 320px !important; object-fit: cover !important; display: block !important;
}

/* Glassmorphism form panel */
#homepage-carousel .slider-content {
  background: rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: var(--radius) !important; padding: 28px 26px 24px !important;
}
#homepage-carousel h1 {
  color: var(--clr-white) !important; font-size: 22px !important; font-weight: 700 !important;
  margin-bottom: 26px !important; line-height: 1.35 !important;
}
#homepage-carousel h1::after { background: var(--clr-accent) !important; width: 44px !important; }

#homepage-carousel .input-group { margin-bottom: 12px !important; display: block !important; }

#homepage-carousel .form-control.has-dark-background,
#homepage-carousel input.has-dark-background {
  background: rgba(255,255,255,0.13) !important;
  border: 1.5px solid rgba(255,255,255,0.22) !important; border-radius: var(--radius-sm) !important;
  color: var(--clr-white) !important; padding: 10px 14px !important; height: auto !important;
  font-size: 13px !important; width: 100% !important; box-shadow: none !important;
  transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease) !important;
}
#homepage-carousel .form-control.has-dark-background::placeholder,
#homepage-carousel input.has-dark-background::placeholder { color: rgba(255,255,255,0.55) !important; }
#homepage-carousel .form-control.has-dark-background:focus,
#homepage-carousel input.has-dark-background:focus {
  background: rgba(255,255,255,0.2) !important; border-color: var(--clr-accent) !important;
  box-shadow: 0 0 0 3px rgba(255,107,53,0.2) !important; outline: none !important;
}
#homepage-carousel select.has-dark-background {
  background: rgba(255,255,255,0.13) !important;
  border: 1.5px solid rgba(255,255,255,0.22) !important; border-radius: var(--radius-sm) !important;
  color: var(--clr-white) !important; padding: 10px 14px !important; height: auto !important;
  font-size: 13px !important; width: 100% !important; display: block !important;
  -webkit-appearance: none !important; appearance: none !important;
  transition: border-color var(--speed) var(--ease) !important;
}
#homepage-carousel select.has-dark-background option { background: var(--clr-primary) !important; color: var(--clr-white) !important; }
#homepage-carousel select.has-dark-background:focus {
  border-color: var(--clr-accent) !important; outline: none !important;
  box-shadow: 0 0 0 3px rgba(255,107,53,0.2) !important;
}
#homepage-carousel .btn.btn-framed {
  background: var(--clr-accent) !important; border: none !important;
  color: var(--clr-white) !important; border-radius: var(--radius-sm) !important;
  padding: 11px 28px !important; font-weight: 600 !important; font-size: 13.5px !important;
  transition: all var(--speed) var(--ease) !important; margin-top: 6px !important;
  box-shadow: 0 4px 16px rgba(255,107,53,0.38) !important;
}
#homepage-carousel .btn.btn-framed:hover {
  background: var(--clr-accent-dark) !important;
  transform: translateY(-2px) !important; box-shadow: 0 8px 22px rgba(255,107,53,0.5) !important;
}

@media (max-width: 767px) {
  #homepage-carousel { padding: 36px 0 40px !important; }
  #homepage-carousel .slider-content { margin-top: 24px !important; padding: 20px !important; }
  #homepage-carousel h1 { font-size: 19px !important; }
  #homepage-carousel .image-carousel .image-carousel-slide img { height: 220px !important; }
}


/* ===================================================
   HOME PAGE BLOCKS
   =================================================== */
.block {
  padding: 56px 0 !important; position: relative !important; overflow: hidden !important;
}
.block:nth-of-type(even) { background: var(--clr-bg) !important; }
.block + .block { border-top: 1px solid var(--clr-border) !important; }
.block section > header { margin-bottom: 4px !important; }
.block section > header h2 {
  color: var(--clr-primary) !important; font-weight: 700 !important;
  margin-bottom: 44px !important; margin-top: 6px !important;
}

/* ---- Stories widget (home) ---- */
#news-small article {
  background: var(--clr-white) !important; border-radius: var(--radius-sm) !important;
  padding: 14px 16px !important; margin-bottom: 12px !important;
  border: 1px solid var(--clr-border) !important; box-shadow: var(--shadow-sm) !important;
  display: block !important;
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), border-color var(--speed) var(--ease) !important;
}
#news-small article:hover {
  transform: translateY(-3px) !important; box-shadow: var(--shadow-md) !important;
  border-color: rgba(255,107,53,0.22) !important;
}
#news-small article figure.date {
  color: var(--clr-muted) !important; font-size: 11px !important; font-weight: 500 !important;
  letter-spacing: 0.5px !important; text-transform: uppercase !important;
  margin-bottom: 6px !important; float: none !important;
}
#news-small article figure.date .fa { color: var(--clr-accent) !important; margin-right: 4px !important; }
#news-small article header a {
  color: var(--clr-text) !important; font-weight: 600 !important;
  font-size: 13.5px !important; line-height: 1.4 !important; display: block !important;
}
#news-small article header a:hover { color: var(--clr-primary) !important; }

/* ---- Events widget (home) ---- */
#events-small article.event {
  background: var(--clr-white) !important; border-radius: var(--radius-sm) !important;
  padding: 14px 16px !important; margin-bottom: 12px !important;
  border: 1px solid var(--clr-border) !important; box-shadow: var(--shadow-sm) !important;
  display: flex !important; align-items: center !important; gap: 14px !important;
  clear: both !important; overflow: hidden !important;
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease) !important;
}
#events-small article.event:hover {
  transform: translateY(-3px) !important; box-shadow: var(--shadow-md) !important;
  border-color: rgba(10,36,99,0.18) !important;
}
#events-small article.event figure.date {
  background: linear-gradient(135deg,var(--clr-primary),var(--clr-primary-light)) !important;
  color: var(--clr-white) !important; border-radius: var(--radius-sm) !important;
  min-width: 52px !important; text-align: center !important; padding: 8px 6px !important;
  box-shadow: 0 4px 12px rgba(10,36,99,0.28) !important;
  float: none !important; flex-shrink: 0 !important; margin: 0 !important;
}
#events-small article.event figure.date .month {
  font-size: 10px !important; font-weight: 600 !important; text-transform: uppercase !important;
  letter-spacing: 0.6px !important; color: rgba(255,255,255,0.78) !important; line-height: 1 !important;
}
#events-small article.event figure.date .day {
  font-size: 22px !important; font-weight: 700 !important; line-height: 1.2 !important; color: var(--clr-white) !important;
}
#events-small article.event aside { overflow: hidden !important; }
#events-small article.event aside header a {
  color: var(--clr-text) !important; font-weight: 600 !important;
  font-size: 13.5px !important; line-height: 1.35 !important; display: block !important;
}
#events-small article.event aside header a:hover { color: var(--clr-primary) !important; }
#events-small article.event aside .additional-info {
  color: var(--clr-accent) !important; font-size: 11px !important;
  font-weight: 600 !important; margin-top: 4px !important; letter-spacing: 0.3px !important;
}

/* ---- About widget (home) ---- */
#about .section-content img.add-margin {
  border-radius: var(--radius) !important; box-shadow: var(--shadow-md) !important;
  width: 100% !important; max-height: 190px !important; object-fit: cover !important;
  display: block !important; margin: 0 0 16px !important;
  transition: transform 0.4s var(--ease) !important;
}
#about .section-content img.add-margin:hover { transform: scale(1.02) !important; }
#about .section-content p { font-size: 13px !important; line-height: 1.8 !important; }

/* ---- Alumni profiles widget (home) ---- */
#our-professors .professors { display: flex !important; flex-direction: column !important; gap: 14px !important; }
#our-professors .professor-thumbnail {
  background: var(--clr-white) !important; border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius) !important; padding: 16px !important;
  display: flex !important; align-items: center !important; gap: 14px !important;
  box-shadow: var(--shadow-sm) !important; clear: both !important; overflow: hidden !important;
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease) !important;
}
#our-professors .professor-thumbnail:hover {
  transform: translateY(-4px) !important; box-shadow: var(--shadow-md) !important;
  border-color: rgba(10,36,99,0.18) !important;
}
#our-professors .professor-image { float: none !important; flex-shrink: 0 !important; }
#our-professors .professor-image img {
  width: 62px !important; height: 62px !important; border-radius: 50% !important;
  object-fit: cover !important; border: 3px solid var(--clr-bg) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1) !important; display: block !important;
}
#our-professors .professor-thumbnail aside { flex: 1 !important; overflow: hidden !important; padding-left: 0 !important; }
#our-professors .professor-thumbnail aside header a {
  color: var(--clr-text) !important; font-weight: 600 !important; font-size: 14px !important; display: block !important;
}
#our-professors .professor-thumbnail aside header a:hover { color: var(--clr-primary) !important; }
#our-professors .professor-thumbnail aside .divider { display: none !important; }
#our-professors .professor-thumbnail aside .professor-description {
  color: var(--clr-muted) !important; font-size: 12px !important; font-weight: 400 !important;
  margin: 4px 0 10px !important; float: none !important;
}
#our-professors .professor-thumbnail aside a.show-profile {
  display: inline-block !important; background: var(--clr-primary) !important;
  color: var(--clr-white) !important; font-size: 11px !important; font-weight: 600 !important;
  padding: 4px 13px !important; border-radius: 20px !important; letter-spacing: 0.2px !important;
  transition: all var(--speed) var(--ease) !important;
}
#our-professors .professor-thumbnail aside a.show-profile:hover {
  background: var(--clr-accent) !important; color: var(--clr-white) !important; transform: translateX(2px) !important;
}


/* ===================================================
   GALLERY — HOME + GALLERY PAGE
   Both use ul.gallery-list inside section#gallery

   BUG 1: style.css .gallery-list li a has margin-left:-200%
          which shifts the anchor off-screen. Must reset margin.
   BUG 2: padding-bottom:100% in grid resolves against the full
          container width, not the column. Use grid-auto-rows instead.
   BUG 3: li::after on top covers a::after (the eye icon). Keep
          the overlay on a::after where the original expects it.
   =================================================== */

/* 1. Grid — aspect-ratio based proportions */
#gallery .gallery-list {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  clear: both !important;
}

/* 2. Each cell */
#gallery .gallery-list li {
  position: relative !important;
  float: none !important;       /* reset original float:left */
  width: 100% !important;
  aspect-ratio: 3 / 2 !important; /* Professional landscape ratio */
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: var(--radius-sm) !important;
  background: var(--clr-bg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease) !important;
}

#gallery .gallery-list li:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-md) !important;
  z-index: 2 !important;
}

/* 3. Anchor fills the cell */
#gallery .gallery-list li a,
#gallery .gallery-list li a.image-popup {
  display: block !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  right: 0 !important; bottom: 0 !important;
  width: 100% !important; height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* 4. Image fills the anchor */
#gallery .gallery-list li img {
  display: block !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  margin: 0 !important;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
  filter: brightness(0.95) contrast(1.05) !important; /* Add some punch */
}

#gallery .gallery-list li:hover img { 
  transform: scale(1.1) !important; 
  filter: brightness(1.05) contrast(1.1) !important; /* Brighter on hover */
}

/* 5. Hover overlay + eye icon */
#gallery .gallery-list li a::after,
#gallery .gallery-list li a.image-popup::after {
  content: "\f06e" !important;
  font-family: 'FontAwesome' !important;
  font-size: 32px !important; /* Slightly larger icon */
  color: #ffffff !important;
  
  /* Full-cover overlay */
  position: absolute !important;
  top: 0 !important; 
  left: 0 !important;
  width: 100% !important; 
  height: 100% !important;
  background: rgba(10,36,99,0.5) !important;
  
  /* Perfect Centering */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  
  /* Reset original style.css offsets */
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  
  opacity: 0 !important;
  transition: all 0.3s ease !important;
  z-index: 5 !important;
  transform: scale(1) !important;
}

#gallery .gallery-list li a:hover::after,
#gallery .gallery-list li a.image-popup:hover::after {
  opacity: 1 !important;
}

/* Gallery page — album sections */
#page-content section#gallery {
  margin-bottom: 40px !important;
}
#page-content section#gallery > header h2 {
  color: var(--clr-primary) !important; font-weight: 700 !important;
  font-size: 20px !important; margin-bottom: 30px !important;
}

@media (max-width: 991px) {
  #gallery .gallery-list { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 575px) {
  #gallery .gallery-list { grid-template-columns: repeat(2, 1fr) !important; }
}


/* ===================================================
   INNER PAGES — General layout
   =================================================== */

/* Consistent page content padding */
#page-content {
  min-height: 400px !important;
  padding: 32px 0 56px !important;
  background: var(--clr-white) !important;
}

/* Main content area */
#page-main {
  padding-bottom: 20px !important;
}

/* Page title */
#page-content section > header > h1,
#page-content > .container > header > h1 {
  color: var(--clr-primary) !important; font-weight: 700 !important;
  margin-bottom: 30px !important; margin-top: 0 !important;
}

/* Section h2 inside page content */
#page-content section > header h2 {
  color: var(--clr-primary) !important; font-weight: 600 !important;
  margin-bottom: 28px !important; margin-top: 0 !important;
}

/* ===================================================
   BREADCRUMB
   =================================================== */
.breadcrumb {
  background: var(--clr-bg) !important;
  border: none !important; border-bottom: 3px solid var(--clr-primary) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 14px !important; margin-bottom: 24px !important;
}
.breadcrumb li { font-size: 12px !important; font-weight: 500 !important; padding: 0 !important; }
.breadcrumb li a { color: var(--clr-muted) !important; }
.breadcrumb li a:hover { color: var(--clr-primary) !important; }
.breadcrumb > .active { color: var(--clr-primary) !important; font-weight: 600 !important; }
.breadcrumb > li + li::before { color: var(--clr-muted) !important; }


/* ===================================================
   SIDEBAR
   =================================================== */
#page-sidebar {
  background: var(--clr-white) !important;
  border-radius: var(--radius) !important; border: 1px solid var(--clr-border) !important;
  padding: 24px !important; box-shadow: var(--shadow-sm) !important; margin-top: 4px !important;
}
#page-sidebar .news-small article { box-shadow: none !important; border: 1px solid var(--clr-border) !important; }

/* Archive sidebar links */
#archive header h2 {
  font-size: 18px !important; color: var(--clr-primary) !important; margin-bottom: 16px !important;
}
#archive .list-links { padding: 0 !important; margin: 0 !important; }
#archive .list-links li { padding: 0 !important; border-bottom: 1px solid var(--clr-border) !important; }
#archive .list-links li:last-child { border: none !important; }
#archive .list-links li a {
  color: var(--clr-muted) !important; font-size: 13px !important; font-weight: 400 !important;
  padding: 8px 0 !important; display: flex !important; align-items: center !important; gap: 8px !important;
  left: 0 !important; transition: all var(--speed) var(--ease) !important;
}
#archive .list-links li a::before { content: '→' !important; color: var(--clr-accent) !important; font-size: 12px !important; }
#archive .list-links li a:hover { color: var(--clr-primary) !important; padding-left: 4px !important; }


/* ===================================================
   BLOG LISTING — Stories / Archive pages
   =================================================== */
.blog-listing-post {
  background: var(--clr-white) !important; border-radius: var(--radius) !important;
  overflow: hidden !important; border: 1px solid var(--clr-border) !important;
  box-shadow: var(--shadow-sm) !important; margin-bottom: 28px !important;
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease) !important;
}
.blog-listing-post:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-md) !important; }

.blog-listing-post .blog-thumbnail {
  height: 175px !important; overflow: hidden !important; position: relative !important;
}
.blog-listing-post .blog-thumbnail .image-wrapper img {
  width: 100% !important; height: 175px !important; object-fit: cover !important;
  transition: transform 0.4s var(--ease) !important; display: block !important;
}
.blog-listing-post:hover .blog-thumbnail .image-wrapper img { transform: scale(1.06) !important; }
.blog-listing-post .blog-thumbnail .blog-meta {
  background: linear-gradient(135deg,var(--clr-primary),var(--clr-primary-light)) !important;
  font-size: 11px !important; font-weight: 500 !important;
  letter-spacing: 0.3px !important; padding: 6px 12px !important; border-radius: 0 !important;
}
.blog-listing-post aside { padding: 16px 18px !important; }
.blog-listing-post aside header a h3 {
  color: var(--clr-text) !important; font-weight: 600 !important; font-size: 15px !important;
  margin: 0 0 10px !important; line-height: 1.4 !important;
  transition: color var(--speed) var(--ease) !important;
}
.blog-listing-post:hover aside header a h3 { color: var(--clr-primary) !important; }
.blog-listing-post .description p { font-size: 13px !important; margin-bottom: 14px !important; }
.blog-listing-post a.read-more {
  display: inline-block !important; color: var(--clr-primary) !important;
  font-weight: 600 !important; font-size: 12px !important; letter-spacing: 0.4px !important;
  text-transform: uppercase !important; border-bottom: 2px solid var(--clr-accent) !important;
  padding-bottom: 2px !important; position: relative !important; bottom: auto !important; float: none !important;
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease) !important;
}
.blog-listing-post a.read-more:hover { color: var(--clr-accent) !important; border-color: var(--clr-primary) !important; }


/* ===================================================
   STORY DETAIL PAGE
   =================================================== */
#blog-detail .blog-detail-header img {
  width: 100% !important; max-height: 360px !important; object-fit: cover !important;
  border-radius: var(--radius) !important; box-shadow: var(--shadow-md) !important;
  display: block !important; margin-bottom: 20px !important;
}
#blog-detail .blog-detail-header h2 {
  color: var(--clr-primary) !important; font-size: 24px !important;
  font-weight: 700 !important; margin: 14px 0 10px !important;
}
#blog-detail .blog-detail-header h2::after { display: none !important; }
#blog-detail .blog-detail-header .blog-detail-meta {
  color: var(--clr-muted) !important; font-size: 12px !important; margin-bottom: 16px !important;
}
#blog-detail .blog-detail-header .blog-detail-meta > span {
  margin-right: 16px !important; font-weight: 500 !important;
}
#blog-detail .blog-detail-header .blog-detail-meta .fa { color: var(--clr-accent) !important; margin-right: 4px !important; }

/* Comments */
#discussion .discussion-list { list-style: none !important; padding: 0 !important; }
#discussion .discussion-list li.author-block {
  background: var(--clr-white) !important; border-radius: var(--radius-sm) !important;
  border: 1px solid var(--clr-border) !important; padding: 18px !important;
  margin-bottom: 14px !important; box-shadow: var(--shadow-sm) !important;
}
#discussion .comment-controls { margin-top: 8px !important; }
#discussion .comment-controls span { color: var(--clr-muted) !important; font-size: 11px !important; }

/* Comment form */
#leave-reply label {
  font-size: 13px !important; font-weight: 500 !important; color: var(--clr-text) !important;
  display: block !important; margin-bottom: 6px !important;
}
#leave-reply textarea,
#leave-reply input[type="text"],
#leave-reply input[type="email"] {
  width: 100% !important; border: 1.5px solid var(--clr-border) !important;
  border-radius: var(--radius-sm) !important; padding: 10px 14px !important;
  font-size: 13px !important; color: var(--clr-text) !important; font-family: 'Poppins', sans-serif !important;
  transition: border-color var(--speed) var(--ease) !important; box-shadow: none !important;
}
#leave-reply textarea:focus,
#leave-reply input:focus {
  border-color: var(--clr-primary) !important; outline: none !important;
  box-shadow: 0 0 0 3px rgba(10,36,99,0.1) !important;
}


/* ===================================================
   EVENTS LIST PAGE
   =================================================== */
#events .section-content .event {
  background: var(--clr-white) !important; border-radius: var(--radius) !important;
  border: 1px solid var(--clr-border) !important; box-shadow: var(--shadow-sm) !important;
  margin-bottom: 20px !important; overflow: hidden !important;
  display: flex !important; align-items: stretch !important; gap: 0 !important;
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease) !important;
}
#events .section-content .event:hover {
  transform: translateY(-3px) !important; box-shadow: var(--shadow-md) !important;
}

/* Event thumbnail (image + date badge) */
#events .event-thumbnail {
  position: relative !important; width: 160px !important; flex-shrink: 0 !important; overflow: hidden !important;
}
#events .event-thumbnail .event-image .image-wrapper img {
  width: 160px !important; height: 100% !important; min-height: 120px !important;
  object-fit: cover !important; display: block !important;
  transition: transform 0.45s var(--ease) !important;
}
#events .event:hover .event-thumbnail .event-image .image-wrapper img { transform: scale(1.08) !important; }

#events .event-thumbnail figure.date {
  position: absolute !important; top: 10px !important; left: 10px !important;
  background: linear-gradient(135deg,var(--clr-primary),var(--clr-primary-light)) !important;
  color: var(--clr-white) !important; border-radius: var(--radius-sm) !important;
  text-align: center !important; padding: 8px 10px !important;
  box-shadow: 0 4px 12px rgba(10,36,99,0.3) !important; z-index: 1 !important;
  float: none !important; width: auto !important; margin: 0 !important;
}
#events .event-thumbnail figure.date .month {
  font-size: 10px !important; font-weight: 600 !important; text-transform: uppercase !important;
  letter-spacing: 0.5px !important; color: rgba(255,255,255,0.78) !important; line-height: 1 !important; display: block !important;
}
#events .event-thumbnail figure.date .day {
  font-size: 20px !important; font-weight: 700 !important; color: var(--clr-white) !important; line-height: 1.2 !important; display: block !important;
}

#events .event aside {
  padding: 18px 20px !important; flex: 1 !important; display: flex !important;
  flex-direction: column !important; justify-content: center !important;
}
#events .event aside > header a {
  color: var(--clr-text) !important; font-weight: 700 !important; font-size: 16px !important;
  line-height: 1.3 !important; display: block !important; margin-bottom: 8px !important;
}
#events .event aside > header a:hover { color: var(--clr-primary) !important; }
#events .event aside .additional-info {
  color: var(--clr-muted) !important; font-size: 12px !important; margin-bottom: 10px !important; font-weight: 500 !important;
}
#events .event aside .additional-info .fa { color: var(--clr-accent) !important; margin-right: 4px !important; }
#events .event aside .description p { font-size: 13px !important; margin-bottom: 14px !important; }
#events .event aside .btn.btn-framed {
  align-self: flex-start !important;
  background: var(--clr-primary) !important; color: var(--clr-white) !important;
  border: none !important; border-radius: var(--radius-sm) !important;
  padding: 7px 18px !important; font-size: 12.5px !important; font-weight: 600 !important;
  transition: all var(--speed) var(--ease) !important; box-shadow: 0 3px 10px rgba(10,36,99,0.25) !important;
}
#events .event aside .btn.btn-framed:hover {
  background: var(--clr-accent) !important; transform: translateX(2px) !important;
}

@media (max-width: 575px) {
  #events .section-content .event { flex-direction: column !important; }
  #events .event-thumbnail { width: 100% !important; height: 160px !important; }
  #events .event-thumbnail .event-image .image-wrapper img { width: 100% !important; height: 160px !important; }
}


/* ===================================================
   EVENT DETAIL PAGE
   =================================================== */
.event-image .image-wrapper img {
  border-radius: var(--radius) !important; box-shadow: var(--shadow-md) !important;
  width: 100% !important; display: block !important;
}
#event-header h2.event-date {
  color: var(--clr-primary) !important; font-size: 18px !important; margin: 0 0 12px !important;
}
#event-header h2.event-date::after { display: none !important; }

/* Countdown */
.course-count-down {
  background: var(--clr-bg) !important; border-radius: var(--radius-sm) !important;
  padding: 16px !important; margin: 16px 0 !important;
  border: 1px solid var(--clr-border) !important;
}
.course-count-down .course-start {
  color: var(--clr-muted) !important; font-size: 12px !important;
  font-weight: 500 !important; text-transform: uppercase !important;
  letter-spacing: 0.5px !important; margin-bottom: 10px !important;
  display: block !important;
}
.count_down_box { display: inline-block !important; text-align: center !important; margin-right: 14px !important; }
.count_down_box span { color: var(--clr-primary) !important; font-size: 26px !important; font-weight: 700 !important; display: block !important; }
.count_down_box p { font-size: 10px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin: 0 !important; }

.course-summary {
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  background: var(--clr-bg) !important; border-radius: 20px !important;
  padding: 5px 12px !important; margin: 4px 4px 4px 0 !important;
  font-size: 12.5px !important; font-weight: 500 !important; color: var(--clr-text) !important;
  border: 1px solid var(--clr-border) !important;
}
.course-summary .fa { color: var(--clr-accent) !important; }

/* RSVP buttons */
#event-detail .btn.btn-framed.btn-color-grey {
  background: var(--clr-primary) !important; color: var(--clr-white) !important;
  border: none !important; border-radius: var(--radius-sm) !important;
  padding: 8px 16px !important; font-size: 12.5px !important; font-weight: 600 !important;
  transition: all var(--speed) var(--ease) !important; margin-right: 6px !important; margin-bottom: 6px !important;
}
#event-detail .btn.btn-framed.btn-color-grey:hover {
  background: var(--clr-accent) !important; transform: translateY(-1px) !important;
}


/* ===================================================
   ALUMNI LIST PAGE
   =================================================== */

/* Search form */
#event-search .search-box {
  background: var(--clr-bg) !important; border-radius: var(--radius) !important;
  padding: 20px 22px !important; margin-bottom: 28px !important;
  border: 1px solid var(--clr-border) !important; box-shadow: var(--shadow-sm) !important;
}
#event-search .form-group { margin-bottom: 12px !important; }
#event-search label {
  font-size: 12px !important; font-weight: 600 !important; color: var(--clr-muted) !important;
  text-transform: uppercase !important; letter-spacing: 0.4px !important;
  display: block !important; margin-bottom: 5px !important;
}
#event-search input[type="text"]:not(.selectize-input input) {
  border: 1.5px solid var(--clr-border) !important; border-radius: var(--radius-sm) !important;
  padding: 10px 15px !important; font-size: 13.5px !important; color: var(--clr-text) !important;
  width: 100% !important; transition: all var(--speed) var(--ease) !important; box-shadow: none !important;
  height: 44px !important; /* Force exact same height as Selectize */
}
/* Ensure Selectize internal input NEVER gets the outer borders */
#event-search .selectize-input input[type="text"] {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  height: auto !important;
  box-shadow: none !important;
  margin: 0 !important;
}
#event-search select {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  position: absolute !important;
}
#event-search input:focus {
  border-color: var(--clr-primary) !important; outline: none !important;
  box-shadow: 0 0 0 3px rgba(10,36,99,0.1) !important;
}
#event-search .btn {
  background: var(--clr-primary) !important; color: var(--clr-white) !important;
  border: none !important; border-radius: var(--radius-sm) !important;
  padding: 9px 22px !important; font-size: 13px !important; font-weight: 600 !important;
  transition: all var(--speed) var(--ease) !important; box-shadow: 0 3px 10px rgba(10,36,99,0.2) !important;
}
#event-search .btn:hover { background: var(--clr-accent) !important; transform: translateY(-1px) !important; }

/* Alumni cards */
#our-speakers .author-block.course-speaker {
  background: var(--clr-white) !important; border-radius: var(--radius) !important;
  border: 1px solid var(--clr-border) !important; box-shadow: var(--shadow-sm) !important;
  padding: 18px !important; margin-bottom: 20px !important;
  display: flex !important; align-items: flex-start !important; gap: 16px !important;
  clear: both !important; overflow: hidden !important;
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease) !important;
}
#our-speakers .author-block.course-speaker:hover {
  transform: translateY(-3px) !important; box-shadow: var(--shadow-md) !important;
  border-color: rgba(10,36,99,0.2) !important;
}
#our-speakers .author-block.course-speaker .author-picture {
  float: none !important; flex-shrink: 0 !important;
}
#our-speakers .author-block.course-speaker .author-picture img {
  width: 70px !important; height: 70px !important; border-radius: 50% !important;
  object-fit: cover !important; border: 3px solid var(--clr-bg) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; display: block !important;
}
#our-speakers .author-block.course-speaker .paragraph-wrapper { flex: 1 !important; overflow: hidden !important; }
#our-speakers .author-block.course-speaker .paragraph-wrapper header {
  margin-bottom: 4px !important; font-size: 0 !important;
}
#our-speakers .author-block.course-speaker .paragraph-wrapper header a {
  color: var(--clr-text) !important; font-weight: 700 !important; font-size: 15px !important;
}
#our-speakers .author-block.course-speaker .paragraph-wrapper header a:hover { color: var(--clr-primary) !important; }
#our-speakers .author-block.course-speaker .paragraph-wrapper figure {
  color: var(--clr-muted) !important; font-size: 12px !important; font-weight: 500 !important; margin: 4px 0 8px !important;
}
#our-speakers .author-block.course-speaker .paragraph-wrapper p {
  font-size: 13px !important; margin-bottom: 12px !important;
  overflow: hidden !important; display: -webkit-box !important;
  -webkit-line-clamp: 2 !important; 
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}
#our-speakers .author-block.course-speaker .btn.btn-framed {
  background: var(--clr-primary) !important; color: var(--clr-white) !important;
  border: none !important; border-radius: 20px !important;
  padding: 5px 15px !important; font-size: 11.5px !important; font-weight: 600 !important;
  transition: all var(--speed) var(--ease) !important;
}
#our-speakers .author-block.course-speaker .btn.btn-framed:hover {
  background: var(--clr-accent) !important; color: var(--clr-white) !important;
}


/* ===================================================
   ALUMNUS DETAIL PAGE
   =================================================== */
.author-block.member-detail {
  background: var(--clr-white) !important; border-radius: var(--radius) !important;
  border: 1px solid var(--clr-border) !important; box-shadow: var(--shadow-sm) !important;
  padding: 24px !important; display: flex !important; gap: 24px !important;
  align-items: flex-start !important; clear: both !important;
}
.author-block.member-detail .author-picture { float: none !important; flex-shrink: 0 !important; }
.author-block.member-detail .author-picture img {
  width: 130px !important; height: 130px !important; border-radius: var(--radius) !important;
  object-fit: cover !important; box-shadow: var(--shadow-md) !important;
  border-radius: 0 !important;
}
.author-block.member-detail .author-picture .btn.btn-framed {
  display: block !important; margin-top: 10px !important; text-align: center !important;
  width: 100% !important;
}
.author-block.member-detail .paragraph-wrapper { flex: 1 !important; overflow: hidden !important; }
.author-block.member-detail .paragraph-wrapper h2 {
  color: var(--clr-primary) !important; font-size: 24px !important; font-weight: 700 !important;
  margin-bottom: 4px !important;
}
.author-block.member-detail .paragraph-wrapper h2::after { display: none !important; }
.author-block.member-detail .paragraph-wrapper h3 { color: var(--clr-muted) !important; font-size: 14px !important; font-weight: 500 !important; margin-bottom: 12px !important; }
.author-block.member-detail .paragraph-wrapper .icons a {
  font-size: 20px !important; margin-right: 10px !important; opacity: 0.8 !important;
  transition: all var(--speed) var(--ease) !important;
}
.author-block.member-detail .paragraph-wrapper .icons a:hover { opacity: 1 !important; transform: translateY(-2px) !important; }
.author-block.member-detail .paragraph-wrapper .quote {
  font-size: 14px !important; color: var(--clr-muted) !important;
  font-style: italic !important; line-height: 1.7 !important;
}

@media (max-width: 575px) {
  .author-block.member-detail { flex-direction: column !important; }
  .author-block.member-detail .author-picture img { width: 100px !important; height: 100px !important; }
}


/* ===================================================
   JOBS PAGE — reuses .event card structure
   =================================================== */
#events.events article.event {
  background: var(--clr-white) !important; border-radius: var(--radius) !important;
  border: 1px solid var(--clr-border) !important; box-shadow: var(--shadow-sm) !important;
  margin-bottom: 18px !important; padding: 18px 20px !important;
  display: flex !important; align-items: flex-start !important; gap: 18px !important;
  clear: both !important; overflow: hidden !important;
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease) !important;
}
#events.events article.event:hover {
  transform: translateY(-3px) !important; box-shadow: var(--shadow-md) !important;
}
#events.events article.event figure.date {
  background: linear-gradient(135deg,var(--clr-primary),var(--clr-primary-light)) !important;
  color: var(--clr-white) !important; border-radius: var(--radius-sm) !important;
  min-width: 56px !important; text-align: center !important; padding: 10px 8px !important;
  box-shadow: 0 4px 12px rgba(10,36,99,0.28) !important;
  float: none !important; flex-shrink: 0 !important; margin: 0 !important; align-self: flex-start !important;
}
#events.events article.event figure.date .month {
  font-size: 10px !important; font-weight: 600 !important; text-transform: uppercase !important;
  color: rgba(255,255,255,0.78) !important; letter-spacing: 0.5px !important; line-height: 1 !important; display: block !important;
}
#events.events article.event figure.date .day {
  font-size: 22px !important; font-weight: 700 !important; color: var(--clr-white) !important; line-height: 1.2 !important; display: block !important;
}
#events.events article.event aside { flex: 1 !important; overflow: hidden !important; }
#events.events article.event aside > header a {
  color: var(--clr-text) !important; font-weight: 700 !important; font-size: 15px !important; display: block !important; margin-bottom: 6px !important;
}
#events.events article.event aside > header a:hover { color: var(--clr-primary) !important; }
#events.events article.event aside .additional-info {
  color: var(--clr-muted) !important; font-size: 12px !important; font-weight: 500 !important; margin-bottom: 10px !important;
}
#events.events article.event aside .additional-info .fa { color: var(--clr-accent) !important; }
#events.events article.event aside .description p { font-size: 13px !important; margin-bottom: 12px !important; }
#events.events article.event aside .btn.btn-framed {
  background: var(--clr-primary) !important; color: var(--clr-white) !important;
  border: none !important; border-radius: 20px !important;
  padding: 5px 14px !important; font-size: 12px !important; font-weight: 600 !important;
  margin-right: 6px !important; margin-bottom: 6px !important;
  transition: all var(--speed) var(--ease) !important; display: inline-block !important;
}
#events.events article.event aside .btn.btn-framed:hover {
  background: var(--clr-accent) !important; color: var(--clr-white) !important;
}


/* ===================================================
   NOTICES PAGE
   =================================================== */
#page-content .author.has-dark-background {
  background: var(--clr-white) !important; border-radius: var(--radius) !important;
  border: 1px solid var(--clr-border) !important; box-shadow: var(--shadow-sm) !important;
  margin-bottom: 20px !important; overflow: hidden !important;
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease) !important;
}
#page-content .author.has-dark-background:hover {
  transform: translateY(-3px) !important; box-shadow: var(--shadow-md) !important;
}
#page-content .author.has-dark-background blockquote {
  padding: 22px 24px !important; margin: 0 !important; border: none !important; background: transparent !important;
  display: block !important;
}
#page-content .author.has-dark-background blockquote h3 {
  color: var(--clr-primary) !important; font-weight: 700 !important;
  font-size: 16px !important; margin: 0 0 10px !important;
}
#page-content .author.has-dark-background blockquote header {
  color: var(--clr-muted) !important; font-size: 13px !important; line-height: 1.7 !important; display: block !important;
}
#page-content .author.has-dark-background blockquote footer {
  color: var(--clr-accent) !important; font-size: 11.5px !important;
  font-weight: 600 !important; margin-top: 12px !important;
  letter-spacing: 0.3px !important; display: block !important;
  border-top: 1px solid var(--clr-border) !important; padding-top: 10px !important;
}
/* paragraph-wrapper inside notice */
#page-content .author.has-dark-background .paragraph-wrapper header { color: inherit !important; }
#page-content .author.has-dark-background .paragraph-wrapper footer { color: var(--clr-accent) !important; opacity: 1 !important; }


/* ===================================================
   VOLUNTEERS PAGE — Table
   =================================================== */
.table.course-list-table {
  border-radius: var(--radius-sm) !important; overflow: hidden !important;
  border-collapse: separate !important; border-spacing: 0 !important;
  box-shadow: var(--shadow-sm) !important; border: 1px solid var(--clr-border) !important;
  width: 100% !important;
}
.table.course-list-table thead tr th {
  background: linear-gradient(135deg,var(--clr-primary),var(--clr-primary-light)) !important;
  color: var(--clr-white) !important; font-size: 12.5px !important; font-weight: 600 !important;
  letter-spacing: 0.4px !important; text-transform: uppercase !important;
  padding: 12px 16px !important; border: none !important;
}
.table.course-list-table tbody tr {
  transition: background var(--speed) var(--ease) !important;
}
.table.course-list-table tbody tr:hover td,
.table.course-list-table tbody tr:hover th { background: var(--clr-bg) !important; }
.table.course-list-table tbody tr td,
.table.course-list-table tbody tr th {
  padding: 11px 16px !important; font-size: 13px !important;
  border-top: 1px solid var(--clr-border) !important; color: var(--clr-text) !important;
  font-weight: 400 !important;
}
.table-responsive { border-radius: var(--radius-sm) !important; overflow: hidden !important; }


/* ===================================================
   CONTACT US PAGE
   =================================================== */
#contact address {
  background: var(--clr-bg) !important; border-radius: var(--radius) !important;
  border: 1px solid var(--clr-border) !important; padding: 22px !important;
  box-shadow: var(--shadow-sm) !important; line-height: 2 !important;
  font-size: 13.5px !important;
}
#contact address h3 {
  color: var(--clr-primary) !important; font-size: 17px !important;
  font-weight: 700 !important; margin-bottom: 14px !important;
}
#contact address abbr { border-bottom: 1px dotted var(--clr-muted) !important; color: var(--clr-muted) !important; }
#contact address a { color: var(--clr-accent) !important; }
#contact address a:hover { color: var(--clr-primary) !important; }

#contact .icons { margin: 14px 0 !important; }
#contact .icons a {
  font-size: 20px !important; margin-right: 10px !important; opacity: 0.85 !important;
  transition: all var(--speed) var(--ease) !important;
}
#contact .icons a:hover { opacity: 1 !important; transform: translateY(-2px) !important; }

#contact .map-wrapper {
  border-radius: var(--radius) !important; overflow: hidden !important;
  box-shadow: var(--shadow-md) !important; margin-top: 4px !important;
}
#contact .map-wrapper iframe { display: block !important; border-radius: var(--radius) !important; }

/* Contact form */
#contact-form { margin-top: 40px !important; }
#contact-form label {
  font-size: 12.5px !important; font-weight: 600 !important; color: var(--clr-text) !important;
  display: block !important; margin-bottom: 5px !important;
}
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea {
  width: 100% !important; border: 1.5px solid var(--clr-border) !important;
  border-radius: var(--radius-sm) !important; padding: 10px 14px !important;
  font-size: 13px !important; color: var(--clr-text) !important;
  font-family: 'Poppins', sans-serif !important;
  transition: border-color var(--speed) var(--ease) !important; box-shadow: none !important;
}
#contact-form input:focus, #contact-form textarea:focus {
  border-color: var(--clr-primary) !important; outline: none !important;
  box-shadow: 0 0 0 3px rgba(10,36,99,0.1) !important;
}
#contact-form .btn.btn-color-primary {
  background: linear-gradient(135deg,var(--clr-primary),var(--clr-primary-light)) !important;
  color: var(--clr-white) !important; border: none !important;
  border-radius: var(--radius-sm) !important; padding: 11px 28px !important;
  font-weight: 600 !important; font-size: 14px !important;
  box-shadow: 0 4px 12px rgba(10,36,99,0.28) !important;
  transition: all var(--speed) var(--ease) !important;
}
#contact-form .btn.btn-color-primary:hover {
  transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(10,36,99,0.38) !important;
}

/* Submit button in story comments */
.btn.btn-color-primary {
  background: linear-gradient(135deg,var(--clr-primary),var(--clr-primary-light)) !important;
  color: var(--clr-white) !important; border: none !important;
  border-radius: var(--radius-sm) !important; padding: 10px 24px !important;
  font-weight: 600 !important; transition: all var(--speed) var(--ease) !important;
  box-shadow: 0 4px 12px rgba(10,36,99,0.25) !important;
}
.btn.btn-color-primary:hover {
  transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(10,36,99,0.38) !important; color: var(--clr-white) !important;
}


/* ===================================================
   ALERTS
   =================================================== */
.alert {
  border-radius: var(--radius-sm) !important; border: none !important;
  padding: 14px 18px !important; font-size: 13.5px !important; font-weight: 500 !important;
  box-shadow: var(--shadow-sm) !important;
}
.alert-info { background: #e0f0ff !important; color: #0a4a80 !important; }
.alert-success { background: #e0f5e8 !important; color: #1a6e36 !important; }
.alert-danger { background: #fde8e8 !important; color: #891919 !important; }
.alert-warning { background: #fff4e0 !important; color: #7a5200 !important; }


/* ===================================================
   GENERAL BUTTONS & FORMS
   =================================================== */
.btn {
  border-radius: var(--radius-sm) !important;
  transition: all var(--speed) var(--ease) !important;
}
.form-control {
  border: 1.5px solid var(--clr-border) !important; border-radius: var(--radius-sm) !important;
  padding: 10px 14px !important; height: auto !important; font-size: 13px !important;
  color: var(--clr-text) !important; box-shadow: none !important;
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease) !important;
}
.form-control:focus {
  border-color: var(--clr-primary) !important; outline: none !important;
  box-shadow: 0 0 0 3px rgba(10,36,99,0.1) !important;
}


/* ===================================================
   PAGINATION
   =================================================== */
.pagination > li > a, .pagination > li > span {
  border-radius: var(--radius-sm) !important; margin: 0 3px !important;
  border: 1.5px solid var(--clr-border) !important; color: var(--clr-text) !important;
  font-size: 13px !important; font-weight: 500 !important; padding: 7px 13px !important;
  transition: all var(--speed) var(--ease) !important;
}
.pagination > li > a:hover,
.pagination > li > a.active {
  background: var(--clr-primary) !important; color: var(--clr-white) !important; border-color: var(--clr-primary) !important;
}
.pagination > .active > a, 
.pagination > .active > span,
.pagination > li > span.active {
  background: var(--clr-primary) !important; border-color: var(--clr-primary) !important; color: var(--clr-white) !important;
}
.center { text-align: center !important; }


/* ===================================================
   SCROLL-TO-TOP
   =================================================== */
.btn-scroll-to-top {
  background: var(--clr-accent) !important; color: var(--clr-white) !important;
  border-radius: 50% !important; width: 44px !important; height: 44px !important;
  line-height: 44px !important; box-shadow: 0 4px 14px rgba(255,107,53,0.38) !important;
  transition: all var(--speed) var(--ease) !important;
}
.btn-scroll-to-top:hover { background: var(--clr-accent-dark) !important; transform: translateY(-3px) !important; color: var(--clr-white) !important; }


/* ===================================================
   FOOTER
   =================================================== */
#page-footer { background: var(--clr-primary) !important; display: block !important; color: rgba(255,255,255,0.75) !important; }
#footer-content { padding: 60px 0 40px !important; background: var(--clr-primary) !important; position: relative !important; }
#footer-content > .background { display: none !important; }
#footer-content h4 {
  color: var(--clr-white) !important; font-size: 13px !important; font-weight: 700 !important;
  letter-spacing: 0.7px !important; text-transform: uppercase !important;
  margin-bottom: 18px !important; padding-bottom: 10px !important;
  border-bottom: 2px solid var(--clr-accent) !important; display: inline-block !important;
}
#footer-content address { color: rgba(255,255,255,0.62) !important; font-size: 13px !important; line-height: 2 !important; }
#footer-content address strong { color: var(--clr-white) !important; font-size: 14px !important; display: block !important; margin-bottom: 6px !important; }
#footer-content address a { color: var(--clr-accent) !important; }
#footer-content address a:hover { color: var(--clr-white) !important; }
#footer-content abbr { color: rgba(255,255,255,0.45) !important; border-bottom: 1px dotted rgba(255,255,255,0.2) !important; }
#footer-content ul.list-links { color: transparent !important; }
#footer-content ul.list-links li { padding: 0 !important; }
#footer-content ul.list-links li a {
  color: rgba(255,255,255,0.62) !important; font-size: 13px !important; font-weight: 400 !important;
  padding: 5px 0 !important; display: flex !important; align-items: center !important; gap: 8px !important;
  left: 0 !important; transition: all var(--speed) var(--ease) !important;
}
#footer-content ul.list-links li a::before { content: '→' !important; color: var(--clr-accent) !important; font-size: 12px !important; flex-shrink: 0 !important; }
#footer-content ul.list-links li a:hover { color: var(--clr-white) !important; padding-left: 4px !important; }
#footer-content p { color: rgba(255,255,255,0.56) !important; font-size: 13px !important; line-height: 1.8 !important; }
#footer-content .logo { position: relative !important; display: block !important; }
#footer-content .logo img { max-width: 100% !important; height: auto !important; position: static !important; display: block !important; margin-bottom: 20px !important; }
#footer-bottom { background: rgba(0,0,0,0.3) !important; padding: 16px 0 !important; border-top: 1px solid rgba(255,255,255,0.07) !important; }
#footer-bottom .copyright { color: rgba(255,255,255,0.45) !important; font-size: 12.5px !important; }
#footer-bottom .copyright a { color: var(--clr-accent) !important; font-weight: 600 !important; }
#footer-bottom .copyright a:hover { color: var(--clr-white) !important; }


/* ===================================================
   HOME HERO — CTA PANEL (replaces volunteer form)
   =================================================== */
.hero-cta-panel {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  height: 100% !important;
  padding: 36px 32px 32px !important;
  color: var(--clr-white) !important;
}
.hero-cta-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: rgba(255,107,53,0.18) !important;
  border: 1px solid rgba(255,107,53,0.45) !important;
  color: var(--clr-accent) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  padding: 5px 14px !important;
  border-radius: 50px !important;
  margin-bottom: 18px !important;
  width: fit-content !important;
}
.hero-cta-title {
  font-size: 34px !important;
  font-weight: 700 !important;
  color: var(--clr-white) !important;
  line-height: 1.2 !important;
  margin-bottom: 14px !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.22) !important;
}
.hero-cta-title::after { display: none !important; }
.hero-cta-subtitle {
  font-size: 14px !important;
  color: rgba(255,255,255,0.82) !important;
  line-height: 1.7 !important;
  margin-bottom: 26px !important;
  font-weight: 400 !important;
  max-width: 400px !important;
}
.hero-cta-buttons {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 32px !important;
}
.btn-hero-primary,
.btn-hero-secondary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 24px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all var(--speed) var(--ease) !important;
  border: none !important;
  cursor: pointer !important;
}
.btn-hero-primary {
  background: var(--clr-accent) !important;
  color: var(--clr-white) !important;
  box-shadow: 0 4px 18px rgba(255,107,53,0.42) !important;
}
.btn-hero-primary:hover {
  background: var(--clr-accent-dark) !important;
  color: var(--clr-white) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(255,107,53,0.52) !important;
  text-decoration: none !important;
}
.btn-hero-secondary {
  background: rgba(255,255,255,0.12) !important;
  color: var(--clr-white) !important;
  border: 1.5px solid rgba(255,255,255,0.4) !important;
  backdrop-filter: blur(6px) !important;
}
.btn-hero-secondary:hover {
  background: rgba(255,255,255,0.24) !important;
  color: var(--clr-white) !important;
  border-color: rgba(255,255,255,0.7) !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
}
.hero-stats {
  display: flex !important;
  gap: 28px !important;
  border-top: 1px solid rgba(255,255,255,0.18) !important;
  padding-top: 20px !important;
}
.hero-stat-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}
.hero-stat-num {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--clr-white) !important;
  line-height: 1 !important;
  margin-bottom: 3px !important;
}
.hero-stat-label {
  font-size: 11px !important;
  color: rgba(255,255,255,0.62) !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}


/* ===================================================
   REGISTER VOLUNTEER PAGE
   =================================================== */
#register-volunteer-page {
  background: var(--clr-white) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 36px 32px !important;
  margin-bottom: 24px !important;
}
#register-volunteer-page > header h1 {
  font-size: 26px !important;
  margin-bottom: 6px !important;
}
.volunteer-reg-intro {
  background: linear-gradient(135deg, rgba(10,36,99,0.05), rgba(255,107,53,0.05)) !important;
  border-left: 4px solid var(--clr-accent) !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
  padding: 14px 18px !important;
  margin-bottom: 28px !important;
}
.volunteer-reg-intro p {
  margin: 0 !important;
  font-size: 14px !important;
  color: var(--clr-muted) !important;
  line-height: 1.7 !important;
}
.volunteer-reg-form .input-group {
  margin-bottom: 18px !important;
}
.volunteer-reg-form label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--clr-text) !important;
  margin-bottom: 6px !important;
  display: block !important;
}
.volunteer-reg-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 8px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--clr-border) !important;
}
.vol-terms-note {
  font-size: 12.5px !important;
  color: var(--clr-muted) !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 !important;
}
.vol-terms-note i { color: var(--clr-primary) !important; }
.vol-submit-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 11px 26px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: var(--radius-sm) !important;
  background: var(--clr-primary) !important;
  color: var(--clr-white) !important;
  border: none !important;
  cursor: pointer !important;
  transition: all var(--speed) var(--ease) !important;
  box-shadow: 0 4px 14px rgba(10,36,99,0.28) !important;
}
.vol-submit-btn:hover {
  background: var(--clr-primary-light) !important;
  transform: translateY(-2px) !important;
  color: var(--clr-white) !important;
  box-shadow: 0 8px 22px rgba(10,36,99,0.36) !important;
}

/* Why Volunteer sidebar card */
.vol-why-card,
.vol-login-card {
  background: var(--clr-white) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 22px 20px !important;
  margin-bottom: 20px !important;
  border: 1px solid var(--clr-border) !important;
}
.vol-why-card header h2,
.vol-login-card header h2 {
  font-size: 15px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}
.vol-why-card header h2::after,
.vol-login-card header h2::after { display: none !important; }
.vol-why-card header h2 i { color: var(--clr-accent) !important; }
.vol-login-card header h2 i { color: var(--clr-primary) !important; }
.vol-benefits-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.vol-benefits-list li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-size: 13px !important;
  color: var(--clr-text) !important;
  padding: 6px 0 !important;
  border-bottom: 1px solid var(--clr-border) !important;
}
.vol-benefits-list li:last-child { border-bottom: none !important; }
.vol-benefits-list li i { color: #22c55e !important; margin-top: 2px !important; flex-shrink: 0 !important; }
.vol-login-card p {
  font-size: 13px !important;
  color: var(--clr-muted) !important;
  margin-bottom: 14px !important;
}
.vol-login-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  justify-content: center !important;
  padding: 10px 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: var(--radius-sm) !important;
  background: var(--clr-primary) !important;
  color: var(--clr-white) !important;
  text-decoration: none !important;
  transition: all var(--speed) var(--ease) !important;
}
.vol-login-btn:hover {
  background: var(--clr-primary-light) !important;
  color: var(--clr-white) !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
}


/* ===================================================
   VANILLABOX — Lightbox fixes & modernizing
   =================================================== */
.vnbx-mask {
  background: rgba(7, 29, 82, 0.9) !important; /* Deep blue translucent mask */
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 99999 !important;
}

.vnbx-frame {
  z-index: 100000 !important;
  padding-top: 40px !important;
}

.vnbx-container {
  background: var(--clr-white) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 4px solid var(--clr-white) !important;
  overflow: visible !important;
}

/* Close button - force visibility and modernize */
.vnbx-close {
  background-color: var(--clr-accent) !important;
  background-image: none !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  right: -20px !important;
  top: -20px !important;
  box-shadow: var(--shadow-md) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 100001 !important;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease) !important;
}

.vnbx-close::before {
  content: '\f00d' !important; /* FontAwesome times icon */
  font-family: 'FontAwesome' !important;
  color: var(--clr-white) !important;
  font-size: 20px !important;
  display: block !important;
}

.vnbx-close:hover {
  background-color: var(--clr-accent-dark) !important;
  transform: scale(1.1) rotate(90deg) !important;
}

/* Prev/Next buttons */
.vnbx-prev, .vnbx-next {
  background-color: rgba(255,255,255,0.15) !important;
  background-image: none !important;
  backdrop-filter: blur(4px) !important;
  border-radius: 50% !important;
  width: 54px !important;
  height: 54px !important;
  top: 50% !important;
  margin-top: -27px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 100001 !important;
  transition: all 0.3s var(--ease) !important;
}

.vnbx-prev:hover, .vnbx-next:hover {
  background-color: var(--clr-accent) !important;
  transform: scale(1.1) !important;
}

.vnbx-prev::before {
  content: '\f104' !important;
  font-family: 'FontAwesome' !important;
  color: var(--clr-white) !important;
  font-size: 28px !important;
}

.vnbx-next::before {
  content: '\f105' !important;
  font-family: 'FontAwesome' !important;
  color: var(--clr-white) !important;
  font-size: 28px !important;
}

.vnbx-prev { left: -70px !important; }
.vnbx-next { right: -70px !important; }

@media (max-width: 991px) {
  .vnbx-prev { left: -30px !important; }
  .vnbx-next { right: -30px !important; }
}

@media (max-width: 767px) {
  .vnbx-prev { left: 10px !important; background-color: rgba(0,0,0,0.4) !important; }
  .vnbx-next { right: 10px !important; background-color: rgba(0,0,0,0.4) !important; }
  .vnbx-close { right: 0 !important; top: -40px !important; }
}


/* ===================================================
   SELECTIZE MODERNIZATION
   =================================================== */
.selectize-control {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  width: 100% !important;
  position: relative !important;
}

.selectize-control.single .selectize-input,
.selectize-control.single .selectize-input.input-active {
  background: var(--clr-white) !important;
  border: 1.5px solid var(--clr-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0 15px !important; /* Changed to 0 vertical for flex centering */
  box-shadow: none !important;
  transition: all var(--speed) var(--ease) !important;
  line-height: 1 !important;
  height: 44px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
}

.selectize-control.single .selectize-input.focus {
  border-color: var(--clr-primary) !important;
  box-shadow: 0 0 0 3px rgba(10,36,99,0.08) !important;
}

.selectize-control.single .selectize-input::after {
  content: '\f107' !important; /* FontAwesome chevron down */
  font-family: 'FontAwesome' !important;
  border: none !important;
  width: auto !important;
  height: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  right: 15px !important;
  font-size: 14px !important;
  color: var(--clr-muted) !important;
  transition: transform 0.3s ease !important;
  background: none !important;
}

.selectize-control.single .selectize-input.dropdown-active::after {
  transform: translateY(-50%) rotate(180deg) !important;
  color: var(--clr-primary) !important;
}
.selectize-control.single .selectize-input.dropdown-active {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.selectize-dropdown {
  border: 1px solid var(--clr-border) !important;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important;
  border-top: none !important;
  box-shadow: var(--shadow-lg) !important;
  top: 100% !important;
  margin-top: -2px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  overflow: hidden !important;
  z-index: 2000 !important;
  animation: selectizeSlide 0.25s ease-out !important;
}

@keyframes selectizeSlide {
  from { opacity: 0; transform: translateY(0); }
  to { opacity: 1; transform: translateY(0); }
}

.selectize-dropdown [data-selectable] {
  padding: 11px 16px !important;
  font-size: 13.5px !important;
  color: var(--clr-text) !important;
  transition: all 0.2s ease !important;
  border-bottom: 1px solid rgba(0,0,0,0.03) !important;
}

.selectize-dropdown [data-selectable]:last-child {
  border-bottom: none !important;
}

.selectize-dropdown .active {
  background-color: var(--clr-primary) !important;
  color: var(--clr-white) !important;
}

.selectize-dropdown-content {
  padding: 0 !important;
}

.selectize-input input {
  font-family: 'Poppins', sans-serif !important;
  color: var(--clr-text) !important;
  font-size: 13.5px !important;
}

.selectize-input.has-items input {
  display: none !important;
}

/* Placeholder styling */
.selectize-input.empty ::placeholder {
  color: var(--clr-muted) !important;
  opacity: 0.7 !important;
}

/* Fix for the dropdown alignment in event-search */
#event-search .selectize-control {
  margin-bottom: 0 !important;
}