/* Footer widget styles (.f-* classes). The markup is a Kadence footer widget, so the class names
   stay as they are (camelCase). Everything is scoped under .f-footer except the contact modal
   (.modalWindow, .contactTitle), which has its own unscoped markup.
   Breakpoints (min-width): 640, 768, 1024, 1280, 1400. */

/* Tokens, scoped to the footer and the contact modal. Nothing else on the site uses them. */
:is(.f-footer, .modalWindow, .contactTitle) {
  --f-text-primary: #34363e;
  --f-text-secondary: #686b73;
  --f-border-gray: #4a4f5c;
}

/* The footer widget draws its own padding, so drop Kadence's. The two-class selector already
   beats Kadence's `.site-container`, which needs no !important. */
.site-footer .site-container {
  padding: 0;
}

.f-footer {
  background: #ebf1f6;
  padding: 48px 16px;

  @media (width >= 640px) {
    padding: 48px 24px;
  }

  @media (width >= 768px) {
    padding: 48px 24px 72px;
  }

  @media (width >= 1280px) {
    padding: 72px 60px;
  }

  @media (width >= 1400px) {
    padding: 72px 120px;
  }

  & .f-container {
    max-width: 1511px;
    margin: 0 auto;
    display: grid;

    @media (width >= 768px) {
      column-gap: 16px;
    }

    & .f-logo {
      margin-bottom: 32px;

      @media (width >= 768px) {
        grid-column: 1/4;
      }

      @media (width >= 1280px) {
        grid-column: 1/2;
        grid-row: 1/2;
      }
    }

    & .f-menuItemPlatform {
      @media (width >= 768px) {
        display: none;
      }
    }

    & .f-platformDesktopItem {
      display: none;

      @media (width >= 768px) {
        display: block;
      }
    }

    & .f-menuItemProducts {
      @media (width >= 1280px) {
        grid-column: 3/4;
        grid-row: 1/4;
      }
    }

    & .f-menuItemSolutions {
      @media (width >= 1280px) {
        grid-column: 2/3;
        grid-row: 1/4;
      }
    }

    & .f-menuItemResources {
      @media (width >= 768px) {
        grid-column: 4/5;
      }

      @media (width >= 1280px) {
        grid-column: 4/5;
        grid-row: 1/4;
      }
    }

    /* A footer column: a title and its links. Below 768px the title is an accordion button that
       toggles the hidden checkbox. */
    & .f-menuItem {
      & .f-title {
        font:
          500 16px/24px Manrope,
          sans-serif;
        color: var(--f-text-primary);
        margin: 0;
        padding: 8px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        @media (width >= 768px) {
          font-size: 14px;
          line-height: 20px;
          color: var(--f-text-secondary);
          padding: 0 0 16px;
        }

        & svg {
          transition: 0.3s;

          @media (width >= 768px) {
            display: none;
          }

          @media (prefers-reduced-motion: reduce) {
            transition: none;
          }
        }
      }

      & .f-subMenu {
        z-index: 9;
        display: none;
        margin: 0;
        list-style-type: none;
        padding-left: 20px;
        text-align: left;

        @media (width >= 768px) {
          display: block;
          padding-left: 0;
          margin-bottom: 32px;
        }

        & .f-subMenuItem {
          cursor: pointer;
          font:
            500 14px/20px Manrope,
            sans-serif;
          color: var(--f-text-primary);
          text-decoration: none;
          display: block;

          @media (width >= 768px) {
            margin-bottom: 20px;
          }
        }
      }

      & input[type="checkbox"] {
        display: none;

        &:checked ~ .f-title svg {
          transform: rotate(-90deg);
        }

        &:checked ~ .f-subMenu {
          display: block;
        }
      }
    }

    & .f-emailBlock {
      position: relative;

      & :is(.f-envelopIcon, .f-arrowIcon) {
        position: absolute;
        top: 50%;
        transform: translateY(-43%);
      }

      & .f-envelopIcon {
        left: 20px;
      }

      & .f-arrowIcon {
        right: 20px;
      }

      & input {
        padding: 16px 52px;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        width: 100%;
        box-sizing: border-box;
        border: 1px solid var(--f-border-gray);
        border-radius: 2px;
        background: transparent;
      }
    }

    & .f-subscribeBlock .f-subText {
      font:
        500 16px/24px Manrope,
        sans-serif;
      color: var(--f-text-primary);
      margin-top: 32px;

      @media (width >= 640px) {
        margin-top: 64px;
      }
    }

    & .f-followBlock {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 26px;

      @media (width >= 640px) {
        display: grid;
      }

      & .f-text {
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px;
        color: var(--f-text-primary);
        margin: 0;

        @media (width >= 640px) {
          margin-bottom: 16px;
        }
      }
    }
  }

  & .f-footerBottom {
    @media (width >= 640px) {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }

    @media (width >= 768px) {
      grid-column: 1/4;
      justify-content: flex-start;
      gap: 31%;
    }

    @media (width >= 1024px) {
      gap: 41%;
    }

    @media (width >= 1280px) {
      grid-column: 1/2;
      display: grid;
      gap: 0;
    }
  }

  & .f-rightsBlock {
    border-top: 1px solid #dee5e9;
    margin-top: 32px;

    @media (width >= 640px) {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
    }

    @media (width >= 768px) {
      grid-column: 1/5;
    }

    & .f-text {
      font-size: 12px;
      font-style: normal;
      font-weight: 500;
      line-height: 24px;
      color: var(--f-text-secondary);
      padding: 32px 0 12px;
      margin: 0;

      @media (width >= 640px) {
        margin: 0;
        padding: 40px 0 12px;
      }
    }

    /* The legal links in the bottom bar. Not the same as the footer columns' .f-menuItem above. */
    & .f-menu {
      margin: 0;
      padding: 0;
      list-style-type: none;
      display: flex;
      gap: 16px;

      & .f-menuItem {
        font:
          500 12px/24px Manrope,
          sans-serif;
        color: var(--f-text-secondary);
        padding: 16px 0;

        & a {
          color: var(--f-text-secondary);
          text-decoration: none;
        }
      }
    }
  }

  & .f-logoContainer {
    display: flex;
    justify-content: space-between;
    max-width: 1511px;
    margin: 0 auto 48px;

    @media (width >= 768px) {
      margin: 0 auto 56px;
    }
  }

  & .f-iconsBlock {
    display: flex;
    gap: 12px;

    & > :is(div, span) {
      cursor: pointer;
    }

    & svg {
      margin: 10px;
    }
  }
}

/* Contact modal. Unscoped class names: the markup comes from a widget, not from this theme. */
.modalWindow {
  z-index: 99999;
  position: fixed;
  background: rgb(0 0 0 / 47.84%);
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 100vh;
  overflow: auto;

  @media (height <= 788px) {
    padding: 128px 0;
    align-items: flex-start;
  }

  & .modalBlock {
    background: white;
    padding: 32px;
    position: relative;

    & .closeIcon {
      cursor: pointer;
      position: absolute;
      right: 17px;
      top: 13px;
    }

    & iframe {
      max-width: 100%;
    }
  }
}

.contactTitle {
  font:
    400 24px/38px Manrope,
    sans-serif;
  color: var(--f-text-primary);
  margin-bottom: 16px;
}