/* Hyper Endurance Fitness — shared mobile navigation
   ---------------------------------------------------
   The Membership, Articles and Terms pages are built on the .site-header /
   .site-nav header rather than the .nav header used on the home page. They
   previously hid every link except Join below their own breakpoint, leaving
   no way to reach the rest of the site on a phone. This adds the same
   hamburger dropdown the home page has, on one shared breakpoint (940px).

   Load this AFTER the page's own styles so the collapse rules win. */

.nav-toggle {
  display: none;
  flex: 0 0 auto;
  width: 44px;
  height: 40px;
  padding: 0;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--ease, 300ms cubic-bezier(0.4, 0, 0.2, 1));
}

.nav-toggle:hover { border-color: rgba(195, 164, 101, 0.5); }

.nav-toggle-bar {
  display: block;
  position: relative;
  width: 18px;
  height: 1.5px;
  background: var(--text, #f6f6f7);
  transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-toggle-bar::before,
.nav-toggle-bar::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 1.5px;
  background: var(--text, #f6f6f7);
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1),
              top 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-toggle-bar::before { top: -6px; }
.nav-toggle-bar::after  { top: 6px; }

.site-header.nav-open .nav-toggle-bar { background: transparent; }
.site-header.nav-open .nav-toggle-bar::before { top: 0; transform: rotate(45deg); }
.site-header.nav-open .nav-toggle-bar::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 940px) {
  .nav-toggle { display: flex; }

  /* The header is sticky, so it is the containing block for the panel. */
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: block;
    gap: 0;
    /* Opaque, not translucent: the panel sits over hero headlines and even a
       few percent of bleed-through ghosts them behind the links. */
    background: #0a0b0c;
    border-bottom: 1px solid var(--hair, rgba(255, 255, 255, 0.13));
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 360ms cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 360ms;
  }

  .site-header.nav-open .site-nav {
    max-height: 520px;
    visibility: visible;
    transition: max-height 360ms cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s;
  }

  /* :not() is repeated so this matches the specificity of the page-level
     rules it replaces on any page that still carries one. */
  .site-nav a,
  .site-nav a:not(.nav-join) {
    display: block;
    margin: 0;
    padding: 17px 24px;
    font-size: 14px;
    letter-spacing: 0.01em;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 0;
  }

  .site-nav a[aria-current="page"] {
    color: var(--gold, #c3a465);
    box-shadow: inset 2px 0 0 var(--gold, #c3a465);
  }

  .site-nav a.nav-join {
    background: rgba(195, 164, 101, 0.09);
    font-weight: 600;
  }

  .site-nav a.nav-join:hover {
    background: rgba(195, 164, 101, 0.18);
    color: var(--gold, #c3a465) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav,
  .site-header.nav-open .site-nav,
  .nav-toggle-bar,
  .nav-toggle-bar::before,
  .nav-toggle-bar::after { transition-duration: 0.01ms !important; }
}

/* Testimonials was missing from this header and has now been added, taking the
   row to seven links. Between the collapse breakpoint and roughly 1080px that
   row would outgrow the shell and wrap under the brand, so tighten the spacing
   across that band only — above it the default 26px gap still fits. */
@media (min-width: 941px) and (max-width: 1080px) {
  .site-nav { gap: 15px; }
  .site-nav a { font-size: 12.5px; }
  .site-nav a.nav-join { padding-left: 13px; padding-right: 13px; }
}

/* ---------------------------------------------------------------
   Footer and inline link tap targets on touch screens.
   The links were rendering around 20px tall, under the 24px
   minimum in WCAG 2.5.8. The visible text is unchanged; only the
   hit area grows, so the layout stays as designed.
   --------------------------------------------------------------- */
@media (max-width: 760px) {
  .footer-nav a,
  footer nav a {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
  }
  .footer-contact a,
  .foot-contact a {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
  }
}

/* The menu button had outline:none with nothing put back, so a keyboard
   user could not see where they were. */
.nav-toggle:focus-visible{
  outline:2px solid var(--gold, #c3a465);
  outline-offset:3px;
  border-radius:8px;
}