/* ============================================================
   HERO SLIDER
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
}
.hero .carousel,
.hero .carousel-inner,
.hero .carousel-item { height: 100%; }

/* A steady dark underlay sits behind the slides while images load and during
   the initial page reveal. Slide transitions never expose it: the wipe reveals
   the incoming slide over a still fully opaque outgoing slide. */
.hero .carousel-inner {
  background-color: var(--uaa-hero-black);
}

/* Bootstrap still owns slide state, cycling, and controls. While the GSAP
   step wipe runs, both participating items are held fully opaque: the
   transition is occlusion (a clip-path on the incoming item), not fading.
   The transition-duration below never animates anything visible; it only
   tells Bootstrap when to fire slid.bs.carousel, so JavaScript sets it to
   outlast the wipe. Without GSAP the mode class is absent and Bootstrap's
   stock fade takes over as the fallback. */
.hero .carousel-fade.hero-wipe-enabled .carousel-item {
  opacity: 1 !important;
  transition-property: opacity;
  transition-duration: var(--hero-transition-duration, 1.15s);
  transition-delay: 0s;
}

/* Reduced motion: JavaScript skips the wipe and the parallax entrance, and
   the remaining stock crossfade is capped to a brief, quiet fade. */
@media (prefers-reduced-motion: reduce) {
  .hero .carousel-fade .carousel-item {
    transition-duration: .3s !important;
    transition-delay: 0s !important;
  }
}

/* The gold rule tracing the stepped reveal edge. JavaScript positions the two
   segments each frame during a wipe; everything here is presentation only. */
.hero-wipe-edge {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}
.hero-wipe-edge-top,
.hero-wipe-edge-bottom {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--uaa-gold);
  will-change: transform;
}
.hero-wipe-edge-top { height: 35%; }
.hero-wipe-edge-bottom {
  top: 35%;
  bottom: 0;
  height: auto;
}

.hero-slide {
  --hero-background-y: center;
  position: relative;
  height: 90vh;
  min-height: 560px;
  background-size: cover;
  background-position: center var(--hero-background-y);
  background-repeat: no-repeat;
}

/* field_background_alignment. All regular and layered hero artwork defaults
   to vertical center. "middle" is accepted as an alias for "center" so the
   template can match either Drupal list-key convention. */
.hero-slide.background-align-top { --hero-background-y: top; }
.hero-slide.background-align-center,
.hero-slide.background-align-middle { --hero-background-y: center; }
.hero-slide.background-align-bottom { --hero-background-y: bottom; }
.hero-slide-program-finder { min-height: 760px; }

/* Every hero uses the same parallax scene. A basic slide contains only the
   base image and callout. A composite slide adds the optional middle and top
   images without changing templates or animation code.

   All parallax targets begin together and finish together. Their data-depth
   changes horizontal travel only, producing different velocities in one shared
   duration. The hero frame remains clipped while each image layer receives
   enough internal vertical canvas for scroll movement. */
.hero-slide-parallax {
  overflow: hidden;
  isolation: isolate;
  background-image: none !important;
}
.hero-slide-parallax::after { display: none; }
.hero-slide.background-halign-left .hero-layer { background-position-x: left; }
.hero-slide.background-halign-center .hero-layer { background-position-x: center; }
.hero-slide.background-halign-right .hero-layer { background-position-x: right; }
/*
 * The hero frame remains clipped, but each image layer receives a taller
 * internal painting canvas. This reveals the portions of tall artwork that
 * would otherwise be cut off when GSAP moves a layer upward. The two custom
 * properties are calculated from scrollDistance and the deepest image layer.
 *
 * Distributing the extra canvas by vertical alignment preserves the original
 * natural stack position at y:0:
 *   top    -> all extra canvas below
 *   center -> half above and half below
 *   bottom -> all extra canvas above
 */
