/**
 * Backflow device-types landing view (/services/backflow-prevention).
 * Scoped by the display css_class `backflow-types-landing`.
 */

/* Group sub-headers ("Testable Assemblies" / "Non-testable Assemblies"):
   a compact, muted, ruled label — clearly a level BELOW the "Device Types"
   title (which stays the big Oswald heading), with tight spacing. */
.backflow-types-landing h3 {
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b6b6b;
  margin: 0.25rem 0 0.6rem;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid #e2e2e2;
}

/* The first group header sits tight under the title/intro. */
.backflow-types-landing h3:first-of-type {
  margin-top: 0;
}

/* Device-type titles — styled like the group sub-headers (uppercase, bold,
   letter-spaced) but in brand orange and with NO underline/rule. */
.backflow-types-landing .backflow-device-type-title {
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.25rem;
}
.backflow-types-landing .backflow-device-type-title a {
  font-family: "Oswald", "Arial Narrow", sans-serif;
  color: #cb6015;
  text-decoration: none;
}
.backflow-types-landing .backflow-device-type-title a:hover,
.backflow-types-landing .backflow-device-type-title a:focus {
  color: #a44d10;
  text-decoration: none;
}

/* A little less air between rows. */
.backflow-types-landing .backflow-device-type-item {
  margin-bottom: 1rem;
}

/* Brand button (.bo-btn) — the orange pill CTA used on the marketing pages,
   made available on the backflow device-type views (landing + term pages).
   Copied from bos_homepage/css/homepage.css so the class works here; vars fall
   back to the brand hexes when the token sheet isn't present. */
.bo-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bo-orange, #CB6015); color: #fff !important;
  font-family: var(--osw, "Oswald", sans-serif); font-weight: 600; font-size: 17px; line-height: 1;
  padding: 13px 26px; border: 2px solid transparent; border-radius: 4px;
  text-decoration: none; cursor: pointer;
}
.bo-btn:hover { background: var(--bo-orange-hover, #A94E11); color: #fff !important; text-decoration: none; }
.bo-btn--ghost { background: transparent; color: var(--bo-orange, #CB6015) !important; border-color: var(--bo-orange, #CB6015); }
.bo-btn--ghost:hover { background: rgba(203,96,21,.10); }