:where(section.paragraph--type--sub-nav-linking-component) {
  container-type: inline-size;
  container-name: subNavLinkingComponent;

  .sub-nav-item-link {
    transition: all 250ms ease-in-out;
    line-height: 1.1;

    .icon-button-hover {
      display: none;
    }

    .sub-nav-icon,
    .icon-button-hover{
      width: 5.5rem;
      height: auto;
      padding-left: 1rem;
      padding-block: 0.5rem;
    }

    &:hover {

      .sub-nav-icon {
        display: none;
      }

      .icon-button-hover {
        display: inline-block;
      }

    }
  }

  &.sub_nav_core_h1_buttons {

    :where(.sub-nav-items) {
      display: flex;
      justify-content: center;
      flex-flow: row wrap;
      gap: 1.5rem;

      @container subNavLinkingComponent (max-width:1150px) {
        grid-template-columns: repeat(3, 1fr);
      }

      @container subNavLinkingComponent (max-width:850px) {
        grid-template-columns: repeat(2, 1fr);
      }

      @container subNavLinkingComponent (max-width:500px) {
        grid-template-columns: repeat(1, 1fr);
      }

      .single-sub-nav-item {
        color: var(--color-primary-white);
        width: 24%;
        min-width: 25rem;

        .sub-nav-item-link {
          background: var(--color-uw-red);
          color: var(--color-primary-white);
          display: flex;
          flex-flow: row;
          align-items: center;
          gap: 1rem;
          border-radius: 1rem;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
          border: solid var(--color-uw-red) 2px;
          padding-right: 1rem;

          &:hover {
            background: var(--color-primary-white);
            color: var(--color-uw-red);
            text-decoration: none;

          }
        }

      }

    }
  }

  &.sub_nav_action_items {

    --green: #2B8235;
    --red: #9b0000;
    --orange: #D48100;

    :where(.sub-nav-items) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;

      @container subNavLinkingComponent (max-width:1150px) {
        display: flex;
        flex-flow: column;
      }


      .sub-nav-item-link {
        margin-bottom: 1rem;
        line-height: 1.25;
      }

      .sub-nav-title {
        font-size: 1.7rem;
      }

      .single-sub-nav-item {
        display: grid;
        grid-template-columns: 2fr 18rem;
        gap: 2rem;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        padding: 1.5rem 2rem;
        border-radius: 1rem;
        transition: all 200ms ease-in-out;

        @container subNavLinkingComponent (max-width:500px) {
          display: flex;
          flex-flow: column;
        }

        &:hover {
          translate: -2px -2px;
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        }

        .sub-nav-copy {

          display: flex;
          flex-flow: column;

          & > p {
            font-size: 1.7rem;
            line-height: 1.5;
            @container subNavLinkingComponent (max-width:500px) {
              margin-bottom: 0;
            }
          }
        }

        :where(.sub-nav-item-priority) {
          display: flex;
          flex-flow: column;
          justify-content: center;
          align-items: flex-start;
          padding-left: 2rem;
          border-left: solid 1px var(--color-uw-page);

          @container subNavLinkingComponent (max-width:500px) {
            padding-left: 0;
            border-left: none;
            padding-top: 2rem;
            border-top: solid 1px var(--color-uw-page);
          }
        }


        :where(.due-date-label) {
          font-weight: 800;
          font-size: 1.6rem;
          text-transform: uppercase;

        }

        :where(.due-date) {
          font-size: 1.6rem;
          display: flex;
          flex-flow: row;
          align-items: center;
          justify-content: flex-start;

          & > svg {
            transform: translateX(-2rem);
            width: 5rem;
            height: auto;
          }


          & > span {
            background: var(--color-uw-page);
            padding: 1rem 2.5rem 1rem 1rem;
            border-radius: 0.5rem;
            font-size: 1.8rem; /* caj 9/9/25 added to increase date font size */
            font-weight: 700; /* caj 9/9/25 added to increase date font weight */
          }
        }

        .fyi {
          min-width: 8rem;
        }
      }

    }

    :where(.action-item-cta) {
      font-size: 1.7rem;
      text-align: right;
      grid-column: 2;

    }
  }

  &.sub_nav_h2_buttons {
    :where(.sub-nav-items) {
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      gap: 1.5rem;

      @container subNavLinkingComponent (max-width:1150px) {
        grid-template-columns: repeat(3, 1fr);
      }

      @container subNavLinkingComponent (max-width:850px) {
        grid-template-columns: repeat(2, 1fr);
      }

      @container subNavLinkingComponent (max-width:500px) {
        grid-template-columns: repeat(1, 1fr);
      }

      .single-sub-nav-item {
        color: var(--color-uw-red);
        width: 24%;
        min-width: 25rem;


        .sub-nav-item-link {
          color: var(--color-uw-red);
          display: flex;
          flex-flow: row;
          gap: 1rem;
          border-radius: 1rem;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
          padding-right: 2rem;
          line-height: 1.2;

        }

        &.full {
          .sub-nav-item-link {
            background: var(--color-uw-page);
            align-items: center;
            border: solid 2px transparent;

            &:hover {
              background: var(--color-uw-red);
              color: var(--color-primary-white);
              text-decoration: none;
              border: solid 2px var(--color-uw-red);
            }

          }
        }

        &.half {

          & > .sub-nav-item-link {
            display: flex;
            flex-flow: row;
            align-items: center;

            &:hover {
              background: var(--color-uw-red);
              color: var(--color-primary-white);
              text-decoration: none;
            }

            & > img {
              background: var(--color-uw-red);
              border-radius: 1rem;
              padding-inline: 0.5rem;
            }
          }
        }


      }
    }
  }

  &.sub_nav_quick_links {

    :where(.sub-nav-items) {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      column-gap: 4rem;
      row-gap: 2rem;

      @container subNavLinkingComponent (max-width:850px) {
        grid-template-columns: repeat(2, 1fr);
      }

      @container subNavLinkingComponent (max-width:500px) {
        grid-template-columns: repeat(1, 1fr);
      }

      .sub-nav-item-link {
        &:hover {
          text-decoration: none;
        }
      }

    }
  }

}

/* caj 9/9/25 - added code to make sublink quicklinks wrap inline */
.single-sub-nav-item ul {
  margin: 0 0 0 -1em;
}

.single-sub-nav-item ul li {
  list-style-type: none; /* Remove default bullet */
  margin: 0;
  padding: 0;
}

.single-sub-nav-item ul li::marker {
  content: ">  "; /* Set content to the greater than character and trailing space */
}