/*
Theme Name: Underground VIP Theme
Theme URI: https://undergroundvip.co
Author: Michael S. Lopez
Author URI: https://michaelslopez.com
Description: A bespoke WordPress theme crafted for undergroundvip.co, the shadowy sanctuary where emo souls and cyberpunk rebels converge in digital dusk. Forged over three relentless months in the flickering glow of neon screens, this theme is a testament to raw vulnerability and glitchy defiance. Fueled by crimson waves of red wine during solitary homebound nights, the sharp focus of yerba mate amid workday chaos, and the jittery rush of venti iced coffees from dimly lit Starbucks corners—each line of code etched with a beautiful neurosis that blurred the boundaries between creation and catharsis. Infused with moody palettes of deep purples, electric blues, and abyss-black voids, it echoes the introspective ache of early-2000s emo anthems while embracing the dystopian grit of cyberpunk streets. Responsive and immersive, it invites users aged 18-36 to bleed ink in daily "Cuts," divide thoughts with thorn-laced <hr> dividers, and navigate a world where heartbreak hacks meet midnight confessions. This isn't just a theme—it's an underground uprising, a digital diary for the dramatically inclined, where every pixel pulses with unfiltered emotion.
Version: 1.5.7
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: undergroundvip-theme
Tags: blog, custom-theme, personal, responsive, emo, cyberpunk, underground, melodramatic
*/



/* style.css */

/* Basic Reset */
body, h1, p, ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
   /*  font-family: Verdana; */
    font-size: .9em;
}

body{
    background-color: #000;
 font-family: Verdana; 
}

a {
    text-decoration: none;
}

img{
    border: solid #000 1px;
}

table {
    border-collapse: collapse;
  }

/* Header Styling */
#site-header {
    color: #fff;
    padding: 20px 0 0 0;
    text-align: center;
    max-width: 960px; /* Change to max-width for fluidity */
    width: 100%; /* Fluid on mobile */
    margin-left: auto;
    margin-right: auto;
    background-color: #000;
}

.header-background{
    background: url('images/underground-header.png') right top no-repeat;
    height: 113px;
}

.site-container {
    max-width: 960px; /* Keep your original max-width */
    width: 100%; /* Fluid for smaller screens */
    margin: 0 auto; /* Center */
    padding: 0 10px; /* Mobile padding */
    box-sizing: border-box;
    background-color: #666B88;
    display: flex; /* Flex for main + sidebar */
    flex-direction: column; /* Stack vertically by default */
    gap: 20px; /* Vertical space */
}

.site-container a{
    color: #666B88;

}

.site-title a {
    color: #fff;
    text-decoration: none;
    font-size: 2rem;
}

.site-description {
    color: #ccc;
    font-size: 1rem;
}

.user-quick-info {
    /* position: absolute; */
    /* top: 10px; */
    /* right: 25px; */
    /* background: #fff; */
    padding: 5px 10px;
    /* border: 1px solid #ccc; */
    border-radius: 4px;
    z-index: 1000;
    color: #ffff00;
    /* margin-top: 30px; */
    font-size: x-small;
    float: right;
    margin-right: 20px;
    text-align: left;
}

#melo-login-page .content{
    width: 750px;
}

/* Navigation Menu Styling */

.nav-menu-wrapper {
    background: #000;
    padding: 4px 4px 4px 0;
}


.nav-menu {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    margin-left:15px;
    padding: 4px 4px 8px 0;
    
}

.nav-menu li {
    display: inline;
}

.nav-menu a {
    color: #d4d4dd;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 3px;
    transition: background-color 0.3s;
}

.nav-menu a:hover {
    background-color: #555;
}

.footer-container {
    max-width: 960px; /* Change to max-width for fluidity */
    width: 100%; /* Fluid on mobile */
    margin-left: auto;
    margin-right: auto;
    background-color: #000;
    margin-top: 30px;
}

.footer-message{
    color: #fff;
    padding: 20px;
    font-size: .7em;
}

/* Homepage Styling */

.homepage-container, .page-container, 
.community-news-page-container {
    display: flex;
    gap: 20px;
    padding-bottom: 50px;
}

.main-content {
    display: flex;
    flex-direction: column; /* Columns stack vertically by default */
    gap: 20px; /* Vertical space between columns */
    width: 100%;
    margin-left: 0; /* No margin on mobile */
}

.widget{
    margin-top: 12px;
    background: #D4D4DD;
}

.widget-content, .content-inner{
    background: #D4D4DD;
    color: #000000;
}

.widget-title{

    color: #fff;
    background-color: #000;
    padding: 2px 0 3px 8px;
    font-weight: normal;
    text-transform: lowercase;
    font-size: 12pt;
    margin-bottom: 0px;
    margin-top: 0px;
}

