/**
 * @file
 * Main menu styling.
 */

/* Menu link level one */

.menu-main .menu__link--level-1 {
  color: var(--midnight-joshua-tree);
  font-size: var(--font-size-4);
  font-weight: var(--font-weight-700);
  line-height: var(--leading-tight);
  position: relative;
  text-decoration: none;
}

@media (min-width: 1280px) {
  .menu-main .menu__link--level-1 {
    font-size: var(--font-size-2);
    font-weight: var(--font-weight-700);
    line-height: var(--leading-normal);
  }
}

@media (--desktop) {
  .menu-main .menu__link--level-1 {
    font-size: var(--font-size-2);
    font-weight: var(--font-weight-700);
    line-height: var(--leading-normal);
  }
}

@media (min-width: 1280px) {
  .menu-main .menu__link--level-1:hover {
    color: var(--ucla-blue);
  }
}

@media (--desktop) {
  .menu-main .menu__link--level-1:hover {
    color: var(--ucla-blue);
  }
}

.menu-main .menu__link--level-1:hover .menu__link-inner::after {
  transform: scaleX(1);
}

@media (min-width: 1280px) {
  .menu-main .menu__link--level-1:focus {
    outline: 0;
    position: relative;
  }
}

@media (--desktop) {
  .menu-main .menu__link--level-1:focus {
    outline: 0;
    position: relative;
  }
}

@media (min-width: 1280px) {
  .menu-main .menu__link--level-1:focus::before {
    border-radius: 0.25rem;
    border: 2px solid var(--midnight-joshua-tree);
    content: "";
    height: 54px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 1.125rem);
  }
}

@media (--desktop) {
  .menu-main .menu__link--level-1:focus::before {
    border-radius: 0.25rem;
    border: 2px solid var(--midnight-joshua-tree);
    content: "";
    height: 54px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 1.125rem);
  }
}

.menu-main .menu__link--level-1.menu__link--active-trail {
  color: var(--ucla-blue);
}

.menu-main .menu__link--level-1 .menu__link-inner {
  align-items: center;
  display: inline-flex;
  padding-block: var(--size-2);
  position: relative;
}

@media (min-width: 1280px) {
  .menu-main .menu__link--level-1 .menu__link-inner {
    padding-block: var(--size-8);
    padding-inline: 0;
  }
}

@media (--desktop) {
  .menu-main .menu__link--level-1 .menu__link-inner {
    padding-block: var(--size-8);
    padding-inline: 0;
  }
}

@media (min-width: 1280px) {
  .menu-main .menu__link--level-1 .menu__link-inner::after {
    border-top: 2px solid var(--ucla-blue);
    bottom: 0;
    content: "";
    height: 0;
    left: 0;
    position: absolute;
    transform-origin: center;
    transform: scaleX(0);
    transition: transform 0.2s;
    width: 100%;
  }
}

@media (--desktop) {
  .menu-main .menu__link--level-1 .menu__link-inner::after {
    border-top: 2px solid var(--ucla-blue);
    bottom: 0;
    content: "";
    height: 0;
    left: 0;
    position: absolute;
    transform-origin: center;
    transform: scaleX(0);
    transition: transform 0.2s;
    width: 100%;
  }
}

/* Menu link level two */

.menu-main .menu__link--level-2 {
  color: var(--ucla-blue);
  font-size: var(--font-size-2);
  font-weight: var(--font-weight-400);
  text-decoration: none;
}

@media (min-width: 1280px) {
  .menu-main .menu__link--level-2 {
    font-size: var(--font-size-1);
  }
}

@media (--desktop) {
  .menu-main .menu__link--level-2 {
    font-size: var(--font-size-1);
  }
}

@media (min-width: 1280px) {
  .menu-main .menu__link--level-2:hover {
    color: var(--midnight-joshua-tree);
  }
}

@media (--desktop) {
  .menu-main .menu__link--level-2:hover {
    color: var(--midnight-joshua-tree);
  }
}

.menu-main .menu__link--level-2.is-active {
  color: var(--midnight-joshua-tree);
  font-weight: var(--font-weight-700);
}

.menu-main .menu__link--level-2.menu__link--active-trail {
  color: var(--midnight-joshua-tree);
  font-weight: var(--font-weight-700);
}

/* Menu link level three */

