/* Custom Royal Blue and Gold Color Scheme Overrides */

:root {
  --royal-blue: #1e3a8a;
  --royal-blue-dark: #1e40af;
  --royal-blue-darker: #1e293b;
  --royal-blue-light: #3b82f6;
  --gold: #ffd700;
  --gold-dark: #daa520;
  --gold-light: #ffed4e;
  --gold-orange: #ffa500;
}

/* Body and Background */
body {
  background-color: var(--royal-blue-darker) !important;
}

/* Header/Navbar */
header,
.bg-gray-900,
.bg-gray-900\/95 {
  background-color: rgba(30, 58, 138, 0.95) !important;
  background: rgba(30, 58, 138, 0.95) !important;
}

/* Replace orange colors with gold */
.text-orange-400,
.text-orange-300 {
  color: var(--gold) !important;
}

.bg-orange-400,
.bg-orange-500,
.bg-orange-600 {
  background-color: var(--gold) !important;
}

.from-orange-400,
.from-orange-500,
.from-orange-600,
.to-orange-400,
.to-orange-500,
.to-orange-600 {
  --tw-gradient-from: #ffd700 !important;
  --tw-gradient-to: #daa520 !important;
}

.border-orange-400,
.border-orange-500,
.border-orange-600,
.border-orange-800\/30 {
  border-color: var(--gold) !important;
}

.bg-orange-600\/20,
.bg-orange-600\/80,
.bg-orange-500\/20,
.bg-orange-500\/30 {
  background-color: rgba(255, 215, 0, 0.2) !important;
}

.from-orange-600\/20,
.from-orange-600\/30,
.from-orange-500\/20 {
  --tw-gradient-from: rgba(255, 215, 0, 0.2) !important;
}

.to-orange-600\/20 {
  --tw-gradient-to: rgba(255, 215, 0, 0.2) !important;
}

.hover\:text-orange-400:hover,
.hover\:text-orange-300:hover {
  color: var(--gold-light) !important;
}

.hover\:border-orange-400:hover,
.hover\:border-orange-500:hover {
  border-color: var(--gold-light) !important;
}

.hover\:bg-orange-600:hover,
.hover\:from-orange-600:hover {
  background-color: var(--gold-dark) !important;
  --tw-gradient-from: var(--gold-dark) !important;
}

/* Replace red accents with darker gold */
.to-red-400,
.to-red-500,
.to-red-600,
.bg-red-500 {
  color: var(--gold-dark) !important;
  background-color: var(--gold-dark) !important;
  --tw-gradient-to: var(--gold-dark) !important;
}

.hover\:to-red-600:hover {
  --tw-gradient-to: var(--gold-orange) !important;
}

.to-red-600\/20,
.to-red-600\/30 {
  --tw-gradient-to: rgba(255, 215, 0, 0.2) !important;
}

/* Gradients */
.bg-gradient-to-r.from-orange-500.to-red-500,
.bg-gradient-to-r.from-orange-600.to-red-600 {
  background: linear-gradient(to right, var(--gold), var(--gold-dark)) !important;
}

.bg-gradient-to-br.from-gray-900.via-orange-900.to-red-900 {
  background: linear-gradient(to bottom right, var(--royal-blue-darker), var(--royal-blue), var(--royal-blue-dark)) !important;
}

/* Background colors */
.bg-gray-800,
.bg-gray-800\/50 {
  background-color: var(--royal-blue) !important;
}

.bg-gray-900 {
  background-color: var(--royal-blue-darker) !important;
}

.bg-gray-900\/50 {
  background-color: rgba(30, 41, 59, 0.5) !important;
}

/* Text gradients */
.bg-clip-text.bg-gradient-to-r.from-orange-400.to-red-400 {
  background: linear-gradient(to right, var(--gold), var(--gold-light)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Logo styling */
.logo-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-container img {
  height: 50px;
  width: auto;
}

/* Button gradients */
button.bg-gradient-to-r,
.bg-gradient-to-r.from-orange-500.to-red-500 {
  background: linear-gradient(to right, var(--gold), var(--gold-dark)) !important;
}

button.bg-gradient-to-r:hover,
.hover\:from-orange-600:hover.hover\:to-red-600:hover {
  background: linear-gradient(to right, var(--gold-light), var(--gold-orange)) !important;
}

/* Focus rings */
.focus\:ring-orange-500:focus {
  --tw-ring-color: var(--gold) !important;
}

/* Accent colors for stats and highlights */
.text-transparent.bg-clip-text.bg-gradient-to-r {
  background: linear-gradient(to right, var(--gold), var(--gold-light)) !important;
}

/* Animated orbs/blobs - change to blue/gold */
.bg-orange-500.rounded-full,
.bg-red-500.rounded-full,
.bg-yellow-500.rounded-full {
  background-color: rgba(255, 215, 0, 0.2) !important;
}

/* Cards and borders */
.border-gray-700:hover,
.hover\:border-orange-500:hover {
  border-color: var(--gold) !important;
}

/* Footer */
footer.bg-gray-900 {
  background-color: var(--royal-blue-darker) !important;
}

/* Form elements */
input:focus,
select:focus,
textarea:focus {
  border-color: var(--gold) !important;
  --tw-ring-color: var(--gold) !important;
}

/* Links and navigation */
a:hover,
button:hover {
  color: var(--gold) !important;
}

/* Service icons and highlights */
.text-orange-400 {
  color: var(--gold) !important;
}

/* Logo specific styling */
.host-logo-img {
  height: 50px !important;
  width: auto !important;
  max-height: 50px !important;
  transition: transform 0.3s ease !important;
  filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3)) !important;
}

.host-logo-img:hover {
  transform: scale(1.05) !important;
  filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.5)) !important;
}

/* Header logo container */
header .flex.items-center div:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Ensure logo displays properly in header */
header img.host-logo-img {
  display: block !important;
  flex-shrink: 0 !important;
}

/* Scrollbar styling (optional enhancement) */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--royal-blue-darker);
}

::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gold-light);
}

/* Additional enhancements for better visual consistency */
.min-h-screen {
  background: linear-gradient(to bottom, var(--royal-blue-darker), var(--royal-blue)) !important;
}

/* Smooth transitions for color changes */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* Enhanced button hover effects */
button:hover,
a:hover {
  transition: all 0.3s ease !important;
}