/* ============================================
   brand.css — Garner Auctions, Inc.
   Brand config layer. Sits between mainstyle.css and custom.css.
   Colors and fonts only. No component styles here.
   ============================================ */

/* --- Brand Colors --- */
:root {
  --brand-gold:         #AD9600;
  --brand-yellow:       #F2CD1A;
  --brand-light-yellow: #FCF2D7;
  --brand-black:        #000000;
  --brand-dark:         #1a1a1a;
  --brand-white:        #ffffff;
}

/* Override template theme color with Garner gold */
:root {
  --theme-color:  #AD9600;
  --theme-color2: #F2CD1A;
  --smoke-color:  #FCF2D7;
  --secondary-color: #1a1a1a; /* was blue #053273 — no blue in brand */
}

/* --- Header: semi-transparent overlay on homepage hero ---
   Nav bar: 0.65 alpha — visible but see-through over hero photo
   Top bar: 0.50 alpha — slightly lighter (more transparent) than nav
   Both use pure black so alpha alone controls darkness (no color bleed).
   ------------------------------------------------------------------ */
.header-layout1.style2 .sticky-active {
  background-color: rgba(0, 0, 0, 0.60);
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.header-top {
  background-color: rgba(0, 0, 0, 0.80) !important;
}

.vs-btn,
.vs-btn:focus {
  background-color: var(--brand-gold);
  border-color: var(--brand-gold);
}

/* Hover: darker gold + white text (readable on both light AND dark sections) */
.vs-btn:hover,
.vs-btn:focus:hover {
  background-color: #8B7800 !important;
  border-color: #8B7800 !important;
  color: #fff !important;
}

/* Secondary button variant (.style2) — outlined, hover fills with brand gold */
.vs-btn.style2 {
  background-color: transparent;
  border-color: var(--brand-gold);
  color: var(--brand-gold);
}
.vs-btn.style2:hover,
.vs-btn.style2:focus:hover {
  background-color: var(--brand-gold);
  border-color: var(--brand-gold);
  color: #fff;
}

/* Accent text color */
.sec-subtitle,
.hero-title span {
  color: var(--brand-gold);
}

/* --- Paragraph text color fix ---
   Template sets p { color: var(--body-color) } but --body-color (#F8F3E7) is
   a light cream used as both text AND background — unreadable on white sections.
   Override p directly to use --text-color (#737373) which is the proper body text value.
   ------------------------------------------------------------------ */
p {
  color: var(--text-color);
}