/* Match the existing POPAY auto-menu palette. Scope to Progress dropdowns. */
body #site-navigation .ppr-menu-root > .sub-menu,
body #mobile-site-navigation .ppr-menu-root > .sub-menu,
body #mobile-drawer .ppr-menu-root > .sub-menu {
    background: var(--pam-green, #185b48) !important;
    color: #fff !important;
    border: 1px solid var(--pam-line, rgba(255, 255, 255, .16)) !important;
    border-radius: 10px !important;
}

body #site-navigation .ppr-menu-root > .sub-menu > li,
body #mobile-site-navigation .ppr-menu-root > .sub-menu > li,
body #mobile-drawer .ppr-menu-root > .sub-menu > li {
    background: transparent !important;
    border-color: var(--pam-line, rgba(255, 255, 255, .16)) !important;
}

body #site-navigation .ppr-menu-root > .sub-menu > li > a,
body #mobile-site-navigation .ppr-menu-root > .sub-menu > li > a,
body #mobile-drawer .ppr-menu-root > .sub-menu > li > a {
    background: transparent !important;
    color: #fff !important;
}

body #site-navigation .ppr-menu-root > .sub-menu > li > a:hover,
body #site-navigation .ppr-menu-root > .sub-menu > li > a:focus-visible,
body #site-navigation .ppr-menu-root > .sub-menu > li.current-menu-item > a,
body #site-navigation .ppr-menu-root > .sub-menu > li.current-menu-ancestor > a,
body #mobile-site-navigation .ppr-menu-root > .sub-menu > li > a:hover,
body #mobile-site-navigation .ppr-menu-root > .sub-menu > li > a:focus-visible,
body #mobile-site-navigation .ppr-menu-root > .sub-menu > li.current-menu-item > a,
body #mobile-drawer .ppr-menu-root > .sub-menu > li > a:hover,
body #mobile-drawer .ppr-menu-root > .sub-menu > li > a:focus-visible,
body #mobile-drawer .ppr-menu-root > .sub-menu > li.current-menu-item > a {
    background: var(--pam-hover, rgba(255, 255, 255, .12)) !important;
    color: #fff !important;
}

body #site-navigation .ppr-menu-root > .sub-menu > li > a :is(span, svg),
body #mobile-site-navigation .ppr-menu-root > .sub-menu > li > a :is(span, svg),
body #mobile-drawer .ppr-menu-root > .sub-menu > li > a :is(span, svg) {
    color: inherit !important;
}

body #site-navigation .ppr-menu-root > .sub-menu > li > a:focus-visible,
body #mobile-site-navigation .ppr-menu-root > .sub-menu > li > a:focus-visible,
body #mobile-drawer .ppr-menu-root > .sub-menu > li > a:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: -3px !important;
}
