/* custom.css — additions for the plain multi-page build.
   The original stylesheet (index-DZfVRwSL.css) styled the nav as React
   <button> elements. This file re-points the same look at real <a> links
   so Home/About/Membership/etc. are separate pages instead of scroll targets. */

.brand, .join, .homeHero .primary { text-decoration: none; }

/* The detailed logo is 25% larger than the initial 60px replacement. */
.brand .headerLogo {
  display: block;
  width: auto;
  height: 75px;
}

.brand .headerLogo + b {
  font-size: 16.25px;
}

nav a {
  color: #4c5868;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 35px 0 31px;
  font-size: 14px;
  display: inline-block;
  text-decoration: none;
}
nav a.active { border-color: var(--red); color: var(--navy); font-weight: 700; }

.homeHero section a:not(.primary) {
  border: 1px solid var(--navy);
  color: var(--navy);
  background: transparent;
  padding: 14px 19px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mobileNav { display: none; }
.mobileNav.open { display: flex; }
.mobileNav a {
  border: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  background: #fff;
  padding: 14px;
  color: #142034;
  display: block;
  text-decoration: none;
}
.mobileNav a.active { color: var(--red); font-weight: 700; }

.search { align-items: center; }
.search input { padding: 12px 0; font-size: 15px; }

.viewAll { color: var(--red); font-weight: 700; text-decoration: none; display: inline-block; margin-top: 28px; }

.prices .membership-tier {
  cursor: pointer;
}
.prices .membership-tier.active { border: 3px solid var(--red); }
.prices .membership-tier label {
  background: var(--red);
  color: #fff;
  text-align: center;
  padding: 7px;
  font-size: 11px;
  position: absolute;
  top: -28px;
  left: -3px;
  right: -3px;
}
.prices .membership-tier.active button {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  cursor: pointer;
}
.prices .membership-tier:not(.active) button {
  opacity: .45;
  cursor: not-allowed;
}
.prices .membership-tier:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}