/* UN-OHRLLS Portal — Parent Site Color Overrides
   Replaces Tailwind deep blue (#2563EB) with UN palette:
   Primary: #009EDB (UN blue)   Secondary: #4D4D4D (UN gray)
   Dark: #1B2A4A (navy)         Accent: #333333
   Green badges → gray          */

/* ── PRIMARY BUTTONS (solid blue → UN blue) ── */
.bg-blue-500 { background-color: #009EDB !important; }
.bg-blue-600 { background-color: #0088C0 !important; }
.bg-blue-700 { background-color: #0074A4 !important; }
.hover\:bg-blue-600:hover { background-color: #0088C0 !important; }
.hover\:bg-blue-700:hover { background-color: #0074A4 !important; }

/* ── DARK / NAVY SECTIONS ── */
.bg-blue-900 { background-color: #1B2A4A !important; }

/* ── LIGHT BLUE BACKGROUNDS (cards, badges) → subtle gray-blue ── */
.bg-blue-50 { background-color: #f0f4f8 !important; }
.bg-blue-100 { background-color: #e2e8f0 !important; }
.from-blue-50 { --tw-gradient-from: #f0f4f8 !important; }
.from-blue-100 { --tw-gradient-from: #e2e8f0 !important; }
.from-blue-500 { --tw-gradient-from: #009EDB !important; }
.from-blue-600 { --tw-gradient-from: #0088C0 !important; }
.to-blue-100 { --tw-gradient-to: #e2e8f0 !important; }
.to-blue-200 { --tw-gradient-to: #d2dce6 !important; }
.to-blue-600 { --tw-gradient-to: #0088C0 !important; }
.to-blue-700 { --tw-gradient-to: #0074A4 !important; }
.to-blue-900 { --tw-gradient-to: #1B2A4A !important; }

/* ── TEXT COLORS ── */
.text-blue-500 { color: #009EDB !important; }
.text-blue-600 { color: #0088C0 !important; }
.text-blue-700 { color: #0074A4 !important; }
.text-blue-800 { color: #005A7A !important; }
.text-blue-900 { color: #1B2A4A !important; }
.text-blue-100 { color: #e2e8f0 !important; }
.text-blue-200 { color: #c8d6e5 !important; }
.text-blue-300 { color: #7fb8d0 !important; }
.text-blue-400 { color: #4da8c9 !important; }
.hover\:text-blue-600:hover { color: #0088C0 !important; }
.hover\:text-blue-700:hover { color: #0074A4 !important; }
.hover\:text-blue-800:hover { color: #005A7A !important; }

/* ── BORDERS ── */
.border-blue-100 { border-color: #e2e8f0 !important; }
.border-blue-200 { border-color: #d2dce6 !important; }
.border-blue-400 { border-color: #4da8c9 !important; }
.border-blue-500 { border-color: #009EDB !important; }
.border-blue-600 { border-color: #0088C0 !important; }
.hover\:border-blue-500:hover { border-color: #009EDB !important; }

/* ── RING / FOCUS ── */
.ring-blue-500 { --tw-ring-color: #009EDB !important; }
.focus\:ring-blue-500:focus { --tw-ring-color: #009EDB !important; }

/* ── GREEN → GRAY (no green on parent site) ── */
.bg-green-50 { background-color: #f5f5f5 !important; }
.bg-green-100 { background-color: #e8e8e8 !important; }
.bg-green-600 { background-color: #4D4D4D !important; }
.bg-green-700 { background-color: #3d3d3d !important; }
.text-green-400 { color: #6b7280 !important; }
.text-green-500 { color: #4D4D4D !important; }
.text-green-600 { color: #4D4D4D !important; }
.text-green-700 { color: #3d3d3d !important; }
.text-green-800 { color: #333333 !important; }
.text-green-900 { color: #1a1a1a !important; }
.hover\:bg-green-700:hover { background-color: #3d3d3d !important; }

/* ── FOCUS RING GREEN → GRAY ── */
.ring-green-500 { --tw-ring-color: #4D4D4D !important; }
.focus\:ring-green-500:focus { --tw-ring-color: #4D4D4D !important; }

/* ── CARD IMAGE ENHANCEMENTS ── */
.card-img {
  transition: transform 0.3s ease;
}
.bg-white.rounded-2xl:hover .card-img {
  transform: scale(1.03);
}

/* ── BACKGROUND: soften the blue gradient to match parent site ── */
.from-blue-50.to-sky-50,
[class*="from-blue-50"][class*="to-sky-50"] {
  --tw-gradient-from: #f5f7fa !important;
  --tw-gradient-to: #eef1f5 !important;
}

/* ── STEP CIRCLES in "How It Works" ── */
[data-enhanced="1"] {
  background: #009EDB !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
