/**
 * The membership choice cards.
 *
 * The radio stays in the DOM and focusable rather than display:none, so the
 * card is reachable by keyboard and announced by screen readers. Selection is
 * matched with :has() on the card rather than a sibling combinator, because
 * the input is not a sibling of the label - Drupal nests it in its own
 * element - and a sibling selector silently never matches.
 */
.membership-cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  align-items: stretch;
}

.membership-card {
  position: relative;
  display: flex;
}

.membership-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

/* The label carries the whole card, so clicking anywhere on it selects. It
   grows to fill the card rather than being given a height, which would let it
   overflow onto whatever follows. */
.membership-card__label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.5rem;
  border: 2px solid #d5dde2;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.membership-card__label:hover {
  border-color: #14606d;
}

.membership-card:has(input[type="radio"]:checked) .membership-card__label {
  border-color: #14606d;
  box-shadow: inset 0 0 0 1px #14606d;
}

.membership-card:has(input[type="radio"]:focus-visible) .membership-card__label {
  outline: 2px solid #14606d;
  outline-offset: 2px;
}

.membership-card__title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
}

.membership-card__price {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.membership-card__description {
  color: #5b6b78;
}

.membership-card__action {
  margin-top: auto;
  padding-top: 0.75rem;
  font-weight: 600;
  color: #14606d;
}

@media (prefers-reduced-motion: reduce) {
  .membership-card__label {
    transition: none;
  }
}

/**
 * The submit stays out of the way until a Membership is chosen, so the only
 * thing to do on arriving at the page is choose one.
 *
 * Done in CSS rather than JavaScript so it fails safe: if :has() is
 * unsupported or the stylesheet does not load, the button is simply visible,
 * which is how the page behaved before. Hiding it with JavaScript would strand
 * anyone whose script did not run. The form is validated server-side either
 * way - #required on the variation element - so this is a nicety, not the
 * enforcement.
 */
.membership-cards-form .form-actions {
  display: none;
}

.membership-cards-form:has(.membership-card input[type="radio"]:checked) .form-actions {
  display: block;
}

/**
 * The automatic renewal question.
 *
 * The question is the decision on the page, so it is set larger and bolder
 * than the surrounding checkout labels and given room on either side.
 *
 * The space above goes on the fieldset, not the legend. A <legend> is laid out
 * in the fieldset's border box, so margin-top on it moves nothing - measured
 * as a 0px gap - while margin-bottom works normally.
 */
.membership-renewal-choice fieldset {
  margin-top: 2rem;
}

.membership-renewal-choice legend {
  display: block;
  width: 100%;
  margin: 0 0 1rem;
}

.membership-renewal-choice legend .fieldset-legend {
  font-size: 1.125rem;
  font-weight: 700;
}

.membership-renewal-choice .membership-cards {
  margin-bottom: 2.5rem;
}

/* The base theme makes every paragraph, and its first child div, a flex
   container. That leaves this form a flex item sized to its own content -
   about 25rem - rather than to the column it was dropped into, so the cards
   never get the room to sit side by side. The theme rule carries a :not()
   opt-out list of paragraph types, but adding to it means releasing the
   shared theme for every new type; claiming the width here is enough. */
.paragraph--type--membership-choice > .app-membership-choice,
.app-membership-choice > * {
  width: 100%;
}

/**
 * The widget's own headings.
 *
 * The step legends are the page's headings, not form labels, so they are sized
 * as headings and the uppercasing the theme applies to legends is dropped -
 * "CHOOSE YOUR MEMBERSHIP" was shouting where a title was wanted.
 */
.app-membership-choice legend .fieldset-legend,
.membership-choice__chosen-name {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: normal;
}

.app-membership-choice legend {
  display: block;
  width: 100%;
  margin: 0 0 1rem;
}

/* The strapline arrives as the fieldset description, which Drupal marks up as
   .description; it is body copy under the heading, not a form hint. */
.app-membership-choice .description {
  margin: 0.25rem 0 1.5rem;
  font-size: 1rem;
  color: inherit;
}

.membership-choice__chosen {
  margin-bottom: 1.5rem;
}

.membership-choice__chosen-name {
  margin: 0;
}

.membership-choice__chosen-price {
  margin: 0.25rem 0 0;
}

/* On step two the Membership name is the heading and the question sits a step
   below it. Matched through the chosen-Membership block rather than the
   fieldset id: Drupal appends a random suffix to that id (edit-renew--
   jhd6DfUyKGk--wrapper), so an id selector never matches twice. */
.app-membership-choice:has(.membership-choice__chosen) legend .fieldset-legend {
  font-size: 1.25rem;
}

/**
 * The Ajax spinner.
 *
 * Drupal drops its throbber inline, next to the control that triggered it,
 * which pushed the card it was sitting beside out of shape. Take it out of the
 * flow and centre it over the whole set instead, with the cards dimmed and
 * unclickable while the request is out, so the wait reads as the widget being
 * busy rather than as the layout breaking.
 */
.membership-cards {
  position: relative;
}

/* The dimming goes on the label, not the card: Drupal inserts the throbber
   inside the card the member clicked, and opacity on an ancestor fades its
   descendants too - which would leave the spinner at 45% along with the card
   it is meant to stand out against. The label is the throbber's sibling, so
   dimming it leaves the spinner at full strength. */
.membership-cards:has(.ajax-progress-throbber) .membership-card {
  pointer-events: none;
}

.membership-cards:has(.ajax-progress-throbber) .membership-card__label {
  opacity: 0.45;
  transition: opacity 0.15s ease-out;
}

.membership-cards .ajax-progress-throbber {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  margin: 0;
  padding: 0;
}

.membership-cards .ajax-progress-throbber .throbber {
  margin: 0;
  padding: 0;
}