/* ================================================
   Jewell, REALTORS® — Custom Styles
   Load order: Bootstrap 5.3.8 CDN → then this file
   Brand deck: /brand-deck.md
   ================================================ */

/* --- Design Tokens (Layer 1) --- */
:root {
  /* Brand colors — see brand-deck.md for usage rules */
  --jr-charcoal:       #2C2C2C;
  --jr-navy:           #1a365d;
  --jr-gold:           #C9A84C;
  --jr-gold-dark:      #B8962F;
  --jr-gold-rgb:       201, 168, 76;
  --jr-off-white:      #F8F5F0;
  --jr-near-black:     #1A1A1A;
  --jr-text-body:      #3a3a3a;

  /* Override Bootstrap globals */
  --bs-body-bg:          var(--jr-off-white);
  --bs-body-color:       var(--jr-text-body);
  --bs-body-font-family: 'Open Sans', sans-serif;
  --bs-link-color:       var(--jr-navy);
  --bs-link-hover-color: var(--jr-gold-dark);
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: 'Montserrat', sans-serif;
}

.display-1, .display-2, .display-3, .display-4 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* --- Bootstrap Component Overrides (Layer 2) --- */

/* Primary button = gold */
.btn-primary {
  --bs-btn-bg:                var(--jr-gold);
  --bs-btn-border-color:      var(--jr-gold);
  --bs-btn-color:             #fff;
  --bs-btn-hover-bg:          var(--jr-gold-dark);
  --bs-btn-hover-border-color: var(--jr-gold-dark);
  --bs-btn-hover-color:       #fff;
  --bs-btn-active-bg:         var(--jr-gold-dark);
  --bs-btn-active-border-color: var(--jr-gold-dark);
  --bs-btn-active-color:      #fff;
  --bs-btn-focus-shadow-rgb:  var(--jr-gold-rgb);
}

/* Outline gold button variant */
.btn-outline-gold {
  --bs-btn-color:             var(--jr-gold);
  --bs-btn-border-color:      var(--jr-gold);
  --bs-btn-hover-bg:          var(--jr-gold);
  --bs-btn-hover-color:       #fff;
  --bs-btn-hover-border-color: var(--jr-gold);
  --bs-btn-active-bg:         var(--jr-gold-dark);
  --bs-btn-active-border-color: var(--jr-gold-dark);
  --bs-btn-active-color:      #fff;
}

/* Dark button = charcoal */
.btn-dark {
  --bs-btn-bg:                var(--jr-charcoal);
  --bs-btn-border-color:      var(--jr-charcoal);
  --bs-btn-hover-bg:          #1a1a1a;
  --bs-btn-hover-border-color: #1a1a1a;
}

/* Navbar — charcoal background, gold hover */
.navbar-dark-custom {
  background-color: var(--jr-charcoal);
}
.navbar-dark-custom .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.85);
}
.navbar-dark-custom .navbar-nav .nav-link:hover,
.navbar-dark-custom .navbar-nav .nav-link.active {
  color: var(--jr-gold);
}
.navbar-dark-custom .navbar-brand {
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}

/* Dropdown menu inside dark navbar */
.navbar-dark-custom .dropdown-menu {
  background-color: var(--jr-charcoal);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.navbar-dark-custom .dropdown-item {
  color: rgba(255, 255, 255, 0.85);
}

.navbar-dark-custom .dropdown-item:hover,
.navbar-dark-custom .dropdown-item:focus,
.navbar-dark-custom .dropdown-item.active {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--jr-gold);
}

/* Footer */
.site-footer {
  background-color: var(--jr-near-black);
  color: rgba(255, 255, 255, 0.75);
  padding: 3rem 0 1.5rem;
}
.site-footer a {
  color: var(--jr-gold);
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--jr-gold-dark);
  text-decoration: underline;
}

/* Footer badge images (NAR compliance — never wrap in links) */
.footer-badges {
  margin-top: 0.75rem;
}

.footer-badge {
  height: 44px;
  width: auto;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.footer-badge:hover {
  opacity: 1.0;
}

/* --- Page Sections --- */

/* Hero section */
.hero-section {
  background-color: var(--jr-charcoal);
  color: #fff;
  padding: 5rem 0;
}
@media (min-width: 992px) {
  .hero-section {
    padding: 7rem 0;
  }
}

/* Gold accent divider */
.accent-divider {
  border: none;
  border-top: 3px solid var(--jr-gold);
  width: 60px;
  margin: 1rem 0;
  opacity: 1;
}

/* Section spacing */
.section-padding {
  padding: 4rem 0;
}
@media (min-width: 992px) {
  .section-padding {
    padding: 6rem 0;
  }
}

/* Navy accent section */
.bg-navy {
  background-color: var(--jr-navy);
  color: #fff;
}

/* --- Utility Classes --- */

/* Gold text — only use on dark backgrounds per brand deck WCAG rules */
.text-gold {
  color: var(--jr-gold) !important;
}

/* Font family helpers */
.font-montserrat {
  font-family: 'Montserrat', sans-serif;
}
.font-opensans {
  font-family: 'Open Sans', sans-serif;
}