/* ==========================================================================
   ASSIST Screening Online — brand colour overrides

   PURPOSE: a single place to change colours (text, links, buttons, borders,
   icons) across the whole site. To change a colour everywhere, edit the two
   --brand-purple-* variables below — nothing else needs to change, and no
   other file needs to be touched or re-run for the change to take effect.

   Brand colours were sampled directly from the logo file
   assets/AssistScreeningOnline.png:
     --brand-purple-light (#a2238e) — the magenta used for the "ASSIST" wordmark
     --brand-purple-dark  (#552e8c) — the indigo-purple used for "Screening Online"

   HOW THIS FILE REACHES EVERY PAGE: every page on the site is built from one
   of five shared header partials (templates/header.gohtml for the top-level
   landing page, and templates/{dcs01,practitioners,self-screen,mmed01}/header.gohtml
   for each pathway). This stylesheet is linked once at the end of the <head>
   in each of those five files, so every page under every pathway picks it up
   automatically — a new page added later needs no changes here.

   WHY EVERYTHING BELOW USES !important: colours today are hardcoded in two
   ways scattered across ~50+ individual page templates rather than in one
   place — (1) a duplicated inline <style> block (h4/h5/h7 { color: #0098db })
   copy-pasted into every one of the five header files above, and (2) one-off
   style="color: #0098db" attributes on individual headings in many page
   templates (e.g. templates/practitioners/login.gohtml,
   templates/practitioners/register.gohtml). Those are not being removed as
   part of this change. An inline style="" attribute normally beats any
   external stylesheet rule no matter where it's loaded, so !important is
   the only way for this one file to reliably win over all of that existing
   (and any future) inline styling, on every page, without having to hunt
   down and edit each template individually.
   ========================================================================== */

:root {
  --brand-purple-light: #a2238e; /* logo "ASSIST" magenta — used for text/links */
  --brand-purple-dark: #552e8c; /* logo "Screening Online" indigo — used for solid backgrounds */

  /* Re-point Bootstrap 5's own theme variables so any Bootstrap component
     not explicitly targeted below (form focus rings, spinners, etc.) still
     comes out purple instead of Bootstrap's default blue (#0d6efd). */
  --bs-primary: var(--brand-purple-dark);
  --bs-primary-rgb: 85, 46, 140;
  --bs-link-color: var(--brand-purple-dark);
  --bs-link-color-rgb: 85, 46, 140;
  --bs-link-hover-color: var(--brand-purple-light);
  --bs-link-hover-color-rgb: 162, 35, 142;
}

/* ---- Headings -------------------------------------------------------
   Was hardcoded light blue (#0098db) via the duplicated inline <style>
   block in every header.gohtml, and via one-off style="color: #0098db"
   attributes on individual page headings. The attribute selectors below
   catch the latter regardless of which page it's on.

   A second, darker hardcoded blue (#003c69) also shows up as
   style="color: #003c69" on various section headings across many page
   templates (e.g. "Welcome to ASSIST Online Survey", "DATA AND CONSENT",
   question titles) — a different hex value the original #0098db-only
   pass missed. Matched here too so every hardcoded heading colour
   actually becomes purple, not just the one that was first spotted.

   Two forms of that same colour are matched, not just one: on pages
   with no JavaScript touching the element, the browser reflects the
   style attribute exactly as the server sent it (hex, "#0098db"). But
   on JS-enhanced pages (e.g. practitioners/edit-profile, which mounts a
   small Vue app on that form), the moment JS touches the element's
   style property the browser rewrites the *whole* style attribute into
   its own normalized rgb() form — "#0098db" becomes "rgb(0, 152, 219)"
   — even if JS never touched the colour itself. Matching only the hex
   string silently stopped working the instant that happened, so both
   forms are listed here to stay correct whether or not JS has touched
   the element.

   h2 and h3 are matched too, not just h4/h5/h7: several standalone pages
   (e.g. practitioners/summary.gohtml, practitioners/feedbackAdult.gohtml)
   carry their own local <style> block that colours the plain h2 or h3 tag
   directly (no inline style attribute involved at all), rather than
   following the shared header.gohtml's h4/h5/h7 convention. Missed on the
   first pass since it's a third, structurally different way the same
   light-blue colour was being applied. -------------------------------- */
h2,
h3,
h4,
h5,
h7,
[style*="0098db"],
[style*="rgb(0, 152, 219)"],
[style*="rgb(0,152,219)"],
[style*="003c69"],
[style*="rgb(0, 60, 105)"],
[style*="rgb(0,60,105)"] {
  color: var(--brand-purple-dark) !important;
}

/* ---- Links --------------------------------------------------------------
   :not(.btn) excludes anchors styled as buttons (e.g. the landing page's
   <a class="btn btn-primary">Practitioner's Screening</a>). Those need to
   keep Bootstrap's own button text colour (white by default, via
   --bs-btn-color below) — otherwise this rule would force their text to
   the same dark purple as the .btn-primary background right underneath
   it, making the label invisible. ------------------------------------- */
