/*
Theme Name: Björns Kök
Description: Tema för bjornskok.se. Bygger på Björns Köks grafiska profil V2.1: Dream Planner till rubriker, Familjen Grotesk till allt annat, huvudpaletten och den digitala kompletteringspaletten. Ljus yta dominerar, organiska former i nederkant.
Version: 0.1.0
Author: KBK Vemdalen
Text Domain: bjornskok
*/

/* ---------- Typsnitt ---------- */

@font-face {
  font-family: "Dream Planner";
  src: url("assets/fonts/dreamplanner.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

/* ---------- Färger och mått ---------- */

:root {
  /* Huvudpaletten, profilen sida 2 */
  --morkbrun: #352c2c;
  --brun: #664127;
  --ockra: #d3a262;
  --morkgron: #3c453a;
  --blagra: #506465;
  --ljusgra: #bcbdba;
  /* Digital kompletteringspalett, profilen sida 2–3 */
  --gradde: #f5ecd7;
  --gul: #f2b238;
  --tomat: #e4572e;
  --lila: #b878b6;

  --text: var(--morkbrun);
  --yta: var(--gradde);
  /* Den ljusa ytan är gräddvit ur den digitala paletten. Ingen egen vit. */
  --vit: var(--gradde);

  --rubrik: "Dream Planner", "Familjen Grotesk", system-ui, sans-serif;
  --brod: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --bredd: 1180px;
  --kant: clamp(16px, 4vw, 40px);
  --luft: clamp(56px, 9vw, 112px);
  --radie: 14px;
  --skugga: 0 18px 40px rgba(53, 44, 44, .18);
}

/* ---------- Grund ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--yta);
  color: var(--text);
  font-family: var(--brod);
  font-size: 18px;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-underline-offset: .18em; }
a:hover { color: var(--brun); }

h1, h2, h3 {
  font-family: var(--rubrik);
  font-weight: 400;
  line-height: 1.05;
  margin: 0 0 .45em;
  letter-spacing: .01em;
}

h1 { font-size: clamp(2.8rem, 7vw, 5.4rem); }
h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }

p { margin: 0 0 1em; }

.skarmlasare {
  position: absolute;
  left: -9999px;
}
.skarmlasare:focus {
  left: 16px;
  top: 16px;
  z-index: 100;
  background: var(--morkbrun);
  color: var(--gradde);
  padding: 10px 16px;
  border-radius: 8px;
}

.inre {
  width: 100%;
  max-width: calc(var(--bredd) + 2 * var(--kant));
  margin: 0 auto;
  padding: 0 var(--kant);
}

.lasbar { max-width: 720px; }

.sektion { padding: var(--luft) 0; position: relative; }

.kicker {
  display: block;
  font-family: var(--brod);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .8em;
}

.ingress { font-size: 1.2rem; max-width: 36em; }
/* Undersidornas ingress: en kort mening ska få plats på en rad (Björn 2026-10-08). */
.sidaHuvud .ingress { max-width: 52em; }

.liten { font-size: .9rem; }

/* ---------- Knappar ---------- */

.knapp {
  display: inline-block;
  background: var(--morkbrun);
  color: var(--gradde);
  font-family: var(--brod);
  font-weight: 700;
  line-height: 1.2;
  padding: 17px 32px;
  min-height: 56px;
  font-size: 1.1rem;
  border-radius: 999px;
  border: 2px solid var(--morkbrun);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.knapp:hover { background: var(--brun); border-color: var(--brun); color: var(--gradde); }

.knapp.ljus { background: var(--gradde); color: var(--morkbrun); border-color: var(--gradde); }
.knapp.ljus:hover { background: var(--vit); border-color: var(--vit); color: var(--morkbrun); }

.knapp.kant { background: transparent; color: inherit; border-color: currentColor; }
.knapp.kant:hover { background: var(--morkbrun); color: var(--gradde); border-color: var(--morkbrun); }

.knappar { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6em; }

/* ---------- Tassen ---------- */

.tass {
  display: inline-block;
  width: 1em;
  height: 1.2em;
  background: currentColor;
  -webkit-mask: url("assets/img/tass.svg") center / contain no-repeat;
  mask: url("assets/img/tass.svg") center / contain no-repeat;
  vertical-align: -.15em;
}

/* ---------- Sidhuvud ---------- */

.sidhuvud { background: var(--gradde); position: relative; z-index: 10; }

.sidhuvud .inre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  padding-top: 14px;
  padding-bottom: 14px;
}

.sidhuvud .logga img { width: auto; height: 54px; }

.meny { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; }
.meny ul { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; margin: 0; padding: 0; }
.meny a:not(.knapp) { text-decoration: none; font-weight: 600; }
.meny a:not(.knapp):hover { text-decoration: underline; color: var(--morkbrun); }
.meny .knapp { padding: 10px 20px; }

/* ---------- Hero, fullstor bild med rubrik (profilen: grundutförande 1) ---------- */

.hero {
  position: relative;
  min-height: min(84vh, 760px);
  display: flex;
  align-items: flex-end;
  color: var(--gradde);
  overflow: hidden;
}
.hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(53, 44, 44, .78) 0%, rgba(53, 44, 44, .45) 45%, rgba(53, 44, 44, 0) 75%),
    linear-gradient(to top, rgba(53, 44, 44, .85) 0%, rgba(53, 44, 44, .2) 50%, rgba(53, 44, 44, .1) 100%);
}
.hero .inre { position: relative; padding-top: 160px; padding-bottom: clamp(48px, 8vw, 96px); }
.hero h1 { max-width: 11em; }
.hero p { font-size: 1.25rem; max-width: 30em; }
.hero .tass { color: var(--ockra); font-size: 2.2rem; margin-bottom: .4em; }

