/* ============================================================
   Unity Health — consolidated-nav mockup
   Availity-inspired: one nav bar (logo / mega-menu / search + portal
   button), no separate mobile drawer, no repeated footer nav columns,
   no persistent contact-info box. Homepage-section styling for the new
   inline "Find care" / "Patients & Visitors" / "About" / CTA sections
   also lives here. Layered after the vendor CSS/FontAwesome — vendor
   files are never edited.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --uh-ink: #1a2733;
  --uh-terracotta: #b5502e;
  --uh-terracotta-dark: #8a3c22;
  --uh-sand: #fdf8f3;
  --uh-line: #e7ded4;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 700;
}

a { color: var(--uh-terracotta); }
a:hover { color: var(--uh-terracotta-dark); }

.btn.btn-primary:not(.disabled) {
  background-color: var(--uh-terracotta) !important;
  border-color: var(--uh-terracotta) !important;
  border-radius: 999px !important;
}

/* Hide the vendor header/footer entirely if a page still has one (belt and
   braces — the build script removes it, this just guards against drift). */
.c-header-primary, .c-footer-primary { display: none !important; }

/* ---------- Nav ---------- */

.mockup-nav {
  background: #fff;
  border-bottom: 1px solid var(--uh-line);
  position: sticky;
  top: 0;
  z-index: 200;
}
.mockup-nav__bar {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 24px;
}
.mockup-nav__logo img { height: 48px; display: block; }

.mockup-nav__menu { flex: 1; }
.mockup-nav__menu > ul {
  list-style: none;
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  justify-content: center;
}
.mockup-nav__menu > ul > li { position: relative; }

.mockup-nav__trigger,
.mockup-nav__link {
  background: none;
  border: none;
  font: inherit;
  font-weight: 600;
  color: var(--uh-ink);
  padding: 10px 16px;
  cursor: pointer;
  text-decoration: none;
  border-radius: 8px;
  display: inline-block;
}
.mockup-nav__trigger:hover, .mockup-nav__trigger[aria-expanded="true"],
.mockup-nav__link:hover {
  background: var(--uh-sand);
  color: var(--uh-terracotta);
}
.mockup-nav__trigger:after {
  content: "";
  display: inline-block;
  margin-left: 6px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  padding: 3px;
  transform: rotate(45deg) translateY(-2px);
}

.mockup-nav__panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid var(--uh-line);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(26, 39, 51, 0.14);
  padding: 24px;
  gap: 32px;
  min-width: 480px;
}
li.is-open .mockup-nav__panel { display: flex; }

.mockup-nav__panel-col h3 {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8a95a1;
  margin: 0 0 10px;
}
.mockup-nav__panel-col a {
  display: block;
  color: var(--uh-ink);
  text-decoration: none;
  padding: 6px 0;
  font-size: 0.95rem;
}
.mockup-nav__panel-col a:hover { color: var(--uh-terracotta); }

.mockup-nav__panel-col--feature {
  background: var(--uh-sand);
  border-radius: 10px;
  padding: 18px;
  min-width: 200px;
}
.mockup-nav__panel-col--feature h3 { color: var(--uh-terracotta-dark); }
.mockup-nav__panel-col--feature p { font-size: 0.88rem; color: #5b6b7a; margin: 0 0 12px; }
.mockup-nav__panel-col--feature .btn {
  display: inline-block;
  font-size: 0.85rem;
  padding: 8px 16px;
}

.mockup-nav__actions { display: flex; align-items: center; gap: 12px; }
.mockup-nav__search-toggle, .mockup-nav__mobile-toggle {
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--uh-ink);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  cursor: pointer;
}
.mockup-nav__search-toggle:hover, .mockup-nav__mobile-toggle:hover { background: var(--uh-sand); }
.mockup-nav__portal {
  white-space: nowrap;
  padding: 10px 20px !important;
}
.mockup-nav__mobile-toggle { display: none; }

.mockup-nav__search-bar { display: none; border-top: 1px solid var(--uh-line); }
.mockup-nav__search-bar.is-open { display: block; }
.mockup-nav__search-bar form {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  gap: 8px;
}
.mockup-nav__search-bar input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--uh-line);
  border-radius: 8px;
  font: inherit;
}
.mockup-nav__search-bar button {
  border: none;
  background: var(--uh-terracotta);
  color: #fff;
  border-radius: 8px;
  padding: 0 16px;
  cursor: pointer;
}

