/* ============================================
   ReviewCatalog — base design layer
   Theme-agnostic typography + content styling
   ============================================ */

:root {
  --rc-text:     #1a1a1a;
  --rc-muted:    #5b6470;
  --rc-line:     #e8eaed;
  --rc-bg-soft:  #f7f8fa;
  --rc-accent:   #d4641a;       /* warm orange — affiliate/CTA */
  --rc-accent-d: #b1521a;
  --rc-link:     #1a5fb4;
  --rc-pros:     #1f8b4c;
  --rc-cons:     #c5343f;
  --rc-radius:   10px;
  --rc-shadow:   0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --rc-font:     -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
  --rc-serif:    Georgia, "Source Serif Pro", "Iowan Old Style", "Apple Garamond", Baskerville, serif;
  --rc-max:      720px;
}

/* ---------- Reset / base ---------- */
body {
  font-family: var(--rc-font);
  color: var(--rc-text);
  line-height: 1.65;
  font-size: 17px;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--rc-link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--rc-accent); }

/* ---------- Content container ---------- */
/* 720px (--rc-max) max only on single article/page reading templates.
 * Archives, categories, tags, the home page, and review CPT archives all
 * need the wider --wide-col container so the Query Loop / card grids can
 * actually breathe. Without this exclusion, category pages render their
 * post grid squeezed into a 680px column, with `alignfull` images pushed
 * off-screen to the right. */
body.single-post .entry-content,
body.single-post .wp-block-post-content,
body.page .entry-content,
body.page .wp-block-post-content,
body.single-review .entry-content,
body.single-review .wp-block-post-content {
  max-width: var(--rc-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Archive/category/tag pages: wide container, breathing room */
body.archive .entry-content,
body.archive .wp-block-post-content,
body.search .entry-content,
body.search .wp-block-post-content {
  max-width: var(--wide-col, 1180px);
  margin-left: auto;
  margin-right: auto;
  padding: 0 32px;
}

/* Homepage (handled separately further down) keeps its own rule. */

/* WordPress' own alignfull/alignwide should override our column on ANY page —
 * blocks marked alignfull must extend to viewport edges. */
.entry-content > .alignfull,
.wp-block-post-content > .alignfull {
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}
.entry-content > .alignwide,
.wp-block-post-content > .alignwide {
  max-width: var(--wide-col, 1180px);
  margin-left: 50%;
  transform: translateX(-50%);
  width: calc(100vw - 32px);
}

/* ---------- Hide Twenty Twenty-Five default footer (we render our own) ---------- */
/* The block theme prints its own footer template-part. Hide it sitewide so we
 * don't show a double footer. Our custom footer is .rc-site-footer. */
.wp-block-template-part[data-type="footer"],
.wp-site-blocks > footer.wp-block-template-part,
footer.wp-block-template-part {
  display: none !important;
}

/* ---------- Front page: hide auto title + featured image (our hero handles both) ---------- */
.home .wp-block-post-title,
.home .wp-block-post-featured-image,
body.page-id-32 .wp-block-post-title,
body.page-id-32 .wp-block-post-featured-image {
  display: none !important;
}

/* On the front page, give the post-content the full 1100px container so the
 * hero / how-we-work / cards grids can breathe. */
body.home .wp-block-post-content,
body.page-id-32 .wp-block-post-content {
  max-width: 1100px;
  padding-left: 24px;
  padding-right: 24px;
}

/* Header / footer: stay full-width, but their *content* gets the same container */
.wp-block-template-part > .wp-block-group:not(.alignfull) {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Headings ---------- */
h1.wp-block-post-title,
.entry-title,
h1.entry-title {
  font-family: var(--rc-serif);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 auto 0.4em;
  max-width: var(--rc-max);
  padding-left: 20px;
  padding-right: 20px;
}

.entry-content h2,
.wp-block-post-content h2 {
  font-family: var(--rc-serif);
  font-size: 28px;
  line-height: 1.25;
  font-weight: 700;
  margin-top: 2.2em;
  margin-bottom: 0.6em;
  padding-bottom: 0.3em;
  border-bottom: 2px solid var(--rc-line);
}

.entry-content h3,
.wp-block-post-content h3 {
  font-size: 21px;
  line-height: 1.3;
  font-weight: 700;
  margin-top: 1.6em;
  margin-bottom: 0.4em;
  color: #2a2a2a;
}

/* ---------- Paragraphs / lists ---------- */
.entry-content p { margin: 0 0 1.1em; }
.entry-content ul,
.entry-content ol { margin: 0 0 1.2em; padding-left: 1.5em; }
.entry-content li { margin-bottom: 0.35em; }

/* ---------- Byline / meta ---------- */
.wp-block-post-author-name,
.wp-block-post-author,
.wp-block-post-date,
.entry-meta,
.byline {
  color: var(--rc-muted);
  font-size: 14px;
}

/* ---------- Tables (the comparison table is key for review sites) ---------- */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0 1.8em;
  font-size: 15.5px;
  box-shadow: var(--rc-shadow);
  border-radius: var(--rc-radius);
  overflow: hidden;
  border: 1px solid var(--rc-line);
}
.entry-content thead {
  background: var(--rc-bg-soft);
}
.entry-content th {
  text-align: left;
  font-weight: 700;
  padding: 12px 14px;
  border-bottom: 2px solid var(--rc-line);
  color: #2a2a2a;
}
.entry-content td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--rc-line);
  vertical-align: top;
}
.entry-content tbody tr:last-child td { border-bottom: none; }
.entry-content tbody tr:hover { background: #fafbfc; }

/* ---------- Pros / Cons blocks ---------- */
/* We treat the paragraph "<strong>Pros:</strong>" / "<strong>Cons:</strong>" followed by a <ul>
   as semantic anchors. Style the following list via :has() (modern browsers). */
.entry-content p:has(> strong:first-child:last-child) + ul {
  background: var(--rc-bg-soft);
  border-left: 4px solid var(--rc-line);
  padding: 14px 16px 14px 32px;
  border-radius: 0 var(--rc-radius) var(--rc-radius) 0;
  margin-top: -0.4em;
}
.entry-content p:has(> strong:first-child:last-child) {
  margin-bottom: 0.4em;
  font-weight: 700;
}

/* ---------- FAQ details/summary ---------- */
.entry-content details {
  background: #fff;
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius);
  padding: 14px 18px;
  margin: 0 0 12px;
  transition: box-shadow .15s ease;
}
.entry-content details[open] { box-shadow: var(--rc-shadow); }
.entry-content details summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  position: relative;
  padding-right: 28px;
  color: #1a1a1a;
}
.entry-content details summary::-webkit-details-marker { display: none; }
.entry-content details summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: var(--rc-accent);
  font-weight: 400;
  line-height: 1;
}
.entry-content details[open] summary::after { content: '−'; }
.entry-content details p {
  margin: 12px 0 0;
  color: #2a2a2a;
}