.hero-slide-parallax {
  --hero-layer-bleed-full: -360px;
  --hero-layer-bleed-half: -180px;
}
.hero-slide-parallax.background-align-top .hero-layer {
  top: 0;
  bottom: var(--hero-layer-bleed-full);
}
.hero-slide-parallax.background-align-center .hero-layer,
.hero-slide-parallax.background-align-middle .hero-layer {
  top: var(--hero-layer-bleed-half);
  bottom: var(--hero-layer-bleed-half);
}
.hero-slide-parallax.background-align-bottom .hero-layer {
  top: var(--hero-layer-bleed-full);
  bottom: 0;
}
.hero-slide-parallax .hero-layer {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  background-position: center var(--hero-background-y);
  background-repeat: no-repeat;
  /* Keep each image no wider than the slide. Its natural scaled height may
     extend above or below the hero, and background-position preserves the
     selected top/center/bottom vertical alignment. */
  background-size: 100% auto;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform, opacity;
}
.hero-slide-parallax .hero-layer-base { z-index: 0; }

/* Bottom-to-top visual order:
   base image → optional middle image → interactive callout → optional top image. */
.hero-slide-parallax .hero-layer-middle { z-index: 2; }
.hero-slide-parallax .hero-layer-foreground,
.hero-slide-parallax .hero-layer-top {
  z-index: 4;
  pointer-events: none;
  user-select: none;
}
/* The cover, positioning canvas, and callout are separate concerns.
   - .hero-callout-cover is optional and always fills the hero edge to edge.
   - .hero-caption is always the full positioning canvas.
   - .hero-box owns width, height, and paragraph layout only. */
.hero-callout-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--hero-callout-bg, transparent);
}

.hero-caption {
  --hero-callout-bg: transparent;
  --hero-callout-color: var(--bs-white);
  --hero-callout-accent: var(--bs-secondary);
  --hero-callout-space-y: 0rem;
  --hero-callout-space-x: 0rem;
  --hero-header-clearance: calc(var(--topbar-height) + var(--mainbar-height));
  --hero-edge-space-y: 2.5rem;
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  color: var(--hero-callout-color);
  padding:
    calc(var(--hero-header-clearance) + var(--hero-edge-space-y) + var(--hero-callout-space-y))
    calc(6% + var(--hero-callout-space-x))
    calc(var(--hero-edge-space-y) + var(--hero-callout-space-y));
}

/* Caption position is independent from callout layout. The position class
   places the entire hero-box; stacked/inline classes only arrange its content. */
.hero-caption.pos-top-left {
  align-items: flex-start;
  justify-content: flex-start;
}
.hero-caption.pos-top-center {
  align-items: flex-start;
  justify-content: center;
}
.hero-caption.pos-top-right {
  align-items: flex-start;
  justify-content: flex-end;
}
.hero-caption.pos-middle-left {
  align-items: center;
  justify-content: flex-start;
}
.hero-caption.pos-middle-center,
.hero-caption.pos-middle {
  align-items: center;
  justify-content: center;
}
.hero-caption.pos-middle-right {
  align-items: center;
  justify-content: flex-end;
}
.hero-caption.pos-bottom-left {
  align-items: flex-end;
  justify-content: flex-start;
}
.hero-caption.pos-bottom-center {
  align-items: flex-end;
  justify-content: center;
}
.hero-caption.pos-bottom-right {
  align-items: flex-end;
  justify-content: flex-end;
}

/* field_padding machine names.
   - Boxed callout: this spacing sits outside the callout background.
   - Full-cover overlay: there is no callout background box, so this spacing
     directly positions/insets the text within the full-screen overlay.
   The separate .hero-callout-cover always remains edge-to-edge. */
.hero-caption.padding-none {
  --hero-callout-space-y: 0rem;
  --hero-callout-space-x: 0rem;
}
.hero-caption.padding-normal {
  --hero-callout-space-y: 2rem;
  --hero-callout-space-x: 2.25rem;
}
.hero-caption.padding-large {
  --hero-callout-space-y: 3rem;
  --hero-callout-space-x: clamp(5rem, 7vw, 8rem);
}

/* A boxed callout with 100%/cover height reaches the top and bottom edges of
   the hero. Only the outer vertical inset is removed: the selected horizontal
   gutter, callout width, alignment, and inner content padding remain intact.
   A true full-hero overlay is already edge-to-edge and does not use this rule. */
.hero-caption.has-box-background:is(.callout-height-cover, .callout-height-100) {
  padding-top: 0;
  padding-bottom: 0;
}

