/*
 * Memberships: acf/membership-tiers and acf/membership-register.
 * Loaded only on pages carrying one of those blocks (block.json "style").
 * Colours, fonts and spacing are the site's own tokens, so each site that uses it
 * takes its own look. Mobile first; two columns from 768px. No letter-spacing.
 */

.membership-tiers,
.membership-register {
  padding-top: calc(var(--header-height, 80px) + var(--grid-gap, 1.5rem));
  padding-bottom: calc(var(--grid-gap, 1.5rem) * 2);
  color: var(--color-dark);
}

/* Under a hero slider the header offset is already taken care of: the heading sits
   straight beneath the image, so the slider's caption bar gives up its bottom padding. */
.block-slider:has(+ .membership-tiers, + .membership-register) .footer-bar {
  padding-bottom: 0;
}
.block-slider + .membership-tiers,
.block-slider + .membership-register {
  padding-top: 0;
}

.membership-tiers p,
.membership-register p,
.membership-tiers ul,
.membership-tiers dl,
.membership-tiers dd {
  margin: 0;
}

/* the page heading and intro */
.membership-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 640px;
  margin: 0 auto calc(var(--grid-gap, 1.5rem) * 1.5);
  text-align: center;
}
.membership-intro__heading {
  margin: 0;
  font-family: var(--feature-font, var(--header-font));
  font-weight: 400;
  font-size: var(--font-size-h4, 1.5rem);
  line-height: 1.2;
  text-transform: uppercase;
}
.membership-intro__text {
  line-height: 1.5;
}

/* bells */
.membership-bells {
  display: inline-flex;
  gap: 3px;
  flex: 0 0 auto;
}
.membership-bells svg {
  width: 20px;
  height: 20px;
  display: block;
  overflow: visible;
}

/* the ring: each bell swings from its crown, the clapper lags a beat behind and swings
   against it. --i (set per bell) staggers them so they ring one after another. */
.membership-bell__body,
.membership-bell__clapper {
  transform-box: view-box;
  transform-origin: 12px 3px;
}
.membership-bells.is-ringing svg.is-lit .membership-bell__body {
  animation: membership-ring 1.1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  animation-delay: calc(var(--i, 0) * 140ms);
}
.membership-bells.is-ringing svg.is-lit .membership-bell__clapper {
  animation: membership-clapper 1.1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  animation-delay: calc(var(--i, 0) * 140ms + 60ms);
}
@keyframes membership-ring {
  0%   { transform: rotate(0deg); }
  14%  { transform: rotate(16deg); }
  30%  { transform: rotate(-13deg); }
  46%  { transform: rotate(9deg); }
  62%  { transform: rotate(-5deg); }
  78%  { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}
@keyframes membership-clapper {
  0%   { transform: rotate(0deg); }
  14%  { transform: rotate(-6deg); }
  30%  { transform: rotate(14deg); }
  46%  { transform: rotate(-10deg); }
  62%  { transform: rotate(6deg); }
  78%  { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .membership-bells.is-ringing svg.is-lit g {
    animation: none;
  }
}

/* name, founding label, bells */
.membership-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}
.membership-heading__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.membership-heading__name {
  margin: 0;
  font-family: inherit;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.1;
  text-transform: none;
}
.membership-heading__price {
  font-size: 0.9rem;
  opacity: 0.8;
}

/* the cards */
.membership-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap, 1.5rem);
  align-items: start;
}
/* Side by side, memberships.js gives every summary the tallest one's height, so closed
   cards match and the links sit level. The summary never changes height when a card opens
   or closes, so nothing in it moves: opening only adds the list beneath. */
.membership-card {
  border: 1px solid var(--color-dark);
}
.membership-card__summary {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 20px;
  cursor: pointer;
  list-style: none;
}
.membership-card__summary::-webkit-details-marker {
  display: none;
}
.membership-card__summary:focus-visible,
.membership-compare__toggle:focus-visible {
  outline: 1px solid var(--color-feature);
  outline-offset: 2px;
}
.membership-card__points {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  list-style: none;
  line-height: 1.45;
}

