/*##################################################
BUTTONS AND PSEUDO BUTTONS (LINKS
################################################## */
/* standard Buttons secondary*/
main.rd-site-content button,
.rd-button {
  width: fit-content;
  display: flex;
  padding: var(--button-padding);
  position: relative;
  border: 1.5px solid var(--color-1);
  color: var(--color-link);
  background-color: transparent;
  padding: 0.75rem 2rem;
  margin: 0 1rem 1rem 0;
  cursor: pointer;
  font-size: var(--font-size-medium);
}

main.rd-site-content button:hover,
main.rd-site-content .rd-button:hover                                   { color: var(--color-white); background-color: var(--color-1); }
main.rd-site-content button:focus-visible,
main.rd-site-content .rd-button:focus-visible                           { color: var(--color-link); background-color: var(--color-white); outline-color: var(--color-black); outline-offset: 3px; }

/* Primary Button Call to action*/
main.rd-site-content button.rd-primary,
main.rd-site-content .rd-button.rd-primary                              { background-color: var(--color-1); color: var(--color-white); }
main.rd-site-content button.rd-primary:hover,
main.rd-site-content .rd-button.rd-primary:hover                        { background-color: var(--color-2); color: var(--color-white); border-color: var(--color-2); }
main.rd-site-content button.rd-primary:active,
main.rd-site-content .rd-button.rd-primary:active                       { background-color: var(--color-3); color: var(--color-white); border-color: var(--color-3); }
main.rd-site-content button.rd-primary:focus-visible,
main.rd-site-content .rd-button.rd-primary:focus-visible                { background-color: var(--color-1); color: var(--color-white); border-color: var(--color-1); outline-color: var(--color-1); }
main.rd-site-content button.rd-small-button,
main.rd-site-content .rd-button.rd-small-button                         { padding: 0 2rem; }
main.rd-site-content button.rd-read-more,
main.rd-site-content .rd-button.rd-read-more                            { color: var(--color-1); background-color: transparent; border-color: transparent; margin-bottom: 1rem; }

/* extend plus button */
main.rd-site-content button.rd-extend              { border-color: transparent; padding: 0; width: 24px; height: 24px; }
main.rd-site-content button.rd-extend:hover        { background-color: transparent; }

button.rd-extend:after,
button.rd-extend:before                            { -webkit-user-select: none; user-select: none; color: var(--color-link); background-image: none; border-radius: 0; }
button.rd-extend:after,
button.rd-extend:before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(50% - 2.5px);
  width: 18px;
  height: 2px;
  background-color: var(--color-1);
  filter: none;
}
button.rd-extend:after                              { transform: rotate(90deg); }

/* icon Buttons */
main a.rd-icon                                      { display: flex; padding-left: 1rem; }
main a.rd-icon:before {
  content: '';
  width: 25px;
  height: 25px;
  margin: auto 1rem auto 0;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: auto 25px;
  display: block !important;
}
main a.rd-icon.rd-primary:before                    { filter: var(--svg-color-white); }
main a.rd-icon:hover:before                         { filter: var(--svg-color-white); }
main a.rd-download                                  { display: flex; }
main a.rd-download:before                           { content: ''; width: 25px; height: 25px; background: url(../images/icon-download.svg) 0 0 no-repeat!important; background-size: auto 25px; }
main a.rd-download.rd-primary:before                { filter: var(--svg-color-white); }
main a.rd-download:hover:before                     { filter: var(--svg-color-white); }
main a.rd-icon.extern:before                        { height: 20px; background-size: auto 20px; }
main a.rd-icon.extern:before                        { background-image: url(../images/icon-arrow-up-right.svg); }
main a.rd-icon.intern:before                        { background-image: url(../images/icon-arrow-right.svg); }
main a.rd-icon.studyhead:before                     { background-image: url(../images/icon-university.svg); }


p:has(.rd-button) {
  width: fit-content;
  display: inline-block;
  margin: 0 10px 10px 0;
  vertical-align: top;
}