/* ============================================================
   HEADER (sticky, floats over the hero)
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;
  transition: transform var(--anim-speed) ease;
}
/* Scrolled: slide the whole header up by the topbar height so the topbar
   moves off screen and the menu bar sits at the top. Pure transform, no reflow. */
.site-header.scrolled { transform: translateY(calc(-1 * var(--topbar-height))); }

/* ---------- Topbar ---------- */
.topbar {
  background: var(--uaa-green-dark);
  color: var(--bs-white);
  height: var(--topbar-height);
  border-bottom: var(--bs-border-width) solid rgba(var(--bs-white-rgb, 255, 255, 255), .3);
}

.topbar-inner {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  height: 100%;
}
.topbar-nav > li { position: relative; display: flex; align-items: center; height: 100%; }
/* 15px vertical divider, centered, only between touching buttons (not at either end) */
.topbar-nav > li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 15px;
  background: rgba(var(--bs-white-rgb, 255, 255, 255), .6);
}
.topbar-nav a {
  color: rgba(var(--bs-white-rgb, 255, 255, 255), .9);
  font-size: var(--topbar-font-size);
  font-weight: var(--bs-body-font-weight, 400);
  padding: 0 .7rem;
  height: 100%;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  transition: color var(--anim-speed) ease;
  white-space: nowrap;
}
.topbar-nav a:hover { color: var(--uaa-gold); }
.topbar-nav .fa-solid { font-size: .95rem; }
/* The topbar stays UAA green, but its menu uses the active theme's
   dropdown surface, border, radius, typography, and shadow. */
.topbar .dropdown-menu {
  font-size: .85rem;
  box-shadow: var(--bs-dropdown-box-shadow, var(--bs-box-shadow));
}

/* Direct top-level main-menu parent links only.
 * Dropdown items, submenu toggles, backgrounds, spacing, and other menu elements are intentionally excluded.
 */
#siteHeader .mainbar.menu-light #mainMenu > .nav-item > .nav-link,
#siteHeader .mainbar.menu-light #mainMenu > .nav-item > .nav-link:hover,
#siteHeader .mainbar.menu-light #mainMenu > .nav-item > .nav-link:focus,
#siteHeader .mainbar.menu-light #mainMenu > .nav-item > .nav-link:focus-visible,
#siteHeader .mainbar.menu-light #mainMenu > .nav-item > .nav-link.active {
  color: var(--bs-white) !important;
}

#siteHeader .mainbar.menu-dark #mainMenu > .nav-item > .nav-link,
#siteHeader .mainbar.menu-dark #mainMenu > .nav-item > .nav-link:hover,
#siteHeader .mainbar.menu-dark #mainMenu > .nav-item > .nav-link:focus,
#siteHeader .mainbar.menu-dark #mainMenu > .nav-item > .nav-link:focus-visible,
#siteHeader .mainbar.menu-dark #mainMenu > .nav-item > .nav-link.active {
  color: var(--bs-black) !important;
}


