/* =====================================================================
   Chip Vortex — Social Share  (v2.11.1)
   ---------------------------------------------------------------------
   Loaded only on single posts (see inc/social-share.php).

   WHERE THE RAIL SITS
   The v2.9.4 reading column centres the article on a 700px axis inside a
   full-width <article>, leaving a wide empty gutter on both sides. The
   TOC panel already occupies the right gutter, so the share rail mirrors
   it into the LEFT one and tracks the same centre line:

       right = 50%  +  half the media column  +  32px gap

   position:fixed, not sticky — for the same reason the TOC is fixed. The
   single-post compatibility block in style.css rewrites article.reader's
   display and position, and a sticky child inside that stack proved
   fragile against pasted post CSS. Fixed positioning cannot be reached by
   anything inside .content.

   BELOW 1280px there is no gutter, so the rail flattens into a slim bar
   docked to the bottom of the viewport (switchable in the Customizer).

   COLOURS
   Each button carries its network's official brand colour in the custom
   property --cv-share-brand, set inline by PHP. The chrome around it uses
   the theme's own variables (--bg2, --line2, --text …), so dusk mode
   (html[data-theme="dim"]) needs no overrides at all — the panel follows
   the page automatically.
   ===================================================================== */

:root{
  --cv-share-gap:  32px;   /* space between the text column and the rail */
  --cv-share-top:  150px;  /* re-set at runtime from the real header height */
  --cv-share-size: 44px;   /* icon button in the rail */
}

/* =====================================================================
   1. Shared button skin — used by the rail, the bar and the sheet
   ===================================================================== */

