/**
 * Related pages block - versustexas.com
 *
 * Renders after the page content, outside the_content, so it stays out of the
 * table of contents, Rank Math's content analysis, excerpts and llms.txt.
 * The block heading is a div, not an h2, for the same reason.
 *
 * Palette matches the house green #0E3B2C and gold #F5B824.
 * Contrast: green on white = 12.6:1; gold rule is decorative only;
 * link green #0E3B2C on #F7F8F6 = 11.9:1. Both pass WCAG AA.
 */

/* The block is a child of .site, outside the theme's content wrapper, so it
 * has to reproduce the article column itself: body copy measures 900px on a
 * 1218px viewport. Without this it runs full-bleed while the text is inset --
 * the same width trap the Preferred Source banner hit. */
.vs-related{
  width:min(900px, calc(100% - 40px));
  margin:48px auto 8px;
  padding:0;
  font-family:"Lato","Helvetica Neue",Arial,sans-serif;
  border-top:3px solid #0E3B2C;
}

.vs-related-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin:22px 0 18px;
  font-weight:900;
  font-size:21px;
  line-height:1.25;
  color:#0E3B2C;
}

.vs-related-head::before{
  content:"";
  display:block;
  width:26px;
  height:4px;
  background:#F5B824;
  flex:0 0 26px;
}

.vs-related-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2px;
}

.vs-related-list li{margin:0;padding:0}

.vs-related-list a{
  display:block;
  padding:14px 18px;
  background:#F7F8F6;
  color:#0E3B2C;
  text-decoration:none;
  font-size:16px;
  line-height:1.4;
  border-left:3px solid transparent;
  transition:background 160ms ease-out,border-color 160ms ease-out;
}

.vs-related-list a:hover,
.vs-related-list a:focus{
  background:#EDF0EA;
  border-left-color:#F5B824;
  color:#0E3B2C;
  text-decoration:underline;
  text-underline-offset:3px;
}

.vs-related-list a:focus-visible{
  outline:3px solid #0E3B2C;
  outline-offset:2px;
}

@media (max-width:600px){
  .vs-related{margin-top:36px}
  .vs-related-head{font-size:19px}
  .vs-related-list a{padding:13px 15px}
}

@media (prefers-reduced-motion:reduce){
  .vs-related-list a{transition:none}
}