/* lpc-guide.css — Mini Guidens laaste design, oversat til web.
 *
 * HVORFOR DENNE FIL FINDES
 * Den 7. september 2026 saa landingssiden ud som app'en (moerk topbjaelke,
 * sort pille, DM Sans) og guiden saa ud som guiden (creme papir, Literata,
 * dybgroen). Kunden gaar fra den ene til den anden og ser to forskellige
 * firmaer. Ejerens ord: siden skal "layout-, struktur- og designmaessigt
 * have en god sammenhaeng med vores miniguide".
 *
 * Vaerdierne her er IKKE valgt. De er guidens laaste tokens fra
 * masters/kandidater/font-v2.1.3/production/mini_guide_tokens.py, oversat
 * 1:1. Skal en farve aendres, aendres den DER foerst - saa foelger denne fil.
 *
 * Fonte: guiden bruger Literata SemiBold (overskrifter) og Selawik, som er
 * Microsofts aabne udgave af Segoe UI (broedtekst). Paa web hentes Literata
 * fra Google Fonts; Segoe UI findes paa Windows, og system-ui tager over paa
 * Apple og Android. Det er samme humanistiske sans, som guiden er sat i.
 */

:root {
  /* Palette - ordret fra mini_guide_tokens.py */
  --g-interior-cream: #FFF9EF;
  --g-cover-cream:    #FFF8ED;
  --g-ink:            #070B09;
  --g-deep-green:     #00382C;
  --g-green:          #0A5948;
  --g-mint:           #DCECE3;
  --g-warm-card:      #FFF0CF;
  --g-checklist:      #FFF3D9;
  --g-gold:           #B88628;
  --g-rust:           #A14631;
  --g-blush:          #F2D3C6;

  --g-serif: Literata, Georgia, "Times New Roman", serif;
  --g-sans:  "Segoe UI", Selawik, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  background: var(--g-cover-cream);
  color: var(--g-ink);
  font-family: var(--g-sans);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- siden */
.g-side {
  position: relative;
  overflow: hidden;            /* cirklerne maa ikke give vandret rul */
  max-width: 640px;
  margin: 0 auto;
  padding: 0 22px 32px;
  min-height: 100vh;
}

/* Guidens to bloede cirkler: sand oeverst til hoejre, mint nederst til
   venstre. Rent pynt, saa de ligger bag alt og fanger ingen tryk. */
.g-side::before, .g-side::after {
  content: ""; position: absolute; border-radius: 50%; z-index: 0; pointer-events: none;
}
.g-side::before { width: 300px; height: 300px; right: -120px; top: -110px; background: var(--g-warm-card); }
.g-side::after  { width: 260px; height: 260px; left: -130px; bottom: 120px; background: var(--g-mint); }
.g-side > * { position: relative; z-index: 1; }

/* ------------------------------------------------------------ masthead */
.g-masthead {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 22px 0 10px;
  border-bottom: 2px solid var(--g-gold);
  font-weight: 700; font-size: 15px; letter-spacing: .10em; text-transform: uppercase;
  color: var(--g-deep-green);
}

/* ---------------------------------------------------------- typografi */
/* Morten, 8. september 2026: "Skal goeres stoerre og tydeligere med en ramme
   omkring". Stod som 12 px lys rust uden ramme og forsvandt mellem afsnittene.
   Nu en indrammet etiket - inline-block, saa rammen slutter om teksten og
   ikke om hele spaltebredden.
   12. september 2026: samme format er nu laast for ALLE kundeflader (guide,
   app, landingssider): 15 px, versaler, rust ramme - og teksten i dybgroen,
   fordi etiketter skal maale mindst 7:1 (rust paa creme er 5,84:1, dybgroen
   12,5:1). Guiden og app'en er sat praecis saadan. */
.g-eyebrow {
  display: inline-block;
  margin: 30px 0 12px;
  padding: 7px 14px;
  border: 2px solid var(--g-rust);
  border-radius: 8px;
  font-weight: 700; font-size: 15px; letter-spacing: .10em; text-transform: uppercase;
  color: var(--g-deep-green);
}
.g-h1 {
  margin: 0 0 12px;
  font-family: var(--g-serif); font-weight: 600;
  font-size: clamp(34px, 9vw, 42px); line-height: 1.12;
  color: var(--g-deep-green);
  letter-spacing: -.01em;
  /* Uden denne braekkede overskriften paa mobil, saa "$5" stod alene paa
     anden linje. Det er det foerste kunden ser. balance fordeler linjerne;
     browsere uden stoette ombryder som foer, saa intet gaar i stykker. */
  text-wrap: balance;
}
.g-h2 {
  margin: 30px 0 10px;
  font-family: var(--g-serif); font-weight: 600;
  font-size: 26px; line-height: 1.2;
  color: var(--g-deep-green);
}
.g-lead {
  margin: 0 0 18px;
  font-size: 20px; line-height: 1.45;
  color: var(--g-ink);
}
.g-p { margin: 0 0 14px; }

/* Metodens kernesaetning. Morten, 8. september 2026: skal ogsaa have en ramme.
   Bevidst lettere end .g-regel nedenfor, som er fyldt dybgroen med guldbue -
   ellers ville de to konkurrere om den samme opmaerksomhed paa samme side. */
.g-fremhaevet {
  margin: 0 0 20px;
  padding: 14px 18px;
  border: 2px solid var(--g-deep-green);
  border-radius: 12px;
  background: var(--g-interior-cream);
  font-weight: 700; font-size: 20px; line-height: 1.4;
  color: var(--g-deep-green);
}

/* ------------------------------------------------- nummererede kort
   Guidens side 5: skiftevis mint og varm creme, rust-brik med nummer. */
.g-kort { display: grid; gap: 12px; margin: 16px 0 6px; }
.g-kort-1 {
  display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start;
  padding: 16px 16px 16px 14px;
  border-radius: 16px;
  border: 1.5px solid rgba(10, 89, 72, .25);
  background: var(--g-mint);
}
.g-kort-1:nth-child(even) {
  background: var(--g-warm-card);
  border-color: rgba(184, 134, 40, .45);
}
.g-brik {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 12px;
  background: var(--g-rust); color: #FFF9EF;
  font-weight: 700; font-size: 17px;
}
.g-kort-1 h3 {
  margin: 4px 0 4px; font-size: 19px; line-height: 1.25; font-weight: 700;
  color: var(--g-deep-green);
}
.g-kort-1 p { margin: 0; font-size: 17px; line-height: 1.4; }

/* ------------------------------------------------- reglen (moerk boks)
   Guidens "THE SIMPLE RULE": dybgroen, guld etiket, hvid serif. Guld-
   halvcirklen i hjoernet er pynt. Boksen er ogsaa den moerke flade,
   Master 21 kraever paa foerste skaerm - guiden loeser det saadan. */
.g-regel {
  position: relative; overflow: hidden;
  margin: 18px 0 8px; padding: 18px 20px 20px;
  border-radius: 18px;
  background: var(--g-deep-green); color: var(--g-interior-cream);
}
.g-regel::after {
  content: ""; position: absolute; right: -60px; top: -30px;
  width: 150px; height: 150px; border-radius: 50%;
  background: var(--g-gold); opacity: .95;
}
.g-regel > * { position: relative; z-index: 1; }
/* Etiketten i regelboksen: 15 px og ramme, som alle sektionsetiketter
   (Morten, 12. september 2026). Guld paa dybgroen: 8,9:1. */
.g-regel-etiket {
  display: inline-block; margin: 0 0 10px; padding: 6px 12px;
  border: 2px solid #E9C25E; border-radius: 8px;
  font-weight: 700; font-size: 15px; letter-spacing: .10em;
  text-transform: uppercase; color: #E9C25E;
}
.g-regel p {
  margin: 0; font-family: var(--g-serif); font-weight: 600;
  font-size: 20px; line-height: 1.3; max-width: 30ch;
}

/* --------------------------------------------------------- piller
   Guidens side 17: gul, mint og blush pille med korte versal-etiketter. */
.g-piller { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.g-pille {
  flex: 1 1 auto; text-align: center;
  padding: 10px 12px; border-radius: 999px;
  font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--g-deep-green);
}
.g-pille-gul   { background: #F1CB5E; }
.g-pille-mint  { background: var(--g-mint); }
.g-pille-blush { background: var(--g-blush); }

/* --------------------------------------------------------- formular
   Guidens varme creme-kort med guldkant. Felter og knapper >= 52 px hoeje. */
.g-formkort {
  margin: 12px 0 0; padding: 18px 16px 16px;
  border-radius: 18px;
  background: var(--g-warm-card);
  border: 1.5px solid rgba(184, 134, 40, .45);
}
.g-formkort label:not(.g-samtykke) { display: block; font-weight: 700; font-size: 16px; margin: 0 0 6px; color: var(--g-deep-green); }
/* Saetningen om Privacy Notice indsaettes af customer-footer.js i en <p>
   uden klasse. Uden denne regel staar den i browserens blaa. */
.g-formkort p { margin: 12px 0 0; font-size: 16px; line-height: 1.45; color: var(--g-ink); }
.g-formkort p a { color: var(--g-green); font-weight: 700; }
.g-formkort input[type="email"] {
  width: 100%; min-height: 54px; padding: 12px 14px;
  font: inherit; font-size: 18px;
  border: 1.5px solid rgba(0, 56, 44, .35); border-radius: 12px;
  background: #fff; color: var(--g-ink);
}
.g-formkort input[type="email"]:focus { outline: 3px solid var(--g-green); outline-offset: 2px; }

.g-samtykke {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 14px 0 16px; font-weight: 400; font-size: 16px; line-height: 1.45;
  color: var(--g-ink); cursor: pointer;
}
.g-samtykke input[type="checkbox"] {
  /* 44x44 er trykmaalet masteren kraever. 24x24 er guidens laaste udseende.
     Begge dele: kassen tegnes i ::before, mens selve feltet fylder 44x44.
     Foer 7. september 2026 var feltet 24x24 med 10px margin - marginen ser
     stor ud, men den er uden for elementet og kan ikke rammes. Det er samme
     fejl som de 55 af 59 trykfelter i Grocery Companion. */
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto;
  position: relative;
  width: 44px; height: 44px; margin: 0; padding: 0;
  border: 0; background: none; cursor: pointer;
  display: grid; place-content: center;
}
.g-samtykke input[type="checkbox"]::before {
  content: ""; width: 24px; height: 24px;
  border: 2px solid var(--g-deep-green); border-radius: 5px;
  background: #fff;
}
.g-samtykke input[type="checkbox"]:checked::before {
  background: var(--g-green); border-color: var(--g-green);
}
.g-samtykke input[type="checkbox"]::after {
  content: ""; position: absolute; opacity: 0;
  top: 50%; left: 50%; width: 6px; height: 11px;
  border: solid #fff; border-width: 0 3px 3px 0;
  transform: translate(-50%, -60%) rotate(45deg);
}
.g-samtykke input[type="checkbox"]:checked::after { opacity: 1; }
.g-samtykke input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--g-green); outline-offset: 2px; border-radius: 8px;
}
.g-samtykke span { padding-top: 12px; }

