/* Svipp Bygg - landingsside.
   Siden er et regnskap, ikke en brosjyre. Ett strukturelt grep:
   en hoyrestilt tallkolonne til venstre for tekstbredden, brukt tre
   ganger - kostnadene, innholdet, og siste linje. */

:root {
  --korall: #fa2d48;
  --grafitt: #1d1d1f;
  --dempet: #6e6e73;
  --linje: #dedee1;
  --hvit: #ffffff;

  /* Tallkolonnen. Endres ett sted. Bredden er maalt mot det bredeste
     tallet paa siden, ikke gjettet - se overflytsjekken i verifiseringen. */
  --gutter: 132px;
  --gap: 24px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--hvit);
  color: var(--grafitt);
  font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ramme {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 20px 72px;
}

/* Ordmerke ------------------------------------------------------------- */

.ordmerke {
  margin: 0 0 72px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.korall {
  color: var(--korall);
}

/* Typografi ------------------------------------------------------------ */

h1 {
  margin: 0 0 20px;
  font-family: "Archivo Black", "Figtree", sans-serif;
  font-weight: 400;
  font-size: clamp(34px, 8vw, 58px);
  line-height: 1.03;
  letter-spacing: -0.03em;
  overflow-wrap: break-word;
}

h2 {
  margin: 0 0 24px;
  font-family: "Archivo Black", "Figtree", sans-serif;
  font-weight: 400;
  font-size: clamp(20px, 4.6vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}

.ingress {
  margin: 0 0 48px;
  font-size: clamp(18px, 4.2vw, 21px);
  line-height: 1.5;
  max-width: 30em;
}

p {
  margin: 0 0 20px;
}

a {
  color: var(--grafitt);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.avsnitt {
  max-width: 34em;
}

.avsnitt:last-child {
  margin-bottom: 0;
}

/* Regnskapet ----------------------------------------------------------- */

.regnskap {
  margin: 0;
  padding: 0;
  list-style: none;
}

.post {
  display: grid;
  grid-template-columns: var(--gutter) 1fr;
  column-gap: var(--gap);
  align-items: baseline;
  padding: 7px 0;
}

.tall {
  font-family: "Archivo Black", "Figtree", sans-serif;
  font-weight: 400;
  font-size: clamp(19px, 4.4vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-align: right;
  white-space: nowrap;
}

.etikett {
  font-size: 15px;
  line-height: 1.45;
  color: var(--dempet);
}

/* Streken. To paa hele siden. */
.strek {
  height: 1px;
  margin: 18px 0;
  background: var(--linje);
  border: 0;
}

/* Postene som ikke inngaar i summen. Dempet tall er hele signalet -
   de svarte tallene legges sammen, de graa gjor ikke det. Ingen ekstra
   strek: en tredje strek tipper uttrykket over i broadsheet. */
.regnskap-tillegg .tall {
  color: var(--dempet);
}

.ledetekst {
  margin: 30px 0 10px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--dempet);
}

/* Linjen som betyr noe. */
.post-sum .tall {
  color: var(--korall);
  font-size: clamp(26px, 6vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.post-sum .etikett {
  color: var(--grafitt);
}

.etterord {
  margin: 28px 0 0;
  max-width: 34em;
}

/* Innholdsfortegnelsen deler kolonnebredde med regnskapet, saa alle
   etiketter paa siden starter paa samme x. Det er hele poenget med
   grepet. Paa smal skjerm faar den egen, smalere bredde - sidetall er
   ett til to tegn og trenger ikke pengekolonnens plass. */

/* Seksjonsrytme -------------------------------------------------------- */

.bolk {
  margin-top: 88px;
}

/* Skjemaet, som siste post i regnskapet ------------------------------- */

.skjema {
  display: grid;
  grid-template-columns: var(--gutter) 1fr;
  column-gap: var(--gap);
  margin: 24px 0 0;
}

.skjema-felt {
  grid-column: 2;
  max-width: 30em;
}

.felt {
  margin-bottom: 24px;
}

label.feltnavn {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 600;
}

input[type="email"] {
  width: 100%;
  padding: 10px 0;
  font: inherit;
  color: var(--grafitt);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--grafitt);
  border-radius: 0;
  appearance: none;
}

input[type="email"]::placeholder {
  color: var(--dempet);
}

input[type="email"]:focus {
  outline: none;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--korall);
}

input[type="email"]:focus-visible {
  outline: 2px solid var(--grafitt);
  outline-offset: 4px;
}

.samtykke {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 28px;
  font-size: 15px;
  line-height: 1.5;
}

.samtykke input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--korall);
}

.samtykke input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--grafitt);
  outline-offset: 3px;
}

