/* Lightweight Pinterest Pin overlay — circular Save button */

.nm-pin-media,
.nm-pin-image__frame,
.nm-card,
.nm-card__media,
.nm-post-hero__frame {
  position: relative;
}

/* Handwritten “Save this!” + doodle arrow (points at top-right Pin button) */
.nm-pin-cue {
  position: absolute;
  top: 2.75rem;
  right: 3.25rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  max-width: 7.5rem;
  opacity: 0;
  pointer-events: none;
  transform: rotate(-6deg);
  transition: opacity 200ms ease;
  color: var(--nm-color-primary, #5c1a2e);
  text-shadow:
    0 1px 0 rgba(250, 246, 241, 0.9),
    0 0 8px rgba(250, 246, 241, 0.85);
}

.nm-pin-cue__text {
  font-family: "Segoe Print", "Bradley Hand", "Apple Chancery", "Snell Roundhand", cursive;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.nm-pin-cue__arrow {
  display: block;
  width: 2.75rem;
  height: 1.75rem;
  margin: -0.1rem 0.15rem 0 0;
  overflow: visible;
  align-self: flex-end;
}

.nm-pin-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #e60023;
  color: #fff;
  box-shadow: 0 2px 8px rgba(26, 26, 26, 0.18);
  text-decoration: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
  -webkit-tap-highlight-color: transparent;
}

.nm-pin-btn__icon {
  display: block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  /* Official-style Pinterest "P" mark via mask */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.nm-pin-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(26, 26, 26, 0.28);
  background: #d50c22;
  color: #fff;
}

.nm-pin-btn:focus-visible {
  outline: 2px solid var(--nm-color-focus, #2b6cb0);
  outline-offset: 2px;
}

/* Desktop: hidden until hover / focus-within */
@media (hover: hover) and (pointer: fine) {
  .nm-pin-media > .nm-pin-btn,
  .nm-pin-image__frame > .nm-pin-btn,
  .nm-card > .nm-pin-btn,
  .nm-card__media > .nm-pin-btn,
  .nm-post-hero__frame > .nm-pin-btn {
    opacity: 0;
    pointer-events: none;
  }

  .nm-pin-media > .nm-pin-cue,
  .nm-pin-image__frame > .nm-pin-cue,
  .nm-card > .nm-pin-cue,
  .nm-card__media > .nm-pin-cue,
  .nm-post-hero__frame > .nm-pin-cue {
    opacity: 0;
  }

  .nm-pin-media:hover > .nm-pin-btn,
  .nm-pin-media:focus-within > .nm-pin-btn,
  .nm-pin-image__frame:hover > .nm-pin-btn,
  .nm-pin-image__frame:focus-within > .nm-pin-btn,
  .nm-card:hover > .nm-pin-btn,
  .nm-card:focus-within > .nm-pin-btn,
  .nm-related .nm-card:hover > .nm-pin-btn,
  .nm-finder__results .nm-card:hover > .nm-pin-btn,
  .nm-card__media:hover > .nm-pin-btn,
  .nm-card__media:focus-within > .nm-pin-btn,
  .nm-post-hero__frame:hover > .nm-pin-btn,
  .nm-post-hero__frame:focus-within > .nm-pin-btn {
    opacity: 1;
    pointer-events: auto;
  }

  .nm-pin-media:hover > .nm-pin-cue,
  .nm-pin-media:focus-within > .nm-pin-cue,
  .nm-pin-image__frame:hover > .nm-pin-cue,
  .nm-pin-image__frame:focus-within > .nm-pin-cue,
  .nm-card:hover > .nm-pin-cue,
  .nm-card:focus-within > .nm-pin-cue,
  .nm-related .nm-card:hover > .nm-pin-cue,
  .nm-finder__results .nm-card:hover > .nm-pin-cue,
  .nm-card__media:hover > .nm-pin-cue,
  .nm-card__media:focus-within > .nm-pin-cue,
  .nm-post-hero__frame:hover > .nm-pin-cue,
  .nm-post-hero__frame:focus-within > .nm-pin-cue {
    opacity: 1;
  }
}

/* Touch: Pin always visible; sketch cue is hover-only chrome */
@media (hover: none), (pointer: coarse) {
  .nm-pin-btn {
    opacity: 1;
    pointer-events: auto;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    top: 10px;
    right: 10px;
  }

  .nm-pin-btn__icon {
    width: 20px;
    height: 20px;
  }

  .nm-pin-cue {
    display: none;
  }
}

@media (max-width: 639.98px) {
  .nm-pin-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    top: 8px;
    right: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nm-pin-btn,
  .nm-pin-cue {
    transition: none;
  }

  .nm-pin-btn:hover {
    transform: none;
  }
}

/* Never overlay site chrome / Finder UI chrome (results DO show pins + cue) */
.nm-hero .nm-pin-btn,
.nm-hero .nm-pin-cue,
.nm-site-header .nm-pin-btn,
.nm-site-header .nm-pin-cue,
.nm-site-footer .nm-pin-btn,
.nm-site-footer .nm-pin-cue,
.nm-finder__modes .nm-pin-btn,
.nm-finder__modes .nm-pin-cue,
.nm-finder__panel[data-panel] .nm-pin-btn,
.nm-finder__panel[data-panel] .nm-pin-cue {
  display: none !important;
}

/* Finder results: pins always visible enough on desktop hover of card */
.nm-finder__results .nm-card.nm-pin-media {
  position: relative;
  overflow: hidden;
}