/* A full-height boxed callout still positions its content within the visible
   hero below the fixed header. The background itself continues to reach the
   top edge behind the header; only the box's flex content area is offset. */
.hero-caption.has-box-background:is(.callout-height-cover, .callout-height-100)
  .hero-box:is(.height-cover, .height-100) {
  padding-top: var(--hero-header-clearance);
}

/* Standard hero background color and overlay treatment.
   `background` selects the color. `backgroundStyle` selects the shape.
   There is no hero `dark` option: black always uses --uaa-hero-black-rgb. */
.hero-caption.background-none,
.hero-callout-cover.background-none {
  --hero-background-rgb: 0, 0, 0;
  --hero-background-opacity: 0;
  --hero-callout-bg: transparent;
  --hero-callout-color: var(--bs-white);
  --hero-callout-accent: var(--bs-secondary);
}
.hero-caption.background-primary,
.hero-callout-cover.background-primary {
  --hero-background-rgb: var(--bs-primary-rgb);
  --hero-background-opacity: .75;
  --hero-callout-bg: rgba(var(--hero-background-rgb), var(--hero-background-opacity));
  --hero-callout-color: var(--bs-white);
  --hero-callout-accent: var(--bs-white);
}
.hero-caption.background-secondary,
.hero-callout-cover.background-secondary {
  --hero-background-rgb: var(--bs-secondary-rgb);
  --hero-background-opacity: .82;
  --hero-callout-bg: rgba(var(--hero-background-rgb), var(--hero-background-opacity));
  --hero-callout-color: var(--uaa-hero-black);
  --hero-callout-accent: var(--bs-primary);
}
.hero-caption.background-light,
.hero-callout-cover.background-light {
  --hero-background-rgb: var(--bs-light-rgb);
  --hero-background-opacity: .78;
  --hero-callout-bg: rgba(var(--hero-background-rgb), var(--hero-background-opacity));
  --hero-callout-color: var(--bs-primary);
  --hero-callout-accent: var(--bs-primary);
}
.hero-caption.background-black,
.hero-callout-cover.background-black {
  --hero-background-rgb: var(--uaa-hero-black-rgb);
  --hero-background-opacity: var(--uaa-image-overlay-opacity);
  --hero-callout-bg: rgba(var(--hero-background-rgb), var(--hero-background-opacity));
  --hero-callout-color: var(--bs-white);
  --hero-callout-accent: var(--bs-secondary);
}

/* `none` means the normal full overlay. The directional choices keep the
   selected background color strongest at the named edge or corner and fade
   it toward transparent across the hero. */
