/* General styles for the whole main menu. */

#main-menu li:hover a,
#main-menu li li a,
#main-menu a.highlighted,
#main-menu a:hover,
#main-menu a:focus,
#main-menu a:active
   { color: white; }
#main-menu:not(.menu-2025) li li a:hover,
#main-menu:not(.menu-2025) li li a.current
   { background-color: black; }

   #main-menu:not(.menu-2025).sm-mint ul a:hover,
   #main-menu:not(.menu-2025).sm-mint ul a:focus,
   #main-menu:not(.menu-2025).sm-mint ul a:active,
   #main-menu:not(.menu-2025).sm-mint ul a.highlighted
   { background-color: white; }

   /* Exceptions for Education and News and Events */
   #main-menu:not(.menu-2025).sm-mint #education ul a:hover,
   #main-menu:not(.menu-2025).sm-mint #education ul a:focus,
   #main-menu:not(.menu-2025).sm-mint #education ul a:active,
   #main-menu:not(.menu-2025).sm-mint #education ul a.highlighted,
   #main-menu:not(.menu-2025).sm-mint #newsandevents ul a:hover,
   #main-menu:not(.menu-2025).sm-mint #newsandevents ul a:focus,
   #main-menu:not(.menu-2025).sm-mint #newsandevents ul a:active,
   #main-menu:not(.menu-2025).sm-mint #newsandevents ul a.highlighted
   { background-color: black; }

@media (max-width: 768px) {
    #main-menu li:hover a,
    #main-menu li li a
    { color: black; }
}


/* TODO: Keep the menu arrows visible at all times, even when hover / active / highlighted */
#main-menu.sm-mint ul a span.sub-arrow
{
   border-color: transparent transparent transparent black;
}
#main-menu.sm-mint #newsandevents ul a span.sub-arrow
{
   border-color: transparent transparent transparent white;
}

#main-menu.sm-mint ul a:hover span.sub-arrow,
#main-menu.sm-mint ul a:focus span.sub-arrow,
#main-menu.sm-mint ul a:active span.sub-arrow,
#main-menu.sm-mint ul a.highlighted span.sub-arrow
{ border-color: transparent transparent transparent black; opacity: 0.9; }
.sm-mint #education ul a:hover span.sub-arrow,
.sm-mint #education ul a:focus span.sub-arrow,
.sm-mint #education ul a:active span.sub-arrow,
.sm-mint #education ul a.highlighted span.sub-arrow,
.sm-mint #newsandevents ul a:hover span.sub-arrow,
.sm-mint #newsandevents ul a:focus span.sub-arrow,
.sm-mint #newsandevents ul a:active span.sub-arrow,
.sm-mint #newsandevents ul a.highlighted span.sub-arrow
{ border-color: transparent transparent transparent white; opacity: 0.9; }

/* Special styles for sub-section titles and sub-menu headers. */

#main-menu li a.title
   { font-weight: bold; text-transform: uppercase;
     pointer-events: none; cursor: default;
     padding-top: 4px !important; padding-bottom: 4px !important; }
#main-menu li a.submenuhead { cursor: default; }


/* All section-specific colours, apart from those defined for the *current*
   section. See each section CSS for those. */

#main-menu li#aboutus:hover,
#main-menu:not(.menu-2025) li#aboutus li,
#main-menu a.aboutus.highlighted,
#main-menu a.aboutus:hover,
#main-menu a.aboutus:focus,
#main-menu a.aboutus:active,
#main-menu #aboutus .mega-menu a::after,
#content   #aboutus .animate a::after,
#content   #aboutus .links a::after,
#main-menu #aboutus .mega-menu::before
   { background-color: var(--color-about-us-bg); }
