:root {
  color-scheme: light;
  --blue: #004aad;
  --indigo: #5448ea;
  --gold: #ffbd00;
  --ink: #0f172a;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a,
button {
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.animate-fade-in {
  animation: fadeIn .4s ease-out both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 40;
  width: 100%;
  border-bottom: 1px solid #e8edf5;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 1px 12px rgba(15, 23, 42, .05);
  backdrop-filter: blur(14px);
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
}

.brand-mark {
  display: inline-flex;
  width: 3.6rem;
  height: 3.6rem;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  background: var(--blue);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 74, 173, .24);
  font-size: 2rem;
  font-weight: 1000;
  line-height: 1;
}

.brand-mark-small {
  width: 3.25rem;
  height: 3.25rem;
}

.brand-word {
  color: var(--blue);
  font-size: 1.55rem;
  font-style: italic;
  font-weight: 1000;
  letter-spacing: 0;
  line-height: 1;
}

.brand-word span {
  display: inline-block;
  margin-left: .25rem;
  border-radius: .35rem;
  background: var(--gold);
  color: #fff;
  padding: .2rem .42rem;
  font-size: 1rem;
  transform: skewX(-8deg);
}

.theme-pill {
  display: inline-flex;
  width: 3.6rem;
  height: 3.6rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #f3f6fa;
  color: #64748b;
  font-size: 2rem;
}

.user-pill {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  border: 1px solid #dbe7f4;
  border-radius: 999px;
  background: #f5f9ff;
  color: var(--blue);
  padding: .65rem 1rem;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
}

.user-dot {
  display: inline-flex;
  width: 1.7rem;
  height: 1.7rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: .9rem;
}

.user-menu {
  position: absolute;
  right: 0;
  top: calc(100% + .75rem);
  z-index: 70;
  width: 14rem;
  border: 1px solid #e8edf5;
  border-radius: 1.25rem;
  background: #fff;
  padding: .5rem;
  box-shadow: 0 22px 44px rgba(15, 23, 42, .16);
}

.user-menu a {
  display: block;
  border-radius: .9rem;
  padding: .75rem 1rem;
  color: #475569;
  font-size: .95rem;
  font-weight: 850;
}

.user-menu a:hover {
  background: #f8fafc;
  color: var(--blue);
}

.hero-title {
  font-size: clamp(2.5rem, 5vw, 4.9rem);
  font-weight: 1000;
  letter-spacing: 0;
  line-height: 1.02;
}

.search-shell {
  display: flex;
  max-width: 46rem;
  min-height: 5.8rem;
  align-items: center;
  gap: 1rem;
  border: 1px solid #e6ebf2;
  border-radius: 2rem;
  background: #fff;
  padding: .75rem;
  box-shadow: 0 20px 36px rgba(15, 23, 42, .12);
}

.search-shell input {
  min-width: 0;
  flex: 1;
  padding: 0 1rem;
  color: #0f172a;
  font-size: 1.35rem;
  font-weight: 700;
  outline: none;
}

.search-shell input::placeholder {
  color: #a6afbd;
}

.mic-button,
.ai-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.7rem;
  font-weight: 1000;
}

.mic-button {
  width: 3.6rem;
  height: 3.6rem;
  background: #f2f5fa;
  color: #64748b;
  font-size: 1.5rem;
}

.ai-button {
  min-width: 11.5rem;
  min-height: 4.3rem;
  background: var(--blue);
  color: #fff;
  font-size: 1.15rem;
  letter-spacing: .02em;
}

.category-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e3e8ef;
  border-radius: 999px;
  background: #fff;
  color: #4b5563;
  padding: .95rem 2.2rem;
  font-size: 1.05rem;
  font-weight: 900;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}

.category-pill.active,
.category-pill:hover {
  border-color: transparent;
  background: var(--indigo);
  color: #fff;
  box-shadow: 0 10px 22px rgba(84, 72, 234, .22);
}

.service-card {
  position: relative;
  min-height: 13.5rem;
  overflow: hidden;
  border: 1px solid #edf1f6;
  border-radius: 1.9rem;
  background: #fff;
  padding: 2.1rem;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 32px rgba(15, 23, 42, .09);
}

.service-card .icon-main {
  font-size: 2.55rem;
}

.service-card .icon-ghost {
  position: absolute;
  right: 1.9rem;
  top: 1.3rem;
  font-size: 4.6rem;
  opacity: .08;
  transform: rotate(-10deg);
}

.provider-card {
  overflow: hidden;
  border-radius: 2.2rem;
  background: #fff;
  box-shadow: 0 18px 30px rgba(15, 23, 42, .12);
}

