/* Content theme: Lunchbeat Gothenburg, in the palette and type of lunchbeat.se.
   Scope: only the page content (<main class="theme-lunchbeat">). Header and page background stay
   on the site theme. Use AFTER style.css.
   Self-hosted font: Archivo variable (OFL, wght + wdth axes), latin subset. */
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("fonts/archivo-variable.woff2") format("woff2");
}

main.theme-lunchbeat {
  --lb-gold: #e7bb2a;
  --lb-gold-bright: #ffd23f;
  --lb-red: #de444c;
  --lb-cyan: #1cb8e8;
  --lb-lime: #e0fa18;
  --lb-ink: #111111;
  --text: light-dark(var(--lb-ink), #f4f2ec);
  --muted: light-dark(rgba(17, 17, 17, .66), rgba(244, 242, 236, .7));
  --neon: light-dark(#c2323a, #ff6b72);     /* red, darkened (light) / brightened (dark) for text contrast */
  --neon2: light-dark(#0f7fa3, #4cc9f0);    /* cyan, likewise */
  --line: light-dark(rgba(17, 17, 17, .14), rgba(244, 242, 236, .16));
  font-family: "Archivo", Arial, sans-serif;
  color: var(--text);
}

/* Display type: extra-wide, heavy */
main.theme-lunchbeat h1, main.theme-lunchbeat h2 {
  font-family: "Archivo", Arial, sans-serif; font-weight: 900; font-stretch: 125%; letter-spacing: -.01em;
}
main.theme-lunchbeat h1 { line-height: 1.05; }
main.theme-lunchbeat .hero-next { color: var(--muted); }

/* Four-colour stripe under headings (red / gold / cyan / lime) */
main.theme-lunchbeat .page-hero h1::after, main.theme-lunchbeat .section h2::after {
  content: ""; display: block; width: 120px; height: 6px; margin-top: 14px; border-radius: 999px;
  background: linear-gradient(90deg,
    var(--lb-red) 0 25%, var(--lb-gold) 25% 50%, var(--lb-cyan) 50% 75%, var(--lb-lime) 75% 100%);
}
main.theme-lunchbeat .section h2::after { position: static; animation: none; }

/* Gold pill button */
main.theme-lunchbeat .btn {
  font-family: "Archivo", Arial, sans-serif; font-weight: 800; font-stretch: 125%; letter-spacing: .02em;
  color: var(--lb-ink); background: var(--lb-gold); border-color: var(--lb-gold);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
main.theme-lunchbeat .btn:hover, main.theme-lunchbeat .btn:focus-visible {
  background: var(--lb-gold-bright); border-color: var(--lb-gold-bright);
}

main.theme-lunchbeat .hero-media {
  border: 0; border-radius: 20px; background: #fff; box-shadow: 0 14px 40px rgba(0, 0, 0, .15);
}

/* "Boka oss" as a gold band, like the sections on lunchbeat.se */
main.theme-lunchbeat .section.how {
  width: calc(100% - 2 * var(--gutter)); margin: 32px auto 56px; padding: 40px clamp(20px, 5vw, 48px);
  background: var(--lb-gold); border-radius: 20px; box-shadow: 0 14px 40px rgba(0, 0, 0, .12);
}
main.theme-lunchbeat .section.how h2::after {
  background: linear-gradient(90deg, var(--lb-red) 0 33%, var(--lb-ink) 33% 66%, var(--lb-cyan) 66% 100%);
}
main.theme-lunchbeat .how p, main.theme-lunchbeat .section.how h2 { color: var(--lb-ink); }
main.theme-lunchbeat .text-link {
  display: inline-block; padding: 10px 20px; border-radius: 999px;
  font-weight: 800; font-stretch: 125%; color: #fff; background: var(--lb-ink); text-decoration: none;
  transition: transform .15s ease, background .2s ease;
}
main.theme-lunchbeat .text-link:hover, main.theme-lunchbeat .text-link:focus-visible {
  background: var(--lb-red); text-decoration: none; transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) { main.theme-lunchbeat .text-link { transition: none; } }
main.theme-lunchbeat .section h2 { padding-bottom: 0; }