@use 'variables' as *;

.client-dashboard {
  .page-header {
    margin-bottom: $spacing-xs;
  }

  .entry-title:not(.cpt-entry-title) {
    font-size: inherit;
    font-weight: bold;
  }
}

body:not(.cpt-theme) {
  :where(#cpt-nav) {
    background-color: $gray-wash;
    margin-top: $spacing-xs;
    margin-bottom: $spacing-sm;
    padding-top: $spacing-xxs;
    padding-bottom: $spacing-xxs;
    
    .menu {
      display: flex;
      gap: $spacing-xxs $spacing-xs;
      list-style: none;
      margin: 0 auto;
      padding: 0;
  
      @media (max-width: $breakpoint-sm) {
        flex-direction: column;
      }
  
      .menu-item {
        margin: 0;

        a {
          &:not(:hover) {
            text-decoration: none;
          }
  
          &:hover,
          &:focus {
            text-decoration: underline;
          }
        }
      }
  
      > .menu-item-has-children {
        align-items: center;
        display: flex;
        gap: .15em;
        position: relative;
  
        &::after {
          background-image: url(../images/close-opaque.svg);
          background-position: center;
          background-repeat: no-repeat;
          background-size: 50%;
          content: '';
          display: inline-grid;
          height: calc(.9em - 2 * $border-width);;
          place-content: center;
          width: calc(.9em - 2 * $border-width);;
        }
  
        &:hover,
        &:focus {
          cursor: pointer;
  
          > .sub-menu {
            display: block;
          }
  
          &::after {
            content: '\2212'; // "-"
          }
        }
  
        > .sub-menu {
          animation: growDown_centered 150ms ease-in-out forwards;
          background-color: White;
          border: $border;
          box-shadow: $box-shadow;
          display: none;
          list-style: none;
          margin: 0;
          max-width: 230px;
          padding: $spacing-xs;
          position: absolute;
            top: 100%;
            left: 50%;
          transform: translateX(-50%);
          transform-origin: top;
          width: max-content;
          z-index: 10;
  
          @media (max-width: $breakpoint-sm) {
            max-width: calc(100vw - ($spacing-xs * 2));
            width: calc(100vw - ($spacing-xs * 2));
          }
        }

        &.align-submenu-right > .sub-menu {
          animation: growDown 150ms ease-in-out forwards;
          right: 0;
          left: unset;
        }
      }
    }
  
    .sub-menu {
      list-style: none;
  
      > .menu-item {
        &:first-child {
          margin-top: 0;
        }
  
        &:last-child {
          margin-bottom: 0;
        }
      }
  
      .menu-item {
        margin: $spacing-xxs 0;
      }
    }
  }
}

#cpt-breadcrumbs {
  font-size: 80%;
  margin-bottom: $spacing-sm;
}