Seedlet: Add a visual hover indicator for all links (#2373)

* Add more accessible hover/focus styles to text links, site logo, site titles.

* More accessible hover states for post meta.

* More accessible pagination hover states

* More accessible hover states for the primary menu.

* More accessible footer hover states.

* Fix more link colors.

* Correct multi-line underlines in the main nav.

seedlet/assets/css/ie.css

@@ -1521,8 +1521,12 @@ a {
 	text-decoration: none;
 }
 
+a:hover, a:focus {
+	border-bottom-color: transparent;
+}
+
 a:hover {
-	color: #3C8067;
+	color: #000000;
 }
 
 a:focus {
@@ -3012,11 +3016,11 @@ dd {
 }
 
 .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover {
-	color: #3C8067;
+	color: #000000;
 }
 
 .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:focus {
-	color: #3C8067;
+	color: #000000;
 }
 
 .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link__content {
@@ -3094,11 +3098,11 @@ p.has-text-color a {
 }
 
 .a8c-posts-list__item .a8c-posts-list-item__meta a:hover {
-	color: #3C8067;
+	color: #000000;
 }
 
 .a8c-posts-list__item .a8c-posts-list-item__meta a:active {
-	color: #3C8067;
+	color: #000000;
 }
 
 .a8c-posts-list__item .a8c-posts-list-item__edit-link {
@@ -4100,8 +4104,8 @@ table th {
 	color: currentColor;
 }
 
-.site-title a:hover {
-	color: #3C8067;
+.site-title a:hover, .site-title a:focus {
+	background-image: none;
 }
 
 .site-title a:focus {
@@ -4129,7 +4133,7 @@ table th {
 
 a.custom-logo-link,
 nav a {
-	border-bottom: none;
+	border-bottom: 1px solid transparent;
 	text-decoration: none;
 }
 
@@ -4211,15 +4215,15 @@ nav a {
 }
 
 .menu-button-container .button:hover {
-	color: #3C8067;
+	color: #000000;
 }
 
 .primary-navigation .button:hover {
-	color: #3C8067;
+	color: #000000;
 }
 
 .woo-navigation .button:hover {
-	color: #3C8067;
+	color: #000000;
 }
 
 .menu-button-container .button#woo-open-menu .svg-icon {
@@ -4499,35 +4503,6 @@ nav a {
 	}
 }
 
-@media only screen and (min-width: 482px) {
-	.primary-navigation > div > ul > li > a {
-		line-height: 1;
-	}
-	.woo-navigation > div > ul > li > a {
-		line-height: 1;
-	}
-	.primary-navigation > div > ul > li > a:before, .primary-navigation > div > ul > li > a:after,
-	.woo-navigation > div > ul > li > a:before,
-	.woo-navigation > div > ul > li > a:after {
-		content: '';
-		display: block;
-		height: 0;
-		width: 0;
-	}
-	.primary-navigation > div > ul > li > a:before {
-		margin-bottom: -calc(1em + 0);
-	}
-	.woo-navigation > div > ul > li > a:before {
-		margin-bottom: -calc(1em + 0);
-	}
-	.primary-navigation > div > ul > li > a:after {
-		margin-top: -calc(1em + 0);
-	}
-	.woo-navigation > div > ul > li > a:after {
-		margin-top: -calc(1em + 0);
-	}
-}
-
 .primary-navigation > div > ul > li > .sub-menu,
 .woo-navigation > div > ul > li > .sub-menu {
 	position: relative;
@@ -4539,7 +4514,7 @@ nav a {
 		background: #FFFFFF;
 		box-shadow: 1px 1px 3px 0px rgba( 0, 0, 0, 0.2 );
 		left: 0;
-		top: 100%;
+		top: calc(100% - 7px);
 		min-width: max-content;
 		opacity: 0;
 		position: absolute;
@@ -4551,7 +4526,7 @@ nav a {
 		background: #FFFFFF;
 		box-shadow: 1px 1px 3px 0px rgba( 0, 0, 0, 0.2 );
 		left: 0;
-		top: 100%;
+		top: calc(100% - 7px);
 		min-width: max-content;
 		opacity: 0;
 		position: absolute;
@@ -4566,11 +4541,32 @@ nav a {
 }
 
 .primary-navigation .primary-menu > .menu-item:hover > a {
-	color: #3C8067;
+	color: #000000;
 }
 
 .woo-navigation .primary-menu > .menu-item:hover > a {
-	color: #3C8067;
+	color: #000000;
+}
+
+.primary-navigation .primary-menu-container > ul > .menu-item {
+	padding: 7px 0;
+}
+
+.woo-navigation .primary-menu-container > ul > .menu-item {
+	padding: 7px 0;
+}
+
+@media only screen and (min-width: 482px) {
+	.primary-navigation .primary-menu-container > ul > .menu-item {
+		display: flex;
+		align-items: center;
+		padding: 13px;
+	}
+	.woo-navigation .primary-menu-container > ul > .menu-item {
+		display: flex;
+		align-items: center;
+		padding: 13px;
+	}
 }
 
 .primary-navigation .menu-item > a {
@@ -4582,14 +4578,16 @@ nav a {
 }
 
 .primary-navigation .menu-item > a:hover {
-	color: #3C8067;
+	color: #000000;
+	border-color: #3C8067;
 }
 
-.primary-navigation .menu-item > a:focus {
-	color: #3C8067;
+.woo-navigation .menu-item > a:hover {
+	color: #000000;
+	border-color: #3C8067;
 }
 
-.woo-navigation .menu-item > a:hover {
+.primary-navigation .menu-item > a:focus {
 	color: #3C8067;
 }
 
@@ -4607,34 +4605,32 @@ nav a {
 
 .primary-navigation a {
 	color: currentColor;
-	display: block;
+	display: inline;
 	font-family: 'Playfair Display', Georgia, Times, serif;
 	font-size: 32px;
 	font-weight: normal;
-	padding: 7px 0;
 }
 
 .woo-navigation a {
 	color: currentColor;
-	display: block;
+	display: inline;
 	font-family: 'Playfair Display', Georgia, Times, serif;
 	font-size: 32px;
 	font-weight: normal;
-	padding: 7px 0;
 }
 
 @media only screen and (min-width: 482px) {
 	.primary-navigation a {
+		display: block;
 		font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
 		font-size: 16px;
 		font-weight: normal;
-		padding: 13px;
 	}
 	.woo-navigation a {
+		display: block;
 		font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
 		font-size: 16px;
 		font-weight: normal;
-		padding: 13px;
 	}
 }
 
@@ -4660,18 +4656,56 @@ nav a {
 	margin-left: 13px;
 }
 
+@media only screen and (min-width: 482px) {
+	.primary-navigation .sub-menu {
+		padding: 7px 13px;
+	}
+	.woo-navigation .sub-menu {
+		padding: 7px 13px;
+	}
+	.primary-navigation .sub-menu > .menu-item > .sub-menu,
+	.woo-navigation .sub-menu > .menu-item > .sub-menu {
+		padding: 0;
+	}
+	.primary-navigation .sub-menu > .menu-item.menu-item-has-children {
+		padding: 7px 13px 0 0;
+	}
+	.woo-navigation .sub-menu > .menu-item.menu-item-has-children {
+		padding: 7px 13px 0 0;
+	}
+}
+
+.primary-navigation .sub-menu .menu-item {
+	padding-top: 7px;
+	padding-bottom: 7px;
+}
+
+.woo-navigation .sub-menu .menu-item {
+	padding-top: 7px;
+	padding-bottom: 7px;
+}
+
+@media only screen and (min-width: 482px) {
+	.primary-navigation .sub-menu .menu-item {
+		padding-top: 7px;
+		padding-bottom: 7px;
+	}
+	.woo-navigation .sub-menu .menu-item {
+		padding-top: 7px;
+		padding-bottom: 7px;
+	}
+}
+
 .primary-navigation .sub-menu .menu-item a {
+	display: inline;
 	font-size: 24px;
 	font-style: italic;
-	padding-top: 7px;
-	padding-bottom: 7px;
 }
 
 .woo-navigation .sub-menu .menu-item a {
+	display: inline;
 	font-size: 24px;
 	font-style: italic;
-	padding-top: 7px;
-	padding-bottom: 7px;
 }
 
 @media only screen and (min-width: 482px) {
@@ -4691,19 +4725,10 @@ nav a {
 }
 
 @media only screen and (min-width: 482px) {
-	.primary-navigation .menu-item-has-children > a,
-	.woo-navigation .menu-item-has-children > a {
-		padding-right: 0;
-	}
-	.primary-navigation .menu-item-has-children > .svg-icon {
-		display: inline-block;
-		height: 100%;
-		margin-right: 13px;
-	}
+	.primary-navigation .menu-item-has-children > .svg-icon,
 	.woo-navigation .menu-item-has-children > .svg-icon {
 		display: inline-block;
 		height: 100%;
-		margin-right: 13px;
 	}
 }
 
@@ -4754,11 +4779,11 @@ nav a {
 }
 
 .social-navigation a:hover {
-	color: #3C8067;
+	color: #000000;
 }
 
 .social-navigation a:focus {
-	color: #3C8067;
+	color: #000000;
 }
 
 .social-navigation a:active {
@@ -4858,23 +4883,27 @@ nav a {
 	padding-right: 0;
 }
 
-.site-footer > .footer-navigation .footer-menu a {
+.site-footer > .footer-navigation .footer-menu .menu-item {
+	padding: 13px;
+}
+
+.site-footer > .footer-navigation .footer-menu .menu-item a {
 	font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
 	font-size: 16px;
 	font-weight: normal;
-	padding: 13px;
 	color: currentColor;
 }
 
-.site-footer > .footer-navigation .footer-menu a:link, .site-footer > .footer-navigation .footer-menu a:visited, .site-footer > .footer-navigation .footer-menu a:active {
+.site-footer > .footer-navigation .footer-menu .menu-item a:link, .site-footer > .footer-navigation .footer-menu .menu-item a:visited, .site-footer > .footer-navigation .footer-menu .menu-item a:active {
 	color: currentColor;
 }
 
-.site-footer > .footer-navigation .footer-menu a:hover {
-	color: #3C8067;
+.site-footer > .footer-navigation .footer-menu .menu-item a:hover {
+	color: #000000;
+	border-color: #3C8067;
 }
 
-.site-footer > .footer-navigation .footer-menu a:focus {
+.site-footer > .footer-navigation .footer-menu .menu-item a:focus {
 	color: #3C8067;
 }
 
@@ -4894,7 +4923,7 @@ nav a {
 }
 
 .entry-title a:hover {
-	color: #3C8067;
+	color: #000000;
 }
 
 .entry-title a:focus {
@@ -4921,7 +4950,6 @@ nav a {
 
 .entry-content .more-link {
 	display: table;
-	color: inherit;
 	margin-top: 20px;
 }
 
@@ -5001,24 +5029,40 @@ nav a {
 }
 
 .entry-meta a {
-	border-bottom: none;
+	border-color: transparent;
 	color: currentColor;
 }
 
 .entry-footer a {
-	border-bottom: none;
+	border-color: transparent;
 	color: currentColor;
 }
 
 .entry-meta a:hover {
-	color: #3C8067;
+	color: #000000;
 }
 
 .entry-meta a:focus {
-	color: #3C8067;
+	color: #000000;
 }
 
 .entry-footer a:hover {
+	color: #000000;
+}
+
+.entry-footer a:focus {
+	color: #000000;
+}
+
+.entry-meta a:hover {
+	border-color: #3C8067;
+}
+
+.entry-footer a:hover {
+	border-color: #3C8067;
+}
+
+.entry-meta a:focus {
 	color: #3C8067;
 }
 
@@ -5124,7 +5168,8 @@ nav a {
 }
 
 .navigation a:hover {
-	color: #3C8067;
+	color: #000000;
+	border-color: #3C8067;
 }
 
 .navigation a:focus {
@@ -5219,7 +5264,7 @@ nav a {
 }
 
 .pagination .nav-links > *a:hover {
-	color: #3C8067;
+	color: #000000;
 }
 
 .pagination .nav-links > *:last-child {
@@ -5359,11 +5404,11 @@ nav a {
 }
 
 .comment-meta .comment-metadata a:hover {
-	color: #3C8067;
+	color: #000000;
 }
 
 .comment-meta .comment-metadata a:focus {
-	color: #3C8067;
+	color: #000000;
 }
 
 .comment-meta .comment-metadata a:active {
@@ -5830,19 +5875,19 @@ img#wpstats {
 }
 
 .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
-	color: #3C8067;
+	color: #000000;
 }
 
 .wp-block-newspack-blocks-homepage-articles article .entry-title a:focus {
-	color: #3C8067;
+	color: #000000;
 }
 
 .wp-block-a8c-blog-posts article .entry-title a:hover {
-	color: #3C8067;
+	color: #000000;
 }
 
 .wp-block-a8c-blog-posts article .entry-title a:focus {
-	color: #3C8067;
+	color: #000000;
 }
 
 .has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover,
@@ -5960,42 +6005,42 @@ img#wpstats {
 }
 
 .wp-block-newspack-blocks-homepage-articles article .entry-meta a:hover {
-	color: #3C8067;
+	color: #000000;
 	text-decoration: none;
 }
 
 .wp-block-newspack-blocks-homepage-articles article .entry-meta a:active {
-	color: #3C8067;
+	color: #000000;
 	text-decoration: none;
 }
 
 .wp-block-newspack-blocks-homepage-articles article .cat-links a:hover {
-	color: #3C8067;
+	color: #000000;
 	text-decoration: none;
 }
 
 .wp-block-newspack-blocks-homepage-articles article .cat-links a:active {
-	color: #3C8067;
+	color: #000000;
 	text-decoration: none;
 }
 
 .wp-block-a8c-blog-posts article .entry-meta a:hover {
-	color: #3C8067;
+	color: #000000;
 	text-decoration: none;
 }
 
 .wp-block-a8c-blog-posts article .entry-meta a:active {
-	color: #3C8067;
+	color: #000000;
 	text-decoration: none;
 }
 
 .wp-block-a8c-blog-posts article .cat-links a:hover {
-	color: #3C8067;
+	color: #000000;
 	text-decoration: none;
 }
 
 .wp-block-a8c-blog-posts article .cat-links a:active {
-	color: #3C8067;
+	color: #000000;
 	text-decoration: none;
 }
 

seedlet/assets/css/style-editor.css

@@ -27,7 +27,7 @@
 	/* Colors */
 	--global--color-primary: #000000;
 	--global--color-secondary: #3C8067;
-	--global--color-primary-hover: var( --global--color-secondary );
+	--global--color-primary-hover: var( --global--color-primary );
 	--global--color-secondary-hover: #336D58;
 	--global--color-black: black;
 	--global--color-white: white;
@@ -168,6 +168,7 @@
 	--primary-nav--font-style: normal;
 	--primary-nav--font-style-sub-menu-mobile: italic;
 	--primary-nav--font-weight: normal;
+	--primary-nav--line-height: var(--global--line-height-body);
 	--primary-nav--color-link: var(--global--color-primary);
 	--primary-nav--color-link-hover: var(--global--color-primary-hover);
 	--primary-nav--color-text: var(--global--color-foreground);
@@ -223,7 +224,7 @@
 	/* Colors */
 	--global--color-primary: #000000;
 	--global--color-secondary: #3C8067;
-	--global--color-primary-hover: var( --global--color-secondary );
+	--global--color-primary-hover: var( --global--color-primary );
 	--global--color-secondary-hover: #336D58;
 	--global--color-black: black;
 	--global--color-white: white;
@@ -364,6 +365,7 @@
 	--primary-nav--font-style: normal;
 	--primary-nav--font-style-sub-menu-mobile: italic;
 	--primary-nav--font-weight: normal;
+	--primary-nav--line-height: var(--global--line-height-body);
 	--primary-nav--color-link: var(--global--color-primary);
 	--primary-nav--color-link-hover: var(--global--color-primary-hover);
 	--primary-nav--color-text: var(--global--color-foreground);
@@ -506,9 +508,17 @@ body {
 }
 
 .wp-block a:hover, .wp-block a:focus {
+	border-bottom-color: transparent;
+}
+
+.wp-block a:hover {
 	color: var(--global--color-primary-hover);
 }
 
+.wp-block a:focus {
+	color: var(--global--color-secondary);
+}
+
 .wp-block a:active {
 	color: var(--wp--style--color--link, var(--global--color-primary));
 }
@@ -1663,7 +1673,6 @@ pre.wp-block-verse {
 
 .wp-block-a8c-blog-posts .more-link {
 	display: block;
-	color: inherit;
 	margin-top: var(--global--spacing-unit);
 }
 

seedlet/assets/sass/abstracts/_config.scss

@@ -34,7 +34,7 @@ $typescale-ratio: 1.2; // Run ratio math on 1em == $typescale-base * $typescale-
 	/* Colors */
 	--global--color-primary: #000000;
 	--global--color-secondary: #3C8067;
-	--global--color-primary-hover: var( --global--color-secondary );
+	--global--color-primary-hover: var( --global--color-primary );
 	--global--color-secondary-hover: #336D58;
 	--global--color-black: black;
 	--global--color-white: white;

seedlet/assets/sass/base/_editor.scss

@@ -24,9 +24,17 @@ body {
 
 	&:hover,
 	&:focus {
+		border-bottom-color: transparent;
+	}
+
+	&:hover {
 		color: var(--global--color-primary-hover);
 	}
 
+	&:focus {
+		color: var(--global--color-secondary);
+	}
+
 	&:active {
 		color: var( --wp--style--color--link, var(--global--color-primary) );
 	}

seedlet/assets/sass/base/_reset.scss

@@ -86,9 +86,17 @@ a {
 	
 	&:hover,
 	&:focus {
+		border-bottom-color: transparent;
+	}
+
+	&:hover {
 		color: var(--global--color-primary-hover);
 	}
 
+	&:focus {
+		color: var(--global--color-secondary);
+	}
+
 	&:active {
 		color: var( --wp--style--color--link, var(--global--color-primary) );
 	}

seedlet/assets/sass/components/entry/_config.scss

@@ -2,6 +2,7 @@
 	--entry-header--color: var(--global--color-primary);
 	--entry-header--color-link: currentColor;
 	--entry-header--color-hover: var(--global--color-primary-hover);
+	--entry-header--color-focus: var(--global--color-secondary);
 	--entry-header--font-family: var(--heading--font-family);
 	--entry-header--font-size: var(--heading--font-size-h2);
 

seedlet/assets/sass/components/entry/_content.scss

@@ -15,7 +15,6 @@
 
 	.more-link {
 		display: table;
-		color: inherit;
 		margin-top: var(--global--spacing-unit);
 
 		@include media(mobile) {

seedlet/assets/sass/components/entry/_header.scss

@@ -1,7 +1,3 @@
-.entry-header {
-
-}
-
 .entry-title {
 
 	color: var(--entry-header--color);
@@ -13,11 +9,14 @@
 	a {
 		color: var(--entry-header--color-link);
 
-		&:hover,
-		&:focus {
+		&:hover {
 			color: var(--entry-header--color-hover);
 		}
 
+		&:focus {
+			color: var(--entry-header--color-focus);
+		}
+
 		&:active {
 			color: var(--entry-header--color-link);
 		}

seedlet/assets/sass/components/entry/_meta.scss

@@ -27,7 +27,7 @@
 	}
 
 	a {
-		border-bottom: none;
+		border-color: transparent;
 		color: var(--entry-meta--color-link);
 
 		&:hover,
@@ -35,6 +35,14 @@
 			color: var(--entry-meta--color-hover);
 		}
 
+		&:hover {
+			border-color: var(--global--color-secondary);
+		}
+
+		&:focus {
+			color: var(--global--color-secondary);
+		}
+
 		&:active {
 			color: var(--entry-meta--color-link);
 		}

seedlet/assets/sass/components/footer/_footer-navigation.scss

@@ -36,23 +36,29 @@
 			}
 		}
 
-		a {
-			font-family: var(--primary-nav--font-family);
-			font-size: var(--footer--font-size);
-			font-weight: var(--primary-nav--font-weight);
+		.menu-item {
 			padding: var(--primary-nav--padding);
 
-			color: currentColor;
-
-			&:link,
-			&:visited,
-			&:active {
+			a {
+				font-family: var(--primary-nav--font-family);
+				font-size: var(--footer--font-size);
+				font-weight: var(--primary-nav--font-weight);
 				color: currentColor;
-			}
 
-			&:hover,
-			&:focus {
-				color: var(--footer--color-link-hover);
+				&:link,
+				&:visited,
+				&:active {
+					color: currentColor;
+				}
+
+				&:hover {
+					color: var(--footer--color-link-hover);
+					border-color: var(--global--color-secondary);
+				}
+
+				&:focus {
+					color: var(--global--color-secondary);
+				}
 			}
 		}
 	}

seedlet/assets/sass/components/header/_config.scss

@@ -23,6 +23,7 @@
 	--primary-nav--font-style: normal;
 	--primary-nav--font-style-sub-menu-mobile: italic;
 	--primary-nav--font-weight: normal;
+	--primary-nav--line-height: var(--global--line-height-body);
 	--primary-nav--color-link: var(--global--color-primary);
 	--primary-nav--color-link-hover: var(--global--color-primary-hover);
 	--primary-nav--color-text: var(--global--color-foreground);

seedlet/assets/sass/components/header/_header-branding.scss

@@ -44,7 +44,11 @@
 
 		&:hover,
 		&:focus {
-			color: var(--branding--color-link-hover);
+			background-image: none;
+		}
+
+		&:focus {
+			color: var(--global--color-secondary);
 		}
 
 		&::selection {
@@ -80,7 +84,7 @@
 
 a.custom-logo-link,
 nav a {
-	border-bottom: none;
+	border-bottom: 1px solid transparent;
 	text-decoration: none;
 }
 

seedlet/assets/sass/components/header/_primary-navigation.scss

@@ -234,15 +234,6 @@
 			}
 		}
 
-		& > li {
-
-			@include media(mobile) {
-				& > a {
-					@include crop-text(var(--global--line-height-base));
-				}
-			}
-		}
-
 		/* Sub-menus Flyout */
 		& > li > .sub-menu {
 
@@ -253,7 +244,7 @@
 				background: var(--global--color-background);
 				box-shadow: var(--global--elevation);
 				left: 0;
-				top: 100%;
+				top: calc(100% - (0.5 * var(--primary-nav--padding)));
 				min-width: max-content;
 				opacity: 0;
 				position: absolute;
@@ -272,13 +263,28 @@
 		color: var(--primary-nav--color-link-hover);
 	}
 
+	// Top-level Menu Item
+	.primary-menu-container > ul > .menu-item {
+		padding: calc(0.5 * var(--primary-nav--padding)) 0;
+
+		@include media(mobile) {
+			display: flex;
+			align-items: center;
+			padding: var(--primary-nav--padding);
+		}
+	}
+
 	// Menu Item Link Colors
 	.menu-item > a {
 		color: var(--primary-nav--color-link);
 
-		&:hover,
-		&:focus {
+		&:hover {
 			color: var(--primary-nav--color-link-hover);
+			border-color: var(--global--color-secondary);
+		}
+
+		&:focus {
+			color: var(--global--color-secondary);
 		}
 
 		&:active {
@@ -286,20 +292,19 @@
 		}
 	}
 
-	// Menu Item
+	// Menu Item Link
 	a {
 		color: currentColor;
-		display: block;
+		display: inline;
 		font-family: var(--primary-nav--font-family-mobile);
 		font-size: var(--primary-nav--font-size-mobile);
 		font-weight: var(--primary-nav--font-weight);
-		padding: calc(0.5 * var(--primary-nav--padding)) 0;
 
 		@include media(mobile) {
+			display: block;
 			font-family: var(--primary-nav--font-family);
 			font-size: var(--primary-nav--font-size);
 			font-weight: var(--primary-nav--font-weight);
-			padding: var(--primary-nav--padding);
 		}
 
 		& + svg {
@@ -315,20 +320,39 @@
 
 	// Sub-menu depth indicators + text styles
 	.sub-menu {
-
 		list-style: none;
 		margin-left: var(--primary-nav--padding);
 
-		.menu-item a {
+		@include media(mobile) {
+			padding: calc(0.5 * var(--primary-nav--padding)) var(--primary-nav--padding);
+
+			> .menu-item > .sub-menu {
+				padding: 0;
+			}
 
-			font-size: var(--primary-nav--font-size-sub-menu-mobile);
-			font-style: var(--primary-nav--font-style-sub-menu-mobile);
+			> .menu-item.menu-item-has-children {
+				padding: calc(0.5 * var(--primary-nav--padding)) var(--primary-nav--padding) 0 0;
+			}
+		}
+
+		.menu-item {
 			padding-top: calc(0.5 * var(--primary-nav--padding));
 			padding-bottom: calc(0.5 * var(--primary-nav--padding));
 
 			@include media(mobile) {
-				font-size: var(--primary-nav--font-size);
-				font-style: var(--primary-nav--font-style);
+				padding-top: calc(0.5 * var(--primary-nav--padding));
+				padding-bottom: calc(0.5 * var(--primary-nav--padding));
+			}
+
+			a {
+				display: inline;
+				font-size: var(--primary-nav--font-size-sub-menu-mobile);
+				font-style: var(--primary-nav--font-style-sub-menu-mobile);
+
+				@include media(mobile) {
+					font-size: var(--primary-nav--font-size);
+					font-style: var(--primary-nav--font-style);
+				}
 			}
 		}
 	}
@@ -341,14 +365,10 @@
  		}
 
 		@include media(mobile) {
-			> a {
-				padding-right: 0;
-			}
 
 			> .svg-icon {
 				display: inline-block;
 				height: 100%;
-				margin-right: var(--primary-nav--padding);
 			}
 		}
 	}

seedlet/assets/sass/components/pagination/_style.scss

@@ -10,9 +10,13 @@
 	a {
 		color: var(--global--color-primary);
 
-		&:hover,
-		&:focus {
+		&:hover {
 			color: var(--global--color-primary-hover);
+			border-color: var(--global--color-secondary);
+		}
+
+		&:focus {
+			color: var(--global--color-secondary);
 		}
 
 		&:active {

seedlet/assets/sass/vendors/jetpack/blocks/blog-posts/_editor.scss

@@ -87,7 +87,6 @@
 
 	.more-link {
 		display: block;
-		color: inherit;
 		margin-top: var(--global--spacing-unit);
 
 		&:after {

seedlet/style-rtl.css

@@ -93,7 +93,7 @@ Included in theme screenshot.
 	/* Colors */
 	--global--color-primary: #000000;
 	--global--color-secondary: #3C8067;
-	--global--color-primary-hover: var( --global--color-secondary );
+	--global--color-primary-hover: var( --global--color-primary );
 	--global--color-secondary-hover: #336D58;
 	--global--color-black: black;
 	--global--color-white: white;
@@ -231,6 +231,7 @@ Included in theme screenshot.
 	--primary-nav--font-style: normal;
 	--primary-nav--font-style-sub-menu-mobile: italic;
 	--primary-nav--font-weight: normal;
+	--primary-nav--line-height: var(--global--line-height-body);
 	--primary-nav--color-link: var(--global--color-primary);
 	--primary-nav--color-link-hover: var(--global--color-primary-hover);
 	--primary-nav--color-text: var(--global--color-foreground);
@@ -242,6 +243,7 @@ Included in theme screenshot.
 	--entry-header--color: var(--global--color-primary);
 	--entry-header--color-link: currentColor;
 	--entry-header--color-hover: var(--global--color-primary-hover);
+	--entry-header--color-focus: var(--global--color-secondary);
 	--entry-header--font-family: var(--heading--font-family);
 	--entry-header--font-size: var(--heading--font-size-h2);
 	--entry-content--font-family: var(--heading--font-size-h2);
@@ -983,9 +985,17 @@ a {
 }
 
 a:hover, a:focus {
+	border-bottom-color: transparent;
+}
+
+a:hover {
 	color: var(--global--color-primary-hover);
 }
 
+a:focus {
+	color: var(--global--color-secondary);
+}
+
 a:active {
 	color: var(--wp--style--color--link, var(--global--color-primary));
 }
@@ -2762,7 +2772,11 @@ table th,
 }
 
 .site-title a:hover, .site-title a:focus {
-	color: var(--branding--color-link-hover);
+	background-image: none;
+}
+
+.site-title a:focus {
+	color: var(--global--color-secondary);
 }
 
 .site-title a::selection {
@@ -2786,7 +2800,7 @@ table th,
 
 a.custom-logo-link,
 nav a {
-	border-bottom: none;
+	border-bottom: 1px solid transparent;
 	text-decoration: none;
 }
 
@@ -3084,29 +3098,6 @@ nav a {
 	}
 }
 
-@media only screen and (min-width: 482px) {
-	.primary-navigation > div > ul > li > a,
-	.woo-navigation > div > ul > li > a {
-		line-height: var(--global--line-height-base);
-	}
-	.primary-navigation > div > ul > li > a:before, .primary-navigation > div > ul > li > a:after,
-	.woo-navigation > div > ul > li > a:before,
-	.woo-navigation > div > ul > li > a:after {
-		content: '';
-		display: block;
-		height: 0;
-		width: 0;
-	}
-	.primary-navigation > div > ul > li > a:before,
-	.woo-navigation > div > ul > li > a:before {
-		margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
-	}
-	.primary-navigation > div > ul > li > a:after,
-	.woo-navigation > div > ul > li > a:after {
-		margin-top: -calc(.5em * var(--button--line-height) + -.39);
-	}
-}
-
 .primary-navigation > div > ul > li > .sub-menu,
 .woo-navigation > div > ul > li > .sub-menu {
 	position: relative;
@@ -3119,7 +3110,7 @@ nav a {
 		background: var(--global--color-background);
 		box-shadow: var(--global--elevation);
 		right: 0;
-		top: 100%;
+		top: calc(100% - (0.5 * var(--primary-nav--padding)));
 		min-width: max-content;
 		opacity: 0;
 		position: absolute;
@@ -3138,15 +3129,34 @@ nav a {
 	color: var(--primary-nav--color-link-hover);
 }
 
+.primary-navigation .primary-menu-container > ul > .menu-item,
+.woo-navigation .primary-menu-container > ul > .menu-item {
+	padding: calc(0.5 * var(--primary-nav--padding)) 0;
+}
+
+@media only screen and (min-width: 482px) {
+	.primary-navigation .primary-menu-container > ul > .menu-item,
+	.woo-navigation .primary-menu-container > ul > .menu-item {
+		display: flex;
+		align-items: center;
+		padding: var(--primary-nav--padding);
+	}
+}
+
 .primary-navigation .menu-item > a,
 .woo-navigation .menu-item > a {
 	color: var(--primary-nav--color-link);
 }
 
-.primary-navigation .menu-item > a:hover, .primary-navigation .menu-item > a:focus,
-.woo-navigation .menu-item > a:hover,
-.woo-navigation .menu-item > a:focus {
+.primary-navigation .menu-item > a:hover,
+.woo-navigation .menu-item > a:hover {
 	color: var(--primary-nav--color-link-hover);
+	border-color: var(--global--color-secondary);
+}
+
+.primary-navigation .menu-item > a:focus,
+.woo-navigation .menu-item > a:focus {
+	color: var(--global--color-secondary);
 }
 
 .primary-navigation .menu-item > a:active,
@@ -3157,20 +3167,19 @@ nav a {
 .primary-navigation a,
 .woo-navigation a {
 	color: currentColor;
-	display: block;
+	display: inline;
 	font-family: var(--primary-nav--font-family-mobile);
 	font-size: var(--primary-nav--font-size-mobile);
 	font-weight: var(--primary-nav--font-weight);
-	padding: calc(0.5 * var(--primary-nav--padding)) 0;
 }
 
 @media only screen and (min-width: 482px) {
 	.primary-navigation a,
 	.woo-navigation a {
+		display: block;
 		font-family: var(--primary-nav--font-family);
 		font-size: var(--primary-nav--font-size);
 		font-weight: var(--primary-nav--font-weight);
-		padding: var(--primary-nav--padding);
 	}
 }
 
@@ -3192,12 +3201,40 @@ nav a {
 	margin-right: var(--primary-nav--padding);
 }
 
+@media only screen and (min-width: 482px) {
+	.primary-navigation .sub-menu,
+	.woo-navigation .sub-menu {
+		padding: calc(0.5 * var(--primary-nav--padding)) var(--primary-nav--padding);
+	}
+	.primary-navigation .sub-menu > .menu-item > .sub-menu,
+	.woo-navigation .sub-menu > .menu-item > .sub-menu {
+		padding: 0;
+	}
+	.primary-navigation .sub-menu > .menu-item.menu-item-has-children,
+	.woo-navigation .sub-menu > .menu-item.menu-item-has-children {
+		padding: calc(0.5 * var(--primary-nav--padding)) 0 0 var(--primary-nav--padding);
+	}
+}
+
+.primary-navigation .sub-menu .menu-item,
+.woo-navigation .sub-menu .menu-item {
+	padding-top: calc(0.5 * var(--primary-nav--padding));
+	padding-bottom: calc(0.5 * var(--primary-nav--padding));
+}
+
+@media only screen and (min-width: 482px) {
+	.primary-navigation .sub-menu .menu-item,
+	.woo-navigation .sub-menu .menu-item {
+		padding-top: calc(0.5 * var(--primary-nav--padding));
+		padding-bottom: calc(0.5 * var(--primary-nav--padding));
+	}
+}
+
 .primary-navigation .sub-menu .menu-item a,
 .woo-navigation .sub-menu .menu-item a {
+	display: inline;
 	font-size: var(--primary-nav--font-size-sub-menu-mobile);
 	font-style: var(--primary-nav--font-style-sub-menu-mobile);
-	padding-top: calc(0.5 * var(--primary-nav--padding));
-	padding-bottom: calc(0.5 * var(--primary-nav--padding));
 }
 
 @media only screen and (min-width: 482px) {
@@ -3214,15 +3251,10 @@ nav a {
 }
 
 @media only screen and (min-width: 482px) {
-	.primary-navigation .menu-item-has-children > a,
-	.woo-navigation .menu-item-has-children > a {
-		padding-left: 0;
-	}
 	.primary-navigation .menu-item-has-children > .svg-icon,
 	.woo-navigation .menu-item-has-children > .svg-icon {
 		display: inline-block;
 		height: 100%;
-		margin-left: var(--primary-nav--padding);
 	}
 }
 
@@ -3369,20 +3401,28 @@ nav a {
 	padding-left: 0;
 }
 
-.site-footer > .footer-navigation .footer-menu a {
+.site-footer > .footer-navigation .footer-menu .menu-item {
+	padding: var(--primary-nav--padding);
+}
+
+.site-footer > .footer-navigation .footer-menu .menu-item a {
 	font-family: var(--primary-nav--font-family);
 	font-size: var(--footer--font-size);
 	font-weight: var(--primary-nav--font-weight);
-	padding: var(--primary-nav--padding);
 	color: currentColor;
 }
 
-.site-footer > .footer-navigation .footer-menu a:link, .site-footer > .footer-navigation .footer-menu a:visited, .site-footer > .footer-navigation .footer-menu a:active {
+.site-footer > .footer-navigation .footer-menu .menu-item a:link, .site-footer > .footer-navigation .footer-menu .menu-item a:visited, .site-footer > .footer-navigation .footer-menu .menu-item a:active {
 	color: currentColor;
 }
 
-.site-footer > .footer-navigation .footer-menu a:hover, .site-footer > .footer-navigation .footer-menu a:focus {
+.site-footer > .footer-navigation .footer-menu .menu-item a:hover {
 	color: var(--footer--color-link-hover);
+	border-color: var(--global--color-secondary);
+}
+
+.site-footer > .footer-navigation .footer-menu .menu-item a:focus {
+	color: var(--global--color-secondary);
 }
 
 /**
@@ -3400,10 +3440,14 @@ nav a {
 	color: var(--entry-header--color-link);
 }
 
-.entry-title a:hover, .entry-title a:focus {
+.entry-title a:hover {
 	color: var(--entry-header--color-hover);
 }
 
+.entry-title a:focus {
+	color: var(--entry-header--color-focus);
+}
+
 .entry-title a:active {
 	color: var(--entry-header--color-link);
 }
@@ -3422,7 +3466,6 @@ nav a {
 
 .entry-content .more-link {
 	display: table;
-	color: inherit;
 	margin-top: var(--global--spacing-unit);
 }
 
@@ -3492,7 +3535,7 @@ nav a {
 
 .entry-meta a,
 .entry-footer a {
-	border-bottom: none;
+	border-color: transparent;
 	color: var(--entry-meta--color-link);
 }
 
@@ -3502,6 +3545,16 @@ nav a {
 	color: var(--entry-meta--color-hover);
 }
 
+.entry-meta a:hover,
+.entry-footer a:hover {
+	border-color: var(--global--color-secondary);
+}
+
+.entry-meta a:focus,
+.entry-footer a:focus {
+	color: var(--global--color-secondary);
+}
+
 .entry-meta a:active,
 .entry-footer a:active {
 	color: var(--entry-meta--color-link);
@@ -3564,8 +3617,13 @@ nav a {
 	color: var(--global--color-primary);
 }
 
-.navigation a:hover, .navigation a:focus {
+.navigation a:hover {
 	color: var(--global--color-primary-hover);
+	border-color: var(--global--color-secondary);
+}
+
+.navigation a:focus {
+	color: var(--global--color-secondary);
 }
 
 .navigation a:active {

seedlet/style.css

@@ -93,7 +93,7 @@ Included in theme screenshot.
 	/* Colors */
 	--global--color-primary: #000000;
 	--global--color-secondary: #3C8067;
-	--global--color-primary-hover: var( --global--color-secondary );
+	--global--color-primary-hover: var( --global--color-primary );
 	--global--color-secondary-hover: #336D58;
 	--global--color-black: black;
 	--global--color-white: white;
@@ -231,6 +231,7 @@ Included in theme screenshot.
 	--primary-nav--font-style: normal;
 	--primary-nav--font-style-sub-menu-mobile: italic;
 	--primary-nav--font-weight: normal;
+	--primary-nav--line-height: var(--global--line-height-body);
 	--primary-nav--color-link: var(--global--color-primary);
 	--primary-nav--color-link-hover: var(--global--color-primary-hover);
 	--primary-nav--color-text: var(--global--color-foreground);
@@ -242,6 +243,7 @@ Included in theme screenshot.
 	--entry-header--color: var(--global--color-primary);
 	--entry-header--color-link: currentColor;
 	--entry-header--color-hover: var(--global--color-primary-hover);
+	--entry-header--color-focus: var(--global--color-secondary);
 	--entry-header--font-family: var(--heading--font-family);
 	--entry-header--font-size: var(--heading--font-size-h2);
 	--entry-content--font-family: var(--heading--font-size-h2);
@@ -991,9 +993,17 @@ a {
 }
 
 a:hover, a:focus {
+	border-bottom-color: transparent;
+}
+
+a:hover {
 	color: var(--global--color-primary-hover);
 }
 
+a:focus {
+	color: var(--global--color-secondary);
+}
+
 a:active {
 	color: var(--wp--style--color--link, var(--global--color-primary));
 }
@@ -2787,7 +2797,11 @@ table th,
 }
 
 .site-title a:hover, .site-title a:focus {
-	color: var(--branding--color-link-hover);
+	background-image: none;
+}
+
+.site-title a:focus {
+	color: var(--global--color-secondary);
 }
 
 .site-title a::selection {
@@ -2811,7 +2825,7 @@ table th,
 
 a.custom-logo-link,
 nav a {
-	border-bottom: none;
+	border-bottom: 1px solid transparent;
 	text-decoration: none;
 }
 
@@ -3109,29 +3123,6 @@ nav a {
 	}
 }
 
-@media only screen and (min-width: 482px) {
-	.primary-navigation > div > ul > li > a,
-	.woo-navigation > div > ul > li > a {
-		line-height: var(--global--line-height-base);
-	}
-	.primary-navigation > div > ul > li > a:before, .primary-navigation > div > ul > li > a:after,
-	.woo-navigation > div > ul > li > a:before,
-	.woo-navigation > div > ul > li > a:after {
-		content: '';
-		display: block;
-		height: 0;
-		width: 0;
-	}
-	.primary-navigation > div > ul > li > a:before,
-	.woo-navigation > div > ul > li > a:before {
-		margin-bottom: -calc(.5em * var(--button--line-height) + -.38);
-	}
-	.primary-navigation > div > ul > li > a:after,
-	.woo-navigation > div > ul > li > a:after {
-		margin-top: -calc(.5em * var(--button--line-height) + -.39);
-	}
-}
-
 .primary-navigation > div > ul > li > .sub-menu,
 .woo-navigation > div > ul > li > .sub-menu {
 	position: relative;
@@ -3144,7 +3135,7 @@ nav a {
 		background: var(--global--color-background);
 		box-shadow: var(--global--elevation);
 		left: 0;
-		top: 100%;
+		top: calc(100% - (0.5 * var(--primary-nav--padding)));
 		min-width: max-content;
 		opacity: 0;
 		position: absolute;
@@ -3163,15 +3154,34 @@ nav a {
 	color: var(--primary-nav--color-link-hover);
 }
 
+.primary-navigation .primary-menu-container > ul > .menu-item,
+.woo-navigation .primary-menu-container > ul > .menu-item {
+	padding: calc(0.5 * var(--primary-nav--padding)) 0;
+}
+
+@media only screen and (min-width: 482px) {
+	.primary-navigation .primary-menu-container > ul > .menu-item,
+	.woo-navigation .primary-menu-container > ul > .menu-item {
+		display: flex;
+		align-items: center;
+		padding: var(--primary-nav--padding);
+	}
+}
+
 .primary-navigation .menu-item > a,
 .woo-navigation .menu-item > a {
 	color: var(--primary-nav--color-link);
 }
 
-.primary-navigation .menu-item > a:hover, .primary-navigation .menu-item > a:focus,
-.woo-navigation .menu-item > a:hover,
-.woo-navigation .menu-item > a:focus {
+.primary-navigation .menu-item > a:hover,
+.woo-navigation .menu-item > a:hover {
 	color: var(--primary-nav--color-link-hover);
+	border-color: var(--global--color-secondary);
+}
+
+.primary-navigation .menu-item > a:focus,
+.woo-navigation .menu-item > a:focus {
+	color: var(--global--color-secondary);
 }
 
 .primary-navigation .menu-item > a:active,
@@ -3182,20 +3192,19 @@ nav a {
 .primary-navigation a,
 .woo-navigation a {
 	color: currentColor;
-	display: block;
+	display: inline;
 	font-family: var(--primary-nav--font-family-mobile);
 	font-size: var(--primary-nav--font-size-mobile);
 	font-weight: var(--primary-nav--font-weight);
-	padding: calc(0.5 * var(--primary-nav--padding)) 0;
 }
 
 @media only screen and (min-width: 482px) {
 	.primary-navigation a,
 	.woo-navigation a {
+		display: block;
 		font-family: var(--primary-nav--font-family);
 		font-size: var(--primary-nav--font-size);
 		font-weight: var(--primary-nav--font-weight);
-		padding: var(--primary-nav--padding);
 	}
 }
 
@@ -3217,12 +3226,40 @@ nav a {
 	margin-left: var(--primary-nav--padding);
 }
 
+@media only screen and (min-width: 482px) {
+	.primary-navigation .sub-menu,
+	.woo-navigation .sub-menu {
+		padding: calc(0.5 * var(--primary-nav--padding)) var(--primary-nav--padding);
+	}
+	.primary-navigation .sub-menu > .menu-item > .sub-menu,
+	.woo-navigation .sub-menu > .menu-item > .sub-menu {
+		padding: 0;
+	}
+	.primary-navigation .sub-menu > .menu-item.menu-item-has-children,
+	.woo-navigation .sub-menu > .menu-item.menu-item-has-children {
+		padding: calc(0.5 * var(--primary-nav--padding)) var(--primary-nav--padding) 0 0;
+	}
+}
+
+.primary-navigation .sub-menu .menu-item,
+.woo-navigation .sub-menu .menu-item {
+	padding-top: calc(0.5 * var(--primary-nav--padding));
+	padding-bottom: calc(0.5 * var(--primary-nav--padding));
+}
+
+@media only screen and (min-width: 482px) {
+	.primary-navigation .sub-menu .menu-item,
+	.woo-navigation .sub-menu .menu-item {
+		padding-top: calc(0.5 * var(--primary-nav--padding));
+		padding-bottom: calc(0.5 * var(--primary-nav--padding));
+	}
+}
+
 .primary-navigation .sub-menu .menu-item a,
 .woo-navigation .sub-menu .menu-item a {
+	display: inline;
 	font-size: var(--primary-nav--font-size-sub-menu-mobile);
 	font-style: var(--primary-nav--font-style-sub-menu-mobile);
-	padding-top: calc(0.5 * var(--primary-nav--padding));
-	padding-bottom: calc(0.5 * var(--primary-nav--padding));
 }
 
 @media only screen and (min-width: 482px) {
@@ -3239,15 +3276,10 @@ nav a {
 }
 
 @media only screen and (min-width: 482px) {
-	.primary-navigation .menu-item-has-children > a,
-	.woo-navigation .menu-item-has-children > a {
-		padding-right: 0;
-	}
 	.primary-navigation .menu-item-has-children > .svg-icon,
 	.woo-navigation .menu-item-has-children > .svg-icon {
 		display: inline-block;
 		height: 100%;
-		margin-right: var(--primary-nav--padding);
 	}
 }
 
@@ -3394,20 +3426,28 @@ nav a {
 	padding-right: 0;
 }
 
-.site-footer > .footer-navigation .footer-menu a {
+.site-footer > .footer-navigation .footer-menu .menu-item {
+	padding: var(--primary-nav--padding);
+}
+
+.site-footer > .footer-navigation .footer-menu .menu-item a {
 	font-family: var(--primary-nav--font-family);
 	font-size: var(--footer--font-size);
 	font-weight: var(--primary-nav--font-weight);
-	padding: var(--primary-nav--padding);
 	color: currentColor;
 }
 
-.site-footer > .footer-navigation .footer-menu a:link, .site-footer > .footer-navigation .footer-menu a:visited, .site-footer > .footer-navigation .footer-menu a:active {
+.site-footer > .footer-navigation .footer-menu .menu-item a:link, .site-footer > .footer-navigation .footer-menu .menu-item a:visited, .site-footer > .footer-navigation .footer-menu .menu-item a:active {
 	color: currentColor;
 }
 
-.site-footer > .footer-navigation .footer-menu a:hover, .site-footer > .footer-navigation .footer-menu a:focus {
+.site-footer > .footer-navigation .footer-menu .menu-item a:hover {
 	color: var(--footer--color-link-hover);
+	border-color: var(--global--color-secondary);
+}
+
+.site-footer > .footer-navigation .footer-menu .menu-item a:focus {
+	color: var(--global--color-secondary);
 }
 
 /**
@@ -3425,10 +3465,14 @@ nav a {
 	color: var(--entry-header--color-link);
 }
 
-.entry-title a:hover, .entry-title a:focus {
+.entry-title a:hover {
 	color: var(--entry-header--color-hover);
 }
 
+.entry-title a:focus {
+	color: var(--entry-header--color-focus);
+}
+
 .entry-title a:active {
 	color: var(--entry-header--color-link);
 }
@@ -3447,7 +3491,6 @@ nav a {
 
 .entry-content .more-link {
 	display: table;
-	color: inherit;
 	margin-top: var(--global--spacing-unit);
 }
 
@@ -3517,7 +3560,7 @@ nav a {
 
 .entry-meta a,
 .entry-footer a {
-	border-bottom: none;
+	border-color: transparent;
 	color: var(--entry-meta--color-link);
 }
 
@@ -3527,6 +3570,16 @@ nav a {
 	color: var(--entry-meta--color-hover);
 }
 
+.entry-meta a:hover,
+.entry-footer a:hover {
+	border-color: var(--global--color-secondary);
+}
+
+.entry-meta a:focus,
+.entry-footer a:focus {
+	color: var(--global--color-secondary);
+}
+
 .entry-meta a:active,
 .entry-footer a:active {
 	color: var(--entry-meta--color-link);
@@ -3589,8 +3642,13 @@ nav a {
 	color: var(--global--color-primary);
 }
 
-.navigation a:hover, .navigation a:focus {
+.navigation a:hover {
 	color: var(--global--color-primary-hover);
+	border-color: var(--global--color-secondary);
+}
+
+.navigation a:focus {
+	color: var(--global--color-secondary);
 }
 
 .navigation a:active {