button {
  display: block;
  width: 100%;
  padding: 15px 28px;
  font-family: inherit;
  /* 19px/700 er ikke smak. Korall mot hvitt gir 3,79:1, som holder for
     stor tekst men ikke for vanlig. WCAG regner stor tekst fra 18.66px
     naar den er fet - 600 er halvfet og teller ikke. Paletten er laast,
     saa storrelse og vekt ma gi etter i stedet. */
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--hvit);
  background: var(--korall);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

button:disabled {
  opacity: 0.5;
  cursor: default;
}

button:focus-visible {
  outline: 2px solid var(--grafitt);
  outline-offset: 3px;
}

@media (min-width: 560px) {
  button {
    width: auto;
    min-width: 260px;
  }
}

.feilmelding {
  margin: 16px 0 0;
  font-size: 15px;
  color: var(--korall);
}

.feilmelding:empty {
  margin: 0;
}

.smaatekst {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--dempet);
}

.smaatekst a {
  color: var(--dempet);
}

.kvittering {
  grid-column: 2;
  margin: 0;
  max-width: 30em;
  font-size: clamp(18px, 4.2vw, 21px);
  line-height: 1.5;
}

/* En overskrift eller ledetekst som introduserer et regnskap staar paa
   regnskapets egen tekstkant, ikke paa den ytre. Ingen ny kant innfores -
   de flyttes fra den ytre til den indre, der innholdet deres ligger.
   Brodtekst som ikke tilhorer et regnskap blir staaende ute. */

@media (min-width: 480px) {
  h2,
  .ledetekst {
    margin-left: calc(var(--gutter) + var(--gap));
  }
}

/* Under 480px kollapser tallkolonnen. Tallet legger seg over etiketten
   og beholder rangeringen, i stedet for at begge klemmes. */

@media (max-width: 479px) {
  .ramme {
    padding: 28px 20px 56px;
  }

  .ordmerke {
    margin-bottom: 48px;
  }

  .ingress {
    margin-bottom: 36px;
  }

  .bolk {
    margin-top: 64px;
  }

  .post,
  .skjema {
    grid-template-columns: 1fr;
  }

  .post {
    padding: 0 0 16px;
  }

  .tall {
    text-align: left;
  }

  .etikett {
    margin-top: 1px;
  }

  .skjema-felt,
  .kvittering {
    grid-column: 1;
  }

  /* Sidetallene er smale nok til aa bli staaende ved siden av. */
  .regnskap-innhold {
    --gutter: 44px;
    --gap: 16px;
  }

  .regnskap-innhold .post {
    grid-template-columns: var(--gutter) 1fr;
    column-gap: var(--gap);
    padding: 0 0 12px;
  }

  .regnskap-innhold .tall {
    text-align: right;
  }
}

/* Dokumentsider ------------------------------------------------------- */
/* personvern.html deler denne filen, men er et dokument, ikke et
   regnskap. Reglene er scopet til .dokument slik at de ikke kolliderer
   med landingssidens. */

.ramme.dokument {
  max-width: 640px;
}

.dokument h1 {
  font-size: clamp(28px, 6vw, 38px);
  line-height: 1.1;
  hyphens: auto;
}

.dokument .ingress {
  margin-bottom: 40px;
}

.dokument section {
  margin-top: 56px;
}

/* Dokumentsiden har ingen tallkolonne, saa overskriftene skal ikke
   trekkes inn paa en kant som ikke finnes her. */
.dokument h2 {
  margin-left: 0;
}

.dokument ul {
  margin: 0 0 20px;
  padding-left: 22px;
}

.dokument li {
  margin-bottom: 12px;
}

.dokument li:last-child {
  margin-bottom: 0;
}

.dokument footer {
  margin-top: 72px;
  font-size: 14px;
  color: var(--dempet);
}

/* Bevegelse ------------------------------------------------------------ */
/* Ett orkestrert oyeblikk. Linjene kommer i fast takt, som en utskrift.
   Standardtilstanden er synlig, saa uten animasjon mangler ingenting. */

@media (prefers-reduced-motion: no-preference) {
  .skriv {
    opacity: 0;
    animation: skriv-ut 200ms ease-out calc(var(--i, 0) * 45ms) forwards;
  }

  .strek-skriv {
    transform: scaleX(0);
    transform-origin: left center;
    animation: strek-ut 260ms ease-out 140ms forwards;
  }
}

@keyframes skriv-ut {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes strek-ut {
  to {
    transform: scaleX(1);
  }
}