/* MyGarageHub — brand band (logo row with the two orange lines) + nav tweaks.
 * Loaded AFTER style.css, so it only adds/overrides what the new header needs. */

/* ---------- Brand band: logo centred between two orange lines ---------- */
.brand-band {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: #0B0C0E;
  border-top: 2px solid rgba(232, 116, 12, 0.7);
  border-bottom: 2px solid rgba(232, 116, 12, 0.7);
}
.brand-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 15% 50%, rgba(232, 116, 12, 0.06) 0%, transparent 50%);
  pointer-events: none;
}
.brand-band-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-composite {
  display: flex;
  align-items: center;
  text-decoration: none;
  position: relative;
  z-index: 1;
}
.brand-logo {
  height: 56px;
  width: auto;
  max-width: 100%;
  display: block;
  mix-blend-mode: screen;               /* hides the logo's black background */
  filter: brightness(1.08) contrast(1.05);
}
[data-bright="1"] .brand-band {
  background: linear-gradient(90deg, #0B0C0E 0%, #1C120A 25%, #2B1C06 50%, #1C120A 75%, #0B0C0E 100%);
}

/* ---------- Nav bar under the band ---------- */
.topnav {
  position: sticky;
  top: 0;
  z-index: 40;
}
.topnav-inner .nav-right {
  margin-left: auto;                    /* keep bell / theme / login on the right */
}

/* ---------- Footer logo ---------- */
.footer-logo-chip {
  display: inline-block;
  background: #0B0C0E;                  /* dark chip so the logo also works in light mode */
  border-radius: 12px;
  padding: 8px 14px;
}
.footer-logo {
  height: 48px;
  width: auto;
  display: block;
  mix-blend-mode: screen;
}

@media (max-width: 600px) {
  .brand-band-inner { padding: 6px 16px; }
  .brand-logo { height: 40px; }
  .footer-logo { height: 40px; }
}