.cv-share-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--cv-share-brand, var(--cyan, #00D4FF));
  font: inherit;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform .18s ease, background-color .18s ease,
              box-shadow .18s ease, color .18s ease;
}
.cv-share-btn:focus-visible{
  outline: 2px solid var(--cyan, #00D4FF);
  outline-offset: 3px;
}
.cv-share-ico{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.cv-share-ico svg{
  width: 20px;
  height: 20px;
  display: block;
}

/* Motion is decoration here — respect the reader's preference. */
@media (prefers-reduced-motion: reduce){
  .cv-share-btn,
  .cv-share-rail,
  .cv-share-sheet-inner,
  .cv-share-toast{ transition: none !important; }
}

/* =====================================================================
   2. The sticky rail (desktop, >=1280px)
   ===================================================================== */

.cv-share-rail{
  position: fixed;
  top: var(--cv-share-top, 150px);
  z-index: 39;                    /* TOC panel is 40 — never above it */
  display: none;                  /* revealed by the >=1280px query */
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  pointer-events: none;           /* only the buttons catch clicks */
}
.cv-share-rail > *{ pointer-events: auto; }

/* ---- retired once the reader passes the end of the article ----------
   The rail belongs to the post. Past the last section the page widens
   back out to full width — the author box, "Keep Reading" heading and
   the related-post cards all reclaim the gutter the rail was parked in —
   so a rail that kept floating would sit on top of them. social-share.js
   adds this class the moment the end-of-article share row rises past the
   rail, and removes it on the way back up.

   Deliberately ONLY opacity and visibility: a transform here would move
   the element the script measures, so hiding it would change the very
   number that decides whether to hide it, and the rail would flicker on
   and off at the boundary. Nothing here alters geometry.

   visibility:hidden also takes the buttons out of the tab order for
   free, so a keyboard reader never lands on an invisible link. The
   transition delay keeps the fade visible before it is applied. */
.cv-share-rail.is-past-article{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility 0s linear .22s;
}
.cv-share-rail.is-past-article > *{ pointer-events: none; }
.cv-share-rail{ transition: opacity .22s ease, visibility 0s linear 0s; }

/* Left gutter: mirror of the TOC's left:calc(...) */
.cv-share-rail.cv-share-side-left{
  right: calc(50% + (var(--cv-media, 700px) / 2) + var(--cv-share-gap));
}
.cv-share-rail.cv-share-side-right{
  left: calc(50% + (var(--cv-media, 700px) / 2) + var(--cv-share-gap));
}

/* ---- "SHARE" cap above the pill ---- */
.cv-share-rail-head{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  color: var(--muted3, rgba(255,255,255,.6));
}
.cv-share-rail-ico svg{ width: 22px; height: 22px; display: block; }
.cv-share-rail-word{
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

/* ---- the pill that holds the icons ---- */
.cv-share-rail-body{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .55rem .4rem;
  border: 1px solid var(--line2, rgba(0,212,255,.24));
  border-radius: 18px;
  background: linear-gradient(180deg, var(--bg2, #0D1220), var(--bg3, #111827));
  box-shadow: 0 22px 50px -26px rgba(0,0,0,.85);
}

.cv-share-rail .cv-share-btn{
  width: var(--cv-share-size);
  height: var(--cv-share-size);
  border-radius: 50%;
  background: color-mix(in srgb, var(--cv-share-brand) 14%, transparent);
}
/* color-mix is well supported but not universal; this is the fallback the
   older browsers get — a flat translucent wash instead of a brand tint. */
@supports not (background: color-mix(in srgb, red 10%, transparent)){
  .cv-share-rail .cv-share-btn{ background: rgba(255,255,255,.05); }
}
.cv-share-rail .cv-share-btn:hover{
  background: var(--cv-share-brand, var(--cyan, #00D4FF));
  color: #fff;
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 10px 24px -10px var(--cv-share-brand, rgba(0,212,255,.6));
}
.cv-share-rail .cv-share-label{
  /* Icon-only in the rail. Kept in the DOM, hidden the accessible way, so
     screen readers and the "..." sheet still read the network name. */
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.cv-share-rail .cv-share-more{
  color: var(--muted3, rgba(255,255,255,.6));
  background: transparent;
  margin-top: .1rem;
}
.cv-share-rail .cv-share-more:hover{
  color: var(--text, #fff);
  background: rgba(255,255,255,.08);
  transform: none;
  box-shadow: none;
}

@media (min-width: 1280px){
  .cv-share-rail{ display: flex; }
}

/* The gutter between 1280px and ~1400px is only just wide enough. */
@media (min-width: 1280px) and (max-width: 1400px){
  :root{ --cv-share-gap: 22px; --cv-share-size: 40px; }
  .cv-share-rail .cv-share-ico svg{ width: 18px; height: 18px; }
}

/* Scoped to desktop on purpose. Below 1280px the rail is docked to the
   BOTTOM, where the admin bar is irrelevant — and an unscoped
   `.admin-bar .cv-share-rail` (specificity 0,2,0) would outrank the
   `top:auto` the dock relies on and fling the bar back up the page. */
@media (min-width: 1280px){
  .admin-bar .cv-share-rail{ top: calc(var(--cv-share-top, 150px) + 32px); }
}

/* =====================================================================
   3. Docked bar on tablets and phones (<1280px)
   ---------------------------------------------------------------------
   Same markup, different shape: a full-width strip pinned to the bottom
   edge, sitting clear of the TOC's floating button (which is bottom-right).
   ===================================================================== */

@media (max-width: 1279.98px){
  /* The side classes must be named here. A media query adds NO specificity,
     so a bare `.cv-share-rail{right:0}` (0,1,0) loses to the gutter rule
     `.cv-share-rail.cv-share-side-left{right:calc(...)}` (0,2,0) and the
     dock collapses to an 88px sliver pinned to the left edge. */
  .cv-share-rail,
  .cv-share-rail.cv-share-side-left,
  .cv-share-rail.cv-share-side-right{
    display: flex;
    flex-direction: row;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    gap: 0;
    padding: .45rem max(.6rem, env(safe-area-inset-left))
             calc(.45rem + env(safe-area-inset-bottom))
             max(.6rem, env(safe-area-inset-right));
    /* Clear the TOC FAB (right:18px, 56px wide) so the two never overlap. */
    padding-right: 86px;
    background: color-mix(in srgb, var(--bg2, #0D1220) 92%, transparent);
    border-top: 1px solid var(--line2, rgba(0,212,255,.24));
    box-shadow: 0 -12px 30px -18px rgba(0,0,0,.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 39;
  }
  @supports not (background: color-mix(in srgb, red 10%, transparent)){
    .cv-share-rail{ background: rgba(13,18,32,.94); }
  }

  .cv-share-rail.cv-share-no-mobile{ display: none; }

  .cv-share-rail-head{
    flex-direction: row;
    gap: .4rem;
    flex: 0 0 auto;
    padding-right: .6rem;
    margin-right: .2rem;
    border-right: 1px solid var(--line, rgba(0,212,255,.12));
  }
  .cv-share-rail-ico svg{ width: 18px; height: 18px; }
  .cv-share-rail-word{ font-size: .58rem; letter-spacing: 1.6px; }

  .cv-share-rail-body{
    flex: 1 1 auto;
    flex-direction: row;
    justify-content: space-around;
    gap: .2rem;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }
  .cv-share-rail .cv-share-btn{ width: 40px; height: 40px; }
  .cv-share-rail .cv-share-btn:hover{ transform: none; }

  /* Give the page room so the last paragraph is never under the bar.
     Keyed on the class the script adds and nothing else — an earlier
     draft also required body.single-post, which silently did nothing
     anywhere body_class() was filtered or the class was renamed. The
     script only ever adds cv-has-share-dock on a single post, so the
     extra hook bought no safety and cost the padding. */
  body.cv-has-share-dock{ padding-bottom: 62px; }
}

@media (max-width: 400px){
  .cv-share-rail-head{ display: none; }   /* icons only — space is tight */
  .cv-share-rail{ padding-right: 78px; }
}

/* Never print the floating furniture. */
@media print{
  .cv-share-rail,
  .cv-share-sheet,
  .cv-share-toast,
  .cv-share-bar{ display: none !important; }
}

/* =====================================================================
   4. The wide row above the author box
   ---------------------------------------------------------------------
   Dotted rules top and bottom, heading on the left, buttons on the right,
   the first button carrying its label. Matches the reference design.
   ===================================================================== */

.cv-share-bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  max-width: var(--cv-media, 700px);
  margin: 2.4rem auto;
  padding: 1.35rem 0;
  border-top: 2px dotted var(--line2, rgba(0,212,255,.24));
  border-bottom: 2px dotted var(--line2, rgba(0,212,255,.24));
}

.cv-share-bar-title{
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--text, #fff);
}
.cv-share-bar-ico{ display: inline-flex; color: var(--cyan, #00D4FF); }
.cv-share-bar-ico svg{ width: 22px; height: 22px; display: block; }

.cv-share-bar-btns{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}
.cv-share-bar-cell{ display: inline-flex; }

.cv-share-bar .cv-share-btn{
  height: 46px;
  min-width: 46px;
  padding: 0 .85rem;
  border-radius: 10px;
  background: var(--cv-share-brand, var(--cyan, #00D4FF));
  color: #fff;
  font-size: .92rem;
  font-weight: 600;
}
.cv-share-bar .cv-share-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -12px var(--cv-share-brand, rgba(0,212,255,.6));
  filter: brightness(1.06);
}
.cv-share-bar .cv-share-ico svg{ width: 21px; height: 21px; }

/* Only the first cell shows its word; the rest are square icon tiles. */
.cv-share-bar-cell:not(.is-wide) .cv-share-label{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.cv-share-bar-cell:not(.is-wide) .cv-share-btn{ padding: 0; width: 46px; }

.cv-share-bar .cv-share-more{
  background: transparent;
  color: var(--muted3, rgba(255,255,255,.6));
  width: 40px;
  min-width: 40px;
  padding: 0;
}
.cv-share-bar .cv-share-more .cv-share-label{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.cv-share-bar .cv-share-more:hover{
  color: var(--text, #fff);
  background: rgba(255,255,255,.08);
  box-shadow: none;
  filter: none;
}

/* X's brand colour is near-black, which disappears on this dark theme.
   Give it the one exception: a visible outline instead of a fill. */
.cv-share-bar .cv-share-x{
  background: #1A1F2E;
  border: 1px solid var(--line2, rgba(0,212,255,.24));
}

@media (max-width: 640px){
  .cv-share-bar{
    flex-direction: column;
    align-items: flex-start;
    gap: .9rem;
    padding: 1.1rem 0;
  }
  .cv-share-bar-title{ font-size: 1.02rem; }
  .cv-share-bar .cv-share-btn{ height: 42px; min-width: 42px; }
  .cv-share-bar-cell:not(.is-wide) .cv-share-btn{ width: 42px; }
}

/* =====================================================================
   5. The "..." sheet — the full list, every network, on any screen
   ===================================================================== */

.cv-share-sheet{
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(5,8,15,.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.cv-share-sheet[hidden]{ display: none; }

.cv-share-sheet-inner{
  width: min(420px, 100%);
  border: 1px solid var(--line2, rgba(0,212,255,.24));
  border-radius: 16px;
  background: linear-gradient(180deg, var(--bg2, #0D1220), var(--bg3, #111827));
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.9);
  overflow: hidden;
}
.cv-share-sheet-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.1rem;
  border-bottom: 1px solid var(--line, rgba(0,212,255,.12));
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted, rgba(255,255,255,.92));
}
.cv-share-sheet-x{
  border: 0;
  background: none;
  color: var(--muted3, rgba(255,255,255,.6));
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 .2rem;
}
.cv-share-sheet-x:hover{ color: var(--text, #fff); }

.cv-share-sheet-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: .5rem;
  padding: 1rem;
}
.cv-share-sheet-grid .cv-share-btn{
  flex-direction: column;
  gap: .5rem;
  padding: .85rem .4rem;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line, rgba(0,212,255,.12));
  color: var(--muted, rgba(255,255,255,.92));
  font-size: .74rem;
  font-weight: 600;
  text-align: center;
}
.cv-share-sheet-grid .cv-share-ico{
  color: var(--cv-share-brand, var(--cyan, #00D4FF));
}
.cv-share-sheet-grid .cv-share-btn:hover{
  background: color-mix(in srgb, var(--cv-share-brand) 16%, transparent);
  border-color: var(--cv-share-brand, var(--cyan, #00D4FF));
  transform: translateY(-2px);
}
@supports not (background: color-mix(in srgb, red 10%, transparent)){
  .cv-share-sheet-grid .cv-share-btn:hover{ background: rgba(255,255,255,.09); }
}
.cv-share-sheet-grid .cv-share-label{
  position: static;
  width: auto; height: auto;
  clip: auto; clip-path: none;
  margin: 0;
  overflow: visible;
}

/* =====================================================================
   6. "Link copied" toast
   ===================================================================== */

.cv-share-toast{
  position: fixed;
  left: 50%;
  bottom: 92px;
  transform: translate(-50%, 12px);
  z-index: 130;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--line2, rgba(0,212,255,.24));
  background: var(--bg3, #111827);
  color: var(--text, #fff);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .3px;
  box-shadow: 0 18px 40px -20px rgba(0,0,0,.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.cv-share-toast.is-on{
  opacity: 1;
  transform: translate(-50%, 0);
}