@civicactions/cmsds-open-data-components 3.5.0-alpha.3 → 3.5.0

package/dist/main.css

@@ -1,400 +1,5 @@
-.dkan-c-cms-topnav--tagline {
-  color: var(--tag-line--color);
-}
-
-.dkan-c-header--mobile .dkan-c-cms-topnav--tagline {
-  display: none;
-}
-
-.dkan-c-header--desktop .dkan-c-cms-topnav--tagline {
-  border-left: 1px solid var(--tag-line--border-color);
-  align-items: center;
-  display: inline-flex;
-}
-
-:root {
-  --header-nav-icon-link--desktop-width: 240px;
-  --header-nav-icon-link--mobile-width: 90px;
-}
-
-.dkan-c-header-nav-icon-link {
-  border-right: none;
-  align-items: center;
-  display: inline-flex;
-}
-
-.dkan-c-header-nav-icon-link a {
-  border-bottom: none;
-  text-decoration: none;
-  display: inline-block;
-}
-
-.dkan-c-header-nav-icon-link a:focus, .dkan-c-header-nav-icon-link a:hover {
-  background-color: #0000;
-}
-
-.dkan-c-header-nav-icon-link.show-back-arrow a:before {
-  content: "";
-  color: #323a45;
-  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-nav-icon-link img {
-  vertical-align: middle;
-  height: auto;
-  display: inline-block;
-}
-
-.dkan-c-header--mobile .dkan-c-header-nav-icon-link img {
-  width: var(--header-nav-icon-link--mobile-width);
-}
-
-.dkan-c-header--desktop .dkan-c-header-nav-icon-link img {
-  width: var(--header-nav-icon-link--desktop-width);
-}
-
-.dkan-c-cms-topnav {
-  height: 51px;
-}
-
-.dkan-c-cms-topnav > div {
-  height: 100%;
-}
-
-.dkan-c-cms-topnav .dkan-c-cms-topnav-menu a {
-  margin: 3px 7px;
-  display: inline-block;
-}
-
-.dkan-c-cms-topnav--menu ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.dkan-c-cms-topnav .dkan-c-cms-topnav--tagline {
-  height: 100%;
-  margin-left: 16px;
-}
-
-@media screen and (width <= 544px) {
-  .dkan-c-cms-topnav {
-    display: none;
-  }
-}
-
-@media screen and (width >= 1024px) {
-  .dkan-c-cms-topnav {
-    height: 85px;
-  }
-}
-
-.dkan-c-site-menu--sub-menu {
-  list-style: none;
-  display: none;
-}
-
-.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);
-  z-index: 999;
-  margin: 0;
-  padding: 16px;
-  position: absolute;
-  top: 48px;
-  left: 0;
-}
-
-.dkan-c-header--desktop .dkan-c-site-menu--sub-menu a {
-  text-align: left;
-  padding: 16px;
-  display: flex;
-}
-
-.dkan-c-header--desktop .dkan-c-site-menu--sub-menu a span {
-  border-bottom: 2px solid #0000;
-  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-main-navigation--search .dkan-c-header-search--modal-button span {
-  border-bottom: 2px solid #0000;
-}
-
-.dkan-c-header--mobile .dkan-c-nav-menu--mobile {
-  display: none;
-}
-
-.dkan-c-header--mobile .dkan-c-nav-menu--mobile .dkan-c-header-search--modal-button {
-  color: var(--header-nav-link--mobile-color);
-  text-decoration: none;
-}
-
-.dkan-c-header--mobile .dkan-c-nav-menu--mobile .dkan-c-header-search--modal-button:hover, .dkan-c-header--mobile .dkan-c-nav-menu--mobile .dkan-c-header-search--modal-button:focus {
-  color: var(--header-nav-link--mobile-color);
-}
-
-.dkan-c-header--mobile .dkan-c-nav-menu--mobile .dkan-c-header-search--modal-button:hover span, .dkan-c-header--mobile .dkan-c-nav-menu--mobile .dkan-c-header-search--modal-button:focus span {
-  border-bottom-color: var(--header-nav-link--mobile-color);
-}
-
-.dkan-c-header-search--modal-button:before {
-  content: "";
-  text-align: center;
-  vertical-align: middle;
-  box-sizing: content-box;
-  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-main-navigation--search .dkan-c-header-search--modal-button {
-  color: var(--header-nav-search--color);
-  text-decoration: none;
-}
-
-.dkan-c-main-navigation--search .dkan-c-header-search--modal-button:focus, .dkan-c-main-navigation--search .dkan-c-header-search--modal-button:hover {
-  color: var(--header-nav-search--color);
-}
-
-.dkan-c-main-navigation--search .dkan-c-header-search--modal-button:focus span, .dkan-c-main-navigation--search .dkan-c-header-search--modal-button:hover span {
-  border-bottom-color: var(--header-nav-search--color);
-}
-
-.dkan-c-header--desktop .dkan-c-main-navigation--search {
-  border-left: 2px solid var(--header-nav-search--color);
-}
-
-.dkan-c-header--desktop .dkan-c-nav-menu--desktop .dkan-c-main-navigation--search {
-  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;
-}
-
-.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:focus, .dkan-c-header--mobile .dkan-c-header--link-list .dkan-c-header--link + ul a:hover, .dkan-c-header--mobile .dkan-c-header--link-list .dkan-c-header--link + ul a:focus {
-  color: var(--header-nav-link--mobile-color);
-}
-
-.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 + ul a:hover span, .dkan-c-header--mobile .dkan-c-header--link-list .dkan-c-header--link + ul a:focus span {
-  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;
-  transition-property: left;
-  transition-duration: var(--mobile-nav-animation-time);
-  flex: none;
-  width: 100%;
-  max-width: 100%;
-  height: 100%;
-  padding: 50px 0;
-  display: block;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-}
-
-.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;
-}
-
-.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-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;
-}
-
-.dkan-c-header--desktop .dkan-c-header--link-list {
-  flex-direction: row;
-  display: flex;
-}
-
-.dkan-c-header--desktop .dkan-c-nav-menu .dkan-c-top-nav {
-  display: none;
-}
-
-:root {
-  --mobile-menu-button--color: var(--color-white);
-  --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;
-  vertical-align: middle;
-  box-sizing: content-box;
-  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;
-}
-
-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: "";
-}
-
-.dkan-c-cms-topnav-menu ul {
-  justify-content: end;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-div.dkan-c-sidebar-nav .dkan-c--sidebar-nav-wrapper {
-  border-radius: 4px;
-  border-top: 8px solid var(--color-secondary) !important;
-}
-
-.dkan-c-sidebar-nav ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  display: block;
-}
-
-.dkan-c-sidebar-nav-link-status {
-  border: 2px solid var(--color-gray-lighter);
-  border-radius: 2px;
-}
-
-.active .dkan-c-sidebar-nav-link-status {
-  border: 2px solid var(--color-primary-darker);
-  border-radius: 2px;
-}
-
-.dkan-c-sidebar-nav--mobile {
-  margin-bottom: 32px;
-}
-
-.dkan-c-sidebar-nav--mobile .dkan-c-sidebar-nav-menu--open {
-  display: inherit;
-}
-
-.dkan-c-sidebar-nav--mobile .dkan-c-sidebar-nav-menu--close {
-  display: none;
-}
-
-.dkan-c-sidebar-nav--mobile .dkan-c-sidebar-nav--mobile-header {
-  margin-top: -32px;
-  display: flex;
-}
-
-.dkan-c-sidebar-nav--desktop .dkan-c-sidebar-nav--mobile-header {
-  display: none;
-}
-
-.dkan-c-sidebar-nav--mobile {
-  display: inherit;
+nav.dc-c-site-menu .dc-c-header--links a.dc-c-active-link span {
+  border-bottom: 2px solid var(--color-primary-light);
 }
 
 :root {
@@ -606,6 +211,71 @@ div.dkan-c-sidebar-nav .dkan-c--sidebar-nav-wrapper {
   left: 16px;
 }
 
+.dc-c-additional-info-table table {
+  width: 100%;
+}
+
+.dc-c-additional-info-table a {
+  word-break: break-all;
+}
+
+.ds-u-word-break-anywhere {
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
+
+ul.dc-c-resource-full-width {
+  width: 100%;
+}
+
+.dc-c-datadictionary-table .dc-c-datatable th, .dc-c-datadictionary-table .dc-c-datatable td {
+  border-left: 0;
+  border-right: 0;
+}
+
+.dc-c-tooltip-width-override .ds-c-tooltip {
+  width: 500px;
+}
+
+.dc-resource-header:before {
+  content: "";
+  background-color: var(--color-primary-light);
+  width: 48px;
+  height: 4px;
+  margin: 8px 0;
+  display: block;
+}
+
+.dc-truncate {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.dc-c-metadata-description {
+  white-space: pre-line;
+}
+
+.dc-dataset .ds-c-tabs .ds-c-tabs__item {
+  text-decoration: none;
+}
+
+.dc-dataset .ds-c-tabs .ds-c-tabs__item svg {
+  fill: var(--link__color);
+}
+
+.dc-dataset .ds-c-tabs svg {
+  margin-right: 8px;
+}
+
+#main-content {
+  overflow: visible;
+}
+
+.dc-c-word-break--all {
+  word-break: break-all;
+}
+
 .dc-c-datatable {
   border-spacing: 0;
   width: 100%;
@@ -660,19 +330,32 @@ div.dkan-c-sidebar-nav .dkan-c--sidebar-nav-wrapper {
   background-color: var(--color-primary);
 }
 
-.dc-thead--truncated th > div > span {
+thead.dc-thead--truncated th > div {
+  align-items: stretch;
+}
+
+thead.dc-thead--truncated th > div > div {
+  flex: auto;
+  position: relative;
+  overflow: hidden;
+}
+
+thead.dc-thead--truncated th > div > div > span {
   white-space: nowrap;
   text-overflow: ellipsis;
+  width: 100%;
   display: inline-block;
+  position: absolute;
+  left: 0;
   overflow: hidden;
 }
 
-.dc-thead--truncated th > div > span .ds-c-tooltip__container {
+thead.dc-thead--truncated th > div > div > span .ds-c-tooltip__container {
   white-space: wrap;
   font-weight: normal;
 }
 
-.dc-thead--truncated th p {
+thead.dc-thead--truncated th p {
   white-space: normal;
 }
 
@@ -680,6 +363,10 @@ div.dkan-c-sidebar-nav .dkan-c--sidebar-nav-wrapper {
   background-color: var(--table__background-color--striped);
 }
 
+.dc-c-datatable--highlight-row td {
+  background-color: var(--color-info-lighter);
+}
+
 .dc-c-sort--default, .dc-c-sort--asc, .dc-c-sort--desc {
   background: none;
   border: none;
@@ -708,94 +395,105 @@ div.dkan-c-sidebar-nav .dkan-c--sidebar-nav-wrapper {
   content: "";
 }
 
-.dc-c-additional-info-table table {
+dialog.dkan-manage-columns-dialog {
   width: 100%;
+  height: 80vh;
 }
 
-.dc-c-additional-info-table a {
-  word-break: break-all;
+dialog.dkan-manage-columns-dialog .ds-c-dialog__window {
+  min-width: 768px;
+  padding: 0;
 }
 
-.ds-u-word-break-anywhere {
-  word-break: break-word;
-  overflow-wrap: anywhere;
+dialog.dkan-manage-columns-dialog .ds-c-dialog__window .ds-c-dialog__header {
+  padding: 24px;
 }
 
-ul.dc-c-resource-full-width {
-  width: 100%;
+dialog.dkan-manage-columns-dialog .dkan-manage-columns-list {
+  gap: 0;
+  max-height: 350px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  overflow-y: auto;
 }
 
-.dc-c-datadictionary-table .dc-c-datatable th, .dc-c-datadictionary-table .dc-c-datatable td {
-  border-left: 0;
-  border-right: 0;
+dialog.dkan-manage-columns-dialog .dkan-manage-columns-list li {
+  cursor: pointer;
 }
 
-.dc-c-tooltip-width-override .ds-c-tooltip {
-  width: 500px;
+dialog.dkan-manage-columns-dialog .dkan-manage-columns-list .ds-c-choice-wrapper {
+  margin-top: 0;
 }
 
-.dc-resource-header:before {
-  content: "";
-  background-color: var(--color-primary-light);
-  width: 48px;
-  height: 4px;
-  margin: 8px 0;
-  display: block;
+dialog.dkan-manage-columns-dialog .dkan-manage-columns-list .dkan-manage-columns-reorder-button {
+  background: none;
+  border: none;
 }
 
-.dc-truncate {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
+dialog.dkan-manage-columns-dialog .dkan-manage-columns-list .dkan-manage-columns-reorder-button.grabbed {
+  background-color: var(--color-primary-lighter);
 }
 
-.dc-c-metadata-description {
-  white-space: pre-line;
-}
+@media screen and (width <= 767px) {
+  dialog.dkan-manage-columns-dialog {
+    height: 100%;
+  }
 
-.dc-dataset .ds-c-tabs .ds-c-tabs__item {
-  text-decoration: none;
-}
+  dialog.dkan-manage-columns-dialog .ds-c-dialog__window {
+    width: 100%;
+    min-width: auto;
+    height: 100%;
+    margin-top: 0;
+  }
 
-.dc-dataset .ds-c-tabs .ds-c-tabs__item svg {
-  fill: var(--link__color);
+  dialog.dkan-manage-columns-dialog .ds-c-dialog__body > div:not(.ds-c-dialog__actions) {
+    flex-direction: column;
+    display: flex;
+  }
+
+  dialog.dkan-manage-columns-dialog .dkan-manage-columns-list {
+    max-height: calc(100vh - 435px);
+  }
+
+  dialog.dkan-manage-columns-dialog .ds-c-dialog__actions {
+    background-color: #fff;
+    padding-top: 16px;
+    position: absolute;
+    bottom: 0;
+  }
 }
 
-.dc-dataset .ds-c-tabs svg {
-  margin-right: 8px;
+dialog.dkan-full-screen-dataset-dialog > .ds-c-dialog__window {
+  width: 100%;
+  max-width: 100%;
+  margin: 0;
 }
 
-#main-content {
-  overflow: visible;
+dialog.dkan-full-screen-dataset-dialog > .ds-c-dialog__window form {
+  max-width: 1024px;
 }
 
-.dc-c-word-break--all {
-  word-break: break-all;
+dialog.dkan-full-screen-dataset-dialog > .ds-c-dialog__window .dkan-datatable-fullscreen-mode {
+  min-height: calc(100vh - 415px);
+  max-height: calc(100vh - 415px);
+  overflow: hidden;
 }
 
-:root {
-  --mobile-nav-animation-time: 1s;
-  --cms-top-nav-height: 87px;
-  --main-nav-height: 100px;
-  --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-nav-link--mobile-color: var(--color-white);
-  --header-mobile-bg-color: var(--color-gray-dark);
-  --header-submenu--bg-color: var(--color-primary);
-  --header-submenu--width: 300px;
-  --header-nav-search--color: var(--color-white);
-  --tag-line--color: #6f757c;
-  --tag-line--border-color: #6f757c;
+dialog.dkan-full-screen-dataset-dialog > .ds-c-dialog__window .dkan-datatable-fullscreen-mode .dc-c-datatable-wrapper {
+  max-height: calc(100vh - 473px);
 }
 
-.dkan-c-main-navigation > div > div {
-  height: var(--main-nav-height);
+.dc-c-mobile-header--menu :focus {
+  box-shadow: 0 0 0 3px #0000, 0 0 4px 6px #0000;
 }
 
-.dkan-c-header .dkan-c-main-navigation {
-  background-color: var(--header-bg-color);
-  background-image: var(--header-bg-image);
+.dc-c-mobile-header--menu :focus-visible {
+  border-radius: var(--button__border-radius);
+  box-shadow: 0 0 0 3px var(--color-focus-light), 0 0 4px 6px var(--color-focus-dark);
+  outline-offset: 3px;
+  background-color: #0000;
+  outline: 3px solid #0000;
 }
 
 .ds-c-usa-banner__button-text:after {
@@ -862,6 +560,18 @@ ul.dc-c-resource-full-width {
   left: -100%;
 }
 
+.dc-c-mobile-header .dc-c-site-menu--sub-menu {
+  background: none;
+  width: auto;
+  position: relative;
+  top: -24px;
+  left: auto;
+}
+
+.dc-c-mobile-header .dc-c-site-menu--sub-menu a {
+  padding: 8px;
+}
+
 .dc-c-cmsheader {
   background: var(--color-white);
   position: relative;
@@ -895,6 +605,26 @@ ul.dc-c-resource-full-width {
   border-bottom: 2px solid var(--color-primary-light);
 }
 
+.has-submenu > button:after {
+  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;
+}
+
+.has-submenu.open > button:after {
+  content: "";
+}
+
 .dc-c-header--mobile-links button {
   padding: 0;
   font-weight: 700;
@@ -918,6 +648,42 @@ ul.dc-c-resource-full-width {
   left: 0;
 }
 
+.cms-link-container {
+  border-right: none;
+  margin-right: 20px;
+  display: block;
+}
+
+.cms-link-container a {
+  border-bottom: none;
+  margin-right: 20px;
+  text-decoration: none;
+  display: inline-block;
+}
+
+.cms-link-container a:before {
+  content: "";
+  color: #323a45;
+  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;
+}
+
+.cms-link-container img {
+  vertical-align: middle;
+  width: 90px;
+  height: auto;
+  display: inline-block;
+}
+
 .cms-text-container {
   color: #6f757c;
   padding-top: 28px;
@@ -951,6 +717,36 @@ ul.dc-c-resource-full-width {
   }
 }
 
+@media (width >= 1024px) {
+  .cms-link-container {
+    float: left;
+    border-right: 1px solid #d6d7d9;
+    width: 240px;
+    height: 85px;
+  }
+
+  .cms-link-container a {
+    margin-top: 28px;
+    margin-bottom: 20px;
+  }
+
+  .cms-link-container img {
+    vertical-align: middle;
+    width: auto;
+    max-width: 80%;
+    height: auto;
+    display: inline-block;
+  }
+
+  .cms-link-container a:before {
+    width: 28px;
+    height: 28px;
+    margin-left: 0;
+    font-size: 28px;
+    line-height: 28px;
+  }
+}
+
 nav.dc-c-site-menu .dc-c-header--links {
   margin: 0;
   padding: 0;
@@ -993,6 +789,41 @@ nav.dc-c-site-menu .dc-c-header--links a:focus, .dc-c-site-title a:focus {
   text-decoration: none;
 }
 
+nav > ul li ul {
+  display: none;
+}
+
+nav > ul li.open ul {
+  display: block;
+}
+
+li.has-submenu {
+  position: relative;
+}
+
+.dc-c-site-menu--sub-menu {
+  background: var(--color-primary);
+  width: 300px;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  top: 48px;
+  left: 0;
+}
+
+.dc-c-site-menu--sub-menu a {
+  padding: 16px;
+  display: block;
+}
+
+.dc-c-site-menu--sub-menu a span {
+  border-bottom: 2px solid #0000;
+}
+
+.dc-c-site-menu--sub-menu a:hover span, .dc-c-site-menu--sub-menu a:focus span {
+  border-bottom: 2px solid var(--color-primary-light);
+}
+
 .dc-c-site-title a {
   text-decoration: none;
 }
@@ -1018,10 +849,6 @@ nav.dc-c-site-menu .dc-c-header--links a:focus, .dc-c-site-title a:focus {
   display: inline-block;
 }
 
-nav.dc-c-site-menu .dc-c-header--links a.dc-c-active-link span {
-  border-bottom: 2px solid var(--color-primary-light);
-}
-
 .ds-c-button.display-settings-font {
   font: inherit;
 }