/* Shona Miah Diagnostic Center — custom styles (extends Tailwind) */
:root {
  --brand: #0e63b6;
  --brand-dark: #0a3d62;
  --teal: #0e9f9c;
  --ink: #0f2740;
}
html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; color: #334155; }
h1, h2, h3, h4, .font-heading { font-family: 'Poppins', 'Inter', sans-serif; }

/* Focus visibility for keyboard users */
:focus-visible { outline: 3px solid #0e9f9c; outline-offset: 2px; border-radius: 4px; }

/* Sticky header shadow on scroll */
#siteHeader.scrolled { box-shadow: 0 6px 24px rgba(10, 61, 98, .12); }
#siteHeader.scrolled .header-inner { padding-top: .55rem; padding-bottom: .55rem; }
.header-inner { transition: padding .25s ease; }

/* Nav link underline */
.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 3px; width: 0%;
  background: var(--teal); border-radius: 999px; transition: width .25s ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.nav-link.active { color: var(--brand); }

/* Cards */
.card-hover { transition: transform .25s ease, box-shadow .25s ease; }
.card-hover:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(10, 61, 98, .14); }
.icon-tile { transition: transform .25s ease, background .25s ease; }
.group:hover .icon-tile { transform: scale(1.06) rotate(-3deg); }

/* Hero decorative blobs */
.hero-blob { position: absolute; border-radius: 9999px; filter: blur(60px); opacity: .35; pointer-events: none; }

/* Section eyebrow */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand); background: #e8f2fc; border: 1px solid #cfe4f8;
  padding: .35rem .85rem; border-radius: 999px;
}

/* Buttons */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--brand); color: #fff; font-weight: 600;
  padding: .85rem 1.75rem; border-radius: .9rem;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 10px 24px rgba(14, 99, 182, .28);
}
.btn-primary:hover { background: #0a4f93; transform: translateY(-2px); }
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: 2px solid var(--brand); color: var(--brand); font-weight: 600;
  padding: .8rem 1.6rem; border-radius: .9rem; background: #fff;
  transition: all .2s ease;
}
.btn-outline:hover { background: #eef5fd; transform: translateY(-2px); }

/* FAQ */
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-answer > div { overflow: hidden; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform .3s ease; }

/* Back to top */
#backToTop { opacity: 0; pointer-events: none; transform: translateY(12px); transition: all .3s ease; }
#backToTop.show { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* Form */
.field-error { border-color: #dc2626 !important; }
.error-text { color: #dc2626; font-size: .8rem; margin-top: .3rem; }

/* Marquee-free trust strip */
.trust-dot { width: 8px; height: 8px; border-radius: 999px; background: #22c55e; box-shadow: 0 0 0 5px rgba(34,197,94,.15); }

/* Map frame */
.map-frame iframe { width: 100%; height: 100%; border: 0; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}