.widget-content{
    padding: 10px;
}

.widget-content-title,
h3.content-title{
    font-weight: normal;
    margin: 7px 0px 0px 0px;
}

.widget-community-news{
    margin-bottom: 10px;
    line-height: 20px;

}

.widget-community-news .meta{
    font-size: .7em;
    margin-bottom: 5px;
}


.widget-content .post-excerpt,
.content-inner .post-excerpt{
    margin-top: 10px;
    font-size: .8em;
}

.post-excerpt p{
    margin-bottom: 15px;
}
.see-more{
    font-size: .7em;
    margin-top: 10px;
    text-align: right;

}

.widget-content a{
    color: #666B88;    
    text-decoration: none;
}

.author-info .post-title a{
    color: #000;    
}

.author-info .post-title a:hover{
    color: #000;    
    text-decoration: underline;
}

.widget-column {
    flex: 1 1 100%; /* Full width by default */
    width: 100%; /* Explicit full width for stacking */
    min-width: 0;
    box-sizing: border-box;
}


.widget-community-news .author-avatar,
.content-inner .author-avatar
{
    float: left;
    margin: 0 15px 10px 0;

}

.widget_text .textwidget img {
    max-width: 100%; /* Scale to fit container width */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Preserve centering (already inline, but reinforced) */
    margin-left: auto;
    margin-right: auto;
}
.widget .image{
    min-width:100%;

}

/* Ensure avatar scales responsively within widget */
.sidebar-left .widget-profile-picture img {
    max-width: 100%; /* Prevent overflow by scaling to container width */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove any inline spacing issues */
    margin: 0 auto; /* Center if needed */
}

/* Optional: Add overflow control to widget container */
.sidebar-left .widget-profile-picture {
    overflow: hidden; /* Clip any potential overflow */
    text-align: center; /* Center the image */
}

.bp-about-me-widget{
    line-height: 1.286em;

}

.bp-profile-tag-cloud{
    min-height: 150px;
    line-height: 1em;
}

.sitewide-notice{
    background-color: #ffd;
    border: 1px solid #cb2;
    color: #440;
    font-weight: 400;
    margin-top: 3px;
    text-decoration: none;
    padding: 10px 15px;
    margin-bottom: 15px;
}

.bp-profile-tag-cloud .sitewide-notice{
    background-color: #ffd;
    border: 1px solid #cb2;
    color: #440;
    font-weight: 400;
    margin-top: 3px;
    text-decoration: none;
}

.bp-profile-statistics{
    font-size: .70em;
}

.bp-profile-statistics h2.title{
    font-family: "Helvetica Neue", "Trebuchet MS", Helvetica, Arial;
    font-size: 12pt;
    font-weight: 400;
    padding: 1px 5px 2px;
}

table.bp-statistics tr {
    border-bottom: 1px solid #ccc;
    padding: .1em .6em;
}

.bp-statistics tr td.firstcol{
    width: 80px;
}

.bp-statistics tr td.firstcol{
    padding: 5px;
    vertical-align: top;
}


.bp-interact-widget{
    font-size: .75em;
}

.widget-interact{
    padding-top: 10px;
    font-size: .85em;
    line-height: 1.85;

}

.widget-interact .friendship-button.not_friends.add,
.widget-interact .friendship-button.is_friend, 
.widget-interact .friendship-button.pending_friends,
.widget-interact .friendship-button.remove_friends.remove{
    background: url('images/icons/heart_add.png') left top no-repeat;
    padding-left: 25px;
    margin: 0;
    display: inline-block;
    height: 30px; /* Unified height for consistency */
}

.widget-interact .friendship-button.pending_friends {
    color: #666B88;
}
    
.widget-interact .enemy-button.not_enemy.add, 
.widget-interact .enemy-button.is_enemy.remove {
    background: url('images/icons/lightning_add.png') left top no-repeat;
    padding-left: 25px;
    margin: 0;
    display: inline-block;
    height: 30px; /* Unified height for consistency */
}

.widget-feedback .bp-template-notice{
    padding: 10px;
    color: red;
}
 
.tribe-events-widget-events-list{
    margin-top: 20px !important;
    background-color: #D4D4DD;
    padding-bottom: 10px !important;
}

.tribe-common h2{
    color: #fff!important;
    font-weight: 400 !important;
    background-color: #000;
    padding-left: 7px !important
}

.tribe-events-widget-events-list__view-more-link{
    margin-left: 7px !important;
    font-size: 12px;
}

.widget-community-news .post-excerpt
{
    font-size: .9em;
}