/* ---------- Affiliate CTA button (used on review CPT) ---------- */
.affiliate-cta {
  text-align: center;
  margin: 1.6em 0;
}
.affiliate-cta a.button,
.entry-content a.button {
  display: inline-block;
  background: var(--rc-accent);
  color: #fff !important;
  font-weight: 600;
  font-size: 17px;
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: var(--rc-shadow);
  transition: transform .1s ease, background .15s ease;
}
.affiliate-cta a.button:hover,
.entry-content a.button:hover {
  background: var(--rc-accent-d);
  transform: translateY(-1px);
  color: #fff !important;
}

/* ---------- Affiliate disclosure block ---------- */
.affiliate-disclosure {
  font-size: 13.5px;
  color: var(--rc-muted);
  background: var(--rc-bg-soft);
  border-left: 3px solid var(--rc-accent);
  padding: 10px 14px;
  margin: 1.4em 0;
  border-radius: 0 6px 6px 0;
}

/* ---------- Review hero image (CPT) ---------- */
.review-hero img {
  width: 100%;
  height: auto;
  border-radius: var(--rc-radius);
  box-shadow: var(--rc-shadow);
  display: block;
}

/* ---------- Review facts dl block (CPT) ---------- */
.review-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 18px;
  background: var(--rc-bg-soft);
  border-radius: var(--rc-radius);
  padding: 14px 18px;
  margin: 1.4em 0;
  font-size: 15.5px;
}
.review-facts dt {
  font-weight: 600;
  color: var(--rc-muted);
}
.review-facts dd {
  margin: 0;
  color: #2a2a2a;
}

/* ---------- Featured image of guide / hero ---------- */
.wp-block-post-featured-image img {
  width: 100%;
  height: auto;
  border-radius: var(--rc-radius);
  margin-bottom: 1.4em;
}

