/* ==========================================================================
 * WattWisely — contact and thank-you pages
 * ========================================================================== */

@layer pages {

  /* -- Hero ---------------------------------------------------------------- */
  /* Compact: this is a task page, and the form should be reachable without a
     scroll on a laptop. The ink treatment carries the brand instead of an
     image, which would only push the form further down. */

  .hero { padding-block: clamp(2.5rem, 5vw, 3.5rem) clamp(2.5rem, 5vw, 3.5rem); }

  .hero__lead { max-width: 44rem; }

  /* -- Layout -------------------------------------------------------------- */

  .contact-layout { align-items: start; }

  .contact-main__title { font-size: var(--ww-step-3); }

  .contact-main__lead {
    margin-top: var(--ww-space-3);
    margin-bottom: var(--ww-space-7);
    font-size: var(--ww-step-1);
  }

  /* -- Form ---------------------------------------------------------------- */

  .contact-form__grid {
    display: grid;
    gap: var(--ww-space-5);
    grid-template-columns: 1fr;
  }

  @media (min-width: 600px) {
    .contact-form__grid { grid-template-columns: repeat(2, 1fr); }
    .contact-form__full { grid-column: 1 / -1; }
  }

  .contact-form textarea { resize: vertical; min-height: 9rem; }

  /* Foot ------------------------------------------------------------------- */

  .contact-form__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ww-space-4);
    margin-top: var(--ww-space-7);
  }

  .contact-form__note {
    margin: 0;
    max-width: 22rem;
    font-size: var(--ww-step--1);
    color: var(--ww-muted);
  }

  .contact-form .alert,
  .contact-form .form-status { margin-bottom: var(--ww-space-6); }

  .contact-form .alert a { color: var(--ww-error); }

  /* -- Aside --------------------------------------------------------------- */

  .contact-aside {
    padding: var(--ww-space-6);
    background: var(--ww-surface);
    border: 1px solid var(--ww-border);
    border-radius: var(--ww-radius-lg);
  }

  @media (min-width: 1024px) {
    /* Keeps the contact details in view while a long form is being filled in. */
    .contact-aside {
      position: sticky;
      top: calc(var(--ww-header-h, 4.5rem) + var(--ww-space-5));
    }
  }

  .channels__title,
  .office__title { font-size: var(--ww-step-1); }

  .channels__list {
    list-style: none;
    padding: 0;
    margin-top: var(--ww-space-5);
    /* Rows are separated by a top border, so this reads as part of the card
       rather than as prose. Left at the base measure the dividers stop short of
       the card edge wherever the aside is wider than 68ch. */
    max-width: none;
  }

  .channels__list > li + li {
    margin-top: var(--ww-space-5);
    padding-top: var(--ww-space-5);
    border-top: 1px solid var(--ww-border);
  }

  .channel {
    display: flex;
    align-items: start;
    gap: var(--ww-space-4);
  }

  .channel__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--ww-radius-md);
    background: var(--ww-teal-50);
    color: var(--ww-primary);
  }

  .channel__label {
    font-size: var(--ww-step-0);
    font-weight: var(--ww-weight-semibold);
  }

  .channel__value {
    margin: var(--ww-space-1) 0 0;
    font-weight: var(--ww-weight-semibold);
  }

  /* Long addresses must not push the aside wider than its column. */
  .channel__value a {
    display: inline-flex;
    align-items: center;
    overflow-wrap: anywhere;
  }

  /* Each of these is the only thing in its paragraph — a destination, not a
     word inside a sentence — so the inline target-size exception does not
     cover them. Give them a full 44px on touch. */
  @media (pointer: coarse) {
    .channel__value a { min-height: 44px; }
  }

  .channel__note {
    margin: var(--ww-space-1) 0 0;
    font-size: var(--ww-step--1);
    color: var(--ww-muted);
  }

  .office {
    padding-top: var(--ww-space-6);
    border-top: 1px solid var(--ww-border);
  }

  .office__address {
    margin-top: var(--ww-space-3);
    font-style: normal;
    color: var(--ww-ink);
    font-weight: var(--ww-weight-semibold);
  }

  .office__note {
    margin-top: var(--ww-space-2);
    font-size: var(--ww-step--1);
    color: var(--ww-muted);
  }

  /* -- Thank you ----------------------------------------------------------- */

  .thanks__lead { font-size: var(--ww-step-1); }

  .thanks__panel {
    padding: var(--ww-space-6);
    background: var(--ww-surface);
    border: 1px solid var(--ww-border);
    border-radius: var(--ww-radius-lg);
  }

  .thanks__panel h2 { font-size: var(--ww-step-2); }

  .thanks__panel .checklist { margin-top: var(--ww-space-4); }

  .thanks__note {
    margin-top: var(--ww-space-4);
    font-size: var(--ww-step--1);
    color: var(--ww-muted);
  }

  .thanks__next-title {
    font-size: var(--ww-step-2);
    margin-bottom: var(--ww-space-5);
  }

  .thanks__links .card { padding: var(--ww-space-5); }

  .thanks__links .card p { font-size: var(--ww-step--1); }
}