/* Tiny portrait phones (like iPhone SE, 320px) */

.social-shares-div {
  display: flex; 
  flex-direction: row;
  flex-wrap: wrap; 
  gap: 3px; 
  width:100%;
  margin-top: 3rem;
  justify-content: center;
  align-items: center;
}

#news-brief .social-shares-div {
  justify-content: left;
}

/* #image-of-the-week .social-shares-div {
  justify-content: center;
} */

.btn-facebook {
  background-color: #3b5998 !important ;
}

.btn-threads {
  background-color: #333333 !important; 
}

.btn-twitter {
  background-color: #000000 !important; 
}

.btn-pinterest {
  background-color: #bd081c !important;
}

.btn-reddit {
  background-color: #ff4500 !important; 
}

.btn-linkedin {
  background-color: #0077b5 !important;
}

.btn-bluesky {
  background-color: #1c8bff !important; 
}

.btn-messenger {
  background-color: #0084ff !important;
}

.btn-messenger:hover {
  background-color: #006fe0 !important;
}

.btn-email {
  background-color: #444 !important;
}

.btn-sms {
  background-color: #28a745 !important;
}

.btn-social-share {
  border-radius: 28px !important;
  color: white !important; 
  text-decoration: none;
}

.btn-social {
  border-radius: 5px !important;
  color: white; 
  text-decoration: none;
  padding: 0.5em 1em;
}

.icon-circle {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-left: 0px;
  margin-right: 0px;
  color: white;
  text-decoration: none;
  font-size: 20px;
  transition: all 0.2s ease;
}

/* --- Hover styles ONLY for devices that can truly hover --- */
@media (hover: hover) {
  .icon-circle:hover {
    transform: scale(1.25);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0);
  }
}

/* Platform-specific background colors */
.icon-facebook   { background-color: #3b5998; }
.icon-x          { background-color: #000000; }
.icon-linkedin   { background-color: #0077b5; }
.icon-reddit     { background-color: #ff4500; }
.icon-pinterest  { background-color: #bd081c; }
.icon-threads    { background-color: #333333; }
.icon-bluesky    { background-color: #1c8bff; }
.icon-messenger  { background-color: #0084ff; }
.icon-email      { background-color: #444444; }
.icon-sms        { background-color: #28a745; }

.icon-facebook   { background-color: #827020; }
.icon-x          { background-color: #827020; }
.icon-linkedin   { background-color: #827020; }
.icon-reddit     { background-color: #827020; }
.icon-pinterest  { background-color: #827020; }
.icon-threads    { background-color: #827020; }
.icon-bluesky    { background-color: #827020; }
.icon-messenger  { background-color: #827020; }
.icon-email      { background-color: #827020; }
.icon-sms        { background-color: #827020; }

.icon-circle i {
  font-size: 0.8rem;
}



/* --- XS Custom Breakpoints: <576px --- */

@media (min-width: 360px) {
  .icon-circle {
    margin-left: 0;
    margin-right: 0px;
    transition: all 0.2s ease;
  }
}

/* Upper-range phones in portrait (480px - 575.98px) */
@media (min-width: 480px) {
  /* Styles for larger portrait phones */

  .icon-circle {
    width: 28px;
    height: 28px;
    margin-left: 1px;
    margin-right: 1px;
    font-size: 20px;
  }

}

/* --- SM: 576px to 767.98px --- */
@media (min-width: 576px) {
  /* SM portrait styles */

  .icon-circle {
    width: 28px;
    height: 28px;
    margin-left: 2px;
    margin-right: 2px;
    font-size: 20px;
  }

}

/* --- MD: 768px to 991.98px --- */
@media (min-width: 768px) {
  /* MD portrait styles */


  #news-brief .social-shares-div {
    justify-content: left;
  }

  /* #image-of-the-week .social-shares-div {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    justify-content: left;
  } */

}

/* --- LG: 992px to 1199.98px --- */
@media (min-width: 992px) {
  /* LG portrait styles */
}

/* --- XL: 1200px to 1399.98px --- */
@media (min-width: 1200px) {
  /* XL portrait styles */
}

/* --- XXL: 1400px and up --- */
@media (min-width: 1400px) {
  /* XXL portrait styles */
}