/* ==========================================================================
   site.css - 4republican.com's own styles. Loads after app.css and
   sitekit.css (sk_css_once) on kit pages and the home page, and after
   politics.css on Politics pages (fs_pol_site_css() in site.boot.inc.php).

   1. Seats: the stacked party bars (Politics pages and the home strip)
   2. Notes and Politics additions: the congress note, party unity, chairs, states
   3. Home: the "Republicans in Congress" strip, the blog block below the feed
   4. Footer notice
   5. Dark mode, keyed on html[data-fs-theme="dark"] (the engine's switch, app.css section 14)

   The accent is a Republican red used sparingly; the party colours match politics.css
   (--pol-r red, --pol-d blue, --pol-i violet) so a seat bar reads the same everywhere.
   ========================================================================== */

:root{
  --rp-ink:#16202e; --rp-ink-2:#445064; --rp-ink-3:#667388;
  --rp-surface:#ffffff; --rp-surface-2:#f6f7fa; --rp-line:#e2e6ee;
  --rp-red:#b31b2c; --rp-red-soft:#fbe9ec;
  --rp-blue:#1f5fbf; --rp-violet:#7a5ea8;
  --rp-radius:var(--radius,12px);
}

/* ------------------------------------------------------------ 1. seats -- */
.rp-seats{ margin:0 0 14px; }
.rp-seats-head{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 12px; margin-bottom:5px; font-size:14px; color:var(--rp-ink-2); }
.rp-seats-head b{ color:var(--rp-ink); font-size:15px; }
.rp-bar{ display:flex; height:26px; border-radius:6px; overflow:hidden; background:var(--rp-surface-2); }
.rp-seg{ display:flex; align-items:center; justify-content:center; min-width:0; color:#fff; font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.rp-seg-n{ padding:0 4px; }
.rp-r{ background:var(--rp-red); }
.rp-d{ background:var(--rp-blue); }
.rp-i{ background:var(--rp-violet); }
.rp-seats-foot{ margin:5px 0 0; font-size:12.5px; color:var(--rp-ink-3); }

/* -------------------------------------------- 2. notes and Politics bits -- */
.rp-note{ margin:0 0 16px; padding:12px 16px; border-left:4px solid var(--rp-red); background:var(--rp-red-soft); border-radius:0 8px 8px 0; color:var(--rp-ink); }
.rp-note p{ margin:0; font-size:14.5px; line-height:1.55; }
.rp-note p + p{ margin-top:4px; }
.rp-note-asof{ color:var(--rp-ink-3); font-size:12.5px; }
.rp-note a{ color:var(--rp-red); font-weight:600; }

.rp-unity-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.rp-chairs, .rp-states{ list-style:none; margin:0 0 8px; padding:0; display:grid; gap:5px; font-size:13.5px; }
.rp-chairs li{ display:flex; flex-direction:column; min-width:0; }
.rp-chair-c{ font-weight:600; overflow-wrap:anywhere; }
.rp-chair-m{ color:var(--rp-ink-3); font-size:12.5px; }
.rp-states{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
.rp-states li{ display:flex; justify-content:space-between; gap:8px; }
.rp-states span{ color:var(--rp-ink-3); white-space:nowrap; font-variant-numeric:tabular-nums; }

.rp-pct{ position:relative; display:inline-block; min-width:108px; padding:2px 8px; border-radius:4px; background:var(--rp-surface-2); overflow:hidden; font-variant-numeric:tabular-nums; }
.rp-pct-bar{ position:absolute; inset:0 auto 0 0; background:var(--rp-red-soft); }
.rp-pct b{ position:relative; }

/* -------------------------------------------------------------- 3. home -- */
.rp-start{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:20px; margin:0 0 22px; padding:18px 20px; background:var(--rp-surface); border:1px solid var(--rp-line); border-top:4px solid var(--rp-red); border-radius:var(--rp-radius); }
.rp-start-main, .rp-start-side{ min-width:0; }
.rp-eyebrow{ margin:0 0 2px; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--rp-red); }
.rp-h{ margin:0 0 12px; font-size:1.35rem; line-height:1.25; color:var(--rp-ink); }
.rp-start-note{ margin:4px 0 10px; font-size:14px; line-height:1.55; color:var(--rp-ink-2); }
.rp-links{ display:flex; flex-wrap:wrap; gap:8px; margin:0; }
.rp-links a{ padding:6px 12px; border:1px solid var(--rp-line); border-radius:999px; font-size:13.5px; font-weight:600; text-decoration:none; color:var(--rp-ink); background:var(--rp-surface-2); }
.rp-links a:hover, .rp-links a:focus-visible{ border-color:var(--rp-red); color:var(--rp-red); }
.rp-box-h{ margin:0 0 8px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--rp-ink-3); }
.rp-leaders{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.rp-leaders li{ display:flex; flex-direction:column; min-width:0; font-size:14px; }
.rp-leaders a{ color:var(--rp-ink); text-decoration:none; overflow-wrap:anywhere; }
.rp-leaders span{ color:var(--rp-ink-3); font-size:12.5px; }
@media (max-width: 720px){ .rp-start{ grid-template-columns:minmax(0,1fr); padding:14px; } }

.rp-below{ margin:24px 0; }
.rp-below-head{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:6px 14px; margin-bottom:10px; }
.rp-below-head .rp-h{ margin:0; }
.rp-more{ font-weight:600; text-decoration:none; color:var(--rp-red); }
.rp-politics-line{ margin:14px 0 0; font-size:14.5px; color:var(--rp-ink-2); }
.rp-politics-line a{ color:var(--rp-red); font-weight:600; }

/* ----------------------------------------------------------- 4. footer -- */
.rp-ft-about{ min-width:0; }
.rp-ft-note{ max-width:36rem; }
.rp-ft-note p{ margin:0 0 .5rem; font-size:.8125rem; line-height:1.5; opacity:.85; }

/* --------------------------------------------------------- 5. dark mode -- */
html[data-fs-theme="dark"]{
  --rp-ink:#e4e9f1; --rp-ink-2:#c2cbd8; --rp-ink-3:#93a1b5;
  --rp-surface:#141b24; --rp-surface-2:#1a2330; --rp-line:#263243;
  --rp-red:#ef6b77; --rp-red-soft:#3a1c22;
  --rp-blue:#6f9cf0; --rp-violet:#b197fc;
}
html[data-fs-theme="dark"] .rp-seg{ color:#0b1420; }
html[data-fs-theme="dark"] .rp-links a{ background:var(--rp-surface-2); }