/* ---------- Platta, en färg bär hela ytan (profilen: enfärgade plattor och sneda bilder) ---------- */

.platta {
  position: relative;
  overflow: hidden;
  padding: var(--luft) 0 calc(var(--luft) + 60px);
  background: var(--platta, var(--gradde));
  color: var(--platta-text, var(--morkbrun));
  --former-bak: var(--ockra);
  --former-fram: var(--morkgron);
}
.platta.gron { --platta: var(--morkgron); --platta-text: var(--gradde); --former-bak: var(--blagra); --former-fram: var(--ockra); }
.platta.brun { --platta: var(--morkbrun); --platta-text: var(--gradde); --former-bak: var(--brun); --former-fram: var(--ockra); }
.platta.ockra { --platta: var(--ockra); --platta-text: var(--morkbrun); --former-bak: var(--gul); --former-fram: var(--brun); }
.platta.vit { --platta: var(--vit); --former-bak: var(--gradde); --former-fram: var(--ockra); }
.platta.utan-former { padding-bottom: var(--luft); }

.platta .inre { position: relative; z-index: 1; }

.plattaGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.plattaGrid.omvand > :first-child { order: 2; }

.platta .tass { color: var(--ockra); font-size: 2.4rem; margin-bottom: .4em; }
.platta.ockra .tass { color: var(--morkbrun); }

/* Bilden lutar lätt, cirka 1–3 grader, med ljus ram (profilen, punkt 3 och 4). */
.lutad {
  border: 12px solid var(--vit);
  border-radius: 6px;
  box-shadow: var(--skugga);
  transform: rotate(2deg);
}
.lutad.vanster { transform: rotate(-2deg); }

.former {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(70px, 12vw, 180px);
  z-index: 0;
}
.former .bak { fill: var(--former-bak); }
.former .fram { fill: var(--former-fram); }

/* ---------- Veckans lunch: vänsterställt, dagarna i fet stil (profilen: när mycket text ska få plats) ---------- */

.lunch { margin: 1.2em 0 0; padding: 0; }
.lunch > div {
  display: grid;
  grid-template-columns: 7.5em 1fr;
  gap: 4px 16px;
  padding: 12px 0;
  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.lunch > div:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.lunch dt { font-weight: 700; }
.lunch dd { margin: 0; }

.lunchFakta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 1.2em 0 0; font-weight: 600; }

