/*
==============================================================================
FONTAWESOME 6 - CLEAN IMPLEMENTATION
Houtini WordPress Theme - FontAwesome icon styling
==============================================================================

This file provides clean FontAwesome 6 integration without !important chaos.
Ensures all icons display correctly with proper font families and weights.

Version: 2.0.0 - Complete rewrite with clean CSS approach
*/

/* ===== CORE FONTAWESOME STYLES ===== */
.fa, .fas, .far, .fab, .fal, .fat, .fad, .fa-solid, .fa-regular, .fa-brands, .fa-light, .fa-thin, .fa-duotone {
  font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Pro', 'Font Awesome 6 Brands', 'Font Awesome 6 Sharp';
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== FONT WEIGHTS BY STYLE ===== */
.fa-solid, .fas {
  font-weight: 900;
}

.fa-regular, .far {
  font-weight: 400;
}

.fa-brands, .fab {
  font-weight: 400;
}

.fa-light, .fal {
  font-weight: 300;
}

.fa-thin, .fat {
  font-weight: 100;
}

/* ===== THEME-SPECIFIC ICON STYLING ===== */
.houtini-theme-toggle .fa,
.social-links .fa {
  display: inline-block;
  vertical-align: middle;
}

/* Social links specific styling */
.social-links .fa {
  font-size: 1.25rem;
  transition: color 0.3s ease, transform 0.2s ease;
}

.social-links .fa:hover {
  transform: translateY(-2px);
}

/* Header/navigation icons */
.navbar .fa {
  font-size: 1rem;
  line-height: inherit;
}

/* ===== BRAND ICON OVERRIDES ===== */
.fa-github, .fa-twitter, .fa-npm, .fa-discord, 
.fa-linkedin, .fa-youtube, .fa-instagram {
  font-family: 'Font Awesome 6 Brands';
  font-weight: 400;
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
.fa[aria-hidden="true"] {
  display: inline-block;
}

/* Screen reader text for icons without labels */
.fa + .sr-only,
.fa + .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== DARK THEME SUPPORT ===== */
.dark-theme .fa {
  color: inherit;
}

/* ===== RESPONSIVE ICON SIZING ===== */
@media (max-width: 768px) {
  .social-links .fa {
    font-size: 1.1rem;
  }
  
  .navbar .fa {
    font-size: 0.9rem;
  }
}

/* ===== PERFORMANCE OPTIMIZATION ===== */
.fa::before {
  display: inline-block;
  text-decoration: inherit;
  width: auto;
  margin-right: 0.2em;
  text-align: center;
}

/* Remove margin from last icon in a group */
.fa:last-child::before {
  margin-right: 0;
}