/* ============================================================
   JKM — author box social row (single posts)

   Jupiter's author-box template (views/blog/components/
   blog-single-about-author.php) only ever outputs four links:
   twitter, email, facebook, googleplus. There is no Instagram and
   no website field, so those two are injected by
   plugins/mbp-jkm-archives/author-box.php and styled here.

   The globe mark is the same inline SVG the blog sidebar uses for
   juliakuzmenko.com, so the two read as one system.

   ICONS (2026-11-10): Instagram, email and globe are one set —
   terra, 14px, 1.6 line weight on a 24px grid, dark on hover.
   - Jupiter fills every svg.mk-svg-icon, which turned the outline
     Instagram mark into a solid square. Fill is switched off here.
   - Jupiter's envelope is a solid glyph. It is hidden and a line
     envelope is drawn in its place as a CSS mask, so it takes the
     link colour. No PHP involved.

   Reversible: delete this file, or deactivate that plugin.
   ============================================================ */

body.jkm-style .about-author-social{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:16px !important;
  margin:14px 0 0 !important;
  padding:0 !important;
  list-style:none !important;
}
body.jkm-style .about-author-social li{
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
  float:none !important;
}
body.jkm-style .about-author-social li a{
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
  color:#BE6E50 !important;
  text-decoration:none !important;
  transition:color .18s ease !important;
}
body.jkm-style .about-author-social li a:hover,
body.jkm-style .about-author-social li a:focus-visible{ color:#29241C !important; }

/* Every icon in the row: same box as the globe. */
body.jkm-style .about-author-social li a svg{
  width:14px !important; height:14px !important;
  display:block !important;
}

/* Instagram: line icon, not filled. */
body.jkm-style .about-author-social .instagram-icon svg,
body.jkm-style .about-author-social .instagram-icon svg rect,
body.jkm-style .about-author-social .instagram-icon svg circle{
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.6px !important;
}
body.jkm-style .about-author-social .instagram-icon svg circle[r="1.2"]{
  fill:currentColor !important;
  stroke:none !important;
}

/* Email: hide Jupiter's solid envelope, draw a line one in its place. */
body.jkm-style .about-author-social .email-icon svg{ display:none !important; }
body.jkm-style .about-author-social .email-icon::before{
  content:"" !important;
  display:block !important;
  width:14px !important; height:14px !important;
  background:currentColor !important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 6.5 12 13l8.5-6.5'/%3E%3C/svg%3E") center / contain no-repeat !important;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 6.5 12 13l8.5-6.5'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

/* The website link carries a visible label beside the globe. */
body.jkm-style .about-author-social li.jkm-author-site a{
  font-family:'Geist Mono',monospace !important;
  font-size:10.5px !important;
  letter-spacing:.12em !important;
  text-transform:lowercase !important;
}

@media (max-width:767px){
  body.jkm-style .about-author-social{ gap:13px !important; }
  body.jkm-style .about-author-social li.jkm-author-site a{ font-size:9.5px !important; }
}