/*
Theme Name:     Peepso-child
Theme URI:      
Description:    Peepso-theme-gecko child theme.
Author:         Me
Author URI:     
Template:       peepso-theme-gecko
Version:        7.0.1.0
*/




body.postid-4511 {padding: 3%; margin-top: 5%; }



.gc-profile__cover--full .ps-focus--gecko .ps-focus__info, .gc-profile__cover--full .ps-focus--gecko .ps-focus__menu-inner, .gc-profile__cover--full .ps-focus--gecko .ps-focus__cover-inner, .gc-profile__cover--wide, .main, .dokan-store .site-main, .gc-widgets__inner, .gc-footer__bottom-inner, .gc-footer__grid, .gc-header__search-box-inner, .gc-header__inner, .g-container {max-width: 85%!important;}


:root {
	--pmpro--color--base: #191919!important;
    --pmpro--color--border--variation: #191919!important;
    --pmpro--color--contrast: #fff!important;
}

.pmpro-nav-avatar {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  object-fit: cover;        /* crop to fill the box */
  display: inline-block;    /* ensure box dimensions apply */
  overflow: hidden;         /* in case the IMG is larger */
  vertical-align: middle;   /* align with text */
  margin-left: 0.4rem;      /* space between name and avatar */
}

.ps-navbar nav ul .pmpro-nav-avatar {
  /* if your theme forces imgs to max-height or adds borders, reset them */
  max-width: none !important;
  max-height: none !important;
  border: none !important;
  padding: 0 !important;
}

/*body.pmpro-body-has-access {
  background-image: url("https://www.rockvoices.com/wp-content/uploads/2024/01/spring-guitar-pattern.png"); background-repeat: repeat; background-color: rgba(53, 4, 86, 1);}
*/

h2.pmpro_card_title, div.pmpro_card_content {padding: 0!important;}

/* PMPro Member Directory (PeepSo Gecko): perfectly round avatars */
.pmpro_member_directory-item .pmpro-profile-avatar{
  --avatar-size: 128px;           /* tweak size as needed */
  width: var(--avatar-size);
  height: var(--avatar-size);     /* fallback for older browsers */
  aspect-ratio: 1 / 1;            /* keep square in modern browsers */
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 var(--avatar-size);   /* stop flexbox from stretching it */
  line-height: 0;
}

.pmpro_member_directory-item .pmpro-profile-avatar img.avatar{
  width: 100%;
  height: 100%;
  object-fit: cover;               /* crop nicely, no distortion */
  display: block;
  border-radius: 0 !important;     /* wrapper provides the round mask */
}



.pmpro-profile-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 1.5rem;
    align-items: start;
  }
  
  .pmpro-profile-avatar {
    /* avatar on left, spans both rows */
    grid-row: 1 / span 2;
  }
  
  .pmpro-profile-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2rem;
  }
  
  .pmpro-profile-col .pmpro-field {
    margin-bottom: 1rem;
  }
  
  .pmpro-field-label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.25rem;
  }
  
  .pmpro-field-data {
    display: block;
  }


/* PeepSo feed avatars → force perfect circles */
  .peepso .ps-avatar img,
  .peepso .ps-avatar__image img {
      aspect-ratio: 1/1;
      border-radius: 50% !important;
      object-fit: cover !important;
  }
  
  /* Make sure the wrapper doesn't squash it */
  .peepso .ps-avatar,
  .peepso .ps-avatar__image {
      aspect-ratio: 1/1;
      border-radius: 50% !important;
      overflow: hidden !important;
  }









/******************* LOCO REPO - LOCATIONS ARCHIVE BY TITLE / ACF ************************/

div#city-alpha-columns div.elementor-widget-container div.elementor-posts-container.elementor-posts {grid-auto-flow: column; grid-template-rows: repeat(8, minmax(0, auto));}

#new-rv-city-footer {display: flex;}
#new-rv-city-footer a {color:#f2f1ef!important; text-decoration: none;}
#new-rv-city-footer span.state-row {display: block; margin: 9px 0; line-height: 1.6rem;}
#new-rv-city-footer .footer-states {font-weight: 500; color: #ffb86c!important; margin-right: 20px;}
#new-rv-city-footer a:hover {color:#8be9fd!important;}
#new-rv-city-footer button a {color:#17171C!important;}
#new-rv-city-footer span {margin-bottom: 0px!important;}
#new-rv-city-footer .elementor-element {line-height: initial;}
#new-rv-city-footer .footer-button {color:#17171C!important;}
#new-rv-city-footer div.elementor-button-wrapper a.elementor-button-link {color:#17171C!important;}
#new-rv-city-footer .column {padding: 10px;}

#new-rv-city-footer .column:first-of-type { 
  width: 60%!important;
}

/********************************************************** LOCATIONS BY CITY */
#rehearsal-photo img {max-height: 350px; width: auto;}

#simple-location-list div.location-entry  {
	display: grid;
	grid-template-columns: 20% 40% 40%;
	gap: 1rem;
  }
   
#simple-location-list  span.location-title {font-weight: 700; }
#simple-location-list span.location-title a {color:#f1fa8c; }

