/* Shared navigation geometry; each page keeps its own visual theme. */
html { scrollbar-gutter: stable; }
body > .skip-link { z-index: 110; }
.club-header {
  --nav-brand-width: 220px;
  --nav-actions-width: 176px;
  --nav-item-width: 72px;
  --nav-gap: 16px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.club-header--legacy { padding: 0; }
/* Follow the body's animated background; do not inherit its delayed text colour. */
.club-header--island { background-color: inherit; color: var(--ink); }
.club-header-inner {
  width: min(1280px, calc(100% - 64px));
  max-width: 1280px;
  height: 88px;
  margin-inline: auto;
  padding: 0;
  display: grid;
  grid-template-columns: var(--nav-brand-width) minmax(0, 1fr) var(--nav-actions-width);
  align-items: center;
  gap: var(--nav-gap);
}
.club-header .club-brand { grid-column: 1; grid-row: 1; justify-self: start; }
.club-header .club-desktop {
  grid-column: 2;
  grid-row: 1;
  width: calc(7 * var(--nav-item-width));
  justify-self: center;
  margin: 0;
  padding: 0;
}
.club-header .club-menu,
.club-header .club-desktop.desktop-nav {
  display: grid;
  grid-template-columns: repeat(7, var(--nav-item-width));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.club-header .club-menu > li > a,
.club-header .club-desktop > a,
.club-header .club-desktop > .more > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  width: 100%;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
}
.club-header .club-desktop > .more { align-self: center; }
.club-header .club-desktop > .more > summary,
.club-header .club-menu > .nav-more > a { gap: 6px; }
.club-header .club-desktop > .more > summary::after { content: none; }
.club-header .club-caret { display: block; width: 10px; height: 10px; flex: 0 0 10px; transition: transform .2s; }
.club-header .more[open] .club-caret,
.club-header .nav-more.open .club-caret { transform: rotate(180deg); }
.club-header .club-actions {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.club-header .club-actions .theme-toggle { width: 38px; height: 38px; flex: 0 0 38px; }
.club-header .club-actions .food-btn { margin: 0; white-space: nowrap; }
.club-header .club-actions .club-food {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 126px;
  height: 38px;
  padding: 0;
  font: 600 13px/20px "Microsoft YaHei", "PingFang SC", sans-serif;
  text-decoration: none;
  border-radius: 8px;
}
.club-header.club-header--legacy .club-food { background: linear-gradient(135deg,#f97316,#ea580c); color: white; border: 1px solid transparent; border-radius: 6px; }
.club-header.club-header--island .club-actions .club-food { background: transparent; color: var(--ink); border: 1px solid color-mix(in srgb,var(--ink) 24%,transparent); border-radius: 24px; }
.club-header.club-header--legacy .club-food:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(249,115,22,.3); }
.club-header.club-header--island .club-food:hover { background: color-mix(in srgb,var(--paper) 70%,transparent); border-color: var(--blue); }
.club-header--island .club-theme-toggle { display: grid; place-items: center; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 50%; padding: 0; cursor: pointer; }
.club-theme-toggle .nav-moon { display: none; }
body:not(.light-mode) .club-header--legacy .nav-sun,
.night-mode .club-header--island .nav-sun { display: none; }
body:not(.light-mode) .club-header--legacy .nav-moon,
.night-mode .club-header--island .nav-moon { display: inline; }
.club-header .club-food:hover { transform: none; box-shadow: none; }
.club-header .club-mobile { display: none; }

@media (max-width: 1100px) {
  .club-header {
    --nav-brand-width: 190px;
    --nav-actions-width: 154px;
    --nav-item-width: 64px;
    --nav-gap: 12px;
  }
  .club-header-inner { width: calc(100% - 48px); }
  .club-header .club-actions { gap: 8px; }
  .club-header .club-actions .club-food { width: 108px; font-size: 12px; }
}
@media (max-width: 900px) {
  .club-header-inner {
    width: calc(100% - 36px);
    height: 76px;
    grid-template-columns: minmax(0, 1fr) auto 44px;
    gap: 12px;
  }
  .club-header .club-desktop,
  .club-header .club-desktop.desktop-nav { display: none; }
  .club-header .club-actions { grid-column: 2; }
  .club-header .club-actions .club-food { width: 38px; height: 38px; }
  .club-header .club-food span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .club-header .club-brand { min-width: 0; }
  .club-header .brand-cube { width: 34px; height: 40px; }
  .club-header .brand-name { font-size: 18px; }
  .club-header .brand-sub { font-size: 7px; letter-spacing: 1.25px; }
  .club-header .club-mobile { display: block; grid-column: 3; grid-row: 1; position: relative; }
  .club-mobile > summary {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    cursor: pointer;
    list-style: none;
    border: 1px solid var(--line, var(--border-color));
    border-radius: 10px;
    color: var(--ink, var(--text-primary));
  }
  .club-mobile > summary::-webkit-details-marker { display: none; }
  .club-header--island .club-mobile > summary { border-radius: 50%; }
  .club-mobile > summary:focus-visible { outline: 3px solid var(--blue, var(--accent-color)); outline-offset: 3px; }
  .club-header .club-mobile-menu {
    position: absolute;
    right: 0;
    top: 52px;
    width: min(232px, calc(100vw - 36px));
    margin: 0;
    padding: 8px;
    background: var(--paper, var(--bg-dark));
    color: var(--ink, var(--text-primary));
    border: 1px solid var(--line, var(--border-color));
    border-radius: 14px;
    box-shadow: 0 10px 24px #0002;
  }
  .club-header .club-mobile-menu a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 14px;
    font: 14px/24px "Microsoft YaHei", "PingFang SC", sans-serif;
    color: inherit;
    text-decoration: none;
    border-radius: 8px;
  }
  .club-mobile-menu a:hover,
  .club-mobile-menu a[aria-current] { background: var(--sky, var(--hover-bg, #00adb514)); }
}