a:not(.btn) {
  color: var(--brand-purple-dark) !important;
}
a:not(.btn):hover,
a:not(.btn):focus {
  color: var(--brand-purple-light) !important;
}

/* ---- Bootstrap "primary" buttons/badges/text/backgrounds --------------
   Used across nearly every page for the main call-to-action buttons
   (Login, Register, Continue, Next, Submit, etc.) via Bootstrap's
   .btn-primary / .btn-outline-primary / .text-primary / .bg-primary /
   .border-primary classes. Bootstrap 5.2's default primary is blue
   (#0d6efd); this repoints it to the brand purples. Solid backgrounds use
   the dark purple (for contrast with white button text); plain coloured
   text (.text-primary) uses the light purple — headings use the dark
   purple instead (per client direction), so the two are deliberately
   different shades now, not matching each other. Swap which variable
   each rule uses below if that should change. ---------------------------- */
.btn-primary {
  --bs-btn-bg: var(--brand-purple-dark) !important;
  --bs-btn-border-color: var(--brand-purple-dark) !important;
  --bs-btn-hover-bg: var(--brand-purple-light) !important;
  --bs-btn-hover-border-color: var(--brand-purple-light) !important;
  --bs-btn-active-bg: var(--brand-purple-light) !important;
  --bs-btn-active-border-color: var(--brand-purple-light) !important;
  --bs-btn-disabled-bg: var(--brand-purple-dark) !important;
  --bs-btn-disabled-border-color: var(--brand-purple-dark) !important;
}
.btn-outline-primary {
  --bs-btn-color: var(--brand-purple-dark) !important;
  --bs-btn-border-color: var(--brand-purple-dark) !important;
  --bs-btn-hover-bg: var(--brand-purple-dark) !important;
  --bs-btn-hover-border-color: var(--brand-purple-dark) !important;
  --bs-btn-active-bg: var(--brand-purple-dark) !important;
  --bs-btn-active-border-color: var(--brand-purple-dark) !important;
}
.text-primary {
  color: var(--brand-purple-light) !important;
}
.bg-primary {
  background-color: var(--brand-purple-dark) !important;
}
.border-primary {
  border-color: var(--brand-purple-dark) !important;
}

/* ---- Feedback report table shading --------------------------------------
   The feedback report table (practitioners/feedbackAdult.gohtml and its
   equivalent on every other pathway, plus the feedback email template)
   marks its per-substance header row with Bootstrap's .table-primary and
   its "associated harms" sub-header row with .table-info — both blue by
   Bootstrap default. Repointed to the two brand purples: the row people
   read first (.table-primary) gets the bold dark purple with white text
   for contrast, the secondary row (.table-info) gets a lighter purple
   tint with dark text, so the two stay visually distinct from each other
   the same way they were before (a stronger colour vs. a softer one). --- */
.table-primary {
  /* All four covered, not just --bs-table-bg: the parent table also has
     .table-striped, which paints odd rows via --bs-table-striped-bg using
     an inset box-shadow that visually sits on top of a plain
     background-color. Whichever row lands on an odd position needs this
     variable overridden too, or Bootstrap's original blue striping still
     shows through underneath. --bs-table-active-bg/hover-bg covered for
     the same reason, in case a row is ever clicked/hovered. */
  --bs-table-bg: var(--brand-purple-dark) !important;
  --bs-table-striped-bg: var(--brand-purple-dark) !important;
  --bs-table-active-bg: var(--brand-purple-dark) !important;
  --bs-table-hover-bg: var(--brand-purple-dark) !important;
  --bs-table-border-color: var(--brand-purple-dark) !important;
  --bs-table-color: #fff !important;
  --bs-table-striped-color: #fff !important;
}
.table-primary th,
.table-primary td {
  color: #fff !important;
}
.table-info {
  --bs-table-bg: #eee3f6 !important;
  --bs-table-striped-bg: #eee3f6 !important;
  --bs-table-active-bg: #eee3f6 !important;
  --bs-table-hover-bg: #eee3f6 !important;
  --bs-table-border-color: #d9c2ea !important;
  --bs-table-color: var(--brand-purple-dark) !important;
  --bs-table-striped-color: var(--brand-purple-dark) !important;
}
.table-info th,
.table-info td {
  color: var(--brand-purple-dark) !important;
}

/* ---- Note on images ----------------------------------------------------
   This file can only change CSS-driven colour (text, backgrounds, borders,
   and icon fonts like Bootstrap Icons, which inherit `color`). It cannot
   recolour raster image assets (the .png/.jpg files under assets/) — a
   differently-coloured image needs a new image file, not a CSS change.
   ------------------------------------------------------------------------ */