/*
Theme Name:     Kleo Child
Theme URI:
Description:    Child theme for Kleo
Author:         SeventhQueen
Author URI:     http://seventhqueen.com
Template:       kleo
Tags:  one-column, two-columns, right-sidebar, fluid-layout, custom-menu, featured-images, post-formats, sticky-post, translation-ready
License: GNU General Public License
License URI: license.txt
*/

/*
* Please add your custom styles below
*/

/* Fix activity stream avatar styling */
#buddypress .activity-list .activity-avatar,
#buddypress .activity-avatar.rounded,
#buddypress .activity-avatar.item-avatar,
.activity-avatar.rounded,
.activity-avatar.item-avatar {
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 50% !important;
  overflow: visible !important; /* Changed to visible to allow badges to show without clipping */
  box-shadow: none !important;
}

#buddypress .activity-list .activity-avatar img.avatar,
#buddypress .activity-avatar.rounded img.avatar,
#buddypress .activity-avatar.item-avatar img.avatar,
.activity-avatar.rounded img.avatar,
.activity-avatar.item-avatar img.avatar {
  border-radius: 50% !important;
  background: transparent !important;
  background-color: transparent !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  overflow: hidden !important; /* Keep image clipped to circle, but allow container to show badges */
}

/* Fix gallery thumbnail sizes to 150px x 150px */
.mpp-item-thumbnail.mpp-gallery-cover {
  display: block !important;
  width: 150px !important;
  height: 150px !important;
  overflow: hidden !important;
}

.mpp-item-thumbnail.mpp-gallery-cover img {
  width: 150px !important;
  height: 150px !important;
  object-fit: cover !important;
  display: block !important;
}

/* Center gallery title text */
.mpp-shortcode-list-gallery a.mpp-gallery-title,
.mpp-shortcode-list-gallery .mpp-item-title.mpp-gallery-title,
a.mpp-item-title.mpp-gallery-title,
a.mpp-gallery-title {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Center gallery items */
.mpp-item.mpp-gallery {
  text-align: center !important;
}

.mpp-item-entry.mpp-gallery-entry {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Reduce member directory button sizes and spacing */
#buddypress #members-list .action button,
#buddypress #members-list .action a.button,
#buddypress div.item-list-tabs ul li.selected a span,
#members-dir-list .action button,
#members-dir-list .action a.button,
.bp-profile-button a.button,
#buddypress .generic-button a,
#buddypress .friendship-button a,
#buddypress a.button,
#buddypress button,
#buddypress input[type="submit"],
#buddypress input[type="button"],
.bp-block-member .bp-profile-button a,
.bp-block-member button {
  padding: 3px 5px !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
  margin: 2px !important;
  min-height: 24px !important;
  height: auto !important;
}

/* Reduce spacing in member list items */
#buddypress #members-list li,
#buddypress ul.item-list li {
  padding: 10px !important;
}

/* Reduce member item action area spacing */
#buddypress div.item-list-tabs ul li.last,
#buddypress .action {
  margin-top: 5px !important;
}

/* Make member buttons inline */
#buddypress #members-list .action,
#members-dir-list .action,
.bp-profile-button,
ul.action-buttons.action {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

ul.action-buttons.action > li,
ul.action-buttons.action > div,
#buddypress #members-list .action > div,
#buddypress #members-list .action > li,
#buddypress .action > .generic-button,
#buddypress .action > li.generic-button,
#buddypress .action > li.friendship-button {
  flex: 0 0 32% !important;
  max-width: 32% !important;
  margin: 0 1% 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  align-items: stretch !important;
}

/* Ensure buttons inside containers fill their width and height */
#buddypress .generic-button button,
#buddypress .generic-button a,
#buddypress li.generic-button button,
#buddypress li.generic-button a,
#buddypress li.friendship-button button {
  width: 100% !important;
  flex: 1 !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 24px !important;
}

/* Member block horizontal layout */
.member-content-wrapper {
  display: flex !important;
  align-items: flex-start !important;
  gap: 15px !important;
  margin-bottom: 10px !important;
}

/* Left justify all member list text */
.member-inner-list,
.member-inner-list *,
.list-wrap,
.list-wrap *,
#members-list .item,
#members-list .item *,
.member-content-wrapper,
.member-content-wrapper *,
.member-header,
.member-header *,
.member-profile-fields,
.member-profile-fields * {
  text-align: left !important;
}

/* Override any center alignment */
#members-list .item-title,
#members-list .item-meta,
#members-list h2,
.list-title {
  text-align: left !important;
  justify-content: flex-start !important;
}

/* Avatar on the left - smaller size */
.member-inner-list .item-avatar {
  flex: 0 0 60px !important;
  width: 60px !important;
  height: 60px !important;
  margin: 0 !important;
}

