better handling of hover states on mobile devices

_assets/src/icon-menu.svg

 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200" viewBox="0 0 200 200">
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
   <rect x="15" y="32" width="170" height="34" fill="#000000" />
   <rect x="15" y="83" width="170" height="34" fill="#000000" />
   <rect x="15" y="134" width="170" height="34" fill="#000000" />

_assets/src/icon-search.svg

 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200" viewBox="0 0 200 200">
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
   <circle cx="75" cy="75" r="60" stroke-width="24" fill="none" stroke="#000000" />
   <circle cx="131" cy="131" r="9" fill="#000000" />
   <polygon points="124.5,137.25 170,191.25 191.25,170 137.25,124.5" fill="#000000" />

_styles/bld/style.css

@@ -61,14 +61,18 @@
   display: block;
   padding: 1.1rem;
 }
-.mobile-nav-icon:hover::before,
-.region-header #block-search-form > h2 > a:hover::before,
-#main-menu > h2 > a:hover::before,
 .mobile-nav-icon:focus::before,
 .region-header #block-search-form > h2 > a:focus::before,
 #main-menu > h2 > a:focus::before {
   filter: invert(50%);
 }
+@media (hover: hover) {
+  .mobile-nav-icon:hover::before,
+  .region-header #block-search-form > h2 > a:hover::before,
+  #main-menu > h2 > a:hover::before {
+    filter: invert(50%);
+  }
+}
 html {
   box-sizing: border-box;
 }
@@ -194,12 +198,16 @@ li a.active {
   text-decoration: none;
   outline: 0;
 }
-a:hover,
-li a.active:hover,
 a:focus,
 li a.active:focus {
   color: #808080;
 }
+@media (hover: hover) {
+  a:hover,
+  li a.active:hover {
+    color: #808080;
+  }
+}
 .text a,
 a.text,
 p a {
@@ -387,10 +395,14 @@ ul li.expanded,
 ul li.leaf {
   padding: 0;
 }
-li a:hover,
 li a:focus {
   color: #808080;
 }
+@media (hover: hover) {
+  li a:hover {
+    color: #808080;
+  }
+}
 .text ul,
 .text ol,
 ul.text,
@@ -734,11 +746,9 @@ input[type="search"]::-webkit-search-decoration {
   }
   nav[role="navigation"] > ul.menu .expanded > a::after {
     content: "▼";
-    filter: invert(20%);
-    font-size: 0.75em;
+    font-size: 0.5625em;
     margin-left: 0.8rem;
   }
-  nav[role="navigation"] > ul.menu > .expanded:hover > a + ul.menu,
   nav[role="navigation"] > ul.menu > .expanded > a:focus + ul.menu {
     margin-top: 0;
     max-height: 100%;
@@ -770,6 +780,13 @@ input[type="search"]::-webkit-search-decoration {
     background-color: transparent;
   }
 }
+@media all and (min-width: 768px) and (hover: hover) {
+  nav[role="navigation"] > ul.menu > .expanded:hover > a + ul.menu {
+    margin-top: 0;
+    max-height: 100%;
+    padding-top: 1.1rem;
+  }
+}
 #block-system-user-menu > div > ul.menu,
 nav[role="navigation"] > ul.menu {
   display: flex;