/* FINAL TEMPLATE OVERRIDE - Load this last to override all Bootstrap styles */

/* Force Template colors and fonts everywhere */
body,
html,
* {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  line-height: 1.6 !important;
}

/* Restore correct font for Font Awesome 6 icons (prevent universal override from breaking icons) */
.fa-solid,
.fas { /* FA6/FA5 solid */
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}

.fa-regular,
.far { /* FA6/FA5 regular */
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 400 !important;
}

.fa-brands,
.fab { /* FA6/FA5 brands */
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}

/* Template color variables */
:root {
  --primary: #306bac !important;
  --primary-hover: #2558a0 !important;
  --light-blue: #98b9f2 !important;
  --purple-blue: #918ef4 !important;
  --dark-navy: #141b41 !important;
  --blue-50: #eff6ff !important;
  --indigo-50: #eef2ff !important;
  --blue-100: #dbeafe !important;
  --gray-50: #f9fafb !important;
  --gray-100: #f3f4f6 !important;
  --gray-600: #4b5563 !important;
  --gray-700: #374151 !important;
  --gray-900: #111827 !important;
}

/* Override ALL Bootstrap text color utilities */
.text-success,
.text-success *,
h1.text-success,
.h1.text-success,
h1.h1.text-success {
  color: var(--primary) !important;
}

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

.text-dark,
.text-dark * {
  color: var(--dark-navy) !important;
}

/* Override ALL Bootstrap button styles */
.btn-success,
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.btn-success:not(:disabled):not(.disabled),
.btn-success:not(:disabled):not(.disabled):hover,
.btn-success:not(:disabled):not(.disabled):focus,
.btn-success:not(:disabled):not(.disabled):active,
.btn.btn-success,
.btn.btn-success:hover,
.btn.btn-success:focus,
.btn.btn-success:active,
a.btn-success,
a.btn-success:hover,
a.btn-success:focus,
a.btn-success:active {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: white !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 500 !important;
  border-radius: 0.375rem !important;
  transition: all 0.2s !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn.btn-success:hover,
a.btn-success:hover {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: white !important;
  box-shadow: 0 0 0 0.2rem rgba(48, 107, 172, 0.25) !important;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled),
.btn-primary:not(:disabled):not(.disabled):hover,
.btn-primary:not(:disabled):not(.disabled):focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn.btn-primary,
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
a.btn-primary,
a.btn-primary:hover,
a.btn-primary:focus,
a.btn-primary:active {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: white !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 500 !important;
  border-radius: 0.375rem !important;
  transition: all 0.2s !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn.btn-primary:hover,
a.btn-primary:hover {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: white !important;
  box-shadow: 0 0 0 0.2rem rgba(48, 107, 172, 0.25) !important;
}

.btn-lg,
.btn-large {
  padding: 0.75rem 2rem !important;
  font-size: 1rem !important;
}

/* Narrower hero primary button */
.hero .btn-large {
  padding: 0.6rem 1.25rem !important; /* reduce horizontal padding */
  font-size: 0.95rem !important;
}

/* Override Bootstrap background utilities */
.bg-light,
.bg-light *,
section.bg-light {
  background: linear-gradient(135deg, var(--blue-50) 0%, var(--indigo-50) 100%) !important;
}

/* Force Template body background */
body,
#page-wrapper {
  background: linear-gradient(135deg, var(--blue-50) 0%, var(--indigo-50) 100%) !important;
  min-height: 100vh !important;
}

/* Override ALL heading styles */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.hero-title {
  color: var(--gray-900) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: bold !important;
}

/* Template hero section styling */
.hero,
section.hero,
.full-height-hero {
  position: relative !important;
  padding: 3rem 0 !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, var(--blue-50) 0%, var(--indigo-50) 100%) !important;
}

@media (min-width: 768px) {
  .hero,
  section.hero,
  .full-height-hero {
    padding: 5rem 0 !important;
  }
}

.hero-content {
  display: grid !important;
  gap: 2rem !important;
  align-items: center !important;
}

@media (min-width: 1024px) {
  .hero-content {
    grid-template-columns: 1fr 1fr !important;
    gap: 3rem !important;
  }
}

.hero-title {
  font-size: 1.875rem !important;
  font-weight: bold !important;
  line-height: 1.2 !important;
  margin-bottom: 1.5rem !important;
}

@media (min-width: 768px) {
  .hero-title {
    font-size: 2.5rem !important;
  }
}

@media (min-width: 1024px) {
  .hero-title {
    font-size: 3rem !important;
  }
}

.hero-description {
  font-size: 1rem !important;
  color: var(--gray-600) !important;
  line-height: 1.7 !important;
  margin-bottom: 1.5rem !important;
}

@media (min-width: 768px) {
  .hero-description {
    font-size: 1.125rem !important;
  }
}

/* Override Bootstrap container */
.container,
.container-fluid {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
}

/* Template card styles */
.card {
  border: 1px solid var(--blue-100) !important;
  border-radius: 0.5rem !important;
  background: white !important;
  transition: box-shadow 0.2s !important;
}

.card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}