.member-inner-list .item-avatar img {
  width: 60px !important;
  height: 60px !important;
  object-fit: cover !important;
}

/* Content area on the right */
.member-content-wrapper .item {
  flex: 1 !important;
  min-width: 0 !important;
}

/* Username and activity header */
.member-header {
  margin-bottom: 8px !important;
}

.member-header .item-title {
  margin-bottom: 2px !important;
}

.member-header .item-title a {
  font-weight: bold !important;
  font-size: 14px !important;
}

.member-header .item-meta {
  font-size: 11px !important;
  color: #999 !important;
}

/* Profile fields styling */
.member-profile-fields {
  margin-top: 8px !important;
}

.member-profile-fields .profile-field {
  font-size: 12px !important;
  line-height: 1.6 !important;
  margin-bottom: 2px !important;
  color: #333 !important;
}
/* Activity stream favorite button */
.activity-meta .fav,
.activity-meta .unfav,
.activity .activity-meta a.button.fav,
.activity .activity-meta a.button.unfav,
#buddypress .activity-meta .fav,
#buddypress .activity-meta .unfav {
  width: auto !important;
  max-width: 100px !important;
  float: right !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  margin-left: auto !important;
}

/* Friends requests Accept/Reject buttons - match activity stream button sizing */
.friends-meta.action {
  display: flex !important;
  gap: 20px !important;
  height: 20px !important;
}

.friends-meta.action .generic-button button.button.accept,
.friends-meta.action .generic-button button.button.reject,
#buddypress .friends-meta.action .generic-button button.button.accept,
#buddypress .friends-meta.action .generic-button button.button.reject {
  padding: 3px 8px !important;
  font-size: 11px !important;
  width: auto !important;
  max-width: 100px !important;
  min-height: auto !important;
  height: auto !important;
  line-height: 1.4 !important;
  margin: 2px !important;
}

/* Member profile header buttons - centered in two rows */
#item-header-content .member-header-actions.action {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  align-content: center !important;
  gap: 8px !important;
  margin: 15px auto !important;
  padding: 0 !important;
  list-style: none !important;
  max-width: 600px !important;
  text-align: center !important;
}

#item-header-content .member-header-actions .generic-button,
#item-header-content .member-header-actions .friendship-button,
#item-header-content .member-header-actions li {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: auto !important;
  max-width: none !important;
}

/* Force Block and Report buttons to second row */
#item-header-content .member-header-actions.action {
  display: grid !important;
  grid-template-columns: auto auto auto !important;
  justify-content: center !important;
  column-gap: 5px !important;
  row-gap: 8px !important;
  justify-items: center !important;
}

/* First three buttons stay on first row */
#item-header-content .member-header-actions > div:nth-child(1),
#item-header-content .member-header-actions > div:nth-child(2),
#item-header-content .member-header-actions > div:nth-child(3) {
  grid-row: 1 !important;
}

/* Move Private Message button 3px left */
#item-header-content .member-header-actions #send-private-message {
  margin-left: -3px !important;
}

/* Block and Report on second row, both in center column */
#item-header-content .member-header-actions li.bptk-block-profile {
  grid-row: 2 !important;
  grid-column: 2 !important;
  justify-self: end !important;
  margin-right: 5px !important;
}

#item-header-content .member-header-actions li.bptk-report-profile {
  grid-row: 2 !important;
  grid-column: 2 !important;
  justify-self: start !important;
  margin-left: 5px !important;
}

#item-header-content .member-header-actions .generic-button a,
#item-header-content .member-header-actions .generic-button button,
#item-header-content .member-header-actions .friendship-button button,
#item-header-content .member-header-actions li a {
  padding: 6px 12px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  width: auto !important;
  min-width: fit-content !important;
  max-width: none !important;
  display: inline-block !important;
  flex: none !important;
}

/* Reduce gap between profile field rows to 2px */
table.profile-fields.bp-tables-user tr td {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

table.profile-fields.bp-tables-user tr td.label {
  text-align: right !important;
}

table.profile-fields.bp-tables-user tr td p {
  margin: 0 !important;
}

/* Fix caps lock warning - hide by default, only show when caps lock is actually on */
#caps-warning {
  display: none !important;
}

#caps-warning.show-caps-warning {
  display: block !important;
}

