/* ==========================================================================
   SHARED FORM SYSTEM
   The Careers form is the visual source of truth for every site form:
   a Near White panel, opaque Sky Blue field blocks, square geometry,
   Deep Evergreen text, and one consistent 14px grid rhythm.
   ========================================================================== */

:root {
  --form-panel: var(--white, #f6f5f3);
  --form-field: #e0e8ef;
  --form-ink: var(--green-strong, #26503c);
  --form-muted: rgba(38, 80, 60, 0.68);
  --form-gap: 14px;
  --form-panel-pad: clamp(16px, 2.5vw, 28px);
}

/* Full form surfaces. The compact footer signup remains part of the footer
   column, but its control uses the same field colour below. */
body[data-page] :is(
  .contact-form-panel,
  .career-form,
  .hc__form,
  .js-review-form,
  .auth-form,
  .portal-form,
  .newsletter-form
) {
  padding: var(--form-panel-pad);
  border: 0;
  border-radius: 0;
  background: var(--form-panel);
  box-shadow: none;
  color: var(--form-ink);
}

body[data-page] :is(.auth-form, .portal-form) {
  display: grid;
  gap: var(--form-gap);
}

body[data-page] :is(
  .contact-form-panel,
  .career-form,
  .hc__form,
  .js-review-form,
  .auth-form,
  .portal-form,
  .newsletter-form
) :is(.form-row, .career-form__grid) {
  gap: var(--form-gap);
}

body[data-page] :is(
  .contact-form-panel,
  .career-form,
  .hc__form,
  .js-review-form,
  .auth-form,
  .portal-form,
  .newsletter-form
) .field {
  min-width: 0;
  min-height: 88px;
  margin: 0;
  padding: 12px;
  border: 0;
  border-radius: 0;
  background: var(--form-field) !important;
  box-shadow: none !important;
  color: var(--form-ink);
  opacity: 1;
  transform: none !important;
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

body[data-page] :is(
  .contact-form-panel,
  .career-form,
  .hc__form,
  .js-review-form,
  .auth-form,
  .portal-form,
  .newsletter-form
) .field:focus-within {
  background: var(--form-field) !important;
  box-shadow: inset 0 0 0 2px var(--form-ink) !important;
}

body[data-page] :is(
  .contact-form-panel,
  .career-form,
  .hc__form,
  .js-review-form,
  .auth-form,
  .portal-form,
  .newsletter-form
) .field label {
  display: block;
  margin: 0 0 6px;
  color: var(--form-ink) !important;
  line-height: 1.35;
}

body[data-page] :is(
  .contact-form-panel,
  .career-form,
  .hc__form,
  .js-review-form,
  .auth-form,
  .portal-form,
  .newsletter-form
) .field :is(input, select, textarea) {
  width: 100%;
  min-height: 44px;
  padding: 6px 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--form-ink) !important;
  font: inherit;
  opacity: 1;
  outline: 0;
}

body[data-page] :is(
  .contact-form-panel,
  .career-form,
  .hc__form,
  .js-review-form,
  .auth-form,
  .portal-form,
  .newsletter-form
) .field textarea {
  height: 100px;
  min-height: 100px;
  resize: vertical;
}

body[data-page] :is(
  .contact-form-panel,
  .career-form,
  .hc__form,
  .js-review-form,
  .auth-form,
  .portal-form,
  .newsletter-form
) .field :is(input, textarea)::placeholder {
  color: var(--form-muted);
  opacity: 1;
}

body[data-page] :is(
  .contact-form-panel,
  .career-form,
  .hc__form,
  .js-review-form,
  .auth-form,
  .portal-form,
  .newsletter-form
) :is(.field-note, .auth-help, .form-status, .color-gray-light, .color-green) {
  color: var(--form-ink) !important;
}

/* Keep page-specific full-width fields on the same compact scale. */
body[data-page='contact'] .contact-form-panel .field.full,
body[data-page='contact'] .call-form .field.full,
body[data-page='book'] .contact-form-panel .field--note {
  min-height: 0;
}

body[data-page='contact'] .contact-form-panel .field textarea,
body[data-page='contact'] .call-form .field textarea {
  min-height: 100px;
}

body[data-page='contact'] .newsletter-form {
  padding: var(--form-panel-pad);
}

body[data-page] .contact-form-panel .contact-form-head {
  margin-bottom: 16px;
}

/* Review-only controls join the same tile system. */
body[data-page='review'] .js-review-form .rv-rating {
  margin: 0;
  padding: 12px;
  border: 0;
  border-radius: 0;
  background: var(--form-field);
  color: var(--form-ink);
}
body[data-page='review'] .rv-rating legend,
body[data-page='review'] .rv-rating__opt span { color: var(--form-ink); }
body[data-page='review'] .rv-rating__opt span {
  border: 0;
  border-radius: 0;
  background: var(--form-panel);
}
body[data-page='review'] .rv-consent { border: 0; }

/* Compact newsletter in every shared footer. */
.footer-newsletter__row {
  border-radius: 0;
  background: var(--form-field);
}
.footer-newsletter__row input {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--form-ink);
}
.footer-newsletter__row input::placeholder { color: var(--form-muted); opacity: 1; }

/* The human-support inbox is a standalone utility page without data-page. */
.auth input,
.reply textarea {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--form-field, #e0e8ef) !important;
  color: var(--form-ink, #26503c) !important;
}
.reply { background: var(--form-panel, #f6f5f3); }

@media (max-width: 680px) {
  body[data-page] :is(
    .contact-form-panel,
    .career-form,
    .hc__form,
    .js-review-form,
    .auth-form,
    .portal-form,
    .newsletter-form
  ) {
    padding: 16px;
  }

  body[data-page] :is(
    .contact-form-panel,
    .career-form,
    .hc__form,
    .js-review-form,
    .auth-form,
    .portal-form,
    .newsletter-form
  ) .field {
    min-height: 88px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page] form .field { transition: none; }
}

/* A successful public form takes over the full viewport. The underlying page
   remains intact for browser history, while its navigation and utilities are
   deliberately hidden until the visitor follows the Back home action. */
body.form-success-open {
  overflow: hidden !important;
}

body.form-success-open :is(
  header[data-shared-header],
  footer[data-shared-footer],
  .modal-menu,
  .floating-scroll-menu,
  .lc-chat,
  .lc-consent
) {
  visibility: hidden !important;
  pointer-events: none !important;
}

.form-success-screen {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: auto;
  padding: clamp(24px, 5vw, 80px);
  border: 0;
  background: var(--leaf, #479c73);
  color: var(--white, #f6f5f3);
  outline: 0;
}

.form-success-screen__inner {
  width: min(100%, 1440px);
  min-height: calc(100vh - clamp(48px, 10vw, 160px));
  min-height: calc(100dvh - clamp(48px, 10vw, 160px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  /* Centred, not space-between. Pinning the copy to the top and the button to
     the bottom of the viewport worked when the heading was 164px and filled
     the gap; at the page-h1 scale it left about 470px of empty white between
     the two, and the way out of the screen sat far from the message it
     belongs to. */
  justify-content: center;
  gap: clamp(32px, 6vh, 56px);
}

.form-success-screen__copy {
  width: min(100%, 1180px);
}

/* This screen was built when it was a green takeover with its own typeface.
   It is now painted in the page palette by design-system.css, so it is held
   to the same type contract as the rest of the site: Geist, inherited from
   the body rather than named here, and the heading at the scale a page h1
   uses. It had been running at clamp(64px, 12vw, 190px) - 164px on a 1366px
   screen, two and a half times the largest heading anywhere else, and over
   two lines because of a 10ch measure. */
.form-success-screen__eyebrow {
  margin: 0 0 clamp(24px, 5vh, 64px);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.form-success-screen__title {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.05em;
  color: inherit;
}

.form-success-screen__message {
  max-width: 48ch;
  margin: clamp(20px, 3vh, 32px) 0 0;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: inherit;
}

/* The house primary button, as naka-layer.css documents it: #0A0A0A fill with
   a #F7F7F7 label, which measures 18.48:1.

   Written as literals on purpose. This rule used to read
   `background: var(--white, #f6f5f3); color: var(--green-strong, #26503c)`,
   from when the screen was green and those tokens meant what their names say.
   --white is now redefined in eight places across these stylesheets - as
   #F6F5F3, as #000, as var(--text-primary), as var(--c-paper) - and on this
   screen it resolves to #000000, so the button rendered black on black at
   1:1 and the fallbacks never fired, because the tokens are defined, just
   not white. A name is not a contract; these two values are. */
.form-success-screen__home {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  border: 0;
  border-radius: 0;
  background: #0A0A0A;
  color: #F7F7F7;
  font-size: 15px;
  line-height: 18px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease;
}

/* #0A0A0A on the brand yellow measures 11.1:1, so the hover state was always
   legible - it was only the resting state that disappeared. Stated as a
   literal for the same reason as above. */
.form-success-screen__home:hover {
  background: var(--sun, #f0c845);
  color: #0A0A0A;
}

.form-success-screen__home:focus-visible {
  outline: 3px solid var(--sun, #f0c845);
  outline-offset: 5px;
}

/* line-height was 0, which gave the arrow a zero-height box: it measured
   24x0 and sat clipped against the label. */
.form-success-screen__arrow {
  font-size: 18px;
  line-height: 1;
}

@media (max-width: 680px) {
  .form-success-screen {
    padding: 24px;
  }

  .form-success-screen__inner {
    min-height: calc(100vh - 48px);
    min-height: calc(100dvh - 48px);
  }

  .form-success-screen__title {
    font-size: clamp(32px, 9vw, 40px);
  }

  .form-success-screen__home {
    width: 100%;
    justify-content: space-between;
  }
}

@media (prefers-reduced-motion: reduce) {
  .form-success-screen__home { transition: none; }
}

/* Send buttons sit a clear double step below the last field, so the notched
   button never touches the field tiles above it. The newsletter button sits
   beside its field and the portal forms have their own layout. */
body[data-page] :is(
  .contact-form-panel,
  .career-form,
  .hc__form,
  .js-review-form,
  .auth-form
) button[type='submit'] {
  margin-top: calc(var(--form-gap) * 2);
}