/**
 * National Coalition — JomSocial theme layer
 * -----------------------------------------------------------------------------
 * JomSocial ships its own 150 KB stylesheet that is loaded *before* template.css
 * and hard-codes a blue/teal palette (#5677FC, #ECF0F1, #7f8c8d ...). Instead of
 * editing vendor files (which a component update would wipe) this file re-skins
 * JomSocial on top of the site's design tokens.
 *
 * Every rule is scoped to #community-wrap — the wrapper JomSocial prints around
 * its entire output — so nothing here can leak into the rest of the site.
 *
 * Loaded for com_community and community-context Files and Help pages,
 * after template.css, so it always wins.
 */

/* ==========================================================================
   1. Shell & layout
   ========================================================================== */

#community-wrap {
  background: var(--mist);
  padding-block: clamp(56px, 7vw, 96px);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Give the component the same measure as the rest of the site. */
#community-wrap .jomsocial {
  width: min(var(--container), calc(100% - 64px));
  max-width: none;
  margin-inline: auto;
  padding: 0;
  background: transparent;
}

@media (max-width: 900px) {
  #community-wrap .jomsocial {
    width: min(var(--container), calc(100% - 44px));
  }
}

@media (max-width: 460px) {
  #community-wrap .jomsocial {
    width: calc(100% - 36px);
  }
}

#community-wrap .jomsocial-wrapper {
  height: auto;
}

#community-wrap .joms-social {
  background: transparent;
}

/* ==========================================================================
   2. Typography
   ========================================================================== */

#community-wrap h1,
#community-wrap h2,
#community-wrap h3,
#community-wrap h4,
#community-wrap h5,
#community-wrap h6,
#community-wrap .joms-text--title,
#community-wrap .joms-page__title {
  font-family: var(--font-serif);
  color: var(--navy);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.012em;
}

#community-wrap p,
#community-wrap li,
#community-wrap label,
#community-wrap dt,
#community-wrap dd,
#community-wrap td,
#community-wrap th {
  color: var(--ink);
}

#community-wrap small,
#community-wrap .joms-text--muted,
#community-wrap .joms-small {
  color: var(--muted);
}

/* Page title: red rule above, Playfair headline, no muddy grey. */
#community-wrap .joms-page__title {
  position: relative;
  font-size: clamp(1.85rem, 2.4vw, 2.55rem);
  margin-bottom: 26px;
  padding-top: 22px;
}

#community-wrap .joms-page__title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 46px;
  height: 1px;
  background: var(--red);
}

#community-wrap.cRegister .nc-community-conduct-warning {
  margin: -12px 0 26px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  background: var(--white);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
}

/* Small section labels inside modules and toolbars. */
#community-wrap .joms-list__search-title h1,
#community-wrap .joms-list__search-title h2,
#community-wrap .joms-list__search-title h3 {
  font-size: clamp(1.6rem, 2vw, 2.1rem);
}

/* ==========================================================================
   3. Panels & cards
   ========================================================================== */

#community-wrap .joms-page {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: var(--shadow-sm);
  padding: clamp(20px, 3vw, 40px);
}

#community-wrap .joms-module__wrapper,
#community-wrap .joms-focus,
#community-wrap .joms-stream-box,
#community-wrap .joms-postbox,
#community-wrap .joms-gallery,
#community-wrap .joms-popup,
#community-wrap .joms-chat {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

#community-wrap .joms-module__wrapper .joms-page {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

#community-wrap .joms-gap {
  height: 1px;
  background: var(--line);
  margin: 22px 0;
}

#community-wrap .joms-blankslate {
  background: var(--mist);
  border: 1px dashed var(--line-dark);
  border-radius: 3px;
  color: var(--muted);
  padding: 20px;
  text-align: center;
}

/* ==========================================================================
   4. Links
   ========================================================================== */

#community-wrap a {
  color: var(--navy);
  transition: color 0.2s ease;
}

#community-wrap a:hover,
#community-wrap a:focus {
  color: var(--red);
}

#community-wrap .joms-button--link,
#community-wrap .joms-button--more {
  color: var(--navy);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#community-wrap .joms-button--link:hover,
#community-wrap .joms-button--more:hover {
  color: var(--red);
}

/* ==========================================================================
   5. Landing / front page hero
   ========================================================================== */

#community-wrap .joms-landing {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: 100%;
  margin-bottom: 30px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

