#nav-brand-bar a { color: var(--site-base-800); text-decoration: none; }
#nav-brand-bar a:hover { color: var(--site-dark); }

.panel-rsc a { color: var(--site-base-800); text-decoration: none; }
.panel-rsc a:hover { color: var(--site-dark); }


.navbar-nav div.carousel-item a.dropdown-item:active {
  background-color: var(--bs-gray-200, inherit);
}

.navbar-nav a.nav-link.active {
  color: var(--bs-sage) !important;
  border-radius: 6px 6px 0 0;
  border-bottom-width: 2px;
  border-bottom-color: var(--bs-sage) !important;
}

.navbar-nav a.nav-link:hover {
  border-color: var(--bs-gray-200, inherit);
}

.navbar-nav a.nav-link-circle-button {
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bs-gray-800, inherit);
  background-color: var(--bs-gray-200, inherit);
  border: 1px solid var(--bs-gray-500);
  font-family: sans-serif !important;
}

.navbar-nav a.nav-link-circle-button:hover {
  color: var(--bs-gray-800, inherit) !important;
  background-color: var(--bs-gray-150, inherit);
  border: 1px solid var(--site-base-500);
}

.navbar-nav a.nav-link-circle-button-user {
  color: var(--bs-white, inherit);
  background-color: var(--site-base-500, inherit);
  border: none;
}

.navbar-nav a.nav-link-circle-button-user:hover {
  color: var(--bs-white) !important;
  background-color: var(--site-base-300, inherit);
  border: none;
}

/* used for the sponsor -> student detail menu header */
.circle-initials {
  width: 125px;
  height: 125px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--bs-sage, #FFB700);
  color: var(--bs-white, #fff);
  font-size: 2rem;
  font-weight: 600;
  font-family: sans-serif;
  border: none;
  text-transform: uppercase;
}

.circle-initials:hover {
  background-color: var(--bs-sage-hover, #FFCB48);
  color: var(--bs-white, #fff);
}

/* student profile section */
.text-bg-sage {
  color: var(--bs-white) !important;
  background-color: var(--bs-sage) !important;
}

/* avatar + upload button live in _student_login.css */

/* optional list item padding */
.list-group-item {
  padding: .875rem 1rem;
}

/* make cards column-fillers with footer pinned to bottom */
.dashboard-cards .card.h-100 {
  display: flex;
  flex-direction: column;
}

.dashboard-cards .card>.list-group-flush {
  flex: 1 1 auto;
}

/* lets list grow in the middle */

/* scope just to the dashboard fasttrak card */
.dashboard-cards .fasttrak-card .progress {
  height: 22px;
}

.dashboard-cards .fasttrak-card .progress-bar {
  font-size: 0.85rem;
  font-weight: 600;
}

.dashboard-cards .rewards-card .balance {
  font-size: 2rem;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: .2px;
}

.dashboard-cards .rewards-card .label {
  color: var(--bs-secondary-color);
}

@media (max-width: 575.98px) {
  .dashboard-cards .rewards-card .cta-col {
    margin-top: .75rem;
  }
}

.majors-page .card-body {
  padding-left: 2rem;
  padding-right: 2rem;
}

.majors-page .section-title {
  color: var(--bs-royal, #0276b1);
  font-weight: 600;
}

.majors-page .form-label.small {
  font-weight: 600;
  color: var(--bs-gray-700);
}

.majors-page .input-group-text {
  background: var(--bs-gray-100);
}

.majors-page .summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.majors-page .chip {
  background: var(--bs-gray-100);
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  padding: .25rem .5rem;
  font-size: .875rem;
}

.majors-page .divider {
  border-top: 1px solid var(--bs-border-color);
  margin: 1rem 0 1.5rem;
}

.majors-page .sticky-save .container {
  padding-left: 0;
  padding-right: 0;
}

/* optional: align badge with label on narrow screens */
@media (max-width: 576px) {
  .majors-page .float-end {
    float: none !important;
    display: block;
    margin-top: .25rem;
  }
}


#main-nav .dropdown-menu,
#ham-nav .dropdown-menu {
  width: 275px;
}

#ham-nav .dropdown-menu {
  width: 325px;
  right: 15px !important;
}

#ham-nav button.hamburger {
  padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
  border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
  border-radius: var(--bs-navbar-toggler-border-radius);
}

#ham-nav button.hamburger:focus {
  box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width);
}

.btn-hamburger-2026 {
  background-color: var(--site-dark);
  border: none;
  border-radius: 7px;
  width: 42px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bs-white);
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(var(--site-dark-rgb), 0.3);
}

.btn-hamburger-2026:hover {
  background-color: var(--site-base-500);
  box-shadow: 0 4px 12px rgba(var(--site-base-500-rgb), 0.4);
  color: var(--bs-white);
}

.btn-hamburger-2026:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--site-base-500-rgb), 0.3);
}

@media screen and (max-width:400px) {
  #ham-nav .dropdown-menu {
    width: 90%;
  }
}

.carousel a.dropdown-item,
#main-nav a.dropdown-item {
  border: 1px solid white;
  padding-top: .5rem !important;
}

.carousel a.dropdown-item:hover,
#main-nav a.dropdown-item:hover {
  color: var(--bs-sage) !important;
}

.carousel-item div.dropdown-item:hover {
  color: var(--bs-sage) !important;
}

.carousel a.dropdown-item.active,
#main-nav a.dropdown-item.active,
.carousel-item div.dropdown-item.active {
  color: var(--bs-sage) !important;
  background-color: var(--bs-gray-100);
}

li.nav-item.dropdown a.nav-link.dropdown-toggle:active,
div.dropdown-item:active {
  background-color: var(--bs-gray-100);
}

.fa-nav {
  font-size: 1.25rem !important;
}

.btn-circle {
  border-radius: 50% !important;
  aspect-ratio: 2.5/1;
}

/* unscoped so the same buttons work in the navbar AND page bodies (home hero, login).
   Must stay in this file: it loads after _nav-footer, whose .navbar-nav a rule would
   otherwise override font-weight inside the nav. */
a.btn-nav {
  color: var(--bs-white);
  transition: all 0.2s ease;
  align-content: center;
  text-align: center;
  height: auto;
  display: inline-block;
  min-width: 110px;
}

a.btn-nav-get-started {
  background: var(--site-base-500);
  border: 1px solid var(--site-base-600);
  box-shadow: 0 4px 14px rgba(var(--site-base-500-rgb), 0.32);
}

a.btn-nav-get-started:hover {
  background: var(--site-base-600);
  border: 1px solid var(--site-base-700);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(var(--site-base-500-rgb), 0.42);
}

a.btn-nav-login {
  background: var(--site-sage-500);
  border: 1px solid var(--site-sage-600);
  box-shadow: 0 2px 8px rgba(9, 161, 228, 0.35);
}

a.btn-nav-login:hover {
  background: var(--site-sage-600);
  box-shadow: 0 4px 12px rgba(9, 161, 228, 0.45);
  transform: translateY(-2px);
}

a.btn-nav-logout {
  background: var(--site-logout);
  box-shadow: 0 2px 8px rgba(255, 77, 0, 0.35);
}

a.btn-nav-logout:hover {
  background: var(--site-logout-hover);
  box-shadow: 0 4px 12px rgba(255, 77, 0, 0.45);
  transform: translateY(-1px);
}