.enroll-alert {border: 1px solid #f1fa8c; padding: 1rem;}

/********************************************************** REGISTER LINKS BY CITY */

div.register-today-by-city div.city-entry {font-size: .9rem;
  display: grid;
  grid-template-columns: 12% 26% 25% 27%;
  gap: 1rem;
  white-space: nowrap;
  margin-bottom: 1rem;
}
  
div.register-today-by-city div.city-entry a.donate-button { 
  text-transform: uppercase;
  font-size: .8rem;
  letter-spacing: 0.5px; 
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
}

div.register-today-by-city div.city-entry a.donate-button:hover { 
background-color: #8be9fdcc; color:#17171C;

}
div.register-today-by-city div.city-entry span.location-title {font-weight:bold; color:#ffb86c;}


/********************************************************** POSTERS */
ul.locations-list a {font-weight: 700;}
ul.locations-list li.location-entry  {
	display: grid;
	grid-template-columns: 50% 20% 30%;
	gap: 1rem;
  }
   

ul.locations-list span a {color:#4ac8e8;}

ul.locations-list {font-size: .9rem; line-height: 1.8rem;}
ul.locations-list a {color: #4ac8e8!important;}
ul.locations-list a:hover {color: #f1fa8c!important;}


div#all-flyers ul.locations-list {margin-left: 0;}

#all-flyers.two-columns ul.locations-list {white-space: nowrap;
	column-count: 2;
	column-gap: 0; /* Adjust the gap between columns as needed */
}




/********************************************************** CONCERTS */
/* top bar concert time */

body div.top-bar {display:none;}
body.post-type-archive-product div.top-bar, body.page-id-4784 div.top-bar {display: inherit;}
body.post-type-archive-product div.top-bar ul.products li  {background-color: transparent; border: none;}

form.cart input.alg_open_price.text {width: 50%!important;}

div#concert-time {font-size: .9rem; line-height: 1.5rem;}
div#concert-time a {color: #4ac8e8!important;}
div#concert-time a:hover {color: #f1fa8c!important;}

div#concert-time ul.locations-list li {list-style-type: none;}


#concert-time > ul.locations-list li.location-entry {
display: block;
}

#concert-time.no-concert-links ul.locations-list {
   column-count: 2;
   column-gap: 20px; /* Adjust the gap between columns as needed */
}

/********************************************************** DIRECTORS */

div.short-bio {overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;}
  
.swiper-slide-contents .dce-view-field-director_photo img {
	  min-height: 150px;
	  min-width:150px;
	  aspect-ratio: 1 / 1;
	  object-fit: cover;
  }


#director-scroll img {border-radius: 100%; border: 1px solid #bd93f9;}


img.director_photo {display:inline;
  width: auto;
  display: inline-flex;
  float: right;
}  

.elementor-9102 .elementor-element.elementor-element-0a871cb {width: min-content;}

div.director_photo div.elementor-widget-container {display: inline-flex; width: 50%;
  height:auto;
  float: right;}

section#director-loop div div div div div.elementor-widget-container {font-size: .9rem;}
section#director-loop .elementor-button {border-radius:100px; background: #ffb86c; color: #17171C;}
section#director-loop div div div section div div div {color:#ffb86c;}
section#director-loop div > a {white-space: nowrap; z-index: 200;  position: relative;}


#playlist-text div.song-list {overflow: scroll; overflow-x: hidden; height: 300px; widows: auto;}
#playlist-text div.song-details
{font-size: .9rem;
  line-height: 1rem;
  margin: 0;

}

#playlist-text {max-height: 405px; vertical-align: middle;}
div.playlist-head {padding-top: 1rem; padding-bottom: 2rem;}

ul.parts {
	list-style: none; /* Remove default list styles */
	padding: 0; /* Remove default padding */
	margin: 0; /* Remove default padding */
}

ul.parts li {
	display: flex; /* Use flexbox for layout */
	justify-content: space-between; /* Space between items */
	align-items: center; /* Align items vertically */
	padding: 5px 0; /* Add padding for spacing */
}

span.modified-date {
	font-style: italic;
	color: #999; font-size: small;
}


.parts {
	list-style: none;
	padding: 0;
}

.part-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.part-item a {
	flex: 1;
}

.info {
	display: flex;
	align-items: center;
	gap: 8px; /* Add space between date and "Updated!" */
	white-space: nowrap; /* Prevent line wrapping */
}
.updated {
	font-size: 0.9em;
	color: #ffb86c; /* Customize the color as needed */
}

.modified-date {
	font-size: 0.9em;
	color: #666; /* Customize the color as needed */
}

body.playlist-template-default div#description {font-size:.9rem;} 

.elementor-11817 .elementor-element.elementor-element-21c2356 {display:flex; gap: 1rem; padding-top: 1rem;}

#member-tabs a:visited {color: rgba(0, 154, 191, 0.529)}










/* Ensure the main container layout is grid-based */
.gc-container .gc-row {
  display: grid;
  grid-template-columns: 300px 1fr 300px; /* Left sidebar, content, right sidebar */
  gap: 20px;
  align-items: start; /* Ensure everything aligns at the top */
}

/* Left Sidebar */
.sidebar--left {
  grid-column: 1;
}

/* Main Content */
.content {
  grid-column: 2;
  background-color: #1b1b1b;
  color: #fff;
  padding: 20px;
  box-sizing: border-box;
}

/* Right Sidebar */
.sidebar--right {
  grid-column: 3;
}

/* Responsive Design: Stack layout on smaller screens */
@media (max-width: 1024px) {
  .gc-container .gc-row {
	grid-template-columns: 1fr;
  }
  .sidebar {
	grid-column: auto;
	width: 100%; /* Full width */
  }
  .content {
	grid-column: auto;
  }
}