/* Conjurly UI Core — COMPONENTS
   Source of truth: plugin file
   Do not hardcode values elsewhere. */

/* ==========================================
   Conjurly Alerts (Global Component)
   ========================================== */

.alert{
  border-radius: var(--cj-alert-radius);
  border: 1px solid var(--cj-alert-border);
}

.alert-info{
  background: var(--cj-alert-info-bg);
  color: var(--cj-alert-info-text);
  border-color: var(--cj-alert-info-border);
}

.alert-success{
  background: var(--cj-alert-success-bg);
  color: var(--cj-alert-success-text);
  border-color: var(--cj-alert-success-border);
}

.alert-warning{
  background: var(--cj-alert-warning-bg);
  color: var(--cj-alert-warning-text);
  border-color: var(--cj-alert-warning-border);
}

.alert-danger,
.alert-error{
  background: var(--cj-alert-danger-bg);
  color: var(--cj-alert-danger-text);
  border-color: var(--cj-alert-danger-border);
}

/* Links inside alerts */
.alert a{
  color: var(--cj-accent);
  text-decoration: none;
  font-weight: 600;
}
.alert a:hover{
  color: var(--cj-accent-hover);
  text-decoration: underline;
}





/* ======================================================
   Conjurly Buttons
   Canonical button component used by plugin-specific mapping layers.
   ====================================================== */

.cj-btn,
a.cj-btn,
button.cj-btn,
input[type="button"].cj-btn,
input[type="submit"].cj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  box-sizing: border-box;
  min-height: 0;
  border: var(--cj-btn-border-width) solid transparent;
  border-radius: var(--cj-btn-radius);
  padding: var(--cj-btn-padding-y) var(--cj-btn-padding-x);
  font-family: var(--cj-btn-font-family);
  font-size: var(--cj-btn-font-size);
  font-weight: var(--cj-btn-font-weight);
  line-height: var(--cj-btn-line-height);
  letter-spacing: var(--cj-btn-letter-spacing);
  text-align: center;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.cj-btn:hover,
a.cj-btn:hover,
button.cj-btn:hover,
input[type="button"].cj-btn:hover,
input[type="submit"].cj-btn:hover {
  text-decoration: none;
}

.cj-btn:focus-visible,
a.cj-btn:focus-visible,
button.cj-btn:focus-visible,
input[type="button"].cj-btn:focus-visible,
input[type="submit"].cj-btn:focus-visible {
  outline: var(--cj-focus-outline-width) solid var(--cj-focus-outline-color);
  outline-offset: var(--cj-focus-outline-offset);
  box-shadow: var(--cj-focus-ring-shadow);
}

.cj-btn[disabled],
.cj-btn.is-disabled,
a.cj-btn.is-disabled,
button.cj-btn[disabled],
input[type="button"].cj-btn[disabled],
input[type="submit"].cj-btn[disabled] {
  opacity: var(--cj-btn-disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}

.cj-btn-primary,
a.cj-btn-primary,
button.cj-btn-primary,
input[type="button"].cj-btn-primary,
input[type="submit"].cj-btn-primary {
  background: var(--cj-btn-primary-bg);
  border-color: var(--cj-btn-primary-border);
  color: var(--cj-btn-primary-color);
}

.cj-btn-primary:hover,
a.cj-btn-primary:hover,
button.cj-btn-primary:hover,
input[type="button"].cj-btn-primary:hover,
input[type="submit"].cj-btn-primary:hover {
  background: var(--cj-btn-primary-hover-bg);
  border-color: var(--cj-btn-primary-hover-border);
  color: var(--cj-btn-primary-hover-color);
}

.cj-btn-secondary,
.cj-btn-outline,
a.cj-btn-secondary,
a.cj-btn-outline,
button.cj-btn-secondary,
button.cj-btn-outline,
input[type="button"].cj-btn-secondary,
input[type="button"].cj-btn-outline,
input[type="submit"].cj-btn-secondary,
input[type="submit"].cj-btn-outline {
  background: var(--cj-btn-secondary-bg);
  border-color: var(--cj-btn-secondary-border);
  color: var(--cj-btn-secondary-color);
}

.cj-btn-secondary:hover,
.cj-btn-outline:hover,
a.cj-btn-secondary:hover,
a.cj-btn-outline:hover,
button.cj-btn-secondary:hover,
button.cj-btn-outline:hover,
input[type="button"].cj-btn-secondary:hover,
input[type="button"].cj-btn-outline:hover,
input[type="submit"].cj-btn-secondary:hover,
input[type="submit"].cj-btn-outline:hover {
  background: var(--cj-btn-secondary-hover-bg);
  border-color: var(--cj-btn-secondary-hover-border);
  color: var(--cj-btn-secondary-hover-color);
}

.cj-btn-ghost,
a.cj-btn-ghost,
button.cj-btn-ghost {
  background: var(--cj-btn-ghost-bg);
  border-color: var(--cj-btn-ghost-border);
  color: var(--cj-btn-ghost-color);
}

.cj-btn-ghost:hover,
a.cj-btn-ghost:hover,
button.cj-btn-ghost:hover {
  background: var(--cj-btn-ghost-hover-bg);
  border-color: var(--cj-btn-ghost-hover-border);
  color: var(--cj-btn-ghost-hover-color);
}

.cj-btn-sm,
a.cj-btn-sm,
button.cj-btn-sm,
input[type="button"].cj-btn-sm,
input[type="submit"].cj-btn-sm {
  padding: var(--cj-btn-padding-y-sm) var(--cj-btn-padding-x-sm);
  font-size: var(--cj-btn-font-size-sm);
}

.cj-btn-lg,
a.cj-btn-lg,
button.cj-btn-lg,
input[type="button"].cj-btn-lg,
input[type="submit"].cj-btn-lg {
  padding: var(--cj-btn-padding-y-lg) var(--cj-btn-padding-x-lg);
  font-size: var(--cj-btn-font-size-lg);
}

/* Custom header auth buttons mapped to the canonical Conjurly button system.
   Scoped to the PHP-rendered Conjurly header so plugin form buttons are not affected here. */
.cnjrly-header .header-aside .button,
.cnjrly-header .site-header-aside .button,
.cnjrly-header .bb-header-buttons .button,
.cnjrly-header .header-buttons .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  border-radius: var(--cj-btn-radius);
  padding: var(--cj-btn-padding-y) var(--cj-btn-padding-x);
  font-family: var(--cj-btn-font-family);
  font-size: var(--cj-btn-font-size);
  font-weight: var(--cj-btn-font-weight);
  line-height: var(--cj-btn-line-height);
  letter-spacing: var(--cj-btn-letter-spacing);
  text-transform: none;
  text-decoration: none;
}

