/*!
 * share.css — styles for the "Share this page" bar injected by share.js
 *
 * The bar is on every public page and is visible without any interaction, so
 * it keeps its own stylesheet rather than injecting rules from JavaScript the
 * way pwa.js does for its rarely-seen install banner.
 *
 * Two shapes come out of the same rules:
 *   .washme-share            — the full-width band that sits above the footer
 *   .washme-share--inline    — the compact row news.js mounts inside a story
 */

.washme-share {
  --share-gold: #c9a84c;
  --share-gold-bright: #f0d080;
  /* A translucent wash rather than a fixed colour: the pages do not agree on
   * a black. index is #0a0a0a and comic/classroom are the navy #050a10, and a
   * hard-coded band leaves a visible seam against one of them. */
  background: rgba(0, 0, 0, 0.32);
  border-top: 1px solid rgba(201, 168, 76, 0.18);
  padding: 30px 24px 32px;
  text-align: center;
  font-family: 'Open Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.washme-share__inner {
  max-width: 780px;
  margin: 0 auto;
}

.washme-share__title {
  font-family: 'Cinzel', Georgia, serif;
  color: var(--share-gold);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.74rem;
  margin: 0 0 14px;
}

.washme-share__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

/* Anchors and buttons both live in the row, so every visual property is set
 * here rather than inherited from whichever element the browser defaults. */
.washme-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid rgba(201, 168, 76, 0.34);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: #f5f5f5;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
}

.washme-share__btn:hover,
.washme-share__btn:focus-visible {
  color: var(--share-gold-bright);
  border-color: var(--share-gold);
  background: rgba(201, 168, 76, 0.12);
  transform: translateY(-1px);
}

.washme-share__btn:focus-visible {
  outline: 2px solid var(--share-gold);
  outline-offset: 2px;
}

.washme-share__btn:active { transform: translateY(0); }

/* The native sheet is the one people actually want on a phone, so it leads. */
.washme-share__btn--primary {
  background: var(--share-gold);
  border-color: var(--share-gold);
  color: #1a1a1a;
}

.washme-share__btn--primary:hover,
.washme-share__btn--primary:focus-visible {
  background: var(--share-gold-bright);
  border-color: var(--share-gold-bright);
  color: #1a1a1a;
}

.washme-share__btn svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: currentColor;
}

/* Confirmation for "Copy link", which otherwise gives no sign it worked. The
 * height is reserved so the footer does not jump when the message appears. */
.washme-share__status {
  min-height: 1.15em;
  margin: 12px 0 0;
  color: var(--share-gold-bright);
  font-size: 0.72rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.2s;
}

.washme-share__status.is-shown { opacity: 1; }

/* The copy-failed path prints the link itself, which small caps and 1.2px of
 * tracking make close to unreadable. */
.washme-share__status--url {
  text-transform: none;
  letter-spacing: 0;
  word-break: break-all;
  font-size: 0.78rem;
}

/* ------------------------------------------------------- inline (articles) */

.washme-share--inline {
  background: none;
  border-top: 1px solid rgba(201, 168, 76, 0.16);
  padding: 20px 0 4px;
  text-align: left;
}

.washme-share--inline .washme-share__inner { max-width: none; }
.washme-share--inline .washme-share__row { justify-content: flex-start; }
.washme-share--inline .washme-share__title { letter-spacing: 2px; margin-bottom: 12px; }

/* ------------------------------------------------------------------ phones */

/* Seven labelled pills wrap into a wall on a narrow screen. The networks drop
 * to round icons — their marks are the label — while Share and Copy link, the
 * two that no icon fully explains, keep their words. */
@media (max-width: 560px) {
  .washme-share { padding: 24px 18px 26px; }
  .washme-share__row { gap: 8px; }

  .washme-share__btn--icon {
    width: 42px;
    height: 42px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }

  .washme-share__btn--icon .washme-share__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .washme-share__btn--icon svg { width: 17px; height: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .washme-share__btn { transition: color 0.2s, border-color 0.2s, background 0.2s; }
  .washme-share__btn:hover,
  .washme-share__btn:focus-visible { transform: none; }
}