/* one toggle, two labels: which shows follows the open state */
.membership-card__toggle,
.membership-compare__toggle {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
/* Both labels share one grid cell, so the toggle is always as wide as "More details".
   With display: none it changed width on close, and at 390px that tipped the links row
   onto two lines in the last frame: the card jumped 36px taller as it shut. */
.membership-card__toggle {
  display: inline-grid;
  justify-items: start;
}
.membership-card__toggle > span {
  grid-area: 1 / 1;
}
.membership-card__toggle > .membership-card__less,
details[open] > summary .membership-card__toggle > .membership-card__more {
  visibility: hidden;
}
details[open] > summary .membership-card__toggle > .membership-card__less {
  visibility: visible;
}
/* the comparison's toggle swaps its labels outright */
.membership-compare__toggle .membership-card__less,
details[open] > summary.membership-compare__toggle .membership-card__more {
  display: none;
}
details[open] > summary.membership-compare__toggle .membership-card__less {
  display: inline;
}

.membership-card__body {
  display: flex;
  flex-direction: column;
  padding: 0 20px 24px;
  overflow: hidden; /* while memberships.js eases the height */
}
.membership-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 28px;
  margin-top: auto; /* the links sit on the card's bottom edge, level across cards */
}
.membership-card__register {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}
.membership-card__register--end {
  align-self: center;
  margin-top: 22px;
}

/* what is included */
.membership-inclusions__row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 0;
  border-top: 1px solid color-mix(in srgb, var(--color-dark) 22%, transparent);
}
.membership-inclusions dt {
  font-size: 0.8rem;
  opacity: 0.75;
}
.membership-inclusions dd {
  line-height: 1.45;
}

/* the full comparison */
.membership-compare {
  margin-top: calc(var(--grid-gap, 1.5rem) * 1.5);
}
.membership-compare__toggle {
  display: block;
  width: max-content;
  margin: 0 auto;
  cursor: pointer;
  list-style: none;
}
.membership-compare__toggle::-webkit-details-marker {
  display: none;
}
.membership-compare__scroll {
  margin-top: var(--grid-gap, 1.5rem);
  overflow-x: auto;
}
.membership-compare__table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.membership-compare__table th,
.membership-compare__table td {
  padding: 12px 16px 12px 0;
  vertical-align: top;
  font-weight: 400;
  line-height: 1.45;
  border-top: 1px solid color-mix(in srgb, var(--color-dark) 22%, transparent);
}
.membership-compare__table thead th,
.membership-compare__table thead td {
  border-top: 0;
}
.membership-compare__table thead th span:last-child {
  display: block;
  margin-top: 6px;
  font-size: 1.1rem;
}
.membership-compare__table tbody th {
  width: 30%;
}
.membership-compare__shared td {
  text-align: center;
}

/* the register page */
.membership-register .membership-heading {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.membership-register .membership-heading__text {
  align-items: center;
}
.membership-register .membership-heading .membership-bells {
  order: -1;
}
.membership-register__back {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}
.membership-register__form {
  width: 100%;
}
.membership-register__frame {
  display: block;
  width: 100%;
  min-height: 900px; /* until the form reports its height */
  border: 0;
  overflow: hidden;
}

@media screen and (min-width: 768px) {
  .membership-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .membership-card__summary {
    padding: 30px 32px;
  }
  .membership-card__body {
    padding: 0 32px 32px;
  }
  .membership-heading__name {
    font-size: 1.9rem;
  }
  .membership-bells svg {
    width: 24px;
    height: 24px;
  }
}

/* Phones: no sideways scroll. Each row becomes its label across the top with the tiers'
   values side by side beneath it; the tier names head the two columns. */
@media screen and (max-width: 767px) {
  .membership-compare__table,
  .membership-compare__table thead,
  .membership-compare__table tbody {
    display: block;
  }
  .membership-compare__table tr {
    display: grid;
    grid-template-columns: repeat(var(--tiers, 2), minmax(0, 1fr));
    column-gap: 16px;
    border-top: 1px solid color-mix(in srgb, var(--color-dark) 22%, transparent);
    padding: 12px 0;
  }
  .membership-compare__table thead tr {
    border-top: 0;
    padding-top: 0;
  }
  .membership-compare__table thead td {
    display: none;
  }
  .membership-compare__table tbody th {
    grid-column: 1 / -1;
    width: auto;
    padding: 0 0 6px;
    font-size: 0.8rem;
    opacity: 0.75;
  }
  .membership-compare__table th,
  .membership-compare__table td {
    border: 0;
    padding: 0;
  }
  .membership-compare__shared td {
    grid-column: 1 / -1;
    text-align: left;
  }
}

/* The footer on membership pages. footer.php leaves the newsletter out here, and on the
   Health Club the footer's layout CSS rides inside that newsletter field, so it goes too.
   This lays the two remaining links side by side, centred under the logo. This file only
   loads on pages carrying a membership block. !important to beat Additional CSS. */
.site-footer .footer-content {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 48px;
}
.site-footer .footer-branding {
  flex: 0 0 100%;
}
.site-footer .footer-main {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.site-footer .footer-main .footer-misc {
  display: none !important;
}
.site-footer .footer-main .footer-column {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.site-footer .footer-base {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border: 0 !important;
}
.site-footer .footer-base .company-info {
  margin: 0 !important;
}