/* Fix vertical line alignment in responsive profile sections */
@media screen and (max-width: 767px) {
  /* Ensure all profile sections have consistent container padding and left alignment */
  #buddypress div.profile .bp-widget {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }
  
  /* Specifically left-justify the Looking For section to match Base */
  #buddypress div.profile .bp-widget.looking-for,
  #buddypress div.profile .bp-widget[class*="looking"],
  #buddypress div.profile .bp-widget[class*="Looking"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    text-align: left !important;
  }
  
  /* Ensure hr-title and gap elements don't add extra padding */
  #buddypress div.profile .bp-widget .hr-title,
  #buddypress div.profile .bp-widget .gap-10 {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  
  /* Ensure profile group titles don't add extra padding */
  #buddypress div.profile .bp-widget h3.screen-heading,
  #buddypress div.profile .bp-widget h3.profile-group-title {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  
  /* Ensure all profile field labels have consistent width and positioning */
  #buddypress div.profile .bp-widget .dl-horizontal dt {
    width: 110px !important;
    float: left !important;
    text-align: right !important;
    padding-right: 20px !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure all profile field values have consistent margin */
  #buddypress div.profile .bp-widget .dl-horizontal dd {
    margin-left: 130px !important;
    padding-left: 20px !important;
    box-sizing: border-box !important;
  }
  
  /* Remove any conflicting margins/padding on dl elements */
  #buddypress div.profile .bp-widget .dl-horizontal {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Ensure Looking For section's dl elements are left-aligned */
  #buddypress div.profile .bp-widget.looking-for .dl-horizontal,
  #buddypress div.profile .bp-widget[class*="looking"] .dl-horizontal,
  #buddypress div.profile .bp-widget[class*="Looking"] .dl-horizontal {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  
  /* Align table-based profile fields (Looking For section) with dl-horizontal structure */
  #buddypress div.profile .bp-widget table.profile-fields {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  
  /* Make table label cells match dl-horizontal dt width and positioning */
  #buddypress div.profile .bp-widget table.profile-fields td.label {
    width: 110px !important;
    max-width: 110px !important;
    min-width: 110px !important;
    padding-right: 20px !important;
    padding-left: 0 !important;
    margin: 0 !important;
    text-align: right !important;
    box-sizing: border-box !important;
    text-wrap: auto !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
  
  /* Prevent "Travel" from wrapping in "Can you Travel/Accomodate?" label */
  #buddypress div.profile .bp-widget.looking-for table.profile-fields tr.field_can-you-travel-accomodate td.label {
    white-space: normal !important;
  }
  
  /* Ensure "Travel" stays together */
  #buddypress div.profile .bp-widget.looking-for table.profile-fields tr.field_can-you-travel-accomodate td.label span {
    white-space: nowrap !important;
  }
  
  /* Make table data cells match dl-horizontal dd positioning */
  #buddypress div.profile .bp-widget table.profile-fields td.data {
    padding-left: 20px !important;
    padding-right: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure table rows don't add extra spacing */
  #buddypress div.profile .bp-widget table.profile-fields tr {
    margin: 0 !important;
  }
  
  /* Left-align text in Looking For section */
  #buddypress div.profile .bp-widget.looking-for,
  #buddypress div.profile .bp-widget.looking-for table,
  #buddypress div.profile .bp-widget.looking-for table.profile-fields,
  #buddypress div.profile .bp-widget.looking-for table.profile-fields td,
  #buddypress div.profile .bp-widget.looking-for table.profile-fields td.data,
  #buddypress div.profile .bp-widget.looking-for table.profile-fields td.data p {
    text-align: left !important;
  }
}

/* For smaller mobile screens - stack vertically without vertical lines */
@media only screen and (max-width: 480px) {
  #buddypress div.profile .bp-widget .dl-horizontal dt,
  #buddypress div.profile .bp-widget .dl-horizontal dd {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
    float: none !important;
  }
}

/* Hide cover/background images from activity stream entries */
#buddypress .activity-list .activity-content .activity-inner img[src*="cover"],
#buddypress .activity-list .activity-content .activity-inner img[src*="background"],
#buddypress .activity-list .activity-content .activity-inner img[class*="cover"],
#buddypress .activity-list .activity-content .activity-inner img[class*="background"],
#buddypress .activity-list .activity-content img[src*="cover-image"],
#buddypress .activity-list .activity-content img[src*="cover_image"],
#buddypress .activity-list .activity-content img[src*="header-cover-image"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  opacity: 0 !important;
}

/* Hide any cover image backgrounds in activity entries */
#buddypress .activity-list .activity-content .activity-inner[style*="cover"],
#buddypress .activity-list .activity-content .activity-inner[style*="background-image"],
#buddypress .activity-list .activity-content[style*="cover"],
#buddypress .activity-list .activity-content[style*="background-image"] {
  background-image: none !important;
  background: none !important;
}

