/* Nav bar, 2026 revision.
   Scoped to .nav2026 so it can run alongside the live nav in a preview.

   Note on main.css: it styles the bare `nav` element, and those rules match
   .nav2026 too. Its 1400px block sets nav{position:relative},
   nav .logo{width:100%} and nav .inner{flex-flow:row wrap;justify-content:
   center}, which is why anything narrower than 1400px used to fall apart. Every
   one of those is overridden explicitly below rather than left to chance.

   The bar collapses to the menu layout at 1299px, which is above every tablet
   in either orientation. Above that, the status pill is the flexible element,
   so a tight fit narrows the pill rather than overflowing the bar. */

:root {
  --nav-bg: #1c1c1c;
  --nav-bg-raised: #262626;
  --nav-text: #9fa4b0;
  --nav-text-strong: #f2f3f7;
  --nav-border: rgba(255, 255, 255, 0.1);
  --nav-open: #35c05f;
  --nav-warn: #f0a132;
  --nav-shut: #8a8f99;
  --nav-height: 85px;
}

.nav2026 {
  background-color: var(--nav-bg);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 500;
  font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Overrides main.css `nav .inner`, which would wrap and centre these below
   1400px.

   No horizontal padding: .inner is the site's own 1400px centred content box,
   so the logo and the Join now button line up exactly with the page content
   beneath them. Padding here inset the bar by 25px and broke that line. The
   collapsed layout adds padding back, where the page's own sections do the
   same and nothing would otherwise keep the logo off the screen edge. */
.nav2026 .inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  padding: 0;
  color: #fff;
  min-width: 0;
}

/* Overrides main.css `nav .logo { width: 100%; text-align: center }`. */
.nav2026 .logo {
  height: var(--nav-height);
  width: auto;
  text-align: left;
  padding: 15px 0;
  flex: 0 0 auto;
}

.nav2026 .logo img {
  height: 100%;
  width: auto;
  display: block;
}

/* --- Live status pill --- */

.gymStatus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  border: 1px solid var(--nav-border);
  border-radius: 40px;
  background-color: rgba(255, 255, 255, 0.04);
  font-size: 13px;
  font-weight: bold;
  line-height: 1.25;
  color: var(--nav-text-strong);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.gymStatus:hover,
.gymStatus:focus-visible {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
  text-decoration: none;
}

/* The bar is fixed on desktop, so an anchor jump would land underneath it. */
#openingTimes {
  scroll-margin-top: 105px;
}

@media only screen and (max-width: 1299px) {
  #openingTimes {
    scroll-margin-top: 20px;
  }
}

/* The one elastic item in the bar: it narrows and wraps to a second line
   before anything else is allowed to overflow. */
.gymStatus--bar {
  flex: 0 1 auto;
  min-width: 112px;
}

.gymStatusDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--nav-shut);
  flex: 0 0 auto;
}

.gymStatus--open .gymStatusDot {
  background-color: var(--nav-open);
  box-shadow: 0 0 0 0 rgba(53, 192, 95, 0.6);
  animation: gymStatusPulse 2.4s infinite;
}

.gymStatus--closingSoon .gymStatusDot,
.gymStatus--openingSoon .gymStatusDot,
.gymStatus--bankHoliday .gymStatusDot {
  background-color: var(--nav-warn);
}

