/* Politics-specific style overrides for truthtracking.org/politics.
 * Shared primitives (root vars, sidenav, hero, card module, leaderboards,
 * mobile, footer, etc.) live in _shared/punchy-core.css and load BEFORE this
 * file. Politics is the design canon for the punchy-site family, so the
 * baseline in _shared/ was seeded from this site's styles. No overrides are
 * needed today — add politics-only rules below as they emerge. */

/* ── Footer email subscribe (Buttondown) ─────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
footer.footer-big .footer-subscribe {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 32px; margin-top: 28px; padding-top: 28px;
  border-top: 1px solid var(--border);
}
footer.footer-big .fsub-copy { flex: 1 1 280px; }
footer.footer-big .fsub-copy h3 {
  margin: 0 0 4px; font-size: 16px; font-weight: 900; color: var(--text);
}
footer.footer-big .fsub-copy p {
  margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted);
}
footer.footer-big .fsub-form {
  display: flex; gap: 8px; flex: 0 1 360px; min-width: 260px;
}
footer.footer-big .fsub-form input[type="email"] {
  flex: 1 1 auto; min-width: 0; padding: 10px 14px;
  font-size: 14px; color: var(--text);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; transition: border-color 0.15s;
}
footer.footer-big .fsub-form input[type="email"]:focus {
  outline: none; border-color: var(--yellow);
  box-shadow: 0 0 0 3px var(--yellow-bg);
}
footer.footer-big .fsub-form button {
  flex: 0 0 auto; padding: 10px 22px; font-size: 14px; font-weight: 700;
  color: #fff; background: var(--yellow); border: none; border-radius: 8px;
  cursor: pointer; transition: filter 0.15s;
}
footer.footer-big .fsub-form button:hover { filter: brightness(1.08); }
@media (max-width: 640px) {
  /* Stack vertically. Reset justify-content (space-between spreads children
     across the cross-axis height → big gap) and the copy's flex-basis (280px
     becomes a HEIGHT in column direction → inflates the band). */
  footer.footer-big .footer-subscribe {
    flex-direction: column; align-items: stretch; justify-content: flex-start;
  }
  footer.footer-big .fsub-copy { flex: 0 0 auto; }
  footer.footer-big .fsub-form { flex: 0 0 auto; flex-basis: auto; }
}