/* ═══════════════════════════════════════════════════════════
   IT BOY — v10 Refinements CSS
   R01 / R02  Message text — no CSS needed (JS only)
   R03        Social media SVG icons sizing + platform colours
   ══ NO OTHER STYLES ARE CHANGED ══
   ═══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════
   R03 — SVG ICON SIZING
   The existing .social-icon wrapper is 38×38px and
   already handles layout, border, hover lift, and
   color transitions via currentColor.
   We only need to size the SVG and set each
   platform's brand colour on hover.
══════════════════════════════════════════════════ */

/* SVG fills the icon button correctly */
.social-icon svg {
  width:  18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
  /* Inherit the parent's currentColor — already handled by main.css */
  fill: currentColor;
  transition: fill 0.3s ease;
}

/* ── Platform-specific hover accent colours ──
   These only activate on hover; default state
   continues to use var(--text-secondary) from main.css  */

/* Facebook — #1877F2 */
.si-facebook:hover {
  background: rgba(24, 119, 242, 0.12) !important;
  border-color: #1877F2 !important;
  color: #1877F2 !important;
}

/* Instagram — gradient brand colour approximation #E1306C */
.si-instagram:hover {
  background: rgba(225, 48, 108, 0.12) !important;
  border-color: #E1306C !important;
  color: #E1306C !important;
}

/* TikTok — #010101 / #EE1D52 accent; use red for visibility */
.si-tiktok:hover {
  background: rgba(238, 29, 82, 0.12) !important;
  border-color: #EE1D52 !important;
  color: #EE1D52 !important;
}

/* LinkedIn — #0A66C2 */
.si-linkedin:hover {
  background: rgba(10, 102, 194, 0.12) !important;
  border-color: #0A66C2 !important;
  color: #0A66C2 !important;
}

/* WhatsApp — #25D366 */
.si-whatsapp:hover {
  background: rgba(37, 211, 102, 0.12) !important;
  border-color: #25D366 !important;
  color: #25D366 !important;
}

/* ── Light mode adjustments ──
   In light mode the default icon colour is slightly
   darker so it reads on white backgrounds          */
[data-theme="light"] .social-icon svg {
  opacity: 0.8;
}
[data-theme="light"] .social-icon:hover svg {
  opacity: 1;
}

/* ── Responsive: slightly smaller icons on mobile ── */
@media (max-width: 480px) {
  .social-icon svg { width: 16px; height: 16px; }
}


/* ══════════════════════════════════════════════════
   Footer contact item links (fci-link)
   Visually identical to the previous <p> elements.
   Only the cursor and a subtle hover signal are added.
   Dark Mode and Light Mode both handled via CSS vars.
══════════════════════════════════════════════════ */
.fci-link {
  /* Match existing .footer-contact-item p exactly */
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;

  /* Strip link chrome */
  text-decoration: none;
  display: block;

  /* Signal interactivity without changing the design */
  transition: color 0.25s ease;
}
.fci-link:hover {
  color: var(--brand-light);
  text-decoration: none;
}
/* Pointer cursor on parent div too for whole-row feel */
.footer-contact-item:has(.fci-link) {
  cursor: pointer;
}