/* ===== SG&J FORCE OVERRIDE (no HTML edits) =========================
   This targets the top bar EVEN IF class names differ, using :has().
   Tested for Chromium-based browsers (your screenshot shows Chrome).
==================================================================== */

:root{
  --rich-red:#b3000f;
  --gold:#d4af37;
  --rich-black:#0b0b0d;
  --offwhite:#f2f2f2;
}

/* Base page color */
body{ background:var(--rich-black) !important; color:var(--offwhite); }

/* 1) Find the top bar that contains the nav links ("About", "Products", etc.) */
body :is(header, div, nav, section):has(> :is(nav, ul, ol):has(a)){
  /* make it the red band and 2.5x thicker */
  background:var(--rich-red) !important;
  color:#fff !important;
  position:sticky; top:0; z-index:9999;
  padding-top:14px !important;
  padding-bottom:14px !important;
  min-height:72px !important; /* thickness */
  box-shadow:0 2px 0 rgba(0,0,0,0.25);
}

/* 2) Make nav links gold -> white on hover/active */
body :is(header, div, nav, section):has(> :is(nav, ul, ol):has(a)) a{
  color:var(--gold) !important;
  text-decoration:none;
  font-weight:700;
}
body :is(header, div, nav, section):has(> :is(nav, ul, ol):has(a)) a:hover,
body :is(header, div, nav, section):has(> :is(nav, ul, ol):has(a)) a.active{
  color:#fff !important;
}

/* 3) Inject logo before the *first* textual element inside that same bar */
body :is(header, div, nav, section):has(> :is(nav, ul, ol):has(a)) > :first-child{
  display:inline-flex; align-items:center; gap:10px;
}
body :is(header, div, nav, section):has(> :is(nav, ul, ol):has(a)) > :first-child::before{
  content:""; display:inline-block; width:44px; height:44px;
  background-image:url('../img/logo_sgj.jpeg');
  background-size:contain; background-repeat:no-repeat; background-position:center;
  border-radius:8px;
}

/* 4) Tighten big hero title a bit (non-destructive) */
h1{ line-height:1.12 !important; }