@civicactions/cmsds-open-data-components 4.2.0-alpha.2 → 4.2.1-alpha.0

package/dist/main.css

@@ -99,34 +99,12 @@
   }
 }
 
-.dkan-c-nav-submenu.has-submenu {
-  display: block !important;
-}
-
-@media only screen and (width >= 544px) {
-  .dkan-dataset-search input {
-    padding-left: 32px;
-  }
-}
-
 .dkan-c-site-menu--sub-menu {
   list-style: none;
   display: none;
   box-shadow: 0 4px 8px #0003;
 }
 
-.dkan-c-nav-submenu {
-  position: relative;
-}
-
-.dkan-c-nav-submenu.open .dkan-c-site-menu--sub-menu {
-  display: block;
-}
-
-.dkan-c-header--mobile .dkan-c-site-menu--sub-menu a svg {
-  display: none;
-}
-
 .dkan-c-header--desktop .dkan-c-site-menu--sub-menu {
   background: var(--header-submenu--bg-color);
   width: var(--header-submenu--width);
@@ -148,256 +126,10 @@
   margin-left: 8px;
 }
 
-.dkan-c-header--desktop .dkan-c-site-menu--sub-menu a:hover span, .dkan-c-header--desktop .dkan-c-site-menu--sub-menu a:focus span {
-  border-bottom-color: var(--header-nav-link--mobile-color);
-}
-
 .dkan-c-header--desktop .dkan-c-site-menu--sub-menu {
   z-index: 999;
 }
 
-.dc-c-search-list-item {
-  list-style: none;
-}
-
-.dc-c-search-list-item ul {
-  gap: 0;
-}
-
-.dc-c-search-list-item li {
-  list-style: none;
-}
-
-.dc-c-search-list-item li:first-child > span {
-  padding-left: 0;
-}
-
-.dc-c-search-list-item li a, .dc-c-search-list-item li button {
-  text-decoration: underline !important;
-}
-
-.dc-c-search-list-item svg {
-  margin-right: 8px;
-}
-
-.dc-c-search-list-item button, .dc-c-search-list-item span > a {
-  font-weight: normal !important;
-}
-
-.dc-c-search-list-item a:visited svg {
-  fill: var(--link__color--visited);
-}
-
-.dc-c-search-list-item a.ds-c-button[href$=".pdf"], .dc-c-search-list-item a.ds-c-button[href$=".csv"], .dc-c-search-list-item a.ds-c-button[href$=".xlsx"], .dc-c-search-list-item a.ds-c-button[href$=".zip"] {
-  position: relative;
-}
-
-.dc-c-search-list-item a.ds-c-button[href$=".pdf"]:after, .dc-c-search-list-item a.ds-c-button[href$=".csv"]:after, .dc-c-search-list-item a.ds-c-button[href$=".xlsx"]:after, .dc-c-search-list-item a.ds-c-button[href$=".zip"]:after {
-  width: 16px;
-  height: 16px;
-  margin-left: 5px;
-  font-family: "Font Awesome 6 Pro", sans-serif;
-  font-weight: lighter;
-  display: inline-block;
-}
-
-.dc-c-search-list-item a.ds-c-button[href$=".pdf"]:after {
-  content: "";
-}
-
-.dc-c-search-list-item a.ds-c-button[href$=".csv"]:after {
-  content: "";
-}
-
-.dc-c-search-list-item a.ds-c-button[href$=".xlsx"]:after {
-  content: "";
-}
-
-.dc-c-search-list-item a.ds-c-button[href$=".zip"]:after {
-  content: "";
-}
-
-.dc-c-search-list-item .ds-c-button {
-  text-decoration: none !important;
-}
-
-.dc-c-search-list-item .ds-c-button svg, .dc-c-search-list-item .ds-c-button:visited svg {
-  fill: var(--color-white);
-}
-
-.dc-c-search-list-item .dkan-disabled-link-wrapper {
-  cursor: not-allowed;
-}
-
-.dc-c-search-list-item .dkan-disabled-link-wrapper .dkan-disabled-link {
-  pointer-events: none;
-  color: #757575;
-}
-
-.dc-c-search-list-item .dkan-disabled-link-wrapper .dkan-disabled-link:active, .dc-c-search-list-item .dkan-disabled-link-wrapper .dkan-disabled-link:hover, .dc-c-search-list-item .dkan-disabled-link-wrapper .dkan-disabled-link:focus {
-  color: #757575;
-}
-
-.dc-c-search-list-item .dkan-disabled-link-wrapper .dkan-disabled-link:active svg, .dc-c-search-list-item .dkan-disabled-link-wrapper .dkan-disabled-link:hover svg, .dc-c-search-list-item .dkan-disabled-link-wrapper .dkan-disabled-link:focus svg {
-  fill: #757575;
-}
-
-.dc-c-search-list-item .dkan-disabled-link-wrapper .dkan-disabled-link svg {
-  fill: #757575 !important;
-}
-
-.dc-c-search-list-item .theme-list {
-  display: inline-block;
-}
-
-.dc-c-search-list-item .theme-list li {
-  letter-spacing: .75px;
-  color: #fff;
-  margin-bottom: 4px;
-  margin-right: 8px;
-  padding: 3px 10px;
-  text-decoration: none;
-  display: inline-block;
-}
-
-.dc-c-search-list-item .theme-list li a {
-  color: #fff;
-  text-decoration: none !important;
-}
-
-.dc-c-search-list-item .theme-list li a:hover, .dc-c-search-list-item .theme-list li a:focus, .dc-c-search-list-item .theme-list li a:visited:focus {
-  outline-offset: 12px;
-  background: unset;
-  text-decoration: underline !important;
-}
-
-.dc-c-search-list-item .dataset-date-item {
-  display: inline-block;
-}
-
-.dataset-date .dataset-date-item {
-  white-space: nowrap;
-}
-
-.dataset-date .dataset-date-item > span {
-  line-height: 1.8rem;
-}
-
-.dataset-date .dataset-date-item .ds-c-tooltip__container {
-  width: 20px;
-  display: inline-block;
-  position: relative;
-  bottom: 10px;
-}
-
-.dataset-date > .bullet-point {
-  font-size: 1.2rem;
-}
-
-@media screen and (width <= 543px) {
-  .dataset-date .bullet-point {
-    display: none;
-  }
-}
-
-.dkan-dataset-search {
-  position: relative;
-}
-
-@media only screen and (width >= 544px) {
-  .dkan-dataset-search input {
-    padding-left: 32px;
-  }
-}
-
-@media only screen and (width <= 544px) {
-  .dkan-dataset-search div.--alt-style input {
-    --text-input__border-radius: 50px;
-    --text-input__border-color: #c6b7b7;
-    height: 61px;
-  }
-}
-
-.dkan-dataset-search .dc-c-search-button-mobile {
-  z-index: 1000;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  height: 3.563rem;
-  position: absolute;
-  top: 2px;
-  right: 18px;
-}
-
-.dkan-dataset-search--facet-container ul {
-  padding-left: 0;
-  list-style: none;
-}
-
-.dkan-dataset-search--clear-all-filters {
-  width: 100%;
-}
-
-.dc-c-search-list-item li a svg, .dc-c-search-list-item li span svg {
-  fill: var(--link__color);
-}
-
-.dc-c-search-list-item li a:visited svg {
-  fill: var(--link__color--visited);
-}
-
-.dc-dataset-search-list {
-  list-style: none;
-}
-
-.dc-search-header {
-  display: relative;
-}
-
-.dc-search-header:after {
-  content: "";
-  background-color: var(--color-primary-light);
-  width: 48px;
-  height: 4px;
-  margin: 16px 0;
-  display: block;
-}
-
-.dataset-results-count {
-  font-weight: bold;
-}
-
-.dkan-dataset-search--facet-container .ds-c-accordion__content {
-  max-height: 32rem;
-}
-
-.dc-dataset-search--clear-all-filters {
-  width: 100%;
-}
-
-.dkan-dataset-search {
-  align-items: flex-start;
-  position: relative;
-}
-
-.dkan-dataset-search input {
-  min-width: 100%;
-}
-
-@media only screen and (width >= 544px) {
-  .dkan-dataset-search input {
-    padding-left: 32px;
-  }
-}
-
-.dkan-dataset-search .ds-c-field__before {
-  top: 12px;
-  left: 16px;
-}
-
-.dkan-dataset-search .ds-c-inline-error {
-  max-width: none;
-}
-
 .dkan-c-main-navigation--search .dkan-c-header-search--modal-button span {
   border-bottom: 2px solid #0000;
 }