@media (min-width: 992px) {
  #community-wrap .joms-landing {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: stretch;
  }
}

#community-wrap .joms-landing__cover {
  position: relative;
}

@media (min-width: 992px) {
  #community-wrap .joms-landing__cover::before {
    padding-top: 52%;
  }
}

#community-wrap .joms-landing__image {
  background-image: url("../../../images/nc/flag-waving.jpg") !important;
  background-position: center 38% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  filter: saturate(0.9) contrast(1.03);
}

/* Navy scrim so the headline always reads, echoing the home hero. */
#community-wrap .joms-landing__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(7, 27, 49, 0.12) 0%,
    rgba(7, 27, 49, 0.52) 52%,
    rgba(7, 27, 49, 0.9) 100%
  );
}

#community-wrap .joms-landing__content {
  position: absolute;
  inset: auto 0 0 0;
  display: block;
  width: auto;
  padding: clamp(20px, 3vw, 42px);
  background: none;
  color: #fff;
  z-index: 1;
}

#community-wrap .joms-landing__text {
  display: block;
  width: auto;
}

#community-wrap .joms-landing__text h2 {
  color: #fff;
  font-size: clamp(1.8rem, 3vw, 2.9rem);
  line-height: 1.06;
  margin-bottom: 10px;
  text-shadow: 0 2px 24px rgba(7, 27, 49, 0.45);
}

#community-wrap .joms-landing__text p {
  max-width: 48ch;
  color: rgba(255, 255, 255, 0.84);
  font-size: 1rem;
  line-height: 1.62;
  margin: 0;
}

#community-wrap .joms-landing__action {
  background: var(--white);
  padding: clamp(22px, 2.6vw, 34px);
  border-radius: 0;
}

@media (min-width: 992px) {
  #community-wrap .joms-landing__action {
    border-left: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

#community-wrap .joms-landing__action .joms-form {
  float: none;
  padding: 0;
  margin: 0;
}

/* JomSocial lays the login out as one row (35% / 35% / 24.7%) which is far too
   tight in the side panel — stack the fields instead. */
@media (min-width: 992px) {
  #community-wrap .joms-landing__action .joms-input--append {
    display: block;
    width: 100%;
    margin-right: 0;
  }

  #community-wrap .joms-landing__action button {
    width: 100%;
    margin-top: 10px;
  }
}

#community-wrap .joms-landing__action .joms-input {
  display: block;
  width: 100%;
  border-radius: 2px;
}

#community-wrap .joms-landing__action .joms-input--append {
  margin-bottom: 10px;
}

#community-wrap .joms-landing__action .joms-input--append svg {
  top: 50%;
  transform: translateY(-50%);
}

#community-wrap .joms-landing__action .joms-checkbox {
  display: block;
  width: 100%;
  margin-top: 14px;
}

#community-wrap .joms-landing__action .joms-checkbox span {
  display: inline-block;
  margin-left: 24px;
  color: var(--muted);
}

#community-wrap .joms-landing__action .joms-form > a {
  display: block;
  width: 100%;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

#community-wrap .joms-landing__action .joms-form > a:hover {
  color: var(--red);
}

#community-wrap .joms-landing__action > a {
  display: block;
  margin-top: 12px;
}

/* ==========================================================================
   6. Buttons
   ========================================================================== */

#community-wrap .joms-button--primary,
#community-wrap .joms-button--add,
#community-wrap .joms-button--signup,
#community-wrap .joms-button--invite,
#community-wrap .joms-button--login,
#community-wrap .joms-button__approve,
#community-wrap .joms-button__next,
#community-wrap .joms-button--secondary,
#community-wrap .joms-focus__button--add,
#community-wrap .joms-focus__button--message,
#community-wrap .joms-button--comment {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  border: 1px solid var(--navy);
  border-radius: 2px;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 22px rgba(10, 37, 64, 0.18);
  transition: transform 0.22s var(--ease), background 0.22s ease, box-shadow 0.22s ease;
}

