/* Berlin Kebab — tokens och komponenter enligt designplan.md.
   Palett rakt ur kundens brand guide. Två radier, en skugga, inga gradienter. */

:root {
  --gron: #80C41C;
  --gron-mork: #5F9412;
  --lime: #B3CA47;
  --orange: #DC4F15;
  --orange-mork: #B33F0F;
  --sand: #DED7CA;
  --sand-ljus: #EFEAE1;
  --black: #111111;
  --vit: #ffffff;

  --radie: 14px;
  --pill: 999px;
  --skugga: 6px 6px 0 rgba(17, 17, 17, .9);
  --skugga-liten: 4px 4px 0 rgba(17, 17, 17, .9);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --nav-h: 74px;
  --max: 1180px;

  /* Vågformer (mask): mjuk kurva som lyfter sektionens färg upp i den ovanför. */
  --vag-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 C220,26 430,4 700,36 C960,66 1180,104 1440,40 L1440,100 Z' fill='%23000'/%3E%3C/svg%3E");
  --vag-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 C260,96 470,10 760,18 C1020,26 1200,88 1440,74 L1440,100 Z' fill='%23000'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  #mobmeny, .mob-links a { transition: none; } html { scroll-behavior: auto; } }

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--black);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, .display {
  font-family: 'Anton', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .92;
}

img { max-width: 100%; height: auto; display: block; }   /* height:auto krävs, annars låser width+height-attributen bildens höjd */
a { color: inherit; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Nav ─────────────────────────────────────────────────────────── */
#nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h);
  display: flex; align-items: center;
  background: transparent;
  transition: background .35s var(--ease), box-shadow .35s var(--ease);
}
#nav.scrolled { background: var(--black); box-shadow: 0 1px 0 rgba(255,255,255,.12); }
#nav.scrolled .nav-links a { color: var(--vit); }
#nav.scrolled 
#nav .nav-links a[aria-current="page"] { color: var(--black); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 3px; }
#nav .nav-toggle { color: var(--black); }
#nav.scrolled .nav-toggle { color: var(--vit); }
.nav-inner {
  width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 20px;
}
.nav-logo { flex: 0 0 auto; display: flex; align-items: center; }
.nav-logo img { height: 34px; width: auto; }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav-links a {
  font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: .04em;
  font-size: 1.0625rem; color: var(--black); text-decoration: none;
  padding: 12px 14px; min-height: 44px; display: inline-flex; align-items: center;
  border-radius: var(--pill); transition: color .18s var(--ease), background .18s var(--ease);
}
.nav-links a:hover, .nav-links a:focus-visible { background: rgba(17,17,17,.12); }
#nav.scrolled .nav-links a:hover, #nav.scrolled .nav-links a:focus-visible { background: rgba(255,255,255,.16); }
.nav-order {
  background: var(--orange); color: var(--vit) !important;
  padding: 12px 22px !important; box-shadow: var(--skugga-liten);
  transition: transform .18s var(--ease), background .18s var(--ease);
}
.nav-order:hover { background: var(--orange-mork); transform: translate(-2px, -2px); }
.nav-toggle {
  display: none; margin-left: auto; width: 46px; height: 46px;
  background: none; border: 0; cursor: pointer; color: var(--vit);
  align-items: center; justify-content: center;
}
.nav-toggle svg { width: 26px; height: 26px; }

/* Mobilmenyn: loggan syns hela tiden, panelen tonar in och länkarna kommer
   rad för rad. Stängningen tonar ut lika lugnt (visibility fördröjs). */