/* Fix Recent Visitors thumbnail size - override 130px to 16px */
/* Override buddypress.min.css rule: .buddypress div#item-header img.avatar { width: 130px; } */
/* Use #buddypress (ID) instead of .buddypress (class) for higher specificity */
#buddypress div#item-header .recent-visitors img.avatar,
#buddypress div#item-header .recent-visitors img.avatar.avatar-16,
#buddypress div#item-header .recent-visitors a img.avatar,
#buddypress div#item-header .recent-visitors .avatar,
#buddypress div#item-header .bp-recent-visitors img.avatar,
#buddypress div#item-header .bp-recent-visitors .avatar,
.buddypress div#item-header .recent-visitors img.avatar,
.buddypress div#item-header .recent-visitors img.avatar.avatar-16,
.buddypress div#item-header .recent-visitors a img.avatar,
.buddypress div#item-header .recent-visitors .avatar,
.buddypress div#item-header .bp-recent-visitors img.avatar,
.buddypress div#item-header .bp-recent-visitors .avatar,
.bp-recent-visitors img.avatar,
.bp-recent-visitors .avatar,
.widget.bp-recent-visitors img,
.widget.bp-recent-visitors .avatar,
.bp-recent-visitors-list img,
.bp-recent-visitors-list .avatar,
.recent-visitors img.avatar,
.recent-visitors .avatar,
.recent-visitors img.avatar-16,
.recent-visitors .avatar-16,
.recent-visitors a img.avatar {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  object-fit: cover !important;
}

/* Fix verified badge HTML escaping issue - ensure it renders as HTML */
h2.user-nicename #bp-verified-header,
h4.user-nicename #bp-verified-header {
  display: inline-block;
}

h2.user-nicename #bp-verified-header img,
h4.user-nicename #bp-verified-header img {
  display: inline-block;
  width: auto;
  height: auto;
  max-width: 24px;
  max-height: 24px;
  vertical-align: middle;
}

/* Profile badges container - position directly below username */
#buddypress div#item-header-content .profile-badges-container {
  display: block;
  margin-top: 8px;
  margin-bottom: 8px;
  margin-left: 0;
  line-height: 1;
}

#buddypress div#item-header-content .profile-badges-container #bp-meetnow-header,
#buddypress div#item-header-content .profile-badges-container #bp-verified-header {
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}

#buddypress div#item-header-content .profile-badges-container #bp-meetnow-header img,
#buddypress div#item-header-content .profile-badges-container #bp-verified-header img {
  display: inline-block;
  width: auto;
  height: auto;
  max-width: 24px;
  max-height: 24px;
  vertical-align: middle;
}

/* Profile activity timestamp - position below username */
#buddypress div#item-header-content .profile-activity-timestamp,
#buddypress div#item-header-content span.activity.profile-activity-timestamp,
#buddypress div#item-header-content .activity.profile-activity-timestamp {
  display: block !important;
  margin-top: 4px;
  margin-bottom: 8px;
  font-size: 13px;
  color: #999;
  line-height: 1.4;
  min-height: 1px; /* Ensure it takes up space even if empty */
}

/* Hide empty timestamp text but keep the element for layout */
#buddypress div#item-header-content .profile-activity-timestamp:empty {
  display: block !important;
  height: 0;
  margin-top: 0;
  margin-bottom: 8px;
}

/* Hide username until badges are processed - prevents FOUC */
h2.user-nicename:not(.badges-processed),
h4.user-nicename:not(.badges-processed) {
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Show username after badges are processed */
h2.user-nicename.badges-processed,
h4.user-nicename.badges-processed {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Hide any escaped HTML entities that might appear as text */
h2.user-nicename span[id*="bp-verified-header"],
h4.user-nicename span[id*="bp-verified-header"],
h2.user-nicename span[id*="bp-meetnow-header"],
h4.user-nicename span[id*="bp-meetnow-header"] {
  display: none !important;
}

/* Hide timestamp in item-meta - it will be moved to after badges by JavaScript */
#buddypress div#item-meta span.activity,
#buddypress div#item-header-content .item-meta span.activity {
  display: none !important;
}

/* Style timestamp when positioned after badges */
#buddypress div#item-header-content .profile-badges-container + .profile-activity-timestamp,
#buddypress div#item-header-content .profile-badges-container + span.activity.profile-activity-timestamp,
#buddypress div#item-header-content .profile-badges-container + span.activity {
  display: block !important;
  margin-top: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  color: #999;
  line-height: 1.4;
}

/* Fix verified badge HTML escaping in activity comments */
/* Note: We don't hide comments to prevent FOUC - comments must show immediately */
/* Badge processing happens in background without hiding content */

.acomment-meta .buddyverified-comment,
.acomment-meta #bp-verified-header {
  display: inline-block;
  margin-right: 4px;
  vertical-align: middle;
}
.acomment-meta .buddyverified-comment img,
.acomment-meta #bp-verified-header img {
  display: inline-block;
  width: auto;
  height: auto;
  max-width: 16px;
  max-height: 16px;
  vertical-align: middle;
}

/* MeetNow badge in activity action text */
#buddypress .activity-list li.activity-item .activity-header .bp-meetnow.activity-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
}

#buddypress .activity-list li.activity-item .activity-header .bp-meetnow.activity-badge img {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
}