#community-wrap .joms-button--primary:hover,
#community-wrap .joms-button--add:hover,
#community-wrap .joms-button--signup:hover,
#community-wrap .joms-button--invite:hover,
#community-wrap .joms-button--login:hover,
#community-wrap .joms-button__approve:hover,
#community-wrap .joms-button__next:hover,
#community-wrap .joms-button--secondary:hover,
#community-wrap .joms-focus__button--add:hover,
#community-wrap .joms-focus__button--message:hover,
#community-wrap .joms-button--comment:hover {
  color: #fff;
  transform: translateY(-1px);
  background: linear-gradient(180deg, var(--navy-light) 0%, var(--navy) 55%, var(--navy-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 14px 30px rgba(10, 37, 64, 0.26);
}

/* Red action variant — used for the destructive / primary call to action. */
#community-wrap .joms-button--important,
#community-wrap .joms-button__reject {
  background: linear-gradient(180deg, var(--red-bright) 0%, var(--red) 60%, var(--red-deep) 100%);
  border: 1px solid var(--red-deep);
  border-radius: 2px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  padding: 14px 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 10px 22px rgba(143, 26, 41, 0.2);
}

#community-wrap .joms-button--important:hover,
#community-wrap .joms-button__reject:hover {
  color: #fff;
  transform: translateY(-1px);
}

/* Quiet, outlined secondary buttons. */
#community-wrap .joms-button--neutral,
#community-wrap .joms-button--privacy,
#community-wrap .joms-postbox-tab .joms-postbox-cancel,
#community-wrap .joms-focus__button--options {
  background: var(--white);
  border: 1px solid var(--line-dark);
  border-radius: 2px;
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  padding: 11px 16px;
  box-shadow: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

#community-wrap .joms-button--neutral:hover,
#community-wrap .joms-button--privacy:hover,
#community-wrap .joms-postbox-tab .joms-postbox-cancel:hover {
  background: var(--mist-blue);
  border-color: var(--navy);
  color: var(--navy);
}

/* Inline editor buttons stay compact. */
#community-wrap .joms-postbox-tab .joms-postbox-save,
#community-wrap .joms-postbox-tab .joms-postbox-done {
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 2px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 16px;
}

#community-wrap .joms-postbox-tab .joms-postbox-save:hover,
#community-wrap .joms-postbox-tab .joms-postbox-done:hover {
  background: var(--navy-deep);
  color: #fff;
}

#community-wrap a:focus-visible,
#community-wrap button:focus-visible,
#community-wrap input:focus-visible,
#community-wrap select:focus-visible,
#community-wrap textarea:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* ==========================================================================
   7. Forms & inputs
   ========================================================================== */

#community-wrap .joms-input,
#community-wrap .joms-input--search,
#community-wrap input[type="text"],
#community-wrap input[type="email"],
#community-wrap input[type="password"],
#community-wrap input[type="search"],
#community-wrap input[type="url"],
#community-wrap input[type="tel"],
#community-wrap input[type="number"],
#community-wrap input[type="date"],
#community-wrap textarea,
#community-wrap select {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.4;
  padding: 12px 14px;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#community-wrap .joms-input::placeholder,
#community-wrap input::placeholder,
#community-wrap textarea::placeholder {
  color: var(--muted-light);
}

#community-wrap .joms-input:focus,
#community-wrap .joms-input--search:focus,
#community-wrap input:focus,
#community-wrap textarea:focus,
#community-wrap select:focus {
  background: var(--white);
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(10, 37, 64, 0.1);
  outline: none;
}

/* Keep room for the leading icon in input groups. */
#community-wrap .joms-input--append .joms-input[type="text"],
#community-wrap .joms-input--append .joms-input[type="password"],
#community-wrap .joms-input--append .joms-input[type="email"] {
  padding-left: 40px;
}

#community-wrap .joms-input--append .joms-icon {
  fill: var(--muted);
}

/* The wrapper owns the border and the arrow, so keep the <select> itself
   transparent and let it fill the wrapper edge to edge. */
#community-wrap .joms-select--wrapper {
  position: relative;
  display: block;
  width: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: none;
  padding: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#community-wrap .joms-select--wrapper:hover {
  border-color: var(--line-dark);
}

#community-wrap .joms-select--wrapper:focus-within {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(10, 37, 64, 0.1);
}

#community-wrap .joms-select--wrapper::after {
  top: 50%;
  margin-top: 0;
  transform: translateY(-50%);
  right: 14px;
  opacity: 0.55;
}

#community-wrap .joms-select {
  width: 100%;
  height: 46px;
  padding: 0 40px 0 14px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 46px;
}

#community-wrap .joms-select:focus {
  border: 0;
  box-shadow: none;
}