.hero-callout-cover.background-style-none {
  background: var(--hero-callout-bg);
}
.hero-callout-cover.background-style-bottom-right {
  background: linear-gradient(
    to top left,
    rgba(var(--hero-background-rgb), var(--hero-background-opacity)) 0%,
    rgba(var(--hero-background-rgb), calc(var(--hero-background-opacity) * .72)) 36%,
    rgba(var(--hero-background-rgb), 0) 78%
  );
}
.hero-callout-cover.background-style-top-right {
  background: linear-gradient(
    to bottom left,
    rgba(var(--hero-background-rgb), var(--hero-background-opacity)) 0%,
    rgba(var(--hero-background-rgb), calc(var(--hero-background-opacity) * .72)) 36%,
    rgba(var(--hero-background-rgb), 0) 78%
  );
}
.hero-callout-cover.background-style-bottom {
  background: linear-gradient(
    to top,
    rgba(var(--hero-background-rgb), var(--hero-background-opacity)) 0%,
    rgba(var(--hero-background-rgb), calc(var(--hero-background-opacity) * .72)) 38%,
    rgba(var(--hero-background-rgb), 0) 78%
  );
}
.hero-callout-cover.background-style-top {
  background: linear-gradient(
    to bottom,
    rgba(var(--hero-background-rgb), var(--hero-background-opacity)) 0%,
    rgba(var(--hero-background-rgb), calc(var(--hero-background-opacity) * .72)) 38%,
    rgba(var(--hero-background-rgb), 0) 78%
  );
}
.hero-callout-cover.background-style-left {
  background: linear-gradient(
    to right,
    rgba(var(--hero-background-rgb), var(--hero-background-opacity)) 0%,
    rgba(var(--hero-background-rgb), calc(var(--hero-background-opacity) * .72)) 40%,
    rgba(var(--hero-background-rgb), 0) 82%
  );
}
.hero-callout-cover.background-style-right {
  background: linear-gradient(
    to left,
    rgba(var(--hero-background-rgb), var(--hero-background-opacity)) 0%,
    rgba(var(--hero-background-rgb), calc(var(--hero-background-opacity) * .72)) 40%,
    rgba(var(--hero-background-rgb), 0) 82%
  );
}
.hero-callout-cover.background-style-top-left {
  background: linear-gradient(
    to bottom right,
    rgba(var(--hero-background-rgb), var(--hero-background-opacity)) 0%,
    rgba(var(--hero-background-rgb), calc(var(--hero-background-opacity) * .72)) 36%,
    rgba(var(--hero-background-rgb), 0) 78%
  );
}
.hero-callout-cover.background-style-bottom-left {
  background: linear-gradient(
    to top right,
    rgba(var(--hero-background-rgb), var(--hero-background-opacity)) 0%,
    rgba(var(--hero-background-rgb), calc(var(--hero-background-opacity) * .72)) 36%,
    rgba(var(--hero-background-rgb), 0) 78%
  );
}
.hero-callout-cover.background-style-blur {
  background: var(--hero-callout-bg);
  -webkit-backdrop-filter: blur(14px) saturate(.9);
  backdrop-filter: blur(14px) saturate(.9);
}
.hero-slide.hero-background-style-blur .hero-layer-base {
  filter: blur(5px) saturate(.85);
  background-size: 103% auto;
}

.hero-box {
  color: inherit;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: fit-content;
  max-width: 560px;
  min-width: 0;
  padding: 0;
}
.hero-box.hero-box-wide { max-width: 960px; }

/* The box background is only used when overlay=false. When overlay=true the
   sibling .hero-callout-cover owns the color and this box stays transparent. */
.hero-box::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;
  pointer-events: none;
  background: var(--hero-callout-bg);
  border-radius: var(--uaa-header-radius-lg);
  box-shadow: var(--uaa-header-shadow-lg);
}
.hero-caption.has-box-background:not(.background-none) .hero-box::before {
  display: block;
}

.hero-box-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  min-width: 0;
  gap: 1rem;
  padding: 0;
}

/* A boxed callout always keeps regular interior padding, regardless of the
   selected field_padding value. The field padding remains outside that box.
   Full-cover overlays do not use this interior padding because their field
   padding is already applied directly to the text through .hero-caption. */
.hero-caption.has-box-background:not(.background-none) .hero-box-inner {
  padding: 2rem 2.25rem;
}

/* field_width controls only the callout/text box. It never changes the full
   overlay size. */
.hero-box.width-auto { width: min(72vw, 35rem); max-width: 100%; }
.hero-box.width-25 { width: 25%; max-width: none; }
.hero-box.width-33 { width: 33.333333%; max-width: none; }
.hero-box.width-50 { width: 50%; max-width: none; }
.hero-box.width-75 { width: 75%; max-width: none; }
.hero-box.width-100 { width: 100%; max-width: none; }

/* field_height also controls only the callout/text box. Cover and 100 are
   aliases that stretch it through the padded caption area. */
.hero-box.height-auto { align-self: auto; }
.hero-box.height-cover,
.hero-box.height-100 {
  align-self: stretch;
  min-height: 100%;
}
.hero-caption.pos-top-left .hero-box:is(.height-cover, .height-100),
.hero-caption.pos-top-center .hero-box:is(.height-cover, .height-100),
.hero-caption.pos-top-right .hero-box:is(.height-cover, .height-100) {
  justify-content: flex-start;
}
.hero-caption.pos-middle-left .hero-box:is(.height-cover, .height-100),
.hero-caption.pos-middle-center .hero-box:is(.height-cover, .height-100),
.hero-caption.pos-middle .hero-box:is(.height-cover, .height-100),
.hero-caption.pos-middle-right .hero-box:is(.height-cover, .height-100) {
  justify-content: center;
}
.hero-caption.pos-bottom-left .hero-box:is(.height-cover, .height-100),
.hero-caption.pos-bottom-center .hero-box:is(.height-cover, .height-100),
.hero-caption.pos-bottom-right .hero-box:is(.height-cover, .height-100) {
  justify-content: flex-end;
}