.cnjrly-header .header-aside .button:not(.signup),
.cnjrly-header .site-header-aside .button:not(.signup),
.cnjrly-header .bb-header-buttons .button:not(.signup),
.cnjrly-header .header-buttons .button:not(.signup) {
  background: var(--cj-btn-primary-bg);
  border: var(--cj-btn-border-width) solid var(--cj-btn-primary-border);
  color: var(--cj-btn-primary-color);
}

.cnjrly-header .header-aside .button:not(.signup):hover,
.cnjrly-header .site-header-aside .button:not(.signup):hover,
.cnjrly-header .bb-header-buttons .button:not(.signup):hover,
.cnjrly-header .header-buttons .button:not(.signup):hover {
  background: var(--cj-btn-primary-hover-bg);
  border-color: var(--cj-btn-primary-hover-border);
  color: var(--cj-btn-primary-hover-color);
}

.cnjrly-header .header-aside .button.signup,
.cnjrly-header .site-header-aside .button.signup,
.cnjrly-header .bb-header-buttons .button.signup,
.cnjrly-header .header-buttons .button.signup {
  background: var(--cj-btn-secondary-bg);
  border: var(--cj-btn-border-width) solid var(--cj-btn-secondary-border);
  color: var(--cj-btn-secondary-color);
}

.cnjrly-header .header-aside .button.signup:hover,
.cnjrly-header .site-header-aside .button.signup:hover,
.cnjrly-header .bb-header-buttons .button.signup:hover,
.cnjrly-header .header-buttons .button.signup:hover {
  background: var(--cj-btn-secondary-hover-bg);
  border-color: var(--cj-btn-secondary-hover-border);
  color: var(--cj-btn-secondary-hover-color);
}


/* ======================================================
   Conjurly Shared Page Header / Section Card
   Outer wrapper: structural only (radius, overflow, shadow).
   Background and border live on __header and __body so they
   cannot bleed through the indigo header zone or collapsed margins.
   ====================================================== */
.cnjrly-section-card {
  border-radius: var(--cj-radius-card);
  overflow: hidden;
  box-shadow: var(--cj-page-header-shadow);
}