#community-wrap .joms-select option {
  background: var(--white);
  color: var(--ink);
}

#community-wrap .joms-checkbox span,
#community-wrap .joms-checkbox label {
  color: var(--muted);
  font-size: 13px;
}

#community-wrap .joms-form__group > label,
#community-wrap .joms-form__label {
  color: var(--navy);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

#community-wrap.cRegister .joms-form__group > span:first-child {
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
}

#community-wrap.cRegister .joms-form__group > span:first-child > label {
  color: inherit;
  font: inherit;
}

#community-wrap.cRegister .nc-registration-social-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}

#community-wrap.cRegister .nc-registration-social-provider {
  display: flex;
  flex: 1 1 150px;
  min-width: 0;
  justify-content: center;
}

#community-wrap.cRegister .nc-registration-social-provider--facebook .joms-login-facebook,
#community-wrap.cRegister .nc-registration-social-provider--x .btn-sign-with-twitter,
#community-wrap.cRegister .nc-registration-social-provider--google .g_id_signin {
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
}

#community-wrap.cRegister .nc-registration-social-provider--facebook .btn-sign-with-facebook,
#community-wrap.cRegister .nc-registration-social-provider--x .btn-sign-with-twitter {
  display: flex !important;
  position: relative;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px 12px 8px 34px;
  text-align: center;
}

#community-wrap.cRegister .nc-registration-social-provider--x .btn-sign-with-twitter {
  background-image: none;
}

#community-wrap.cRegister .nc-registration-social-provider--x .btn-sign-with-twitter::before {
  position: absolute;
  left: 12px;
  content: "X";
  font-size: 15px;
  font-weight: 800;
}

#community-wrap.cRegister .nc-registration-social-auth-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

#community-wrap.cRegister .nc-registration-social-auth-button:hover,
#community-wrap.cRegister .nc-registration-social-auth-button:focus-visible {
  border-color: var(--red);
  color: var(--navy);
  text-decoration: none;
}

#community-wrap.cRegister .nc-registration-social-auth-button--microsoft {
  border-left: 3px solid #0078d4;
}

#community-wrap.cRegister .nc-registration-social-auth-button--apple {
  border-left: 3px solid #111;
}

#community-wrap.cRegister .nc-registration-social-auth-button--x {
  border-left: 3px solid #111;
}

@media (max-width: 460px) {
  #community-wrap.cRegister .nc-registration-social-provider {
    flex-basis: 100%;
  }
}

/* ==========================================================================
   8. Lists (members, groups, events, photos, articles …)
   ========================================================================== */

#community-wrap .joms-list--friend .joms-list__item,
#community-wrap .joms-list--group .joms-list__item,
#community-wrap .joms-list--event .joms-list__item,
#community-wrap .joms-list--card .joms-list__item,
#community-wrap .joms-list--general > li,
#community-wrap .joms-list--articles > li,
#community-wrap .joms-list__row {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.22s var(--ease);
}

#community-wrap .joms-list--friend .joms-list__item:hover,
#community-wrap .joms-list--group .joms-list__item:hover,
#community-wrap .joms-list--event .joms-list__item:hover,
#community-wrap .joms-list--card .joms-list__item:hover,
#community-wrap .joms-list--general > li:hover,
#community-wrap .joms-list--articles > li:hover {
  border-color: var(--line-dark);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

#community-wrap .joms-list--friend .joms-list__item h3,
#community-wrap .joms-list--group .joms-list__item h3,
#community-wrap .joms-list--event .joms-list__item h3,
#community-wrap .joms-list--card .joms-list__item h3 {
  font-size: 1.15rem;
  margin-bottom: 4px;
}

#community-wrap .joms-list--friend .joms-list__item h3 a,
#community-wrap .joms-list--group .joms-list__item h3 a {
  color: var(--navy);
}

#community-wrap .joms-list--friend .joms-list__item h3 a:hover,
#community-wrap .joms-list--group .joms-list__item h3 a:hover {
  color: var(--red);
}

#community-wrap .joms-avatar img,
#community-wrap .joms-avatar > a img {
  border-radius: 3px;
}

/* Member card copy: JomSocial mixes h3/h4 for names and wraps the meta line in
   .joms-text--title, which would otherwise inherit the serif heading face. */