@media (max-width: 960px) {
  .mockup-nav__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--uh-line);
    padding: 8px 16px 16px;
  }
  .mockup-nav.is-mobile-open .mockup-nav__menu { display: block; }
  .mockup-nav__menu > ul { flex-direction: column; }
  .mockup-nav__panel {
    display: none !important;
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    flex-direction: column;
    min-width: 0;
    padding: 4px 0 12px 12px;
  }
  li.is-open .mockup-nav__panel { display: flex !important; }
  .mockup-nav__panel-col--feature { display: none; }
  .mockup-nav__mobile-toggle { display: inline-block; }
}

/* ---------- Homepage single-page sections ---------- */

.uh-section {
  padding: 64px 24px;
  max-width: 1280px;
  margin: 0 auto;
}
.uh-section__eyebrow {
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--uh-terracotta);
  margin: 0 0 6px;
}
.uh-section h2 { font-size: 2rem; margin: 0 0 12px; }
.uh-section__lede { max-width: 60ch; color: #5b6b7a; margin: 0 0 32px; font-size: 1.05rem; }

.uh-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.uh-card {
  background: #fff;
  border: 1px solid var(--uh-line);
  border-radius: 14px;
  padding: 24px;
  text-decoration: none;
  color: var(--uh-ink);
  display: block;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.uh-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(26, 39, 51, 0.1);
  color: var(--uh-ink);
}
.uh-card .fa, .uh-card .fas { color: var(--uh-terracotta); font-size: 1.4rem; margin-bottom: 12px; display: block; }
.uh-card h3 { font-size: 1.1rem; margin: 0 0 6px; font-family: 'Inter', sans-serif; font-weight: 700; }
.uh-card p { margin: 0; font-size: 0.9rem; color: #5b6b7a; }

.uh-section--tint { background: var(--uh-sand); }

.uh-cta {
  background: var(--uh-terracotta-dark);
  color: #fff;
  border-radius: 20px;
  padding: 56px 40px;
  text-align: center;
}
.uh-cta h2 { color: #fff; }
.uh-cta p { color: #f0dccf; max-width: 55ch; margin: 0 auto 24px; }
.uh-cta .btn { background: #fff !important; color: var(--uh-terracotta-dark) !important; border-color: #fff !important; font-weight: 700; }

/* Reuse the vendor's own scroll-fade system: elements with .o-scroll-fade
   already animate in via existing site JS; this just applies it to our
   new sections consistently with how the rest of the page already works. */
.uh-section.o-scroll-fade { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.uh-section.o-scroll-fade.is-visible { opacity: 1; transform: none; }

/* ---------- Footer ---------- */

.mockup-footer {
  background: var(--uh-ink);
  color: #cfd6dc;
  margin-top: 40px;
}
.mockup-footer__row {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 24px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
}
.mockup-footer__logo img { height: 40px; filter: brightness(0) invert(1); opacity: 0.9; }
.mockup-footer__links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.mockup-footer__links a { color: #cfd6dc; text-decoration: none; font-size: 0.92rem; }
.mockup-footer__links a:hover { color: #fff; text-decoration: underline; }
.mockup-footer__social { display: flex; gap: 12px; }
.mockup-footer__social a {
  color: #cfd6dc;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mockup-footer__social a:hover { color: #fff; border-color: #fff; }
.mockup-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  text-align: center;
  padding: 16px;
  font-size: 0.82rem;
  color: #8a95a1;
}

/* ---------- Homepage feature carousel ---------- */
/* The vendor's cui-carousel component (.c-home-features, homepage only) is
   a Vue/Flickity widget. Flickity positions its slides with *inline*
   styles (position/transform) once it partially initializes — with no
   real carousel runtime behind it here, that leaves slides overlapping
   instead of just stacking, which plain spacing rules can't fix since
   inline styles win over ordinary CSS. Force every level Flickity might
   touch back into normal block flow (!important beats inline styles),
   then add a border around each picture and a divider between slides so
   the fallback reads as a clean stacked list, not a carousel. */
.c-home-features .flickity-viewport,
.c-home-features .flickity-slider {
  position: static !important;
  height: auto !important;
  width: 100% !important;
  transform: none !important;
}
.c-home-features cui-carousel-slide,
.c-home-features .cui-carousel-slide,
.c-home-features .cui-carousel__slide,
.c-home-features .flickity-viewport > *,
.c-home-features .flickity-slider > * {
  position: static !important;
  display: block !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: 100% !important;
}
.c-home-features__image {
  border: 1px solid var(--uh-line) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
.c-home-features cui-carousel-slide + cui-carousel-slide {
  margin-top: 56px !important;
  padding-top: 56px !important;
  border-top: 1px solid var(--uh-line);
}