/* Conjurly UI BuddyBoss Layer
   BuddyBoss UI Overrides (Cover, Feed, Modal)
   v0.1.3
*/

/* =========================================================
   Conjurly UI BuddyBoss — v0.1.x
   Purpose: map BuddyBoss variables to Conjurly tokens + refine feed
   ========================================================= */

/* Map BuddyBoss CSS variables to Conjurly tokens (authoritative) */
body{
  --bb-block-radius: var(--cj-radius-card) !important;
  --bb-content-border-color: var(--cj-border-light) !important;
  --bb-content-background-color: var(--cj-surface-card, #fff) !important;
}

/* =========================================================
   Profile Cover / Header (BuddyPress / BuddyBoss)
   Goal: enable taller, reusable cover assets (e.g., FB / YouTube banner-style)
         while keeping native BuddyBoss reposition UX functional.
   Strategy: adjust the viewport (container) height only; do NOT hero the <img>.
   ========================================================= */

.buddypress #cover-image-container{
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;

  /* Space between header and the lower area (nav + content) */
  margin-bottom: var(--conjurly-cover-gap-after) !important;

  /* Make cover image go full-bleed within the header card */
  padding: 0 !important; /* key change */
}

/* Cover viewport sizing (container only) — reposition-safe */
.buddypress #cover-image-container #header-cover-image{
  width: 100%;

  /* Wisest UX sizes: reusable banner-friendly without pushing content too far */
  height: 340px !important;

  min-height: 0 !important;
  overflow: hidden !important;

  /* BuddyBoss sometimes applies negative margins — neutralize */
  margin: 0 !important;
}

/* Mobile: keep header tighter so content stays above the fold */
@media (max-width: 768px){
  .buddypress #cover-image-container #header-cover-image{
    height: 240px !important;
  }
}

/* IMPORTANT: keep the cover image behavior compatible with reposition UI
   Do NOT force height:100% or object-fit. Let BuddyBoss control positioning. */
.buddypress #cover-image-container #header-cover-image > img.header-cover-img{
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  display: block;

  object-fit: unset !important;
  object-position: unset !important;
}

/* Keep header card stable + add breathing room below avatar/name */
.buddypress #cover-image-container #item-header-cover-image{
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;

  margin: 0 !important;
  padding-bottom: var(--conjurly-cover-header-pad-bottom) !important;

  z-index: 2;

  /* Keep avatar/name area padded nicely after removing container padding */
  padding-left: var(--cj-space-card) !important;
  padding-right: var(--cj-space-card) !important;
  padding-bottom: var(--conjurly-cover-header-pad-bottom) !important;
}

/* Avoid BuddyBoss adding extra top spacing before the body */
.buddypress #item-body,
.buddypress .bp-profile-wrapper #item-body{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Extra safety: BuddyBoss uses width-default/cover-large variants */
body #buddypress .users-header #header-cover-image.width-default,
body #buddypress #header-cover-image.cover-large{
  margin: 0 !important;
}

/* =========================================================
   Cover “Try to help” fit mode (square/portrait uploads)
   - Adds blurred background + contains the foreground image
   - Intended only when user opts in via modal
   ========================================================= */

.buddypress #cover-image-container #header-cover-image.cj-cover-fit{
  position: relative !important;
  background: rgba(0,0,0,.05);
}

.buddypress #cover-image-container #header-cover-image.cj-cover-fit::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--cj-cover-url);
  background-size: cover;
  background-position: center;
  filter: blur(22px);
  transform: scale(1.18);
  opacity: 0.92;
}

/* Foreground becomes contained (prevents brutal cropping) */
.buddypress #cover-image-container #header-cover-image.cj-cover-fit > img.header-cover-img{
  position: relative;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Safety: if BuddyBoss enters reposition mode, disable fit-mode background layer */
body.bp-cover-image-repositioning .buddypress #cover-image-container #header-cover-image.cj-cover-fit::before,
body.repositioning-cover-image .buddypress #cover-image-container #header-cover-image.cj-cover-fit::before,
body.bb-cover-repositioning .buddypress #cover-image-container #header-cover-image.cj-cover-fit::before{
  display: none !important;
}

/* =========================================================
   Activity Feed — premium “barely there” elevation + dividers
   ========================================================= */

/* Premium “barely there” elevation on activity cards */
#buddypress .activity-list.bp-list .activity-item{
  box-shadow: var(--cj-shadow-card) !important;
}

/* Base divider on key activity regions */
#buddypress .activity-item .activity-content,
#buddypress .activity-item .activity-inner,
#buddypress .activity-item .activity-meta{
  border-top: 1px solid rgba(0,0,0,0.05);
}

/* Activity card internal dividers: premium hairline */
#buddypress .activity-item .activity-content,
#buddypress .activity-item .activity-inner,
#buddypress .activity-item .activity-meta,
#buddypress .activity-item .activity-meta + *,
#buddypress .activity-update-form{
  border-top-color: var(--cj-divider) !important;
  border-bottom-color: var(--cj-divider) !important;
}

/* =========================================================
   Guest action bar
   ========================================================= */

.cj-guest-actionbar{
  display: flex;
  gap: 10px;
  align-items: center;
  padding-top: 10px;

  color: rgba(0,0,0,.60);
  font-weight: 600;

  cursor: pointer;
  user-select: none;
}
.cj-guest-actionbar:hover{ color: var(--cj-accent); }
.cj-guest-dot{
  color: rgba(0,0,0,.35);
  font-weight: 400;
}

