@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

:root {
  /* Hispanic-inspired palette */
  --bs-primary: #D62828;    /* Rich red */
  --bs-secondary: #F77F00;  /* Vibrant orange */
  --bs-dark: #c4e9fd;       /* Deep blue */
  --bs-light: #EAE2B7;      /* Warm cream */
  --bs-white: #FFFFFF;
  --bs-body-color: #303030;
  --bs-font-sans-serif: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Base styling */
body {
  font-family: var(--bs-font-sans-serif);
  color: var(--bs-body-color);
  background-color: var(--bs-white);
}

/* Navbar customization */
.navbar {
  background-color: var(--bs-dark) !important;
}
.navbar-brand,
.navbar-nav .nav-link {
  color: var(--bs-white) !important;
  font-weight: 700;
}
.navbar-brand:hover,
.navbar-nav .nav-link:hover {
  color: var(--bs-secondary) !important;
}

/* Button styles */
.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  font-weight: 700;
}
.btn-primary:hover {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
  color: var(--bs-dark);
}

/* Background helpers */
.bg-light {
  background-color: var(--bs-light) !important;
}
.bg-white {
  background-color: var(--bs-white) !important;
}
.bg-dark, .footer-bg {
  background-color: var(--bs-dark) !important;
}

/* Header & hero sections */
header {
  background-image: url('../images/hispanic-pattern.svg'); /* optional subtle pattern */
  background-size: cover;
  color: var(--bs-white);
}
header .lead,
header h1 {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}

/* Footer styling */
footer {
  background-color: var(--bs-dark) !important;
  color: var(--bs-white);
}
footer a {
  color: var(--bs-white) !important;
  text-decoration: none;
}
footer a:hover {
  color: var(--bs-secondary) !important;
}

/* Utility overrides */
.text-light {
  color: var(--bs-white) !important;
}
.text-dark {
  color: var(--bs-dark) !important;
}


/* --- Forced Matte Text Fix for Mobile Display --- */
body,
.card,
.card h1,
.card p,
.card a,
.card footer,
.card .btn {
  color: #1a1a1a !important;
}

.card .btn {
  background-color: #007a88 !important;
  color: #ffffff !important;
  font-weight: 600;
}

.card .btn:hover {
  background-color: #005b66 !important;
}

footer,
footer.small {
  color: #2a2a2a !important;
}