/*
 * VS Preferred Source CTA
 * -----------------------------------------------------------------------------
 * Banner asking readers to add versustexas.com in Google's preferred-sources
 * picker. Markup is rendered by vs_preferred_source_block() in functions.php.
 *
 * Design notes:
 *  - Type is Lato (loaded globally by vs_load_lato_font at priority 1). The
 *    original comp specified Cardo, which is NOT loaded on blog templates and
 *    would have silently fallen back to Times New Roman. Loading a third
 *    webfont on 700+ posts for one line of display type is not worth the LCP
 *    cost, so the headline uses Lato 900 like the rest of the blog display type.
 *  - No italics on the headline. VS house rule: headings are never italicized.
 *    Emphasis is carried by the gold accent instead.
 *  - Zero border-radius, sharp corners (style guide).
 *  - Contrast verified: gold #F5B824 on green #0E3B2C = 7.0:1; white on green
 *    = 12.6:1; green on white = 12.6:1; green on hover #E2E9F1 = 10.3:1.
 *    All pass WCAG AA (and AAA for the large headline).
 */

.vs-prefsrc{
  display:flex;
  background:#0E3B2C;
  color:#fff;
  font-family:"Lato","Helvetica Neue",Arial,sans-serif;
  margin:40px 0;
}

.vs-prefsrc-rule{width:6px;background:#F5B824;flex:0 0 6px}

.vs-prefsrc-body{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  padding:40px 44px;
  flex-wrap:wrap;
}

.vs-prefsrc-copy{display:flex;flex-direction:column;gap:12px;max-width:560px}

.vs-prefsrc-eyebrow{
  font-weight:700;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#F5B824;
}

.vs-prefsrc-head{
  font-family:"Lato","Helvetica Neue",Arial,sans-serif;
  font-weight:900;
  font-size:33px;
  line-height:1.2;
  color:#fff;
}

/* House rule: no italic headings. The emphasis is the gold, not a slant. */
.vs-prefsrc-head .vs-prefsrc-em{font-style:normal;font-weight:900;color:#F5B824}

.vs-prefsrc-btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:19px 32px;
  background:#fff;
  color:#0E3B2C;
  text-decoration:none;
  min-height:58px;
  box-sizing:border-box;
  transition:background 200ms ease-out;
}

.vs-prefsrc-btn:hover,
.vs-prefsrc-btn:focus{background:#E2E9F1;color:#0E3B2C;text-decoration:none}
.vs-prefsrc-btn:active{background:#CFDAE7}

/* Keyboard users need a visible ring; a background swap alone is not enough. */
.vs-prefsrc-btn:focus-visible{outline:3px solid #F5B824;outline-offset:3px}

.vs-prefsrc-star{font-size:19px;line-height:1;color:#F5B824}

.vs-prefsrc-btn-label{
  font-weight:900;
  font-size:15px;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}

@media (max-width:768px){
  .vs-prefsrc-body{padding:28px 24px;gap:24px}
  .vs-prefsrc-head{font-size:25px}
  .vs-prefsrc-btn{width:100%;justify-content:center;padding:18px 20px}
}

@media (prefers-reduced-motion:reduce){
  .vs-prefsrc-btn{transition:none}
}
/*
 * Single posts: the article prose column and the author-bio card are both
 * capped at 860px inside a 1400px .container. Left unconstrained the banner
 * would run 1304px wide and overhang both of them, so it is matched to the
 * reading column here. On /blog/ and the archives the banner is deliberately
 * left at full container width, where it lines up with the card grid.
 */
.vs-prefsrc-wrap--article .vs-prefsrc{
  max-width:860px;
  margin-left:auto;
  margin-right:auto;
}

/*
 * Let the copy column shrink instead of forcing the button onto its own row.
 * min-width:0 is required -- flex items default to min-width:auto and refuse to
 * shrink below their longest word, which is what pushed the button to wrap.
 */
.vs-prefsrc-copy{flex:1 1 300px;min-width:0}

/* Article width (860px) is tighter than the blog grid, so trim the gutters. */
.vs-prefsrc-wrap--article .vs-prefsrc-body{padding:32px 32px;gap:28px}