/* =========================================================
   Auth modal
   ========================================================= */

#cj-auth-modal[aria-hidden="true"]{ display: none; }
#cj-auth-modal[aria-hidden="false"]{ display: block; }

.cj-auth-modal{
  position: fixed;
  inset: 0;
  z-index: 999999;
}
.cj-auth-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
}

.cj-auth-modal__dialog{
  position: relative;
  width: min(520px, calc(100vw - 24px));
  margin: 12vh auto 0;

  background: var(--cj-surface-card, #fff);
  border-radius: var(--cj-radius-modal, 16px);
  box-shadow: var(--cj-shadow-modal, 0 12px 32px rgba(0,0,0,.12));
  padding: 18px 18px 16px;
}

.cj-auth-modal__close{
  position: absolute;
  top: 10px;
  right: 12px;

  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;

  font-size: 28px;
  line-height: 40px;

  cursor: pointer;
  opacity: .6;
}
.cj-auth-modal__close:hover{ opacity: .85; }

.cj-auth-modal__title{
  margin: 4px 0 8px;
  font-size: 18px;
}
.cj-auth-modal__text{
  margin: 0 0 14px;
  color: rgba(0,0,0,.62);
}

.cj-auth-modal__actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Prevent background scroll when modal open */
.cj-auth-modal-open{ overflow: hidden; }

/* --- Cover warning modal (reuses auth modal styling) --- */
#cj-cover-help-modal[aria-hidden="true"]{ display: none; }
#cj-cover-help-modal[aria-hidden="false"]{ display: block; }

.cj-cover-help__hint{
  margin: 10px 0 0;
  font-size: 13px;
  color: rgba(0,0,0,.55);
}

/* =========================================================
   Mobile: prevent input-focus zoom (iOS Safari + some Android)
   Rule: inputs <16px trigger zoom on focus
   Scope: BuddyBoss/BuddyPress + Conjurly modal
   ========================================================= */
@media (max-width: 782px){
  /* BuddyBoss/BuddyPress UI */
  #buddypress input,
  #buddypress select,
  #buddypress textarea,

  /* BuddyBoss login/register screens sometimes outside #buddypress */
  .buddypress-wrap input,
  .buddypress-wrap select,
  .buddypress-wrap textarea,

  /* Conjurly auth modal + cover helper modal */
  .cj-auth-modal input,
  .cj-auth-modal select,
  .cj-auth-modal textarea{
    font-size: 16px !important;
  }
}

/* =========================================================
   Register page: tighten gutters on mobile only
   ========================================================= */
@media (max-width: 782px){

  /* Narrow the page padding itself (this is usually the real “too much margin”) */
  body.registration.register #content .container{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Neutralize the grid’s negative gutter math on this template */
  body.registration.register .bb-grid{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Make sure the primary area doesn’t re-introduce padding */
  body.registration.register #primary{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* =========================================================
   Register page: make the form card use the full viewport width on mobile
   (Fixes “too much margin” even when BuddyBoss uses max-width wrappers)
   ========================================================= */
@media (max-width: 782px){

  /* Kill grid gutter math for this template */
  body.registration.register .bb-grid{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.registration.register .bb-grid > *{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Remove template-level container padding that can add inset */
  body.registration.register #content .container{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* This is the common “real culprit”: a centered wrapper with max-width */
  body.registration.register #primary,
  body.registration.register #primary.bs-bp-container-reg,
  body.registration.register #primary .buddypress-wrap,
  body.registration.register #primary .buddypress-wrap form,
  body.registration.register #signup-form{
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Make the actual “card” breathe less on mobile */
  body.registration.register #primary .buddypress-wrap,
  body.registration.register #primary .buddypress-wrap form,
  body.registration.register #signup-form{
    padding: var(--cj-gap-card) !important; /* becomes 12px at 430 */
  }
}
/* =========================================================
   Mobile fix: BuddyBoss sometimes outputs cover markup twice.
   Constrain styling to the canonical cover inside #buddypress #item-header.
   ========================================================= */

/* 1) Apply cover sizing ONLY to the canonical header cover */
.buddypress #buddypress #item-header #cover-image-container #header-cover-image{
  height: 340px !important;
  overflow: hidden !important;
}

@media (max-width: 768px){
  .buddypress #buddypress #item-header #cover-image-container #header-cover-image{
    height: 240px !important;
  }
}

/* 2) On mobile, hide any duplicate cover containers NOT inside the item header */
@media (max-width: 768px){
  .buddypress #cover-image-container:not(#buddypress #item-header #cover-image-container){
    display: none !important;
  }
}
/* =========================================================
   FIX: BuddyBoss outputs duplicate cover markup on some screens.
   Mobile: hide all covers, then re-enable the canonical one.
   ========================================================= */
@media (max-width: 768px){

  /* 1) Hide every instance (duplicate IDs included) */
  .buddypress #cover-image-container{
    display: none !important;
  }

  /* 2) Re-enable ONLY the canonical header cover inside BuddyPress item header */
  .buddypress #buddypress #item-header #cover-image-container{
    display: block !important;
  }

  /* 3) Ensure our viewport sizing applies only to the canonical one */
  .buddypress #buddypress #item-header #cover-image-container #header-cover-image{
    height: 240px !important;
    overflow: hidden !important;
    margin: 0 !important;
  }
}
/* Mobile: if inline top is negative, reset it */
@media (max-width: 768px){
  .buddypress #buddypress #item-header #header-cover-image > img.header-cover-img[style*="top: -"]{
    top: 0 !important;
  }
}