/* Sidebars */

.homepage-container .right-sidebar{
    margin-right:10px; 
}

/* RECNT JOURNAL POSTS FRONT PAGE WIDGET */

.recent-journal-posts {
    padding: 0;
    font-size: .8em;
}

.recent-journal-posts-list{
    border-bottom: 1px solid #ccc;
}

.author-avatar img {
    margin-right: 10px;
    width: 32px;
    height: 32px;
    border: 1px solid #000;
}

.author-info {
    margin-right: 15px;
}

.post-info a {
    font-weight: bold;

    text-decoration: none;
}

.post-info p {
    color: #666;
    margin: 0;
}

td.views-field-created {
    font-size: .8em;
    white-space: nowrap;
    color: #888;
}

td.views-field-author {
    width: 100%;
}




.content-area{
    padding: 0px 20px 50px 20px;
}

h3.title{
    background-color: #000000;
    color: #FFFFFF;
    text-transform: lowercase;
    padding: 2px 0 3px 10px;
    font-family: "Helvetica Neue", Helvetica;
    font-size: 1.5em;
    font-weight: 400;
    margin-top: 0px;
}

/*  ELITE PAGE */

#go-elite h1.title {
width: 290px;
height: 125px;
float: left;
background: url('images/elite/goelite.png');
text-indent: -9999px;
margin-right: 5px;

}

#go-elite ul {
    width: 90px;
    height: 100px;
    float: left;
    margin: 0;
    padding-top: 5px;
    font-size: 10px;
}

#go-elite #go-elite-right {
    width: 113px;

}

#elite-monthly {
    width: 265px;
    float: left;
    margin-right: 15px;
    margin-bottom: 30px;
}

#elite-yearly {
    width: 250px;
    float: left;
    margin-bottom: 30px;
}

h1.elite-why {
    clear: both;
    background: url('images/elite/hdr-why.png') left top no-repeat;
    text-indent: -9999px;
    font-size: 2em;
    line-height: 1.3em;
    margin-bottom: .5em;
    margin-top: 0;
}

h2 span, #elite-monthly p, #elite-yearly p {
    color: #666b88;
}

#go-elite h2 {
    font-family: "Helvetica";
    font-size: 21px;
    margin-bottom: 0;
}

#elite-monthly p, #elite-yearly p {
    font-size: 10px;
    padding: 0;
    margin: 0;
}

#elite-monthly a, #elite-yearly a {
    background: url('images/elite/upgrade-button.png') left top;
    width: 256px;
    height: 29px;
    display: block;
    text-indent: -9999px;
    margin-top: 5px;
    margin-left: -3px;
}

h1.elite-letmesee {
    clear: both;
    background: url('images/elite/hdr-letmesee.png') left top no-repeat;
    text-indent: -9999px;
    margin-top: 30px;
    font-size: 2em;
    line-height: 1.3em;
    margin-bottom: .5em;
}

h1.elite-otherpeople {
    clear: both;
    background: url('images/elite/hdr-otherpeople.png') left top no-repeat;
    text-indent: -9999px;
    margin-top: 30px;
    font-size: 2em;
    line-height: 1.3em;
    margin-bottom: .5em;
}

#elite-monthly {
    width: 265px;
    float: left;
    margin-right: 15px;
    margin-bottom: 30px;
}

#elite-yearly {
    width: 250px;
    float: left;
    margin-bottom: 30px;
}

#elite-monthly p, #elite-yearly p {
    font-size: 10px;
    padding: 0;
    margin: 0;
}

#elite-gift {
    clear: both;
    background: url('images/icons/heart.png') left 5px no-repeat;
    padding: 0px 25px;
    margin-top: 20px;
}

h1.title, h2.title {
    font-family: "Helvetica Neue", Helvetica;
    font-size: 2em;
    font-weight: 400;
}

#elite-help {
    clear: both;
    background: url('images/icons/help.png') left 5px no-repeat;
    padding: 0 0 0 25px;
    margin-top: 20px;
}



/* Buddy Press Page css */

.main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 40px
}


.main #main-content{
    width:100%;
margin-top: 15px; 
}

.main .sidebar-right  {
    width: 17%; /* Adjust as needed */
    padding: 10px;
    box-sizing: border-box;
}



/* Buddy Press Blog CSS */

.user-blog {
    display: contents; /* Primary fix: Makes wrapper layout-transparent (modern browsers) */
}

/* Fallback for older browsers (e.g., IE) or if contents doesn't suffice */
@supports not (display: contents) {
    .user-blog {
        display: flex;
        flex-direction: inherit; /* Inherit from parent .main */
        align-items: inherit;
        gap: inherit;
        width: 100%; /* Ensure it spans full parent */
        margin: 0;
        padding: 0;
    }
}


