/* WCAG 2.2 AA remediation and responsive polish.
   Loaded after the original page styles so the existing design remains intact. */

:root {
  /* AA against both white (5.52:1) and ice (4.95:1). */
  --cyan-deep: #00728F;
}

/* Homepage now exposes the same bypass link as every interior page. */
.skip {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  background: #fff;
  color: var(--navy);
  font-weight: 700;
}

.skip:focus {
  left: 0;
}

/* Solid brand fields give every foreground color a deterministic AA contrast
   ratio; automated tools cannot reliably evaluate text over gradients. */
.hero,
.pagehead {
  background: var(--navy);
}

.hero::after,
.pagehead::after {
  display: none;
}

/* Keep branded cyan for decoration on navy; use the deeper cyan wherever
   white text or light backgrounds require stronger contrast. */
.btn-cyan,
.lb-callout,
.callout:not(.soft) {
  background: var(--cyan-deep);
  color: #fff;
}

.btn-cyan:hover,
.nav-cta:hover {
  background: #005F78;
}

.lb h2 .alive {
  color: var(--cyan-deep);
}

.cta {
  background: var(--cyan-deep);
}

.cta p,
.cta-note {
  color: #fff;
}

/* Consistent, visible keyboard focus across all interactive controls. */
:where(a, button, summary, iframe):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Footer labels are real level-two headings after the page's h1. */
.footer-heading {
  font-family: 'Archivo', sans-serif;
  color: #fff;
  font-size: .95rem;
  margin-bottom: 14px;
  letter-spacing: .06em;
  line-height: 1.6;
  text-transform: uppercase;
}

.text-gold { color: var(--gold); }
.border-left-gold { border-left-color: var(--gold); }
.mt-26 { margin-top: 26px; }
.mt-28 { margin-top: 28px; }
.mt-44 { margin-top: 44px; }
.compliance.no-top-border { border-top: 0; padding-top: 0; }
.compliance a { text-decoration: underline; }

/* Preserve the source logo's 792:599 aspect ratio at every width. */
.about-logo img {
  width: 100%;
  max-width: 344px;
  height: auto;
  max-height: none;
  object-fit: contain;
}

.hamburger,
.sub-toggle {
  background: #fff;
}

.sub-toggle::after {
  content: "▾";
  color: var(--navy);
}

/* Give the third-party custom-element host deterministic fallback colors;
   its visible shadow-DOM controls remain owned by LeadConnector. */
chat-widget {
  background: #fff;
  color: var(--navy-ink);
}

@media (max-width: 940px) {
  .hamburger {
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 6px;
  }

  .nav-links a,
  .sub-toggle {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .nav-links a {
    display: flex;
    align-items: center;
  }
}

@media (max-width: 560px) {
  /* Prevent the hero dash from becoming a line by itself at 375-390px. */
  .hero h1 {
    font-size: 2rem;
  }
}

@media (forced-colors: active) {
  :where(a, button, summary, iframe):focus-visible {
    outline-color: Highlight;
  }
}