/* ============================================================
   Formium Alliance – Brand Colour Override
   Forces red (#ff3131) as the primary brand colour site-wide,
   overriding any cached / stale purple (#864FFE) in main.css.
   Must be loaded AFTER /assets/main.css on every page.
   ============================================================ */

/* 1. Re-declare every CSS variable the theme uses */
:root,
:host {
  --color-primary-50:  #fff0f0 !important;
  --color-primary-100: #ffe0e0 !important;
  --color-primary-200: #ffbfbf !important;
  --color-primary-300: #ff8080 !important;
  --color-primary-400: #ff3131 !important;
  --color-primary-500: #ff3131 !important;
  --color-primary-600: #e02020 !important;
  --color-primary-700: #c41515 !important;
  --color-primary-800: #9a0f0f !important;
  --color-primary-900: #700a0a !important;
  --color-gradient-1:  linear-gradient(135deg, #ff3131 0%, #ffc2ad 100%) !important;
}

/* 2. Kill any compiled-in purple hex values that Tailwind baked directly
      into utility classes (e.g. bg-primary-500\/10 -> #864ffe1a).
      We target every pattern the theme generates. */

/* Solid backgrounds */
[class*="bg-primary-500"]:not([class*="\/"])  { background-color: #ff3131 !important; }
[class*="bg-primary-600"]:not([class*="\/"])  { background-color: #e02020 !important; }
[class*="bg-primary-700"]:not([class*="\/"])  { background-color: #c41515 !important; }
[class*="bg-primary-400"]:not([class*="\/"])  { background-color: #ff3131 !important; }

/* Semi-transparent tints */
[class*="bg-primary-500\/10"]  { background-color: #ff31311a !important; }
[class*="bg-primary-500\/20"]  { background-color: #ff313133 !important; }
[class*="bg-primary-500\/30"]  { background-color: #ff31314d !important; }
[class*="bg-primary-500\/50"]  { background-color: #ff313180 !important; }

/* Text colours */
[class*="text-primary-500"] { color: #ff3131 !important; }
[class*="text-primary-600"] { color: #e02020 !important; }
[class*="text-primary-400"] { color: #ff3131 !important; }

/* Border colours */
[class*="border-primary-500"] { border-color: #ff3131 !important; }
[class*="border-primary-600"] { border-color: #e02020 !important; }

/* Ring / outline */
[class*="ring-primary-500"]        { --tw-ring-color: #ff3131 !important; }
[class*="focus\:ring-primary-500"] { --tw-ring-color: #ff31314d !important; }

/* Fill (SVG) */
[class*="fill-primary-500"]      { fill: #ff3131 !important; }
[class*="fill-\[#864FFE\]"]      { fill: #ff3131 !important; }
[class*="fill-\[#864ffe\]"]      { fill: #ff3131 !important; }

/* Stroke (SVG) */
[class*="stroke-primary-500"]    { stroke: #ff3131 !important; }

/* Hover variants */
[class*="hover\:bg-primary-500"]:hover  { background-color: #ff3131 !important; }
[class*="hover\:bg-primary-600"]:hover  { background-color: #e02020 !important; }
[class*="hover\:bg-primary-700"]:hover  { background-color: #c41515 !important; }
[class*="hover\:text-primary-500"]:hover { color: #ff3131 !important; }
[class*="hover\:text-primary-600"]:hover { color: #e02020 !important; }
[class*="hover\:border-primary-500"]:hover { border-color: #ff3131 !important; }

/* Group-hover variants */
[class*="group-hover\:bg-primary-500"]:is(:where(.group):hover *) { background-color: #ff3131 !important; }
[class*="group-hover\:bg-primary-500\/10"]:is(:where(.group):hover *) { background-color: #ff31311a !important; }

/* Dark mode overrides */
[class*="dark\:bg-primary-500"]:where(.dark, .dark *) { background-color: #ff3131 !important; }
[class*="dark\:border-primary-500"]:where(.dark, .dark *) { border-color: #ff3131 !important; }

/* 3. Hardcoded Tailwind colour classes that render purple/indigo/violet
      — replace entire CTA sections and decorative gradients */

/* Indigo → red */
.bg-indigo-50   { background-color: #fff0f0 !important; }
.bg-indigo-100  { background-color: #ffe0e0 !important; }
.bg-indigo-500  { background-color: #ff3131 !important; }
.bg-indigo-600  { background-color: #e02020 !important; }
.bg-indigo-700  { background-color: #c41515 !important; }
.text-indigo-600 { color: #e02020 !important; }
.text-indigo-800 { color: #9a0f0f !important; }
.border-indigo-600 { border-color: #e02020 !important; }

/* Purple → red */
.bg-purple-50   { background-color: #fff0f0 !important; }
.bg-purple-100  { background-color: #ffe0e0 !important; }
.bg-purple-500  { background-color: #ff3131 !important; }
.bg-purple-600  { background-color: #e02020 !important; }
.bg-purple-700  { background-color: #c41515 !important; }
.bg-purple-900  { background-color: #700a0a !important; }
.text-purple-200 { color: #ffbfbf !important; }
.text-purple-800 { color: #9a0f0f !important; }
.border-purple-600 { border-color: #e02020 !important; }

/* Violet → red */
.bg-violet-500  { background-color: #ff3131 !important; }
.bg-violet-600  { background-color: #e02020 !important; }
.text-violet-600 { color: #e02020 !important; }

/* 4. Gradient CTA sections */
.from-blue-600.to-indigo-600,
.from-indigo-600.to-purple-600,
.from-purple-600.to-indigo-600,
[class*="from-blue-"][class*="to-indigo-"],
[class*="from-indigo-"][class*="to-purple-"],
[class*="from-purple-"][class*="to-indigo-"] {
  background-image: linear-gradient(to right, #ff3131, #c41515) !important;
}

/* Direct class combos used in this project */
.bg-gradient-to-r.from-blue-600 { --tw-gradient-from: #ff3131 !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.to-indigo-600 { --tw-gradient-to: #c41515 !important; }

/* 5. btn-primary component — catches the "View case studies" header button
      and any other .btn-primary elements */
.btn-primary,
.btn-primary:where(.dark, .dark *) {
  background-color: #ff3131 !important;
  border-color: #e02020 !important;
  color: #ffffff !important;
}
.btn-primary:hover {
  background-color: #c41515 !important;
  border-color: #c41515 !important;
}

/* 6. Subscribe button (footer) — explicit override in case CSS vars fail */
button.bg-primary-600,
button[class*="bg-primary-6"] {
  background-color: #e02020 !important;
}
button.hover\:bg-primary-700:hover,
button[class*="hover:bg-primary-7"]:hover {
  background-color: #c41515 !important;
}

/* 7. Tap highlight (mobile) */
* {
  -webkit-tap-highlight-color: rgba(255, 49, 49, 0.15) !important;
}

/* 8. Focus ring */
:focus-visible {
  outline-color: #ff3131 !important;
}

/* 9. Hide top announcement bar (cyan strip) */
.top-nav,
[accesskey="top-cyan-nav"],
div.bg-ns-cyan {
  display: none !important;
}

/* 10. Since top-nav is gone, navbar no longer needs top-14 offset */
.has-top-nav {
  top: 1.25rem !important;
}