/*
 * ActaMed original-design bridge
 *
 * Loaded only on pages that were added outside the original Webflow templates.
 * It brings their hero typography and CTA buttons back to the visual language of
 * index.html / how-it-works.html without touching the site's native animations.
 */

:root {
  --am-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --am-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --am-prussian: #003153;
  --am-action: #004f86;
  --am-action-hover: #003f6b;
  --am-mist: #f1f4f8;
  --am-mist-hover: #e8edf3;
  --am-slate: #5c6b7d;
  --am-hero-width: 64rem;
  --am-page-gutter: 4rem;
}

/* Custom product, feature and article pages: use the same type system. */
main:not(.main-wrapper),
article {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  font-family: var(--am-sans);
}

main:not(.main-wrapper) > h1:first-of-type,
article > h1:first-of-type {
  box-sizing: border-box;
  width: min(var(--am-hero-width), calc(100vw - (var(--am-page-gutter) * 2)));
  max-width: none;
  margin: 0 0 1rem 50%;
  transform: translateX(-50%);
  font-family: var(--am-serif);
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--am-prussian);
  text-align: center;
  text-wrap: balance;
}

main:not(.main-wrapper) > .lead:first-of-type,
article > .lead:first-of-type {
  box-sizing: border-box;
  width: min(var(--am-hero-width), calc(100vw - (var(--am-page-gutter) * 2)));
  max-width: none;
  margin: 0 0 1.6rem 50%;
  transform: translateX(-50%);
  font-family: var(--am-sans);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--am-slate);
  text-align: center;
  text-wrap: balance;
}

article > .meta:first-of-type {
  width: min(var(--am-hero-width), calc(100vw - (var(--am-page-gutter) * 2)));
  max-width: none;
  margin-right: 0;
  margin-left: 50%;
  transform: translateX(-50%);
  color: var(--am-slate);
  text-align: center;
}

main:not(.main-wrapper) > .cta-row {
  justify-content: center;
  gap: 0.75rem;
  margin: 2rem auto 3rem;
}

main.fp > .support {
  justify-content: center;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

/* Match the native pill buttons from index.html. */
main:not(.main-wrapper) .btn,
article .btn,
main:not(.main-wrapper) a[href="demo.html"][style*="background: #003153"] {
  display: inline-flex !important;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.5rem !important;
  border: 1px solid transparent !important;
  border-radius: 999rem !important;
  font-family: var(--am-sans) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

main:not(.main-wrapper) .btn-primary,
main:not(.main-wrapper) .dark-box .btn,
article .cta-block .btn,
main:not(.main-wrapper) a[href="demo.html"][style*="background: #003153"] {
  border-color: var(--am-action) !important;
  background: var(--am-action) !important;
  color: #fff !important;
}

main:not(.main-wrapper) .btn-primary:hover,
main:not(.main-wrapper) .dark-box .btn:hover,
article .cta-block .btn:hover,
main:not(.main-wrapper) a[href="demo.html"][style*="background: #003153"]:hover {
  border-color: var(--am-action-hover) !important;
  background: var(--am-action-hover) !important;
  color: #fff !important;
}

main:not(.main-wrapper) .btn-secondary {
  border-color: var(--am-mist) !important;
  background: var(--am-mist) !important;
  color: var(--am-prussian) !important;
}

main:not(.main-wrapper) .btn-secondary:hover {
  border-color: var(--am-prussian) !important;
  background: var(--am-prussian) !important;
  color: #fff !important;
}

/* The careers hero was accidentally left in the first half of a two-column grid. */
main.main-wrapper #header .section-content {
  grid-template-columns: minmax(0, 1fr) !important;
}

main.main-wrapper #header .section-content_first {
  grid-column: 1 / -1 !important;
  width: 100%;
  max-width: var(--am-hero-width);
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

main.main-wrapper #header .section-content_first .content-group {
  width: 100%;
}

main.main-wrapper #header .section-content_first h1 {
  max-width: none;
  font-family: var(--am-serif);
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--am-prussian);
  text-align: center;
}

main.main-wrapper #header .section-content_first .text-rich-text {
  max-width: 52rem;
  margin-right: auto;
  margin-left: auto;
  color: var(--am-slate);
  text-align: center;
}

/* Form CTAs: demo/contact pages use native markup but had a different radius/color. */
main.main-wrapper input[type="submit"],
main.main-wrapper button[type="submit"] {
  min-height: 3rem;
  padding: 0.75rem 1.5rem !important;
  border: 1px solid var(--am-action) !important;
  border-radius: 999rem !important;
  background: var(--am-action) !important;
  color: #fff !important;
  font-family: var(--am-sans) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  text-align: center;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease;
}

main.main-wrapper input[type="submit"]:hover,
main.main-wrapper button[type="submit"]:hover {
  border-color: var(--am-action-hover) !important;
  background: var(--am-action-hover) !important;
  color: #fff !important;
}

@media (max-width: 991px) {
  :root {
    --am-page-gutter: 2rem;
  }
}

@media (max-width: 767px) {
  :root {
    --am-page-gutter: 1.25rem;
  }

  main:not(.main-wrapper) > h1:first-of-type,
  article > h1:first-of-type,
  main.main-wrapper #header .section-content_first h1 {
    font-size: 2.5rem;
    line-height: 1.14;
  }

  main:not(.main-wrapper) > .lead:first-of-type,
  article > .lead:first-of-type {
    font-size: 1.125rem;
  }
}

@media (max-width: 479px) {
  main:not(.main-wrapper) > h1:first-of-type,
  article > h1:first-of-type,
  main.main-wrapper #header .section-content_first h1 {
    font-size: 2.25rem;
  }

  main:not(.main-wrapper) > .cta-row {
    align-items: stretch;
    flex-direction: column;
  }

  main:not(.main-wrapper) > .cta-row .btn,
  main:not(.main-wrapper) > div[style*="text-align: center"] > .btn,
  main:not(.main-wrapper) a[href="demo.html"][style*="background: #003153"] {
    width: 100%;
  }
}