.menu-main .menu__link--level-3 {
  color: var(--gray-700);
  font-size: var(--font-size-0);
  font-weight: var(--font-weight-400);
  text-decoration: none;
}

@media (min-width: 1280px) {
  .menu-main .menu__link--level-3:hover {
    background-color: var(--santa-barbara-sand);
    color: var(--ucla-blue);
  }
}

@media (--desktop) {
  .menu-main .menu__link--level-3:hover {
    background-color: var(--santa-barbara-sand);
    color: var(--ucla-blue);
  }
}

.menu-main .menu__link--level-3.is-active {
  background-color: var(--santa-barbara-sand);
  color: var(--ucla-blue);
  font-weight: var(--font-weight-700);
}

/* Menu Level 1 */

.menu-main--level-1 {
  -webkit-margin-after: var(--size-4);
  margin-block-end: var(--size-4);
  width: 100%;
}

@media (min-width: 1280px) {
  .menu-main--level-1 {
    align-items: stretch;
    display: flex;
    -webkit-margin-after: 0;
    margin-block-end: 0;
  }
}

@media (--desktop) {
  .menu-main--level-1 {
    align-items: stretch;
    display: flex;
    -webkit-margin-after: 0;
    margin-block-end: 0;
  }
}

/* Disable underline on items with children */

@media (min-width: 1280px) {
  .menu-main--level-1
    .menu__link--has-children
    .menu__link-inner--level-1::after {
    content: none;
  }
}

@media (--desktop) {
  .menu-main--level-1
    .menu__link--has-children
    .menu__link-inner--level-1::after {
    content: none;
  }
}

/* Menu Level 2 */

.menu-main--level-2 {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  -webkit-padding-after: var(--size-4);
  padding-block-end: var(--size-4);
  -webkit-padding-start: var(--size-6);
  padding-inline-start: var(--size-6);
  transition: opacity 0.2s, visibility 0.2s, max-height 0.2s;
  visibility: hidden;
  width: 100%;
}

@media (min-width: 1280px) {
  .menu-main--level-2 {
    background: var(--white);
    border-left: solid 1px transparent;
    border-top: 9px solid var(--ucla-blue);
    box-shadow: 0 1px 36px rgba(0, 0, 0, 0.08);
    flex-basis: 100%;
    left: 50%;
    max-height: calc(100vh - 7.875rem);
    opacity: 0;
    padding-block: var(--size-6);
    padding-inline: var(--size-6);
    position: absolute;
    top: 84px;
    transform: translate(-50%, -1.25rem);
    transition: visibility 0.2s, transform 0.2s, opacity 0.2s;
    visibility: hidden;
  }
}

@media (min-width: 1280px) {
  .menu-main--level-2 {
    background: var(--white);
    border-left: solid 1px transparent;
    border-top: 9px solid var(--ucla-blue);
    box-shadow: 0 1px 36px rgba(0, 0, 0, 0.08);
    flex-basis: 100%;
    left: 50%;
    max-height: calc(100vh - 7.875rem);
    opacity: 0;
    padding-block: var(--size-6);
    padding-inline: var(--size-6);
    position: absolute;
    top: 84px;
    transform: translate(-50%, -1.25rem);
    transition: visibility 0.2s, transform 0.2s, opacity 0.2s;
    visibility: hidden;
  }
}

@media (--desktop) {
  .menu-main--level-2 {
    background: var(--white);
    border-left: solid 1px transparent;
    border-top: 9px solid var(--ucla-blue);
    box-shadow: 0 1px 36px rgba(0, 0, 0, 0.08);
    flex-basis: 100%;
    left: 50%;
    max-height: calc(100vh - 7.875rem);
    opacity: 0;
    padding-block: var(--size-6);
    padding-inline: var(--size-6);
    position: absolute;
    top: 84px;
    transform: translate(-50%, -1.25rem);
    transition: visibility 0.2s, transform 0.2s, opacity 0.2s;
    visibility: hidden;
  }
}

.menu-main--level-2.is-active-menu-parent {
  max-height: none;
  opacity: 1;
  visibility: visible;
}

@media (min-width: 1280px) {
  .menu-main--level-2.is-active-menu-parent {
    opacity: 1;
    transform: translate(-50%, 0);
    visibility: visible;
  }
}