#mobmeny {
  position: fixed; inset: 0; z-index: 120; background: var(--black); color: var(--vit);
  display: flex; flex-direction: column; padding: 18px 24px 32px; overflow: hidden;
  visibility: hidden; opacity: 0;
  transition: opacity .34s var(--ease), visibility 0s linear .34s;
}
#mobmeny.open { visibility: visible; opacity: 1; transition: opacity .34s var(--ease), visibility 0s; }
#mobmeny .loopar { color: var(--gron); z-index: 0; }
#mobmeny .loopar::before { opacity: .12; }
#mobmeny > *:not(.loopar) { position: relative; z-index: 1; }
.mob-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; }
.mob-logo { display: flex; align-items: center; }
.mob-logo img { height: 34px; width: auto; }
.mob-close {
  width: 48px; height: 48px; border: 0; background: none; margin-right: -10px;
  color: var(--vit); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.mob-close svg { width: 26px; height: 26px; }
.mob-links { margin-top: 44px; display: flex; flex-direction: column; gap: 2px; }
.mob-links a {
  font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 2.25rem;
  color: var(--vit); text-decoration: none; padding: 14px 0; min-height: 44px;
  border-bottom: 1px solid rgba(255,255,255,.14);
  opacity: 0; transform: translateY(12px);
  transition: opacity .45s var(--ease), transform .45s var(--ease), color .18s var(--ease);
}
#mobmeny.open .mob-links a { opacity: 1; transform: none; }
#mobmeny.open .mob-links a:nth-child(1) { transition-delay: .1s; }
#mobmeny.open .mob-links a:nth-child(2) { transition-delay: .15s; }
#mobmeny.open .mob-links a:nth-child(3) { transition-delay: .2s; }
#mobmeny.open .mob-links a:nth-child(4) { transition-delay: .25s; }
#mobmeny.open .mob-links a:nth-child(5) { transition-delay: .3s; }
.mob-links a.order { color: var(--gron); border-bottom: 0; }
.mob-links a:active { color: var(--gron); }

/* ── Block ───────────────────────────────────────────────────────── */
.block { padding: 100px 0; position: relative; isolation: isolate; }

/* Vågen mellan sektionerna. Varje sektion ritar sin egen färg som en våg upp i
   sektionen ovanför, precis som menyskärmarnas färgfält flyter in i varandra.
   background: inherit gör att vågen alltid får rätt färg utan att vi behöver
   veta vad som ligger ovanför. */
.vag { position: relative; isolation: isolate; }
.vag::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; z-index: -1;
  height: clamp(38px, 5.5vw, 86px); background: inherit; pointer-events: none;
  -webkit-mask: var(--vag-a) bottom center / 100% 100% no-repeat;
  mask: var(--vag-a) bottom center / 100% 100% no-repeat;
}
.vag--b::before { -webkit-mask-image: var(--vag-b); mask-image: var(--vag-b); }

/* Ritade loopar som går kant till kant, från brand guidelinens svep. Ligger
   bakom innehållet i sektionens egen ton. */