/* ---------- Kort, t.ex. evenemang ---------- */

.kortGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 32px);
  margin-top: 2em;
}

.kort {
  background: var(--vit);
  color: var(--morkbrun);
  border-radius: var(--radie);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 20px rgba(53, 44, 44, .08);
}
.kort img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.kort .kortText { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.kort h3 { margin: 0; }
.kort p { margin: 0; }
.kort .nar { font-weight: 700; font-size: .95rem; }

/* ---------- Bild bredvid text ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.split.omvand > :first-child { order: 2; }
.split img { border-radius: var(--radie); width: 100%; }

.bildpar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: center; }
.bildpar img { border-radius: var(--radie); width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.bildpar img:first-child { transform: translateY(-18px); }
.bildpar img:last-child { transform: translateY(18px); }

/* ---------- Öppettider ---------- */

.tider { display: grid; grid-template-columns: auto 1fr; gap: 2px 18px; margin: 0 0 .8em; }
.tider dt { font-weight: 700; }
.tider dd { margin: 0; }

.faktaRuta {
  background: var(--vit);
  border-radius: var(--radie);
  padding: clamp(24px, 4vw, 40px);
}

/* ---------- Bokningsband ---------- */

.band {
  background: var(--morkbrun);
  color: var(--gradde);
  padding: clamp(48px, 7vw, 80px) 0;
  text-align: center;
}
.band h2 { margin-bottom: .3em; }
.band p { font-size: 1.2rem; margin-bottom: 1.4em; }
.band .tass { color: var(--ockra); font-size: 2rem; margin-bottom: .5em; }

/* ---------- Sidrubrik på vanliga sidor ---------- */

.sidaHuvud { padding: clamp(48px, 7vw, 88px) 0 clamp(24px, 4vw, 40px); }
.sidaHuvud h1 { margin-bottom: .3em; }

/* ---------- Sidfot ---------- */

.sidfot { background: var(--morkgron); color: var(--gradde); padding: 64px 0 28px; font-size: 1rem; }
.sidfot a { color: var(--gradde); }
.sidfot a:hover { color: var(--ockra); }
.sidfot h2 { font-size: 1.7rem; color: var(--ockra); }
.sidfot ul { list-style: none; margin: 0; padding: 0; }
.sidfot li { margin-bottom: 4px; }
.sidfot .kolumner { display: grid; grid-template-columns: 1fr 1.2fr 1.4fr 1.2fr; gap: 32px; }
.sidfot .logga img { width: 96px; filter: none; }
.sidfot .botten {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  border-top: 1px solid rgba(245, 236, 215, .25);
  margin-top: 48px;
  padding-top: 20px;
  font-size: .9rem;
}

/* ---------- Mobil: samma innehåll, en kolumn ---------- */

@media (max-width: 960px) {
  .kortGrid { grid-template-columns: 1fr 1fr; }
  .sidfot .kolumner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  body { font-size: 17px; }
  .plattaGrid,
  .split { grid-template-columns: 1fr; }
  .plattaGrid.omvand > :first-child,
  .split.omvand > :first-child { order: 0; }
  .kortGrid { grid-template-columns: 1fr; }
  .sidhuvud .logga img { height: 44px; }
  .meny { width: 100%; justify-content: space-between; }
  .lunch > div { grid-template-columns: 1fr; }
  .lutad { border-width: 8px; }
  .hero { min-height: 78vh; }
}

@media (max-width: 480px) {
  .sidfot .kolumner { grid-template-columns: 1fr; }
}

/* Faktaruta efter text i samma kolumn */
.knappar + .faktaRuta,
p + .faktaRuta { margin-top: 2em; }

/* Faktarutan är alltid ljus med mörk text, också på en mörk platta */
.faktaRuta { color: var(--morkbrun); }

/* Rad med matbilder, samma höjd och beskärning */
.matrad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.6vw, 18px);
  margin-top: 1.8em;
}
.matrad img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radie); }

