/********** Safari Strives - Logo-Inspired Color Scheme **********/
/* Colors extracted from Safari Strives logo */
/* Green gradient from logo: #4F7C4F (dark) to #90C840 (light) */

:root {
  /* Primary Color - Dark Green from logo (for text, navbar, buttons) */
  --bs-primary: #4F7C4F;
  --bs-primary-rgb: 79, 124, 79;
  
  /* Secondary Color - Light Green from logo (for backgrounds) */
  --bs-secondary: #90C840;
  --bs-secondary-rgb: 144, 200, 64;
  
  /* Accent Color - Red from logo heart (#E04040) or Orange/Gold */
  --bs-accent: #E04040;
  --bs-accent-rgb: 224, 64, 64;
  
  /* Logo gradient colors */
  --logo-green-dark: #4F7C4F;
  --logo-green-light: #90C840;
  --logo-red: #E04040;
  
  /* Neutral colors */
  --bs-dark: #1a1a1a;
  --bs-light: #f8f9fa;
  --bs-white: #ffffff;
  --bs-gray: #6c757d;
}

/* Override Bootstrap primary color */
.bg-primary {
  background-color: var(--bs-primary) !important;
}

.text-primary {
  color: var(--bs-primary) !important;
}

.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: var(--bs-white);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  opacity: 0.9;
}

/* Override Bootstrap secondary color */
.bg-secondary {
  background-color: var(--bs-secondary) !important;
}

.text-secondary {
  color: var(--bs-secondary) !important;
}

.btn-secondary {
  background-color: var(--bs-secondary);
  border-color: var(--bs-primary);
  color: var(--bs-primary);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background-color: var(--bs-light);
  border-color: var(--bs-primary);
  color: var(--bs-primary);
}

/* Accent color for highlights and CTAs */
.bg-accent {
  background-color: var(--bs-accent) !important;
}

.text-accent {
  color: var(--bs-accent) !important;
}

.btn-accent {
  background-color: var(--bs-accent);
  border-color: var(--bs-accent);
  color: var(--bs-dark);
}

.btn-accent:hover,
.btn-accent:focus,
.btn-accent:active {
  background-color: var(--bs-accent);
  border-color: var(--bs-accent);
  color: var(--bs-dark);
  opacity: 0.9;
}

/* Section titles with logo colors */
.section-title {
  color: var(--logo-green-dark);
}

.section-title::before {
  background-color: var(--logo-green-light);
}

/* Donation progress bars - use accent color minimally */
.donation-item .progress-bar {
  background-color: var(--bs-accent) !important;
}

/* Footer adjustments - use same background as hero section */
.footer {
  background: url(/img/bg.jpg) center center no-repeat !important;
  background-size: cover !important;
}

/* Page header background - use same background as hero section */
.page-header {
  background: url(/img/bg.jpg) center center no-repeat !important;
  background-size: cover !important;
}

/* Ensure page header text is readable */
.page-header h1 {
  color: var(--bs-dark) !important;
}

.page-header .breadcrumb-item,
.page-header .breadcrumb-item a {
  color: var(--bs-dark) !important;
}

.page-header .breadcrumb-item.active {
  color: var(--bs-primary) !important;
}

/* Donate section background - use logo green gradient */
.donate {
  background: linear-gradient(135deg, var(--logo-green-dark) 0%, var(--logo-green-light) 100%) !important;
}

/* Section title styling */
.section-title {
  position: relative;
  display: inline-block;
  padding: 0 15px;
}

.section-title::before {
  position: absolute;
  content: "";
  width: 45px;
  height: 2px;
  top: 50%;
  left: 0;
  margin-top: -1px;
  background-color: var(--bs-accent);
}

.section-title::after {
  position: absolute;
  content: "";
  width: 45px;
  height: 2px;
  top: 50%;
  right: 0;
  margin-top: -1px;
  background-color: var(--bs-accent);
}

/* Topbar and Navbar adjustments - white background */
.top-bar {
  background-color: var(--bs-white) !important;
  border-bottom: 1px solid #e9ecef;
}

.navbar.bg-primary {
  background-color: var(--bs-white) !important;
  border-bottom: 1px solid #e9ecef;
}


/* Video section background - use logo green gradient (blur green) */
.container-fluid.bg-primary {
  background: linear-gradient(135deg, var(--logo-green-dark) 0%, var(--logo-green-light) 100%) !important;
}

/* Donate form background */
.donate-form.bg-primary {
  background-color: var(--bs-primary) !important;
}

/* Newsletter section */
.container-fluid.bg-primary.py-5 {
  background-color: var(--bs-primary) !important;
}

/* Links and hover states */
a:hover {
  color: var(--bs-accent);
}

.btn-link:hover {
  color: var(--logo-red) !important;
}

/* Active navigation links */
.nav-link.active {
  color: var(--bs-accent) !important;
}

/* Navbar links hover - red color */
.navbar .nav-link:hover {
  color: var(--logo-red) !important;
}

/* Footer links hover - red color */
.footer .btn-link:hover {
  color: var(--logo-red) !important;
}

.footer a:hover {
  color: var(--logo-red) !important;
}

/* Carousel buttons and highlights */
.btn-primary:focus,
.btn-primary:active {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-accent-rgb), 0.5);
}