#main-menu li#aboutus li.section { border-top: 3px solid var(--color-about-us-fg); }
#main-menu li#aboutus a.title { color: var(--color-about-us-fg); }

    #main-menu li#aboutus:hover a,
    #main-menu li#aboutus li a,
    #main-menu #aboutus a:hover,
    #main-menu #aboutus a:focus,
    #main-menu #aboutus a:active
       { color: black; }
    #main-menu li#aboutus li a:hover,
    #main-menu li#aboutus li a.current
       { background-color: white; }




#main-menu li#people:hover,
#main-menu:not(.menu-2025) li#people li,
#main-menu a.people.highlighted,
#main-menu a.people:hover,
#main-menu a.people:focus,
#main-menu a.people:active,
#main-menu #people .mega-menu a::after,
#content   #people .animate a::after,
#content   #people .links a::after,
#main-menu #people .mega-menu::before
   { background-color: var(--color-people-bg); }
#main-menu li#people li.section { border-top: 3px solid var(--color-people-fg); }
#main-menu li#people a.title { color: var(--color-people-fg); }

    #main-menu li#people:hover a,
    #main-menu li#people li a,
    #main-menu #people a:hover,
    #main-menu #people a:focus,
    #main-menu #people a:active
       { color: black; }
    #main-menu li#people li a:hover,
    #main-menu li#people li a.current
       { background-color: white; }



#main-menu li#education:hover,
#main-menu:not(.menu-2025) li#education li,
#main-menu a.education.highlighted,
#main-menu a.education:hover,
#main-menu a.education:focus,
#main-menu a.education:active,
#main-menu #education .mega-menu a::after,
#content   #education .animate a::after,
#content   #education .links a::after,
#main-menu #education .mega-menu::before
   { background-color: var(--color-education-bg); }
#main-menu li#education li.section { border-top: 3px solid var(--color-education-fg); }
#main-menu li#education a.title { color: var(--color-education-fg); }

    #main-menu.menu-2025 li#education:hover a,
    #main-menu.menu-2025 li#education li a,
    #main-menu.menu-2025 #education a:hover,
    #main-menu.menu-2025 #education a:focus,
    #main-menu.menu-2025 #education a:active
    { color: black; }
    #main-menu.menu-2025 li#education li a:hover,
    #main-menu.menu-2025 li#education li a.current
    { background-color: white; }


#main-menu li#research:hover,
#main-menu:not(.menu-2025) li#research li,
#main-menu a.research.highlighted,
#main-menu a.research:hover,
#main-menu a.research:focus,
#main-menu a.research:active,
#main-menu #research .mega-menu a::after,
#content   #research .animate a::after,
#content   #research .links a::after,
#main-menu #research .mega-menu::before
   { background-color: var(--color-research-bg); }
#main-menu li#research li.section { border-top: 3px solid var(--color-research-fg); }
#main-menu li#research a.title { color: var(--color-research-fg); }

    #main-menu li#research:hover a,
    #main-menu li#research li a,
    #main-menu #research a:hover,
    #main-menu #research a:focus,
    #main-menu #research a:active
       { color: black; }
    #main-menu li#research li a:hover,
    #main-menu li#research li a.current
       { background-color: white; }



#main-menu li#patientcare:hover,
#main-menu:not(.menu-2025) li#patientcare li,
#main-menu a.patientcare.highlighted,
#main-menu a.patientcare:hover,
#main-menu a.patientcare:focus,
#main-menu a.patientcare:active,
#main-menu #patientcare .mega-menu a::after,
#content   #patientcare .animate a::after,
#content   #patientcare .links a::after,
#main-menu #patientcare .mega-menu::before
   { background-color: var(--color-patient-care-bg); }
#main-menu li#patientcare li.section { border-top: 3px solid var(--color-patient-care-fg); }
#main-menu li#patientcare a.title { color: var(--color-patient-care-fg); }

    #main-menu li#patientcare:hover a,
    #main-menu li#patientcare li a,
    #main-menu #patientcare a:hover,
    #main-menu #patientcare a:focus,
    #main-menu #patientcare a:active
       { color: black; }
    #main-menu li#patientcare li a:hover,
    #main-menu li#patientcare li a.current
       { background-color: white; }



