/* ========================================================================== */
/* TOP HEADER SOCIAL ICONS — BRUTE-FORCE OVERRIDE (GLOBAL)                    */
/* File(s): assets/css/custom-functions.css  (recommended)                     */
/*        or assets/css/about-page.css (page-specific)                         */
/* Targets: <section class="header__top"> ... <ul class="social social__icon"> */
/* Reason : Normalize size, color, hover, and bitmap recolor for Alignable     */
/* ========================================================================== */

/* ---- 0) QUICK PALETTE (edit these to change colors; hexs are annotated) --- */
:root {
  --gt-social-fg: #facc15;        /* icon color (default) — amber #facc15 */
  --gt-social-bg: transparent;    /* icon background (default) */
  --gt-social-hover-fg: #ffffff;  /* icon color (hover/focus) — white */
  --gt-social-hover-bg: #2e0c5e;  /* icon background (hover/focus) — purple */
  --gt-social-size: 18px;         /* glyph size */
  --gt-social-pad: 10px;          /* inner padding */
  --gt-social-border-width: 2px;  /* border thickness */
  --gt-social-border-color: #facc15; /* border color — amber */
}

/* ---- 1) BUTTON SHAPE + BASE STATE ---------------------------------------- */
.header__top .social.social__icon li a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: calc(var(--gt-social-size) + var(--gt-social-pad) * 2);
  height: calc(var(--gt-social-size) + var(--gt-social-pad) * 2);

  color: var(--gt-social-fg) !important;
  background: var(--gt-social-bg) !important;
  border: var(--gt-social-border-width) solid var(--gt-social-border-color) !important;
  border-radius: 9999px !important; /* circle */
  line-height: 1;

  transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
  text-decoration: none !important;
}

/* Font Awesome <i> glyphs inherit the anchor color */
.header__top .social.social__icon li a i {
  font-size: var(--gt-social-size) !important;
  color: currentColor !important;
}

/* ---- 2) HOVER + FOCUS ----------------------------------------------------- */
.header__top .social.social__icon li a:hover,
.header__top .social.social__icon li a:focus-visible {
  transform: translateY(-2px);
  color: var(--gt-social-hover-fg) !important;
  background: var(--gt-social-hover-bg) !important;
  border-color: var(--gt-social-hover-bg) !important;
  outline: none !important;
}

/* Accessible focus ring (subtle glow using brand yellow) */
.header__top .social.social__icon li a:focus-visible {
  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.35);
}

/* ---- 3) ALIGNABLE PNG — EXACT HEX VIA CSS MASK (no asset swap needed) ----- */
/* Hide the bitmap inside the link and draw a vector-like mask using that PNG */
.header__top .social.social__icon li a[aria-label="Alignable"] img {
  display: none !important;
}

.header__top .social.social__icon li a[aria-label="Alignable"]::before {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  background-color: currentColor; /* follows link color/hover */
  -webkit-mask-image: url('../img/icon/2-alignable.png');
          mask-image: url('../img/icon/2-alignable.png');
  -webkit-mask-size: contain;     mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
}

/* Fallback for browsers without mask-image support */
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
  .header__top .social.social__icon li a[aria-label="Alignable"] img {
    display: inline-block !important;
    /* Approximate #facc15 using CSS filters */
    filter: brightness(0) saturate(100%) invert(84%) sepia(78%) saturate(508%) hue-rotate(357deg) brightness(103%) contrast(102%);
  }
}

/* ---- 4) OPTIONAL: APPLY SAME LOOK TO MOBILE SIDEBAR + FOOTER -------------- */
/* To enable the same styling in the sidebar and footer, REMOVE the "/*" and  */

/* BEGIN-UNCOMMENT
.side_bar .social.social__icon li a,
.footer-wrapper .social-icons a {
  color: var(--gt-social-fg) !important;
  background: var(--gt-social-bg) !important;
  border: var(--gt-social-border-width) solid var(--gt-social-border-color) !important;
  border-radius: 9999px !important;
  width: calc(var(--gt-social-size) + var(--gt-social-pad) * 2);
  height: calc(var(--gt-social-size) + var(--gt-social-pad) * 2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.side_bar .social.social__icon li a i,
.footer-wrapper .social-icons a i {
  font-size: var(--gt-social-size) !important;
  color: currentColor !important;
}
.side_bar .social.social__icon li a:hover,
.side_bar .social.social__icon li a:focus-visible,
.footer-wrapper .social-icons a:hover,
.footer-wrapper .social-icons a:focus-visible {
  transform: translateY(-2px);
  color: var(--gt-social-hover-fg) !important;
  background: var(--gt-social-hover-bg) !important;
  border-color: var(--gt-social-hover-bg) !important;
}
END-UNCOMMENT */