/* Social icons with mobile support
   - Icons use inline SVG data-URIs with currentColor for easy recoloring
   - Hover/focus sets background-color to brand color and icon to white
   - Touch-friendly sizes and spacing on mobile
*/
.social-icons {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
  margin: 1rem 0 2rem;
  padding: 0 1rem;
  flex-wrap: wrap;
}

.social-icons a {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: #000;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.2s ease;
  position: relative;
  /* Larger touch target but visually same size */
  padding: 8px;
  margin: -8px;
}

/* Accessibility: visible focus indicator */
.social-icons a:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,112,243,0.18);
}

/* Mobile optimizations */
@media (max-width: 480px) {
  .social-icons {
    gap: 1rem;
    margin: 1.5rem 0;
  }
  
  .social-icons a {
    width: 48px;
    height: 48px;
  }
}

/* Small screen optimizations */
@media (max-width: 360px) {
  .social-icons {
    gap: 0.5rem;
  }
  
  .social-icons a {
    width: 44px;
    height: 44px;
  }
}

.social-icons .icon{
  display:inline-block;
  width:24px;
  height:24px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

.social-icons .icon.facebook{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M22 12.07C22 6.48 17.52 2 11.93 2S2 6.48 2 12.07C2 17.06 5.66 21.19 10.44 22v-7.03H7.9v-2.9h2.54V9.41c0-2.51 1.49-3.89 3.77-3.89 1.09 0 2.23.2 2.23.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56v1.87h2.78l-.44 2.9h-2.34V22C18.34 21.19 22 17.06 22 12.07z'/></svg>");}
.social-icons .icon.instagram{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M7 2C4.24 2 2 4.24 2 7v10c0 2.76 2.24 5 5 5h10c2.76 0 5-2.24 5-5V7c0-2.76-2.24-5-5-5H7zm10 3a1 1 0 110 2 1 1 0 010-2zM12 7.5A4.5 4.5 0 1016.5 12 4.5 4.5 0 0012 7.5zm0 7A2.5 2.5 0 1114.5 12 2.5 2.5 0 0112 14.5z'/></svg>");}
.social-icons .icon.twitter{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M22 5.92c-.63.28-1.3.47-2 .56a3.48 3.48 0 001.53-1.92c-.68.4-1.44.69-2.24.85A3.48 3.48 0 0015.5 4c-1.92 0-3.48 1.77-3.48 3.95 0 .31.04.62.1.91C8.02 8.66 4.5 6.7 2.2 3.9c-.34.59-.53 1.28-.53 2.01 0 1.39.8 2.62 2.02 3.33-.56 0-1.09-.17-1.55-.43v.04c0 1.9 1.35 3.48 3.14 3.84-.33.09-.68.13-1.04.13-.25 0-.5-.02-.74-.07.5 1.56 1.95 2.7 3.66 2.73A6.98 6.98 0 012 19.54a9.83 9.83 0 005.32 1.56c6.39 0 9.89-5.53 9.89-10.32v-.47c.68-.5 1.26-1.12 1.72-1.82-.63.28-1.3.47-2 .56z'/></svg>");}
.social-icons .icon.email{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/></svg>");}

/* hover / brand colors */
.social-icons a.facebook:hover, .social-icons a.facebook:focus{ background-color:#1877F2; color:#fff; }
.social-icons a.twitter:hover, .social-icons a.twitter:focus{ background-color:#1DA1F2; color:#fff; }
.social-icons a.instagram:hover, .social-icons a.instagram:focus{ background: radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%); color:#fff; }
.social-icons a.email:hover, .social-icons a.email:focus{ background-color:#D93025; color:#fff; }

.social-icons a:active{ transform:translateY(1px); }