/* ──────────────────────────────────────────────────────────────
   va-ui.css — site-wide UI refinements (loaded on every page)

   A single control point for corner-rounding across the whole site,
   which is otherwise all-inline-CSS. Historically corners were square
   or 2-4px and inconsistent; this file unifies them into one soft,
   intentional radius scale. !important overrides the old per-page
   inline rules. Retune any tier by changing one variable below.
   ────────────────────────────────────────────────────────────── */
:root {
  --va-btn-radius:  8px;    /* buttons + form fields (6 tighter · 12 softer · 999px pill) */
  --va-radius-tag:  999px;  /* small chips / tags -> pill */
  --va-radius-card: 12px;   /* cards, panels, callouts, stat tiles */
  --va-radius-img:  16px;   /* photos / headshot (999px = circle) */
}

/* ── Buttons: primary CTAs, outline/ghost, hero, filter, submits ── */
.btn,
[class*="btn"],
.filter-rail button,
button[type="submit"],
input[type="submit"],
.newsletter button,
.nav__cta {
  border-radius: var(--va-btn-radius) !important;
}

/* ── Form fields (match the buttons so forms don't look half-done) ── */
input[type="email"],
input[type="text"],
input[type="tel"],
input[type="search"],
input[type="number"],
textarea,
select {
  border-radius: var(--va-btn-radius) !important;
}

/* ── Tags / chips -> pill (":not(...-)" keeps inner parts out) ── */
[class*="tag"]:not([class*="tag-"]),
.chip, .badge, .pill, .fc-tag {
  border-radius: var(--va-radius-tag) !important;
}

/* ── Cards, panels, callouts, stat tiles -> soft containers.
      The :not() guards skip inner regions (.article-card-body etc.)
      so we round the container, not its children. ── */
[class*="card"],
.callout, .thesis-callout, .panel, .related,
.cta-section, .sources-section,
.hero-stat, .price-card, .hh-panel, .lp-panel {
  border-radius: var(--va-radius-card) !important;
}

/* ── Headshot / portrait photos ── */
.headshot-wrap,
[class*="headshot"],
img[src*="headshot"] {
  border-radius: var(--va-radius-img) !important;
  overflow: hidden;
}
