/* =========================================================
   RCM Billing Solutions — custom styles (complements Tailwind CDN)
   ========================================================= */

:root {
  --navy: #0A2E55;
  --brand: #0B5394;
  --brand-light: #1466b0;
  --teal: #14B8A6;
  --pale: #EAF4FB;
  --ink: #0F172A;
  --slate2: #475569;
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; color: var(--ink); background: #ffffff; }

/* reserves the header's exact height before JS replaces this placeholder — prevents layout shift */
#site-header-mount { display: block; min-height: 73px; }
h1,h2,h3,h4,.font-display { font-family: 'Plus Jakarta Sans','Inter',sans-serif; }

/* ---------- Medical background motifs ---------- */

/* faint plus/cross grid */
.bg-cross {
  background-color: #f8fafc;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%230B5394' stroke-width='1.2' stroke-opacity='0.08'%3E%3Cpath d='M30 22v16M22 30h16'/%3E%3C/g%3E%3C/svg%3E");
}

/* soft mesh blobs */
.mesh {
  position: relative;
  overflow: hidden;
}
.mesh::before,
.mesh::after {
  content: "";
  position: absolute;
  border-radius: 9999px;
  filter: blur(60px);
  opacity: .35;
  z-index: 0;
  pointer-events: none;
}
.mesh::before { width: 420px; height: 420px; background: #14B8A6; top: -140px; right: -120px; }
.mesh::after  { width: 460px; height: 460px; background: #0B5394; bottom: -180px; left: -140px; opacity:.28; }
.mesh > * { position: relative; z-index: 1; }

/* hero gradient overlay over a medical photo */
.hero-overlay {
  background:
    linear-gradient(115deg, rgba(10,46,85,.94) 0%, rgba(11,83,148,.86) 45%, rgba(20,184,166,.55) 100%);
}

/* branded gradient used as guaranteed image fallback */
.img-fallback {
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(20,184,166,.45), transparent 55%),
    linear-gradient(135deg, #0A2E55 0%, #0B5394 55%, #1466b0 100%);
  position: relative;
}
.img-fallback::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-opacity='0.18' stroke-width='2' d='M0 20h28l6-12 8 24 6-12h10l5-8 6 16 5-8h35'/%3E%3C/svg%3E");
  background-repeat: repeat;
  opacity: .5;
}

/* ---------- EKG / heartbeat animated line ---------- */
.ekg path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: ekg-draw 4s ease-in-out infinite;
}
@keyframes ekg-draw {
  0%   { stroke-dashoffset: 1000; opacity: .2; }
  40%  { opacity: .9; }
  100% { stroke-dashoffset: 0; opacity: .2; }
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  .ekg path { animation: none; stroke-dashoffset: 0; }
}

/* ---------- Icon chips ---------- */
.icon-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--pale); color: var(--brand);
  flex: none;
}
.icon-chip svg { width: 26px; height: 26px; }
.icon-chip.teal { background: rgba(20,184,166,.12); color: #0f766e; }
.icon-chip.lg { width: 64px; height: 64px; border-radius: 18px; }
.icon-chip.lg svg { width: 32px; height: 32px; }

/* ---------- Cards ---------- */
.card-hover { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card-hover:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -18px rgba(11,83,148,.35); }

/* ---------- Navbar ---------- */
.nav-link { position: relative; }
.nav-link.active { color: var(--brand); font-weight: 600; }
.nav-link.active::after {
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background: var(--teal); border-radius: 2px;
}
.dropdown-panel { box-shadow: 0 24px 50px -20px rgba(15,23,42,.35); }

/* mobile menu */
#mobile-menu { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
#mobile-menu.open { max-height: 85vh; overflow-y: auto; }

/* ---------- Accordion ----------
   The height is driven by an inline max-height set from initAccordion() using
   scrollHeight — the CSS transition on max-height was left stuck at
   currentTime:0 in some Chrome versions and never progressed, which pinned
   every FAQ closed. The icon transition still works fine. */
.faq-body { max-height: 0; overflow: hidden; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform .3s ease; }

/* ---------- Testimonials slider ---------- */
.t-track { display: flex; transition: transform .5s ease; }
.t-slide { min-width: 100%; }

/* ---------- Stat counter ---------- */
.stat-num { font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:.5rem; font-weight:600; border-radius:9999px; transition: all .2s ease; }
.btn-primary { background: var(--brand); color:#fff; }
.btn-primary:hover { background: var(--navy); box-shadow: 0 12px 24px -10px rgba(11,83,148,.6); }
.btn-accent { background: var(--teal); color:#053b35; }
.btn-accent:hover { background:#0fb5a8; box-shadow: 0 12px 24px -10px rgba(20,184,166,.6); }
.btn-outline { border:1.5px solid rgba(255,255,255,.7); color:#fff; }
.btn-outline:hover { background: rgba(255,255,255,.12); }
.btn-ghost { border:1.5px solid #cbd5e1; color: var(--ink); background:#fff; }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }

/* ---------- Back to top ---------- */
#to-top { opacity:0; visibility:hidden; transition: all .3s ease; }
#to-top.show { opacity:1; visibility:visible; }

/* ---------- Forms ---------- */
.field { width:100%; border:1.5px solid #d8e2ec; border-radius:12px; padding:.75rem 1rem; transition: border-color .2s, box-shadow .2s; background:#fff; }
.field:focus { outline:none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(11,83,148,.12); }
.field.invalid { border-color:#dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
.field-error { color:#dc2626; font-size:.8rem; margin-top:.25rem; display:none; }
.field-error.show { display:block; }

/* prose for blog posts */
.prose-post p { margin: 0 0 1.1rem; line-height: 1.8; color: #334155; }
.prose-post h2 { font-size: 1.5rem; font-weight: 700; margin: 2rem 0 .9rem; color: var(--navy); }
.prose-post ul { margin: 0 0 1.2rem 1.1rem; list-style: disc; color:#334155; }
.prose-post li { margin-bottom: .5rem; line-height: 1.7; }
.prose-post blockquote { border-left: 4px solid var(--teal); padding: .4rem 1.2rem; margin: 1.4rem 0; color: var(--navy); font-style: italic; background: var(--pale); border-radius: 0 12px 12px 0; }

/* logo cloud */
.logo-pill { font-weight: 800; letter-spacing:-.02em; color:#64748b; font-family:'Plus Jakarta Sans',sans-serif; }

/* ---------- US coverage map ---------- */
/* the map's text labels are sized in SVG viewBox units, so below ~700px
   rendered width they'd shrink past legible — instead of letting that happen,
   the map holds a minimum width and the wrapper scrolls horizontally on narrow screens */
.usmap-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.usmap-svg { width: 100%; min-width: 700px; height: auto; display: block; }
.usmap-state { fill: rgba(11,83,148,.16); stroke: #ffffff; stroke-width: 1.5; transition: fill .2s ease; }
.usmap-state-item { cursor: pointer; }
.usmap-state-item:hover .usmap-state,
.usmap-state-item:focus-visible .usmap-state { fill: #14B8A6; }
.usmap-state-item:focus-visible { outline: none; }
.usmap-state-item:focus-visible .usmap-state { stroke: #0A2E55; stroke-width: 2.5; }
.usmap-label { font-family: 'Inter', system-ui, sans-serif; font-size: 10px; font-weight: 700; fill: #0A2E55; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.usmap-state-item:hover .usmap-label,
.usmap-state-item:focus-visible .usmap-label { fill: #ffffff; }
.usmap-leader { stroke: #94a3b8; stroke-width: .75; pointer-events: none; }
.usmap-leader-dot { fill: #0A2E55; pointer-events: none; }
.usmap-label-callout { font-size: 8.5px; text-anchor: start; dominant-baseline: middle; }
.usmap-state-item:hover .usmap-label-callout,
.usmap-state-item:focus-visible .usmap-label-callout { fill: #0A2E55; }
.usmap-state-item:hover .usmap-leader,
.usmap-state-item:focus-visible .usmap-leader { stroke: #14B8A6; stroke-width: 1.25; }

/* utility */
.maxw { max-width: 1440px; }