/********************************** Styling for BuddyPress ***********************************************/
:root {
  --gems-red: #de544d;
  --gems-deep-red: #802832;
  --gems-deep-blue: #003743;
  --gems-mid-dark-blue: #41a9d5;
  --gems-mid-blue: #72ccdf;
  --gems-light-blue: #b1dee5;
  --gems-box-shadow: 0 3px 6px rgb(0 0 0 / 0.15);
  --gems-box-shadow--hover: 0 6px 12px rgb(0 0 0 / 0.25);
  --gems-padding--btn: 0.375rem 1.5rem;
  --gems-hanken: "Hanken Grotesk";
  --gems-axel: "Axel Grotesk";
}

main#content:has(#buddypress) {
  background-color: #fff;
  max-width: 1920px;
  padding: 2rem;
}
main#content:has(#buddypress) h1 {
  text-align: center;
  -webkit-margin-after: 0;
          margin-block-end: 0;
  margin-top: 0;
}

body #buddypress {
  max-width: 62.5rem;
  margin-inline: auto;
  padding: 2rem;
}
body #buddypress form.bp-dir-search-form {
  border: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
}
body #buddypress form.bp-dir-search-form span.dashicons.dashicons-search::before {
  color: #fff;
}
body #buddypress input[type=search] {
  border-radius: 10px;
  border: 1px solid var(--gems-deep-blue);
  outline: none;
}
body #buddypress button#dir-members-search-submit {
  background-color: var(--gems-mid-blue);
  border-radius: 10px;
}

body #buddypress div.gems-member-portal__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-margin-after: 1rem;
          margin-block-end: 1rem;
  overflow: visible;
}
body #buddypress div.gems-member-portal__container a {
  background-color: var(--gems-red);
  font-family: var(--gems-hanken);
  font-weight: 600;
  font-size: clamp(1.1rem, 1rem + 0.3vw, 1.25rem);
  color: #000;
  padding: 1rem 2rem;
  border-radius: 10px;
  -webkit-box-shadow: var(--gems-box-shadow);
          box-shadow: var(--gems-box-shadow);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  display: block;
}
body #buddypress div.gems-member-portal__container a:hover {
  -webkit-box-shadow: var(--gems-box-shadow--hover);
          box-shadow: var(--gems-box-shadow--hover);
}
body #buddypress div.gems-member-portal__container a.--active {
  background-color: var(--gems-mid-blue);
}

.page-header .entry-title {
  font-family: var(--gems-axel);
  color: var(--gems-deep-red);
}

nav.members-type-navs.main-navs.dir-navs {
  border: none !important;
  background-color: transparent;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}
nav.members-type-navs.main-navs.dir-navs li#members-all a {
  background-color: var(--gems-deep-blue);
  font-family: var(--gems-hanken);
}
nav.members-type-navs.main-navs.dir-navs li#members-all a span.count {
  display: none;
  visibility: hidden;
}

body .buddypress-wrap div.select-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: 1px solid var(--gems-deep-blue);
  border-radius: 10px !important;
  padding-inline: 0.25rem;
}
body .buddypress-wrap div.select-wrap:hover {
  border: 1px solid var(--gems-deep-blue);
}
body .buddypress-wrap div.select-wrap span.select-arrow {
  margin-block: auto;
  font-size: 0.7rem;
}

body .buddypress-wrap div#members-order-select div.select-wrap {
  margin-left: 0.5rem;
}

ul#members-list.item-list.members-list.bp-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: 2rem;
}
ul#members-list.item-list.members-list.bp-list::before {
  display: none;
}
ul#members-list.item-list.members-list.bp-list li.item-entry {
  background-color: var(--gems-light-blue);
  padding: 2rem;
  border-radius: 2rem;
}
ul#members-list.item-list.members-list.bp-list li.item-entry .list-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
ul#members-list.item-list.members-list.bp-list li.item-entry .list-wrap .item-avatar {
  margin-inline: 0;
}
ul#members-list.item-list.members-list.bp-list li.item-entry .item-block {
  float: none;
  margin-inline: 0;
  width: 100%;
}
ul#members-list.item-list.members-list.bp-list li.item-entry .item-block h2 {
  -webkit-margin-before: 0.5rem;
          margin-block-start: 0.5rem;
  margin-inline: auto;
  text-align: center;
  float: none;
  font-family: var(--gems-axel);
  font-weight: 700;
}

nav#object-nav.main-navs,
nav#subnav.bp-navs {
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  overflow: visible;
}
nav#object-nav.main-navs ul#member-primary-nav,
nav#object-nav.main-navs ul#member-secondary-nav,
nav#subnav.bp-navs ul#member-primary-nav,
nav#subnav.bp-navs ul#member-secondary-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
  overflow: visible;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
