/* Hitte Joel — sajtens egna värden ovanpå grund.css.
   Blått ur Joels tröja, papper som en lapp på anslagstavlan, Archivo smal och
   fet i rubrikerna som på en matchaffisch. */

:root {
  --font-head: "Archivo", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --bg: #F5F3EC;
  --surface: #EAE7DD;
  --ink: #0E1B3C;
  --muted: #586079;
  --line: #CFCCC1;
  --accent: #1E4FD6;
  --accent-hover: #163FB0;
  --accent-ink: #FFFFFF;
  --radius: 6px;

  --h1: clamp(48px, 13vw, 88px);  --h1-lh: 0.92;  --h1-ls: -0.01em;
  --tal: clamp(48px, 13vw, 72px);                   /* räknarens siffra */
  --head-weight: 800;
  --head-stretch: 72%;

  --wrap: 640px;
}

[hidden] { display: none !important; }

body { padding-bottom: env(safe-area-inset-bottom); }

h1, h2, h3, h4 { font-stretch: var(--head-stretch); }
h1 { text-transform: uppercase; }
h4 { font-weight: var(--head-weight); }

.ram { padding-top: var(--gutter); }

/* ---------- Heron ---------- */

.hero .etikettrad + h1 { margin-top: 83px; }
.hero > * + * { margin-top: var(--space-block); }
.hero .etikettrad { margin-top: 0; }

.bild { margin: 0; }
.bild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: var(--surface);
}
.bild figcaption { margin-top: 8px; }

.raknare-tal {
  font-family: var(--font-head);
  font-weight: var(--head-weight);
  font-stretch: var(--head-stretch);
  font-size: var(--tal);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.raknare-av { color: var(--muted); }
.matare {
  height: 10px;
  margin-top: 16px;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
}
.matare-fyllt {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width .6s cubic-bezier(.2, .8, .2, 1);
}
.raknare .hjalp { margin-top: 8px; }

/* ---------- Formuläret ---------- */

.form-fot { margin-top: 24px; }
.form-fot .hjalp { width: 100%; margin: 0; }
.knapp:not(:disabled):active { background: var(--accent-hover); }
.integritet { margin-top: var(--space-field); }

.tack > * + * { margin-top: 12px; }
.tack .knapp { margin-top: 20px; }

/* ---------- Sektionerna ---------- */

.sektion > .etikettrad + .rubrik { margin-top: 83px; }
.rubrik + * { margin-top: var(--space-content); }

.meriter { list-style: none; padding: 0; }
.meriter li {
  display: grid;
  gap: 8px;
  padding: 16px 0 20px;
  border-top: 1px solid var(--line);
}
.meriter li:last-child { border-bottom: 1px solid var(--line); }

.halsningar { list-style: none; padding: 0; }
.halsningar li { padding: 16px 0; border-top: 1px solid var(--line); }
.halsningar li:last-child { border-bottom: 1px solid var(--line); }
.halsningar .vem { color: var(--muted); }
.halsningar .vem--namn { color: var(--ink); }
.halsningar q + .vem { display: block; margin-top: 6px; }

footer > p:first-of-type { margin-top: var(--space-content); }
.slut-knapp { margin-top: var(--space-block); }

@media (min-width: 600px) {
  .meriter li { grid-template-columns: 140px 1fr; gap: var(--col-gap); }
}