/* Media query override to match parent's flex at >=640px */
@media (min-width: 640px) {
    .main .user-blog {
        display: flex; /* Explicitly match parent's row flex */
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
    }
}

.content .content-inner{
    margin-bottom: 35px;
}

.post-content{
    border-bottom: solid #bbb 1px;
    margin-bottom: 15px;
    padding-bottom: 20px;
}

.post-content .posttitle{
    font-family: "Helvetica Neue", Helvetica;
    font-size: 1.5em;
    font-weight: 400;
    margin: 0 0 5px 0;
}

.post-content .posttitle a{
    color: #000;
}

.post-content .meta{
    font-size: .75em;
    margin-bottom: 10px;
    line-height: 1.5em;
}

.post-content .entry{
    line-height: 1.286em;
    font-size: .9em;
}

.post-content .meta .post-actions,
.post-content .meta .journal-actions
{
    margin-top: 10px;
    float: right;
}

.post-content .meta .daily-cut-meta{
    color: red;
}


#buddypress div.pagination ul.page-numbers li{
    display: inline-block;
}

/* Single Post Page css */

.single-post-container{
    display: flex;
    flex-wrap: nowrap;

}

.single-post-container #main-content{
    width:60%;
}


.single-post-container .sidebar-right {
    width: 17%; /* Adjust as needed */
    padding: 10px;
    box-sizing: border-box;
}

.single-post-container .sidebar-left {
    width: 23%; /* Adjust as needed */
    padding: 10px;
    box-sizing: border-box;
}

.entry img{
    max-width: 100%;
}

/*  My Melo Journal Post Table */

/* My Melo Menu */ 

/* Container for the menu widget */
.widget-my-melo-menu .my-melo-menu-container {
    margin-top: 20px; /* Kept your original margin */
}

/* Menu list styles */
.widget-my-melo-menu .my-melo-menu-list {
    list-style: none; /* Remove default bullets */
    padding: 0;
    margin: 0;
}

/* Individual menu items */
.widget-my-melo-menu .my-melo-menu-list li a {
    background: url(images/icons/heart_add.png) left top no-repeat; /* Default icon */
    padding-left: 25px; /* Space for icon */
    margin: 0 0 10px 0; /* Added vertical spacing for readability */
    display: block; /* Changed to block for full-width clickable areas */
    height: 30px; /* Kept original height */
    text-decoration: none; /* Optional: Clean look */
    color: #333; /* Default text color; override as needed */
}

/* Specific icon overrides */
.widget-my-melo-menu .my-melo-menu-list li a.my-melo-home {
    background: url(images/icons/house.png) left top no-repeat;
}

.widget-my-melo-menu .my-melo-menu-list li a.my-melo-new-post {
    background: url(images/icons/pencil.png) left top no-repeat;
}

.widget-my-melo-menu .my-melo-menu-list li a.my-melo-activity {
    background: url(images/icons/content.png) left top no-repeat;
}

.widget-my-melo-menu .my-melo-menu-list li a.my-melo-folders {
    background: url(images/icons/folder.png) left top no-repeat;
}

.widget-my-melo-menu .my-melo-menu-list li a.my-melo-edit-profile {
    background: url(images/icons/user_edit.png) left top no-repeat;
}

.widget-my-melo-menu .my-melo-menu-list li a.my-melo-notifications {
    background: url(images/icons/messages/exclamation.png) left top no-repeat;
}

.widget-my-melo-menu .my-melo-menu-list li a.my-melo-friends {
    background: url(images/icons/user_add.png) left top no-repeat;
}

.widget-my-melo-menu .my-melo-menu-list li a.my-melo-enemies {
    background: url(images/icons/user_delete.png) left top no-repeat;
}

.widget-my-melo-menu .my-melo-menu-list li a.my-melo-settings {
    background: url(images/icons/cog.png) left top no-repeat;
}

.widget-my-melo-menu .my-melo-menu-list li a.my-melo-logout {
    background: url(images/icons/arrow_right.png) left top no-repeat;
}

/* Hover effect for better UX */
.widget-my-melo-menu .my-melo-menu-list li a:hover {
    color: #007bff; /* Blue hover; customize */
    opacity: 0.8; /* Subtle fade */
}

/* Buddypress Activities */

/* Table-like layout */
.bp-activity-table { display: table; width: 100%; border-collapse: collapse; }
.bp-activity-row   { display: table-row; }
.bp-activity-cell  { display: table-cell; vertical-align: middle; }

