/* Contacts screens: the animated backdrop slot, and the surfaces sitting over it.

   The host is an opaque layer that fades in over the static gradient once an
   effect has a context, so the swap is a crossfade rather than a cut. The
   `.section` keeps its `background-image` on purpose: it is the fallback that
   stays visible on phones, under `prefers-reduced-motion`, and on devices the
   effect cannot run on, where the script never adds `.has-contact-backdrop`.

   Whichever effect script the page loads drives this same element, so swapping
   concepts is a one-line change in `contacts.njk`. */

.contact-backdrop {
  z-index: 0;
  pointer-events: none;
  touch-action: none;
  opacity: 0;
  background-color: var(--blue-dark);
  transition: opacity .8s ease;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.has-contact-backdrop .contact-backdrop {
  opacity: 1;
}

.contact-backdrop canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Review cards. The base rule in halo-lab.css paints an opaque
   #13132b -> #1a1a33 gradient, which reads as a flat panel now that there is a
   moving backdrop behind it. Same two stops at 80% so the veil tints the card
   as it drifts past; only the background is translucent, so the logo, quote,
   and author stay at full strength. */

.contact-reviews__card {
  background-image: linear-gradient(270deg, rgba(19, 19, 43, .8) 23%, rgba(26, 26, 51, .8));
}

/* Step counter beside the first step's button. `.form__field` lays its children
   out as stretched flex items, so without this the "1/2" would sit at the top of
   the button's 3rem row rather than level with its label. */

.contact-form__step {
  align-self: center;
}

/* `.form__field` separates its children by 2rem, which is the right rhythm
   between the button row and the policy text below it but too wide to read as a
   counter attached to the button. Only the column gap is narrowed, so the
   vertical spacing in the block is untouched. */

.form__field.is--bottom,
.form__field.is--submit {
  column-gap: .75rem;
}

/* Review card author. Name and role both inherit .875rem from
   `.contact-reviews__author-text-wrap`, so the role carries the same weight as
   the name it belongs to. An em rather than a rem keeps the step proportional at
   the smaller size the wrap switches to below 991px. */

.contact-reviews__author-text-wrap .opacity-60 {
  font-size: .9em;
}

/* FAQ close button. The shared component ships with `transition: all .4s`, an
   icon already lifted to `z-index: 2`, and a `:hover` that only resets an
   opacity it never lowered — the slot for a backdrop was there and nothing
   filled it, so the control gave no feedback at all. On hover a tinted disc
   scales up behind the glyph and the glyph turns a quarter turn. Scoped to
   `.contact-faq` so the video and image modals keep their own close button. */

.contact-faq .button-close {
  border-radius: 50%;
}

.contact-faq .button-close:before {
  content: "";
  background-color: var(--blue-dark-10);
  border-radius: 50%;
  opacity: 0;
  transition: transform .4s cubic-bezier(.14, 0, 0, 1.01), opacity .3s ease;
  position: absolute;
  inset: -.375rem;
  transform: scale(.4);
}

.contact-faq .button-close__icon {
  transition: transform .4s cubic-bezier(.14, 0, 0, 1.01);
}

.contact-faq .button-close:hover:before {
  opacity: 1;
  transform: scale(1);
}

.contact-faq .button-close:hover .button-close__icon {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  /* Keep the disc as the hover cue, drop the travel. */

  .contact-faq .button-close:before {
    transition: opacity .3s ease;
    transform: none;
  }

  .contact-faq .button-close__icon,
  .contact-faq .button-close:hover .button-close__icon {
    transition: none;
    transform: none;
  }
}

/* Short viewports. The site's rem is tied to viewport width (1.1vw), but the
   height of a laptop screen does not grow with its width, so on a wide-but-short
   display the card's 40.875rem floor plus the section and container padding asks
   for more room than there is and the page scrolls — a page built to fill exactly
   one screen. The rem caps at 20px, so the layout wants roughly 958px of height on
   a wide display, while a Windows laptop offers about 750px once tabs, address bar
   and taskbar are subtracted. Below 1000px the card falls back to its content
   height and the vertical rhythm tightens just enough to fit. */

@media screen and (max-height: 1000px) {
  /* Fill the space that is actually available instead of collapsing to content.
     The FAQ panel and the reviews strip are absolutely positioned against this
     card's box, so a card that shrinks to its own content leaves the FAQ shorter
     than its five questions and they spill out of the white panel. */

  .contact-steps {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .container.mod--new-contact {
    padding-bottom: 2.5rem;
  }

  /* The FAQ panel is sized by the card behind it and its five questions have no
     room to spare — they already spill by a few pixels on the live site at this
     height, and the shorter card here turns that into a visible overflow, since
     the panel does not clip. Reclaim the space from its own padding and the gap
     between questions. */

  .contact-faq {
    padding-top: 2.5rem;
    padding-bottom: 2rem;
  }

  .contact-faq__list {
    grid-row-gap: .75rem;
  }
}

/* Step one's dead space. The card was floored at 40.875rem, which is more than
   step one needs, and `.form__field.is--bottom` pins the button block to the
   bottom, so the whole difference collected as one hole above the button — 83px
   on a desktop and 185px on a phone, where the floor was tied to the viewport
   rather than to the content.

   Sized after the health site's contacts card, whose floor is "step one's own
   height, so the card neither leaves a strip of dead space under the policy line
   nor shrinks when step two takes over". Measured here rather than copied: step
   one comes to 38.25rem, so that is the floor, and the textarea keeps stretching
   into whatever room step two has left, which is what keeps both steps the same
   height and neither of them holed.

   The old floor moves to `.contact-container` — the box the FAQ panel is stretched
   against, since it is the panel's only positioned ancestor. The panel keeps the
   height it had, the page still fills one screen, and the card sits at its own
   height, centred in it by the `align-items: center` already there. */

@media screen and (min-width: 992px) {
  .contact-steps {
    min-height: 38.25rem;
  }

  .contact-container {
    min-height: 40.875rem;
  }
}

/* The short-viewport floor was written for wide-but-short laptops, and a phone is
   always shorter than 1000px, so it had been inflating the card there too — the
   185px hole. It belongs to the desktop layout, where the FAQ has to be held up;
   below 992px the panel is `display: none` and the card's own per-breakpoint
   floors already match step one. */

@media screen and (max-height: 1000px) and (min-width: 992px) {
  .contact-container {
    min-height: min(40.875rem, calc(100vh - 6rem));
  }

  .contact-steps {
    min-height: min(38.25rem, calc(100vh - 6rem));
  }
}

/* Step counter on step two. Below 480px `.form-submit-wrap` is given `width: 100%`
   for every form on the site — the newsletter and footer buttons want to be full
   width on a phone — and on this step that takes the whole row, so the "2/2"
   wrapped onto a line of its own while step one's "1/2" sits beside its button.
   The wrap goes back to its content width here so both steps read the same. */

@media screen and (max-width: 479px) {
  .form__field.is--submit .form-submit-wrap {
    width: auto;
  }
}