/* =========================================================
 *  PHASE 2 — NAV GEOMETRY FIX (desktop + mobile)
 *  Paste AFTER all existing custom CSS (cascade order matters).
 *
 *  Desktop: one centred glass band. Links truly centred; the
 *  icon cluster sits ON the band line via a zero-height header
 *  overlay — flex-centred, no pixel offsets, no admin-bar math.
 *  Mobile: the dead 175px header band is gone; the hamburger is
 *  pinned OUTSIDE the scrollable link strip (it can never be
 *  clipped away again) and the links scroll from the true left
 *  edge instead of centre-clipping, with soft edge fades.
 * ========================================================= */

:root.mwc-theme {
  --mwcfix-band-h: 56px;    /* the single shared constant: band height */
  --mwcfix-band-gap: 14px;  /* breathing room above the band */
}

/* Positioning context for the icon overlay. */
html.mwc-theme #site.site { position: relative !important; }

/* ── Header → zero-height overlay carrying the icon cluster ───────── */
html.mwc-theme .fcnmm-header {
  position: absolute !important;
  inset: var(--mwcfix-band-gap) 0 auto 0 !important;
  height: var(--mwcfix-band-h) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 40 !important;
}
html.mwc-theme .fcnmm-header__content {
  max-width: var(--mwc-site-width) !important;
  height: 100% !important;
  min-height: 0 !important;
  margin-inline: auto !important;
  padding-inline: var(--layout-spacing-horizontal, 16px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  position: relative !important;
}
html.mwc-theme .fcnmm-header__identity,
html.mwc-theme .fcnmm-header__spacer { display: none !important; }

/* Icon cluster — flex-centred on the band line. Neutralises the old
   absolute pinning AND the body.admin-bar magic-number variant. */
html.mwc-theme .fcnmm-header__icon-menu,
html.mwc-theme body.admin-bar .fcnmm-header__icon-menu {
  position: static !important;
  top: auto !important;
  right: auto !important;
  margin: 0 !important;
  pointer-events: auto !important;
}
html.mwc-theme .fcnmm-header .icon-menu._in-navigation {
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--mwc-icon-gap) !important;
}

/* ── Nav band — the single bar ─────────────────────────────────────── */
html.mwc-theme .main-navigation {
  margin: var(--mwcfix-band-gap) 0 0 !important;
  min-height: 0 !important;
  position: relative !important;
  z-index: 20 !important;
}
html.mwc-theme .main-navigation__wrapper {
  max-width: var(--mwc-site-width) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-inline: auto !important;
  padding-inline: var(--layout-spacing-horizontal, 16px) !important;
}
html.mwc-theme .main-navigation__left {
  height: var(--mwcfix-band-h) !important;
  min-height: var(--mwcfix-band-h) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* symmetric padding so centred links never slip under the icons */
  padding: 0 clamp(150px, 18vw, 240px) !important;
  overflow: visible !important;
}
html.mwc-theme .main-navigation__list {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}

/* Hamburger is a mobile control — never on desktop. */
@media (min-width: 783px) {
  html.mwc-theme .main-navigation__left .mobile-menu-button { display: none !important; }
}

/* ════════════════ MOBILE ≤ 782px ════════════════ */
@media (max-width: 782px) {
  :root.mwc-theme { --mwcfix-band-h: 52px; }

  /* No dead band: every header utility lives in the hamburger panel. */
  html.mwc-theme .fcnmm-header { display: none !important; }

  html.mwc-theme .main-navigation { margin-top: 10px !important; }

  /* Band = [hamburger | scrollable links]. */
  html.mwc-theme .main-navigation__left {
    height: var(--mwcfix-band-h) !important;
    min-height: var(--mwcfix-band-h) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 0 10px !important;
    overflow: hidden !important;
  }
  html.mwc-theme .main-navigation__left .mobile-menu-button {
    /* Fictioneer positions this absolutely — pull it back into the flex
       flow so it owns real space and the link strip can never slide
       beneath it. */
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 34px !important;
  }
  html.mwc-theme .mobile-menu-button__label { display: none !important; }

  /* THE overflow fix: the list itself scrolls; margin-inline auto centres
     it when it fits and scrolls from the true left edge when it doesn't. */
  html.mwc-theme .main-navigation__list {
    margin: 0 auto !important;
    padding: 0 14px !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    /* start-aligned content: centred + overflow clips BOTH edges and the
       left side becomes unreachable; the element itself centres via
       margin auto when everything fits. */
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  }
  html.mwc-theme .main-navigation__list::-webkit-scrollbar { display: none !important; }
  html.mwc-theme .main-navigation__list .menu-item { white-space: nowrap !important; }
  html.mwc-theme .main-navigation .menu-item + .menu-item::before { margin: 0 0.3rem !important; font-size: 0.72em !important; }
  html.mwc-theme .main-navigation .menu-item > a {
    font-size: 0.9rem !important;
    padding: 5px 6px !important;
  }
}