/* ============================================================
   BytesWell Brand Styles — Deep Forest Green Identity
   Custom properties file. Edit here to update brand site-wide.
   ============================================================ */

/* ---------- Color Tokens ---------- */
:root {
  --forest-darkest: #0D2818;   /* Navbar, footer, hero core */
  --forest-dark:    #1B4332;   /* Primary buttons, card accents, headings */
  --forest-primary: #2D6A4F;   /* Button hover, secondary elements */
  --forest-mid:     #40916C;   /* Body links, decorative lines */
  --forest-light:   #52B788;   /* Link hover, highlight glow */
  --forest-fresh:   #74C69D;   /* Accent dividers on dark backgrounds */
  --forest-tint:    #F0F7F4;   /* About section background */
  --forest-border:  #D8EDE3;   /* Subtle dividers, card edges */
}

/* ---------- Utility Backgrounds ---------- */
.bg-forest-darkest { background-color: var(--forest-darkest) !important; }
.bg-forest-dark    { background-color: var(--forest-dark)    !important; }
.bg-forest-tint    { background-color: var(--forest-tint)    !important; }

/* ---------- Utility Text ---------- */
.text-forest      { color: var(--forest-dark) !important; }
.text-forest-mid  { color: var(--forest-mid)  !important; }

/* ---------- Hero Gradient ---------- */
.bg-forest-hero {
  background: linear-gradient(135deg, var(--forest-darkest) 0%, var(--forest-dark) 100%);
}

/* ---------- Contact Section Gradient ---------- */
.bg-forest-contact {
  background: linear-gradient(135deg, var(--forest-darkest) 0%, var(--forest-dark) 100%);
}

/* ---------- Buttons ---------- */
.btn-forest {
  background-color: var(--forest-dark);
  border-color: var(--forest-dark);
  color: #fff;
}
.btn-forest:hover {
  background-color: var(--forest-primary);
  border-color: var(--forest-primary);
  color: #fff;
}

.btn-forest-outline {
  background-color: transparent;
  border: 2px solid #fff;
  color: #fff;
  transition: all 0.2s ease;
}
.btn-forest-outline:hover {
  background-color: #fff;
  color: var(--forest-dark);
}

/* ---------- Navbar ---------- */
.navbar.bg-forest-darkest .nav-link {
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.2s ease;
}
.navbar.bg-forest-darkest .nav-link:hover,
.navbar.bg-forest-darkest .nav-link.active {
  color: var(--forest-fresh);
}

/* ---------- Cards ---------- */
.card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 28px rgba(13, 40, 24, 0.13) !important;
}
.card-accent {
  border-bottom: 3px solid var(--forest-dark) !important;
}

/* ---------- Section Divider Line ---------- */
.section-divider {
  width: 56px;
  height: 4px;
  background: var(--forest-dark);
  margin: 0.75rem auto 1.5rem auto;
  border-radius: 2px;
}
.section-divider-light {
  background: var(--forest-fresh);
}

/* ---------- Modal Header ---------- */
.modal-header-forest {
  background-color: var(--forest-dark);
  color: #fff;
}
.modal-header-forest .btn-close {
  filter: brightness(0) invert(1);
}

/* ---------- Footer Links ---------- */
.footer-link {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-link:hover {
  color: var(--forest-fresh) !important;
  text-decoration: underline;
}

/* ---------- Page Heading Colors (Privacy / Terms) ---------- */
h1, h2, h3 {
  color: var(--forest-dark);
}

/* ---------- Service Card Image ---------- */
.card-img-top {
  height: 200px;
  object-fit: cover;
}