/* ---------- Inline images in long-form content (1 img / 1000-1500 chars) ---------- */
.entry-content figure.rc-inline-img,
.wp-block-post-content figure.rc-inline-img {
  margin: 2em -10px;          /* slight bleed beyond the text column */
  text-align: center;
}
.entry-content figure.rc-inline-img img,
.wp-block-post-content figure.rc-inline-img img {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--rc-radius);
  box-shadow: var(--rc-shadow);
  display: block;
}

/* ============================================
   HOMEPAGE — sections
   ============================================ */
.rc-hero,
.rc-how,
.rc-featured,
.rc-trust-strip,
.rc-about-teaser {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.rc-section-title {
  font-family: var(--rc-serif);
  font-size: clamp(24px, 3vw, 32px);
  margin: 0 0 1em;
  text-align: center;
  letter-spacing: -0.01em;
}

/* Hero ----------------------------------- */
.rc-hero {
  padding-top: 32px;
  padding-bottom: 56px;
}
.rc-hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
}
.rc-hero-text h1 {
  font-family: var(--rc-serif);
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.1;
  font-weight: 700;
  margin: 0 0 0.4em;
  letter-spacing: -0.02em;
}
.rc-hero-sub {
  font-size: clamp(17px, 1.8vw, 20px);
  color: var(--rc-muted);
  line-height: 1.5;
  margin: 0 0 1.6em;
  max-width: 36em;
}
.rc-hero-cta .button {
  display: inline-block;
  background: var(--rc-accent);
  color: #fff !important;
  font-weight: 600;
  font-size: 17px;
  padding: 16px 32px;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: var(--rc-shadow);
  transition: transform .1s ease, background .15s ease;
}
.rc-hero-cta .button:hover {
  background: var(--rc-accent-d);
  transform: translateY(-1px);
}
.rc-hero-img img {
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  display: block;
}

/* How we work ----------------------------- */
.rc-how {
  padding-top: 48px;
  padding-bottom: 56px;
  background: var(--rc-bg-soft);
  margin-top: 16px;
  max-width: none;
}
.rc-how > .rc-section-title { max-width: 1100px; margin-left: auto; margin-right: auto; }
.rc-how-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.rc-how-cell {
  background: #fff;
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius);
  padding: 26px 24px;
  box-shadow: var(--rc-shadow);
}
.rc-how-icon {
  font-size: 30px;
  line-height: 1;
  margin-bottom: 10px;
}
.rc-how-cell h3 {
  font-family: var(--rc-serif);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 0.5em;
  color: var(--rc-text);
}
.rc-how-cell p {
  font-size: 15.5px;
  line-height: 1.55;
  color: #2a2a2a;
  margin: 0;
}
.rc-how-link {
  max-width: 1100px;
  margin: 28px auto 0;
  text-align: center;
  font-size: 15px;
}
.rc-how-link a {
  color: var(--rc-link);
  font-weight: 600;
  text-decoration: none;
}
.rc-how-link a:hover { color: var(--rc-accent); }

/* Featured cards -------------------------- */
.rc-featured {
  padding-top: 56px;
  padding-bottom: 32px;
}
.rc-card-grid {
  display: grid;
  gap: 28px;
}
.rc-card-grid-1col { grid-template-columns: 1fr; max-width: 880px; margin: 0 auto; }
.rc-card-grid-2col { grid-template-columns: repeat(2, 1fr); }
.rc-card {
  background: #fff;
  border: 1px solid var(--rc-line);
  border-radius: var(--rc-radius);
  overflow: hidden;
  box-shadow: var(--rc-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
  display: flex;
  flex-direction: column;
}
.rc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
}
.rc-card-wide { flex-direction: row; }
.rc-card-wide .rc-card-img { flex: 0 0 46%; }
.rc-card-wide .rc-card-img img { height: 100%; min-height: 260px; }
.rc-card-img { display: block; overflow: hidden; }
.rc-card-img img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}
.rc-card:hover .rc-card-img img { transform: scale(1.03); }
.rc-card-body { padding: 22px 24px; flex: 1; }
.rc-card-tag {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rc-muted);
  font-weight: 600;
}
.rc-card-title {
  font-family: var(--rc-serif);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  margin: 8px 0 10px;
}
.rc-card-title a { color: var(--rc-text); text-decoration: none; }
.rc-card-title a:hover { color: var(--rc-accent); }
.rc-card-excerpt {
  font-size: 15.5px;
  line-height: 1.55;
  color: #2a2a2a;
  margin: 0 0 14px;
}
.rc-card-cta { margin: 0; font-size: 15px; }
.rc-card-cta a {
  color: var(--rc-link);
  font-weight: 600;
  text-decoration: none;
}
.rc-card-cta a:hover { color: var(--rc-accent); }

