/* social.css
   Self-contained styles for the like button and comment section.
   Deliberately not dependent on tools.css, since these widgets need to
   work on blog posts and shop pages too, not just /tools/* pages.
   The color values below default to the same palette as tools.css for
   visual consistency, swap them for your real style.css tokens once
   you've got this in front of you and can see it next to the blog. */

:root{
  --social-pink: #ff6f91;
  --social-pink-soft: #fff0f5;
  --social-cream: #fffbea;
  --social-cream-line: #e8dfc8;
  --social-tan-dark: #8b5e3c;
  --social-muted: #a67676;
  --social-ink: #444;
  --social-dash: #ffc2d1;
}

/* ---------- like button ---------- */
.social-like-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--social-cream);
  border: 2px dashed var(--social-dash);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.9rem;
  color: var(--social-ink);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
}
.social-like-btn:hover{ border-color: var(--social-pink); }
.social-like-btn:active{ transform: scale(0.96); }
.social-like-btn .heart{
  font-size: 1.1rem;
  transition: transform 0.2s;
}
.social-like-btn.liked{
  border-style: solid;
  border-color: var(--social-pink);
  background: var(--social-pink-soft);
}
.social-like-btn.liked .heart{ transform: scale(1.15); }
.social-like-btn.just-liked .heart{ animation: socialHeartPop 0.35s ease; }
@keyframes socialHeartPop{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.4); }
  100%{ transform: scale(1.15); }
}

/* ---------- comments ---------- */
.social-comments{ margin-top: 30px; font-family: 'Nunito', sans-serif; }
.social-comments-title{
  font-family: 'Gloria Hallelujah', cursive;
  color: var(--social-tan-dark);
  font-size: 1.2rem;
  margin-bottom: 14px;
}
.social-comment-list{ margin-bottom: 20px; }
.social-comment{
  background: var(--social-cream);
  border: 1px solid var(--social-cream-line);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 10px;
}
.social-comment-name{
  font-weight: 700;
  color: var(--social-tan-dark);
  font-size: 0.9rem;
}
.social-comment-date{
  color: var(--social-muted);
  font-size: 0.75rem;
  margin-left: 8px;
}
.social-comment-text{
  color: var(--social-ink);
  font-size: 0.92rem;
  margin-top: 4px;
  white-space: pre-wrap;
  word-break: break-word;
}
.social-comment-empty{
  color: var(--social-muted);
  font-size: 0.9rem;
  font-style: italic;
}

.social-comment-form{
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 500px;
}
.social-comment-form input[type="text"],
.social-comment-form textarea{
  font-family: 'Nunito', sans-serif;
  font-size: 0.9rem;
  background: #fffdf8;
  border: 2px dashed var(--social-dash);
  border-radius: 10px;
  padding: 9px 12px;
  color: var(--social-ink);
  resize: vertical;
}
.social-comment-form input[type="text"]:focus,
.social-comment-form textarea:focus{
  outline: 2px solid var(--social-pink);
  outline-offset: 1px;
}
.social-comment-form textarea{ min-height: 80px; }

/* honeypot field, hidden from real visitors, left in the tab order
   deliberately absent (tabindex -1) so screen reader users don't land
   on it either */
.social-hp-field{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.social-comment-submit{
  align-self: flex-start;
  font-family: 'Gloria Hallelujah', cursive;
  font-size: 0.95rem;
  color: #fff;
  background: linear-gradient(135deg, var(--social-pink), #ff9bb3);
  border: none;
  border-radius: 999px;
  padding: 9px 22px;
  cursor: pointer;
}
.social-comment-submit:disabled{
  opacity: 0.6;
  cursor: not-allowed;
}
.social-comment-status{
  font-size: 0.82rem;
  color: var(--social-muted);
  min-height: 1.2em;
}
.social-comment-status.error{ color: var(--social-pink); }