.provider-card-head,
.profile-hero {
  background: linear-gradient(135deg, #6259f2 0%, #923de8 100%);
}

.filter-button,
.segmented-control,
.result-search,
.form-input {
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 1px 5px rgba(15, 23, 42, .03);
}

.form-input {
  width: 100%;
  border-radius: 1.35rem;
  padding: 1.05rem 1.3rem;
  color: #0f172a;
  font-size: 1.05rem;
  font-weight: 650;
  outline: none;
}

.form-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, .12);
}

.form-label {
  color: #9ca3af;
  font-size: .78rem;
  font-weight: 1000;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.provider-section {
  border: 1px solid #eef2f7;
  border-radius: 2rem;
  background: #f8fafc;
  padding: 2.6rem;
}

.app-footer {
  margin-top: 5rem;
  background: #0f172a;
  color: #fff;
}

.footer-heading {
  color: var(--gold);
  font-size: .95rem;
  font-weight: 1000;
  letter-spacing: .35em;
  text-transform: uppercase;
}

.social-square {
  display: inline-flex;
  width: 3.7rem;
  height: 3.7rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .04);
  color: #fff;
  font-size: .9rem;
  font-weight: 1000;
}

.chat-fab {
  position: fixed;
  right: 2rem;
  bottom: 1.6rem;
  z-index: 60;
  display: inline-flex;
  width: 5.5rem;
  height: 5.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--indigo);
  color: #fff;
  box-shadow: 0 22px 45px rgba(84, 72, 234, .38);
}

.chat-badge {
  position: absolute;
  right: -.2rem;
  top: -.2rem;
  display: inline-flex;
  width: 1.85rem;
  height: 1.85rem;
  align-items: center;
  justify-content: center;
  border: 3px solid #fff;
  border-radius: 999px;
  background: #f43f5e;
  font-size: .9rem;
  font-weight: 1000;
}

.chat-badge.hidden {
  display: none;
}

.chat-icon {
  font-size: 2.2rem;
  transform: rotate(90deg);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, .78);
  padding: 2rem;
}

.modal-backdrop.is-open {
  display: flex;
}

.profile-modal {
  max-height: 90vh;
  width: min(72rem, 100%);
  overflow: auto;
  border-radius: 2.8rem;
  background: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
}

html.dark {
  color-scheme: dark;
  --ink: #f8fafc;
}

html.dark body {
  background: #0b1120;
  color: #e5edf7;
}

html.dark .app-header {
  border-color: #1e293b;
  background: rgba(15, 23, 42, .86);
  box-shadow: 0 1px 18px rgba(0, 0, 0, .35);
}

html.dark [data-mobile-menu] {
  border-color: #1e293b;
  background: #0f172a;
}

html.dark .brand-word,
html.dark .app-header a,
html.dark .user-pill {
  color: #e5edf7;
}

html.dark .theme-pill {
  background: #1e293b;
  color: #fbbf24;
}

html.dark .user-pill {
  border-color: #334155;
  background: #111c2f;
  box-shadow: none;
}

html.dark .search-shell,
html.dark .category-pill,
html.dark .service-card,
html.dark .provider-card,
html.dark .filter-button,
html.dark .segmented-control,
html.dark .result-search,
html.dark .form-input,
html.dark .provider-section,
html.dark .profile-modal,
html.dark .user-menu,
html.dark .bg-white {
  border-color: #243449;
  background: #111c2f;
  color: #e5edf7;
  box-shadow: 0 18px 36px rgba(0, 0, 0, .28);
}

html.dark .bg-slate-50,
html.dark .provider-section {
  background: #0f172a;
}

html.dark .search-shell input,
html.dark .result-search input,
html.dark .form-input {
  color: #f8fafc;
}

html.dark .search-shell input::placeholder,
html.dark .result-search input::placeholder,
html.dark .form-input::placeholder {
  color: #718096;
}

html.dark .mic-button {
  background: #1e293b;
  color: #94a3b8;
}

html.dark .category-pill {
  color: #cbd5e1;
}

html.dark .category-pill.active,
html.dark .category-pill:hover {
  background: var(--indigo);
  color: #fff;
}

html.dark .service-card .icon-ghost {
  opacity: .14;
}

html.dark .profile-modal aside,
html.dark .profile-modal .bg-white {
  background: #111c2f;
}

html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-gray-100,
html.dark .border-indigo-200 {
  border-color: #243449;
}

/* Brand-blue text (#004AAD) is only 2.2:1 on the dark background; this lighter blue is 7:1. */
html.dark .text-lsers-blue {
  color: #60a5fa;
}

html.dark .text-slate-950,
html.dark .text-slate-900,
html.dark .text-gray-900,
html.dark .text-slate-800 {
  color: #f8fafc;
}

html.dark .text-slate-700,
html.dark .text-slate-600,
html.dark .text-gray-600,
html.dark .text-gray-500 {
  color: #cbd5e1;
}

