Fix contrast issues with mobile menu colors.

spearhead/assets/sass/_text.scss

@@ -2,7 +2,7 @@
     border-bottom: 1px solid transparent;
     transition: all 0.1s ease;
 
-    &:hover:not(.wp-block-button__link) {
+    &:hover:not(.wp-block-button__link):not(.wp-block-file__button) {
         color: var( --global--color-primary-hover );
         border-bottom: 1px solid var( --global--color-primary-hover );
     }
@@ -14,6 +14,6 @@
     border-color: var( --global--color-primary ); // Links inside the post content must be underlined.
 
     &:hover:not(.wp-block-button__link) {
-        border-bottom: 1px solid transparent;
+        border-color: transparent;
     }
 }

spearhead/assets/sass/navigation.scss

@@ -60,6 +60,12 @@ div.extra-navigation-wrapper {
 		visibility: visible;
 		opacity: 1;
 		transform: translateY( $header-height );
+
+		.menu-item > a {
+			&:focus {
+				color: #ff6a81; // Use the dark mode styles so that the focus styles are accessible.
+			}
+		}
 	}
 
 	$menu-offset-with-logo: calc( var(--branding--logo--max-height) + ( 2 * var(--global--spacing-vertical) ) );

spearhead/navigation-rtl.css

@@ -574,6 +574,10 @@
 	transform: translateY(80px);
 }
 
+.primary-navigation-open div.extra-navigation-wrapper .menu-item > a:focus {
+	color: #ff6a81;
+}
+
 .primary-navigation-open .has-logo:not(.has-title-and-tagline) div.extra-navigation-wrapper {
 	transform: translateY(calc( var(--branding--logo--max-height) + ( 2 * var(--global--spacing-vertical) )));
 	bottom: calc( var(--branding--logo--max-height) + ( 2 * var(--global--spacing-vertical) ));

spearhead/navigation.css

@@ -574,6 +574,10 @@
 	transform: translateY(80px);
 }
 
+.primary-navigation-open div.extra-navigation-wrapper .menu-item > a:focus {
+	color: #ff6a81;
+}
+
 .primary-navigation-open .has-logo:not(.has-title-and-tagline) div.extra-navigation-wrapper {
 	transform: translateY(calc( var(--branding--logo--max-height) + ( 2 * var(--global--spacing-vertical) )));
 	bottom: calc( var(--branding--logo--max-height) + ( 2 * var(--global--spacing-vertical) ));

spearhead/style-rtl.css

@@ -197,7 +197,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	transition: all 0.1s ease;
 }
 
-.has-link-color a:hover:not(.wp-block-button__link), a:hover:not(.wp-block-button__link) {
+.has-link-color a:hover:not(.wp-block-button__link):not(.wp-block-file__button), a:hover:not(.wp-block-button__link):not(.wp-block-file__button) {
 	color: var(--global--color-primary-hover);
 	border-bottom: 1px solid var(--global--color-primary-hover);
 }
@@ -210,7 +210,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 .wp-block a:hover:not(.wp-block-button__link),
 .entry-content a:hover:not(.wp-block-button__link) {
-	border-bottom: 1px solid transparent;
+	border-color: transparent;
 }
 
 .has-main-navigation .site-header {
@@ -298,6 +298,9 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	.site-header .primary-navigation .primary-menu-container a {
 		color: var(--primary-nav--dropdown-color-link);
 	}
+	.site-header .primary-navigation .social-navigation a {
+		color: var(--primary-nav--dropdown-color-link);
+	}
 }
 
 .site-header .primary-navigation button#primary-close-menu {

spearhead/style.css

@@ -197,7 +197,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	transition: all 0.1s ease;
 }
 
-.has-link-color a:hover:not(.wp-block-button__link), a:hover:not(.wp-block-button__link) {
+.has-link-color a:hover:not(.wp-block-button__link):not(.wp-block-file__button), a:hover:not(.wp-block-button__link):not(.wp-block-file__button) {
 	color: var(--global--color-primary-hover);
 	border-bottom: 1px solid var(--global--color-primary-hover);
 }
@@ -210,7 +210,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 .wp-block a:hover:not(.wp-block-button__link),
 .entry-content a:hover:not(.wp-block-button__link) {
-	border-bottom: 1px solid transparent;
+	border-color: transparent;
 }
 
 .has-main-navigation .site-header {
@@ -298,6 +298,9 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	.site-header .primary-navigation .primary-menu-container a {
 		color: var(--primary-nav--dropdown-color-link);
 	}
+	.site-header .primary-navigation .social-navigation a {
+		color: var(--primary-nav--dropdown-color-link);
+	}
 }
 
 .site-header .primary-navigation button#primary-close-menu {