/* Column sizing */
.bp-activity-cell--avatar { width: 0px; } /* avatar + padding */
.bp-activity-cell--fav,
.bp-activity-cell--delete { width: 1%; white-space: nowrap; }

/* Tidy up buttons */
.activity-meta .button { margin: 0; }
.bp-activity-cell--fav .button + .button { margin-left: .5rem; }

/* Keep existing BuddyPress styles playing nicely */
.activity-avatar img { border-radius: 50%; display: block; }
.activity-header p { margin: 0; }

#buddypress .activity-list .activity-content{
     margin: 0 0 0 0 !important;
}

.activity-meta .button span.dashicons {
	font-size: 12px;
	line-height: 1;
}
.bp-activity-cell--fav .button,
.bp-activity-cell--delete .button {
	padding: 4px 6px;
}

#buddypress #activity-stream p{
	    margin: 0 !important; 
}

#buddypress ul.item-list li{
}

#buddypress div.activity-meta {
    margin: 0px !important; 
}

#buddypress .bp-secondary-action{
    border: none !important;
    background: none !important;
}

/* Turn the Delete text into a Dashicon (keep text for SR users) */
.activity-meta a.delete-activity {
  position: relative;
  padding: 4px 6px;
}

/* visually hide the "Delete" text but keep it for screen readers */
.activity-meta a.delete-activity {
  color: transparent;            /* hide text */
}
.activity-meta a.delete-activity::after {
  font-family: dashicons;
  font-size: 20px;
  line-height: 1;
  color: inherit;
}

#buddypress div.activity-meta a {
    font-size: 9px !important;
}
/* Optional: show real text to screen readers only */
.activity-meta a.delete-activity span.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* 1) Remove any old continuous border */
.bp-activity-cell--delete {
  border-left: none !important;
}

/* 2) Draw a short vertical divider from the Favorite cell side */
.bp-activity-cell--fav {
  position: relative;
}
/* Short, centered line (adjust height to taste) */
.bp-activity-cell--fav::after {
  content: "";
  position: absolute;
  right: 0;                 /* at the edge between Favorite and Delete */
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1.2em;            /* short line ≈ text height; try 14px or 60% if you prefer */
  background-color: #ccc;   /* tweak color as needed */
  opacity: 0.9;
}

#buddypress #activity-stream {
    margin-top: 20px !important;
}
/* Buddypress Profile */

#buddypress div.profile h2{
    font-family: "Helvetica Neue", Helvetica;
    font-size: 1.5em;
    font-weight: 400;
    margin: 0 0 20px 0;
}

.profile .standard-form .editfield{
       margin-bottom: 10px;
}
#buddypress .profile .standard-form .editfield label,
#buddypress .profile .standard-form .editfield legend,
#buddypress .standard-form label
{
    display: block;
    font-weight: 100;
    margin: 15px 0 5px;
    width: auto;
    font-size: .8em;
}

#buddypress .field-visibility-settings-toggle,
#buddypress .field-visibility-settings-notoggle{
    font-size: .7em;
    visibility: hidden;
}

#buddypress .standard-form input[type=text],
#buddypress .standard-form textarea,
#buddypress .standard-form select,
#buddypress .standard-form input[type=email],
#buddypress .standard-form input[type=password]
{
    border-color: rgba(31, 179, 221, .9) !important;
    font-size: .8em;
}

.input-options.datebox-selects {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to the next line on smaller screens */
    gap: 20px; /* Adds space between items */
    align-items: center; /* Vertically centers the items */
}

#buddypress .standard-form input[type=email],
#buddypress .standard-form input[type=password]{
    width: 50%;
}

#buddypress .item-list-tabs#subnav ul li#change-cover-image-personal-li {
    display:none;
}


.bp-avatar #bp-delete-avatar-container p{
    margin-top: 10px;
}

#buddypress table.notifications{
    font-size: .8em;
}

#buddypress div.pagination .pag-count {
    font-size: .9em;
    color: #000;
}

#buddypress ul.item-list li img.avatar {
    float: left;
    margin: 0 10px 0 0;
    height: 15px !important;
    margin-left: 30px;
    width: 15px !important;
}

#buddypress ul.item-list li div.item-title{
    display: inline;
    font-size: 1em;
}



#buddypress ul.item-list li div.item-meta{
    display: inline;
}

#buddypress span.activity {
    display: inline-block;
    font-size: xx-small;
    padding: 0;
    font-style: italic;
    color: #888;
    margin-left: 10px;
}

#buddypress .friends ul.item-list .action a{
    background: #fff;
    border: 1px solid #ccc;
    color: #767676;
    font-size: x-small;
    cursor: pointer;
    outline: 0;
    padding: 4px 10px;
    text-align: left;
    text-decoration: none;

}

