/* ============================================================
   Brand overrides — loaded AFTER bootstrap.min.css so its
   !important rules win the cascade. The brand wood RGB
   (56, 55, 52) is used at three opacity levels:
     0.5 → light tan (footer bg)
     0.9 → primary surfaces, icons, links
     1.0 → opaque (copyright, hover states)

   To re-skin, change the triple once here and once in globals.css.
   ============================================================ */
:root {
  --bs-primary:           rgba(56, 55, 52, 0.9);
  --bs-primary-rgb:       56, 55, 52;
  --bs-link-color:        rgba(56, 55, 52, 0.9);
  --bs-link-color-rgb:    56, 55, 52;
  --bs-link-hover-color:  rgb(56, 55, 52);

  /* Body text — match the live site's dark slate (rgb 39,49,56). Set here so it
     wins over the customized bootstrap.min.css default body color. */
  --bs-body-color:        #273138;
  --bs-body-color-rgb:    39, 49, 56;
}

/* The customized bootstrap.min.css bakes body + table text to a light taupe
   (#797672). The live site uses dark slate #273138 — restore it here, after
   bootstrap loads, for body copy and all table variants. */
body { color: var(--bs-body-color); }

/* Uniform typography — Poppins everywhere. bootstrap.min.css sets headings to
   Roboto; override here (loads after bootstrap) so the whole site uses one
   typeface. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: 'Poppins', sans-serif;
}

/* Footer — match the live site exactly. Bootstrap's .text-light and .btn-link
   carry !important, so these overrides need it too.
     headings  → #eaeaea
     text+links → wood-gray rgba(56,55,52,.9) over the rgba(...,.5) tan bg
     hover      → opaque wood-gray                                            */
.footer h2,
.footer .text-light { color: #eaeaea !important; }
.footer p,
.footer p a,
.footer .btn-link,
.footer .btn.btn-link { color: rgba(56, 55, 52, 0.9) !important; }
.footer p a:hover,
.footer .btn-link:hover,
.footer .btn.btn-link:hover { color: rgb(56, 55, 52) !important; }
.table {
  --bs-table-color: var(--bs-body-color);
  --bs-table-striped-color: var(--bs-body-color);
  --bs-table-active-color: var(--bs-body-color);
  --bs-table-hover-color: var(--bs-body-color);
  color: var(--bs-body-color);
}

.text-primary    { color: rgba(56, 55, 52, 0.9) !important; }
.bg-primary      { background-color: rgba(56, 55, 52, 0.9) !important; }
.border-primary  { border-color: rgba(56, 55, 52, 0.9) !important; }

/* The footer uses .bg-dark but the live site re-purposed it to a light tan
   (50% brand). Override here so we don't have to touch Bootstrap itself. */
.bg-dark         { background-color: rgba(56, 55, 52, 0.5) !important; }

.btn-primary {
  --bs-btn-bg: rgba(56, 55, 52, 0.9);
  --bs-btn-border-color: rgba(56, 55, 52, 0.9);
  --bs-btn-hover-bg: rgb(56, 55, 52);
  --bs-btn-hover-border-color: rgb(56, 55, 52);
  background-color: rgba(56, 55, 52, 0.9) !important;
  border-color: rgba(56, 55, 52, 0.9) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: rgb(56, 55, 52) !important;
  border-color: rgb(56, 55, 52) !important;
}

.btn-outline-primary {
  color: rgba(56, 55, 52, 0.9) !important;
  border-color: rgba(56, 55, 52, 0.9) !important;
}

.link-primary { color: rgba(56, 55, 52, 0.9) !important; }
.link-primary:hover,
.link-primary:focus { color: rgb(56, 55, 52) !important; }

/* Dropdown menu — matches live: light gray menu, dark text, wood hover with white text */
.dropdown-menu {
  background-color: #eaeaea !important;
}
.dropdown-item {
  color: #212529 !important;
}
.dropdown-item:hover,
.dropdown-item:focus,
.navbar .dropdown-menu .dropdown-item:hover {
  background-color: rgba(56, 55, 52, 0.9) !important;
  color: #ffffff !important;
}

/* Carousel hero button — Bootstrap's .btn class wins over .hero-btn-carousel
   via load order. Re-declare here so the brand background + white text stick. */
.btn.hero-btn-carousel {
  background-color: rgb(56, 55, 52) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  padding: 0.75rem 1.75rem;
  border-radius: 0.375rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
}
.btn.hero-btn-carousel:hover,
.btn.hero-btn-carousel:focus {
  background-color: #4f4d4a !important;
  color: #ffffff !important;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55);
}