/* BridgeMD public site: the closing call to action card (.cvc) and the site footer card (.cvf).
   Structure, spacing and type follow the Curevanta reference through the shared tokens in cv-tokens.css.
   The footer is also included on the patient pages, so nothing here depends on a homepage class or script. */

/* Visually hidden text for screen readers (the shared homepage helper is not loaded on every page). */
.cvx-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Final call to action ---------- */
.cv-card-sec.cvc {
  display: flex; align-items: center; justify-content: center;
  min-height: 480px; text-align: center;
  /* The same calm navy surface as the hero card, lit from the top right. No photo, no shapes. */
  background:
    radial-gradient(120% 130% at 92% -12%, rgba(18, 87, 176, .62) 0%, rgba(18, 87, 176, .22) 42%, rgba(18, 87, 176, 0) 70%),
    linear-gradient(180deg, #0e2148 0%, var(--cv-dark, #0b1730) 60%);
}
.cvc-in { width: 100%; max-width: 720px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.cvc .cvc-h { max-width: 640px; color: #fff; text-wrap: balance; }
.cvc .cvc-lead { max-width: 520px; color: var(--cv-on-dark, rgba(255, 255, 255, .78)); text-wrap: balance; }
.cvc .cvc-lead a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 3px; transition: text-decoration-color .2s ease; }
.cvc .cvc-lead a:hover { text-decoration-color: #fff; }
.cvc-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.cvc :is(a, button):focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 767px) {
  .cv-card-sec.cvc { min-height: 0; }
}
@media (max-width: 480px) {
  .cvc-cta { flex-direction: column; align-items: stretch; align-self: stretch; }
  .cvc-cta .cv-btn { justify-content: space-between; }
}

/* ---------- Footer ---------- */
.cvf {
  box-sizing: border-box; position: relative; overflow: hidden;
  margin: 64px 12px 12px; padding: 72px 48px 28px;
  border-radius: 28px; background: var(--cv-dark, #0b1730); color: #fff;
  font-family: var(--cv-f, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
  -webkit-font-smoothing: antialiased;
}
/* On the homepage the footer card follows the call to action card, 12px below it. The patient pages (body.fx)
   already end with their own bottom padding, so the card sits right under it. */
body.cx-page .cvf { margin-top: 12px; }
body.fx .cvf { margin-top: 0; }
.cvf-in { width: 100%; max-width: 1104px; margin: 0 auto; }
/* Class chains below are doubled on purpose: pages that include the footer set colours on bare links (body.fx a), and the footer must win. */
.cvf a { text-decoration: none; }
.cvf a:hover { text-decoration: none; }
body .cvf a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
.cvf p, .cvf ul { margin: 0; padding: 0; }
.cvf ul { list-style: none; }

.cvf-top { display: grid; grid-template-columns: minmax(0, 1.9fr) repeat(4, minmax(0, 1fr)); gap: 40px 32px; }

/* Brand column */
.cvf .cvf-logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; }
.cvf-logo img { display: block; width: 34px; height: 34px; border-radius: 10px; }
.cvf-logo span { font: 600 20px/1 var(--cv-fd, "Inter Display", "Inter", system-ui, sans-serif); letter-spacing: -.02em; color: #fff; }
.cvf .cvf-desc { max-width: 300px; margin-top: 20px; font: 400 15px/24px var(--cv-f, "Inter", system-ui, sans-serif); letter-spacing: -.005em; color: rgba(255, 255, 255, .72); text-wrap: pretty; }
.cvf .cvf-find { margin-top: 14px; font: 400 15px/24px var(--cv-f, "Inter", system-ui, sans-serif); letter-spacing: -.005em; color: rgba(255, 255, 255, .72); }
.cvf .cvf-find a { color: #fff; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 3px; transition: text-decoration-color .2s ease; }
.cvf .cvf-find a:hover { text-decoration: underline; text-decoration-color: #fff; }

/* Link columns */
.cvf-col { padding-top: 10px; min-width: 0; }
.cvf .cvf-h { margin: 0 0 20px; font: 500 11px/13.2px var(--cv-f, "Inter", system-ui, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.cvf-col li + li { margin-top: 14px; }
.cvf .cvf-col a { display: inline-flex; align-items: center; gap: 8px; font: 400 15px/24px var(--cv-f, "Inter", system-ui, sans-serif); letter-spacing: -.005em; color: rgba(255, 255, 255, .72); transition: color .2s ease; }
.cvf .cvf-col a:hover { color: #fff; }
.cvf .cvf-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 100px; background: rgba(255, 255, 255, .08); font: 500 11px/1 var(--cv-f, "Inter", system-ui, sans-serif); letter-spacing: .02em; color: #fff; }

/* Giant wordmark. The size follows the width of the footer content so the letters span it exactly:
   measured in the browser, the ink of "BridgeMD" in Inter Display 600 at -0.045em is 4.13 em wide, its left
   edge sits 0.06 em in from the start of the box, and it is 0.945 em tall (the line box is cut to match). */
.cvf-mark { container-type: inline-size; margin-top: 72px; user-select: none; -webkit-user-select: none; pointer-events: none; }
.cvf-mark span { display: block; position: relative; top: -.101em; margin-left: -.06em; font: 600 clamp(56px, 21vw, 232px)/.945 var(--cv-fd, "Inter Display", "Inter", system-ui, sans-serif); letter-spacing: -.045em; white-space: nowrap; color: rgba(255, 255, 255, .16); }
@supports (font-size: 1cqw) { .cvf-mark span { font-size: calc(100cqw / 4.13); } }

/* Bottom bar: copyright, legal links, the compliance line, and the disclaimer */
.cvf-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 28px; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .10); font: 400 13px/19.5px var(--cv-f, "Inter", system-ui, sans-serif); color: rgba(255, 255, 255, .62); }
.cvf .cvf-bar p { font: inherit; color: inherit; }
.cvf .cvf-bar .cvf-copy { color: rgba(255, 255, 255, .78); }
.cvf-legal { display: flex; gap: 24px; }
.cvf .cvf-legal a { color: rgba(255, 255, 255, .72); transition: color .2s ease; }
.cvf .cvf-legal a:hover { color: #fff; }
.cvf .cvf-bar .cvf-soc { margin-left: auto; text-align: right; }
.cvf .cvf-bar .cvf-disc { flex: 1 0 100%; max-width: 780px; margin-top: 4px; text-wrap: pretty; }

/* Tablet: brand on its own row, then the four columns */
@media (max-width: 1199px) {
  .cvf { padding: 72px 32px 28px; }
  .cvf-top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cvf-brand { grid-column: 1 / -1; }
  .cvf-col { padding-top: 0; }
}

/* Below this width the compliance line no longer fits beside the legal links, so it takes its own row. */
@media (max-width: 959px) {
  .cvf .cvf-bar .cvf-soc { margin-left: 0; text-align: left; flex: 1 0 100%; }
}

/* Phone: two columns, smaller card radius and inset */
@media (max-width: 767px) {
  .cvf { margin: 48px 8px 8px; padding: 56px 18px 24px; border-radius: 22px; }
  body.cx-page .cvf { margin-top: 8px; }
  .cvf-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .cvf-mark { margin-top: 56px; }
  .cvf-bar { margin-top: 24px; gap: 6px 24px; }
}
@media (max-width: 359px) {
  .cvf-top { grid-template-columns: minmax(0, 1fr); }
}

/* Touch screens get 44 px targets in the footer links. */
@media (pointer: coarse) {
  .cvf-col li + li { margin-top: 0; }
  .cvf-col a, .cvf-legal a, .cvf-logo { min-height: 44px; }
  .cvf-legal a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .cvf a, .cvc a { transition: none; }
}