/* Lägre bildband med text, för stämningen mitt på en sida */
.hero.lag { min-height: min(64vh, 560px); }
.hero.lag p { max-width: 36em; }

@media (max-width: 720px) {
  .matrad { grid-template-columns: 1fr 1fr; }
}

/* Två sektioner i rad på samma yta delar på luften */
.sektion + .sektion { padding-top: 0; }

/* Den främre formen tar nästa sektions färg, så att plattan flyter över
   i nästa yta i stället för att sluta i en rand. */
.platta.flyt-gradde { --former-fram: var(--gradde); }
.platta.flyt-vit { --former-fram: var(--vit); }
.platta.flyt-ockra { --former-fram: var(--ockra); }
.platta.flyt-gron { --former-fram: var(--morkgron); }
.platta.flyt-brun { --former-fram: var(--morkbrun); }

/* Knapparna är det viktigaste på sidan (Björn 2026-09-26). Toppen får de största. */
.knapp.stor { padding: 20px 40px; min-height: 64px; font-size: 1.25rem; }
.meny .knapp { padding: 12px 24px; min-height: 48px; font-size: 1.05rem; }
.meny .aktuell a { color: var(--brun); }

/* Toppen: texten ligger nedtill på en mörk toning, aldrig mitt i bilden.
   Bilden visar folket i övre delen. */
.hero { align-items: flex-end; }
.hero > img { object-position: center 30%; }
.hero::before {
  background: linear-gradient(to top, rgba(53, 44, 44, .96) 0%, rgba(53, 44, 44, .88) 30%, rgba(53, 44, 44, .35) 58%, rgba(53, 44, 44, 0) 80%);
}
.hero .inre { padding-top: 45vh; }
.hero h1 { max-width: none; font-size: clamp(2.6rem, 6vw, 4.8rem); }

/* I mobilen står bilden överst och texten under, på mörk yta. */
@media (max-width: 720px) {
  .hero { display: block; min-height: 0; background: var(--morkbrun); }
  .hero > img { position: static; height: 56vh; }
  .hero::before { display: none; }
  .hero .inre { padding-top: 28px; padding-bottom: 40px; }
  .knapp.stor { width: 100%; text-align: center; }
}
.knapp { display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.kortGrid.tva { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .kortGrid.tva { grid-template-columns: 1fr; } }

/* Texten på en toppbild ligger på en egen mörk platta, så att den alltid går
   att läsa oavsett vad bilden visar (Björn 2026-09-26: rubriken var oläslig
   mitt på bilden). Profilen: låt en färg bära plattan. */
.hero::before { display: none; }
.hero .inre { padding-top: 38vh; }
.heroPlatta {
  background: rgba(53, 44, 44, .9);
  color: var(--gradde);
  border-radius: var(--radie);
  padding: clamp(24px, 3.4vw, 44px);
  max-width: 660px;
  box-shadow: var(--skugga);
}
.heroPlatta p:last-of-type { margin-bottom: 0; }
.hero.lag .inre { padding-top: 22vh; }
@media (max-width: 720px) {
  .hero .inre, .hero.lag .inre { padding-top: 0; }
  .heroPlatta { background: none; box-shadow: none; padding: 28px 0 8px; max-width: none; }
}

/* ---------- Menyn: rätt och pris på en rad, beskrivning under ---------- */

.hopp { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.6em 0 0; }
.hopp .knapp { min-height: 48px; padding: 12px 22px; font-size: 1rem; }

.menyDelar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 4vw, 56px) clamp(32px, 5vw, 72px);
  margin-top: 1.6em;
  align-items: start;
}
.menyGrupp h3 { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; margin-top: 1.2em; }
.menyGrupp h3:first-child { margin-top: 0; }
.menyGrupp h3 .pris { font-family: var(--brod); font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
.menyNot { margin: .4em 0 0; }
.menyGrupp h4.menyDel { margin: 1.4em 0 .2em; font-family: var(--brod); font-size: .85rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.lunch > div.idag dt::after { content: " i dag"; font-weight: 400; }
.lunch-veckans { margin-top: 1.2em; }
.lunch-idag { margin: 1em 0 0; font-size: 1.15rem; }

/* Påminnelse om barnmenyn under lunch- och kvällsrubriken */
.barnTips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: .6em 0 0; padding: 8px 14px 8px 12px; border-left: 4px solid var(--ockra); border-radius: 0 var(--radie) var(--radie) 0; background: color-mix(in srgb, var(--ockra) 16%, transparent); font-size: .95rem; }
.barnTips a { font-weight: 700; white-space: nowrap; }
.barnTips a::after { content: " ↓"; }

.rattlista { list-style: none; margin: 0; padding: 0; }
.rattlista li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 16px;
  padding: 12px 0;
  border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}
