html {
  scroll-behavior: smooth;
}

body {
  display: none;
  margin: 0;
  font-family: var(--font-family);
}

body.appear {
  display: block;
}

header {
  height: var(--nav-height);
}

footer {
  background-color: var(--black-color);
  padding: 60px 60px 70px;
}

header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status='loaded'],
footer .footer[data-block-status='loaded'] {
  visibility: visible;
}

a,
button,
input[type='submit'] {
  display: inline-block;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  text-overflow: ellipsis;
}

.button {
  font-size: var(--font-size-label1);
  font-weight: var(--font-weight-label1);
  transition: opacity 0.15s ease;
  border: 2px solid transparent;
  color: var(--black-color);
  border-radius: var(--button-border-radius);
  padding: 14px 24px 11px;

  &.disabled,
  &:disabled {
    pointer-events: none;
  }

  &.default {
    background-color: var(--black-color);
    color: var(--white-color);

    &:hover {
      background-color: var(--gray-dark-color);
    }

    &.disabled,
    &:disabled {
      background-color: var(--gray-white-color);
      color: var(--gray-color);
    }
  }

  &.primary {
    background-color: var(--primary-color);
    color: var(--black-color);

    &:hover {
      background-color: var(--secondary-pf-color);
    }

    &.disabled,
    &:disabled {
      background-color: var(--gray-white-color);
      color: var(--gray-color);
    }
  }

  &.secondary {
    border: 2px solid var(--black-color);
    background-color: transparent;
    color: var(--black-color);

    &:hover {
      background-color: var(--black-color);
      color: var(--white-color);
    }

    &.disabled,
    &:disabled {
      background-color: var(--gray-white-color);
      border-color: var(--gray-color);
      color: var(--gray-color);
    }
  }

  &.tertiary {
    border: 2px solid var(--white-color);
    background-color: transparent;
    color: var(--white-color);
    padding: 16px 24px;

    &:hover {
      background-color: var(--white-color);
      color: var(--black-color);
    }
  }
}

.section {
  position: relative;
  z-index: 3;
  padding: var(--section-padding);
  overflow-x: auto;
  background-color: var(--white-color);

  .default-content-wrapper {
    ol,ul {
      margin-block: 1em;
      padding-inline-start: 40px;
    }
  
    ol {
      list-style: decimal;
    }
    ul {
      list-style: unset;
    }
  }

  &.rounded-top {
    border-radius: 40px 40px 0 0;
  }

  &.tertiary {
    background-color: var(--gray-white-color);
    color: var(--black-color);
  }

  > .button-action-wrapper.no-padding-top,
  > .button-link-wrapper.no-padding-top {
    padding-top: 0;
  }

  > div {
    max-width: 1440px;
    padding: var(--wrapper-padding);
    margin: auto;
  }

  &.dark {
    background-color: var(--gray-darkest-color);
    color: var(--white-color);
  }

  &.pf {
    &.primary {
      background-color: var(--primary-color);
      color: var(--black-color);

      .button {
        &.primary {
          background-color: var(--black-color);
          color: var(--white-color);

          &:hover {
            background-color: var(--gray-dark-color);
          }

          &.disabled,
          &:disabled {
            background-color: var(--gray-white-color);
            color: var(--gray-color);
          }
        }
      }
    }

    &.secondary {
      background-color: var(--secondary-pf-color);
      color: var(--white-color);

      .button {
        /* stylelint-disable-next-line no-descending-specificity */
        &.primary {
          background-color: var(--black-color);
          color: var(--white-color);

          &:hover {
            background-color: var(--gray-dark-color);
          }

          &.disabled,
          &:disabled {
            background-color: var(--gray-white-color);
            color: var(--gray-color);
          }
        }
      }
    }

    &.tertiary {
      background-color: var(--gray-lightest-color);
      color: var(--black-color);
    }

    &.dark {
      .button.secondary {
        color: var(--white-color);
        border-color: var(--white-color);

        &:hover {
          color: var(--black-color);
          background-color: var(--white-color);
        }

        &.disabled,
        &:disabled {
          background-color: transparent;
          border-color: var(--gray-color);
          color: var(--gray-color);
        }
      }
    }
  }

  &.pj {
    &.primary {
      background-color: var(--secondary-dark-color);
      color: var(--white-color);
      /* stylelint-disable-next-line no-descending-specificity */
      .button.secondary{
        color: var(--white-color);
        border-color: var(--white-color);

        /* stylelint-disable-next-line no-descending-specificity */
        &:hover {
          color: var(--black-color);
          background-color: var(--white-color);
        }

        /* stylelint-disable-next-line no-descending-specificity */
        &.disabled,
        /* stylelint-disable-next-line no-descending-specificity */
        &:disabled {
          background-color: transparent;
          border-color: var(--gray-color);
          color: var(--gray-color);
        }
      }
    }

    &.secondary {
      background-color: var(--secondary-pj-color);
      color: var(--secondary-dark-color);
    }

    &.tertiary {
      background-color: var(--gray-lightest-color);
      color: var(--black-color);
    }

    &.dark {
      /* stylelint-disable-next-line no-descending-specificity */
      .button.secondary {
        color: var(--white-color);
        border-color: var(--white-color);

        &:hover {
          color: var(--black-color);
          background-color: var(--white-color);
        }

        &.disabled,
        &:disabled {
          background-color: transparent;
          border-color: var(--gray-color);
          color: var(--gray-color);
        }
      }
    }
  }
}

.tablet,
.mobile {
  .section {
    padding: var(--section-padding-mobile);

    > div {
      padding: var(--wrapper-padding-mobile);
    }

    .button {
      font-size: var(--font-size-label2);
      font-weight: var(--font-weight-label2);
      padding: 12px 24px 8px;
    }
  }
}

@media (width <= 768px) {
  footer {
    padding: 32px 20px 64px;
  }
}

.pj {
  --secondary: #c2d0c0;
}

/* Device-specific visibility rules */
#device-mobile {
  display: none;
}

#device-desk {
  display: block;
}

.mobile #device-desk,
.tablet #device-desk {
  display: none;
}

.mobile #device-mobile,
.tablet #device-mobile {
  display: block;
}

/* Exception: show all devices in Universal Editor */
#editor-app #device-mobile,
#editor-app #device-desk {
  display: block !important;
}