/*
 * Interesseskjemaet (site/_includes/interesseskjema.liquid) og meldingene fra
 * interesse.js. Lenkes inn av skjemaet selv.
 *
 * Stramt som resten: skarpe hjørner, ingen skygger, ingen bevegelse.
 * Feil vises alltid med tekst, aldri bare med farge.
 */

.interesseskjema {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 32rem;
  padding-block-start: var(--space-md);
  border-block-start: var(--border-width) solid var(--color-foreground);
}

.interesseskjema__tittel {
  font-size: var(--text-xl);
}

/* Ingressen hører til overskriften og står tettere inntil den. */
.interesseskjema__ingress {
  margin-block-start: calc(var(--space-sm) * -1);
}

.interesseskjema__felter {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* hidden-attributtet må vinne over display: flex over. */
.interesseskjema [hidden] {
  display: none;
}

.interesseskjema__felt {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.interesseskjema__felt > label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.interesseskjema__felt input:not([type='checkbox']),
.interesseskjema__felt select {
  width: 100%;
}

/* Avkrysningen står til venstre for teksten, som kan gå over flere linjer. */
.interesseskjema__avkrysning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.interesseskjema__avkrysning input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  min-height: 0;
  padding: 0;
  margin: 0;
  accent-color: var(--color-foreground);
}

/* Ugyldig felt: dobbel kant i feilfargen. Teksten under forklarer hvorfor. */
.interesseskjema [aria-invalid='true'] {
  border-color: var(--color-error);
  outline: var(--border-width) solid var(--color-error);
}

.interesseskjema__feil {
  color: var(--color-error);
  font-size: var(--text-sm);
}

/* «Feil:» foran meldingen, så den ikke bare skilles ut med farge. */
.interesseskjema__feil::before {
  content: 'Feil: ';
  font-weight: var(--weight-medium);
}

/*
 * Samlet melding: kvittering eller feil som ikke hører til ett felt.
 * Streken til venstre og ordlyden bærer beskjeden; fargen er bare en ekstra hjelp.
 */
.interesseskjema__melding {
  padding: var(--space-sm) var(--space-md);
  border-inline-start: 2px solid var(--color-foreground);
  background-color: var(--color-surface);
}

.interesseskjema__melding[data-type='feil'] {
  border-inline-start-color: var(--color-error);
  color: var(--color-error);
}

.interesseskjema__melding[data-type='takk'] {
  border-inline-start-color: var(--color-success);
}

.interesseskjema__melding > * + * {
  margin-block-start: var(--space-2xs);
}

.interesseskjema__melding-tittel {
  font-weight: var(--weight-medium);
}

/* Meldingen får fokus med skript, ikke med tastatur. Streken er nok markering. */
.interesseskjema__melding:focus {
  outline: none;
}

/*
 * Honningkrukken. Flyttes ut av synsfeltet i stedet for display: none, som
 * enkelte roboter ser etter. aria-hidden og tabindex="-1" holder den unna
 * skjermlesere og tastatur.
 */
.interesseskjema__krukke {
  position: absolute;
  inset-inline-start: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}