/* aatm.ai · social-icon override (NOT part of the signed handoff).
   Loaded AFTER the signed site_v1_7.css so these rules win.

   WHY: the signed footer renders the Instagram link as a plain text list item
   (`.ig-link > a` reading "Instagram"), revealed by [data-ig]. The founder
   picked variant A (full-colour brand icon) for social links (issue #46). This
   restyles ONLY the already-present, signed Instagram link into its brand icon
   — it adds no new markup and touches no signed file. Additive and reversible:
   delete this file + its <link> and the signed text link returns verbatim.

   SCOPE / LIMITS:
   - Instagram only. X and Facebook need NEW footer markup + signed JS wiring
     (site_v1_7.js only knows how to fill a[data-ig] from config.social.instagram
     equivalent), so the full multi-icon row is a signed design-loop deliverable
     (see docs/design-loop-request-footer-social.md). This override is the
     interim, real, on-site version of the one link we already have.
   - Full-colour per founder's choice. The Instagram glyph uses the brand
     gradient; it is intentionally loud. If it reads too hot against the dark
     footer, switch `--aatm-ig-paint` to `currentColor` for the monochrome look.

   A11Y: the link keeps its real text "Instagram" as an accessible name
   (hidden visually, not with display:none, so it stays in the a11y tree).
   Focus ring preserved. Tap target padded to >=44px. */

/* The signed anchor: <li class="ig-link"><a data-ig rel="me">Instagram</a> */
.ig-link > a[data-ig] {
  /* The signed anchor: <li class="ig-link"><a data-ig rel="me">Instagram</a>
     The signed CSS lays the anchor out at the width of the word "Instagram"
     (~91px). We collapse that text footprint to zero so the anchor is exactly
     icon-sized — otherwise the hover/click area is a wide invisible box that
     "greys out" far past the icon. font-size:0 removes the text's layout box
     while keeping the accessible name "Instagram" in the a11y tree. */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 0;                    /* collapse the "Instagram" text box to 0 */
  line-height: 0;
  color: transparent;             /* belt-and-braces: hide any text glyphs */
  padding: 0;
  border-radius: 10px;
  vertical-align: middle;
  transition: background-color .12s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}

/* the brand icon, drawn as a masked box so one element = one glyph */
.ig-link > a[data-ig]::before {
  content: "";
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  /* full-colour Instagram brand gradient (variant A) */
  background: var(
    --aatm-ig-paint,
    radial-gradient(circle at 30% 107%,
      #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%)
  );
  /* official Instagram glyph as a mask */
  -webkit-mask: var(--aatm-ig-glyph) center / contain no-repeat;
          mask: var(--aatm-ig-glyph) center / contain no-repeat;
  --aatm-ig-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.9.07 1.17.05 1.8.25 2.23.42.56.22.96.48 1.38.9.42.42.68.82.9 1.38.17.42.37 1.06.42 2.23.06 1.27.07 1.65.07 4.85s0 3.58-.07 4.85c-.05 1.17-.25 1.8-.42 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.17-1.06.37-2.23.42-1.27.06-1.65.07-4.85.07s-3.58 0-4.85-.07c-1.17-.05-1.8-.25-2.23-.42a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.17-.42-.37-1.06-.42-2.23C2.2 15.58 2.2 15.2 2.2 12s0-3.58.07-4.85c.05-1.17.25-1.8.42-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.17 1.06-.37 2.23-.42C8.42 2.2 8.8 2.2 12 2.2Zm0 1.8c-3.14 0-3.5 0-4.74.07-.9.04-1.38.19-1.7.32-.43.17-.74.37-1.06.69-.32.32-.52.63-.69 1.06-.13.32-.28.8-.32 1.7C3.42 8.5 3.4 8.86 3.4 12s0 3.5.07 4.74c.04.9.19 1.38.32 1.7.17.43.37.74.69 1.06.32.32.63.52 1.06.69.32.13.8.28 1.7.32 1.24.07 1.6.07 4.74.07s3.5 0 4.74-.07c.9-.04 1.38-.19 1.7-.32.43-.17.74-.37 1.06-.69.32-.32.52-.63.69-1.06.13-.32.28-.8.32-1.7.07-1.24.07-1.6.07-4.74s0-3.5-.07-4.74c-.04-.9-.19-1.38-.32-1.7a2.85 2.85 0 0 0-.69-1.06 2.85 2.85 0 0 0-1.06-.69c-.32-.13-.8-.28-1.7-.32C15.5 4 15.14 4 12 4Zm0 3.06a4.94 4.94 0 1 1 0 9.88 4.94 4.94 0 0 1 0-9.88Zm0 1.8a3.14 3.14 0 1 0 0 6.28 3.14 3.14 0 0 0 0-6.28Zm5.14-.3a1.15 1.15 0 1 1-2.3 0 1.15 1.15 0 0 1 2.3 0Z'/%3E%3C/svg%3E");
}

.ig-link > a[data-ig]:hover {
  background-color: rgba(128, 128, 128, .14);
  transform: translateY(-1px);
}