/* General container styles for posts and pages */
/* Add this new rule at the top of your CSS */
/* General container styles */
/* General container styles */
.ess-container {
  display: flex;
  align-items: flex-start;
  gap: 10px; /* Reduced from 20px */
  margin-bottom: 40px;
  position: relative;
}

/* Share column styles */
.ess-share-column {
  width: 50px; /* Reduced from 60px */
  position: sticky;
  top: 130px;
  padding-top: 20px;
  align-self: flex-start;
  margin-right: 0;
}

/* Share wrapper */
.ess-share-wrapper {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  position: relative;
  padding: 0;
}

/* Social share buttons container */
.social-share {
  display: flex;
  flex-direction: column;
  gap: 8px; /* Reduced from 10px */
  margin: 0;
  padding: 0;
}

.social-share-spacer {
  height: 10px;
  width: 100%;
  display: block;
}

/* Individual share buttons */
.social-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  margin: 5px 0; /* Reduced from 10px 0 */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
}

/* Hover effect for buttons */
.social-btn:hover {
  transform: scale(1.1);
}

/* Brand colors for social buttons */
.social-btn.whatsapp { background-color: #25D366; }
.social-btn.twitter  { background-color: #1DA1F2; }
.social-btn.linkedin { background-color: #0077B5; }
.social-btn.email    { background-color: #EA4335; }
.social-btn.line     { background-color: #00B900; }
.social-btn.share-any { background-color: #555; }

/* Icon inside buttons */
.social-btn i {
  font-size: 18px;
}

/* Main content column */
.ess-main-content {
  flex: 1;
}

/* Category page-specific styles */
.content-wrap.grid-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

/* Prevent flex layout on archive pages */
.content-wrap.grid-cols .ess-container {
  display: block;
}

/* Mobile responsiveness (up to 768px) */
@media (max-width: 768px) {
  .ess-container {
    gap: 8px;
  }
  
  .ess-share-column {
    width: 40px;
    top: 80px;
  }

  .social-btn {
    width: 35px;
    height: 35px;
    margin: 4px 0;
  }

  .social-btn i {
    font-size: 16px;
  }

  .content-wrap.grid-cols {
    grid-template-columns: 1fr;
  }
}

/* Extra small screens (up to 480px) */
@media (max-width: 480px) {
  .ess-container {
    gap: 5px;
  }
  
  .ess-share-column {
    width: 30px;
    top: 50px;
  }

  .social-btn {
    width: 25px;
    height: 25px;
    margin: 2px 0;
  }

  .social-btn i {
    font-size: 12px;
  }
}