/* Drupal callout layout machine names. The outer box handles placement and
   background sizing; the inner wrapper controls paragraph stacking. */
.hero-box.stacked_left,
.hero-box.inline_left {
  text-align: left;
}
.hero-box.stacked_center,
.hero-box.inline_center {
  text-align: center;
}
.hero-box.stacked_right,
.hero-box.inline_right {
  text-align: right;
}
.hero-box.stacked_left > .hero-box-inner,
.hero-box.stacked_center > .hero-box-inner,
.hero-box.stacked_right > .hero-box-inner {
  flex-direction: column;
}
.hero-box.stacked_left > .hero-box-inner { align-items: flex-start; }
.hero-box.stacked_center > .hero-box-inner { align-items: center; }
.hero-box.stacked_right > .hero-box-inner { align-items: flex-end; }
.hero-box.inline_left > .hero-box-inner,
.hero-box.inline_center > .hero-box-inner,
.hero-box.inline_right > .hero-box-inner {
  flex-direction: row;
  align-items: center;
}
.hero-box.inline_left > .hero-box-inner { justify-content: flex-start; }
.hero-box.inline_center > .hero-box-inner { justify-content: center; }
.hero-box.inline_right > .hero-box-inner { justify-content: flex-end; }
.hero-box.inline_left > .hero-box-inner > .paragraph,
.hero-box.inline_center > .hero-box-inner > .paragraph,
.hero-box.inline_right > .hero-box-inner > .paragraph {
  flex: 1 1 16rem;
}
.hero-box.inline_left > .hero-box-inner > .paragraph.button,
.hero-box.inline_center > .hero-box-inner > .paragraph.button,
.hero-box.inline_right > .hero-box-inner > .paragraph.button {
  flex: 0 0 auto;
}
.hero-box-inner > .paragraph {
  min-width: 0;
  margin: 0;
}
.hero-box-inner > .paragraph > :last-child { margin-bottom: 0; }

/* Hero editorial type system. Fitty is intentionally limited to the H1.
   Eyebrow, subtitle, body copy, and actions keep stable readable sizes. */
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: inherit;
  width: 100%;
  min-width: 0;
  gap: .65rem;
}