/* Knapper: guidens side 17 - dybgroen fyldt til det primaere,
   rust til "Show my dinners"-typen. Mindste tryk-maal 52 px. */
.g-knap {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 54px; padding: 14px 18px;
  border-radius: 14px; border: 0; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 18px; text-decoration: none;
}
.g-knap-primaer { background: var(--g-deep-green); color: var(--g-interior-cream); }
.g-knap-primaer:disabled { opacity: .6; cursor: default; }
.g-knap-sekundaer {
  margin-top: 12px;
  background: #fff; color: var(--g-deep-green);
  border: 2px solid var(--g-deep-green);
}
.g-knap:focus-visible { outline: 3px solid var(--g-gold); outline-offset: 3px; }

/* Bot-kontrollen (Cloudflare Turnstile) har sin egen plads i formularen, saa
   knappen ikke hopper, naar widgeten tegnes. 70 px er widgetens egen hoejde. */
.g-botkontrol { min-height: 70px; margin: 14px 0 12px; }

/* --------------------------------------------------------- statusboks
   Morten, 12. september 2026: "Besked omkring at email er afsendt eller ikke
   kan afsendes nu skal staa tydeligere og med ramme omkring saa beskeden
   fremstaar MEGET tydeligt, naar der er klikket paa send. Og det skal gaelde
   for ALLE vores landing sider."
   Standarden (statusboks_tjek.py maaler den): synlig kun med indhold, ramme
   paa mindst 3 px, skrift paa mindst 18 px, en versal-etiket der siger SENDT /
   NOT SENT / SENDING, og en farve pr. tilstand - groen naar det lykkedes, rust
   naar det ikke gjorde. Ingen tilstand ligner en anden. */
