/*
 * Blog Post Social Share - Sticky vertical icons (circular, light bg, dark icons)
 * Target: .blog-post-social-share (Divi Code module containing social-share-shortcode)
 */

/* Row containing icons - relative for absolute child, padding for 50px icon column */
.et_pb_row:has(.blog-post-social-share) {
  position: relative;
  padding-left: 66px;
  overflow: visible;
}

/* Ensure no ancestor clips sticky - Divi sometimes adds overflow:hidden */
.et_pb_section:has(.blog-post-social-share),
.et_pb_row:has(.blog-post-social-share) .et_pb_column {
  overflow: visible !important;
}

/* Container - absolute so it runs alongside content */
.blog-post-social-share {
  position: absolute;
  left: 4%;
  top: 40px;
  z-index: 10;
  overflow: visible;
}

.blog-post-social-share.et_pb_module {
  position: absolute;
}

.blog-post-social-share .et_pb_code_inner {
  position: relative;
  overflow: visible;
}

/* List - vertical column, sticky on scroll */
.blog-post-social-share #sns-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
  position: sticky;
  top: 20px;
}

/* Each icon - client SVG icons (50×50px per client spec) */
.blog-post-social-share .share-icon-item {
  margin: 0;
}

.blog-post-social-share .share-icon-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  text-decoration: none !important;
}

.blog-post-social-share .share-icon-item a .share-icon {
  width: 50px;
  height: 50px;
  display: block;
}

/* SVG circle background - #BDC3C9 per client spec */
.blog-post-social-share .share-icon-item .share-icon-bg {
  fill: #bdc3c9;
  transition: fill 0.3s ease;
}

/* SVG icon glyph - #000000 per client spec */
.blog-post-social-share .share-icon-item .share-icon-glyph,
.blog-post-social-share .share-icon-item .share-icon-glyph path,
.blog-post-social-share .share-icon-item .share-icon-glyph circle {
  fill: #000000;
  transition: fill 0.3s ease;
}

/* Hover - green background, black glyph */
.blog-post-social-share .share-icon-item a:hover .share-icon-bg {
  fill: #bff67e;
}

.blog-post-social-share .share-icon-item a:hover .share-icon-glyph,
.blog-post-social-share .share-icon-item a:hover .share-icon-glyph path,
.blog-post-social-share .share-icon-item a:hover .share-icon-glyph circle {
  fill: #000000;
}

/*
 * Blog Post Content - Link styling per client spec
 * Target: .blog-post-container (post content module)
 */

.blog-post-container a {
  color: #bff67e;
  text-decoration: underline;
  text-decoration-color: #bff67e;
  text-underline-offset: 0.15em;
}

.blog-post-container a:hover {
  color: #d4f89a;
  text-decoration-color: #d4f89a;
}