/* Vibe Comments — GWill Finance theme override (light + dark).
 *
 * The plugin's public/css/vibe-comments.css loads AFTER this file, so any
 * property the plugin sets with equal specificity beats us. Everything we
 * fight therefore carries !important (the sole exception to the theme's
 * no-!important brand rule — same policy as gwill-tech-theme).
 *
 * Plugin version pinned: 3.5.8 — bump the $expected in inc/enqueue.php
 * when verifying a new version.
 */

/* ── Light tokens (default) ────────────────────────────────────────────────── */
:root {
  --vibe-primary: #d97706 !important;        /* gold */
  --vibe-primary-hover: #b45309 !important;  /* gold dark */
  --vibe-bg: #ffffff !important;
  --vibe-bg-alt: #faf9f6 !important;
  --vibe-surface: #f7f6f2 !important;
  --vibe-border: #e4e2dc !important;
  --vibe-text: #0d0d0d !important;
  --vibe-text-muted: #9a9a9a !important;
  --vibe-radius: 10px !important;
  --vibe-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.05) !important;
}

/* ── Dark tokens (warm blacks, brand identity v1.0) ────────────────────────── */
[data-theme="dark"] {
  --vibe-primary: #f59e0b !important;
  --vibe-primary-hover: #e09009 !important;
  --vibe-bg: #131210 !important;
  --vibe-bg-alt: #171512 !important;
  --vibe-surface: #0d0b08 !important;
  --vibe-border: #211f1a !important;
  --vibe-text: #f0ede6 !important;
  --vibe-text-muted: #5a5248 !important;
  --vibe-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
}

/* ── Typography — JetBrains Mono everywhere (brand) ────────────────────────── */
.vibe-comments-section {
  font-family: 'JetBrains Mono', monospace !important;
}

/* ── Focus ring — gold instead of plugin blue ──────────────────────────────── */
.vibe-comments-section :focus-visible,
.vibe-comments-section input:focus,
.vibe-comments-section textarea:focus {
  outline: none !important;
  border-color: var(--vibe-primary) !important;
  box-shadow: 0 0 0 3px rgba(217,119,6,0.12) !important;
}
[data-theme="dark"] .vibe-comments-section :focus-visible,
[data-theme="dark"] .vibe-comments-section input:focus,
[data-theme="dark"] .vibe-comments-section textarea:focus {
  box-shadow: 0 0 0 3px rgba(245,158,11,0.15) !important;
}

/* ── Pasted / autofilled fields must keep the theme (Chrome paints
   -webkit-autofill with its own white/light-blue bg that ignores CSS).
   The inset-box-shadow trick overrides it for :autofill states. ─────── */
.vibe-comments-section input:-webkit-autofill,
.vibe-comments-section input:-webkit-autofill:hover,
.vibe-comments-section input:-webkit-autofill:focus,
.vibe-comments-section textarea:-webkit-autofill,
.vibe-comments-section textarea:-webkit-autofill:hover,
.vibe-comments-section textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--vibe-bg) inset !important;
  -webkit-text-fill-color: var(--vibe-text) !important;
  caret-color: var(--vibe-text) !important;
  transition: background-color 9999s ease-in-out 0s;
}
[data-theme="dark"] .vibe-comments-section input:-webkit-autofill,
[data-theme="dark"] .vibe-comments-section input:-webkit-autofill:hover,
[data-theme="dark"] .vibe-comments-section input:-webkit-autofill:focus,
[data-theme="dark"] .vibe-comments-section textarea:-webkit-autofill,
[data-theme="dark"] .vibe-comments-section textarea:-webkit-autofill:hover,
[data-theme="dark"] .vibe-comments-section textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--vibe-bg) inset !important;
  -webkit-text-fill-color: var(--vibe-text) !important;
  caret-color: var(--vibe-text) !important;
}

/* ── Buttons — primary gold fill, white text ───────────────────────────────── */
.vibe-btn-primary {
  background: var(--vibe-primary) !important;
  color: #fff !important;
  border-color: var(--vibe-primary) !important;
}
.vibe-btn-primary:hover {
  background: var(--vibe-primary-hover) !important;
  color: #fff !important;
}
.vibe-btn-wp, .vibe-btn-google, .vibe-btn-guest {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 10px 18px !important;
  border-radius: var(--vibe-radius) !important;
  color: var(--vibe-text) !important;
  border: 1px solid var(--vibe-border) !important;
  background: var(--vibe-bg) !important;
}
.vibe-btn-wp:hover, .vibe-btn-google:hover, .vibe-btn-guest:hover {
  border-color: var(--vibe-primary) !important;
  color: var(--vibe-primary) !important;
}
.vibe-or {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: var(--vibe-text-muted) !important;
}