@media (--desktop) {
  .menu-main--level-2.is-active-menu-parent {
    opacity: 1;
    transform: translate(-50%, 0);
    visibility: visible;
  }
}

/* Default menu */

.menu-main--default .menu__item {
  -webkit-margin-after: var(--size-2);
  margin-block-end: var(--size-2);
}

@media (min-width: 1280px) {
  .menu-main--default .menu__item {
    -webkit-margin-after: 0;
    margin-block-end: 0;
    -webkit-margin-end: var(--size-8);
    margin-inline-end: var(--size-8);
    width: -moz-max-content;
    width: max-content;
  }
}

@media (--desktop) {
  .menu-main--default .menu__item {
    -webkit-margin-after: 0;
    margin-block-end: 0;
    -webkit-margin-end: var(--size-8);
    margin-inline-end: var(--size-8);
    width: -moz-max-content;
    width: max-content;
  }
}

@media (min-width: 1280px) {
  .menu-main--default .menu__item:last-child {
    -webkit-margin-end: 0;
    margin-inline-end: 0;
  }
}

@media (--desktop) {
  .menu-main--default .menu__item:last-child {
    -webkit-margin-end: 0;
    margin-inline-end: 0;
  }
}

.menu-main--default .menu__link {
  display: flex;
}

/* Dropdown menu */

.menu-main--dropdown.menu-main--level-1 .menu__item {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  position: relative;
}

@media (min-width: 1280px) {
  .menu-main--dropdown.menu-main--level-1 .menu__item {
    align-items: center;
    flex-basis: auto;
    flex-wrap: nowrap;
    -webkit-margin-after: 0;
    margin-block-end: 0;
    -webkit-margin-end: var(--size-8);
    margin-inline-end: var(--size-8);
    width: -moz-max-content;
    width: max-content;
  }
}

@media (--desktop) {
  .menu-main--dropdown.menu-main--level-1 .menu__item {
    align-items: center;
    flex-basis: auto;
    flex-wrap: nowrap;
    -webkit-margin-after: 0;
    margin-block-end: 0;
    -webkit-margin-end: var(--size-8);
    margin-inline-end: var(--size-8);
    width: -moz-max-content;
    width: max-content;
  }
}

@media (min-width: 1280px) {
  .menu-main--dropdown.menu-main--level-1 .menu__item:last-child {
    -webkit-margin-end: 0;
    margin-inline-end: 0;
  }
}

@media (--desktop) {
  .menu-main--dropdown.menu-main--level-1 .menu__item:last-child {
    -webkit-margin-end: 0;
    margin-inline-end: 0;
  }
}

.menu-main--dropdown.menu-main--level-1 .menu__link {
  display: flex;
  flex-basis: auto;
  flex-grow: 1;
}

.menu-main--dropdown.menu-main--level-1
  .is-active-mouseover-event
  .menu__link--level-1 {
  color: var(--ucla-blue);
}

/* Second level menu */

@media (min-width: 1280px) {
  .menu-main--dropdown .menu-main--level-2 {
    border-radius: var(--radius-2);
    display: flex;
    flex-wrap: wrap;
    width: 250px;
  }
}

@media (--desktop) {
  .menu-main--dropdown .menu-main--level-2 {
    border-radius: var(--radius-2);
    display: flex;
    flex-wrap: wrap;
    width: 250px;
  }
}

.menu-main--dropdown .menu-main--level-2 .menu__item {
  display: flex;
  flex-wrap: wrap;
  -webkit-margin-end: 0;
  margin-inline-end: 0;
  width: 100%;
}

@media (min-width: 1280px) {
  .menu-main--dropdown .menu-main--level-2 .menu__link {
    border-radius: var(--radius-2);
    padding: var(--size-3);
  }
}

@media (--desktop) {
  .menu-main--dropdown .menu-main--level-2 .menu__link {
    border-radius: var(--radius-2);
    padding: var(--size-3);
  }
}

@media (min-width: 1280px) {
  .menu-main--dropdown .menu-main--level-2 .menu__link:hover {
    background-color: var(--santa-barbara-sand);
  }
}

@media (--desktop) {
  .menu-main--dropdown .menu-main--level-2 .menu__link:hover {
    background-color: var(--santa-barbara-sand);
  }
}

.menu-main--dropdown .menu-main--level-2 .menu__link-inner {
  display: block;
  padding-block: var(--size-3);
}

