/* /contact/ only.
 *
 * Everything is scoped under .ee-contact-page (set on #page by base.njk), which
 * is what keeps the restyle off /services/, where the same form component is
 * also rendered. This file is linked after style.css and all the component
 * sheets, so nearly every override below is won on specificity alone; the three
 * !important declarations are marked and each one beats an existing !important
 * on the same property.
 */

.ee-contact-page {
  --cf-ink: var(--ee-black);           /* spec --dark-grey #313131  -> #394150, 8.90:1 on the card */
  --cf-surface: var(--bg-light-gray);  /* spec --light-grey #EEEEEE -> #EDEFF0 */
  --cf-required: #A30000;              /* spec --lipstick-red #E41E24 is 4.04:1 and fails AA; this is 7.12:1 */
  --cf-accent: var(--bright-yellow);   /* #FFF200, 8.34:1 on --cf-ink */
  --cf-hover: var(--ee-blue);          /* spec --dusk-blue (no hex given) -> #293C8F */
  --cf-muted: var(--ee-dark-gray);     /* spec --dark-grey-75 -> #55575A, 6.28:1 */

  /* KnowMo's clip box. Also the vertical space reserved above the card. */
  --cf-rise: 92px;
  --cf-knomo-w: 160px;
}

/* ---- 1. Column ---------------------------------------------------------- */

/* .contact_form_wrap is the grey box today. The grey moves onto the form. */
.ee-contact-page .contact_form_wrap {
  background: transparent;
  padding: 0;
}

/* style.css sets a fixed `width` (580px/640px) on this in min-width queries,
   not a max-width, so it has to be unset rather than overridden. */
.ee-contact-page .contact_form_wrap > .whole_page_text_wrap_small {
  width: auto;
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 20px 64px;
}

/* ---- 2. Type ------------------------------------------------------------ */

.ee-contact-page .ee-contact-title {
  font-family: 'Lato', sans-serif;
  font-weight: 900;
  font-size: 2.25rem;
  line-height: 1.05;
  color: var(--cf-ink);
  margin: 0 0 18px;
}

.ee-contact-page .ee-contact-intro {
  font-family: 'PT Serif', serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  color: var(--cf-ink);
  max-width: 480px;
  margin: 0;
}

.ee-contact-page .ee-contact-intro strong {
  font-weight: 700;
}

/* ---- 3. KnowMo stage ---------------------------------------------------- */

/* The rise zone is reserved by padding-top on an in-flow element, so it exists
   at first paint whether or not the art ever loads: no layout shift, and the
   clip box cannot extend above the intro paragraph at full rise. */
.ee-contact-page .ee-cf-stage {
  position: relative;
  padding-top: var(--cf-rise);
}

.ee-contact-page .ee-cf-stage > form {
  margin-top: 0;
}

.ee-contact-page .ee-cf-knomo {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--cf-knomo-w);
  margin-left: calc(var(--cf-knomo-w) / -2);
  height: var(--cf-rise);
  overflow: hidden;
  pointer-events: none;
}

.ee-contact-page .ee-cf-knomo-art {
  position: absolute;
  inset: 0;
  display: block;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  transform: translateY(78%);
  transition: transform 600ms cubic-bezier(.34, 1.4, .5, 1), opacity 180ms linear;
}

/* Both layers are painted (opacity:0 still composites), so the excited pose is
   fetched at page load and the swap cannot flash. Do not use display:none. */
.ee-contact-page .ee-cf-knomo-art--peek {
  background-image: url('/assets/images/knomo/knomo-peekaboo.png');
}

.ee-contact-page .ee-cf-knomo-art--happy {
  background-image: url('/assets/images/knomo/knomo-scrunched-excited.png');
  opacity: 0;
}

.ee-contact-page .ee-cf-knomo.is-risen .ee-cf-knomo-art {
  transform: translateY(0);
}

.ee-contact-page .ee-cf-knomo.is-celebrating .ee-cf-knomo-art--peek {
  opacity: 0;
}

.ee-contact-page .ee-cf-knomo.is-celebrating .ee-cf-knomo-art--happy {
  opacity: 1;
}

/* ---- 4. Card + grid ----------------------------------------------------- */

