/* ============================================================
   Site-wide header corrections. Loaded after style.css.
   Two problems it solves:
   1. On phones the header logo rendered at its natural size,
      because the height was set with calc() on custom properties
      that did not resolve. Heights below are absolute.
   2. The navigation wrapped onto three lines. It now scrolls
      sideways on one line, which is what a phone user expects.
   ============================================================ */

/* --- header logo, absolute heights, no calc --- */
.top .brand-img{ width:auto; }
.top .brand-header .brand-full{ display:block; height:44px; max-height:44px; }
.top .brand-header .brand-mark{ display:none; }        /* one lockup at a time, never both */
.top .brand-header .brand-img{ height:44px; max-height:44px; }

@media (max-width: 900px){
  .top .brand-header .brand-full{ height:38px; max-height:38px; }
  .top .brand-header .brand-img{ height:38px; max-height:38px; }
}
@media (max-width: 560px){
  .top .brand-header .brand-full{ display:none !important; }
  .top .brand-header .brand-mark{ display:block !important; height:32px; max-height:32px; width:auto; }
  .top .bar{ padding:10px 14px; gap:10px; flex-wrap:nowrap; align-items:center; }

  /* one line, scrolls sideways, no wrapping stack */
  .top nav{
    flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    gap:14px; font-size:13.5px; margin-left:auto; padding-bottom:2px;
  }
  .top nav::-webkit-scrollbar{ display:none; }
  .top nav a{ white-space:nowrap; }
  .top nav .btn{ padding:7px 12px; font-size:12.5px; white-space:nowrap; }
}
@media (max-width: 380px){
  .top .brand-header .brand-mark{ height:28px; max-height:28px; }
  .top nav{ font-size:12.5px; gap:11px; }
}

/* --- dark mode: the header stayed light by design, but the primary
       logo's "AWARDS 2027" line is near black. Keep the header light
       so the wordmark is always legible. --- */
@media (prefers-color-scheme: dark){
  .top{ background:#fffdfa; border-bottom-color:#e6e2da; }
  .top nav a{ color:#161616; }
  .top nav a:hover{ color:#9A5F12; }
}