/* ===== Premium classic header: Charcoal + Copper ===== */

:root{
  --hdr-bg: #121417;          /* charcoal */
  --hdr-bg-2: #1a1e24;        /* hover/menu bg */
  --hdr-text: #f3f0ea;        /* warm off-white */
  --hdr-muted: rgba(243,240,234,.72);
  --hdr-border: rgba(243,240,234,.12);

  --hdr-accent: #c07a2b;      /* copper */
  --hdr-accent-2: #a76622;    /* darker copper */
  --hdr-accent-ink: #141518;

  --hdr-input-bg: #f7f3ea;    /* warm input bg */
  --hdr-input-ink: #16181c;
  --hdr-input-line: rgba(0,0,0,.18);
}

/* Container stays yours; keep this if you want same max width */
.topbar .container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--hdr-bg);
  color: var(--hdr-text);
  border-bottom: 1px solid var(--hdr-border);
}

.topbar__row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 0;
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color: var(--hdr-text);
  white-space: nowrap;
}
.brand img{
  display:block;
  border-radius: 10px;
  padding: 6px;
  background: rgba(243,240,234,.06);
  border: 1px solid rgba(243,240,234,.10);
}
.brand__text{
  font-weight: 800;
  letter-spacing: .25px;
  font-size: 16px;
}

/* Search */
.hsearch{
  flex: 1 1 520px;
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 260px;
}

.hsearch__input.input{
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--hdr-input-line);
  background: var(--hdr-input-bg);
  color: var(--hdr-input-ink);
  outline: none;
}
.hsearch__input::placeholder{
  color: rgba(22,24,28,.55);
}
.hsearch__input:focus{
  border-color: rgba(192,122,43,.70);
  box-shadow: 0 0 0 4px rgba(192,122,43,.22);
}

/* Buttons */
.btn{
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-weight: 800;
  cursor: pointer;
  line-height: 38px;
  user-select: none;
}

.btn.primary,
.hsearch__btn{
  background: var(--hdr-accent);
  color: #fff;
  border-color: rgba(243,240,234,.16);
}
.btn.primary:hover,
.hsearch__btn:hover{
  background: var(--hdr-accent-2);
}
.btn.primary:focus-visible,
.hsearch__btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(192,122,43,.26);
}

/* Nav */
.nav{
  display:flex;
  align-items:center;
  gap: 6px;
}

.nav__link{
  color: var(--hdr-muted);
  text-decoration:none;
  padding: 9px 10px;
  border-radius: 12px;
  font-weight: 800;
  line-height: 1;
  border: 1px solid transparent;
}

.nav__link:hover{
  color: var(--hdr-text);
  background: rgba(243,240,234,.06);
  border-color: rgba(243,240,234,.10);
}

/* Active: copper underline-ish chip */
.nav__link.active{
  color: var(--hdr-text);
  background: rgba(192,122,43,.14);
  border-color: rgba(192,122,43,.42);
}

/* Actions */
.hactions{display:flex; align-items:center}

.btn.mbtn{
  background: rgba(243,240,234,.06);
  color: var(--hdr-text);
  border-color: rgba(243,240,234,.12);
}
.btn.mbtn:hover{background: rgba(243,240,234,.10)}
.btn.mbtn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(243,240,234,.16);
}

/* Mobile nav */
.mnav{
  display:none;
  padding: 10px 0 14px;
  border-top: 1px solid var(--hdr-border);
}
.mnav.is-open{display:block}

.mnav__link{
  display:block;
  color: var(--hdr-muted);
  text-decoration:none;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 900;
}
.mnav__link:hover{
  color: var(--hdr-text);
  background: rgba(243,240,234,.06);
}

/* A11y */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* Responsive */
@media (max-width: 980px){
  .nav{display:none}
  .hsearch{flex: 1 1 auto}
}
@media (max-width: 640px){
  .topbar__row{gap:10px}
  .brand__text{display:none}
  .hsearch{min-width:0}
  .hsearch__btn{padding:0 12px}
}