/* ---------- Main bar ---------- */
.mainbar {
  border-bottom: var(--bs-border-width) solid rgba(var(--bs-white-rgb, 255, 255, 255), .3);
  transition: background var(--anim-speed) ease, box-shadow var(--anim-speed) ease, color var(--anim-speed) ease;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Menu foreground and menu background are separate slide options.
   - menu-light: light logo/text
   - menu-dark: dark logo/text
   - menu-background-none: transparent
   - menu-background: frosted backing appropriate to the foreground
   The scrolled header is always dark text on the themed frosted surface. */
.mainbar.menu-light,
.mainbar.menu-white {
  color: var(--bs-white);
  border-bottom-color: rgba(var(--bs-white-rgb, 255, 255, 255), .3);
}
.mainbar.menu-dark {
  color: var(--bs-body-color);
  border-bottom-color: var(--bs-border-color-translucent);
}
.mainbar.menu-background-none {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.mainbar.menu-background.menu-light,
.mainbar.menu-background.menu-white {
  background: rgba(var(--uaa-hero-black-rgb), .72);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  backdrop-filter: blur(12px) saturate(115%);
}
.mainbar.menu-background.menu-dark {
  background: rgba(var(--bs-body-bg-rgb, 255, 255, 255), .7);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  backdrop-filter: blur(12px) saturate(115%);
}
.site-header.scrolled .mainbar { box-shadow: var(--bs-box-shadow); }

/* Left keeps the normal gutter; right is 0 so the Search button reaches
   the page edge and ignores the container padding. */
.mainbar-container { padding-left: 1rem; padding-right: 0; }
@media (min-width: 992px) { .mainbar-container { padding-left: 1.5rem; } }

.mainbar-inner {
  height: var(--mainbar-height);
  display: flex;
  align-items: stretch;
}

.mainbar-logo {
  display: flex;
  align-items: center;
  padding-right: 1.5rem;
  flex-shrink: 0;
}
/* Each size group holds a white + dark variant. The white one stays in flow
   to size the box; the dark one is layered on top and crossfades in. */
.logo-group { position: relative; display: block; }
.logo-group .logo-img { display: block; width: auto; transition: opacity var(--anim-speed) ease; }
.logo-group .logo-dark { position: absolute; top: 0; left: 0; }
.mainbar:is(.menu-light, .menu-white) .logo-white { opacity: 1; }
.mainbar:is(.menu-light, .menu-white) .logo-dark  { opacity: 0; }
.mainbar.menu-dark  .logo-white { opacity: 0; }
.mainbar.menu-dark  .logo-dark  { opacity: 1; }
/* Dark Bootstrap themes need the reverse logo even in the scrolled state. */
.mainbar.menu-dark.theme-surface-dark .logo-white { opacity: 1; }
.mainbar.menu-dark.theme-surface-dark .logo-dark  { opacity: 0; }

.logo-lg .logo-img { height: 50px; }
.logo-sm { display: none; }              /* small logos hidden on desktop */
.logo-sm .logo-img { height: 44px; }

.mainbar-toggler {
  background: transparent;
  border: var(--bs-border-width) solid rgba(var(--bs-white-rgb, 255, 255, 255), .6);
  color: var(--bs-white);
  border-radius: var(--bs-btn-border-radius, var(--bs-border-radius));
  padding: .35rem .6rem;
  margin: auto 0;
  margin-left: auto;
  font-size: 1.1rem;
  cursor: pointer;
}
.mainbar.menu-dark .mainbar-toggler {
  color: var(--bs-body-color);
  background: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
}
.mainbar-toggler:focus-visible {
  outline: 0;
  box-shadow: var(--bs-focus-ring-box-shadow, 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25));
}

.mainbar-collapse {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  justify-content: flex-end;
}

/* Main menu (dropdowns) */
.mainmenu {
  display: flex;
  align-items: center;
  gap: .1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  height: 100%;
}
.mainmenu > li { height: 100%; display: flex; align-items: center; }
.mainmenu > li > a {
  font-weight: var(--bs-body-font-weight, 400);
  font-size: var(--menu-font-size);
  padding: 0 .95rem;
  height: 100%;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  position: relative;
  color: inherit;                 /* follows the bar style (white or dark) */
  transition: color var(--anim-speed) ease;
}
.mainbar:is(.menu-light, .menu-white) .mainmenu > li > a:hover { color: var(--uaa-gold); }
.mainbar.menu-dark  .mainmenu > li > a:hover { color: var(--bs-link-hover-color); }
/* Only the first row of disclosure arrows follows the hero-facing menu state.
   Nested dropdown arrows use Bootstrap dropdown colors. */
.mainbar:is(.menu-light, .menu-white) .mainmenu > .dropdown > .menu-submenu-toggle::after {
  color: var(--bs-white);
}
.mainbar.menu-dark .mainmenu > .dropdown > .menu-submenu-toggle::after {
  color: var(--bs-primary);
}
.mainmenu .dropdown-menu {
  /* Keep the UAA gold cue but inherit the active theme's surface, border,
     radius, item states, and overall component character. */
  border-top: 3px solid var(--uaa-gold);
  box-shadow: var(--bs-dropdown-box-shadow, var(--bs-box-shadow));
  margin-top: 0;
}
.mainmenu .dropdown-item {
  font-size: var(--bs-dropdown-font-size, .9rem);
  padding: var(--bs-dropdown-item-padding-y, .5rem) var(--bs-dropdown-item-padding-x, 1.1rem);
}

/* Full-height Search button, flush to the right edge of the page.
   Not animated: FontAwesome glyph color doesn't transition in step with the text,
   so we keep the whole button instant to avoid a mismatch. */
.search-btn {
  background: rgba(var(--bs-white-rgb, 255, 255, 255), .3);
  font-weight: var(--bs-body-font-weight, 400);
  font-size: var(--menu-font-size);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: 0 1.6rem;
  height: 100%;
  flex-shrink: 0;
  transition: none;
  border-left: var(--bs-border-width) solid rgba(var(--bs-primary-rgb), .4);
}
/* Transparent menu: all white (text + icon) */
.mainbar:is(.menu-light, .menu-white) .search-btn,
.mainbar:is(.menu-light, .menu-white) .search-btn i { color: var(--bs-white); }
/* White-background menu: black text, green icon, white 30% line */
.mainbar.menu-dark  .search-btn {
  color: var(--bs-body-color);
  background: var(--bs-tertiary-bg);
  border-left-color: var(--bs-border-color);
}
.mainbar.menu-dark  .search-btn i { color: var(--bs-primary); }
/* A slide can request dark text without the frosted menu backing. In that
   state the search button and mobile toggle also remain transparent. */
.mainbar.menu-dark.menu-background-none .search-btn {
  background: transparent;
  border-left-color: rgba(var(--uaa-hero-black-rgb), .24);
}
.mainbar.menu-dark.menu-background-none .mainbar-toggler {
  background: transparent;
  border-color: rgba(var(--uaa-hero-black-rgb), .35);
}
/* Hover: transparent menu stays UAA gold; themed surface uses the theme's
   hover color and secondary surface. */
.mainbar:is(.menu-light, .menu-white) .search-btn:hover,
.mainbar:is(.menu-light, .menu-white) .search-btn:hover i { color: var(--uaa-gold); }
.mainbar.menu-dark  .search-btn:hover {
  color: var(--bs-link-hover-color);
  background: var(--bs-secondary-bg);
}