/* ==========================================================================
   rw-sharepop-popup
   Vanilla port of the Framer Social_Share_Popup module.
   Every value here was MEASURED from the real module render (computed CSS +
   geometry), not read off the minified source by eye. See META.json.

   Theming: override the custom properties on .rw-sharepop (or :root). Nothing
   below hard-codes a brand colour outside the :where(.rw-sharepop) token block,
   so one override block re-skins the whole popup per client.
   ========================================================================== */

:where(.rw-sharepop) {
  /* type. Title tokens are split from body so a brand can run a display face
     on the heading without touching the rest. Defaults reproduce the module. */
  --rw-sharepop-font: -apple-system, "system-ui", Inter, sans-serif;
  --rw-sharepop-title-font: var(--rw-sharepop-font);
  --rw-sharepop-title-size: 22px;
  --rw-sharepop-title-weight: 700;
  --rw-sharepop-title-lh: 33px;
  --rw-sharepop-title-ls: -0.44px;
  --rw-sharepop-title-transform: none;
  /* Reserve the close button's corner so a long heading wraps before it
     instead of running underneath. The button sits 20px in and is 36px
     wide, so 56px clears it and the extra 8px is breathing room. */
  --rw-sharepop-title-gutter: 64px;

  /* surfaces */
  --rw-sharepop-overlay-bg: rgba(3, 7, 18, 0.65);
  --rw-sharepop-overlay-blur: 12px;
  --rw-sharepop-card-bg: #0b0e14;
  --rw-sharepop-card-border: rgba(255, 255, 255, 0.08);
  --rw-sharepop-card-radius: 24px;
  --rw-sharepop-card-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  --rw-sharepop-card-max: 460px;
  --rw-sharepop-card-pad: 28px;

  /* text */
  --rw-sharepop-heading: #ffffff;
  --rw-sharepop-desc: #9ca3af;

  /* url field */
  --rw-sharepop-field-bg: rgba(255, 255, 255, 0.03);
  --rw-sharepop-field-border: rgba(255, 255, 255, 0.06);
  --rw-sharepop-field-text: #ffffff;

  /* social tiles */
  --rw-sharepop-tile-bg: rgba(255, 255, 255, 0.05);
  --rw-sharepop-tile-bg-hover: rgba(255, 255, 255, 0.12);
  --rw-sharepop-tile-border: rgba(255, 255, 255, 0.06);
  --rw-sharepop-tile-icon: #ffffff;
  --rw-sharepop-tile-label: #9ca3af;

  /* close */
  --rw-sharepop-close-bg: rgba(255, 255, 255, 0.06);
  --rw-sharepop-close-fg: #9ca3af;

  /* copy button: hairline border + same-hue tint, NOT a solid slab */
  --rw-sharepop-btn-bg: rgba(99, 102, 241, 0.2);
  --rw-sharepop-btn-border: rgba(99, 102, 241, 0.3);
  --rw-sharepop-btn-text: #a5b4fc;
  --rw-sharepop-btn-ok-bg: #10b981;
  --rw-sharepop-btn-ok-border: #10b981;
  --rw-sharepop-btn-ok-text: #ffffff;

  /* motion */
  --rw-sharepop-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --rw-sharepop-dur: 0.22s;
  --rw-sharepop-hover-dur: 0.2s;
}