.rattlista li:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.rattlista .ratt { font-weight: 700; }
.rattlista .pris { font-weight: 700; white-space: nowrap; text-align: right; }
.rattlista .besk { grid-column: 1 / -1; font-size: .95rem; opacity: .9; }

.menyTips { margin-top: 2em; font-weight: 600; font-style: italic; }
.menyGrupp .lutad { margin-bottom: 28px; max-width: 360px; }
.knappar-mitt { justify-content: center; }
.sidaHuvud .matrad { margin-top: 2.2em; }

@media (max-width: 720px) {
  .menyDelar { grid-template-columns: 1fr; }
}

/* Rubriker balanseras, så att sista raden inte blir ett ensamt ord. */
h1, h2, h3 { text-wrap: balance; }

/* ---------- Mobilmenyn: logga | Boka bord | Meny (Björn 2026-09-26) ---------- */

.bokaMobil, .menyKnapp { display: none; }
.menyKnapp {
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 16px;
  border: 2px solid var(--morkbrun);
  border-radius: 999px;
  background: transparent;
  color: var(--morkbrun);
  font: 700 1rem var(--brod);
  cursor: pointer;
}
.menyKnapp .streck,
.menyKnapp .streck::before,
.menyKnapp .streck::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  position: relative;
}
.menyKnapp .streck::before, .menyKnapp .streck::after { content: ""; position: absolute; left: 0; }
.menyKnapp .streck::before { top: -6px; }
.menyKnapp .streck::after { top: 6px; }
.oppen .menyKnapp .streck { background: transparent; }
.oppen .menyKnapp .streck::before { top: 0; transform: rotate(45deg); }
.oppen .menyKnapp .streck::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 900px) {
  .sidhuvud .inre { flex-wrap: nowrap; gap: 10px; }
  .sidhuvud .logga { margin-right: auto; }
  .sidhuvud .logga img { height: 42px; }
  .bokaMobil { display: inline-flex; min-height: 48px; padding: 10px 18px; font-size: 1rem; }
  .js-meny .menyKnapp { display: inline-flex; }
  /* Utan skript står menyn under, med skript fälls den ut av knappen. */
  .sidhuvud { flex-wrap: wrap; }
  .meny { width: 100%; }
  .sidhuvud .inre { flex-wrap: wrap; }
  .sidhuvud .meny .knapp { display: none; } /* Boka bord står redan bredvid loggan */
  .js-meny .meny { display: none; }
  .js-meny.oppen .meny { display: block; padding: 8px 0 16px; }
  .meny ul { flex-direction: column; gap: 0; width: 100%; }
  .meny li a { display: block; padding: 14px 4px; font-size: 1.15rem; border-top: 1px solid rgba(53, 44, 44, .15); }
}

/* ---------- Evenemang i rad: karusell i mobilen (Björn 2026-09-26) ---------- */

.karusell {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * clamp(20px, 3vw, 32px)) / 3);
  gap: clamp(20px, 3vw, 32px);
  margin-top: 2em;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.karusell::-webkit-scrollbar { display: none; }
