/* FontAwesome Icon Fixes and Social Icon Consistency */

/* Ensure FontAwesome icons are visible and properly styled */
.social-icon i,
#hero .social-icon i,
.aboutImg-content i {
  font-family: "Font Awesome 6 Brands", "Font Awesome 6 Free" !important;
  font-style: normal !important;
  display: inline-block !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  width: auto !important;
  height: auto !important;
  line-height: inherit !important;
  font-size: 1.2em !important;
}

/* Specific fixes for brand icons - use lighter weight */
.fa-linkedin,
.fab.fa-linkedin,
.fa-bluesky,
.fab.fa-bluesky {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}

/* Specific fixes for solid icons - use heavier weight */
.fa-calendar,
.fas.fa-calendar {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}

/* Ensure no conflicts with image replacements */
.social-icon img {
  display: none !important;
}

/* Make sure FontAwesome icons are visible */
.social-icon i {
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
}

/* Consistent social icon styling across all pages */
.social-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 2px solid !important;
  transition: all 0.2s ease-in-out !important;
  text-decoration: none !important;
}

/* Light mode colors - blue icons with blue borders */
body:not(.dark) .social-icon {
  color: #0d6efd !important;
  border-color: #0d6efd !important;
  background-color: transparent !important;
}

body:not(.dark) .social-icon:hover {
  background-color: #0d6efd !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

/* Dark mode colors - white icons with white borders */
body.dark .social-icon {
  color: #fff !important;
  border-color: #fff !important;
  background-color: transparent !important;
}

body.dark .social-icon:hover {
  background-color: #fff !important;
  color: #18191a !important;
  transform: translateY(-2px) !important;
}