#main-menu li#community:hover,
#main-menu:not(.menu-2025) li#community li,
#main-menu a.community.highlighted,
#main-menu a.community:hover,
#main-menu a.community:focus,
#main-menu a.community:active,
#main-menu #community .mega-menu a::after,
#content   #community .animate a::after,
#content   #community .links a::after,
#main-menu #community .mega-menu::before
   { background-color: var(--color-community-bg); }
#main-menu li#community li.section { border-top: 3px solid var(--color-community-fg); }
#main-menu li#community a.title { color: var(--color-community-fg); }

    #main-menu li#community:hover a,
    #main-menu li#community li a,
    #main-menu #community a:hover,
    #main-menu #community a:focus,
    #main-menu #community a:active
       { color: black; }
    #main-menu li#community li a:hover,
    #main-menu li#community li a.current
       { background-color: white; }



#main-menu li#newsandevents:hover,
#main-menu:not(.menu-2025) li#newsandevents li,
#main-menu a.newsandevents.highlighted,
#main-menu a.newsandevents:hover,
#main-menu a.newsandevents:focus,
#main-menu a.newsandevents:active,
#main-menu #newsandevents .mega-menu a::after,
#content   #newsandevents .animate a::after,
#content   #newsandevents .links a::after,
#main-menu #newsandevents .mega-menu::before
   { background-color: var(--color-news-and-events-bg); color: white; }
#main-menu li#newsandevents li.section { border-top: 3px solid var(--color-news-and-events-fg); }
#main-menu li#newsandevents a.title { color: var(--color-news-and-events-fg); }

#main-menu.menu-2025 li#newsandevents:hover a,
#main-menu.menu-2025 li#newsandevents li a,
#main-menu.menu-2025 #newsandevents a:hover,
#main-menu.menu-2025 #newsandevents a:focus,
#main-menu.menu-2025 #newsandevents a:active
{ color: black; }
#main-menu.menu-2025 li#newsandevents li a:hover,
#main-menu.menu-2025 li#newsandevents li a.current
{ background-color: white; }


/* Hero section action button */
#main-menu .wrapper-action {
    display: inline;
    width: 554px;
    justify-content: left;
    align-items: left;
    color: #000;
    font-family: "National 2";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 125% */
    letter-spacing: -0.64px;
}

#main-menu li#apply-now {
  float: right;
  /* display: inline-block; */
  /* (optional) override the fixed width if it’s pushing everything else down */
  width: auto;
  bottom: 4px;
}

@media (max-width: 768px) {
    #main-menu li#apply-now  {
        display: none;
    }
}

/* Hero section action button */
#main-menu .wrapper-action a {
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 8px 20px;

  background: var(--color-usc-cardinal);
  color: var(--color-usc-gold, #FFCC00) !important;
  border-radius: 8px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
  text-decoration: none;
  cursor: pointer;

  font-family: "National 2", sans-serif;
  font-size: 22px;
  font-weight: 700;
  font-style: normal;
  line-height: 22px;
  letter-spacing: -0.88px;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

#main-menu .wrapper-action a:hover {
  transform: none;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.35);
}

#main-menu .wrapper-action a:active {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
}

#main-menu .wrapper-action a::after {
  content: '';
  display: inline-block;
  margin-left: 0;
  opacity: 0;
  transform: translateX(0);
  transition:
    opacity 0.2s ease 0.01s,   /* fade in after delay */
    transform 0.2s ease 0.01s,
    margin-left 0.2s ease 0.01s;
  font-weight: 700;
  font-size: 22px;
  line-height: 22px;
  letter-spacing: -0.88px;
  color: inherit;
}

#main-menu .wrapper-action a:hover::after {
  content: ' ⟩';
  opacity: 1;
  margin-left: 8px;
  transform: translateX(2px);
}