.cnjrly-section-card__header {
  margin: 0;
  background: var(--cj-indigo, #4c187e);
  padding: var(--cj-page-header-pad-y-top) var(--cj-page-header-pad-x) var(--cj-page-header-pad-y-bottom);
  border-radius: var(--cj-radius-card) var(--cj-radius-card) 0 0;
}

.cnjrly-section-card__title {
  margin: 0;
  font-family: var(--cj-font-headline);
  font-size: var(--cj-page-header-title-size);
  font-weight: var(--cj-page-header-title-weight);
  line-height: var(--cj-heading-line-height-tight);
  letter-spacing: var(--cj-heading-letter-spacing-tight);
  color: var(--cj-text-on-accent);
}

.cnjrly-section-card__body {
  background: var(--cj-surface-primary);
  border-radius: 0 0 var(--cj-radius-card) var(--cj-radius-card);
}


/* ======================================================
   Conjurly Content Page zone
   Applied via "Conjurly Content Page" page template.
   Text-heavy surfaces: terms, policies, about, etc.
   Outer shell: .cnjrly-section-card (structural only from Core).
   Header: inherits __header indigo treatment.
   Body: __body with comfortable reading padding + content typography.
   ====================================================== */

.cnjrly-content-page .cnjrly-section-card__header {
  padding: 14px 18px 15px;
}

.cnjrly-content-page .cnjrly-section-card__title {
  font-family: var(--cj-font-headline) !important; /* BuddyBoss h1 rules can outrank the base selector; !important ensures sans condensed always wins here */
  font-size: var(--cj-page-header-title-size, 2rem);
  font-weight: var(--cj-page-header-title-weight, 500) !important;
  margin-bottom: 0; /* plugins.css .page h1 sets margin-bottom: 14px at specificity 0,1,1; zone at 0,2,0 overrides it */
}

.cnjrly-content-page__body {
  padding: 2rem 2.25rem 2.5rem;
  border: 1px solid var(--cj-border-card, rgba(0,0,0,0.08));
  border-top: none;
  border-radius: 0 0 var(--cj-radius-card) var(--cj-radius-card);
}

/* ── Paragraphs ── */
.cnjrly-content-page__body p {
  font-family: var(--cj-font-sans);
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(0,0,0,0.80);
  margin-top: 0;
  margin-bottom: 1.25em;
}

.cnjrly-content-page__body p:last-child {
  margin-bottom: 0;
}

/* ── Headings ── */
.cnjrly-content-page__body h2,
.cnjrly-content-page__body h3,
.cnjrly-content-page__body h4,
.cnjrly-content-page__body h5,
.cnjrly-content-page__body h6 {
  font-family: var(--cj-heading-font-family);
  font-weight: var(--cj-heading-font-weight);
  color: var(--cj-accent);
  letter-spacing: var(--cj-heading-letter-spacing-tight);
  margin-top: 2em;
  margin-bottom: 0.5em;
}

.cnjrly-content-page__body h2 {
  font-size: var(--cj-heading-h2-size);
  line-height: var(--cj-heading-h2-line-height);
}

.cnjrly-content-page__body h3 {
  font-size: var(--cj-heading-h3-size);
  line-height: var(--cj-heading-h3-line-height);
}

.cnjrly-content-page__body h4 {
  font-size: var(--cj-heading-h4-size);
  line-height: var(--cj-heading-h4-line-height);
}

.cnjrly-content-page__body h5 {
  font-size: var(--cj-heading-h5-size);
  line-height: var(--cj-heading-h5-line-height);
}

.cnjrly-content-page__body h6 {
  font-size: var(--cj-heading-h6-size);
  line-height: var(--cj-heading-h6-line-height);
}

/* First heading needs no top margin — body padding handles it */
.cnjrly-content-page__body > h2:first-child,
.cnjrly-content-page__body > h3:first-child,
.cnjrly-content-page__body > h4:first-child,
.cnjrly-content-page__body > h5:first-child,
.cnjrly-content-page__body > h6:first-child {
  margin-top: 0;
}

/* ── Lists ── */
.cnjrly-content-page__body ul,
.cnjrly-content-page__body ol {
  font-family: var(--cj-font-sans);
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(0,0,0,0.80);
  padding-left: 1.5em;
  margin-top: 0;
  margin-bottom: 1.25em;
}

.cnjrly-content-page__body li {
  margin-bottom: 0.4em;
}

.cnjrly-content-page__body li:last-child {
  margin-bottom: 0;
}

/* ── Links ── */
.cnjrly-content-page__body a {
  color: var(--cj-accent);
  text-decoration: none;
  font-weight: 500;
}

.cnjrly-content-page__body a:hover {
  color: var(--cj-accent-hover);
  text-decoration: underline;
}

/* ── Horizontal rule ── */
.cnjrly-content-page__body hr {
  border: none;
  border-top: 1px solid var(--cj-border-light);
  margin: 2em 0;
}

/* ── Strong / em ── */
.cnjrly-content-page__body strong {
  font-weight: 700;
  color: rgba(0,0,0,0.88);
}

/* ── Mobile ── */
@media (max-width: 782px) {
  .cnjrly-content-page__body {
    padding: 1.25rem 1.1rem 1.5rem;
  }
}