@media (min-width: 1280px) {
  .menu-main--dropdown .menu-main--level-2 .menu__link-inner {
    padding-block: 0;
  }
}

@media (--desktop) {
  .menu-main--dropdown .menu-main--level-2 .menu__link-inner {
    padding-block: 0;
  }
}

/* Mega menu */

.menu-main--mega.menu-main--level-1 .menu__item {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  -webkit-margin-after: var(--size-2);
  margin-block-end: var(--size-2);
}

@media (min-width: 1280px) {
  .menu-main--mega.menu-main--level-1 .menu__item {
    align-items: center;
    flex-basis: auto;
    flex-wrap: nowrap;
    -webkit-margin-after: 0;
    margin-block-end: 0;
    -webkit-margin-end: var(--size-8);
    margin-inline-end: var(--size-8);
    position: static;
    width: -moz-max-content;
    width: max-content;
  }
}

@media (--desktop) {
  .menu-main--mega.menu-main--level-1 .menu__item {
    align-items: center;
    flex-basis: auto;
    flex-wrap: nowrap;
    -webkit-margin-after: 0;
    margin-block-end: 0;
    -webkit-margin-end: var(--size-8);
    margin-inline-end: var(--size-8);
    position: static;
    width: -moz-max-content;
    width: max-content;
  }
}

@media (min-width: 1280px) {
  .menu-main--mega.menu-main--level-1 .menu__item:last-child {
    -webkit-margin-end: 0;
    margin-inline-end: 0;
  }
}

@media (--desktop) {
  .menu-main--mega.menu-main--level-1 .menu__item:last-child {
    -webkit-margin-end: 0;
    margin-inline-end: 0;
  }
}

.menu-main--mega.menu-main--level-1 .menu__link {
  display: flex;
  flex-basis: auto;
  flex-grow: 1;
}

.menu-main--mega.menu-main--level-1
  .is-active-mouseover-event
  .menu__link--level-1 {
  color: var(--ucla-blue);
}

/* Second level menu */

@media (min-width: 1280px) {
  .menu-main--mega .menu-main--level-2 {
    display: grid;
    grid-gap: var(--size-2);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    flex-basis: 100%;
    max-inline-size: var(--size-container);
    width: 100%;
  }
}

@media (--desktop) {
  .menu-main--mega .menu-main--level-2 {
    display: grid;
    grid-gap: var(--size-2);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    flex-basis: 100%;
    max-inline-size: var(--size-container);
    width: 100%;
  }
}

.menu-main--mega .menu-main--level-2 .menu__item {
  display: block;
  -webkit-margin-end: 0;
  margin-inline-end: 0;
  width: 100%;
}

@media (min-width: 1280px) {
  .menu-main--mega .menu-main--level-2 .menu__link {
    -webkit-padding-start: var(--size-2);
    padding-inline-start: var(--size-2);
  }
}

@media (--desktop) {
  .menu-main--mega .menu-main--level-2 .menu__link {
    -webkit-padding-start: var(--size-2);
    padding-inline-start: var(--size-2);
  }
}

/* Third level menu */

.menu-main--mega .menu-main--level-3 {
  -webkit-padding-start: var(--size-4);
  padding-inline-start: var(--size-4);
}

@media (min-width: 1280px) {
  .menu-main--mega .menu-main--level-3 {
    -webkit-padding-start: 0;
    padding-inline-start: 0;
  }
}

@media (--desktop) {
  .menu-main--mega .menu-main--level-3 {
    -webkit-padding-start: 0;
    padding-inline-start: 0;
  }
}

.menu-main--mega .menu-main--level-3 .menu__link {
  padding: var(--size-3);
}

@media (min-width: 1280px) {
  .menu-main--mega .menu-main--level-3 .menu__link {
    border-radius: var(--radius-2);
    padding: var(--size-2);
  }
}

@media (--desktop) {
  .menu-main--mega .menu-main--level-3 .menu__link {
    border-radius: var(--radius-2);
    padding: var(--size-2);
  }
}

@media (min-width: 1280px) {
  .menu-main--mega .menu-main--level-3 .menu__link:hover {
    background-color: var(--santa-barbara-sand);
  }
}

@media (--desktop) {
  .menu-main--mega .menu-main--level-3 .menu__link:hover {
    background-color: var(--santa-barbara-sand);
  }
}