/* ============================================================
   Frontend extras — only what the base design system lacks.
   No inline styles anywhere; used by post & contact pages.
   ============================================================ */

/* Share buttons (article meta) */
.rl-share a.s-wa { background: #25d366; }
.rl-share a.s-fb { background: #1877f2; }
.rl-share a.s-tw { background: #1da1f2; }
.rl-share a.s-cp { background: var(--surface-3); color: var(--text-muted); }
.rl-share a:hover { filter: brightness(1.08); transform: translateY(-2px); }

/* Responsive video embed */
.rl-video-frame { width: 100%; aspect-ratio: 16/9; border: 0; display: block; }

/* Action buttons active state (like / save) */
.rl-btn.is-on, .rl-btn.active { border-color: var(--accent); color: var(--accent); }
.rl-btn.is-on i.fa-heart { color: var(--crimson); }

/* FAQ accordion */
.rl-acc { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  margin-bottom: 12px; overflow: hidden; }
.rl-acc-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px; font-weight: 600; text-align: left; color: var(--text); font-family: var(--font-display); }
.rl-acc-q:hover { color: var(--accent); }
.rl-acc-q .chev { color: var(--text-dim); transition: transform .22s; flex-shrink: 0; }
.rl-acc-b { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.rl-acc-b .inner { padding: 0 18px 16px; color: var(--text-muted); font-size: 14px; line-height: 1.75; }