
/*
  CANOPUS STATIC MIGRATION FIXES v2
  - Restores Tailwind arbitrary colour utilities lost in the static migration
  - Restores hero/background gradients
  - Improves dark-section contrast
  - Makes main content full-width with minimal side padding
*/

/* ---- Core arbitrary text colours ---- */
[class~="text-[#1D2938]"] { color: #1D2938 !important; }
[class~="text-[#334E6D]"] { color: #334E6D !important; }
[class~="text-[#405064]"] { color: #405064 !important; }
[class~="text-[#4B7B5E]"] { color: #4B7B5E !important; }
[class~="text-[#6BAA80]"] { color: #6BAA80 !important; }
[class~="text-[#76859E]"] { color: #76859E !important; }
[class~="text-[#88AABF]"] { color: #88AABF !important; }
[class~="text-[#935E78]"] { color: #935E78 !important; }
[class~="text-[#BB829B]"] { color: #BB829B !important; }
[class~="text-[#DCE2E8]"] { color: #DCE2E8 !important; }
[class~="text-[#E8A8B0]"] { color: #E8A8B0 !important; }
[class~="text-[#F4F7FA]"] { color: #F4F7FA !important; }
[class~="text-[#E8A8B0]/40"] { color: rgb(232 168 176 / 0.40) !important; }

/* ---- Core arbitrary backgrounds ---- */
[class~="bg-[#131B26]"] { background-color: #131B26 !important; }
[class~="bg-[#283E57]"] { background-color: #283E57 !important; }
[class~="bg-[#334E6D]"] { background-color: #334E6D !important; }
[class~="bg-[#4B7B5E]"] { background-color: #4B7B5E !important; }
[class~="bg-[#76859E]"] { background-color: #76859E !important; }
[class~="bg-[#88AABF]"] { background-color: #88AABF !important; }
[class~="bg-[#935E78]"] { background-color: #935E78 !important; }
[class~="bg-[#BB829B]"] { background-color: #BB829B !important; }
[class~="bg-[#DCE2E8]"] { background-color: #DCE2E8 !important; }
[class~="bg-[#E8A8B0]"] { background-color: #E8A8B0 !important; }
[class~="bg-[#EEF1F5]"] { background-color: #EEF1F5 !important; }
[class~="bg-[#F4F7FA]"] { background-color: #F4F7FA !important; }
[class~="bg-[#F8F6F7]"] { background-color: #F8F6F7 !important; }

[class~="bg-[#334E6D]/5"] { background-color: rgb(51 78 109 / 0.05) !important; }
[class~="bg-[#334E6D]/10"] { background-color: rgb(51 78 109 / 0.10) !important; }
[class~="bg-[#4B7B5E]/10"] { background-color: rgb(75 123 94 / 0.10) !important; }
[class~="bg-[#76859E]/20"] { background-color: rgb(118 133 158 / 0.20) !important; }
[class~="bg-[#88AABF]/20"] { background-color: rgb(136 170 191 / 0.20) !important; }
[class~="bg-[#935E78]/10"] { background-color: rgb(147 94 120 / 0.10) !important; }
[class~="bg-[#BB829B]/15"] { background-color: rgb(187 130 155 / 0.15) !important; }
[class~="bg-[#BB829B]/20"] { background-color: rgb(187 130 155 / 0.20) !important; }
[class~="bg-[#E8A8B0]/20"] { background-color: rgb(232 168 176 / 0.20) !important; }
[class~="bg-[#F8F6F7]/95"] { background-color: rgb(248 246 247 / 0.95) !important; }

/* ---- Borders ---- */
[class~="border-[#334E6D]"] { border-color: #334E6D !important; }
[class~="border-[#405064]"] { border-color: #405064 !important; }
[class~="border-[#76859E]"] { border-color: #76859E !important; }
[class~="border-[#88AABF]"] { border-color: #88AABF !important; }
[class~="border-[#935E78]"] { border-color: #935E78 !important; }
[class~="border-[#BB829B]"] { border-color: #BB829B !important; }
[class~="border-[#DCE2E8]"] { border-color: #DCE2E8 !important; }
[class~="border-[#E8A8B0]"] { border-color: #E8A8B0 !important; }

[class~="border-[#334E6D]/20"] { border-color: rgb(51 78 109 / 0.20) !important; }
[class~="border-[#76859E]/40"] { border-color: rgb(118 133 158 / 0.40) !important; }
[class~="border-[#88AABF]/40"] { border-color: rgb(136 170 191 / 0.40) !important; }
[class~="border-[#BB829B]/40"] { border-color: rgb(187 130 155 / 0.40) !important; }
[class~="border-[#DCE2E8]/20"] { border-color: rgb(220 226 232 / 0.20) !important; }
[class~="border-[#DCE2E8]/30"] { border-color: rgb(220 226 232 / 0.30) !important; }
[class~="border-[#E8A8B0]/50"] { border-color: rgb(232 168 176 / 0.50) !important; }

/* ---- Fills / rings ---- */
[class~="fill-[#6BAA80]"] { fill: #6BAA80 !important; }
[class~="fill-[#BB829B]"] { fill: #BB829B !important; }
[class~="ring-[#334E6D]"] { --tw-ring-color: #334E6D !important; }

/* ---- Hover / group hover ---- */
[class~="hover:bg-[#3E684E]"]:hover { background-color: #3E684E !important; }
[class~="hover:bg-[#EEF1F5]"]:hover { background-color: #EEF1F5 !important; }
[class~="hover:text-[#334E6D]"]:hover { color: #334E6D !important; }
[class~="hover:text-[#935E78]"]:hover { color: #935E78 !important; }
[class~="hover:text-[#E8A8B0]"]:hover { color: #E8A8B0 !important; }
.group:hover [class~="group-hover:bg-[#935E78]"] { background-color: #935E78 !important; }

/* ---- Selection ---- */
[class~="selection:bg-[#BB829B]"]::selection { background: #BB829B; color: white; }

/* ---- Arbitrary sizes lost during static conversion ---- */
[class~="text-[10px]"] { font-size: 10px !important; }
[class~="text-[11px]"] { font-size: 11px !important; }
[class~="leading-[1.15]"] { line-height: 1.15 !important; }
[class~="min-h-[220px]"] { min-height: 220px !important; }

@media (min-width: 1024px) {
  [class~="lg:h-[480px]"] { height: 480px !important; }
}

/* ---- Restore the exact gradients used by the original Canopus build ---- */
[class~="bg-gradient-to-b"][class~="from-[#F8F6F7]"][class~="via-[#F4F7FA]"][class~="to-[#EAF1F5]"] {
  background-image: linear-gradient(to bottom, #F8F6F7 0%, #F4F7FA 52%, #EAF1F5 100%) !important;
}

[class~="bg-gradient-to-r"][class~="from-[#334E6D]"][class~="via-[#935E78]"][class~="to-[#BB829B]"] {
  background-image: linear-gradient(to right, #334E6D 0%, #935E78 52%, #BB829B 100%) !important;
}

[class~="bg-gradient-to-t"][class~="from-[#131B26]"][class~="via-[#131B26]/20"][class~="to-transparent"] {
  background-image: linear-gradient(to top, #131B26 0%, rgb(19 27 38 / 0.20) 52%, transparent 100%) !important;
}

[class~="bg-gradient-to-r"][class~="from-[#334E6D]"][class~="via-transparent"][class~="to-transparent"] {
  background-image: linear-gradient(to right, #334E6D 0%, transparent 72%, transparent 100%) !important;
}

/* Hero gradient text must remain visible even if Tailwind gradient variables are unavailable. */
[class~="bg-gradient-to-r"][class~="from-[#334E6D]"][class~="via-[#935E78]"][class~="to-[#BB829B]"][class~="bg-clip-text"] {
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ---- Full width presentation: only the outer page shells, not buttons/cards ---- */
header > div.w-full,
main > section > div.w-full,
footer > div.w-full {
  width: 100% !important;
  max-width: none !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

@media (min-width: 640px) {
  header > div.w-full,
  main > section > div.w-full,
  footer > div.w-full {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* Remove the old 80rem cap where it is used as an outer section shell. */
header [class~="max-w-7xl"],
main > section > [class~="max-w-7xl"] {
  max-width: none !important;
}

/* ---- Contrast enhancement on navy/dark surfaces ----
   Keeps Canopus branding while making small text genuinely readable.
*/
[class~="bg-[#334E6D]"] [class~="text-[#88AABF]"],
[class~="bg-[#283E57]"] [class~="text-[#88AABF]"] {
  color: #DCE8F0 !important;
}
[class~="bg-[#334E6D]"] [class~="text-[#76859E]"],
[class~="bg-[#283E57]"] [class~="text-[#76859E]"] {
  color: #C8D5E0 !important;
}
[class~="bg-[#334E6D]"] [class~="text-[#6BAA80]"],
[class~="bg-[#283E57]"] [class~="text-[#6BAA80]"] {
  color: #A9D7B9 !important;
}
[class~="bg-[#334E6D]"] [class~="text-[#E8A8B0]"],
[class~="bg-[#283E57]"] [class~="text-[#E8A8B0]"] {
  color: #F2C4CA !important;
}

/* Header and card surfaces: strong readable foregrounds */
header {
  color: #1D2938;
}
footer {
  color: #FFFFFF;
}

/* Keyboard focus visibility */
button:focus-visible,
a:focus-visible {
  outline: 3px solid rgb(187 130 155 / 0.55);
  outline-offset: 3px;
}

/* V4 true-static runtime helpers */
#mobile-menu.hidden{display:none}
[data-addon-id]:focus-visible{outline:3px solid rgb(187 130 155 / .45);outline-offset:2px}
@media (min-width:768px){#mobile-menu{display:none!important}}
