/* Recalibrate brand overlay for the Health Portals: purple + blue headers,
   outlines and highlights. Loaded after each portal's own <style> block.
   Clinical evidence colours (green/amber/red) are intentionally untouched. */

:root {
  --cyan: #2563eb;
  --blue: #4d8df7;
  --purple: #7c3aed;
  --pink: #7c3aed;
  --accent: #7c3aed;
  --border: rgba(99, 72, 214, 0.18);
  --bg2: #fbfaff;
  --bg3: #f4f2ff;
}

/* Header — solid brand purple bar */
nav {
  background: linear-gradient(90deg, #2e1065 0%, #4c1d95 45%, #5b21b6 100%) !important;
  border-bottom: 1px solid rgba(167, 139, 250, 0.28) !important;
  box-shadow: 0 8px 28px -22px rgba(46, 16, 101, 0.9);
  backdrop-filter: none !important;
}
nav .bn { color: #ffffff !important; }
nav .bs { color: rgba(233, 213, 255, 0.72) !important; }
nav .nl { color: rgba(233, 213, 255, 0.82) !important; }
.nl:hover { color: #ffffff !important; background: rgba(255, 255, 255, 0.12) !important; }
/* The "All Portals" / "Website" links carry inline styles, so override hard. */
nav > a,
nav a[href="/portals/"],
nav a[href^="https://recalibratepain.com"] {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}
nav > a:hover,
nav a[href="/portals/"]:hover,
nav a[href^="https://recalibratepain.com"]:hover { background: rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; }
.pill {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}
.pill:hover { background: rgba(255, 255, 255, 0.26) !important; }

/* Hero */
.hbadge {
  background: rgba(124, 58, 237, 0.08) !important;
  border-color: rgba(124, 58, 237, 0.2) !important;
  color: #6d28d9 !important;
}
.hs { border-color: rgba(99, 72, 214, 0.16); }
.sbar { border-color: rgba(99, 72, 214, 0.16); background: linear-gradient(180deg, #faf8ff, #f4f7ff); }
.st { border-right-color: rgba(99, 72, 214, 0.14); }

/* Section headers + outlines */
.sd {
  background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.14);
}
.st2 { color: #1e1b4b; }
.ss { color: rgba(76, 29, 149, 0.62); }
.stag.ts {
  background: rgba(124, 58, 237, 0.08) !important;
  border-color: rgba(124, 58, 237, 0.2) !important;
  color: #6d28d9 !important;
}
.card {
  border-color: rgba(99, 72, 214, 0.16) !important;
  box-shadow: 0 1px 2px rgba(76, 29, 149, 0.05);
}
.og { background: rgba(99, 72, 214, 0.14); }
.diag {
  background: linear-gradient(180deg, #f8f6ff, #f1f6ff) !important;
  border: 1px solid rgba(99, 72, 214, 0.14);
}
.dtitle { color: rgba(76, 29, 149, 0.7); }

/* Highlights, chips and interactive states */
.mc, .evB {
  background: rgba(37, 99, 235, 0.09) !important;
  border-color: rgba(37, 99, 235, 0.2) !important;
  color: #1d4ed8 !important;
}
.evC {
  background: rgba(124, 58, 237, 0.1) !important;
  border-color: rgba(124, 58, 237, 0.22) !important;
  color: #6d28d9 !important;
}
.csi-o:hover { border-color: #7c3aed !important; color: #6d28d9 !important; }
.csi-o.sel {
  background: rgba(124, 58, 237, 0.12) !important;
  border-color: #7c3aed !important;
  color: #6d28d9 !important;
}
.txr:hover { background: rgba(124, 58, 237, 0.04) !important; }
a { color: #4338ca; }
a:hover { color: #6d28d9; }