/* ===========================
   Essentrae brand text palette (dark sections only)
   =========================== */
:root{
  --gold-1: #C2A86C; /* Headlines */
  --gold-2: #D6BB7E; /* Sub-headers */
  --gold-3: #B89E68; /* Body/small text */
  --gold-hi:#E5C98F; /* Hover/active */
}

/* HERO / DARK AREA (your main landing block) */
#info.page-info h1, 
#info.page-info .h1,
#info.page-info h2, 
#info.page-info .h2 {
  color: var(--gold-1) !important;
}

#info.page-info h3, 
#info.page-info .h3,
#info.page-info h4, 
#info.page-info .h4 {
  color: var(--gold-2) !important;
}

#info.page-info p, 
#info.page-info .lead,
#info.page-info li,
#info.page-info small {
  color: var(--gold-3) !important;
}

/* Links & social inside the hero */
#info.page-info a {
  color: var(--gold-1) !important;
  text-decoration: none;
}
#info.page-info a:hover,
#info.page-info a:focus {
  color: var(--gold-hi) !important;
}

/* Social icons (font-awesome) live inside <a>, this ensures consistency */
#info.page-info .fa {
  color: currentColor !important; /* inherit link color */
}

/* Buttons in hero */
#info.page-info .btn.btn-border-white {
  color: var(--gold-1) !important;
  border-color: var(--gold-1) !important;
}
#info.page-info .btn.btn-border-white:hover,
#info.page-info .btn.btn-border-white:focus {
  color: #333 !important;
  background-color: var(--gold-1) !important;
  border-color: var(--gold-1) !important;
}

/* Optional: if you keep a solid white button in hero, leave it readable */
#info.page-info .btn.btn-white {
  color: #333 !important; /* dark text on white */
}

/* NAV (when visible over the dark background) */
.navbar-links a {
  color: var(--gold-1) !important;
}
.navbar-links a:hover,
.navbar-links .nav > li.active > a {
  color: var(--gold-hi) !important;
  text-decoration: none;
  border-bottom: 1px solid var(--gold-hi) !important;
}

/* Do NOT recolor text inside the white content panel to avoid low contrast.
   The right-side panel uses .bg-white-09; it should remain dark text (#333). */
   
   html body #page #info.page-info h1,
html body #page #info.page-info .h1,
html body #page #info.page-info h2,
html body #page #info.page-info .h2 { color: var(--gold-1) !important; }

html body #page #info.page-info p,
html body #page #info.page-info .lead { color: var(--gold-3) !important; }

html body #page #info.page-info a { color: var(--gold-1) !important; }
html body #page #info.page-info a:hover { color: var(--gold-hi) !important; }

html body #page #info.page-info .fa { color: currentColor !important; }

#info.page-info h2 { color:#ff0040 !important; }

#info.page-info h2,
#info.page-info .h2 {
  color: #E8D8B0 !important; /* Warm pale gold */
}

/* Hide any default HRs in this block */
#info .page-info-copy hr { display: none !important; }

/* Show + style only the gold one */
#info .page-info-copy hr.gold-divider{
  display: block !important;
  all: unset;                    /* wipe Bootstrap defaults */
  display: block !important;
  width: 60% !important;
  height: 2px !important;
  margin: 1.8em auto !important;
  background: #b89e68 !important;  /* swap for your exact gold if different */
  opacity: 1 !important;
}

/* Desktop tweak */
@media (min-width: 992px){
  #info .page-info-copy hr.gold-divider{
    width: 46% !important;
    height: 1px !important;
    margin: 2.2em auto 2em !important;
  }
}