#community-wrap .joms-list__item .joms-text--username,
#community-wrap .joms-list__item h3,
#community-wrap .joms-list__item h4 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 4px;
  color: var(--navy);
}

#community-wrap .joms-list__item .joms-text--username a,
#community-wrap .joms-list__item h4 a {
  color: var(--navy);
}

#community-wrap .joms-list__item .joms-text--username a:hover,
#community-wrap .joms-list__item h4 a:hover {
  color: var(--red);
}

#community-wrap .joms-list__details .joms-text--title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

/* Search / filter row above member, group and event lists. Vendor clips the
   input against a fixed-width span, so rebuild it as a flexible row. */
#community-wrap .joms-list__utilities {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

#community-wrap .joms-list__utilities > form {
  display: flex;
  flex: 1 1 320px;
  align-items: center;
  gap: 10px;
  margin: 0;
}

#community-wrap .joms-list__utilities > form > span:first-of-type {
  flex: 1 1 auto;
  min-width: 0;
}

#community-wrap .joms-list__utilities input.joms-input--search {
  width: 100%;
}

#community-wrap .joms-list__utilities .joms-button--add {
  position: static;
  flex: 0 0 auto;
  margin: 0;
}

/* Tables used by some admin-ish views. */
#community-wrap table.joms-table,
#community-wrap .joms-table {
  border-color: var(--line);
}

#community-wrap .joms-table th {
  background: var(--mist);
  color: var(--navy);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#community-wrap .joms-table td,
#community-wrap .joms-table th {
  border-color: var(--line);
}

/* ==========================================================================
   9. Navigation: tab bars, sub-navigation, toolbars
   ========================================================================== */

#community-wrap .joms-tab__bar {
  background: var(--mist);
  border-bottom: 1px solid var(--line);
}

#community-wrap .joms-tab__bar > a {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 13px 10px;
}

#community-wrap .joms-tab__bar > a.active {
  background: var(--white);
  color: var(--navy);
  box-shadow: inset 0 -2px 0 var(--red);
}

#community-wrap .joms-tab__bar > a:hover {
  color: var(--navy);
  background: rgba(10, 37, 64, 0.04);
}

#community-wrap .joms-subnav--desktop {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 22px;
  overflow: hidden;
}

#community-wrap .joms-subnav--desktop > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

#community-wrap .joms-subnav--desktop > ul > li {
  display: flex;
}

#community-wrap .joms-subnav--desktop > ul > li > a {
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  padding: 14px 18px;
  transition: background 0.2s ease, color 0.2s ease;
}

#community-wrap .joms-subnav--desktop > ul > li > a:hover {
  background: var(--mist);
  color: var(--navy);
}

#community-wrap .joms-subnav--desktop > ul > li > a.active {
  color: var(--navy);
  box-shadow: inset 0 -2px 0 var(--red);
  background: var(--white);
}

#community-wrap .joms-subnav a {
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#community-wrap .joms-subnav a:hover {
  background: var(--mist-blue);
  border-color: var(--line-dark);
  color: var(--navy);
}

#community-wrap .joms-subnav--desktop a,
#community-wrap .joms-subnav__menu > a {
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The site chrome keeps its navigation light and airy; JomSocial's desktop
   toolbar ships as a cramped 12px grey strip. Rebuild it as a quiet nav bar. */
#community-wrap .joms-toolbar--desktop,
#community-wrap .joms-toolbar--mobile {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: var(--shadow-sm);
  padding: 0 4px;
  margin-bottom: 18px;
}

/* Vendor lays these items out as inline-blocks; uppercase labels make the row
   overflow, so switch to a flex line that can shrink. */
#community-wrap .joms-toolbar--desktop > ul,
#community-wrap .joms-toolbar--mobile > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

#community-wrap .joms-toolbar--desktop > ul > li,
#community-wrap .joms-toolbar--mobile > ul > li {
  display: flex;
  float: none;
}

#community-wrap .joms-toolbar--desktop > ul > li > a,
#community-wrap .joms-toolbar--mobile > ul > li > a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  padding: 13px 7px;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
}

#community-wrap .joms-toolbar--desktop > ul > li > a:hover,
#community-wrap .joms-toolbar--mobile > ul > li > a:hover {
  background: var(--mist);
  color: var(--red);
}

