/* 716 Spotlight - the desktop header from the homepage, carried to every other page (Rich, 2026-10-14):
   a bigger logo, the menu as pill buttons that turn gold on hover, the main action as a solid gold
   button, and a navy bar with a soft fade instead of flat black. The bar stays solid here (these
   pages have no photo behind it), and phones are untouched. Loaded last in <head>, so it wins. */
@media (min-width:761px){
  body > header{background:linear-gradient(180deg,#000814 0%,#03112e 100%)!important;border-bottom:1px solid rgba(255,255,255,.08)!important}
  body > header .bar,body > header .wrap,body > header .header-container{height:auto!important;min-height:0!important;padding-top:12px!important;padding-bottom:12px!important}
  body > header :is(.logo,.brand) img{height:clamp(64px,min(6.6vw,11vh),92px)!important;filter:drop-shadow(0 4px 14px rgba(0,0,0,.45))}
  body > header nav{gap:10px!important;align-items:center}
  body > header.site-header > .wrap > nav{display:flex}   /* the submit page's menu was not a flex row, so it had no gaps */
  body > header nav > a,body > header nav > .nav-sub > a{
    padding:9px 17px!important;border-radius:999px!important;border:1px solid rgba(255,255,255,.24)!important;
    background:rgba(255,255,255,.05)!important;color:#fff!important;text-decoration:none!important;
    font-size:15px!important;font-weight:600!important;line-height:1.2!important;white-space:nowrap;transition:border-color .15s,color .15s,background .15s}
  body > header nav > a:hover,body > header nav > .nav-sub > a:hover{border-color:#F5D33B!important;color:#F5D33B!important;background:rgba(255,255,255,.08)!important}
  body > header nav > a:is(.active,[aria-current]){border-color:#F5D33B!important;color:#F5D33B!important}
  body > header nav > a:is(.biz,.nav-add){background:#F5D33B!important;border-color:#F5D33B!important;color:#001030!important}
  body > header nav > a:is(.biz,.nav-add):hover{background:#ffe066!important;color:#001030!important}
  /* the two oldest pages stack the menu under the logo: put it beside the logo like everywhere else */
  body > header:not([class]):has(> nav){display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;padding:12px max(24px,calc((100vw - 1180px) / 2))!important}
  body > header:not([class]) > nav{margin-top:0!important}
}
/* phones, submit page only (its bar is .wrap, the calendar's is .bar): the menu wraps under the logo */
@media (max-width:760px){
  body > header.site-header > .wrap{flex-wrap:wrap;height:auto!important;padding-top:10px;padding-bottom:10px;row-gap:6px}
  body > header.site-header > .wrap > nav{display:flex;flex-wrap:wrap;gap:2px 18px;width:100%}
  body > header.site-header > .wrap > nav a{padding:6px 0!important;white-space:nowrap}
}