/* --- overlay ------------------------------------------------------------ */
.rw-sharepop {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background-color: var(--rw-sharepop-overlay-bg);
  backdrop-filter: blur(var(--rw-sharepop-overlay-blur));
  -webkit-backdrop-filter: blur(var(--rw-sharepop-overlay-blur));
  /* The module inherits these down into the card. Set them here so the card's
     computed tokens match the reference instead of falling back to UA defaults. */
  font-family: var(--rw-sharepop-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: var(--rw-sharepop-heading);
  box-sizing: border-box;
}
.rw-sharepop *,
.rw-sharepop *::before,
.rw-sharepop *::after { box-sizing: border-box; }

/* --- card --------------------------------------------------------------- */
.rw-sharepop__card {
  position: relative;
  width: 100%;
  max-width: var(--rw-sharepop-card-max);
  padding: var(--rw-sharepop-card-pad);
  background-color: var(--rw-sharepop-card-bg);
  border: 1px solid var(--rw-sharepop-card-border);
  border-radius: var(--rw-sharepop-card-radius);
  box-shadow: var(--rw-sharepop-card-shadow);
  animation: rw-sharepop-in var(--rw-sharepop-dur) var(--rw-sharepop-ease) forwards;
}
/* Focus target only, never a visible ring. */
.rw-sharepop__card:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@keyframes rw-sharepop-in {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* --- close -------------------------------------------------------------- */
.rw-sharepop__close {
  position: absolute;
  /* 20 + the card's 1px border = the reference's 21px inset from the card edge. */
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--rw-sharepop-close-bg);
  color: var(--rw-sharepop-close-fg);
  cursor: pointer;
  outline: none;
  font: inherit;
  transition: background-color var(--rw-sharepop-hover-dur) ease-out,
              color var(--rw-sharepop-hover-dur) ease-out;
}
.rw-sharepop__close:hover { background-color: var(--rw-sharepop-tile-bg-hover); color: var(--rw-sharepop-heading); }
.rw-sharepop__close svg { width: 16px; height: 16px; display: block; }

/* --- head --------------------------------------------------------------- */
.rw-sharepop__title {
  margin: 0 0 6px;
  font-family: var(--rw-sharepop-title-font);
  font-size: var(--rw-sharepop-title-size);
  font-weight: var(--rw-sharepop-title-weight);
  line-height: var(--rw-sharepop-title-lh);
  letter-spacing: var(--rw-sharepop-title-ls);
  text-transform: var(--rw-sharepop-title-transform);
  padding-right: var(--rw-sharepop-title-gutter);
  color: var(--rw-sharepop-heading);
}
.rw-sharepop__desc {
  margin: 0 0 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: var(--rw-sharepop-desc);
}

/* --- url field ---------------------------------------------------------- */
.rw-sharepop__field {
  margin: 0 0 24px;
  padding: 14px 16px;
  background-color: var(--rw-sharepop-field-bg);
  border: 1px solid var(--rw-sharepop-field-border);
  border-radius: 14px;
}
.rw-sharepop__url {
  font-size: 13px;
  font-weight: 500;
  line-height: 19.5px;
  color: var(--rw-sharepop-field-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- social grid -------------------------------------------------------- */
.rw-sharepop__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 16px;
  column-gap: 12px;
  margin: 0 0 24px;
}
.rw-sharepop__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
  font: inherit;
  text-decoration: none;
  transition: all var(--rw-sharepop-hover-dur) var(--rw-sharepop-ease);
}
.rw-sharepop__iconbox {
  /* The module styles this div with inline width/height 56px and a 1px border,
     under the default content-box model, so its real painted size is 58x58.
     Keep content-box here or every tile row loses 2px. */
  box-sizing: content-box;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rw-sharepop-tile-border);
  border-radius: 16px;
  background-color: var(--rw-sharepop-tile-bg);
  color: var(--rw-sharepop-tile-icon);
  transition: background-color var(--rw-sharepop-hover-dur) ease-out,
              transform var(--rw-sharepop-hover-dur) ease-out;
}
.rw-sharepop__item:hover .rw-sharepop__iconbox {
  background-color: var(--rw-sharepop-tile-bg-hover);
  transform: translateY(-2px);
}
.rw-sharepop__iconbox svg { width: 22px; height: 22px; display: block; }
.rw-sharepop__label {
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  color: var(--rw-sharepop-tile-label);
}

/* --- copy button -------------------------------------------------------- */
.rw-sharepop__copy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  padding: 0;
  border: 1px solid var(--rw-sharepop-btn-border);
  border-radius: 14px;
  background-color: var(--rw-sharepop-btn-bg);
  color: var(--rw-sharepop-btn-text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: background-color var(--rw-sharepop-hover-dur) ease-out,
              border-color var(--rw-sharepop-hover-dur) ease-out,
              color var(--rw-sharepop-hover-dur) ease-out;
}
.rw-sharepop__copy svg { width: 18px; height: 18px; display: block; }
.rw-sharepop__copy.is-copied {
  background-color: var(--rw-sharepop-btn-ok-bg);
  border-color: var(--rw-sharepop-btn-ok-border);
  color: var(--rw-sharepop-btn-ok-text);
}

