/* ASU Unity Bootstrap Theme — Global Header.
 *
 * Hand-translated from the UDS SCSS for this no-build static page: SCSS tokens are substituted
 * with their literal values (from unity-bootstrap-theme _custom-asu-variables.scss), mixins are
 * expanded, and only the rules our simplified header DOM uses are included. Omitted on purpose
 * (no matching elements): .scrolled states, dropdowns/megamenu, partner logos, the mobile menu
 * toggler, #menubar, and the mobile footer.
 *
 * Tokens: gray-1 #191919, gray-2 #484848, gray-3 #747474, gray-4 #bfbfbf, gray-5 #d0d0d0,
 * gray-6 #e8e8e8, white #fff, gold #ffc627, maroon #8c1d40. spacing half/1/2/3/4 =
 * 0.25/0.5/1/1.5/2rem. font tiny/small/medium/xl = 0.75/0.875/1/1.5rem. xl breakpoint 1200px.
 */

/* --- Minimal Bootstrap layout primitives (full Bootstrap is not loaded) --- */
#asu-header .container-xl {
  width: 100%;
  max-width: 1320px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 12px;
  padding-left: 12px;
}
#asu-header .row {
  display: flex;
  flex-wrap: wrap;
}
#asu-header .col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}
#asu-header .nav {
  display: flex;
  flex-wrap: wrap;
}
#asu-header .navbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
}
#asu-header .container-fluid {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
#asu-header .navbar-brand {
  display: inline-block;
}
#asu-header a {
  text-decoration: none;
}
#asu-header .visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
#asu-header .btn {
  display: inline-block;
  cursor: pointer;
  border: 0;
}
#asu-header .btn-dark {
  background-color: #191919;
  color: #fff;
}
#asu-header.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

/* --- 2. Top bar --- */
#wrapper-header-top {
  background-color: #e8e8e8;
  transition: 0.5s cubic-bezier(0.19, 1, 0.19, 1);
  display: none; /* hidden on mobile; shown at xl */
  flex-direction: column;
  justify-content: flex-start;
}
#header-top {
  background-color: #e8e8e8;
  transition: 0.5s cubic-bezier(0.19, 1, 0.19, 1);
}
#header-top .nav {
  justify-content: flex-end;
  align-items: center;
}
#header-top .nav-link {
  color: #484848;
  font-size: 0.75rem;
  font-family: Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans, sans-serif;
  line-height: 0.75rem;
  padding: 0.25rem 0.5rem;
  margin-right: 0.5rem;
  white-space: nowrap;
}
#header-top .nav-link:hover {
  text-decoration: underline;
}
#header-top .nav-link.visually-hidden,
#header-top .nav-link.visually-hidden-focusable {
  justify-self: flex-start;
}
#header-top .login-status {
  display: flex;
  align-items: center;
  margin-right: 0.5rem;
}
#header-top .login-status > a {
  padding: 0;
  margin: 0;
  color: #484848;
  text-decoration: none;
}
#header-top .form-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

/* --- Transitions on the animated header parts --- */
#asu-header .navbar,
#asu-header .navbar-brand .horiz,
#asu-header .navbar-brand .vert,
#asu-header .title {
  transition: 0.5s cubic-bezier(0.19, 1, 0.19, 1);
}

/* --- 5. Main bar (mobile-first) --- */
#wrapper-header-main {
  border-bottom: 1px solid #d0d0d0;
  background-color: #fff;
}
#wrapper-header-main .container-xl {
  padding-left: 12px;
  padding-right: 12px;
}
#wrapper-header-main .container-fluid {
  padding-left: 0;
  padding-right: 0;
}
#header-main {
  padding: 0;
}
#header-main .navbar {
  padding: 1.5rem 0 0 0;
  align-items: flex-start;
}
#header-main .navbar-brand {
  padding: 0;
  margin: 0;
}
#header-main .navbar-brand .vert {
  display: none;
}
#header-main .navbar-brand .horiz {
  display: block;
  height: 32px;
  width: auto;
  margin-bottom: 1rem;
  margin-left: 2rem;
}
#header-main .navbar-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
#header-main .title {
  line-height: 1;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  padding: 0 2rem 1.5rem 2rem;
}
#header-main .title > a {
  color: #191919;
  text-decoration: none;
}
#header-main .title > a:visited {
  color: #191919;
}
#header-main .title > a:hover {
  text-decoration: underline;
}
#header-main .title .unit-name {
  display: none; /* shown at xl */
}

