:root{
  --hdr-bg:#7A1F2B;
  --hdr-text:#FFF8EC;
  --hdr-accent:#F2B84B;
  --hdr-accent-hover:#F6C766;
  --hdr-btn-text:#3A1218;
}

/* 1. paint the maroon on the full-width header and clear the inner white */
header{
  background:var(--hdr-bg);
  border-bottom:0;
  box-shadow:0 1px 0 rgba(0,0,0,.12);
}
header.scrolled{ box-shadow:0 6px 14px rgba(58,18,24,.28); }
header .wrap.bar{
  background:transparent;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
}

/* 2. text colors, with higher specificity */
header .wrap.bar .logo,
header .wrap.bar nav > a,
header .wrap.bar .more .mb,
header .wrap.bar .header-login,
header .wrap.bar .account-menu-toggle{
  color:var(--hdr-text);
}
header .wrap.bar nav > a:hover,
header .wrap.bar .more .mb:hover,
header .wrap.bar .header-login:hover{
  color:var(--hdr-accent);
}

/* active link: gold text and gold underline */
header .wrap.bar nav > a[aria-current="page"],
header .wrap.bar .more .mb.is-current{
  color:var(--hdr-accent);
  border-bottom-color:var(--hdr-accent);
}
header .wrap.bar nav > a[aria-current="page"]::after,
header .wrap.bar .more .mb.is-current::after{
  background:var(--hdr-accent);
}

/* logo ring */
header .logo .mark{ border-radius:50%; }

/* Nukh/Gotra dropdown stays light */
header .mm{ background:transparent; box-shadow:none; }
header .mmi{ background:var(--hdr-text); box-shadow:0 10px 24px rgba(58,18,24,.25); }
header .wrap.bar .mm a{ color:var(--hdr-btn-text); }
header .wrap.bar .mm a:hover,
header .wrap.bar .mm a:focus-visible,
header .wrap.bar .mm a[aria-current="page"]{ color:var(--hdr-bg); background:#F7E9CF; }

/* Keep light header text readable when controls are hovered or expanded. */
header .wrap.bar .header-login:hover,
header .wrap.bar .account-menu-toggle:hover,
header .wrap.bar .account-menu[open] .account-menu-toggle,
header .wrap.bar > .mbtn:hover,
header .wrap.bar > .mbtn:focus-visible{
  background:rgba(255,248,236,.1);
  color:var(--hdr-accent);
}

/* signed-in account menu */
header .account-menu-options{ background:var(--hdr-text); }
header .account-menu-options a,
header .account-menu-options button{ color:var(--hdr-btn-text); }

/* mobile menu button and progress bar */
header .mbtn{ color:var(--hdr-text); border-color:rgba(255,248,236,.4); background:transparent; }
header .bars{background:transparent}
header .bars::before,
header .bars::after{background:var(--hdr-text)}
header .prog{ background:var(--hdr-accent); }

.band{ background:var(--hdr-accent); }

/* Keep the brand, account access, and menu inside a single mobile header row. */
@media(max-width:860px){
  header .wrap.bar{width:calc(100% - 28px);min-height:64px;flex-wrap:nowrap;gap:10px;padding-block:8px}
  header .wrap.bar > .logo{flex:1;min-width:0;margin-right:0;gap:8px;font-size:1.1rem}
  header .wrap.bar .header-brand-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  header .wrap.bar .logo .mark{display:block;width:34px;height:34px;flex:0 0 34px;object-fit:contain}
  header .wrap.bar > .header-auth{flex:0 0 auto;margin-left:0}
  header .wrap.bar > .mbtn{display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;margin-left:0;padding:0}
  header .wrap.bar > .mbtn .lbl{display:none}
  header .wrap.bar .bars{flex:0 0 18px;background:transparent}
  header .wrap.bar .account-menu-options{max-width:calc(100vw - 28px)}
}
@media(max-width:600px){
  header .wrap.bar:has(.account-menu:not([hidden])){gap:8px}
  header .wrap.bar > .logo{font-size:1rem}
  header .wrap.bar .account-menu-toggle{justify-content:center;width:44px;height:44px;padding:5px;gap:0}
  header .wrap.bar .account-menu .account-name,
  header .wrap.bar .account-menu-chevron{display:none}
}