@keyframes gymStatusPulse {
  70% {
    box-shadow: 0 0 0 7px rgba(53, 192, 95, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(53, 192, 95, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gymStatus--open .gymStatusDot {
    animation: none;
  }
}

.gymStatus--panel {
  display: none;
}

/* --- Links --- */

.nav2026 .navPanel {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex: 0 0 auto;
}

.nav2026 .navPanelHeader {
  display: none;
}

.nav2026 .navMain {
  display: flex;
  align-items: center;
}

.nav2026 .navGroup,
.nav2026 .navLink {
  position: relative;
}

.nav2026 .navLink {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 32px 11px;
  text-decoration: none;
  color: var(--nav-text);
  font-weight: bold;
  font-size: 16px;
  font-family: inherit;
  white-space: nowrap;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
}

.nav2026 .navLink:hover,
.nav2026 .navLink:focus-visible {
  color: var(--nav-text-strong);
}

.nav2026 .navLink.selected {
  color: #fff;
}

.nav2026 .navLink.selected::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 22px;
  height: 2px;
  background-color: var(--red, #ca1822);
}

.nav2026 .navGroupToggle i {
  font-size: 17px;
  transition: transform 0.2s ease;
}

/* --- Dropdowns ---
   .navDropdown is an invisible positioning shell whose top padding bridges the
   gap to the bar, so the pointer never crosses dead space and loses the hover.
   .navDropdownInner is the visible card. */

.nav2026 .navDropdown {
  position: absolute;
  top: 100%;
  left: -4px;
  padding-top: 9px;
  min-width: 302px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top left;
  transition:
    opacity 0.19s ease,
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.3s;
}

.nav2026 .navGroup:last-of-type .navDropdown {
  left: auto;
  right: -4px;
  transform-origin: top right;
}

.nav2026 .navDropdownInner {
  position: relative;
  padding: 7px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background-image: linear-gradient(180deg, #2c2d31 0%, #1e1f21 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 20px 44px -14px rgba(0, 0, 0, 0.8),
    0 5px 14px rgba(0, 0, 0, 0.32);
}

/* Little diamond tying the card back to the item that opened it. */
.nav2026 .navDropdownInner::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 26px;
  width: 11px;
  height: 11px;
  transform: rotate(45deg);
  background-color: #2c2d31;
  border-left: 1px solid rgba(255, 255, 255, 0.13);
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 2px 0 0 0;
}

.nav2026 .navGroup:last-of-type .navDropdownInner::before {
  left: auto;
  right: 26px;
}

.nav2026 .navGroup:hover .navDropdown,
.nav2026 .navGroup:focus-within .navDropdown,
.nav2026 .navGroup.open .navDropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.nav2026 .navGroup:hover .navGroupToggle,
.nav2026 .navGroup.open .navGroupToggle {
  color: var(--nav-text-strong);
}

.nav2026 .navGroup:hover .navGroupToggle i,
.nav2026 .navGroup.open .navGroupToggle i {
  transform: rotate(180deg);
}

.nav2026 .navDropdownLink {
  display: block;
  position: relative;
  padding: 10px 13px;
  border-radius: 9px;
  text-decoration: none;
  color: var(--nav-text);
  opacity: 0;
  transform: translateY(-5px);
  transition:
    opacity 0.22s ease,
    transform 0.26s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.14s ease;
}

/* The items arrive just behind the card, one after another. */
.nav2026 .navGroup:hover .navDropdownLink,
.nav2026 .navGroup:focus-within .navDropdownLink,
.nav2026 .navGroup.open .navDropdownLink {
  opacity: 1;
  transform: translateY(0);
}

/* Scoped to the desktop bar: nth-child beats the collapsed-layout reset on
   specificity, so left unscoped these delays would follow it onto mobile. */
@media only screen and (min-width: 1300px) {
  .nav2026 .navDropdownLink:nth-child(1) { transition-delay: 0.02s, 0.02s, 0s; }
  .nav2026 .navDropdownLink:nth-child(2) { transition-delay: 0.05s, 0.05s, 0s; }
  .nav2026 .navDropdownLink:nth-child(3) { transition-delay: 0.08s, 0.08s, 0s; }
  .nav2026 .navDropdownLink:nth-child(4) { transition-delay: 0.11s, 0.11s, 0s; }
  .nav2026 .navDropdownLink:nth-child(5) { transition-delay: 0.14s, 0.14s, 0s; }
  .nav2026 .navDropdownLink:nth-child(6) { transition-delay: 0.17s, 0.17s, 0s; }
}

.nav2026 .navDropdownLink strong {
  display: block;
  color: var(--nav-text-strong);
  font-size: 15px;
  font-weight: bold;
}

.nav2026 .navDropdownLink span {
  display: block;
  font-size: 12.5px;
  color: #9096a1;
  margin-top: 2px;
  font-weight: normal;
  line-height: 1.35;
}

.nav2026 .navDropdownLink:hover,
.nav2026 .navDropdownLink:focus-visible {
  background-color: rgba(255, 255, 255, 0.075);
}

/* Current page: a red edge marker and a neutral lift, rather than a wash of
   translucent red, which went muddy against the dark card. */
.nav2026 .navDropdownLink.selected {
  background-color: rgba(255, 255, 255, 0.055);
}

.nav2026 .navDropdownLink.selected::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 11px;
  bottom: 11px;
  width: 3px;
  border-radius: 3px;
  background-color: var(--red, #ca1822);
}

.nav2026 .navDropdownLink.selected strong {
  color: #fff;
}

.nav2026 .navDropdownLink.selected span {
  color: #a7adb8;
}

/* --- Buttons --- */

.nav2026 .navActions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
}

.nav2026 .navBtn {
  display: inline-block;
  padding: 11px 18px;
  border-radius: 40px;
  text-decoration: none;
  font-weight: bold;
  font-size: 15px;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.nav2026 .navBtnPrimary {
  background-color: var(--red, #ca1822);
  color: #fff;
}

.nav2026 .navBtnPrimary:hover {
  background-color: var(--red-hov, #921118);
}

.nav2026 .navBtnGhost {
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  padding: 10px 17px;
}

.nav2026 .navBtnGhost:hover {
  border-color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
}

/* --- Burger, hidden until the bar collapses --- */

.nav2026Burger {
  display: none;
  width: 32px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  flex: 0 0 auto;
  margin-left: auto;
}

.nav2026Burger span {
  display: block;
  height: 3px;
  width: 100%;
  border-radius: 3px;
  background-color: #fff;
}

/* Inside .nav2026 so it shares the nav's stacking context and sits under the
   panel. As a sibling of the nav it painted over the panel instead. */
.nav2026Cover {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.55);
  z-index: 900;
}

/* --- Collapsed layout: everything below 1300px --- */

@media only screen and (max-width: 1299px) {
  /* Sticky rather than fixed, because the collapsed bar's height varies with
     the status text. main.css reserves 85px of body padding for the fixed
     desktop bar; in flow that padding is just a white strip above the nav,
     which is where the gap at the top was coming from. */
  .nav2026 {
    position: sticky;
    top: 0;
  }

  body {
    padding-top: 0;
  }

  .nav2026 .inner {
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 0 20px 12px;
  }

  .nav2026 .logo {
    height: 74px;
    padding: 12px 0;
  }

  .nav2026Burger {
    display: flex;
  }

  .gymStatus--bar {
    order: 3;
    flex: 1 0 100%;
    justify-content: center;
    text-align: center;
    font-size: 12.5px;
  }

  .gymStatus--panel {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    margin-bottom: 4px;
  }

  .nav2026 .navPanel {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100%;
    width: 100%;
    max-width: 380px;
    background-color: #0d0d0d;
    padding: 22px;
    z-index: 1000;
    overflow-y: auto;
    display: block;
    margin-left: 0;
    transition: right 0.32s ease;
  }

  .nav2026 .navPanel.active {
    right: 0;
  }

  .nav2026 .navPanelHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ccc;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1.5px;
    margin-bottom: 16px;
  }

  .nav2026 .navPanelClose {
    background: none;
    border: none;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
  }

  .nav2026 .navMain {
    display: block;
    margin-top: 12px;
  }

  .nav2026 .navLink {
    width: 100%;
    justify-content: space-between;
    padding: 14px 12px;
    font-size: 18px;
    border-radius: 6px;
    white-space: normal;
  }

  .nav2026 .navLink.selected {
    background-color: var(--red, #ca1822);
    color: #fff;
  }

  .nav2026 .navLink.selected::after {
    display: none;
  }

  /* Accordion, not hover: hovering does nothing on a touchscreen. */
  .nav2026 .navDropdown,
  .nav2026 .navGroup:last-of-type .navDropdown {
    position: static;
    left: auto;
    right: auto;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s ease;
  }

  .nav2026 .navGroup.open .navDropdown {
    grid-template-rows: 1fr;
  }

  .nav2026 .navDropdown {
    padding-top: 0;
  }

  .nav2026 .navDropdownInner {
    overflow: hidden;
    padding: 0 0 0 12px;
    background-image: none;
    border: none;
    border-left: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    box-shadow: none;
    margin-left: 12px;
  }

  .nav2026 .navDropdownInner::before {
    display: none;
  }

  /* The accordion already animates its own height; the per-item stagger would
     only make it feel slow. */
  .nav2026 .navDropdownLink {
    opacity: 1;
    transform: none;
    transition: background-color 0.14s ease;
    transition-delay: 0s;
  }

  /* Hover must not open the accordion, or a stray touch leaves it stuck. */
  .nav2026 .navGroup:hover .navDropdown,
  .nav2026 .navGroup:focus-within .navDropdown {
    grid-template-rows: 0fr;
  }

  .nav2026 .navGroup.open .navDropdown,
  .nav2026 .navGroup.open:hover .navDropdown,
  .nav2026 .navGroup.open:focus-within .navDropdown {
    grid-template-rows: 1fr;
  }

  .nav2026 .navGroup:hover .navGroupToggle i {
    transform: none;
  }

  .nav2026 .navGroup.open .navGroupToggle i {
    transform: rotate(180deg);
  }

  .nav2026 .navDropdownLink {
    padding: 11px 10px;
  }

  .nav2026 .navActions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 22px 0 0;
  }

  .nav2026 .navBtn {
    text-align: center;
    padding: 14px 10px;
    font-size: 16px;
  }
}

/* Roomier tablets: the status fits on the same row as the logo. */
@media only screen and (min-width: 620px) and (max-width: 1299px) {
  .nav2026 .inner {
    flex-wrap: nowrap;
    padding-bottom: 0;
  }

  .gymStatus--bar {
    order: 0;
    flex: 0 1 auto;
    margin: 0 auto;
  }
}

@media only screen and (max-width: 420px) {
  .nav2026 .logo {
    height: 64px;
  }

  .nav2026 .navActions {
    grid-template-columns: 1fr;
  }

  .nav2026 .navPanel {
    padding: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav2026 .navDropdown,
  .nav2026 .navDropdownLink {
    transition-duration: 0.01ms;
    transition-delay: 0s;
    transform: none;
  }

  .nav2026 .navGroup:hover .navDropdown,
  .nav2026 .navGroup:focus-within .navDropdown,
  .nav2026 .navGroup.open .navDropdown {
    transform: none;
  }
}