.loopar { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.loopar::before {
  content: ""; position: absolute; inset: 0;
  background: currentColor;
  -webkit-mask: url("img/loopar.svg") -60px -40px / 620px auto repeat;
  mask: url("img/loopar.svg") -60px -40px / 620px auto repeat;
  opacity: .2;
}
@media (max-width: 760px) {
  .loopar::before { -webkit-mask-size: 420px auto; mask-size: 420px auto; }
}
.block--gron .loopar { color: #6FAB16; }
.block--lime .loopar { color: #9DB53B; }
.block--sand .loopar { color: #C9C0B0; }
.block--orange .loopar { color: #8F320B; }
.block--svart .loopar { color: #2A2A2A; }
.hero .loopar { color: #6FAB16; }
.block--gron { background: var(--gron); }
.block--lime { background: var(--lime); }
.block--sand { background: var(--sand); }
.block--orange { background: var(--orange-mork); color: var(--vit); }   /* 6,0 mot ljusa orangens 4,06 för brödtext */
.block--svart { background: var(--black); color: var(--sand); }
@media (max-width: 760px) { .block { padding: 56px 0; } }

/* Rubrik i två rader där andra raden byter färg */
.rubrik { font-size: clamp(2.6rem, 6.4vw, 4.75rem); margin-bottom: 20px; }
.rubrik span { display: block; }
.rubrik .r2 { color: var(--orange-mork); }   /* mot sand: 4,4 mot orange-ljusets 2,84 */
.block--orange .rubrik .r2,
.block--gron .rubrik .r2,
.block--lime .rubrik .r2 { color: var(--black); }
.block--svart .rubrik .r2 { color: var(--gron); }
.ingress { max-width: 62ch; font-size: 1.0625rem; }

/* ── Hero ────────────────────────────────────────────────────────── */
.hero {
  position: relative; background: var(--gron); overflow: hidden;
  padding: calc(var(--nav-h) + 72px) 0 96px;
}
.hero-bg {
  position: absolute; inset: -10% -5% -20%; opacity: .10;
  background-repeat: repeat; background-size: 420px;
  will-change: transform;
}
.hero-inner { position: relative; display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .hero-inner { grid-template-columns: 1.15fr .85fr; gap: 56px; } }

.hero-badge {
  display: block; width: fit-content; background: var(--black); color: var(--sand);
  font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: .08em;
  font-size: .875rem; padding: 8px 16px; border-radius: var(--pill);
  transform: rotate(-2.5deg); margin-bottom: 20px;
}
/* Rubriken ligger på en svart platta, som varumärkets egen skylt. Vit, sand och
   orange mot grönt ger 2,1 / 1,5 / 1,9 i kontrast och hade underkänts; mot svart
   ger samma tre färger 21, 12,8 och 4,6. */
.hero h1 {
  font-size: clamp(3rem, 11vw, 8rem); line-height: .9;
  display: inline-block; background: var(--black);
  padding: .18em .28em .22em; border-radius: var(--radie);
  box-shadow: var(--skugga);
}
.hero h1 .l1 { color: var(--vit); display: block; }
.hero h1 .l2 { color: var(--sand); display: block; }
.hero h1 .l3 { color: var(--orange); display: block; }
.hero-under { margin-top: 28px; font-size: 1.125rem; max-width: 46ch; }
.hero-cta { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }

.hero-bild { position: relative; will-change: transform; }
.hero-bild img {
  width: 100%; border-radius: var(--radie); box-shadow: var(--skugga);
  transform: rotate(2deg);
}

/* ── Knappar ─────────────────────────────────────────────────────── */
.knapp {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 14px 30px; border-radius: var(--pill);
  font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: .04em;
  font-size: 1.125rem; text-decoration: none; cursor: pointer; border: 0;
  box-shadow: var(--skugga); transition: transform .18s var(--ease), background .18s var(--ease);
}
.knapp:hover, .knapp:focus-visible { transform: translate(-2px, -2px); }
.knapp--orange { background: var(--orange-mork); color: var(--vit); }   /* 6,0 mot ljusa orangens 4,06 */
.knapp--orange:hover { background: #90320B; }
.knapp--svart { background: var(--black); color: var(--sand); }
.knapp--vit { background: var(--vit); color: var(--black); }

/* ── Kort ────────────────────────────────────────────────────────── */
.kort-rad { display: grid; gap: 26px; margin-top: 44px; }
@media (min-width: 760px) { .kort-rad { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kort {
  background: var(--vit); border-radius: var(--radie); overflow: hidden;
  box-shadow: var(--skugga); min-width: 0;
}
.kort img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.kort-txt { padding: 20px 22px 24px; }
.kort-txt h3 { font-size: 1.5rem; margin-bottom: 8px; }
.kort-txt p { font-size: .9375rem; color: #3a3a3a; }

.fakta { display: grid; gap: 20px; }
@media (min-width: 760px) { .fakta { grid-template-columns: repeat(3, 1fr); } }
.fakta-post { background: var(--sand-ljus); border-radius: var(--radie); padding: 26px 24px; }
.fakta-post h3 { font-size: 1.375rem; margin-bottom: 8px; }
.fakta-post p { font-size: .9375rem; }

/* Split: text och bild sida vid sida */
.split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 56px; } }
.split-bild img { border-radius: var(--radie); box-shadow: var(--skugga); transform: rotate(-2deg); }

/* ── Menysida ────────────────────────────────────────────────────── */
#kategorier {
  position: sticky; top: var(--nav-h); z-index: 80;
  background: var(--black); overflow-x: auto; -webkit-overflow-scrolling: touch;
}
#kategorier ul {
  display: flex; gap: 6px; list-style: none;
  max-width: var(--max); margin: 0 auto; padding: 10px 24px;
}
/* På mobil radbryter kategorierna i stället för att skrollas i sidled, så inget
   hamnar utanför skärmkanten. */
@media (max-width: 760px) {
  #kategorier { overflow-x: visible; }
  #kategorier ul { flex-wrap: wrap; gap: 4px; padding: 8px 16px; }
  #kategorier a { font-size: .875rem; padding: 6px 12px; min-height: 40px; }
}
#kategorier a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px;
  border-radius: var(--pill); white-space: nowrap; text-decoration: none;
  font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: .9375rem;
  letter-spacing: .04em; color: var(--sand); transition: background .18s var(--ease);
}
#kategorier a:hover, #kategorier a:focus-visible { background: rgba(255,255,255,.16); }

.meny-sektion { padding: 72px 0; }
.meny-sektion h2 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); margin-bottom: 28px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; }
.meny-pris { font-size: .5em; color: var(--orange); font-variant-numeric: tabular-nums; }
.meny-grid { display: grid; gap: 16px; }
@media (min-width: 760px) { .meny-grid { grid-template-columns: 1fr 1fr; gap: 18px; } }
.meny-post {
  background: var(--sand-ljus); border-radius: var(--radie); padding: 20px 22px;
  display: flex; gap: 16px; justify-content: space-between; align-items: baseline; min-width: 0;
}
.meny-post h3 { font-size: 1.1875rem; margin-bottom: 6px; }
.meny-post p { font-size: .9375rem; color: #3a3a3a; }
.meny-post .pris {
  font-family: 'Anton', sans-serif; font-size: 1.25rem; color: var(--orange);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.tomlage {
  background: var(--sand-ljus); border: 2px dashed rgba(17,17,17,.28);
  border-radius: var(--radie); padding: 28px 26px; max-width: 60ch;
}

/* ── Bildband ────────────────────────────────────────────────────── */
.band { overflow-x: clip; overflow-y: visible; padding: 0 0 100px; background: var(--sand); position: relative; isolation: isolate; }
.band-spar { display: flex; gap: 18px; will-change: transform; padding: 0 24px; }
.band-spar img {
  height: 240px; width: auto; border-radius: var(--radie);
  box-shadow: var(--skugga-liten); flex: 0 0 auto;
}
@media (max-width: 760px) { .band-spar img { height: 160px; } }

/* ── Footer ──────────────────────────────────────────────────────── */
footer { background: var(--black); color: var(--sand); padding: 64px 0 40px; position: relative; }
footer::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; z-index: 1;
  height: clamp(38px, 5.5vw, 86px); background: inherit; pointer-events: none;
  -webkit-mask: var(--vag-b) bottom center / 100% 100% no-repeat;
  mask: var(--vag-b) bottom center / 100% 100% no-repeat;
}
footer .rader { display: grid; gap: 32px; }
@media (min-width: 760px) { footer .rader { grid-template-columns: 1.4fr 1fr 1fr; } }
footer h3 { font-size: 1.125rem; margin-bottom: 12px; color: var(--vit); }
footer a { color: var(--sand); text-decoration: none; }
footer a:hover { color: var(--gron); text-decoration: underline; }
footer img.mark { height: 40px; width: auto; margin-bottom: 16px; }
.footer-slut {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.16);
  font-size: .8125rem; color: rgba(222,215,202,.72);
}

/* ── Reveal ──────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.syns { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  #mobmeny, .mob-links a { transition: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-bg, .hero-bild, .band-spar { transform: none !important; }
  .knapp:hover, .nav-order:hover { transform: none; }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
}

/* Mobil: skylten tar två rader i stället för tre ("The taste of" / "Berlin") och
   får då plats att bli mycket större utan att tränga badge, text eller knappar. */
@media (max-width: 700px) {
  .hero h1 { font-size: 15.4vw; padding: .16em .24em .2em; }
  .hero h1 .l1, .hero h1 .l2 { display: inline; }
  .hero h1 .l2 { margin-left: .22em; }
}
@media (max-width: 360px) { .hero h1 { font-size: 15vw; } }