/* Fælles stil for baremad.dk: forsiden og de to tekstsider.
   Forsiden er "Plakat"-udgaven: grøn hero, mørkt kort, lyst grønt støt-bånd.
   Skriften hentes lokalt, så siden stadig ikke kalder tredjeparter. */

@font-face {
  font-family: "Familjen Grotesk";
  src: url("fonts/familjen-grotesk-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --flade: #F8FAF0;
  --kort: #EEF2E2;
  --tekst: #191D16;
  --daempet: #44483D;
  --primaer: #466730;
  --dyb: #2F4F1B;
  --lys: #C7EEA9;
  --nat: #11140E;
  --nat-kort: #1B1F16;
  --paa-nat: #E2E3D8;
  --paa-nat-daempet: #C4C8B9;
  --nat-primaer: #ABD28F;
  --kant: rgba(25, 29, 22, .1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--flade);
  color: var(--tekst);
  font: 400 17px/1.6 "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primaer); text-decoration: none; }
a:hover { color: var(--dyb); }
.baand { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

h1, h2 { font-weight: 700; letter-spacing: -.03em; line-height: 1.06; text-wrap: balance; }

/* --- Knapper --- */
.knap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 32px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.knap svg { width: 18px; height: 18px; }

/* --- Toppen: den grønne plakat --- */
.hero { background: var(--primaer); color: var(--flade); overflow: hidden; }
.toplinje {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 22px;
}
/* Bomærket: ikon plus navn. Ikonet er tegnet som app-ikon, og gaflens
   grene forsvinder under ~50px — men med navnet ved siden af skal mærket
   kun være genkendeligt, ikke læsbart. */
.toplinje .logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 600;
  border-bottom: 0;
}
.toplinje .logo img { width: 36px; height: 36px; display: block; }
.toplinje a { color: var(--flade); font-size: 15px; font-weight: 500; border-bottom: 1px solid rgba(248, 250, 240, .4); }
.toplinje a:hover { color: var(--lys); }

.hero-krop {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 48px;
  padding-top: 44px;
}
.hero-tekst { flex: 1 1 440px; min-width: 0; padding-bottom: 72px; }
.hero h1 { font-size: clamp(52px, 8.4vw, 104px); line-height: .95; margin: 0 0 24px; }
.hero .under { font-size: clamp(20px, 2.3vw, 25px); line-height: 1.4; margin: 0 0 32px; max-width: 28ch; color: #E4EDD8; }
.hero .handlinger { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.hero .knap { background: var(--lys); color: var(--dyb); }
.hero .knap:hover { background: var(--flade); color: var(--dyb); }
.hero .note { margin: 0; font-size: 14.5px; line-height: 1.45; color: #C6D6B4; max-width: 24ch; }

/* Telefonen skyder ud over kanten af det grønne felt. Skærmbilledet er
   taget i mørkt tema, så rammen er mørk. */
.telefon { flex: 0 1 280px; min-width: 200px; margin: 0 auto -60px; }
.telefon .ramme {
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  padding: 10px 10px 0;
  border-radius: 36px 36px 0 0;
  background: var(--nat-kort);
}
.telefon img { display: block; width: 100%; height: auto; border-radius: 27px 27px 0 0; }

/* --- Find noget der passer --- */
.find { padding: 96px 24px 0; }
.find h2 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.04; margin: 0 0 12px; max-width: 20ch; }
.find p { margin: 0; font-size: 19px; color: var(--daempet); max-width: 46ch; }

/* --- Hvorfor BareMad findes: mørkt kort --- */
.hvorfor { padding-top: 80px; }
.hvorfor .kort {
  background: var(--nat);
  color: var(--paa-nat);
  border-radius: 32px;
  padding: clamp(32px, 5vw, 72px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px 56px;
}
.hvorfor .mrk {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nat-primaer);
}
.hvorfor .aabning {
  margin: 0;
  font-weight: 600;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.14;
  letter-spacing: -.025em;
  color: var(--flade);
  text-wrap: pretty;
}
.hvorfor p.brod { margin: 0 0 16px; color: var(--paa-nat-daempet); text-wrap: pretty; }
/* Sidste linje er både appens navn og hele argumentet — den står alene. */
.hvorfor .slutlinje {
  margin: 24px 0 0;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--nat-primaer);
}

/* --- Sæt flueben, mens I handler --- */
.handler {
  padding: 80px 24px 96px;
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: center;
  gap: 56px;
}
.handler .telefon { flex: 0 1 240px; min-width: 190px; margin: 0 auto; }
.handler .telefon .ramme {
  max-width: 240px;
  padding: 9px;
  border-radius: 32px;
  box-shadow: 0 24px 50px -24px rgba(25, 29, 22, .45);
}
.handler .telefon img { border-radius: 24px; }
.handler .tekst { flex: 1 1 340px; min-width: 0; }
.handler h2 { font-size: clamp(32px, 4.2vw, 50px); margin: 0 0 14px; max-width: 18ch; }
.handler p { margin: 0; font-size: 19px; color: var(--daempet); max-width: 42ch; }

/* --- Støt: lyst grønt bånd --- */
.stoet { background: var(--lys); color: var(--dyb); }
.stoet .baand {
  padding: 76px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.stoet .tekst { flex: 1 1 380px; min-width: 0; }
.stoet h2 { font-size: clamp(30px, 3.8vw, 46px); margin: 0 0 12px; max-width: 22ch; }
.stoet p { margin: 0; font-size: 18px; color: #33501F; max-width: 44ch; }
.stoet .knap { background: var(--dyb); color: var(--flade); }
.stoet .knap:hover { background: var(--nat); color: var(--flade); }

/* --- Footer --- */
footer { background: var(--nat); color: var(--paa-nat-daempet); }
footer nav {
  max-width: 1120px;
  margin: 0 auto;
  padding: 34px 24px 46px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  font-size: 14.5px;
}
footer a { color: var(--paa-nat-daempet); }
footer a:hover { color: var(--flade); text-decoration: underline; }
footer .navn { color: var(--flade); font-weight: 600; }

/* --- Tekstsider (privatliv, sletning) ---
   Samme greb som forsiden: grønt bånd øverst, tekst på den lyse flade,
   mørk footer i fuld bredde. Båndet er bare smallere her, så linjerne
   bliver til at læse. */
.baand.smal { max-width: 720px; }

.sidetop { background: var(--primaer); color: var(--flade); }
.sidetop .titel { padding-top: 44px; padding-bottom: 56px; }
.sidetop h1 { margin: 0 0 12px; font-size: clamp(40px, 7vw, 66px); }
.sidetop .opdateret { margin: 0; font-size: 15px; color: #C6D6B4; }

.tekst { padding-top: 56px; padding-bottom: 88px; }
/* Indledningen står som manchet, resten som brødtekst. */
.tekst .manchet { margin: 0 0 8px; font-size: 21px; line-height: 1.5; color: var(--tekst); }
.tekst h2 { margin: 46px 0 12px; font-size: 27px; letter-spacing: -.025em; }
.tekst p, .tekst li { color: var(--daempet); }
.tekst p { margin: 0 0 14px; }
.tekst ul { margin: 0 0 14px; padding-left: 22px; }
.tekst li { margin: 0 0 8px; }
.tekst li::marker { color: var(--primaer); }
.tekst strong { color: var(--tekst); font-weight: 600; }
.tekst a { border-bottom: 1px solid rgba(70, 103, 48, .35); }
.tekst a:hover { border-bottom-color: var(--dyb); }

/* Trinene er hele pointen på sletningssiden, så de får deres eget kort. */
.trin {
  counter-reset: trin;
  margin: 0;
  padding: clamp(22px, 4vw, 34px);
  list-style: none;
  background: var(--kort);
  border-radius: 24px;
}
.trin li { position: relative; padding-left: 46px; margin: 0 0 16px; color: var(--tekst); }
.trin li:last-child { margin-bottom: 0; }
.trin li::before {
  counter-increment: trin;
  content: counter(trin);
  position: absolute;
  left: 0; top: -1px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--dyb);
  color: var(--lys);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tekstsiderne er korte; uden dette flyder den mørke footer op midt på
   en høj skærm i stedet for at lægge sig i bunden. */
body:has(main) { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }

/* Footeren er den samme mørke som på forsiden, bare i sidens egen bredde. */
footer.smal nav { max-width: 720px; }