#community-wrap .joms-toolbar--desktop > ul > li.active > a,
#community-wrap .joms-toolbar--mobile > ul > li.active > a {
  color: var(--navy);
  box-shadow: inset 0 -2px 0 var(--red);
}

#community-wrap .joms-toolbar--desktop .joms-icon,
#community-wrap .joms-toolbar--mobile .joms-icon,
#community-wrap .joms-toolbar .joms-icon {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

#community-wrap .joms-toolbar--desktop > ul > li.joms-right {
  border-left: 1px solid var(--line);
  margin-left: auto;
}

/* Logout is the only destructive action in the community chrome, so it gets
   the brand's medium red instead of another grey nav icon. The <li> is the
   button surface; the anchor stays transparent so its hover rule cannot paint
   a mist background behind the white icon. */
#community-wrap .joms-toolbar--desktop > ul > li.joms-right,
#community-wrap .joms-toolbar--mobile > ul > li.joms-right {
  border-left: 0;
  border-radius: 2px;
  background: var(--red);
  transition: background 0.2s ease;
}

#community-wrap .joms-toolbar--desktop > ul > li.joms-right:hover,
#community-wrap .joms-toolbar--mobile > ul > li.joms-right:hover {
  background: var(--red-deep);
}

#community-wrap .joms-toolbar--desktop > ul > li.joms-right > a,
#community-wrap .joms-toolbar--mobile > ul > li.joms-right > a,
#community-wrap .joms-toolbar--desktop > ul > li.joms-right > a:hover,
#community-wrap .joms-toolbar--mobile > ul > li.joms-right > a:hover {
  background: transparent;
  color: #fff;
}

/* Legacy/mobile toolbar (the popover style one) keeps the dark treatment. */
#community-wrap .joms-toolbar {
  background: var(--navy);
  border-radius: 3px;
}

#community-wrap .joms-toolbar a {
  color: rgba(255, 255, 255, 0.82);
}

#community-wrap .joms-toolbar a:hover,
#community-wrap .joms-toolbar a.active {
  color: #fff;
}

#community-wrap .joms-dropdown,
#community-wrap .joms-popover {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: var(--shadow-md);
}

#community-wrap .joms-dropdown a,
#community-wrap .joms-popover a {
  color: var(--navy);
}

#community-wrap .joms-dropdown a:hover,
#community-wrap .joms-popover a:hover {
  background: var(--mist);
  color: var(--red);
}

/* ==========================================================================
   10. Accents that shipped in JomSocial's blue (#5677FC)
   ========================================================================== */

#community-wrap .joms-label.is-owner {
  background: var(--navy);
  color: #fff;
}

#community-wrap .joms-stream__actions .liked .joms-icon,
#community-wrap .joms-comment__actions .liked .joms-icon {
  fill: var(--red);
}

#community-wrap .joms-reacted__list .joms-reacted__item.active {
  background: var(--red);
  color: #fff;
}

#community-wrap .joms-poll__progress .joms-poll__progress-bar,
#community-wrap .joms-postbox-file-progressbar .joms-postbox-file-progress,
#community-wrap .joms-postbox-photo-progressbar .joms-postbox-photo-progress {
  background: var(--navy);
}

#community-wrap .joms-postbox--droparea {
  border-color: var(--navy);
  background: var(--mist-blue);
}

#community-wrap .joms-chat__window-title {
  background: var(--navy);
}

#community-wrap .joms-chat__item.active,
#community-wrap .joms-chat__search .user-selected {
  background: var(--mist-blue);
  border-left: 2px solid var(--red);
}

#community-wrap .joms-calendar__grid-title,
#community-wrap .joms-calendar--week-day {
  background: var(--navy);
  color: #fff;
}

#community-wrap .joms-calendar__event {
  background: var(--mist);
  color: var(--navy);
}

/* Registration success: vendor ships a bare paragraph and button. */
#community-wrap .cRegister-Success > p {
  max-width: 720px;
  margin: 0 0 26px;
  color: var(--navy);
  font-family: var(--font-serif);
  font-size: 1.2rem;
  line-height: 1.55;
}

/* Registration step progress. Vendor renders a 14px white band with a flat
   blue fill, which reads as a stray rectangle above the card; make it a slim
   track instead so it looks like a deliberate progress indicator. */
#community-wrap .outerpgbar {
  height: 3px;
  background: rgba(10, 37, 64, 0.12);
  border-radius: 999px;
  margin-bottom: 18px;
  overflow: hidden;
}

