/* PawPicks shared component styles.
   Loaded LAST in <head> on every article so it wins over per-page inline <style>.
   Anything in here is the single source of truth for a component's look —
   do not re-declare these rules inside an article again. */

/* ── FAQ accordion ───────────────────────────────────────────────
   Canonical markup:
     <div class="faq-item">
       <button type="button" class="faq-q" onclick="toggleFaq(this)" aria-expanded="false">
         Question text<span class="faq-icon" aria-hidden="true">+</span>
       </button>
       <div class="faq-a">Answer text</div>
     </div>
*/
.faq-item {
  border: 1.5px solid var(--gray-100, #f1f5f9);
  border-radius: var(--radius, 14px);
  margin-bottom: 1rem;
  overflow: hidden;
  background: #fff;
  padding: 0;
}

.faq-q {
  /* reset the <button> so it reads as content, not a form control */
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: #fff;
  width: 100%;
  text-align: left;
  font-family: 'DM Sans', sans-serif;
  padding: 1rem 1.2rem;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--gray-900, #0f172a);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  transition: background .2s;
}

.faq-q:hover { background: var(--off-white, #f8faff); }
.faq-q:focus-visible { outline: 2px solid var(--pp-accent, #C47A0F); outline-offset: -2px; }

.faq-icon {
  flex-shrink: 0;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  color: var(--pp-accent, #C47A0F);
  transition: transform .2s ease;
}

.faq-q[aria-expanded="true"] .faq-icon { transform: rotate(180deg); }

.faq-a {
  padding: 0 1.2rem 1rem;
  font-size: .9rem;
  color: var(--gray-700, #334155);
  line-height: 1.8;
  display: none;
  margin: 0;
}

.faq-a.open { display: block; }

/* Never let a scroll-reveal animation strand a FAQ at opacity 0. */
.faq-item, .faq-section { opacity: 1 !important; }

/* ── Pinterest save pill ─────────────────────────────────────── */
.pp-pin-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #E60023;
  color: #fff;
  padding: .55rem 1.1rem;
  border-radius: 50px;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 1.2rem;
  transition: background .2s, transform .2s;
}

.pp-pin-btn:hover { background: #ad081b; transform: translateY(-1px); }
.pp-pin-btn svg { flex-shrink: 0; }

/* ── Author / byline accent ──────────────────────────────────────
   Each article sets --pp-accent (and --pp-accent-soft) on :root to match
   its category. Everything accent-coloured reads from those two vars. */
.pp-author-card,
.author-box { border-left-color: var(--pp-accent, #C47A0F) !important; }

.pp-author-card a,
.author-box a { color: var(--pp-accent, #C47A0F); }
