/*The rich text editor seems to add <p> within an <li> tag when editing. This is an issue when we edit the block for the menu system as 
    it doesn’t match what the CSS does. This is something that also affects numbered steps in help topics, though more subtely 
    because only the padding shows up.
    
    Jira: https://xero.atlassian.net/browse/WTC-420

    ===================
    Solution:
    =================
    Relax the child combinator to a descendant combinator. Just drop the > right before a in each rule (keep the rest as-is):
*/
.mega-dropdown .widget.widget-custom-menu ul > li a {
    font-size: .8125rem;
}

.widget-custom-menu > ul > li a, .widget-categories > ul > li a {
    padding: .50rem 0;
}

.widget-custom-menu ul > li a, .widget-categories ul > li a {
    display: block;
    transition: color .25s;
    color: #404040;
    font-weight: 600;
    text-decoration: none;
}


/*The <p > tags carry a default browser margin, which will add unwanted vertical space inside each menu item once the display: block rule applies. */
.widget-custom-menu ul > li > p, .widget-categories ul > li > p {
    margin: 0;
}


/**And there's a stray empty <p></p> right after the closing </ul>. It's likely invisible today since it has no styling, 
    but it's worth suppressing in case something later gives paragraphs a border or spacing:*/
.widget-custom-menu > p:empty {
    display: none;
}

li > p {
    margin: 0;
}

/*End - Jira WTC-420*/