/**
 * Coaxia RH — Contact / CTA form styles
 */

/**
 * Form — leadcraft cta-form style
 */

#contact-form {
  & h3 {
    font-size: var(--text-base);
    margin-bottom: 22px;
    color: var(--color-black);
  }

  /* & label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;

    &>span {
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--color-gray);
    }
  } */

  /* Field with no visible <label> (placeholder-only, e.g. "Prénom · Nom"): same
     vertical rhythm as a labelled field, without relying on the label's own margin */
  &>input,
  &>textarea {
    margin-bottom: 14px;
  }

  & [type="text"],
  & [type="email"],
  & textarea {
    font-family: var(--font-body);
    font-size: var(--text-base);
    padding: 12px 14px;
    border: 1.5px solid var(--color-gray-soft);
    border-radius: var(--radius-md);
    background: var(--color-white);
    color: var(--color-black);
    transition: border-color .2s var(--ease-refined), box-shadow .2s var(--ease-refined);
    appearance: none;
    width: 100%;

    &:focus {
      outline: none;
      border-color: var(--color-brand);
      box-shadow: 0 0 0 4px var(--color-brand);
    }

    &::placeholder {
      color: var(--color-gray-soft);
      opacity: 0.7;
    }
  }

  & textarea {
    resize: vertical;
    min-height: 80px;
  }

  /* & select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2346504C' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 2.5rem;
    cursor: pointer;
  } */

  /* & label.check {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--text-sm);
    color: var(--color-gray);
    margin: 4px 0 18px;

    & input[type="checkbox"] {
      width: 18px;
      height: 18px;
      min-width: 18px;
      margin-top: 2px;
      accent-color: var(--color-brand);
      cursor: pointer;
      flex-shrink: 0;
    }

    & a {
      color: var(--color-brand);
      text-decoration: underline;
    }
  } */

  & [type="submit"] {
    width: 100%;
    justify-content: center;
    background-color: var(--color-brand);
    /* .btn's white-space: nowrap forces this long label ("Envoyer : réponse
       personnelle de Caroline") onto one line, overflowing the pill button on
       narrow mobile widths — allow it to wrap onto 2 lines instead */
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }
}

/* .form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 0;

  & label {
    margin-bottom: 14px;
  }

  @media (min-width: 480px) {
    & {
      grid-template-columns: 1fr 1fr;
    }
  }
} */

/* .form-note {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-gray-soft);
  margin-top: 12px;
} */

/**
 * Success message
 */

.form-success {
  display: none;
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--color-brand);
  border-radius: var(--radius-md);
  color: var(--color-white);
  align-items: center;
  gap: 10px;

  &:not([hidden]) {
    display: flex;
  }

  & svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }
}

@scope (.page-contact) {
  section.contact {
    & .container {
      align-items: start;
    }

    .contact-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-10);
      align-items: start;
      padding: var(--space-16) 0;

      @media (min-width: 1024px) {
        & {
          grid-template-columns: 1.5fr 1fr;
          gap: var(--space-20);
          padding: var(--space-20) 0;
        }
      }

      & aside {
        @media (min-width: 1024px) {
          & {
            position: sticky;
            top: calc(72px + var(--space-8));
          }
        }
      }

      /* Submit button full-width */
      & .btn[type="submit"],
      & [type="submit"] {
        width: 100%;
        justify-content: center;
      }
    }

    /**
   * Contact info card (sidebar) — ".sidebar-card" (base.css : fond noir,
   * rayon, padding "--space-6", texte blanc, "h3"/".text" du blog), à laquelle
   * ne restent ici que les particularités de la carte de contact. La taille du
   * contenu est alignée sur celle des ".sidebar-card" des pages d'article de
   * blog : titres 20px / 700 (comme leur "h3"), textes 14px ("--text-sm",
   * interligne 1.7, blanc à 75 %, comme leur ".text").
   */

    .contact-info-card {
      /* Fond menthe clair : le texte, blanc sur le fond noir de
         ".sidebar-card", passe en sombre (noir pour les titres et les valeurs,
         gris pour les descriptions — mêmes couleurs que la carte ".profile"
         des articles de blog). */
      background-color: var(--color-brand-soft);
      color: var(--color-black);

      & header {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
          "title title"
          "avatar name"
          "avatar desc";
        column-gap: var(--space-4);
        row-gap: var(--space-1);
        align-items: center;
        margin-bottom: var(--space-6);

        & h2 {
          grid-area: title;
          font-size: var(--text-sm);
          letter-spacing: 0.12em;
          color: var(--color-white);
        }

        /* p > img.avatar — médaillon : design et taille de "img.avatar"
           (base.css, ".sidebar-card .avatar"), ici seulement placé dans la
           grille. */
        & p:first-of-type {
          grid-area: avatar;
          align-self: center;
          margin: 0;
        }

        & h3 {
          grid-area: name;
          align-self: end;
          font-size: var(--text-base);
          font-weight: 700;
          color: var(--color-black);
          margin: 0;
        }

        /* 2ème p — description */
        & p:last-of-type {
          grid-area: desc;
          align-self: start;
          font-size: var(--text-sm);
          color: var(--color-gray);
          line-height: 1.7;
          margin: 0;
        }
      }

      & .item {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-4) 0;

        &:last-child {
          padding-bottom: 0;
        }

        & address {
          font-size: var(--text-sm);
          line-height: 1.7;
          color: var(--color-gray);
        }

        & .icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 36px;
          height: 36px;
          flex-shrink: 0;
          border-radius: var(--radius-md);
          background-color: var(--color-brand);

          & svg {
            width: 16px;
            height: 16px;
            color: var(--color-white);
          }
        }

        & .label {
          font-size: var(--text-xs);
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 0.08em;
          color: var(--color-gray-soft);
          margin-bottom: var(--space-1);
        }

        & .value {
          font-size: var(--text-sm);
          font-weight: 500;
          color: var(--color-black);
          text-decoration: none;
          transition: color 0.2s var(--ease-refined);

          &:hover {
            color: var(--color-brand);
          }
        }
      }
    }
  }
}