/* 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); }

/* ── Article byline ──────────────────────────────────────────────
   Sits directly after the <h1>. Three variants, rotated across the site
   so pages vary without any single page looking inconsistent:

     <div class="pp-byline pp-byline--verified"> …  (trust: sourcing)
     <div class="pp-byline pp-byline--profile">  …  (trust: the person)
     <div class="pp-byline pp-byline--card">     …  (trust: prominence)

   Link colour is deliberately #9A5E08, not the brand #C47A0F: at this
   text size the brand amber measures ~3.4:1 on white and fails WCAG AA,
   which design-tokens.css documents in its own comment. The darker tone
   reads as the same colour family at 5.3:1. */
.pp-byline {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-500, #6B7280);
  margin: 0 0 22px;
}

.pp-byline a { color: #9A5E08; font-weight: 600; text-decoration: none; }
.pp-byline a:hover { text-decoration: underline; }
.pp-byline img {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.pp-byline .pp-sep { opacity: .4; }
.pp-byline .pp-check { color: #15803D; font-weight: 600; white-space: nowrap; }

/* C2 — verified: states what the recommendation rests on */
.pp-byline--verified {
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(26, 14, 6, .08);
}
.pp-byline--verified .pp-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pp-byline--verified img { width: 32px; height: 32px; }
.pp-byline--verified .pp-verify {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  font-size: 13px;
  color: #15803D;
  font-weight: 500;
}

/* C3 — profile: puts a person behind the recommendation */
.pp-byline--profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(26, 14, 6, .08);
}
.pp-byline--profile img { width: 44px; height: 44px; }
.pp-byline--profile .pp-name {
  font-weight: 700;
  font-size: 15.5px;
  color: var(--gray-900, #1A0E06);
  letter-spacing: -.01em;
}
.pp-byline--profile .pp-name a { color: inherit; font-weight: 700; }
.pp-byline--profile .pp-role { font-weight: 400; color: var(--gray-500, #6B7280); font-size: 14px; }
.pp-byline--profile .pp-meta {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 2px;
  font-size: 13px;
}

/* C5 — card: lifts the byline out of the text flow, in brand cream.
   Also the replacement for the hardcoded #f8faff author cards. */
.pp-byline--card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--pp-accent-soft, #FFF9EE);
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid rgba(196, 122, 15, .14);
}
.pp-byline--card img { width: 40px; height: 40px; }
.pp-byline--card .pp-name { font-weight: 700; font-size: 15px; }
.pp-byline--card .pp-name a { color: var(--gray-900, #1A0E06); font-weight: 700; }
.pp-byline--card .pp-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 2px;
  font-size: 13px;
}

/* Never let a scroll-reveal animation strand a byline at opacity 0. */
.pp-byline { opacity: 1 !important; }

/* ── Contrast fix: table headers & rank badge ─────────────────────
   65 pages carry their own inline copy of `.comparison-table th {
   background: var(--blue); color: var(--white) }` (white on brand amber,
   ~3.4:1 — design-tokens.css documents that amber fails WCAG AA at this
   size). The `.product-rank.gold` badge is worse, ~2.15:1. Rather than
   editing 65 duplicated inline <style> blocks, override here — this
   file loads last, so !important wins regardless of the per-page copy.
   Dark ink on the same amber/gold background clears AA comfortably. */
.comparison-table th,
table th {
  background: #FFF0CC !important;
  color: #1A0E06 !important;
}
.product-rank.gold {
  background: #f59e0b !important;
  color: #1A0E06 !important;
}

@media (max-width: 600px) {
  /* theme.css raises mobile body copy to 16px via `p, li`; the byline is
     supporting text and stays deliberately below that. */
  .pp-byline { font-size: 13.5px !important; }
  .pp-byline--profile img { width: 40px; height: 40px; }
  .pp-byline--card { padding: 12px 14px; }
}