.hero-eyebrow {
  max-width: 52ch;
  margin: 0;
  color: var(--hero-callout-accent);
  font-size: clamp(.72rem, .7vw, .86rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* The padding lives outside this wrapper so Fitty measures a clean width. */
.hero-title-fit-boundary {
  width: 100%;
  min-width: 0;
  overflow: visible;
}
.hero-box.width-auto .hero-title-fit-boundary {
  width: 100%;
}
.hero-title-fit {
  display: inline-block;
  max-width: 100%;
  margin: 0;
  color: inherit;
  font-family: "Roboto Condensed", var(--bs-font-sans-serif);
  font-size: clamp(2.25rem, 6vw, 6.5rem);
  font-weight: 300;
  font-synthesis: none;
  line-height: .88;
  letter-spacing: -.035em;
  text-wrap: balance;
  text-transform: uppercase;
  white-space: normal;
}
.fitty-active .hero-title-fit {
  white-space: nowrap;
}

/* Hero title inline weight language:
   plain text = Light, <bold>/<b> = Bold, <strong> = Black.
   A literal <br> is the author-controlled line break. */
.hero-title-fit bold,
.hero-title-fit b,
.hero-title-fit strong {
  display: inline;
  color: inherit;
  font-family: inherit;
  font-style: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.hero-title-fit bold,
.hero-title-fit b {
  font-weight: 700;
}
.hero-title-fit strong {
  font-weight: 900;
}

.hero-title-rule {
  display: block;
  width: clamp(3.25rem, 7vw, 6.5rem);
  height: .28rem;
  margin: .05rem 0 .1rem;
  background: var(--hero-callout-accent);
}

.hero-subtitle {
  max-width: 44ch;
  margin: 0;
  color: var(--hero-callout-accent);
  font-size: clamp(.95rem, 1.35vw, 1.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.hero-body-copy {
  max-width: 48ch;
}
.hero-box p {
  margin: 0;
  color: inherit;
}
.hero-body-copy p {
  font-size: clamp(1rem, 1.05vw, 1.15rem);
  line-height: 1.5;
  opacity: .94;
}
.hero-body-copy .lead {
  font-size: clamp(1.1rem, 1.25vw, 1.3rem);
  line-height: 1.45;
}
.hero-caption.background-light .hero-eyebrow,
.hero-caption.background-light .hero-subtitle,
.hero-caption.background-secondary .hero-eyebrow,
.hero-caption.background-secondary .hero-subtitle {
  color: var(--bs-primary);
}
.hero-box .btn-gold {
  background: var(--bs-secondary);
  color: var(--bs-white);
  font-weight: 700;
  border: none;
  border-radius: var(--bs-btn-border-radius, var(--uaa-header-radius));
  padding: .6rem 1.5rem;
  box-shadow: var(--bs-btn-box-shadow, none);
}
.hero-box .btn-gold:hover {
  color: var(--bs-white);
  background: color-mix(in srgb, var(--bs-secondary) 85%, var(--bs-black));
}

/* Hero-specific black action. Do not use Bootstrap's btn-dark here because
   UAA's official dark slot is Medium Gray, not the neutral hero black. */
.hero-box .btn-hero-black {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--uaa-hero-black);
  --bs-btn-border-color: var(--uaa-hero-black);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--uaa-hero-black) 86%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--uaa-hero-black) 86%, #000);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #000;
  --bs-btn-active-border-color: #000;
}

/* The program finder is a special full-width hero overlay, separate from the
   hero-box paragraph layout. It is pinned to the bottom and receives none of
   the callout's width, padding, panel, or paragraph spacing rules. */
.hero-slide-program-finder .hero-caption {
  padding-bottom: 13rem;
}
.hero-program-search {
  --hero-search-color: var(--bs-white);
  --hero-search-muted: rgba(var(--bs-white-rgb), .75);
  --hero-search-border: rgba(var(--bs-white-rgb), .9);
  --hero-search-focus: rgba(var(--bs-white-rgb), .2);
  --hero-search-inverse: var(--bs-body-color);
  position: absolute;
  right: 0;
  bottom: 2rem;
  left: 0;
  z-index: 6;
  color: var(--hero-search-color);
  text-align: left;
}
.hero-program-search > .container {
  display: flex;
  justify-content: center;
}

/* programSearchBackground is deliberately a boolean. When enabled, the search
   uses the same background option as the slide callout instead of introducing
   another author-facing color field. The band reaches the hero edges; when the
   option is off, the existing transparent/floating search layout is unchanged. */
.hero-program-search.has-background {
  bottom: 0;
  padding-block: 1.25rem 1.5rem;
  background: var(--hero-search-background, transparent);
}
.hero-program-search.has-background.background-none {
  --hero-search-background: transparent;
}
.hero-program-search.has-background.background-primary {
  --hero-search-background: rgba(var(--bs-primary-rgb), .75);
}
.hero-program-search.has-background.background-secondary {
  --hero-search-background: rgba(var(--bs-secondary-rgb), .75);
}
.hero-program-search.has-background.background-light {
  --hero-search-background: rgba(var(--bs-light-rgb), .75);
  --hero-search-color: var(--bs-body-color);
  --hero-search-muted: rgba(var(--bs-body-color-rgb), .65);
  --hero-search-border: rgba(var(--bs-body-color-rgb), .72);
  --hero-search-focus: rgba(var(--bs-body-color-rgb), .16);
  --hero-search-inverse: var(--bs-white);
}
.hero-program-search.has-background.background-black {
  --hero-search-background: rgba(var(--uaa-hero-black-rgb), .82);
}
.hero-program-search-form {
  display: grid;
  grid-template-columns: minmax(22rem, 1fr) 10.5rem 12.5rem auto;
  align-items: end;
  justify-content: center;
  gap: .5rem;
  width: min(100%, 78rem);
  margin-inline: auto;
  text-align: left;
}
.hero-program-search-field,
.hero-program-search-action {
  min-width: 0;
}
.hero-program-search-action {
  align-self: end;
}
.hero-program-search-field .form-label {
  white-space: nowrap;
}

/* data-menu="light" means the hero needs light foreground content. A bright
   hero uses data-menu="dark", so the search automatically switches to dark
   controls and text without changing its markup. */
.hero-slide:has(.hero-caption.background-light) .hero-program-search {
  --hero-search-color: var(--bs-body-color);
  --hero-search-muted: rgba(var(--bs-body-color-rgb), .65);
  --hero-search-border: rgba(var(--bs-body-color-rgb), .72);
  --hero-search-focus: rgba(var(--bs-body-color-rgb), .16);
  --hero-search-inverse: var(--bs-white);
}
.swiper-slide[data-menu="dark"] .hero-program-search {
  --hero-search-color: var(--bs-body-color);
  --hero-search-muted: rgba(var(--bs-body-color-rgb), .65);
  --hero-search-border: rgba(var(--bs-body-color-rgb), .72);
  --hero-search-focus: rgba(var(--bs-body-color-rgb), .16);
  --hero-search-inverse: var(--bs-white);
}
/* An explicit search background owns its foreground contrast. These rules
   follow the menu-derived fallback above so menu state cannot make controls
   unreadable against the selected search band. */
.hero-program-search.has-background:is(.background-primary, .background-black) {
  --hero-search-color: var(--bs-white);
  --hero-search-muted: rgba(var(--bs-white-rgb), .75);
  --hero-search-border: rgba(var(--bs-white-rgb), .9);
  --hero-search-focus: rgba(var(--bs-white-rgb), .2);
  --hero-search-inverse: var(--bs-body-color);
}
.hero-program-search.has-background.background-secondary {
  --hero-search-color: var(--uaa-hero-black);
  --hero-search-muted: rgba(var(--uaa-hero-black-rgb), .68);
  --hero-search-border: rgba(var(--uaa-hero-black-rgb), .72);
  --hero-search-focus: rgba(var(--uaa-hero-black-rgb), .16);
  --hero-search-inverse: var(--bs-white);
}
.hero-program-search.has-background.background-light {
  --hero-search-color: var(--bs-body-color);
  --hero-search-muted: rgba(var(--bs-body-color-rgb), .65);
  --hero-search-border: rgba(var(--bs-body-color-rgb), .72);
  --hero-search-focus: rgba(var(--bs-body-color-rgb), .16);
  --hero-search-inverse: var(--bs-white);
}
.hero-program-search .form-label {
  color: var(--hero-search-color);
}
.hero-program-search .form-control,
.hero-program-search .form-select {
  color: var(--hero-search-color);
  background-color: transparent;
  border-color: var(--hero-search-border);
}
.hero-program-search .form-control::placeholder {
  color: var(--hero-search-muted);
  opacity: 1;
}
.hero-program-search .form-control:focus,
.hero-program-search .form-select:focus {
  color: var(--hero-search-color);
  background-color: transparent;
  border-color: var(--hero-search-color);
  box-shadow: 0 0 0 .25rem var(--hero-search-focus);
}
.hero-program-search .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.hero-program-search.has-background.background-light .form-select,
.hero-program-search.has-background.background-secondary .form-select,
.hero-slide:has(.hero-caption.background-light) .hero-program-search .form-select,
.swiper-slide[data-menu="dark"] .hero-program-search .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23111' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.hero-program-search .form-select option {
  color: var(--bs-body-color);
  background: var(--bs-body-bg);
}
.hero-program-search .btn {
  color: var(--hero-search-color);
  background-color: transparent;
  border-color: var(--hero-search-border);
}
.hero-program-search .btn:hover,
.hero-program-search .btn:focus {
  color: var(--hero-search-inverse);
  background-color: var(--hero-search-color);
  border-color: var(--hero-search-color);
}

.hero .carousel-control-prev,
.hero .carousel-control-next { width: 6%; z-index: 6; }