/**
 * @file
 * Additional styles for the Red Hat Universal Navigation.
 */

/* Sticky nav. */
rh-navigation-primary.stick-nav {
  position: sticky;
  top: 0;
}

rh-navigation-primary {
  /* Make sure secondary nav doesn't overlap primary nav drop downs. */
  z-index: 103;
  /* Re-name the container so we can access it in the container query. */
  container: navigation-primary / inline-size;
}

/* TODO: Update this when new web component updates are released. */
/* Only show the hat at xs breakpoint. */
rh-navigation-primary [slot="logo"] {
  overflow: hidden;
  width: 42px;

  /* Show the entire logo. */
  @media (min-width: 1440px) {
    width: auto;
  }
}

/* Font size fix for primary nav items. */
rh-navigation-primary-item:not([slot="dropdowns"]) > [slot="summary"] {
  font-size: 1rem;
}

/* Primary nav item layout and styles. */
rh-navigation-primary-item {
  span[slot="summary"] {
    @media (max-width: 1199px) {
      font-weight: 500;
    }
  }

  ul {
    list-style-type: none;
  }

  rh-tag {
    position: relative;
  }

  .nav-layout {
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    margin-top: -16px;

    a {
      border-bottom: 1px dashed transparent;
    }

    a:hover {
      text-decoration: none;
    }

    rh-cta a:hover {
      border-bottom: none;
    }

    .nav-col-1,
    .nav-card-col {
      grid-column: span 1 / span 1;
    }

    @container navigation-primary (min-width: 992px) {
      grid-template-columns: repeat(3, minmax(0, 1fr));

      .nav-col-2,
      .nav-col-1-split {
        grid-column: span 1 / span 1;
      }

      .nav-col-1-split {
        grid-auto-rows: max-content;
      }
    }

    @container navigation-primary (min-width: 1200px) {
      margin-top: 0;
      margin-right: auto;
      margin-left: auto;
      max-width: 1136px;
      grid-template-columns: repeat(4, minmax(0, 1fr));

      .nav-col-1-split,
      .nav-col-2{
        grid-column: span 2 / span 2;
      }

      .nav-col-2 {
        > ul > li > ul {
          columns: 2;
        }
      }

      .nav-col-1-split {
        grid-template-columns: 1fr 1fr;
        gap: 0 32px;

        > ul:nth-child(2),
        .nav-cta {
          margin-top: 0 !important;
        }

        > ul:nth-child(3) {
          margin-top: 1.35rem;
        }
      }
    }

    @container navigation-primary (min-width: 1440px) {
      max-width: 1376px;
    }

    rh-tile {

      h3 {
        --rh-font-size-heading-xs: 1.125rem;
        --rh-tile-link-text-decoration: none;

        > a {
          font-size: 1.125rem;
        }

        + p {
          font-size: 0.875rem;
          font-weight: 400;
          line-height: 21px; /* 150% */
          color: #151515;
        }
      }
    }
  }

  #for-you-mbox {
    max-width: 366px;

    > h3 {
      font-size: 1.125rem;
      line-height: 1.3;
      font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif);
    }

    > p,
    > p a {
      font-size: 0.875rem;
    }

    ul {
      margin-bottom: 0;
      padding-left: 0;

      li {
        font-size: 1rem;
        margin-top: 16px;

        a {
          text-decoration: none;
        }

        a:hover {
          border-bottom: 1px dashed #003366;
        }
      }

      li:first-child {
        margin-top: 0;
      }
    }
  }
}

.nav-card-list,
.nav-col-1,
.nav-col-1-split,
.nav-col-2 {
  rh-cta {
    --rh-font-size-body-text-lg: 1rem;
  }

  ul,
  ol,
  dl {
    margin: 0;
    padding: 0;
  }
  ul:not(:last-child) {
    margin-bottom: 16px;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  p {
    margin: 0 0 16px;
  }


  > ul {
    font-style: normal;
    margin-bottom: 0 !important;

    > li {
      color: #151515;
      font-size: 1.125rem;
      font-weight: 500;
      line-height: 1.5;
      font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif);

      > h2,
      > h3,
      > h4,
      > h5 {
        font-weight: 500;
      }

      > h3 {
        font-size: 1.125rem
      }

      > ul {
        margin-top: 16px;
        margin-bottom: 0;
        padding-left: 0;

        li {
          position: relative;
          width: 100%;
          font-size: 1rem;
          font-weight: 400;
          line-height: 24px;
          font-family: var(--rh-font-family-body-text, RedHatText, "Red Hat Text", Helvetica, Arial, sans-serif);
          margin-top: 16px;

          > img,
          > svg {
            position: absolute;
            width: 36px;

            + a {
              position: relative;
              left: 52px;
              width: calc(100% - 84px);
              display: block;

              &:hover {
                border-bottom: 1px dashed transparent;
              }

              + p {
                 margin-left: 52px;

                + rh-tag {
                  left: 52px;
                }
              }
            }
          }

          > svg {
            fill: red;
          }

          > svg[class=rh-multicolor-icon] {
            fill: inherit;
          }

          a + p {
            font-size: 0.875rem;
            font-weight: 400;
            color: #4d4d4d;
            padding-top: 4px;
            margin-bottom: 0;
          }

          rh-cta {
            a:hover {
              border-bottom: none;
              text-decoration: initial;
            }
          }
        }

        li:has(p) {
          margin-top: 24px;
        }
      }
    }
  }
}

.nav-col-2 {
  > ul > li {
    > ul {
      margin-top: 16px;

      > li {
        break-inside: avoid;
        margin-top: 0;
      }

      > li:has(p) {
        padding-top: 8px;
        margin-top: 0;
        margin-bottom: 16px;
      }
    }

    > ul:last-child {
      margin-top: 0;
    }
  }

  .no-break-after {
    break-after: avoid;
  }
}

.nav-col-1-split {
  display: grid;

  > ul:nth-child(2) {
    margin-top: 24px;
  }
}

/* Card and Card-list. */
.nav-card,
.nav-card-list {
  /* Add support for felt theme preview if it's enabled at the page level. */
  border-radius: var(--felt-preview-border-radius-default, 3px);
  border: 1px solid var(--felt-preview-color-border-subtle, #c7c7c7);
  background: #ffffff;

  rh-cta > a {
    font-size: 1rem !important;
  }
}

.nav-card-list {
  padding: var(--felt-preview-space-xl, 32px);
}

/*
 * In a one-column layout, you can nest a pseudo column under it (this is
 * different from a split column; to configure it, you can check the box
 * "Heading" on the pseudo column's heading, then add links as children under
 * it.) In this case, we want a visual separation between the single column's
 * first set of links and its pseudo column's header.
 */
.nav-col-1 > ul:not(:first-child) > li > h3 {
  margin-top: 16px;
}

/* CTA */
.nav-cta {
  margin-top: 24px !important;

  rh-cta {
    font-size: 1rem;
  }
}

/* Custom classes for controlling link width and icon padding in nav. */
.nav-col-width-80 {
  @media (min-width: 1440px) {
    width: 80%;
  }
}

.nav-layout svg:has(+ .nav-icon-pad-4) {
  padding: 4px;
}

/* For you mbox. */
#main-nav-recommendations.new [icon=notification] {
  position: relative;
}

#main-nav-recommendations.new [icon=notification]::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  background-color: #ee0000;
  top: 1px;
  right: -2px;
  border-radius: 100%;
}

#main-nav-recommendations:not(.new) .notification {
  display: none;
}