/* Kontaktformuläret. Markup kommer från mu-plugin ffk-kontakt.php. */

.ffk-formular {
  display: grid;
  gap: 14px;
  justify-items: start;
  align-content: start;
}

.ffk-formular label {
  display: block;
  width: 100%;
  font-weight: 500;
  font-size: var(--wp--preset--font-size--liten);
}

.ffk-formular input,
.ffk-formular textarea {
  width: 100%;
  font: inherit;
  margin-top: 6px;
  padding: 12px;
  min-height: var(--wp--custom--tryckyta);
  border: 1px solid var(--wp--preset--color--stal);
  border-radius: var(--wp--custom--radie);
  background: var(--wp--preset--color--vit);
}

.ffk-formular textarea {
  min-height: 130px;
  resize: vertical;
}

.ffk-formular button {
  min-height: var(--wp--custom--tryckyta);
  padding: 14px 22px;
  border: 0;
  border-radius: var(--wp--custom--radie);
  background: var(--wp--preset--color--gul);
  color: var(--wp--preset--color--brodtext);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.ffk-formular button:hover {
  background: var(--wp--preset--color--marin);
  color: var(--wp--preset--color--vit);
}

/* Honeypot: aldrig synlig, aldrig i tabbordningen, men läsbar för robotar. */
.ffk-honung {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Ett fel är rött och har role="alert". En notis är blå och har role="status".
   De två får aldrig se likadana ut och aldrig dela komponent. */
.ffk-fel,
.ffk-notis {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--wp--custom--radie);
  font-weight: 600;
}

.ffk-fel {
  border-left: 4px solid var(--wp--custom--fel);
  background: var(--wp--preset--color--vit);
  color: var(--wp--custom--fel);
}

.ffk-notis {
  border-left: 4px solid var(--wp--preset--color--marin);
  background: var(--wp--preset--color--himmel);
  color: var(--wp--preset--color--brodtext);
}

.ffk-fel ul {
  margin: 8px 0 0;
  padding-left: 20px;
  font-weight: 400;
}

/* Kontrollfrågan mot skräppost. Vanlig text och vanligt fält — en gåta som
   bara går att lösa med ögonen stänger ute den som använder skärmläsare. */
.ffk-kontrollfraga input {
  display: block;   /* annars ställer sig det smala fältet bredvid frågan */
  max-width: 12ch;
}

.ffk-hjalptext {
  display: block;
  margin-top: 6px;
  font-weight: 400;
  color: var(--wp--preset--color--damp);
}