html.dark .text-slate-500,
html.dark .text-slate-400,
html.dark .text-gray-400 {
  color: #94a3b8;
}

html.dark .bg-indigo-50,
html.dark .bg-emerald-50,
html.dark .bg-purple-50,
html.dark .bg-rose-50 {
  background: #172033;
}

html.dark .bg-indigo-100 {
  background: rgba(79, 70, 229, .18);
}

/* Neutral badges and pills: their text colour is lightened above, so the background must darken too. */
html.dark .bg-slate-100,
html.dark .bg-slate-200 {
  background: #1e293b;
}

html.dark .user-menu a {
  color: #cbd5e1;
}

html.dark .user-menu a:hover {
  background: #172033;
  color: #93c5fd;
}

@media (max-width: 768px) {
  .brand-mark {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: .8rem;
    font-size: 1.55rem;
  }

  .brand-word {
    font-size: 1.1rem;
  }

  .search-shell {
    min-height: auto;
    flex-wrap: wrap;
    border-radius: 1.5rem;
  }

  .search-shell input {
    flex-basis: 100%;
    padding: 1rem;
    font-size: 1rem;
  }

  .ai-button {
    flex: 1;
    min-width: auto;
  }

  .provider-section {
    padding: 1.4rem;
  }

  .chat-fab {
    right: 1rem;
    width: 4.6rem;
    height: 4.6rem;
  }
}

/* ---------------------------------------------------------------------------
 * Accessible contrast (WCAG AA, 4.5:1 for normal text, 3:1 for large text).
 * Each rule moves a colour to the nearest accessible shade of the same hue; the
 * layout and the colour scheme stay the same. Found by the site-wide audit in
 * FINAL_QA_REPORT.md.
 * ------------------------------------------------------------------------- */

/* Light theme: small grey labels and hints were 2.3–4.3:1. */
html:not(.dark) .text-slate-300,
html:not(.dark) .text-slate-400 {
  color: #5f6b7f; /* between slate-500 and -600: 4.9:1 even on light tinted boxes */
}
html:not(.dark) .text-slate-500 {
  color: #475569; /* slate-600 */
}
/* ...except in the footer, which is dark in both themes: keep its original light grey (7:1 there). */
html:not(.dark) .app-footer .text-slate-400 {
  color: #94a3b8;
}
html:not(.dark) .text-amber-500 {
  color: #b45309; /* amber-700 ("New" rating label) */
}
html:not(.dark) .text-emerald-600 {
  color: #047857; /* emerald-700 ("available") */
}
html:not(.dark) .text-rose-600 {
  color: #be123c; /* rose-700 (report links) */
}

/* Both themes: white text on green buttons was 2.5–3.8:1. */
html .bg-emerald-500,
html .bg-emerald-600 {
  background-color: #047857; /* emerald-700, 5.5:1 with white */
}
html .bg-green-600 {
  background-color: #15803d; /* green-700, 5.0:1 with white */
}

/* Dark theme: coloured text kept its light-theme shade on the dark background (2.7–3.6:1). */
html.dark .text-indigo-600,
html.dark .text-indigo-700 {
  color: #a5b4fc; /* indigo-300 */
}
html.dark .text-rose-600,
html.dark .text-rose-700 {
  color: #fda4af; /* rose-300 */
}
html.dark .text-emerald-600,
html.dark .text-emerald-700 {
  color: #6ee7b7; /* emerald-300 */
}
html.dark .text-amber-700 {
  color: #fcd34d; /* amber-300 */
}
/* Amber notice boxes stay light in the dark theme, so their text keeps a dark shade. */
html.dark .bg-amber-50 .text-amber-700,
html.dark .bg-amber-50.text-amber-700,
html.dark .bg-amber-100 .text-amber-700,
html.dark .bg-amber-100.text-amber-700 {
  color: #92400e; /* amber-800 */
}
/* The chat "Report this conversation" panel kept a light pink background in the dark theme. */
html.dark .bg-rose-50\/60 {
  background: #172033;
}
/* Admin chat view: provider message boxes stay light blue in the dark theme, so their label keeps a dark grey. */
html.dark .bg-blue-50 .text-slate-400 {
  color: #475569; /* slate-600 */
}
/* Provider profile header (purple gradient in both themes): the category line was white at 85%
 * (about 4.1:1) and the availability pill white on a white tint (about 3.5:1). */
.profile-hero .text-white\/85 {
  color: #fff; /* 5.0:1 on the gradient */
}
.profile-hero .bg-white\/20 {
  background-color: rgba(2, 6, 23, .2); /* dark tint instead of a light one: 6.8:1 */
}

/* Logo uploaded in Admin > Settings, shown in place of the "L" mark. */
.brand-mark.has-logo {
  overflow: hidden;
  background: #fff;
}
.brand-mark.has-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}