#community-wrap .innerpgbar {
  height: 100%;
  margin: 0;
  background: var(--navy);
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* ==========================================================================
   11. Misc polish
   ========================================================================== */

#community-wrap .joms-pagination .pagination-list > li > a,
#community-wrap .joms-pagination .pagination-list > li > span {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
}

#community-wrap .joms-pagination .pagination-list > li.active > a,
#community-wrap .joms-pagination .pagination-list > li.active > span {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

#community-wrap .joms-pagination .pagination-list > li > a:hover {
  background: var(--mist);
  border-color: var(--line-dark);
  color: var(--navy);
}

#community-wrap .joms-sortings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

#community-wrap .joms-sortings .joms-select--wrapper {
  flex: 1 1 240px;
  width: auto;
  margin: 0;
}

#community-wrap .joms-page__actions {
  margin-bottom: 20px;
}

#community-wrap .joms-popup--dropdown {
  border-radius: 2px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}

/* Site photography provides a fallback behind JomSocial cover images. */
#community-wrap .joms-focus__cover,
#community-wrap .joms-hcard__cover {
  background:
    linear-gradient(
      180deg,
      rgba(7, 27, 49, 0.28) 0%,
      rgba(7, 27, 49, 0.06) 34%,
      rgba(7, 27, 49, 0.78) 100%
    ),
    url("../images/small-town.jpg") center 42% / cover no-repeat;
  min-height: 220px;
}

#community-wrap .joms-focus__header {
  background: linear-gradient(180deg, rgba(7, 27, 49, 0.1) 0%, rgba(7, 27, 49, 0.68) 100%);
}

/* The member name is an <h2> inside the title block, so the generic heading
   colour further up this file would paint it navy on navy. */
#community-wrap .joms-focus__title h2,
#community-wrap .joms-focus__title a,
#community-wrap .joms-focus__header a,
#community-wrap .joms-focus__header .joms-text--title {
  color: #fff;
}

#community-wrap .joms-focus__title h2 {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  margin: 0;
}

#community-wrap .joms-focus__title {
  font-family: var(--font-serif);
  font-weight: 600;
  text-shadow: 0 2px 18px rgba(7, 27, 49, 0.45);
}

/* JomSocial always prints a badge strip, even with zero badges earned — it then
   renders a placeholder PNG whose alt text is the count. Hide it in that case. */
#community-wrap .joms-focus__badges[alt="0"] {
  display: none;
}

#community-wrap .joms-focus__header .joms-avatar img {
  border: 3px solid rgba(255, 255, 255, 0.92);
}

/* Keep the community dashboard compact while giving its activity feed a
   clearer visual structure. */
#community-wrap.cFrontpage {
  padding-block: clamp(24px, 3vw, 40px);
}

#community-wrap.cFrontpage .joms-toolbar--desktop,
#community-wrap.cFrontpage .joms-toolbar--mobile {
  border-top: 2px solid var(--red);
}

#community-wrap.cFrontpage .joms-postbox {
  border-top: 2px solid var(--navy);
}

#community-wrap.cFrontpage .joms-activity-filter {
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--white);
}

#community-wrap.cFrontpage .joms-stream__container > .joms-stream {
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  border-radius: 3px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

#community-wrap.cFrontpage .nc-community-sidebar-toggle {
  display: none;
}

@media (max-width: 767px) {
  #community-wrap.cFrontpage .nc-community-sidebar-toggle {
    display: flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--red);
    border-radius: 3px;
    background: var(--white);
    color: var(--navy);
    font: 700 11px/1.4 var(--font-sans);
    letter-spacing: 0.1em;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
  }

  #community-wrap.cFrontpage .nc-community-sidebar-toggle:hover {
    border-color: var(--line-dark);
    background: var(--cream);
  }

  #community-wrap.cFrontpage .nc-community-sidebar-toggle:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 2px;
  }

  #community-wrap.cFrontpage .nc-community-sidebar-toggle__indicator {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.18s ease;
  }

  #community-wrap.cFrontpage .nc-community-sidebar-toggle[aria-expanded="true"]
    .nc-community-sidebar-toggle__indicator {
    transform: rotate(225deg) translate(-2px, -1px);
  }

  #community-wrap.cFrontpage .joms-sidebar[hidden] {
    display: none !important;
  }
}