@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
/* ========================================
   MODAL STYLES
======================================== */
.modal-content {
  border-radius: 1rem;
  border: 2px solid var(--accent);
}
.modal-header {
  background-color: var(--accent);
  color: #fff;
  border-bottom: none;
  border-radius: 1rem 1rem 0 0;
}
.modal-title {
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
}
.modal-body {
  background-color: var(--light-bg);
  color: var(--dark-text);
  border-radius: 0 0 1rem 1rem;
}
.btn-close {
  filter: invert(1) grayscale(1) brightness(2);
}

/* ========================================
   CSS CUSTOM PROPERTIES (VARIABLES)
======================================== */
:root {
  /* Typography */
  --font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-heading: "Georgia", "Times New Roman", serif;

  /* Color Palette */
  --light-text: #8e9e92; /* Forest green */
  --dark-text: #414d4a; /* Charcoal */
  --light-bg: #f5f3ec; /* Cream */
  --dark-bg: #d6d2ca; /* Light beige */
  --light-highlight: #bfd6c3; /* Mint green */
  --dark-highlight: #a0b79e; /* Sage green */
  --accent: #daa88a; /* Terracotta */
}

/* ========================================
   BASE STYLES
======================================== */
body {
  background-color: var(--light-bg);
  color: var(--dark-text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
}

/* ========================================
   CONTACT FORM INPUTS
======================================== */
#contact-form input,
#contact-form textarea {
  background-color: var(--light-bg);
  border: 2px solid var(--accent);
  color: var(--dark-text);
  border-radius: 0.375rem;
  font-family: var(--font-body);
}
#contact-form input:focus,
#contact-form textarea:focus {
  outline: none;
  border-color: var(--dark-highlight);
  box-shadow: 0 0 0 0.2rem rgba(160, 183, 158, 0.15);
}

/* ========================================
   TYPOGRAPHY
======================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
}

/* ========================================
   NAVIGATION
======================================== */
.navbar {
  background-color: var(--light-bg);
  border-bottom: 1px solid var(--dark-bg);
}

.navbar-brand span {
  font-family: var(--font-heading);
  color: var(--dark-text);
}

.navbar-brand:hover span {
  color: var(--dark-highlight);
}

.nav-link {
  color: var(--dark-text);
  font-weight: 500;
}

.nav-link:hover {
  color: var(--light-text);
}

.nav-link.active {
  color: var(--dark-highlight);
}

/* ========================================
   BUTTONS
======================================== */
.btn-primary {
  background-color: var(--accent);
  border-color: var(--accent);
  color: white;
}

.btn-primary:hover {
  background-color: var(--dark-highlight);
  border-color: var(--dark-highlight);
}

.btn-outline-primary {
  border-color: var(--accent);
  color: var(--charcoal-brown);
  border-width: 2px;
}

.btn-outline-primary:hover {
  background-color: var(--dark-highlight);
  border-color: var(--dark-highlight);
}
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

.btn-outline-light:hover {
  background-color: var(--light-highlight);
  border-color: var(--light-highlight);
  color: var(--dark-text);
}

/* Custom CTA Button */
.btn-cta {
  background-color: var(--accent);
  border-color: var(--accent);
  color: white;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 8px rgba(218, 168, 138, 0.3);
  transition: all 0.3s ease;
}

.btn-cta:hover {
  background-color: var(--charcoal-brown);
  border-color: var(--charcoal-brown);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(96, 77, 68, 0.4);
}

.btn-cta:focus {
  background-color: var(--charcoal-brown);
  border-color: var(--charcoal-brown);
  color: white;
  box-shadow: 0 0 0 0.2rem rgba(218, 168, 138, 0.5);
}

/* ========================================
   HERO SECTION
======================================== */
.hero-section {
  min-height: 70vh;
  background-image: url("../images/hero-bg-min.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-overlay {
  background: rgba(65, 77, 74, 0.6); /* Using dark-text color with opacity */
}

/* ========================================
   AWARENESS SECTION
======================================== */
.awareness-section img {
  width: 100%;
  max-width: 500px;
  height: auto;
}
/* Crisis Resources Box */
.crisis-resources-box {
  background-color: var(--accent);
  color: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(218, 168, 138, 0.3);
  max-width: 350px;
}

.crisis-resources-box strong {
  font-weight: 600;
}

.crisis-resources-box h5 {
  color: white;
  font-weight: 700;
}

.crisis-resources-box a {
  color: white;
  font-weight: 500;
}

.crisis-resources-box a:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* Resource Logo Sizing - More efficient with auto height */
.resource-logo {
  width: 220px;
  height: auto;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 767.98px) {
  .resource-logo {
    width: 180px;
  }
}

@media (max-width: 575.98px) {
  .resource-logo {
    width: 160px;
  }
}

/* ========================================
   UTILITY CLASSES
======================================== */
.bg-light {
  background-color: var(--light-bg);
}
.bg-dark {
  background-color: var(--dark-bg);
}
.text-light {
  color: var(--light-text);
}
.text-dark {
  color: var(--dark-text);
}
.text-highlight-light {
  color: var(--light-highlight);
}
.text-highlight-dark {
  color: var(--dark-highlight);
}
.text-accent {
  color: var(--accent);
}
.border-dark {
  border-color: var(--dark-bg);
}
.bg-highlight-light {
  background-color: var(--light-highlight);
}
.bg-highlight-dark {
  background-color: var(--dark-highlight);
}

/* ========================================
   RESPONSIVE STYLES
======================================== */
@media (max-width: 768px) {
  /* Awareness Section Mobile Styles */
  .awareness-section h2 {
    font-size: 1.5rem;
    line-height: 1.3;
  }

  .awareness-section .lead {
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 1.5rem;
  }
}