#buddypress .activity-list li.friends .activity-content .activity-inner{
    display: none;
}

#buddypress span.time-since{	
	    color: #767676;	
	    font-style: italic;	
	    font-size: 8px;
}


#settings-form table.notification-settings{
    font-size: .8em;
}

#settings-form p{
    font-weight: 400;
     margin: 15px 0 15px;
    font-size: 1em;
}

/* Statistics Page */

/* Stats section styling */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding: 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Style individual widgets */
.stats-grid .widget {
    background: #E8E8EE;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stats-grid .widget:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Widget title styling */
.stats-grid .widget-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.5rem;
}

/* Generic styling for stats leader widgets */
.stats-grid .views-field-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: #444;
    margin-bottom: 0.75rem;
}

.stats-grid .views-field-picture img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    object-fit: cover;
}

/* First-place user styling */
.stats-grid .first-place-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.stats-grid .first-place-picture img {
    width: 80px;
    height: 80px;
}

.stats-grid .first-place-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stats-grid .first-place-details .views-field-name a {
    font-size: .8rem; /* Slightly larger for emphasis */
}

.stats-grid .first-place-details .views-field-total,
.stats-grid .first-place-details .views-field-created {
    font-size: 0.75rem;
}

.stats-grid .first-place-details .views-field-created blockquote {
    margin: 0;
}

.stats-grid .views-field-name a {
    color: #0073aa;
    text-decoration: none;
    font-weight: 500;
}

.stats-grid .views-field-name a:hover {
    text-decoration: underline;
}

.stats-grid .stat-leaders-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
 font-size: .75rem;
}

.stats-grid .stats-leaders-table th,
.stats-grid .stats-leaders-table td {
    padding: 0.25rem;
    text-align: left;
    border-bottom: 1px solid #eee;
 font-size: .75rem;
}

.stats-grid .more-link a {
    font-size: .7rem;
    display: inline-block;
    margin-top: 1rem;
    color: #0073aa;
    text-decoration: none;
    font-weight: 500;
}

.stats-grid .more-link a:hover {
    text-decoration: underline;
}

/* Stats menu styling */
ul.stats-menu {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    height: auto;
    line-height: normal;
    list-style: none;
    margin: 0;
    padding: 0 10px;
    white-space: nowrap;
    text-transform: lowercase;
    background-color: #E8E8EE;
    border-radius: 4px 4px 0 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
}


ul.stats-menu li {
    display: inline-block;
    margin: 0;
    padding: 0;
    position: relative;
}

ul.stats-menu li.current-menu-item {
    background-color: #0073aa;
    border-bottom: 2px solid #005c82;
    color: #ffffff;
}

ul.stats-menu li a {
    display: block;
    margin: 0;
    padding: 8px 15px;
    text-decoration: none;
    color: #333;
    transition: color 0.2s ease, background-color 0.2s ease;
}

ul.stats-menu li a:hover {
    color: #0073aa;
    background-color: rgba(102, 107, 136, 0.1);
}

ul.stats-menu li.current-menu-item a {
    color: #fff;
    background-color: transparent;
}

ul.stats-menu li.current-menu-item a:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}

/* Top stats title styling */
.top-stats-title {
    background-color: #000000;
    color: #FFFFFF;
    text-transform: lowercase;
    padding: 2px 0 3px 10px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.25em;
    font-weight: 400;
    margin-bottom: 0;
    border-radius: 4px 4px 0 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 0.5rem;
    }

    .stats-grid .widget {
        padding: 1rem;
    }

    .stats-grid .widget-title {
        font-size: 1rem; /* Reduced from 1.15rem */
    }

    .stats-grid .first-place-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .stats-grid .first-place-picture img {
        width: 60px;
        height: 60px;
    }

    ul.stats-menu {
        flex-direction: column;
        align-items: stretch;
        white-space: normal;
        padding: 0;
    }

    ul.stats-menu li {
        width: 100%;
    }

    ul.stats-menu li a {
        text-align: center;
        padding: 10px 15px;
    }

    ul.stats-menu li.current-menu-item {
        border-bottom: 1px solid #005c82;
    }

    .top-stats-title {
        font-size: 1.1em;
        padding: 4px 0 6px 8px;
        text-align: center;
    }
}

/* High-resolution screens */
@media (min-width: 1200px) {
    .stats-grid {
        gap: 2rem;
    }
}

/* Activity page */

#whats-new{
    resize:none;
}

#buddypress form#whats-new-form textarea{

    width: 90%;
    margin-left: 20px;
}
#buddypress form#whats-new-form p.activity-greeting {
    margin-left: 20px;
    display: inline-block;
}

