/* Train With Okey – Footer Readability & Brand-Accurate Social Icons (v1.1.0) */

/* Readability on busy/dark backgrounds */
footer, .site-footer, #colophon, .elementor-location-footer, .wp-block-template-part footer {
  position: relative;
  color: #F2F4F7;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}

footer::before, .site-footer::before, #colophon::before, .elementor-location-footer::before, .wp-block-template-part footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.28); /* raise to .36 if still low contrast */
  z-index: 0;
  pointer-events: none;
}

footer *, .site-footer *, #colophon *, .elementor-location-footer *, .wp-block-template-part footer * {
  position: relative;
  z-index: 1;
}

footer a, .site-footer a, #colophon a {
  color: #FFFFFF;
}
footer a:hover, .site-footer a:hover, #colophon a:hover { opacity: .92; }

/* ---------- Brand-accurate Social Icons ---------- */

/* Base size helper */
footer a[href*="instagram.com"],
footer a[href*="tiktok.com"] {
  --two-icon-size: 1.25em;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--two-icon-size);
  height: var(--two-icon-size);
  line-height: 1;
}

/* Reset original icon visuals so we can restyle consistently */
footer a[href*="instagram.com"] i,
footer a[href*="instagram.com"] svg,
footer a[href*="instagram.com"] img,
footer a[href*="tiktok.com"] i,
footer a[href*="tiktok.com"] svg,
footer a[href*="tiktok.com"] img {
  width: 100%;
  height: 100%;
}

/* 1) Instagram: official gradient background with white glyph on top
   Works with font icons (i/fab), inline SVGs, and transparent PNG/SVGs.
   We render a gradient "plate" behind and force the glyph to white. */
footer a[href*="instagram.com"]::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: calc(var(--two-icon-size) * 1.1);
  height: calc(var(--two-icon-size) * 1.1);
  transform: translate(-50%, -50%);
  border-radius: 22%;
  /* Instagram brand gradient approximation */
  background: radial-gradient(83% 83% at 18% 16%,
    #FEDA77 0%,
    #F58529 28%,
    #DD2A7B 58%,
    #8134AF 78%,
    #515BD4 100%);
  z-index: 0;
  filter: saturate(1.05);
}

/* Force the visible glyph to white (camera shape) */
footer a[href*="instagram.com"] i,
footer a[href*="instagram.com"] svg path,
footer a[href*="instagram.com"] svg rect,
footer a[href*="instagram.com"] img {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  /* Convert monochrome images to white */
  filter: brightness(0) invert(1) !important;
}

/* Keep the glyph above the gradient plate */
footer a[href*="instagram.com"] > * {
  position: relative;
  z-index: 1;
}

/* 2) TikTok: black monogram with cyan & red offset highlights (brand look)
   Technique: apply two colored drop-shadows to simulate the dual-tone edges. */
footer a[href*="tiktok.com"] i,
footer a[href*="tiktok.com"] svg path,
footer a[href*="tiktok.com"] svg rect {
  color: #010101 !important;
  fill: #010101 !important;
  /* Two-direction offsets emulate the official glow */
  filter: drop-shadow(-1px -1px #25F4EE) drop-shadow(1px 1px #FE2C55) !important;
}

/* If the TikTok icon is an image, force it to black then apply shadows */
footer a[href*="tiktok.com"] img {
  filter: brightness(0) saturate(100%) drop-shadow(-1px -1px #25F4EE) drop-shadow(1px 1px #FE2C55) !important;
}

/* Ensure spacing if icons sit inline with text */
footer .social-icons a + a { margin-left: 0.6em; }