/*
 * RAR PRESS KIT -- clip-share.css (CLIP & SHARE strip presentation)
 *
 * Amendment 14.5: clip-share presentation is plugin-owned. This file
 * carries the strip layout (SPEC section 13: hairline rule above and
 * below, Courier CLIP & SHARE THIS ITEM: label, inline glyph row with
 * tight gaps, ink only) and the visible data-tip tooltip rendered on
 * :focus-visible (and :hover where hover exists). icons.css stays
 * glyph-only; components-fx.css (theme, FX owner) keeps the re-ink
 * opacity and rotation press feel. Colors come from the theme.json
 * presets with hard hex fallbacks, so the strip renders in palette
 * even before global styles print. No animation lives in this file:
 * tooltips switch display, never opacity.
 */

.rar-clip-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 13px;
  margin: 26px 0;
  padding: 13px 0;
  border-top: 1px solid var(--wp--preset--color--ink, #1a1712);
  border-bottom: 1px solid var(--wp--preset--color--ink, #1a1712);
  /* Tooltips seat above the strip; they must never clip inside it. */
  overflow: visible;
  color: var(--wp--preset--color--ink, #1a1712);
  font-family: var(--wp--preset--font-family--courier-prime, "Courier Prime", "Courier New", monospace);
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: .05em;
}

/* The Courier CLIP & SHARE THIS ITEM: label. First child by contract
   with render.php; the class registry adds no label class. */
.rar-clip-share > span:first-child {
  font-weight: 700;
  letter-spacing: .08em;
}

/* The copy control is a native button dressed as print: no UA chrome,
   the strip's Courier and ink inherited. font shorthand resets family,
   size, and weight; letter-spacing is outside the shorthand and
   inherits explicitly. */
.rar-clip-share button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

/* Glyph and copy label ride one midline inside their controls. */
.rar-clip-share .rar-glyph {
  vertical-align: middle;
}

/* The visible COPY LINK label (amendment 14.6): plain Courier text
   beside the glyph; main.js swaps this span's text to LINK COPIED --
   and back. */
.rar-clip-share [data-copy-label] {
  margin-left: 8px;
  vertical-align: middle;
}

/* ---------------------------------------------------------------------
   Visible tooltip (SPEC section 13): each control's data-tip text as a
   small Courier label on a paper slip with a 1px ink border, seated
   above the control. Shown by display, not opacity: no animation, and
   the reduced-motion path is identical by construction.
   ------------------------------------------------------------------- */
.rar-clip-share [data-tip] {
  position: relative;
}

.rar-clip-share [data-tip]::after {
  content: attr(data-tip);
  display: none;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  z-index: 3;
  padding: 4px 8px;
  border: 1px solid var(--wp--preset--color--ink, #1a1712);
  background: var(--wp--preset--color--paper-slip, #faf6ea);
  color: var(--wp--preset--color--ink, #1a1712);
  font-family: var(--wp--preset--font-family--courier-prime, "Courier Prime", "Courier New", monospace);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
}

.rar-clip-share [data-tip]:focus-visible::after {
  display: block;
}

@media (hover: hover) {
  .rar-clip-share [data-tip]:hover::after {
    display: block;
  }
}

/* The aria-live confirmation region stays off-canvas. Core's
   .screen-reader-text idiom, scoped here because the theme ships no
   global rule; absolute positioning also removes it from the flex
   row's flow. */
.rar-clip-share .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}