/* ── Author badge — gold pill (was lame blue) ──────────────────────────────── */
.vibe-author-badge {
  background: rgba(217,119,6,0.1) !important;
  border: 1px solid rgba(217,119,6,0.25) !important;
  color: var(--vibe-primary) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 3px 10px !important;
  border-radius: 100px !important;
  margin-left: 6px !important;
}
[data-theme="dark"] .vibe-author-badge {
  background: rgba(245,158,11,0.12) !important;
  border-color: rgba(245,158,11,0.25) !important;
  color: var(--vibe-primary) !important;
}

/* ── Reply button — white text, gold border, gold fill on hover ────────────── */
.vibe-comment-footer .comment-reply-link,
.vibe-reply-trigger {
  color: var(--vibe-primary) !important;
  border-color: var(--vibe-primary) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.vibe-comment-footer .comment-reply-link:hover,
.vibe-reply-trigger:hover {
  background: var(--vibe-primary) !important;
  color: #fff !important;
}

/* ── Reaction picker — gold active state ───────────────────────────────────── */
.vibe-reaction-option {
  border: 1px solid var(--vibe-border) !important;
  background: var(--vibe-bg) !important;
  border-radius: 100px !important;
}
.vibe-reaction-option.vibe-active-reaction {
  background: rgba(217,119,6,0.12) !important;
  border-color: var(--vibe-primary) !important;
}
[data-theme="dark"] .vibe-reaction-option.vibe-active-reaction {
  background: rgba(245,158,11,0.12) !important;
}

/* ── Pinned badge — brand gold instead of raw amber ──────────────────────── */
.vibe-pinned-badge {
  background: rgba(217, 119, 6, 0.12) !important;
  color: var(--vibe-primary) !important;
  border: 1px solid rgba(217, 119, 6, 0.35) !important;
  border-radius: 100px !important;
  padding: 2px 10px !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.04em !important;
  font-weight: 700 !important;
}
/* Pinned comment container — gold left rail + soft gold wash (NOT the
   plugin's raw amber #fbbf24), with padding that keeps the rail from
   crushing text on narrow screens. */
.vibe-comment-pinned > article {
  border-left: 3px solid var(--vibe-primary, #d97706) !important;
  padding-left: 0.9rem !important;
  background: rgba(217, 119, 6, 0.05) !important;
  border-radius: 0 var(--vibe-radius, 10px) var(--vibe-radius, 10px) 0 !important;
}
[data-theme="dark"] .vibe-comment-pinned > article {
  background: rgba(245, 158, 11, 0.07) !important;
}
/* Gold pin glyph on the badge */
.vibe-pinned-badge .vibe-pin-icon,
.vibe-pinned-badge svg {
  color: var(--vibe-primary) !important;
}

/* ── Awaiting moderation — warm hint instead of amber ──────────────────────── */
.vibe-comment-status--pending,
.vibe-comment-awaiting {
  background: rgba(217,119,6,0.08) !important;
  color: var(--vibe-primary) !important;
}

/* ── Nested replies — thread guide + compact mobile hierarchy ─────────────── */
.vibe-comment-list ul.children {
  list-style: none !important;
  padding-left: 2.5rem !important;
  margin-top: var(--vibe-gap, 16px) !important;
  border-left: 2px solid var(--vibe-border) !important;
}
.vibe-comment-list ul.children ul.children {
  border-left-style: dashed !important;
}
/* Slim the guide on dark mode */
[data-theme="dark"] .vibe-comment-list ul.children {
  border-left-color: #2c2a25 !important;
}

/* ── Mobile: nested comments must not eat the viewport ────────────────────── */
@media (max-width: 767px) {
  .vibe-comment-list ul.children {
    padding-left: 22px !important;
    border-left-width: 2px !important;
    margin-top: 12px !important;
  }
  /* 2nd level+ tighter still */
  .vibe-comment-list ul.children ul.children {
    padding-left: 16px !important;
  }
  /* Replies get smaller avatars so content keeps breathing room */
  .vibe-comment-list ul.children .vibe-comment-avatar img {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
  }
  /* Compact nested reply cards (no card chrome in threads — the guide line carries hierarchy) */
  .vibe-comment-list ul.children .vibe-comment-body {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 8px 0 8px 2px !important;
  }
  .vibe-comment-list ul.children .vibe-comment-header {
    gap: 8px !important;
  }
  .vibe-comment-list ul.children .vibe-comment-content {
    font-size: 12.5px !important;
  }
  /* The inline reply form inside threads: break out of the indent chain so
     the form spans the full comment column on phones (not squeezed into the
     thread's indented width). 22px = ul.children padding, +16px for 2nd level. */
  .vibe-comment-list ul.children .vibe-reply-container {
    margin-left: -24px !important;
    width: auto !important;
  }
  .vibe-comment-list ul.children ul.children .vibe-reply-container {
    margin-left: -40px !important;
  }
  .vibe-comment-list ul.children .vibe-reply-container .vibe-comment-form,
  .vibe-comment-list ul.children .vibe-reply-container form {
    padding: 10px !important;
  }
}