/* ============================================================
   interior-hero.css
   Shared hero components used across FCRA, State Pages (CA/TX/+49),
   States Overview, and Articles.
   ============================================================ */

/* ---- Wide hero content wrapper (every interior hero except Utility pages) ---- */
.bch-state-hero-inner {
  max-width: 1180px !important;
}

/* ---- Split hero: text left, oversized icon right (Resource pages + Employers) ---- */
.bch-resource-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* Pinned to the top so the h1 lands in the same place regardless of how many
   lines the intro paragraph wraps to. The icon stays vertically centered. */
.bch-resource-hero-text {
  flex: 1 1 auto;
  max-width: 760px;
  align-self: flex-start;
}

/* The icon is decorative and oversized on purpose: negative margins let it
   break out of the text column on all sides so it never drives the hero's
   height. Height stays text-driven, matching the FCRA and States Overview heroes. */
.bch-resource-hero-icon {
  flex: 0 0 auto;
  margin: -20px -280px -20px 0;
  align-self: center;
  position: relative;
}

.bch-resource-hero-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 220px;
  transform: translate(-30%, -45%);
  border-radius: 50%;
  background: linear-gradient(160deg, var(--teal2) 0%, var(--navy2) 100%);
  opacity: .07;
  z-index: 0;
}

.bch-resource-hero-icon img {
  position: relative;
  z-index: 1;
  width: 250px;
  height: 250px;
  object-fit: contain;
}

@media (max-width: 800px) {
  .bch-resource-hero-icon {
    display: none;
  }
}

/* ---- Typeahead dropdown: hero "choose from a list" pattern ---- */
.interior-hero h2.bch-hero-search-label {
  margin: 18px 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  text-align: left;
}

.bch-custom-select {
  position: relative;
  max-width: 350px;
}

.bch-custom-select::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 12px;
  height: 8px;
  transform: translateY(-50%);
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230f418d' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.bch-custom-select input {
  width: 100%;
  height: 45px;
  padding: 0 46px 0 18px;
  border: 2px solid var(--teal);
  border-radius: 6px;
  font-size: 15px;
  font-family: inherit;
  color: var(--navy);
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 65, 141, 0.06);
}

.bch-custom-select input::placeholder {
  color: var(--muted);
}

.bch-custom-select input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 138, 122, 0.12);
}

.bch-custom-options {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  max-height: 250px;
  overflow-y: auto;
  box-shadow: 0 10px 28px rgba(15, 65, 141, .12);
  z-index: 20;
}

.bch-custom-select.open .bch-custom-options {
  display: block;
}

.bch-custom-options::-webkit-scrollbar {
  width: 8px;
}

.bch-custom-options::-webkit-scrollbar-thumb {
  background: var(--teal2);
  border-radius: 8px;
}

.bch-custom-options a {
  display: block;
  padding: 9px 16px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--navy);
  text-decoration: none;
}

.bch-custom-options a:hover {
  background: var(--soft-teal);
  color: var(--teal);
}

.bch-custom-options a.bch-kb-active {
  background: var(--soft-teal);
  color: var(--teal);
}

.bch-custom-options .bch-no-results {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--muted);
}

/* ---- Icon + heading row ---- */
.bch-state-badge-row {
  margin-bottom: 12px;
}

/* Icon-free heroes: match the 760px text width used on FAQs and Glossary */
.bch-state-badge-row > div:only-child {
  max-width: 760px;
}

.interior-hero .bch-state-badge-row {
  margin-bottom: 14px;
}

.bch-state-badge-row h1 {
  color: var(--teal) !important;
}

.bch-state-badge-row h1 span {
  display: block;
  color: var(--navy);
  font-size: 22px;
  font-weight: 600;
  margin-top: 4px;
}

/* ---- Icon badge, variant A: bare <img>, used on State Pages
   (icon comes directly from an ACF image field, no wrapper div) ---- */

.bch-state-badge-icon {
  height: 220px;
  width: 220px;
  align-self: center;
  margin-top: -20px;
  object-fit: contain;
  background: none;
  border: none;
  padding: 0;
  flex-shrink: 0;
}

/* ---- Icon badge, variant B: <div><img></div> wrapper,
   used on FCRA, States Overview, and Articles ---- */
.bch-hero-icon-badge {
  width: 200px;
  height: 200px;
  border-radius: 24px;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  font-size: 80px;
  flex-shrink: 0;
}

.bch-hero-icon-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0px;
}

/* ---- Two-column hero layout: intro text + Quick Facts box (FCRA, State Pages) ---- */

/* Text column takes the remaining space so it never wraps earlier than it
   has to. The icon column sizes to the icon itself (200px on FCRA and
   States Overview, 220px on state pages). */
.bch-state-hero-top {
  display: grid;
  grid-template-columns: 1fr max-content 360px;
  gap: 30px;
  align-items: start;
}

@media (max-width: 900px) {
  .bch-state-hero-top {
    grid-template-columns: 1fr;
  }
}

/* ---- Compact "Quick Facts" card (FCRA, State Pages, and formerly States Overview) ---- */

.bch-glance-mini {
  grid-column: -2;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  padding: 14px 18px 10px 18px;
  box-shadow: 0 10px 28px rgba(15, 65, 141, .06);
  width: 380px;
  margin-left: auto;
}

.bch-glance-mini h3 {
  margin: 0 0 6px;
  font-size: 16px;
  color: var(--navy);
  text-align: left;
}

.bch-glance-mini-grid {
  display: flex;
  flex-direction: column;
  gap: 0px;
  position: relative;
}

.bch-glance-mini-grid::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--teal);
  opacity: .15;
  z-index: 0;
}

.bch-glance-mini-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  text-align: left;
  padding: 2px 4px 2px 16px;
  position: relative;
  z-index: 1;
  overflow: visible;
  transition: transform .15s ease, background .15s ease;
}

.bch-glance-mini-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
}

.bch-glance-mini-item:hover,
.bch-glance-mini-item:focus-visible {
  background: var(--lightteal);
  transform: translateY(-2px);
  outline: none;
}

.bch-glance-mini-label {
  flex: 0 0 200px;
  font-size: 13px;
  color: var(--text);
  text-transform: none;
  font-weight: 600;
  letter-spacing: normal;
  white-space: normal;
  line-height: 1.3;
}

.bch-glance-mini-value {
  font-size: 14px;
  color: var(--navy);
  font-weight: 700;
  margin-top: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

.bch-glance-note {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  font-size: 10.5px;
  color: var(--muted);
  display: flex;
  gap: 6px;
}