.karusell > .kort { scroll-snap-align: start; }
.karusellRam { position: relative; }
.karusellFot { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 18px; }
.karusellPilar { display: flex; gap: 10px; }
.karusellPilar[hidden] { display: none; }
.karusellPil { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--morkbrun); background: transparent; color: var(--morkbrun); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.karusellPil:hover:not(:disabled) { background: var(--morkbrun); color: var(--gradde); }
.karusellPil:disabled { opacity: .3; cursor: default; }
.karusellAlla { font-weight: 600; }
.kort .kortLankar { margin-top: auto; padding-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.kort .kortLankar .knapp { min-height: 48px; padding: 11px 20px; font-size: 1rem; }
@media (max-width: 900px) {
  .karusell {
    grid-auto-columns: min(82%, 340px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 12px;
    margin-left: calc(-1 * var(--kant));
    margin-right: calc(-1 * var(--kant));
    padding-left: var(--kant);
    scroll-padding-left: var(--kant);
  }
  .karusell > .kort { scroll-snap-align: start; }
  .karusellTips { font-size: .9rem; opacity: .8; margin: .6em 0 0; }
}
@media (min-width: 901px) { .karusellTips { display: none; } }

/* Inga kommande evenemang: hela avsnittet döljs (gemensamt beslut 2026-09-30) */
.sektion:has(.evenemangTomt.dolj) { display: none; }
.brodtext + .faktaRuta { margin-top: 1.6em; }
.faktaRuta + .knappar { margin-top: 1.6em; }
.tillbaka { margin-top: 1.6em; }
/* Evenemang utan bild: rubriken som på undersidorna, utan heroplattans mörka ruta. */
.sidaHuvud.utanBild .heroPlatta { background: none; box-shadow: none; padding: 0; color: inherit; max-width: none; }
/* En tillfällig meny i ett evenemangs brödtext står i en spalt. */
.brodtext .menyDelar { grid-template-columns: 1fr; margin-top: 1.4em; }
/* Kommande evenemang högst upp på /meny/: kompakta länkkort under de vanliga
   menyknapparna, utan färgad ruta (Björn 2026-10-10, bollat med ChatGPT). */
.lankgrupp { margin-top: 40px; }
.lankgrupp h2 { margin: 0; font-size: 1.75rem; line-height: 34px; }
.lankgruppLista { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lankgrupp + .matrad { margin-top: 32px; }
.lankkort { display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: 12px; align-items: center; box-sizing: border-box; min-height: 72px; padding: 12px 16px; border: 1px solid rgba(53, 44, 44, .22); border-radius: 8px; color: var(--morkbrun); text-decoration: none; }
.lankkortText { display: flex; flex-direction: column; gap: 4px; }
.lankkortNamn { font-weight: 700; font-size: 1rem; line-height: 22px; }
.lankkortDatum { font-size: .875rem; line-height: 20px; }
.lankkort:hover { border-color: rgba(53, 44, 44, .5); color: var(--morkbrun); }
.lankkort:hover .lankkortNamn { text-decoration: underline; }
.lankkort:focus-visible { outline: 2px solid var(--morkbrun); outline-offset: 3px; }
@media (max-width: 1023px) {
  .lankgrupp { margin-top: 32px; }
  .lankgrupp h2 { font-size: 1.5rem; line-height: 30px; }
  .lankgruppLista { grid-template-columns: 1fr; gap: 8px; max-width: 380px; }
}

/* Priset i en menyrubrik står på egen rad under rubriken */
.menyPris { font-weight: 700; margin: -.2em 0 .4em; }

/* Sidfoten i mobilen: två spalter, inte en lång (Björn 2026-09-26). */
@media (max-width: 720px) {
  .sidfot .kolumner { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .sidfot .kolumner > div:first-child { grid-column: 1 / -1; }
  .sidfot .logga img { width: 72px; }
  .sidfot .tider { gap: 2px 10px; }
}
@media (max-width: 480px) {
  .sidfot .kolumner { grid-template-columns: 1fr 1fr; }
}

/* Loggan är en klickyta på minst 48 px i mobilen */
@media (max-width: 900px) {
  .sidhuvud .logga { display: inline-flex; align-items: center; min-height: 48px; }
  .sidhuvud .logga img { height: 48px; }
}

/* Telefonnummer och annat som aldrig får brytas */
.helt { white-space: nowrap; }

/* ---------- Gruppen på Om oss ---------- */

/* Korten kommer från KBK Cores verksamhetsregister ([kbk_grupp]) med sin form
   från pluginet. Temat sätter bara färger och typsnitt ur profilen. */
.kbkGrupp {
  --kbk-grupp-yta: var(--gradde);
  --kbk-grupp-text: var(--morkbrun);
  --kbk-grupp-rubrik: var(--morkbrun);
  --kbk-grupp-kant: rgba(53, 44, 44, .12);
  --kbk-grupp-linje: rgba(53, 44, 44, .1);
  --kbk-grupp-typsnitt: var(--brod);
  --kbk-grupp-rubrik-typsnitt: var(--rubrik);
  --kbk-grupp-rubrik-storlek: 1.7rem;
  --kbk-grupp-rubrik-storlek-mobil: 1.3rem;
  --kbk-grupp-radie: var(--radie);
  margin-top: 2em;
}

/* Kort och rutor ligger på samma gräddvita yta som sidan. De skiljs åt med
   en tunn kant i mörkbrunt och en mjuk skugga, inte med en egen färg. */
.kort, .faktaRuta { border: 1px solid rgba(53, 44, 44, .12); }
.platta.vit { --platta: var(--gradde); }
/* Den ljusa ramen runt lutande bilder är också gräddvit. */
.lutad { border-color: var(--gradde); }
/* Faktarutan på en färgad platta behåller sin gräddvita yta och mörka text. */
.platta .faktaRuta { background: var(--gradde); color: var(--morkbrun); }


/* Sociala medier som ikoner i sidfoten, klickytor på 48 px */
.sociala { display: flex; gap: 8px; margin-top: 14px; }
.socialIkon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(245, 236, 215, .35); color: var(--gradde); }
.socialIkon:hover { color: var(--ockra); border-color: var(--ockra); }

/* Löptext på policysidor: sidrubriken och texten delar på luften. */
.sidaHuvud + .innehall .lopText { padding-top: 0; }
.lopText h2 { margin-top: 1.4em; font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
.lopText h3 { margin-top: 1.2em; }
.lopText ul { padding-left: 1.2em; }


/* Barndrinkarna ligger tätt under Pinsan i matspalten (Björn 2026-09-26).
   Filen är 599 px bred, så högst 396 px i datorn och 380 px på platta (dpr 2). */
.menyGrupp .barnBild { display: block; width: 100%; height: auto; max-width: 396px; margin: 18px 0 0; }
@media (max-width: 1100px) { .menyGrupp .barnBild { max-width: 380px; } }
@media (max-width: 720px) { .menyGrupp .barnBild { max-width: 100%; margin-bottom: 8px; } }

/* Inbäddad karta, samma rundning och skugga som bilderna. */
.karta { width: 100%; min-width: 0; aspect-ratio: 16 / 7; min-height: 380px; margin-top: 1.2em; border-radius: var(--radie); overflow: hidden; box-shadow: var(--skugga); }
.kontakt + .hittaHit { padding-top: 0; }
.kontakt .faktaRuta .liten { margin-top: .3em; }
.kontakt .split { align-items: stretch; }
.kontakt .faktaRuta h3 { margin: 1.1em 0 .2em; }
.kontakt .faktaRuta h3:first-child { margin-top: 0; }
.kontakt .faktaRuta p { margin: 0; }
.kontakt .faktaRuta .tider { margin-top: .2em; }
.knapp.lank, a.lank { color: inherit; text-decoration: underline; }

/* KBK Cores formulär (markup från KBK Core, stilen här). */
.kontakt + .skrivTill, .skrivTill + .hittaHit { padding-top: 0; }
.kbk-formular { display: grid; gap: 18px; margin-top: 1.2em; }
.kbk-formular-falt { display: grid; gap: 6px; margin: 0; }
.kbk-formular-falt label { font-weight: 700; }
.kbk-formular input, .kbk-formular textarea, .kbk-formular select {
  width: 100%;
  font: inherit;
  color: var(--morkbrun);
  background: var(--vit);
  border: 1px solid rgba(53, 44, 44, .35);
  border-radius: 10px;
  padding: 14px 16px;
  min-height: 52px;
}
.kbk-formular textarea { min-height: 160px; resize: vertical; }
.kbk-formular input:focus, .kbk-formular textarea:focus, .kbk-formular select:focus { outline: 3px solid var(--ockra); outline-offset: 1px; border-color: var(--morkbrun); }
.kbk-formular-fel { font-size: .95rem; font-weight: 700; color: var(--morkbrun); }
.kbk-formular .btn {
  justify-self: start;
  background: var(--morkbrun);
  color: var(--gradde);
  font: 700 1.25rem/1.2 var(--brod);
  padding: 20px 40px;
  min-height: 64px;
  border: 2px solid var(--morkbrun);
  border-radius: 999px;
  cursor: pointer;
}
.kbk-formular .btn:hover { background: var(--brun); border-color: var(--brun); }
.kbk-formular-tack { font-weight: 700; font-size: 1.15rem; }
@media (max-width: 720px) { .kbk-formular .btn { justify-self: stretch; } }

/* Bokningsbandets rad får plats i iPhone (WebKit har lite bredare text). */
@media (max-width: 420px) { .band p { font-size: 1.05rem; } }

/* Undersidorna tätare (Björn 2026-09-27): mindre luft mellan sektionerna,
   ovanför rubriken och mellan ingress och nästa rubrik. Startsidan behåller sin luft. */
body:not(.home) { --luft: clamp(40px, 5.5vw, 72px); }
body:not(.home) .sidaHuvud { padding: clamp(28px, 4vw, 52px) 0 clamp(12px, 2vw, 24px); }
.sidaHuvud + .sektion,
.sidaHuvud + .innehall > .sektion:first-child { padding-top: clamp(16px, 2.5vw, 32px); }
body:not(.home) h2 { margin-bottom: .3em; }
body:not(.home) .sektion h2 + p { margin-top: 0; }

/* Löptext (policysidorna) står i samma vänsterkant som sidrubriken, inte
   centrerad. Radlängden hålls kring 75 tecken, som är brukligt för läsbarhet. */
.inre.lasbar { max-width: calc(var(--bredd) + 2 * var(--kant)); }
.inre.lasbar > * { max-width: 780px; }
.lopText h2 { margin-top: 1.1em; }
.lopText h3 { margin-top: .9em; margin-bottom: .3em; }
.lopText h2 + h3 { margin-top: .6em; }
.sidaHuvud + .innehall > .lopText:first-child { padding-top: 0; }

/* Kartan (Leaflet). Leaflets eget stilark ligger i assets/vendor/leaflet. */
.karta { z-index: 0; background: var(--gradde); }
.karta .leaflet-control-zoom a { width: 40px; height: 40px; line-height: 40px; font-size: 22px; color: var(--morkbrun); }
.kartTass { background: none; border: 0; }
.kartTass .tass { font-size: 44px; color: var(--brun); filter: drop-shadow(0 2px 3px rgba(53, 44, 44, .35)); }
.kartLank { margin-top: .8em; }
/* Mindre luft mellan rutorna och Hitta till oss (Björn 2026-09-27). */
.sektion.kontakt { padding-bottom: clamp(20px, 3vw, 36px); }

/* Startsidan: evenemangen, mötesplatsen och take away ligger tätare (Björn 2026-09-27). */
.sektion.tatNer { padding-bottom: clamp(28px, 4vw, 48px); }
.platta.tat { padding-top: clamp(20px, 3vw, 40px); padding-bottom: clamp(28px, 4vw, 48px); }
.platta.tat .former { display: none; }
.sektion.tatUpp { padding-top: clamp(28px, 4vw, 48px); }
.sidaHuvud + .sektion > .inre > .kortGrid:first-child { margin-top: 0; }