#edit-personal-li{
    display: none;
}



.widget-column {
    flex: 1 1 45%; /* Roughly equal columns, with min-width for stacking */
    min-width: 0; /* Prevent overflow */
    box-sizing: border-box;
}

/* Sidebar styling (now outside .main) */
.sidebar-right {
    flex: 0 0 25%; /* Fixed width on desktop; adjust % as needed */
    box-sizing: border-box;
    /* Preserve your original styles */
    padding: 10px;
}

.bp-profile-css-editor textarea {
    font-size: 11px !important;
}


/* My Melo Page */
/* My Melo Page Layout - Mobile-First: Default to stacked (scoped to #my-melo-page) */
#my-melo-page .site-container {
    max-width: 960px; /* Keep your original max-width */
    width: 100%; /* Fluid for smaller screens */
    margin: 0 auto; /* Center */
    padding: 0 10px; /* Mobile padding */
    box-sizing: border-box;
    background-color: #666B88;
    display: flex; /* Flex for main elements */
    flex-direction: column; /* Stack vertically by default */
    gap: 20px; /* Vertical space */
}

#my-melo-page .main {
    display: flex;
    flex-direction: column; /* Stack sidebar and content vertically */
    gap: 20px; /* Space between sidebar and content */
}

.sidebar-left {
  order: -1;          /* sidebar above content on mobile (keep or set to 1 if you want it below) */
  width: 100%;
}

.main-content, .blog-content,
#my-melo-page {       /* your <main id="my-melo-page" class="main-content"> */
  width: 100%;
  min-width: 0;       /* prevent overflow in flex layouts */
  margin-top: 12px
}

#my-melo-page .content-inner {
    padding: 10px; /* Mobile padding */
}

#my-melo-page .content-header h3.title {
    font-size: 1.2em; /* Smaller title on mobile */
    text-align: center; /* Center for better mobile view */
}

/* Tabs - Stack vertically on mobile for better touch/scroll */
#my-melo-page .tabs {
    flex-direction: column; /* Stack tabs */
    align-items: center;
    border-bottom: none; /* Remove bottom border for stacked */
}

#my-melo-page .tab-link {
    width: 100%; /* Full width tabs */
    text-align: center;
    margin: 5px 0; /* Vertical spacing */
    border: 1px solid #ccc; /* Full border for buttons */
    border-radius: 5px; /* Rounded for touch */
}

/* Tab Content - Ensure full width */
#my-melo-page .tab-content {
    padding: 10px; /* Reduced padding on mobile */
}

/* Journal Tables (assuming shortcodes output tables) - Make responsive */
#my-melo-page [my_melo_journal_table] table, /* Target shortcode output; adjust selector if needed */
#my-melo-page table {
    width: 100%;
    overflow-x: auto; /* Horizontal scroll if wide */
    display: block; /* Allow scrolling on mobile */
    font-size: 0.9em; /* Slightly smaller text */
}

#my-melo-page [my_melo_journal_table] td, th {
    padding: 8px; /* Reduced padding */
    white-space: normal; /* Allow text wrap */
}


/* Page Footer/Comments - Full width */
#my-melo-page .page-footer {
    width: 100%;
    padding: 10px 0;
}

/* Responsive stacking for mobile */
@media (max-width: 479px) { /* Align with desktop min-640px; adjust if needed */
    .site-container {
        padding: 0 10px; /* Reduce padding on small screens */
    }

    .main {
        flex-direction: column !important; /* Stack sidebar and content vertically; !important to override */
        align-items: stretch; /* Full width children */
        gap: 20px; /* Space between sidebar and content */
    }

    /* Sidebar and main content full width */
    .sidebar-left,
    .page-content {
        flex: 1 1 100%;
        width: 100%; /* Ensure full width */
        margin: 0; /* Reset margins */
    }

    /* Widgets stack naturally (already blocks) but ensure no side-by-side */
    .sidebar-left .widget {
        width: 100%; /* Full width widgets */
        margin-bottom: 15px; /* Space between widgets */
    }

    /* Hide right sidebar if present */
    .sidebar-right {
        display: none;
    }

    /* Nav menu adjustments */
    .nav-menu a {
        padding: 5px 10px; /* Adjusted padding for mobile */
        font-size: 0.9em; /* Slightly smaller font */
        display: block; /* Stack menu items vertically if needed */
    }
}
@media (min-width: 640px) { /* Desktop: side-by-side columns */
    .main-content {
        flex-direction: row;
        flex: 3; /* Preserve your flex: 3 from original CSS */
    }

    #my-melo-page {
    flex-direction: column !important; /* ensure its inner layout doesn't break the outer flex */
  }

    .main {
        flex-wrap: nowrap; /* Restore nowrap for desktop if desired */
    }
}