nav#object-nav.main-navs li.bp-personal-tab,
nav#object-nav.main-navs li.bp-personal-sub-tab,
nav#subnav.bp-navs li.bp-personal-tab,
nav#subnav.bp-navs li.bp-personal-sub-tab {
  background-color: var(--gems-mid-blue);
  border-radius: 10px;
  -webkit-box-shadow: var(--gems-box-shadow);
          box-shadow: var(--gems-box-shadow);
  padding: var(--gems-padding--btn);
  font-family: var(--gems-hanken);
  font-weight: 600;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
nav#object-nav.main-navs li.bp-personal-tab.current.selected,
nav#object-nav.main-navs li.bp-personal-sub-tab.current.selected,
nav#subnav.bp-navs li.bp-personal-tab.current.selected,
nav#subnav.bp-navs li.bp-personal-sub-tab.current.selected {
  background-color: var(--gems-red);
}
nav#object-nav.main-navs li.bp-personal-tab a,
nav#object-nav.main-navs li.bp-personal-tab a:hover,
nav#object-nav.main-navs li.bp-personal-sub-tab a,
nav#object-nav.main-navs li.bp-personal-sub-tab a:hover,
nav#subnav.bp-navs li.bp-personal-tab a,
nav#subnav.bp-navs li.bp-personal-tab a:hover,
nav#subnav.bp-navs li.bp-personal-sub-tab a,
nav#subnav.bp-navs li.bp-personal-sub-tab a:hover {
  background-color: transparent;
}
nav#object-nav.main-navs li.bp-personal-tab:hover,
nav#object-nav.main-navs li.bp-personal-sub-tab:hover,
nav#subnav.bp-navs li.bp-personal-tab:hover,
nav#subnav.bp-navs li.bp-personal-sub-tab:hover {
  -webkit-box-shadow: var(--gems-box-shadow--hover);
          box-shadow: var(--gems-box-shadow--hover);
  cursor: pointer;
}

div.profile.public h2 {
  font-family: var(--gems-axel);
  font-size: clamp(1.75rem, 1rem + 1.1vw, 2rem) !important;
  font-weight: 700 !important;
  color: var(--gems-deep-red);
  border: none !important;
}
div.profile.public div.profile-fields {
  font-family: var(--gems-axel);
}
div.profile.public div.profile-fields p.label {
  color: var(--gems-deep-red);
  font-weight: 700;
}
div.profile.public div.profile-fields div.field_tags p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.25rem;
  color: #fff;
}
div.profile.public div.profile-fields div.field_tags p a,
div.profile.public div.profile-fields div.field_tags p span {
  background-color: #e5e5e5;
  border-radius: 50vw;
  padding: var(--gems-padding--btn);
  color: #000;
}

div.profile.edit div.editfield {
  border: none !important;
  border-radius: 10px !important;
  padding: 0.75rem !important;
  font-family: var(--gems-hanken);
}

span.select2.select2-container.select2-container--default.select2-container--below {
  width: 100%;
}

span.select2-container.select2-container--default.select2-container--open {
  margin-top: 2rem;
}

li.select2-search.select2-search--inline input {
  width: auto !important;
}

div#item-body.item-body {
  font-family: var(--gems-hanken);
}
div#item-body.item-body h2 {
  font-family: var(--gems-hanken);
  font-weight: 700;
  color: var(--gems-deep-red);
}

div.submit input#submit,
#bp-data-export button[type=submit],
button[type=button].button,
body #buddypress div.submit input[type=submit],
input#bp-browse-button {
  background-color: var(--gems-mid-blue);
  border-radius: 10px;
  -webkit-box-shadow: var(--gems-box-shadow);
          box-shadow: var(--gems-box-shadow);
  padding: 0.75rem 1.5rem;
  font-family: var(--gems-hanken);
  font-weight: 700;
  border: none !important;
}
div.submit input#submit:hover,
#bp-data-export button[type=submit]:hover,
button[type=button].button:hover,
body #buddypress div.submit input[type=submit]:hover,
input#bp-browse-button:hover {
  -webkit-box-shadow: var(--gems-box-shadow--hover);
          box-shadow: var(--gems-box-shadow--hover);
}

table.profile-settings.bp-tables-user thead,
table.profile-settings.bp-tables-user tr,
table.profile-settings.bp-tables-user th,
table.profile-settings.bp-tables-user tbody,
table.profile-settings.bp-tables-user td {
  border: none !important;
  background-color: transparent !important;
}

.rcp-table {
  -webkit-margin-before: 2rem;
          margin-block-start: 2rem;
}

.rcp-account-overview,
.rcp-payment-history {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}

header:has(.rcp-account-overview, .rcp-payment-history) {
  font-weight: 700;
}

/********************************** Mobile viewport styling for BuddyPress ***********************************************/
@media screen and (max-width: 48em) {
  body #buddypress {
    padding-inline: 0.5rem;
  }
  span.select2-container.select2-container--default.select2-container--open {
    margin-top: 2.5rem;
  }
  body #buddypress div.gems-member-portal__container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0.5rem;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  body #buddypress div.gems-member-portal__container a {
    width: min(15rem, 100%);
    text-align: center;
  }
}