/* Trust strip + about teaser -------------- */
.rc-trust-strip {
  margin-top: 32px;
  padding-top: 28px;
  padding-bottom: 28px;
  border-top: 1px solid var(--rc-line);
  text-align: center;
  font-size: 14.5px;
  color: var(--rc-muted);
}
.rc-trust-strip a { color: var(--rc-link); }
.rc-about-teaser {
  padding-top: 8px;
  padding-bottom: 56px;
  text-align: center;
  max-width: 760px;
}
.rc-about-teaser .rc-section-title { margin-bottom: 0.5em; }
.rc-about-teaser p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--rc-text);
}
.rc-about-teaser a {
  color: var(--rc-link);
  font-weight: 600;
  text-decoration: none;
}

/* ============================================
   SITE FOOTER (3-column, branded)
   ============================================ */
.rc-site-footer {
  background: #111418;
  color: #c9ced6;
  margin-top: 64px;
  padding: 56px 24px 24px;
  font-family: var(--rc-font);
}
.rc-footer-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
}
.rc-footer-col { font-size: 15px; line-height: 1.6; }
.rc-footer-logo {
  display: inline-block;
  color: #fff !important;
  font-family: var(--rc-serif);
  font-size: 24px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.rc-footer-tagline {
  margin: 0 0 14px;
  color: #c9ced6;
  font-size: 15px;
  line-height: 1.55;
}
.rc-footer-disclosure {
  margin: 0;
  font-size: 13.5px;
  color: #8b919b;
  line-height: 1.5;
}
.rc-footer-disclosure strong { color: #c9ced6; }
.rc-footer-heading {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  margin: 4px 0 14px;
  font-weight: 700;
}
.rc-footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rc-footer-nav li { margin-bottom: 8px; }
.rc-footer-nav a {
  color: #c9ced6 !important;
  text-decoration: none;
  font-size: 15px;
}
.rc-footer-nav a:hover { color: var(--rc-accent) !important; }
.rc-footer-bottom {
  max-width: 1100px;
  margin: 40px auto 0;
  padding-top: 22px;
  border-top: 1px solid #2a2f37;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13.5px;
  color: #8b919b;
}
.rc-footer-bottom p { margin: 0; }
.rc-footer-bottom a { color: #c9ced6; text-decoration: none; }
.rc-footer-bottom a:hover { color: var(--rc-accent); }

/* Legacy class kept for compat — collapsed (won't render anything visible) */
.rc-trust-footer { display: none; }

/* ---------- Comments (UGC Layer 2) ---------- */
.wp-block-comments,
.comments-area {
  max-width: var(--rc-max);
  margin: 2.5em auto 0;
  padding: 24px 20px;
  border-top: 2px solid var(--rc-line);
}
.comments-area .comment {
  background: var(--rc-bg-soft);
  border-radius: var(--rc-radius);
  padding: 16px 18px;
  margin-bottom: 14px;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .rc-hero-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .rc-hero-img img { max-height: 320px; }
  .rc-how-grid { grid-template-columns: repeat(2, 1fr); }
  .rc-card-grid-2col { grid-template-columns: 1fr; }
  .rc-card-wide { flex-direction: column; }
  .rc-card-wide .rc-card-img { flex: none; }
  .rc-card-wide .rc-card-img img { height: 240px; min-height: 0; }
  .rc-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .rc-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  body { font-size: 16.5px; }
  .entry-content h2, .wp-block-post-content h2 { font-size: 24px; }
  .entry-content h3, .wp-block-post-content h3 { font-size: 19px; }
  .entry-content table { font-size: 14.5px; }
  .entry-content th, .entry-content td { padding: 10px 11px; }

  /* Inline images respect mobile margins */
  .entry-content figure.rc-inline-img,
  .wp-block-post-content figure.rc-inline-img { margin: 1.4em 0; }

  /* Homepage scales down */
  .rc-hero { padding-top: 16px; padding-bottom: 36px; }
  .rc-hero, .rc-how, .rc-featured, .rc-trust-strip, .rc-about-teaser { padding-left: 18px; padding-right: 18px; }
  .rc-hero-text h1 { font-size: clamp(28px, 8vw, 36px); }
  .rc-hero-sub { font-size: 16px; }
  .rc-hero-cta .button { width: 100%; text-align: center; padding: 14px 24px; }

  .rc-how-grid { grid-template-columns: 1fr; gap: 18px; }
  .rc-how { padding-top: 36px; padding-bottom: 36px; }
  .rc-how-cell { padding: 22px 20px; }

  .rc-featured { padding-top: 36px; }
  .rc-card-body { padding: 18px 20px; }
  .rc-card-title { font-size: 19px; }

  /* Footer stacks vertically */
  .rc-site-footer { padding: 40px 18px 22px; }
  .rc-footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .rc-footer-brand { grid-column: auto; }
  .rc-footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Touch targets >= 44px */
  .rc-footer-nav a, .rc-card-cta a, .rc-how-link a { padding: 6px 0; display: inline-block; }
}

/* Tables: horizontal scroll on small screens (don't blow out the layout).
   We wrap on a parent the user can't add — so apply to the table itself. */
.entry-content table,
.wp-block-post-content table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}
@media (min-width: 721px) {
  .entry-content table,
  .wp-block-post-content table {
    display: table;
    white-space: normal;
  }
}

/* ---------- Print: keep CTA visible ---------- */
@media print {
  .rc-trust-footer, .wp-block-comments { display: none; }
}

/* ============================================
   Variable aliases for new UX features
   Bridge the semantic names used by breadcrumbs +
   engagement bar to existing --rc-* palette so we
   don't fork the color system.
   ============================================ */
:root {
  --font-sans:   var(--rc-font);
  --ink:         var(--rc-text);
  --dek:         var(--rc-muted);
  --paper:       var(--rc-bg-soft);
  --rule:        var(--rc-line);
  --rule-strong: #c9ced6;
  --accent:      var(--rc-accent);
}

/* ---------- Breadcrumbs ---------- */
.rc-breadcrumbs {
  max-width: var(--wide-col, 1180px);
  margin: 0 auto;
  padding: 14px 24px 0;
  font-family: var(--font-sans);
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--dek);
  text-transform: uppercase;
}
.rc-breadcrumbs a {
  color: var(--dek);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.rc-breadcrumbs a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.rc-breadcrumbs .sep {
  display: inline-block;
  margin: 0 .55em;
  color: var(--rule-strong);
}
.rc-breadcrumbs [aria-current="page"] {
  color: var(--ink);
}
@media (max-width: 780px) {
  .rc-breadcrumbs { padding: 10px 22px 0; font-size: .7rem; }
}

/* ---------- Engagement bar ---------- */
.rc-engagement {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: 0 0 2rem;
  font-family: var(--font-sans);
  font-size: .8125rem;
  color: var(--dek);
  flex-wrap: wrap;
}
.rc-engagement .rc-eng-stat {
  display: inline-flex; align-items: center; gap: .35em;
}
.rc-engagement svg { width: 16px; height: 16px; fill: currentColor; }
.rc-engagement .rc-eng-spacer { flex: 1; }
.rc-engagement button, .rc-engagement a.rc-eng-action {
  appearance: none;
  background: none;
  border: 1px solid transparent;
  padding: 5px 9px;
  border-radius: 4px;
  font: inherit;
  color: var(--dek);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35em;
  text-decoration: none;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.rc-engagement button:hover, .rc-engagement a.rc-eng-action:hover {
  color: var(--accent);
  border-color: var(--rule-strong);
  background: var(--paper);
}
.rc-engagement button[aria-pressed="true"] {
  color: var(--accent);
  background: rgba(158, 42, 43, 0.08);
}
.rc-engagement .rc-eng-vote {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .4em;
}
@media (max-width: 780px) {
  .rc-engagement { gap: .8rem .9rem; font-size: .75rem; }
  .rc-engagement .rc-eng-spacer { display: none; }
  .rc-engagement .rc-eng-vote { margin-left: 0; flex-basis: 100%; justify-content: flex-start; padding-top: .4rem; border-top: 1px dashed var(--rule); }
}

/* ---------- Hide broken default theme byline on review CPT ---------- */
/* Twenty Twenty-Five prints "Written by [author] in [category]" via a
 * pattern that doesn't render correctly for our CPT (shows "Written by  in").
 * Suppress it; our engagement bar + breadcrumbs already cover authorship. */
body.single-review .wp-block-post-author-name,
body.single-review .wp-block-post-author,
body.single-review .wp-block-post-author-biography,
body.single-review .wp-block-post-terms,
body.single-review p:has(.wp-block-post-author-name) {
  display: none !important;
}
/* Generic stub paragraph "Written by  in" that the theme renders as plain text */
body.single-review .entry-content > p:first-child:not([class]) {
  /* don't blanket-hide — too aggressive. Use JS-less approach: */
}