/* Desktop Overrides: Side-by-side layout (scoped) */
@media (min-width: 640px) {
    .main {
    flex-direction: row;
    align-items: flex-start;
    gap: 15px;
  }

  .sidebar-left {
    order: 0;         /* put sidebar first/left */
    flex: 0 0 23%;    /* ~23% column */
    max-width: 23%;
    margin-bottom: 25px;
  }

  #my-melo-page {
    order: 1;         /* content to the right */
    flex: 1 1 77%;
    max-width: 77%;
  }

    #my-melo-page .content-header h3.title {
        font-size: 1.5em; /* Original size */
        text-align: left;
    }

    #my-melo-page .tabs {
        flex-direction: row; /* Horizontal tabs */
        border-bottom: 1px solid #ccc; /* Restore border */
    }

    #my-melo-page .tab-link {
        width: auto; /* Auto width */
        margin-right: 5px;
        border-bottom: none; /* Original style */
    }

    #my-melo-page .tab-content {
        padding: 20px; /* Original padding */
    }

    #my-melo-page [my_melo_journal_table] table {
        overflow-x: visible; /* No scroll needed on desktop */
        display: table; /* Restore table display */
    }
}

/* Optional: Tablet adjustments (keep sidebar visible, stack columns if needed) */
@media (max-width: 767px) {
    .sidebar-left {
        display: block; /* Always show sidebar */
    }

    #my-melo-page .main-content {
        flex: 1 1 100%; /* Full width if needed */
    }
}



/* Base styles for the sidebar widget container */


/* Menu container */
.sidebar-left .widget-news-sidebar-left .menu-community-news-menu-container {
    margin: 0; /* Reset any default margins */
    padding: 10px;
}

/* Main menu list */
.sidebar-left .widget-news-sidebar-left #menu-community-news-menu.menu {
    list-style: none; /* Remove bullets */
    padding: 0; /* Reset padding */
    margin: 0; /* Reset margins */
}

/* Individual menu items */
.sidebar-left .widget-news-sidebar-left #menu-community-news-menu.menu li.menu-item {
    padding: 0; /* Reset padding */
    position: relative; /* For potential icons or submenus */
    border-bottom: solid #bbb 1px;
}

/* Menu links */
.sidebar-left .widget-news-sidebar-left #menu-community-news-menu.menu li.menu-item a {
    display: block; /* Full-width clickable area */
    padding: 10px 15px; /* Comfortable padding */
    text-decoration: none; /* No underline */
    color: #333; /* Default text color */
    font-size: 1em; /* Standard font size */
    border-radius: 4px; /* Slight rounding */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover transitions */
}


/* Active/current menu item (if your theme adds .current-menu-item class) */
.sidebar-left .widget-news-sidebar-left #menu-community-news-menu.menu li.current-menu-item a {
    background-color: #007bff; /* Blue background for active */
    color: #fff; /* White text */
    font-weight: bold; /* Bold for emphasis */
}

/* Submenu styles */
.sidebar-left .widget-news-sidebar-left #menu-community-news-menu.menu li.menu-item .sub-menu {
    list-style: none; /* No bullets */
    padding: 0 0 0 20px; /* Indent submenu */
    margin: 5px 0 0 0; /* Space above submenu */
    border-left: 2px solid #bbb; /* Left border for hierarchy */
}

/* Submenu items */
.sidebar-left .widget-news-sidebar-left #menu-community-news-menu.menu li.menu-item .sub-menu li.menu-item {
    margin: 5px 0; /* Reduced space for sub-items */
}

/* Submenu links */
.sidebar-left .widget-news-sidebar-left #menu-community-news-menu.menu li.menu-item .sub-menu li.menu-item a {
    padding: 8px 12px; /* Slightly smaller padding */
    font-size: 1.1em; /* Slightly smaller font */
}

/* Responsive adjustments (for screens <= 768px wide, e.g., tablets/mobile) */
@media (max-width: 768px) {
    .sidebar-left .widget-news-sidebar-left {
        padding: 10px; /* Reduce padding */
    }

    .sidebar-left .widget-news-sidebar-left .widget-title {
        font-size: 1.1em; /* Smaller title */
    }

    .sidebar-left .widget-news-sidebar-left #menu-community-news-menu.menu li.menu-item a {
        padding: 8px 10px; /* Smaller padding */
        font-size: 0.95em; /* Slightly smaller text */
    }

    .sidebar-left .widget-news-sidebar-left #menu-community-news-menu.menu li.menu-item .sub-menu {
        padding-left: 10px; /* Less indent */
    }
}