/* NAHC 2027 v8.12.12 | Compact photo-led header with stronger branding.
   Overrides ONLY the existing header presentation. All source images, overlays,
   hero/countdown/announcement/footer motion, URLs and page sections remain intact. */

/* One third shorter than the previous 216px desktop header. */
.site-header .site-header-inner {
  min-height:144px !important;
  gap:clamp(18px,2.6vw,38px);
  align-items:center;
}
/* Give the original event logo more presence without distorting the artwork. */
.site-header .brand {
  flex:0 0 clamp(360px,33vw,470px);
  min-width:0;
  max-width:470px;
}
.site-header .brand img {
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
}
/* Editorial navigation, inspired by the site heading family instead of plain links. */
.site-header .site-nav {
  display:flex;
  align-items:center;
  gap:clamp(18px,2.2vw,32px);
  margin-left:auto;
  white-space:nowrap;
}
.site-header .site-nav a {
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:10px 2px;
  font-family:var(--display);
  font-size:clamp(16px,1.35vw,19px);
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.018em;
  color:#f7fbfc;
  text-decoration:none;
  transition:color .2s ease;
}
.site-header .site-nav a::after {
  content:'';
  position:absolute;
  left:2px;
  right:2px;
  bottom:5px;
  height:2px;
  background:var(--sky);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .25s ease;
}
.site-header .site-nav a:hover,
.site-header .site-nav a:focus-visible { color:var(--sky); }
.site-header .site-nav a:hover::after,
.site-header .site-nav a:focus-visible::after { transform:scaleX(1); }
.site-header .site-nav a:focus-visible { outline:2px solid var(--sky); outline-offset:4px; }
.site-header .site-header-date {
  flex:0 0 auto;
  padding-left:clamp(12px,1.6vw,22px);
}

/* The untouched 2048x481 user photo is framed high, keeping helmets prominent
   and allowing players' upper bodies to remain visible in the shorter strip. */
.site-header::before {
  background-position:center 10% !important;
  opacity:.72 !important;
}

/* Header-only image drift/zoom: slightly quicker than the prior 54s. */
@keyframes nahc81212-header-photo {
  from { transform:translate3d(-1.65%, -.12%, 0) scale(1.095); }
  to   { transform:translate3d(1.65%, .12%, 0) scale(1.13); }
}
@media (prefers-reduced-motion:no-preference) {
  .site-header::before {
    animation:nahc81212-header-photo 45s linear infinite alternate !important;
    transform-origin:center 16%;
    will-change:transform;
    backface-visibility:hidden;
  }
}

/* Fit logo, date and navigation comfortably on medium desktops. */
@media (min-width:851px) and (max-width:1150px) {
  .site-header .site-header-inner { gap:clamp(12px,1.8vw,24px); }
  .site-header .brand { flex-basis:clamp(280px,32vw,385px); }
  .site-header .site-nav { gap:clamp(12px,1.6vw,20px); }
  .site-header .site-nav a { font-size:clamp(15px,1.5vw,17px); }
  .site-header .site-header-date { padding-left:12px; font-size:14px; }
}

/* Below 850px, use the established two-row layout and keep the header compact. */
@media (max-width:850px) {
  .site-header .site-header-inner {
    min-height:144px !important;
    flex-wrap:wrap;
    justify-content:space-between;
    align-content:center;
    gap:4px 16px;
    padding:14px 0;
  }
  .site-header .brand { flex:0 1 430px; max-width:430px; min-width:0; }
  .site-header .site-nav {
    order:3;
    flex:0 0 100%;
    gap:clamp(18px,3vw,28px);
    margin:6px 0 0;
    justify-content:flex-start;
  }
  .site-header .site-nav a { font-size:17px; }
  .site-header .site-header-date { margin-left:auto; }
  .site-header::before { background-position:51% 9% !important; }
}
@media (max-width:640px) {
  .site-header .site-header-inner {
    min-height:144px !important;
    align-content:center;
    justify-content:flex-start;
    gap:2px 0;
    padding:14px 0;
  }
  .site-header .brand { flex:0 1 100%; max-width:370px; min-width:0; }
  .site-header .site-nav {
    flex:0 0 100%;
    gap:clamp(12px,3.8vw,24px);
    flex-wrap:wrap;
    margin-top:8px;
  }
  .site-header .site-nav a { min-height:38px; font-size:clamp(15px,3.9vw,17px); padding:7px 1px; }
  .site-header .site-nav a::after { bottom:2px; }
  .site-header .site-header-date { display:none; }
  .site-header::before { background-position:53% 8% !important; }
}
@media (max-width:370px) {
  .site-header .site-header-inner { min-height:144px !important; }
  .site-header .site-nav { gap:12px; }
  .site-header .site-nav a { font-size:14px; letter-spacing:-.023em; }
  .site-header::before { background-position:53% 7% !important; }
}
@media (prefers-reduced-motion:reduce), (forced-colors:active) {
  .site-header::before {
    animation:none !important;
    transform:none !important;
    will-change:auto !important;
  }
  .site-header .site-nav a,
  .site-header .site-nav a::after { transition:none !important; }
}