/* El formulari de contacte, el mateix full per a les dues aplicacions.

   Ve de la porra, que és on va néixer: els valors són els que ja tenia
   (`.contact-form`, `.contact-camp`) amb el botó i la nota incorporats, que
   allà els prestaven `.desar` i `.desa-nota`. Aquí no es poden demanar
   prestats: el formulari també viu a la zona nàstic, que no té aquelles
   classes, i un component compartit no pot dependre de l'esquelet de cap de
   les dues.

   Els colors i les tipografies no s'hi declaren: totes dues aplicacions
   defineixen els mateixos tokens a `:root` (--or, --paper, --grana…), i per
   això el formulari es veu igual als dos llocs sense saber on és. */

.contact-form{
  display:flex;flex-direction:column;gap:18px;
  max-width:640px;text-align:left;
}

.contact-camp{
  display:flex;flex-direction:column;gap:8px;
  font-family:'Space Grotesk',sans-serif;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(245,242,236,.6);
}
/* L'amaga `contact.js` quan hi ha sessió: llavors el correu surt de la
   galeta i tornar-lo a demanar seria fer escriure el que ja sabem. */
.contact-camp[hidden]{display:none}

.contact-form input,
.contact-form textarea{
  font-family:inherit;font-size:15px;letter-spacing:normal;text-transform:none;
  padding:12px 14px;
  background:rgba(10,7,8,.5);color:var(--paper);
  border:1px solid rgba(245,242,236,.25);border-radius:14px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.4);
  transition:border-color .2s;
}
.contact-form textarea{resize:vertical;min-height:140px;line-height:1.5}
.contact-form input:focus,
.contact-form textarea:focus{border-color:var(--or);outline:none}

/* El parany dels bots: fora de pantalla i no `display:none`, que hi ha bots
   que se salten el que està amagat de debò. */
.contact-parany{position:absolute;left:-9999px}

.contact-enviar{
  align-self:flex-start;
  display:inline-block;padding:12px 30px;margin-top:6px;
  border:1px solid var(--grana);border-radius:999px;
  background:var(--grana);color:var(--paper);cursor:pointer;
  font-family:'Space Grotesk',sans-serif;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  transition:background .2s,opacity .2s;
}
.contact-enviar:hover{background:var(--grana-lite)}
.contact-enviar:disabled{opacity:.55;cursor:default}

.contact-nota{
  min-height:1.2em;
  font-family:'Space Grotesk',sans-serif;
  font-size:10px;letter-spacing:.16em;
  color:rgba(245,242,236,.5);
}
.contact-nota--ok{color:#7ec98a}
.contact-nota--error{color:#e07070}