/* --- focus ring: keyboard only, no permanent outline -------------------- */
.rw-sharepop__close:focus-visible,
.rw-sharepop__item:focus-visible,
.rw-sharepop__copy:focus-visible {
  outline: 2px solid var(--rw-sharepop-btn-text);
  outline-offset: 2px;
}

/* --- reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .rw-sharepop__card { animation: none; }
  .rw-sharepop__item,
  .rw-sharepop__iconbox,
  .rw-sharepop__copy,
  .rw-sharepop__close { transition: none; }
  .rw-sharepop__item:hover .rw-sharepop__iconbox { transform: none; }
}

/* ==========================================================================
   Rankwyre theme (rankwyre.com default).
   Values from ~/rankwyre/DESIGN.md: ONE accent, #2596be. The legacy
   electric-purple / lime / grad-* token names all resolve to that teal, so
   nothing here introduces a second hue or a gradient.
   Panel surface #0a0c1c + hairline + 0 20px 50px rgba(0,0,0,.5) is the site's
   own .nav-dropdown treatment, reused so the popup reads as part of the site.
   ========================================================================== */
.rw-sharepop {
  --rw-sharepop-font: var(--font--body, "Aeonik", "Inter", system-ui, sans-serif);
  --rw-sharepop-title-font: var(--font--heading, "National 2 Compressed", "Oswald", Impact, sans-serif);
  --rw-sharepop-title-size: 26px;
  --rw-sharepop-title-lh: 25px;          /* DESIGN.md h1-h3: line-height .95 */
  --rw-sharepop-title-ls: 0.01em;
  --rw-sharepop-title-transform: uppercase;

  --rw-sharepop-overlay-bg: rgba(5, 6, 15, 0.82);
  --rw-sharepop-card-bg: #0a0c1c;
  --rw-sharepop-card-border: rgba(255, 255, 255, 0.1);
  --rw-sharepop-card-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);

  --rw-sharepop-desc: rgba(255, 255, 255, 0.62);
  --rw-sharepop-field-bg: rgba(255, 255, 255, 0.03);
  --rw-sharepop-field-border: rgba(255, 255, 255, 0.08);
  --rw-sharepop-tile-bg: rgba(255, 255, 255, 0.03);
  --rw-sharepop-tile-bg-hover: rgba(255, 255, 255, 0.08);
  --rw-sharepop-tile-border: rgba(255, 255, 255, 0.08);
  --rw-sharepop-tile-label: rgba(255, 255, 255, 0.62);
  --rw-sharepop-close-bg: rgba(255, 255, 255, 0.06);
  --rw-sharepop-close-fg: rgba(255, 255, 255, 0.62);

  /* the single accent, as a hairline + same-hue tint (no solid slab) */
  --rw-sharepop-btn-bg: rgba(37, 150, 190, 0.12);
  --rw-sharepop-btn-border: rgba(37, 150, 190, 0.32);
  --rw-sharepop-btn-text: #4fb4d6;
  --rw-sharepop-btn-ok-bg: rgba(37, 150, 190, 0.9);
  --rw-sharepop-btn-ok-border: #2596be;

  --rw-sharepop-hover-dur: 0.18s;
}

/* The blog's own trigger button: hairline pill, matching .rw-case-link. */
.rw-sharepop-trigger {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50vw;
  background: none; color: #fff;
  font-family: var(--font--body); font-size: .76rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  cursor: pointer;
  transition: background .16s ease-out, border-color .16s ease-out;
}
.rw-sharepop-trigger:hover { background: #2596be; border-color: #2596be; }
.rw-sharepop-trigger:focus-visible { outline: 2px solid #2596be; outline-offset: 2px; }
.rw-sharepop-trigger svg { width: 15px; height: 15px; }

/* Sticky rail trigger: single round icon button, replacing the three anchors. */
.rw-rail button.rw-sharepop-rail {
  width: 40px; height: 40px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: none; color: var(--theme--grey); cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.rw-rail button.rw-sharepop-rail:hover { color: var(--theme--white); border-color: rgba(255, 255, 255, .4); }
.rw-rail button.rw-sharepop-rail:focus-visible { outline: 2px solid #2596be; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .rw-sharepop-trigger, .rw-rail button.rw-sharepop-rail { transition: none; }
}