@@ -456,18 +188,6 @@
   display: none;
 }
 
-.dkan-c-header--link-list {
-  list-style: none;
-}
-
-.dkan-c-header--wrapper {
-  flex-wrap: nowrap !important;
-}
-
-.dkan-c-header--link-list .dkan-c-header--link span, .dkan-c-header--link-list .dkan-c-header--link + ul a span {
-  border-bottom: 2px solid #0000;
-}
-
 .dkan-c-header--mobile .dkan-c-header--link-list .dkan-c-header--link, .dkan-c-header--mobile .dkan-c-header--link-list .dkan-c-header--link + ul a {
   color: var(--header-nav-link--mobile-color);
   text-decoration: none;
@@ -481,14 +201,6 @@
   border-bottom-color: var(--header-nav-link--mobile-color);
 }
 
-.dkan-c-header--mobile .dkan-c-nav-menu ul {
-  padding-inline-start: 0;
-}
-
-.dkan-c-header--mobile .dkan-c-nav-menu--close {
-  display: none;
-}
-
 .dkan-c-header--mobile .dkan-c-nav-menu--open {
   background-color: var(--header-mobile-bg-color);
   z-index: 500;
@@ -508,43 +220,17 @@
 
 .dkan-c-header--mobile .dkan-c-nav-menu .dkan-c-top-nav {
   display: inherit;
-  padding-top: 8px;
-}
-
-.dkan-c-header--mobile .dkan-c-nav-menu .dkan-c-top-nav:before {
-  background: var(--color-primary-light);
-  content: "";
-  width: 48px;
-  height: 2px;
-  margin-left: 24px;
-  display: block;
-  position: absolute;
-}
-
-.dkan-c-header--mobile .dkan-c-nav-menu .dkan-c-top-nav ul {
-  padding-top: 16px;
-}
-
-.dkan-c-header--desktop ul.dkan-c-header--link-list .dkan-c-header--link, .dkan-c-header--desktop ul.dkan-c-header--link-list .dkan-c-header--link + ul a {
-  color: var(--header-nav-link--color);
-  padding: var(--space, 8px 8px);
-  text-decoration: none;
+  padding-top: 8px;
 }
 
-.dkan-c-header--desktop ul.dkan-c-header--link-list .dkan-c-header--link:hover span, .dkan-c-header--desktop ul.dkan-c-header--link-list .dkan-c-header--link + ul a:hover span {
-  border-bottom-color: var(--header-nav-link--color);
+.dkan-c-header--mobile .dkan-c-nav-menu .dkan-c-top-nav ul {
+  padding-top: 16px;
 }
 
 .dkan-c-header--desktop .dkan-c-header--link-list {
   margin-block: 0;
 }
 
-.dkan-c-header--desktop .dkan-c-main-nav {
-  flex-direction: row;
-  justify-content: end;
-  display: flex;
-}
-
 .dkan-c-header--desktop .dkan-c-nav-menu--mobile-close-button {
   display: none;
 }
@@ -563,18 +249,6 @@
   --mobile-menu-button--hover-color: var(--color-white);
 }
 
-.dkan-c-header--desktop .dkan-c-mobile-menu-button {
-  display: none;
-}
-
-.dkan-c-header--mobile .dkan-c-mobile-menu-button {
-  display: inherit;
-}
-
-button.dkan-c-mobile-menu-button {
-  color: var(--mobile-menu-button--color);
-}
-
 button.dkan-c-mobile-menu-button:before {
   color: var(--mobile-menu-button--color);
   text-align: center;
@@ -591,10 +265,6 @@ button.dkan-c-mobile-menu-button:before {
   display: inline-block;
 }
 
-button.dkan-c-mobile-menu-button:hover, button.dkan-c-mobile-menu-button:hover:before {
-  color: var(--mobile-menu-button--hover-color);
-}
-
 button.dkan-c-mobile-menu-button--open:before {
   content: "";
 }
@@ -662,58 +332,150 @@ div.dkan-c-sidebar-nav .dkan-c--sidebar-nav-wrapper {
   display: inherit;
 }
 
-.dc-c-hero .ds-c-inline-error {
-  max-width: none;
-}
-
-.dc-c-list-item {
+.dc-c-search-list-item {
   list-style: none;
 }
 
-.dc-c-list-item ul {
+.dc-c-search-list-item ul {
   gap: 0;
 }
 
-.dc-c-list-item li {
+.dc-c-search-list-item li {
   list-style: none;
 }
 
-.dc-c-list-item li:first-child > span {
+.dc-c-search-list-item li:first-child > span {
   padding-left: 0;
 }
 
-.dc-c-list-item li a, .dc-c-list-item li button {
+.dc-c-search-list-item li a, .dc-c-search-list-item li button {
   text-decoration: underline !important;
 }
 
-.dc-c-list-item li a svg, .dc-c-list-item li span svg {
-  fill: var(--link__color);
-}
-
-.dc-c-list-item svg {
+.dc-c-search-list-item svg {
   margin-right: 8px;
 }
 
-.dc-c-list-item button, .dc-c-list-item span > a {
+.dc-c-search-list-item button, .dc-c-search-list-item span > a {
   font-weight: normal !important;
 }
 
-.dc-c-list-item a:visited svg {
+.dc-c-search-list-item a:visited svg {
   fill: var(--link__color--visited);
 }
 
-.dc-c-list-item span[id^="dataset-"] + h2 {
-  margin-top: 0;
+.dc-c-search-list-item a.ds-c-button[href$=".pdf"], .dc-c-search-list-item a.ds-c-button[href$=".csv"], .dc-c-search-list-item a.ds-c-button[href$=".xlsx"], .dc-c-search-list-item a.ds-c-button[href$=".zip"] {
+  position: relative;
 }
 
-.dc-c-list-item .ds-c-button {
+.dc-c-search-list-item a.ds-c-button[href$=".pdf"]:after, .dc-c-search-list-item a.ds-c-button[href$=".csv"]:after, .dc-c-search-list-item a.ds-c-button[href$=".xlsx"]:after, .dc-c-search-list-item a.ds-c-button[href$=".zip"]:after {
+  width: 16px;
+  height: 16px;
+  margin-left: 5px;
+  font-family: "Font Awesome 6 Pro", sans-serif;
+  font-weight: lighter;
+  display: inline-block;
+}
+
+.dc-c-search-list-item a.ds-c-button[href$=".pdf"]:after {
+  content: "";
+}
+
+.dc-c-search-list-item a.ds-c-button[href$=".csv"]:after {
+  content: "";
+}
+
+.dc-c-search-list-item a.ds-c-button[href$=".xlsx"]:after {
+  content: "";
+}
+
+.dc-c-search-list-item a.ds-c-button[href$=".zip"]:after {
+  content: "";
+}
+
+.dc-c-search-list-item .ds-c-button {
   text-decoration: none !important;
 }
 
-.dc-c-list-item .ds-c-button svg, .dc-c-list-item .ds-c-button:visited svg {
+.dc-c-search-list-item .ds-c-button svg, .dc-c-search-list-item .ds-c-button:visited svg {
   fill: var(--color-white);
 }
 
+.dc-c-search-list-item .dkan-disabled-link-wrapper {
+  cursor: not-allowed;
+}
+
+.dc-c-search-list-item .dkan-disabled-link-wrapper .dkan-disabled-link {
+  pointer-events: none;
+  color: #757575;
+}
+
+.dc-c-search-list-item .dkan-disabled-link-wrapper .dkan-disabled-link:active, .dc-c-search-list-item .dkan-disabled-link-wrapper .dkan-disabled-link:hover, .dc-c-search-list-item .dkan-disabled-link-wrapper .dkan-disabled-link:focus {
+  color: #757575;
+}
+
+.dc-c-search-list-item .dkan-disabled-link-wrapper .dkan-disabled-link:active svg, .dc-c-search-list-item .dkan-disabled-link-wrapper .dkan-disabled-link:hover svg, .dc-c-search-list-item .dkan-disabled-link-wrapper .dkan-disabled-link:focus svg {
+  fill: #757575;
+}
+
+.dc-c-search-list-item .dkan-disabled-link-wrapper .dkan-disabled-link svg {
+  fill: #757575 !important;
+}
+
+.dc-c-search-list-item .theme-list {
+  display: inline-block;
+}
+
+.dc-c-search-list-item .theme-list li {
+  letter-spacing: .75px;
+  color: #fff;
+  margin-bottom: 4px;
+  margin-right: 8px;
+  padding: 3px 10px;
+  text-decoration: none;
+  display: inline-block;
+}
+
+.dc-c-search-list-item .theme-list li a {
+  color: #fff;
+  text-decoration: none !important;
+}
+
+.dc-c-search-list-item .theme-list li a:hover, .dc-c-search-list-item .theme-list li a:focus, .dc-c-search-list-item .theme-list li a:visited:focus {
+  outline-offset: 12px;
+  background: unset;
+  text-decoration: underline !important;
+}
+
+.dc-c-search-list-item .dataset-date-item {
+  display: inline-block;
+}
+
+.dataset-date .dataset-date-item {
+  white-space: nowrap;
+}
+
+.dataset-date .dataset-date-item > span {
+  line-height: 1.8rem;
+}
+
+.dataset-date .dataset-date-item .ds-c-tooltip__container {
+  width: 20px;
+  display: inline-block;
+  position: relative;
+  bottom: 10px;
+}
+
+.dataset-date > .bullet-point {
+  font-size: 1.2rem;
+}
+
+@media screen and (width <= 543px) {
+  .dataset-date .bullet-point {
+    display: none;
+  }
+}
+
 .dkan-manage-columns-wrapper .fa-columns:before {
   font-size: .75em !important;
 }
@@ -1383,6 +1145,109 @@ dialog.dkan-filter-dataset-dialog .ds-c-dialog__window .ds-c-dialog__actions {
   }
 }
 
+.dc-c-list-item {
+  list-style: none;
+}
+
+.dc-c-list-item ul {
+  gap: 0;
+}
+
+.dc-c-list-item li {
+  list-style: none;
+}
+
+.dc-c-list-item li:first-child > span {
+  padding-left: 0;
+}
+
+.dc-c-list-item li a, .dc-c-list-item li button {
+  text-decoration: underline !important;
+}
+
+.dc-c-list-item li a svg, .dc-c-list-item li span svg {
+  fill: var(--link__color);
+}
+
+.dc-c-list-item svg {
+  margin-right: 8px;
+}
+
+.dc-c-list-item button, .dc-c-list-item span > a {
+  font-weight: normal !important;
+}
+
+.dc-c-list-item a:visited svg {
+  fill: var(--link__color--visited);
+}
+
+.dc-c-list-item span[id^="dataset-"] + h2 {
+  margin-top: 0;
+}
+
+.dc-c-list-item .ds-c-button {
+  text-decoration: none !important;
+}
+
+.dc-c-list-item .ds-c-button svg, .dc-c-list-item .ds-c-button:visited svg {
+  fill: var(--color-white);
+}
+
+.dkan-c-nav-submenu.has-submenu {
+  display: block !important;
+}
+
+@media only screen and (width >= 544px) {
+  .dkan-dataset-search input {
+    padding-left: 32px;
+  }
+}
+
+.dkan-dataset-search {
+  position: relative;
+}
+
+@media only screen and (width >= 544px) {
+  .dkan-dataset-search input {
+    padding-left: 32px;
+  }
+}
+
+@media only screen and (width <= 544px) {
+  .dkan-dataset-search div.--alt-style input {
+    --text-input__border-radius: 50px;
+    --text-input__border-color: #c6b7b7;
+    height: 61px;
+  }
+}
+
+.dkan-dataset-search .dc-c-search-button-mobile {
+  z-index: 1000;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  height: 3.563rem;
+  position: absolute;
+  top: 2px;
+  right: 18px;
+}
+
+.dkan-dataset-search--facet-container ul {
+  padding-left: 0;
+  list-style: none;
+}
+
+.dkan-dataset-search--clear-all-filters {
+  width: 100%;
+}
+
+.dc-c-search-list-item li a svg, .dc-c-search-list-item li span svg {
+  fill: var(--link__color);
+}
+
+.dc-c-search-list-item li a:visited svg {
+  fill: var(--link__color--visited);
+}
+
 :root {
   --su-color--blue-dark: #036;
   --su-color--brown: #884c00;
@@ -1914,6 +1779,55 @@ dialog.dkan-filter-dataset-dialog .ds-c-dialog__window .ds-c-dialog__actions {
   overflow-wrap: anywhere;
 }
 
+.dc-dataset-search-list {
+  list-style: none;
+}
+
+.dc-search-header {
+  display: relative;
+}
+
+.dc-search-header:after {
+  content: "";
+  background-color: var(--color-primary-light);
+  width: 48px;
+  height: 4px;
+  margin: 16px 0;
+  display: block;
+}
+
+.dataset-results-count {
+  font-weight: bold;
+}
+
+.dkan-dataset-search--facet-container .ds-c-accordion__content {
+  max-height: 32rem;
+}
+
+.dc-dataset-search--clear-all-filters {
+  width: 100%;
+}
+
+.dkan-dataset-search {
+  align-items: flex-start;
+  position: relative;
+}
+
+.dkan-dataset-search input {
+  min-width: 100%;
+}
+
+@media only screen and (width >= 544px) {
+  .dkan-dataset-search input {
+    padding-left: 32px;
+  }
+}
+
+.dkan-dataset-search .ds-c-field__before {
+  top: 12px;
+  left: 16px;
+}
+
 ul.dc-c-resource-full-width {
   width: 100%;
 }
@@ -1988,19 +1902,44 @@ ul.dc-c-resource-full-width {
 :root {
   --mobile-nav-animation-time: 1s;
   --main-nav-height: 6.25rem;
+  --header-bg-color: var(--color-primary);
+  --header-bg-image: linear-gradient(90deg,
+    var(--color-primary-darkest) 10%,
+    var(--color-primary) 90%);
+  --header-nav-link--color: var(--color-white);
+  --header-submenu--bg-color: var(--color-primary);
+  --header-submenu--width: 333px;
+  --header-nav-search--color: var(--color-white);
   --tag-line--color: #6f757c;
   --tag-line--border-color: #6f757c;
-  --header-bg-image: none;
-  --header-bg-color: #f7f7f7;
-  --header-mobile-bg-color: var(--color-gray-dark);
-  --header-nav-icon-link--desktop-width: 240px;
-  --header-nav-icon-link--mobile-width: 240px;
-  --header-nav-link--color: var(--color-primary);
-  --header-nav-link--mobile-color: var(--color-white);
-  --header-nav-search--color: var(--color-primary);
-  --mobile-menu-button--color: var(--color-primary);
-  --header-submenu--bg-color: var(--color-white);
-  --header-submenu--width: 450px;
+  --header-mobile-bg-color: var(--color-white);
+  --header-nav-link--mobile-color: var(--color-base);
+  --header-nav-link--mobile-font-size: var(--font-size-md);
+  --header-nav-link--mobile-font-weight: var(--font-weight-body-md, normal);
+  --header-nav-link--mobile-margin-x: 24px;
+  --header-nav-link--mobile-border-radius: 0;
+  --header-nav-link--mobile-hover-bg-color: var(--color-gray-lightest);
+  --header-nav-link--mobile-active-bg-color: var(--color-white);
+  --header-nav-link--mobile-focus-bg-color: var(--color-white);
+  --header-nav-link--mobile-underline-color: transparent;
+  --header-nav-link--mobile-border-color: var(--color-muted);
+  --header-nav-link--mobile-border-width: 1px;
+  --header-main-nav--mobile-border-bottom-color: var(--button__color);
+  --header-main-nav--mobile-border-bottom-width: 2px;
+  --header-submenu--mobile-box-shadow: none;
+  --header-submenu--mobile-gap: 0;
+  --header-submenu-link--mobile-font-size: var(--font-size-sm);
+  --header-submenu-link--mobile-font-weight: var(--font-weight-body-sm);
+  --header-submenu-link--mobile-padding-x: 12px;
+  --header-dataset-submenu--mobile-margin-top: 4px;
+  --header-dataset-submenu-link--mobile-font-size: var(--font-size-sm);
+  --header-dataset-submenu-link--mobile-font-weight: var(--font-weight-body-sm);
+  --header-dataset-submenu-link--mobile-padding-x: 12px;
+  --header-dataset-submenu-count--mobile-color: var(--color-base);
+  --header-top-nav-divider--mobile-display: none;
+  --header-top-nav-link--mobile-border-color: var(--color-muted);
+  --header-top-nav-link--mobile-border-width: 1px;
+  --mobile-menu-button--hover-bg-color: var(--button__background-color--hover, var(--backgroundColor, var(--button__background-color)));
 }
 
 .dkan-c-main-navigation > div > div {
@@ -2019,208 +1958,250 @@ ul.dc-c-resource-full-width {
   padding: 0 !important;
 }
 
-.dc-c-mobile-menu--open {
-  color: var(--color-white);
-  text-decoration: none;
+.dkan-c-header--link-list {
+  list-style: none;
 }
 
-.dc-c-mobile-menu--open:before {
-  content: "";
-  color: var(--color-white);
-  text-align: center;
-  vertical-align: middle;
-  width: 18px;
-  height: 18px;
-  margin-left: 10px;
-  padding-right: 10px;
-  font-family: "Font Awesome 6 Pro";
-  font-size: 18px;
-  font-weight: lighter;
-  line-height: 18px;
-  display: inline-block;
+.dkan-c-header--link-list .dkan-c-header--link span, .dkan-c-header--link-list .dkan-c-header--link + ul a span {
+  border-bottom: 2px solid #0000;
 }
 
-.dc-c-mobile-menu--close {
-  color: var(--color-white);
-  padding-bottom: 16px;
-  padding-left: 0;
+.dkan-c-header--wrapper {
+  flex-wrap: nowrap !important;
+}
+
+.dkan-c-header--desktop .dkan-c-nav-menu--mobile-close-button, .dkan-c-header--desktop .dkan-c-nav-menu .dkan-c-top-nav {
+  display: none;
+}
+
+.dkan-c-header--desktop .dkan-c-header--link-list {
+  flex-direction: row;
+  margin-block: 0;
+  display: flex;
+}
+
+.dkan-c-header--desktop .dkan-c-main-nav {
+  flex-direction: row;
+  justify-content: end;
+  display: flex;
+}
+
+.dkan-c-header--desktop ul.dkan-c-header--link-list .dkan-c-header--link, .dkan-c-header--desktop ul.dkan-c-header--link-list .dkan-c-header--link + ul a {
+  color: var(--header-nav-link--color);
+  padding: var(--space, 8px 8px);
   text-decoration: none;
 }
 
-.dc-c-mobile-menu--close:before {
-  content: "";
-  color: var(--color-white);
-  text-align: center;
-  vertical-align: middle;
-  width: 18px;
-  height: 18px;
-  padding-right: 10px;
-  font-family: "Font Awesome 6 Pro";
-  font-size: 18px;
-  font-weight: lighter;
-  line-height: 18px;
-  display: inline-block;
+.dkan-c-header--desktop ul.dkan-c-header--link-list .dkan-c-header--link:hover span, .dkan-c-header--desktop ul.dkan-c-header--link-list .dkan-c-header--link + ul a:hover span {
+  border-bottom-color: var(--header-nav-link--color);
+}
+
+.dkan-c-header--desktop .dkan-c-site-menu--sub-menu {
+  background: var(--header-submenu--bg-color);
+  width: var(--header-submenu--width);
+  margin: 0;
+  padding: 16px;
+  position: absolute;
+}
+
+.dkan-c-header--desktop .dkan-c-site-menu--sub-menu a {
+  padding: 8px;
+  display: block;
+}
+
+.dkan-c-header--desktop .dkan-c-site-menu--sub-menu a span {
+  border-bottom-color: #0000;
+}
+
+.dkan-c-header--desktop .dkan-c-site-menu--sub-menu a:hover span, .dkan-c-header--desktop .dkan-c-site-menu--sub-menu a:focus span {
+  border-bottom-color: var(--header-nav-link--color);
+}
+
+.dkan-c-header--desktop .ds-c-button:hover {
+  background-color: #0000 !important;
+  border-color: #0000 !important;
+}
+
+.dkan-c-header--desktop .dkan-c-mobile-menu-button {
+  display: none;
+}
+
+.dkan-c-header--mobile .dkan-c-mobile-menu-button {
+  display: inherit;
+}
+
+.dkan-c-header--mobile .dkan-c-nav-menu--close {
+  display: none;
 }
 
-.dc-c-mobile-header--menu {
-  background-color: var(--color-gray-dark);
+.dkan-c-header--mobile .dkan-c-nav-menu--open {
+  background-color: var(--header-mobile-bg-color);
+  max-width: 100%;
+  height: 100%;
+  transition-duration: var(--mobile-nav-animation-time);
   z-index: 500;
-  visibility: hidden;
+  flex: none;
   width: 100%;
-  height: 100%;
   padding: 50px 0;
-  transition: left .7s;
+  transition-property: left;
+  display: block;
   position: fixed;
   top: 0;
   bottom: 0;
-  left: -100%;
+  left: 0;
 }
 
-.dc-c-cmsheader {
-  background: var(--color-white);
-  position: relative;
+.dkan-c-header--mobile .dkan-c-nav-menu ul {
+  padding-inline-start: 0;
 }
 
-.dc-c-cms-mobile-header-menu:before {
-  background: var(--color-primary-light);
-  content: "";
-  width: 48px;
-  height: 2px;
-  margin-bottom: 16px;
-  margin-left: 8px;
-  display: block;
+.dkan-c-header--mobile .dkan-c-header--link-list, .dkan-c-header--mobile .dkan-c-site-menu--sub-menu {
+  gap: var(--header-submenu--mobile-gap);
 }
 
-.dc-c-cms-mobile-header-menu ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
+.dkan-c-header--mobile .dkan-c-header--link-list > li {
+  border-top: var(--header-nav-link--mobile-border-width) solid var(--header-nav-link--mobile-border-color);
+  margin-block: 0;
+  margin-inline: var(--header-nav-link--mobile-margin-x);
 }
 
-.dc-c-cms-mobile-header-menu a, .dc-c-cms-mobile-header-menu a:hover, .dc-c-cms-mobile-header-menu a:focus, .dc-c-cms-mobile-header-menu a:visited {
-  color: var(--color-white);
-  background-color: #0000;
-  border-bottom: 2px solid #0000;
+.dkan-c-header--mobile .dkan-c-header--link-list .dkan-c-header--link, .dkan-c-header--mobile .dkan-c-header--link-list .dkan-c-header--link + ul a {
+  border-radius: var(--header-nav-link--mobile-border-radius);
+  box-sizing: border-box;
+  color: var(--header-nav-link--mobile-color);
+  font-size: var(--header-nav-link--mobile-font-size);
+  font-weight: var(--header-nav-link--mobile-font-weight);
+  margin-block: 0;
+  margin-inline: var(--header-nav-link--mobile-margin-x);
+  text-align: left;
+  width: calc(100% - var(--header-nav-link--mobile-margin-x) - var(--header-nav-link--mobile-margin-x));
+  justify-content: flex-start;
+  align-items: center;
   text-decoration: none;
-  display: inline-block;
+  display: flex;
 }
 
-.dc-c-cms-mobile-header-menu a:hover, .dc-c-cms-mobile-header-menu a:active {
-  border-bottom: 2px solid var(--color-primary-light);
+.dkan-c-header--mobile .dkan-c-header--link-list > li > .dkan-c-header--link {
+  width: 100%;
+  margin-inline: 0;
 }
 
-.dc-c-header--mobile-links button {
-  padding: 0;
-  font-weight: 700;
+.dkan-c-header--mobile .dkan-c-header--link-list .dkan-c-header--link > span, .dkan-c-header--mobile .dkan-c-header--link-list .dkan-c-header--link + ul a > span {
+  text-align: left;
 }
 
-.dc-c-header--mobile-links a {
-  display: block;
+.dkan-c-header--mobile .dkan-c-header--link-list .dkan-c-header--link:hover, .dkan-c-header--mobile .dkan-c-header--link-list .dkan-c-header--link + ul a:hover {
+  background-color: var(--header-nav-link--mobile-hover-bg-color);
+  color: var(--header-nav-link--mobile-color);
 }
 
-.dc-c-mobile-header.menu-open .dc-c-cmsheader {
-  z-index: 501;
-  background-color: #0000;
+.dkan-c-header--mobile .dkan-c-header--link-list .dkan-c-header--link:focus, .dkan-c-header--mobile .dkan-c-header--link-list .dkan-c-header--link:focus-visible, .dkan-c-header--mobile .dkan-c-header--link-list .dkan-c-header--link[aria-expanded="true"], .dkan-c-header--mobile .dkan-c-header--link-list .dkan-c-header--link[aria-expanded="true"]:hover, .dkan-c-header--mobile .dkan-c-header--link-list .dkan-c-header--link[aria-expanded="true"]:focus, .dkan-c-header--mobile .dkan-c-header--link-list .dkan-c-nav-submenu.open > .dkan-c-header--link, .dkan-c-header--mobile .dkan-c-header--link-list .dkan-c-header--link + ul a:focus, .dkan-c-header--mobile .dkan-c-header--link-list .dkan-c-header--link + ul a:focus-visible {
+  background-color: var(--header-nav-link--mobile-focus-bg-color);
+  color: var(--header-nav-link--mobile-color);
 }
 
-.dc-c-mobile-header.menu-open .dc-c-cmsheader-menu a, .dc-c-mobile-header.menu-open button, .dc-c-mobile-header.menu-open .cms-link-container a:before {
-  color: var(--color-white);
+.dkan-c-header--mobile .dkan-c-header--link-list .dkan-c-header--link:active, .dkan-c-header--mobile .dkan-c-header--link-list .dkan-c-header--link:active:hover, .dkan-c-header--mobile .dkan-c-header--link-list .dkan-c-header--link:active:focus, .dkan-c-header--mobile .dkan-c-header--link-list .dkan-c-header--link + ul a:active, .dkan-c-header--mobile .dkan-c-header--link-list .dkan-c-header--link + ul a:active:hover, .dkan-c-header--mobile .dkan-c-header--link-list .dkan-c-header--link + ul a:active:focus {
+  background-color: var(--header-nav-link--mobile-active-bg-color);
+  color: var(--header-nav-link--mobile-color);
 }
 
-.dc-c-mobile-header.menu-open .dc-c-mobile-header--menu {
-  visibility: visible;
-  left: 0;
+.dkan-c-header--mobile .dkan-c-header--link-list .dkan-c-header--link:hover span, .dkan-c-header--mobile .dkan-c-header--link-list .dkan-c-header--link:focus span, .dkan-c-header--mobile .dkan-c-header--link-list .dkan-c-header--link:focus-visible span, .dkan-c-header--mobile .dkan-c-header--link-list .dkan-c-header--link + ul a:hover span, .dkan-c-header--mobile .dkan-c-header--link-list .dkan-c-header--link + ul a:focus span, .dkan-c-header--mobile .dkan-c-header--link-list .dkan-c-header--link + ul a:focus-visible span {
+  border-bottom-color: var(--header-nav-link--mobile-underline-color);
 }
 
-.cms-text-container {
-  color: #6f757c;
-  padding-top: 28px;
-  display: block;
+.dkan-c-header--mobile .dkan-c-nav-submenu > .dkan-c-header--link > :is(svg, .fa, [class*="fa-chevron"]) {
+  align-self: center;
+  margin-left: auto;
 }
 
-.dc-c-cmsheader-menu {
-  margin: 0;
-  padding: 0;
+.dkan-c-header--mobile .dkan-c-main-nav > .dkan-c-header--link-list > li:last-child {
+  border-bottom: var(--header-main-nav--mobile-border-bottom-width) solid var(--header-main-nav--mobile-border-bottom-color);
 }
 
-.dc-c-cmsheader-menu li {
-  list-style: none;
+.dkan-c-header--mobile .dkan-c-top-nav {
+  display: inherit;
+  padding-top: 8px;
 }
 
-.dc-c-cmsheader-menu a {
-  color: #323a45;
-  border-bottom: 1px solid #fff3;
-  margin: 3px 7px;
-  padding: 0;
-  text-decoration: none;
+.dkan-c-header--mobile .dkan-c-top-nav:before {
+  background: var(--color-primary-light);
+  content: "";
+  display: var(--header-top-nav-divider--mobile-display);
+  width: 48px;
+  height: 2px;
+  margin-left: 24px;
+  position: absolute;
 }
 
-.dc-c-cmsheader-menu a:hover, .dc-c-cmsheader-menu a:active {
-  border-bottom: 2px solid #323a45;
+.dkan-c-header--mobile .dkan-c-top-nav ul {
+  padding-top: 16px;
 }
 
-@media (width >= 544px) {
-  .dc-c-main-navigation--search, .dc-c-mobile-menu--search {
-    border-left: 1px solid var(--color-white);
-  }
+.dkan-c-header--mobile .dkan-c-top-nav > .dkan-c-header--link-list > li {
+  border-top: 0;
+  border-bottom: var(--header-top-nav-link--mobile-border-width) solid var(--header-top-nav-link--mobile-border-color);
 }
 
-nav.dc-c-site-menu .dc-c-header--links {
-  margin: 0;
-  padding: 0;
+.dkan-c-header--mobile .dkan-c-site-menu--sub-menu {
+  box-shadow: var(--header-submenu--mobile-box-shadow);
 }
 
-nav.dc-c-site-menu .dc-c-header--links li {
-  height: 100%;
-  list-style: none;
+.dkan-c-header--mobile .dkan-c-site-menu--sub-menu a svg {
+  display: none;
 }
 
-nav.dc-c-site-menu .dc-c-header--links button {
-  border: none;
-  font-size: 16px;
-  text-decoration: none;
+.dkan-c-header--mobile .dkan-c-site-menu--sub-menu .dkan-c-header--link, .dkan-c-header--mobile .dkan-c-site-menu--sub-menu .dkan-c-header--link > span {
+  font-size: var(--header-submenu-link--mobile-font-size);
+  font-weight: var(--header-submenu-link--mobile-font-weight);
 }
 
-nav.dc-c-site-menu .dc-c-header--links button span {
-  border-bottom: 2px solid #0000;
+.dkan-c-header--mobile ul.dkan-c-site-menu--sub-menu .dkan-c-header--link {
+  padding-inline: var(--header-submenu-link--mobile-padding-x);
 }
 
-nav.dc-c-site-menu .dc-c-header--links a {
-  padding: var(--space, 8px 24px);
-  text-decoration: none;
+.dkan-c-header--mobile section.dkan-c-site-menu--sub-menu {
+  margin-top: var(--header-dataset-submenu--mobile-margin-top);
 }
 
-nav.dc-c-site-menu .dc-c-header--links a span {
-  border-bottom: 2px solid #0000;
+.dkan-c-header--mobile section.dkan-c-site-menu--sub-menu .dc-c-list-item .dkan-c-header--link {
+  padding-inline: var(--header-dataset-submenu-link--mobile-padding-x);
 }
 
-nav.dc-c-site-menu .dc-c-header--links > li:hover > button span, nav.dc-c-site-menu .dc-c-header--links > li button:focus span, nav.dc-c-site-menu .dc-c-header--links > li button:hover span, nav.dc-c-site-menu .dc-c-header--links > li:hover > a span, nav.dc-c-site-menu .dc-c-header--links > li:focus > a span, nav.dc-c-site-menu .dc-c-header--links > li a:hover span, nav.dc-c-site-menu .dc-c-header--links > li a:focus span {
-  border-bottom: 2px solid var(--color-primary-light);
+.dkan-c-header--mobile section.dkan-c-site-menu--sub-menu .dc-c-list-item .ds-text-heading--md {
+  font-size: var(--header-dataset-submenu-link--mobile-font-size);
+  font-weight: var(--header-dataset-submenu-link--mobile-font-weight);
 }
 
-nav.dc-c-site-menu .dc-c-header--links a:focus, .dc-c-site-title a:focus {
-  box-shadow: 0 0 0 3px var(--color-focus-light), 0 0 4px 6px var(--color-focus-dark);
-  outline-offset: 3px;
-  border-radius: var(--button__border-radius);
-  background-color: #0000;
-  outline: 3px solid #0000;
-  text-decoration: none;
+.dkan-c-header--mobile section.dkan-c-site-menu--sub-menu .ds-u-margin-y--0.ds-u-font-size--sm {
+  color: var(--header-dataset-submenu-count--mobile-color);
 }
 
-.dc-c-site-title a {
-  text-decoration: none;
+.dkan-c-header--desktop .dkan-c-site-menu--sub-menu, .dkan-c-header--mobile .dkan-c-site-menu--sub-menu {
+  list-style: none;
+  display: none;
 }
 
-.dc-c-mobile-menu--search {
-  display: inherit;
+.dkan-c-nav-submenu {
+  position: relative;
 }
 
-.dc-c-search-modal--button:before {
-  content: "";
-  color: var(--color-white);
+.dkan-c-nav-submenu.open .dkan-c-site-menu--sub-menu {
+  display: block;
+}
+
+button.dkan-c-mobile-menu-button {
+  color: var(--mobile-menu-button--color);
+}
+
+button.dkan-c-mobile-menu-button:hover, button.dkan-c-mobile-menu-button:active {
+  background-color: var(--mobile-menu-button--hover-bg-color);
+}
+
+button.dkan-c-mobile-menu-button:before {
+  box-sizing: content-box;
+  color: var(--mobile-menu-button--color);
   text-align: center;
   vertical-align: middle;
-  box-sizing: content-box;
   width: 18px;
   height: 18px;
   margin-left: 10px;
@@ -2232,6 +2213,26 @@ nav.dc-c-site-menu .dc-c-header--links a:focus, .dc-c-site-title a:focus {
   display: inline-block;
 }
 
+button.dkan-c-mobile-menu-button:hover, button.dkan-c-mobile-menu-button:hover:before {
+  color: var(--mobile-menu-button--hover-color);
+}
+
+button.dkan-c-mobile-menu-button.dkan-c-mobile-menu-button--open:before {
+  content: "";
+}
+
+@media only screen and (width <= 1023px) {
+  .dkan-c-header--mobile .dkan-c-header-nav-icon-link {
+    justify-content: center;
+    width: 100%;
+    display: flex;
+  }
+
+  .dkan-c-header--mobile .dkan-c-header-nav-icon-link img {
+    width: var(--header-nav-icon-link--mobile-width) !important;
+  }
+}
+
 nav.dc-c-site-menu .dc-c-header--links a.dc-c-active-link span {
   border-bottom: 2px solid var(--color-primary-light);
 }