/* ==================================================HEADER===================================== */
header {
  .banner-bar {
    h2 {
      font-size: 0.8rem;
    }

    .btn,
    .btn:hover,
    .btn:focus,
    .btn-active {
      padding: 0.375rem .5rem;
      font-size: 0.8rem;
    }
  }

  .global-alert {

    a,
    a:hover {
      text-decoration: none;
    }

    .global-alert-link {
      font-size: 0.85rem;
    }

    .global-alert-message {

      p,
      a,
      a:hover {
        font-size: 1rem;
      }
    }
  }

  .navbar {
    ul {
      list-style: none;
      padding: 0;
    }

    a,
    a:hover {
      text-decoration: none;

    }

    .img-icon {
      width: 1.75rem;
    }

    .navbar-brand {
      img {
        width: 8rem;
      }
    }

    .container--hamburger {
      width: 25%;

      .navbar-toggler {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        -o-border-radius: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        gap: 0.35rem;



        .navbar-toggle-icon {
          width: 2rem;
          height: 2px;
          background-color: var(--csk-placeholder-text, #777);
          position: relative;
          transform-origin: left;
          transition: transform 0.3s ease-in-out;

          &:nth-of-type(2) {
            width: 1.35rem;
          }
        }

        &.active,
        &.open {
          .navbar-toggle-icon:first-of-type {
            transform: rotate(45deg);
            top: -7px;
          }

          .navbar-toggle-icon:nth-of-type(2) {
            display: none;
          }

          .navbar-toggle-icon:last-of-type {
            transform: rotate(-45deg);
            top: 7px;
          }

        }
      }
    }

    .navbar-expand-lg {
      .navbar-nav {
        .nav-link {
          font-size: 1rem;
          text-transform: uppercase;
          color: var(--csk-orange, #C16436);
          transition: color 0.3s ease-in-out;
          padding: 0;
          text-decoration: none;
          border-bottom: 5px solid transparent;

          &:visited {
            text-decoration: none;
            border-bottom: 5px solid transparent;
          }

          &:focus,
          &:active,
          &:hover {
            text-decoration: none;
            border-bottom: 5px solid var(--csk-orange, #C16436);
          }

        }
      }
    }

    .container--cart {
      width: 25%;

      #selected-location {
        display: none;
      }

      .navbar__cart {
        .cart-toggler {
          & .cart-has-fooditem {
            .cart-item-count {
              display: flex;
            }
          }

          .cart-item-count {
            width: 1.25rem;
            height: 1.25rem;
            border-radius: 50%;
            background-color: var(--csk-orange, #C16436);
            border: 1px solid #fff;
            color: #fff;
            text-align: center;
            font-size: 0.75rem;
            position: absolute;
            bottom: 0.5rem;
            right: -0.25rem;
            display: none;
            /* hide by default */
            align-items: center;
            justify-content: center;
          }
        }

        .cart-empty-popup {
          position: absolute;
          background-color: #fff;
          border: 1px solid var(--csk-orange, #C16436);
          padding: 1.5rem;
          top: 5rem;
          right: 0.3rem;
          max-width: 22rem;
          color: var(--bb-dim-gray, rgb(80, 80, 80));
          z-index: 3;
          display: block;

          &.hidden {
            display: none;
          }


          h2 {
            font-size: 1.25rem;
          }

          .arrow {
            position: absolute;
            width: 15px;
            height: 15px;
            border-width: 1px;
            border-style: solid;
            border-top-color: var(--csk-orange, #C16436);
            border-left-color: var(--csk-orange, #C16436);
            border-bottom-color: #fff;
            border-right-color: #fff;
            transform: rotate(45deg);
            top: -8px;
            right: 2rem;
            background-color: #fff;
          }
        }


      }

      .navbar__location {

        a,
        a span {

          color: var(--csk-orange, #C16436);
          transition: color 0.3s ease-in-out;
          -webkit-transition: color 0.3s ease-in-out;
          -moz-transition: color 0.3s ease-in-out;
          -ms-transition: color 0.3s ease-in-out;
          -o-transition: color 0.3s ease-in-out;
        }

        &.selected-location {

          a,
          a span,
          div {
            font-size: 0.875rem;
          }
        }

        &.select-location {

          a,
          a span {
            font-size: 1rem;
          }
        }

      }

      .navbar__account {
        a {
          font-size: 1rem;
        }
      }

    }

  }

  .nav--mobile {
    height: 100vh;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 7.6rem;
    padding-bottom: 8rem;
    left: 0;
    background-color: #fff;
    overflow-x: hidden;
    overflow-y: auto;

    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: 0.5s;
    display: none;

    &.show,
    &.active {
      width: 100vw;
      display: block;
    }

    .navbar-nav {
      .nav-link {
        padding: 0.25rem 1rem;
      }
    }

    a,
    a:visited,
    a:hover,
    a:active {
      color: var(--csk-navy-blue, #002147);
    }


    .nav--mobile__primary {

      a,
      a:visited,
      a:hover,
      a:active {
        font-size: 1.75rem;
      }
    }

    .nav--mobile__secondary {

      a,
      a:visited,
      a:hover,
      a:active {
        font-size: 1.125rem;
      }
    }

  }

  @media (min-width:375px) {
    .banner-bar {
      h2 {
        font-size: 0.935rem;
      }


    }
  }

  @media (min-width:390px) {
    .banner-bar {

      .btn,
      .btn:hover,
      .btn:focus,
      .btn-active {
        font-size: 1rem;
      }
    }
  }

  @media (min-width:540px) {
    .banner-bar {
      h2 {
        font-size: 1.25rem;
      }

      .btn,
      .btn:hover,
      .btn:focus,
      .btn-active {
        font-size: 1.125rem;
      }

    }
  }

  @media (min-width:768px) {
    .banner-bar {
      h2 {
        font-size: 1.125rem;
      }

      .btn,
      .btn:hover,
      .btn:focus,
      .btn-active {
        font-size: 1rem;
        padding: .375rem 1.5rem;
      }

    }
  }

  @media (min-width:992px) {
    .navbar {
      .container--cart {
        width: 40%;

        .navbar__cart {
          .cart-toggler {
            .cart-item-count {
              bottom: 0.75rem;
            }
          }
        }

        .navbar__account {
          a {
            &.navbar__account--login {
              font-size: 1rem;
            }

            &.navbar__account--logout {
              font-size: 0.875rem;
            }
          }
        }
      }
    }


  }

  @media (min-width:1200px) {

    .navbar-expand-lg {
      .navbar-nav {
        .nav-link {
          font-size: 1.125rem;

        }
      }
    }

  }

}

/* ==================================================FOOTER===================================== */
.section-subfooter {

  .btn,
  .btn:hover,
  .btn:focus,
  .btn-active {
    padding: .375rem 0.75rem;
    font-size: 0.8rem;
  }

  h2 {
    font-size: 0.93rem;

    a,
    a:visisted,
    a:hover,
    a:focus {
      font-size: 0.93rem;
    }
  }

  @media (min-width:375px) {
    h2 {
      font-size: 1rem;

      a,
      a:visisted,
      a:hover,
      a:focus {
        font-size: 1rem;
      }
    }
  }

  @media (min-width:390px) {

    .btn,
    .btn:hover,
    .btn:focus,
    .btn-active {
      font-size: 1rem;
    }
  }

  @media (min-width:540px) {
    h2 {
      font-size: 1.125rem;

      a,
      a:visisted,
      a:hover,
      a:focus {
        font-size: 1.125rem;
      }
    }
  }


}

footer {
  ul {
    list-style: none;
    padding: 0;
  }


  .footer-nav {
    ul {
      li {
        a {
          font-size: 1rem;
          line-height: 1.3;
          display: block;
          padding: 0;

        }
      }
    }
  }

  .footer-nav__social {
    h3 {
      font-size: 1rem;
    }

    ul {
      -moz-column-gap: 0.75rem;
      column-gap: 0.75rem;

      li {
        .img-social {
          width: 2rem;
        }
      }
    }


  }

  .footer__copyright {
    p {
      font-size: 0.75rem;
    }
  }

  @media (min-width:992px) {
    .footer-nav {
      ul {
        li {
          a {

            &::after {
              content: "|";
              display: inline-flex;
              padding-left: 0.5rem;
            }
          }

          &:last-child a {
            &::after {
              content: "";
              display: none;
            }
          }
        }
      }
    }
  }

}

/* ==================================================PAGES===================================== */
.page--equity {
  .section-item__intro {
    h2 {
      font-size: 2rem;
    }

    h3 {
      font-size: 0.85rem;
    }
  }

  .section-item__details {
    .card {
      -webkit-border-radius: 25px;
      -moz-border-radius: 25px;
      -ms-border-radius: 25px;
      -o-border-radius: 25px;
      border-radius: 25px;

      .card__wrapper {
        overflow: hidden;
        -webkit-border-radius: 22px;
        -moz-border-radius: 22px;
        -ms-border-radius: 22px;
        -o-border-radius: 22px;
        border-radius: 22px;

        .card-image {
          img {
            border-top-left-radius: 22px;
            border-top-right-radius: 22px;
            border-bottom-left-radius: 0px;
            border-bottom-right-radius: 0px;
          }
        }
      }

      .card-content {
        h3 {
          .font-satisfy {
            font-size: 1.75rem;
          }

          .font-roboto-condensed {
            font-size: 1rem;
          }
        }

        p {
          font-size: 1rem;
        }
      }
    }
  }

  @media (min-width:360px) {
    .section-item__intro {
      h2 {
        font-size: 2.25rem;
      }

      h3 {
        font-size: 0.93rem;
      }
    }

    .section-item__details {
      .card {
        .card-content {
          h3 {
            .font-satisfy {
              font-size: 1.75rem;
            }

            .font-roboto-condensed {
              font-size: 1.125rem;
            }
          }
        }
      }
    }
  }

  @media (min-width:390px) {
    .section-item__intro {
      h3 {
        font-size: 1rem;
      }
    }

    .section-item__details {
      .card {
        .card-content {
          h3 {
            .font-satisfy {
              font-size: 2rem;
            }
          }
        }
      }
    }
  }

  @media (min-width:430px) {
    .section-item__intro {
      h2 {
        font-size: 2.5rem;
      }

      h3 {
        font-size: 1.125rem;
      }
    }

    .section-item__details {
      .card {
        .card-content {
          h3 {
            .font-roboto-condensed {
              font-size: 1.25rem;
            }
          }
        }
      }
    }
  }

  @media (min-width:540px) {
    .section-item__intro {
      h2 {
        font-size: 3rem;
      }

      h3 {
        font-size: 1.5rem;
      }

      p {
        font-size: 1.125rem;
      }
    }
  }

  @media (min-width:768px) {

    .btn,
    .btn:hover,
    .btn:focus,
    .btn-active {
      font-size: 1.5rem;
    }

    .section-item__intro {
      h2 {
        font-size: 3rem;
      }

      h3 {
        font-size: 1.5rem;
      }

      p {
        font-size: 1.25rem;
      }
    }

    .section-item__details {
      .card {
        .card-content {
          h3 {
            .font-satisfy {
              font-size: 2.5rem;
            }

            .font-roboto-condensed {
              font-size: 1.5rem;
            }
          }

          p {
            font-size: 1.25rem;
          }
        }
      }
    }
  }

  @media (min-width:1200px) {
    .section-item__details {
      .card {
        .card__wrapper {
          .card-image {
            flex: 1;

            img {
              position: absolute;
              right: 0;
              top: 0;
              border-top-left-radius: 0px;
              border-bottom-left-radius: 0px;
              border-top-right-radius: 22px;
              border-bottom-right-radius: 22px;
            }
          }
        }

        .card-content {
          flex: 1;

          h3 {
            .font-satisfy {
              font-size: 2.25rem;
            }
          }

          p {
            font-size: 1rem;
          }
        }


      }
    }
  }

  @media (min-width:1400px) {
    .section-item__intro {
      h2 {
        font-size: 3.5rem;
      }

      h3 {
        font-size: 1.875rem;
      }
    }
  }
}