.ee-contact-page .ee-contact-form {
  background: var(--cf-surface);
  border: 3px solid var(--cf-ink);
  border-radius: 0;
  box-shadow: none;
  padding: 24px 20px;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 18px;
  column-gap: 20px;
}

.ee-contact-page .ee-contact-form > p,
.ee-contact-page .ee-contact-form > div {
  margin: 0;
}

.ee-contact-page .ee-contact-form .required-msg {
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  color: var(--cf-ink);
  margin: 0 !important; /* beats .contact_form_wrap .required-msg { margin: 0 0 24px !important } */
}

.ee-contact-page .ee-contact-form .red-asterisk,
.ee-contact-page .ee-contact-form label span {
  color: var(--cf-required);
  background: transparent;
}

/* ---- 5. Labels + fields ------------------------------------------------- */

.ee-contact-page .ee-contact-form label {
  display: block;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--cf-ink);
  margin: 0 0 6px !important; /* beats .contact_form_wrap label { margin: 30px 0 15px !important } */
}

.ee-contact-page .ee-contact-form input:not([type=submit]),
.ee-contact-page .ee-contact-form textarea {
  display: block;
  width: 100%;
  max-width: none;
  background: #fff;
  color: var(--cf-ink);
  border: 3px solid var(--cf-ink);
  border-radius: 0;
  padding: 12px 14px;
  font-family: 'Lato', sans-serif;
  line-height: 1.4;
  font-size: 17px !important; /* beats .contact_form_wrap input[type=email], .contact_form_wrap textarea { font-size: 22px !important } */
}

.ee-contact-page .ee-contact-form textarea {
  resize: vertical;
}

.ee-contact-page .ee-contact-form input:focus-visible,
.ee-contact-page .ee-contact-form textarea:focus-visible {
  outline: none;
  border-color: var(--cf-hover);
  box-shadow: var(--focus-border);
}

/* ---- 6. Send button ----------------------------------------------------- */

/* .round-btn / .btn-yellow are dropped from the markup on /contact/, so none of
   their !important declarations have to be fought here. */
.ee-contact-page .ee-cf-send {
  display: inline-block;
  cursor: pointer;
  background: var(--cf-ink);
  color: var(--cf-accent);
  border: 3px solid var(--cf-ink);
  border-radius: 0;
  padding: 12px 40px;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 18px;
  transition: background-color 300ms ease-in-out, color 300ms ease-in-out, border-color 300ms ease-in-out;
}

.ee-contact-page .ee-cf-send:hover {
  background: var(--cf-hover);
  border-color: var(--cf-hover);
  color: var(--cf-accent);
}

/* Keeps the 3px border so the button does not shift when style.css's
   button:focus:not([DISABLED]) { border: solid 2px } would otherwise apply. */
.ee-contact-page .ee-cf-send:focus-visible {
  outline: none;
  border: 3px solid var(--cf-ink);
  box-shadow: var(--focus-border);
}

/* ---- 7. Actions row ----------------------------------------------------- */

.ee-contact-page .ee-cf-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}

.ee-contact-page .ee-cf-actions > p {
  margin: 0;
}

.ee-contact-page #contact-form-status {
  font-family: 'PT Serif', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--cf-muted);
  margin: 0;
}

/* ---- 8. Breakpoints ----------------------------------------------------- */

/* The form was a two-column grid at >=600px purely to sit "Your name" beside
   "Your email". With the name field gone every remaining row spans the full
   width, so the single-column grid above now applies at every breakpoint. */

@media only screen and (min-width: 768px) {
  .ee-contact-page {
    --cf-rise: 130px;
    --cf-knomo-w: 230px;
  }

  .ee-contact-page .ee-contact-title {
    font-size: 3.2rem;
  }

  .ee-contact-page .ee-contact-form {
    padding: 40px 44px;
  }

  .ee-contact-page .contact_form_wrap > .whole_page_text_wrap_small {
    padding: 56px 64px;
  }
}

/* ---- 9. Reduced motion -------------------------------------------------- */

/* Raised from load, no transition. The rise is user-triggered rather than
   auto-playing, so WCAG 2.2.2 is satisfied either way; this is for 2.3.3. */
@media (prefers-reduced-motion: reduce) {
  .ee-contact-page .ee-cf-knomo-art {
    transform: translateY(0);
    transition: none;
  }

  .ee-contact-page .ee-cf-send {
    transition: none;
  }
}