@charset "UTF-8";

/* ===========================================================================
   skjema.css — kontaktsiden og kontaktskjemaet
   Fotografportefølje for David · Kristensen IT

   Tokens, reset og typografi kommer fra stil.css, som må lastes først.
   Se docs/kontakt.md for oppførsel og docs/design.md for formspråket.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. Sidens ramme
   --------------------------------------------------------------------------- */

.kontakt {
  max-width: var(--maks-bredde);
  margin-inline: auto;
  padding: var(--rom-16) var(--side-marg) var(--rom-24);
}

.kontakt__ingress {
  max-width: var(--maks-tekst);
  margin-top: var(--rom-6);
}

/* Vises bare når JavaScript er slått av. Skjemaet sendes med fetch, og uten
   JavaScript finnes ingen vei videre — det skal brukeren få vite før hun
   fyller ut sju felt. */
.kontakt__noskript {
  max-width: var(--maks-tekst);
  margin-top: var(--rom-8);
  padding: var(--rom-4);
  border: 1px solid var(--blekk);
  font-weight: 500;
}

.kontakt__personvern {
  max-width: var(--maks-tekst);
  margin-top: var(--rom-12);
}


/* ---------------------------------------------------------------------------
   2. Skjemaet

   Én kolonne. Feltene er smalere enn løpende tekst: et inntastingsfelt på
   62ch inviterer til å skrive lengre linjer enn feltet er ment for, og
   gjør det vanskelig å se etiketten og feltet som ett.
   --------------------------------------------------------------------------- */

.skjema {
  display: grid;
  gap: var(--rom-8);
  max-width: 34rem;
  margin-top: var(--rom-12);
}

.felt {
  display: grid;
  gap: var(--rom-2);
}

/* Samme versalbehandling som kategorimenyen og knappene ellers på nettstedet.
   Sperringen er det som skiller gallerimerking fra roping. */
.felt__etikett {
  font-size: var(--skala-etikett);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.felt__hjelp {
  font-size: var(--skala-liten);
  line-height: 1.4;
  color: var(--blekk-dempet);
}

/* Hvitt felt med 1 px hårstrek, ingen avrunding, ingen skygge, ingen
   fyllfarge. Tastaturfokus arves fra :focus-visible i stil.css. */
.felt__inndata {
  width: 100%;
  padding: var(--rom-3) var(--rom-4);
  border: 1px solid var(--hårstrek);
  background-color: var(--papir);
  transition: border-color var(--tid-rask) var(--kurve);
}

.felt__inndata:hover {
  border-color: var(--blekk-dempet);
}

.felt__inndata--melding {
  min-height: 10rem;
}


/* ---------------------------------------------------------------------------
   3. Feiltilstand

   Ingen rød farge — paletten er svart/hvit, og feil markeres med form og
   vekt i stedet: tykkere venstrekant på feltet, 500 på meldingen og et lite
   varselikon.
   --------------------------------------------------------------------------- */

.felt--feil .felt__inndata {
  border-left: 2px solid var(--blekk);
}

.felt__feil,
.skjema__sendefeil {
  display: flex;
  align-items: flex-start;
  gap: var(--rom-2);
  font-size: var(--skala-liten);
  font-weight: 500;
  line-height: 1.4;
}

/* display: flex over ville ellers overstyrt hidden-attributtet, og alle
   feilmeldingene ville stått synlige fra første sidevisning. */
.felt__feil[hidden],
.skjema__sendefeil[hidden] {
  display: none;
}

.varselikon {
  flex: none;
  width: 1.0625em;
  height: 1.0625em;
  margin-top: 0.15em;   /* løfter ikonet opp på linje med teksten */
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Sprita skal ikke ta plass i layouten, men må ligge i dokumentet for at
   <use> skal finne symbolet. */
.ikonsprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}


/* ---------------------------------------------------------------------------
   4. Samtykke
   --------------------------------------------------------------------------- */

.felt--avkryssing {
  grid-template-columns: auto 1fr;
  gap: var(--rom-2) var(--rom-3);
  align-items: start;
}

/* Feilmeldingen ligger under begge kolonnene, ikke innrykket ved siden av
   boksen. */
.felt--avkryssing .felt__feil {
  grid-column: 1 / -1;
}

/* accent-color er det eneste som holder avkryssingsboksen unna nettleserens
   blåfarge uten å tegne kontrollen på nytt fra bunnen. */
.felt__avkryssing {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.28em 0 0;   /* på linje med første tekstlinje i etiketten */
  accent-color: var(--blekk);
}


/* ---------------------------------------------------------------------------
   5. Send-knappen

   Primærknapp: invertert, og den inverterer tilbake på hover — samme
   oppførsel som «Se bildene» på forsiden.
   --------------------------------------------------------------------------- */

.skjema__send {
  justify-self: start;
  padding: var(--rom-4) var(--rom-8);
  border: 1px solid var(--blekk);
  background-color: var(--blekk);
  color: var(--papir);
  font-size: var(--skala-etikett);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background-color var(--tid-rask) var(--kurve),
              border-color var(--tid-rask) var(--kurve),
              color var(--tid-rask) var(--kurve);
}

.skjema__send:hover {
  background-color: var(--papir);
  color: var(--blekk);
}

/* Står sist med vilje: under sending skal knappen ikke svare på hover. */
.skjema__send:disabled,
.skjema__send:disabled:hover {
  border-color: var(--blekk-svak);
  background-color: var(--blekk-svak);
  color: var(--papir);
  cursor: default;
}


/* ---------------------------------------------------------------------------
   6. Kvittering

   Erstatter hele skjemaet ved suksess og får fokus. Ingen ramme rundt hele
   siden, bare en rolig boks der skjemaet sto.
   --------------------------------------------------------------------------- */

.kvittering {
  max-width: 34rem;
  margin-top: var(--rom-12);
  padding: var(--rom-8);
  border: 1px solid var(--hårstrek);
}

.kvittering p {
  font-size: var(--skala-ingress);
  line-height: 1.5;
}