/* ─────────────────────────────────────────────────────────────────
   L & N Wenthe AB — lnwenthe.se
   Digitalt företagskort: kompakt, sakligt, tidlöst.
   ───────────────────────────────────────────────────────────────── */

:root {
  --bg: #faf9f5;
  --accent: #3f6f63;       /* dov grön ur logotypen, AA mot --bg */
  --accent-djup: #2e544b;
  --sand: #cbb489;         /* endast dekor, aldrig text */
  --ink: #26333c;
  --mjuk: #4a5860;
  --dov: #6f6b60;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: var(--bg); }

a { color: var(--ink); text-decoration: none; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Mobil: tre grupper (logotyp+intro, verksamheter, bolagsuppgifter)
   som fördelar skärmens lediga höjd jämnt mellan sig. min-height och
   svh gör att sidan ändå kan scrollas på låga skärmar och att
   adressfältets upp- och nedfällning inte flyttar innehållet. */
.kort {
  max-width: 440px;
  margin: 0 auto;
  padding: calc(20px + env(safe-area-inset-top)) 24px calc(20px + env(safe-area-inset-bottom));
  text-align: center;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 28px;
}

/* ── Logotyp och beskrivning ── */
.brand img {
  width: min(54vw, 200px);
  height: auto;
  display: block;
  margin: 0 auto;
}
.brand p {
  margin-top: 22px;
  font-size: 1.0625rem;  /* 17px */
  color: var(--mjuk);
}

/* ── Verksamheter ── */
/* Avstånden mellan grupperna sköts av space-evenly på mobil. */
main { margin-top: 0; }
.etikett {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-size: 0.78rem;    /* 12.5px */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.lista { list-style: none; margin-top: 16px; }
.lista li + li { margin-top: 22px; }
.lista a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  font-size: 1.125rem;   /* 18px */
  line-height: 1.3;
}
.lista a:hover { color: var(--accent-djup); }
.lista .pil {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--accent);
}
.lista p {
  margin-top: 4px;
  font-size: 0.9rem;     /* 14.5px */
  color: var(--mjuk);
}

/* ── Kontakt och bolagsuppgifter ── */
footer {
  margin-top: 0;
  font-size: 0.8125rem;  /* 13px */
  line-height: 1.8;
  color: var(--dov);
}
footer a {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  color: var(--accent);
  border-bottom: 1px solid var(--sand);
  padding-bottom: 1px;
}
footer a:hover { color: var(--accent-djup); }

/* ── Dator och surfplatta: bredare innehållsyta och större text ── */
@media (min-width: 768px) {
  body {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .kort {
    /* Måste sättas explicit: som flex-item krymper kortet annars
       till innehållets bredd och max-width får ingen effekt. */
    width: 100%;
    max-width: 680px;
    padding: 48px 32px;
    /* Dator behåller vanligt blockflöde med fasta avstånd. */
    display: block;
    min-height: 0;
    gap: 0;
  }

  .brand img { width: 250px; }
  .brand p {
    margin-top: 26px;
    font-size: 1.25rem;    /* 20px */
  }

  main { margin-top: 58px; }
  .etikett { font-size: 0.8125rem; }   /* 13px */
  .lista { margin-top: 20px; }
  .lista li + li { margin-top: 26px; }
  .lista a { font-size: 1.25rem; }     /* 20px */
  .lista .pil { width: 17px; height: 17px; }
  .lista p {
    margin-top: 5px;
    font-size: 1.0625rem;  /* 17px */
  }

  footer {
    margin-top: 52px;
    font-size: 0.9375rem;  /* 15px */
  }
  footer p { margin: 0; }
  footer a { font-size: 0.9rem; }
}