/**
1. Footer menus
2. Social Media / Search
  2.1 logo
  2.2 Social media
  2.3 Search
3. Copyright
4. pweb
5. Takeover
**/

.site-footer {
  --color-white: #FFFFFF;
  --color-black: #222222;
  padding-top: 48px;
  padding-bottom: 40px;

  .area__content {
    display: grid;
    gap:12px;
    max-width: 1280px;
    color: var(--color-white);

    @media only screen and (min-width: 48em) {
      grid-template-columns: repeat(3, 1fr);
      gap: 0px 30px;
    }

    a {
      color: var(--color-white);

      &:hover {
        text-decoration: underline;
        text-underline-offset: 4px;
      }
    }

    .menu {
      margin: 0;
    }

    /** 1. Footer menus **/

    .area--footer {
      order:2;
      padding: 0 16px;

      @media only screen and (min-width: 48em) {
        grid-column: span 2;
        order:1;
        padding:0;
      }

      .item-list {

        li {
          margin-left: 0;
        }

      }

      .menus {
        display: grid;
        gap: 20px;
        grid-template-areas: "home stallion"
                              "tel contact";

        div:nth-child(1) {
          grid-area: tel;
        }

        div:nth-child(2) {
          grid-area: home;
        }

        div:nth-child(3) {
          grid-area: stallion;
        }

        div:nth-child(4) {
          grid-area: contact;
        }

        @media only screen and (min-width: 60em) {
          grid-template-areas: "tel home stallion contact";
        }

        .tel-links {
          font-weight: bold;

          li {
            margin-bottom: 24px;

            a {
              display: inline-block;
              margin-top: 12px;
              font-weight: lighter;
            }

          }

        }

        .menu:not(.tel-links) {
          margin: 0 0 18px 0;

          .menu-item {
            margin-bottom: 2px;
            font-size: 16px;
          }

          .menu {

            .menu-item {
              margin-bottom: 2px;

              > a {
                font-size: 14px;
                font-weight: normal;
              }
            }

          }

        }

      }

    }

    /** 2. Social Media / Search **/

    .area--social-media {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 40px);
      gap: 48px;
      order:1;
      padding:38px 16px 0 16px;

      @media only screen and (min-width: 48em) {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(2, 40px) 64px;
        gap:22px;
        order:2;
        padding:0;
      }

      /** 2.1 logo **/
      .footer-logo {
        display:grid;
        order:2;

        .logo {
          width: 112px;
          place-self:center start;

          @media only screen and (min-width: 48em) {
            justify-self: end;
            width: 135px;
          }

          svg {

            path {
              fill: var(--color-white);
            }

          }

        }
      }

      /** 2.2 Social media **/

      .social-links {
        display: flex;
        justify-self: end;
        order:3;
        gap: 8px;

        .social-links__item {
          align-items: center;

          a {
            display: block;

            span {
              display: block;
              height: 40px;

              .fa-instagram,
              .fa-youtube,
              .fa-x-twitter,
              .fa-facebook-f {
                color: #0037b2;
              }

              svg {
                max-width: 100%;
              }
            }

          }

        }

        .fa-2x {
          font-size: 1.625em;
        }

        @media only screen and (min-width: 48em) {
          gap: 15px;

          .fa-2x {
            font-size: 30px;
          }

        }

      }

      /** 2.3 Search **/

      .footer-search {
        grid-column: span 2;
        order:1;

        @media only screen and (min-width: 48em) {
          place-self: end end;
          grid-column: 1 / 1;
          order:3;
        }

        .search-block-form {

          @media only screen and (min-width: 48em) {
            width: 320px;
          }

          form {
            height: 38px;
            color: #333333;
            display: flex;
            background-color: var(--color-white);
            border-radius: 1.5em;
            padding: 0 0.375em 0 1.25em;

            > * {
              margin: 0;
              padding: 0;
            }

            .form-item {
              flex: 1;
            }

            .form-search {
              font-size: 16px;
              line-height: 24px;
              height: 38px;
              width: 100%;
              border: none;
              outline: 0;
              padding: 0;
            }

            .form-actions{
              display: grid;
              width:38px;
            }

            .form-submit {
              width: 38px;
              height:38px;
              background: url("/themes/drly/img/common/magnifying-glass-solid-full_darley-blue.svg") no-repeat transparent;
              background-size: contain;
              background-position: center center;
              border: none;
              cursor: pointer;
              text-indent: -9999px;
              place-self: center flex-end ;
              margin-bottom:0;

              &:hover {
                outline: none;
              }

            }

          }

        }

      }

    }

    /** 3. Copyright **/

    .area--copyright {
      order:3;
      padding:0 16px 32px 16px;

      @media only screen and (min-width: 48em) {
        grid-column: span 3;
        padding: 0;
      }

      .copyright {
        display: grid;
        gap: 24px;
        font-size: 14px;
        line-height: 1.5em;
        padding-top: 28px;

        @media only screen and (min-width: 60em) {
          grid-template-columns: 1fr 176px;
        }

        .menu {

          @media only screen and (min-width: 48em) {
            display: flex;
            justify-content: start;
            gap: 30px;
          }

          a {
            font-weight: normal;
          }

        }

        .copyright__statement {

          @media only screen and (min-width: 60em) {
            justify-self: end;
          }

        }

      }

    }

  }

}

/** 4. pweb **/
.pweb {

  .footer-search {

    .form-submit {
      margin:0;
    }

  }

}

/** 5. Takeover **/
.takeover {

  &.takeover-black {

    .site-footer {
      background-color: var(--color-black);

      .area__content {

        .area--social-media {

          .social-links {

            .social-links__item {


              a {
                color: var(--color-white);

                span {

                  .fa-instagram,
                  .fa-youtube,
                  .fa-x-twitter,
                  .fa-facebook-f {
                    color: var(--color-black);
                  }

                }

              }

            }

          }

          .footer-search {

            .search-block-form {

              form {

                .form-submit {
                  background: url(/themes/drly/img/common/magnifying-glass-solid-full_black.svg) no-repeat transparent;
                }

              }

            }

          }

        }

      }

    }

  }

}