.g-besked {
  display: none;
  margin: 16px 0 0; padding: 16px 18px;
  border-radius: 14px;
  border: 3px solid var(--g-gold);
  background: var(--g-checklist);
  color: var(--g-ink);
  font-size: 18px; line-height: 1.45; font-weight: 600;
}
.g-besked.is-visible { display: block; }
.g-besked strong {
  display: block; margin: 0 0 6px;
  font-size: 15px; letter-spacing: .10em; text-transform: uppercase;
  color: var(--g-deep-green);
}
.g-besked.is-sent    { border-color: var(--g-deep-green); background: var(--g-mint); }
.g-besked.is-error   { border-color: var(--g-rust); background: var(--g-blush); }
.g-besked.is-error strong { color: var(--g-rust); }
.g-besked.is-pending { border-color: var(--g-gold); background: var(--g-checklist); }

/* Smaa noter: sans, ikke svag graa - guiden bruger "deep near-black ink,
   never weak grey". 16 px, ikke mindre: alt under 17 pt er en fejl i
   guiden, og en note paa web boer ikke vaere svaerere at laese. */
.g-note { margin: 12px 0 0; font-size: 16px; line-height: 1.45; color: var(--g-ink); }
.g-note a { color: var(--g-green); font-weight: 700; }

/* --------------------------------------------------------- bundlinje */
.g-bund {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-top: 30px; padding-top: 12px;
  border-top: 2px solid var(--g-gold);
  font-weight: 700; font-size: 13px; color: var(--g-ink);
}
/* Var 39 px hoejt - fem pixels under masterens 44. Et link i en bundlinje
   er et selvstaendigt trykfelt, ikke et link inde i en saetning. */
.g-bund a {
  color: var(--g-green);
  display: inline-flex; align-items: center;
  min-height: 44px;
}

[hidden] { display: none !important; }