/* --- 8. Page offset so content clears the fixed header --- */
#asu-header + div,
#asu-header + main {
  transition: 0.5s cubic-bezier(0.19, 1, 0.19, 1);
  margin-top: 145px;
}
@media (max-width: 1199.98px) {
  #asu-header + div,
  #asu-header + main {
    margin-top: 110px;
  }
}

/* --- 7. Main bar (desktop, >= xl) --- */
@media (min-width: 1200px) {
  #wrapper-header-top {
    display: block;
  }
  #header-main {
    padding-left: 12px;
    padding-right: 12px;
  }
  #header-main .navbar {
    padding: 0;
    align-items: center;
    flex-wrap: nowrap;
  }
  #header-main .navbar-container {
    width: auto;
    flex-direction: row;
    align-items: center;
  }
  #header-main .navbar-brand .vert {
    display: block;
    height: 72px;
    width: auto;
    margin: 20px 1rem 20px 0;
  }
  #header-main .navbar-brand .horiz {
    display: none;
  }
  #header-main .title {
    line-height: 1;
    margin: 0;
    font-weight: 700;
    padding: 0;
  }
  #header-main .title .unit-name {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    display: block;
  }
  #header-main .title .subdomain-name {
    font-size: 1.5rem;
    margin-bottom: 0;
  }
}

/* --- Global Header V2 overrides (scoped under .uds-header-v2) --- */
#asu-header.uds-header-v2 #wrapper-header-top {
  padding: 0.5rem 0;
}
#asu-header.uds-header-v2 #header-top .nav > *:not(:last-child) {
  margin-right: 1.5rem;
}
#asu-header.uds-header-v2 #header-top .nav > *:nth-last-child(2) {
  margin-right: 0.75rem;
}
#asu-header.uds-header-v2 #header-top .nav-link {
  padding: 0;
  margin: 0;
}
#asu-header.uds-header-v2 #header-top .header-top-search {
  display: flex;
  align-items: center;
}
#asu-header.uds-header-v2 #header-top .header-top-search .search-button {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
  color: #191919;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  white-space: nowrap;
}
#asu-header.uds-header-v2 #header-top .header-top-search .search-button span {
  margin-right: 0.25rem;
}
#asu-header.uds-header-v2 #header-top .header-top-search .search-input {
  width: 200px;
  background-color: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 0;
  padding: 0.5rem;
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1;
  color: #747474;
  margin: 0 0 0 1.5rem;
  display: none;
  vertical-align: middle;
  height: auto;
  background-image: none;
}
#asu-header.uds-header-v2 #header-top .header-top-search .search-input::placeholder {
  font-size: 0.75rem;
  line-height: 1;
}
#asu-header.uds-header-v2 #header-top .header-top-search .search-input:focus,
#asu-header.uds-header-v2 #header-top .header-top-search .search-input:focus-visible {
  border: 1px solid #191919;
  box-shadow: none !important;
}
#asu-header.uds-header-v2 #header-top .header-top-search .search-submit {
  margin-left: 0.5rem;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1;
  padding: 0.5rem 1rem;
  border: none;
  display: none;
}
#asu-header.uds-header-v2 #header-top .header-top-search.open {
  margin-left: -1rem;
}
#asu-header.uds-header-v2 #header-top .header-top-search.open .search-button {
  display: none;
}
#asu-header.uds-header-v2 #header-top .header-top-search.open .search-input {
  display: unset;
}
#asu-header.uds-header-v2 #header-top .header-top-search.open .search-submit {
  display: inline-flex;
}