/* ==========================================================
   VOILÁ — Pizzéria Budapest
   ========================================================== */
:root {
  --pink: #f6c0d8;
  --pink-deep: #ee9cc2;
  --black: #000;
  --disc: #1c1a1a;
  --white: #fff;
  --ok: #4caf50;
  --no: #f44336;

  --f-head: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--pink);
  color: var(--black);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* The decorative overflow (the scaled, rotated marquee band, the hero pizza) must never make the page wider than the
   window: Safari let it scroll sideways, showing a pink strip at the right edge. `clip` cuts it off at the edge
   without creating a scroll container, so position: sticky keeps working. */
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
h1, h2, h3, h4, p, figure, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
::selection { background: var(--black); color: var(--pink); }
section { scroll-margin-top: 70px; }

body::after { /* grain */
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 100;
  opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.voila { display: inline-block; height: 1em; width: 2.087em; fill: currentColor; overflow: visible; }

/* ---------- progress ---------- */
.progress {
  position: fixed; top: 0; left: 0; height: 4px; width: 100%;
  background: var(--pink-deep);
  transform-origin: 0 50%; transform: scaleX(0); z-index: 60;
}

/* ---------- back to top ---------- */
.to-top {
  position: fixed; right: clamp(14px, 2.4vw, 32px); bottom: clamp(14px, 2.4vw, 32px);
  width: clamp(48px, 4.6vw, 62px); aspect-ratio: 1;
  display: grid; place-items: center;
  background: var(--pink); color: var(--black);
  border: 3px solid var(--black); border-radius: 50%;
  box-shadow: 4px 4px 0 var(--white);
  z-index: 55;
  opacity: 0; visibility: hidden; transform: translateY(24px) scale(.6);
  transition: opacity .3s, visibility .3s, transform .45s var(--ease-spring), background .25s, color .25s;
}
.to-top svg { width: 46%; transition: transform .4s var(--ease-spring); }
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--black); color: var(--pink); border-color: var(--pink); transform: rotate(-8deg) scale(1.1); }
.to-top:hover svg { transform: translateY(-3px); }
.to-top:focus-visible { outline: 3px solid var(--white); outline-offset: 4px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--f-head); font-weight: 900; font-stretch: 112%;
  font-size: clamp(15px, 1.3vw, 19px); letter-spacing: .01em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  padding: 14px 26px; border-radius: 999px; border: 3px solid transparent;
  transition: transform .4s var(--ease-spring), box-shadow .25s, background .25s, color .25s;
}
.btn--pink { background: var(--pink); color: var(--black); box-shadow: 5px 5px 0 var(--white); }
.btn--line { background: transparent; color: var(--pink); border-color: var(--pink); }
.btn--sm { font-size: 13px; padding: 9px 16px; box-shadow: none; }
.btn:hover { transform: rotate(-3deg) scale(1.06); }
.btn--pink:hover { box-shadow: 9px 9px 0 var(--white); }
.btn--line:hover { background: var(--pink); color: var(--black); }
.btn:focus-visible { outline: 3px solid var(--white); outline-offset: 4px; }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 12px; left: 50%;
  transform: translateX(-50%);
  width: min(1200px, calc(100% - 24px));
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 8px 8px 8px 22px;
  background: rgba(246, 192, 216, .94); color: var(--black);
  border: 3px solid var(--black);
  border-radius: 999px; z-index: 50;
  backdrop-filter: blur(8px);
  transition: transform .5s var(--ease-out);
}
.nav.is-hidden { transform: translate(-50%, -160%); }
.nav__logo { font-size: 26px; line-height: 0; transition: transform .4s var(--ease-spring); }
.nav__logo:hover { transform: rotate(-8deg) scale(1.1); }
.nav__links { display: flex; gap: 4px; }
.nav__links a {
  white-space: nowrap;
  font-family: var(--f-head); font-weight: 800; font-size: 14px;
  text-transform: uppercase; letter-spacing: .02em; text-decoration: none;
  padding: 8px 14px; border-radius: 999px;
  transition: background .25s, color .25s;
}
.nav__links a:hover { background: var(--black); color: var(--pink); }
.nav__cta {
  font-family: var(--f-head); font-weight: 900; font-size: 14px;
  text-transform: uppercase; text-decoration: none;
  background: var(--black); color: var(--pink);
  padding: 10px 18px; border-radius: 999px;
  transition: transform .3s var(--ease-spring);
}
.nav__cta:hover { transform: rotate(-4deg) scale(1.06); }
.nav__toggle { display: none; }
/* ---------- language switch (HU / EN), like FREEZBEE ---------- */
html.i18n-pending body { visibility: hidden; }   /* English: the Hungarian text doesn't flash up before lang.js runs */
.lang { flex: none; display: inline-flex; padding: 3px; border: 2px solid currentColor; border-radius: 999px; }
.lang button {
  font-family: var(--f-head); font-weight: 900; font-size: 13px; letter-spacing: .04em;
  color: inherit; background: transparent; border: 0; border-radius: 999px;
  padding: 6px 10px; cursor: pointer; line-height: 1;
  transition: background .2s, color .2s, transform .3s var(--ease-spring);
}
.lang button:hover { transform: scale(1.08); }
.lang button[aria-pressed="true"] { background: var(--black); color: var(--pink); }
.lang button:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.lang--bar { margin-left: auto; }
.lang--panel { display: none; }
.lang--footer { margin-top: 22px; }
.lang--footer button { font-size: 15px; padding: 8px 14px; }
.lang--footer button[aria-pressed="true"] { background: var(--pink); color: var(--black); }
/* narrow desktop: the longer English labels (WHAT OUR CUSTOMERS SAY) would push the bar out on the right */
@media (min-width: 861px) and (max-width: 1040px) {
  .nav { gap: 10px; padding-left: 16px; }
  .nav__links { gap: 2px; }
  .nav__links a { font-size: 13px; letter-spacing: 0; padding: 8px 9px; }
  .nav__cta { font-size: 13px; padding: 10px 14px; }
  .lang button { padding: 6px 8px; }
}
@media (max-width: 860px) {
  .nav { gap: 8px; }
  .nav__cta { margin-left: auto; }
  /* hamburger */
  .nav__toggle {
    flex: none; display: grid; align-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 0 11px;
    background: transparent; border: 2px solid var(--black); border-radius: 50%;
    cursor: pointer;
    transition: background .25s, transform .3s var(--ease-spring);
  }
  .nav__toggle span { display: block; height: 2.5px; border-radius: 2px; background: var(--black); transition: transform .35s var(--ease-spring), opacity .2s, background .25s; }
  .nav__toggle:focus-visible { outline: 3px solid var(--black); outline-offset: 3px; }
  .nav.is-open .nav__toggle { background: var(--black); transform: rotate(90deg); }
  .nav.is-open .nav__toggle span { background: var(--pink); }
  .nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* the desktop links become a drop-down panel under the bar */
  .nav__links {
    position: absolute; left: -3px; right: -3px; top: calc(100% + 10px);
    flex-direction: column; gap: 2px;
    padding: 12px;
    background: var(--pink);
    border: 3px solid var(--black); border-radius: 26px;
    box-shadow: 6px 6px 0 var(--black);
    opacity: 0; visibility: hidden; transform: translateY(-12px) scale(.96); transform-origin: 50% 0;
    transition: opacity .25s, visibility .25s, transform .4s var(--ease-spring);
  }
  .nav.is-open .nav__links { opacity: 1; visibility: visible; transform: none; }
  .lang--bar { display: none; }
  .lang--panel { display: inline-flex; align-self: flex-start; margin: 10px 0 4px 10px; }
  .lang--panel button { font-size: 15px; padding: 8px 14px; }
  .nav__links a { font-size: 18px; padding: 13px 18px; }
}

/* ---------- HERO ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--black); color: var(--pink);
  padding: 96px var(--gutter) clamp(40px, 6vw, 90px);
  min-height: min(100svh, 980px);
}
.hero__logo { width: min(64vw, 980px); line-height: 0; position: relative; z-index: 3; }
.hero__logo-svg {
  width: 100%; aspect-ratio: 103.15 / 49.43; fill: currentColor; overflow: visible;
  transform-origin: 30% 60%;
  animation: logoIn 1.1s var(--ease-spring) both;
  transition: transform .5s var(--ease-spring);
}
.hero__logo:hover .hero__logo-svg { transform: rotate(-3deg) scale(1.03); }
@keyframes logoIn { from { opacity: 0; transform: translateY(40%) rotate(10deg) scale(.7); } }

.hero__motto {
  position: relative; z-index: 3;
  margin-top: clamp(18px, 3vw, 44px);
  font-family: var(--f-head); font-style: italic; line-height: 1;
  opacity: 0; animation: fadeUp 1s .5s var(--ease-out) forwards;
}
.hero__motto span { display: block; overflow-wrap: anywhere; }
.hero__motto span:first-child { font-weight: 300; font-size: clamp(24px, 4.6vw, 70px); }
.hero__motto span:last-child { font-weight: 900; font-stretch: 105%; font-style: normal; font-size: clamp(22px, 4.1vw, 62px); color: var(--white); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

.hero__actions {
  position: relative; z-index: 4;
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: clamp(22px, 3vw, 40px);
  opacity: 0; animation: fadeUp 1s .7s var(--ease-out) forwards;
}

.hero__stage {
  position: absolute; z-index: 1;
  right: -9vw; bottom: -17vw;
  width: 56vw; aspect-ratio: 1;
}
.hero__disc {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--pink);
  transform: scale(.2); animation: discIn 1.1s .2s var(--ease-spring) forwards;
}
@keyframes discIn { to { transform: none; } }
.frisbee {
  position: absolute; left: 50%; top: 50%;
  width: 84%; translate: -50% -50%;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
  z-index: 5;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.45));
  will-change: transform;
  opacity: 0; animation: pizzaIn 1.2s .5s var(--ease-out) forwards, spin 50s linear infinite;
}
@keyframes pizzaIn { to { opacity: 1; } }

/* open / closed sticker */
.status {
  position: absolute; z-index: 6;
  right: clamp(16px, 6vw, 110px); top: clamp(96px, 12vw, 150px);
  width: clamp(150px, 17vw, 240px); aspect-ratio: 1;
  display: grid; place-content: center; text-align: center; gap: 2px;
  background: var(--white); color: var(--black);
  clip-path: polygon(50% 0, 61% 12%, 77% 6%, 80% 22%, 96% 25%, 90% 40%, 100% 50%, 90% 60%, 96% 75%, 80% 78%, 77% 94%, 61% 88%, 50% 100%, 39% 88%, 23% 94%, 20% 78%, 4% 75%, 10% 60%, 0 50%, 10% 40%, 4% 25%, 20% 22%, 23% 6%, 39% 12%);
  animation: wobble 6s ease-in-out infinite;
  transition: background .4s;
}
.status__q { font-family: var(--f-head); font-weight: 700; font-size: clamp(10px, 1vw, 14px); padding: 0 22%; line-height: 1.15; }
.status__a { font-family: var(--f-head); font-weight: 900; font-stretch: 120%; font-size: clamp(26px, 3.6vw, 54px); line-height: 1; letter-spacing: -.02em; }
.status.is-open { background: var(--ok); color: var(--white); }
.status.is-closed { background: var(--no); color: var(--white); }
.status:not(.is-open):not(.is-closed) .status__a { font-size: clamp(11px, 1.1vw, 15px); letter-spacing: 0; }
.pizza-spinner { display: inline-block; margin-left: 4px; animation: spin 1s linear infinite; }
@keyframes wobble { 0%, 100% { rotate: -8deg; } 50% { rotate: 8deg; } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 860px) {
  .hero { padding-top: 88px; min-height: 0; padding-bottom: calc(66vw + 150px); }
  .hero__logo { width: 82vw; }
  .hero__stage { width: 96vw; right: -22vw; bottom: -30vw; }
  .status { top: auto; bottom: calc(66vw - 6px); left: 12px; right: auto; width: 136px; }
}

/* ---------- MARQUEE ---------- */
.marquee {
  overflow: hidden; white-space: nowrap; padding: 16px 0;
  font-family: var(--f-head); font-weight: 900; font-stretch: 115%;
  font-size: clamp(22px, 3.4vw, 50px); letter-spacing: -.01em;
  position: relative; z-index: 2;
}
.marquee--pink { background: var(--pink); color: var(--black); border-block: 3px solid var(--black); transform: rotate(-1.5deg) scale(1.04); margin-top: -1.2vw; }
.marquee__track { display: inline-flex; align-items: center; gap: .6em; animation: marquee 30s linear infinite; }
.marquee__track i { font-style: normal; display: inline-block; animation: spin 4s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- shared type ---------- */
.mega {
  font-family: var(--f-head); font-weight: 900; font-stretch: 118%;
  /* never break inside a word: the size is capped so the longest heading word ("NYITVATARTÁS", ~9.1em wide)
     fits the content width (viewport minus gutters, at most the 1320px of the narrowest section) */
  font-size: min(clamp(26px, 9.6vw, 180px), calc(min(100vw - 2 * var(--gutter), 1320px) / 9.5));
  line-height: .88; letter-spacing: -.045em;
  text-transform: uppercase;
}
.mega--center { text-align: center; }
.h3 { font-family: var(--f-head); font-weight: 900; font-stretch: 110%; font-size: clamp(26px, 3.2vw, 46px); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; }

.reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.tilt { transform-style: preserve-3d; transition: transform .6s var(--ease-out); }
.tilt img { transition: transform .6s var(--ease-out); }

/* ---------- NYITVATARTÁS ---------- */
.hours { padding: clamp(80px, 11vw, 150px) var(--gutter) clamp(50px, 7vw, 100px); max-width: 1440px; margin: 0 auto; }
.hours__row {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 30px;
  margin-top: clamp(20px, 3vw, 40px); padding: clamp(18px, 2.4vw, 32px) clamp(20px, 3vw, 44px);
  background: var(--black); color: var(--pink);
  border-radius: clamp(20px, 3vw, 40px);
  font-family: var(--f-head); font-weight: 900; font-stretch: 112%;
  box-shadow: 12px 12px 0 var(--white);
}
.hours__day { font-size: clamp(24px, 4vw, 60px); letter-spacing: -.02em; }
.hours__time { font-size: clamp(34px, 7vw, 110px); letter-spacing: -.04em; line-height: 1; color: var(--white); font-variant-numeric: tabular-nums; }
.hours__photos { display: flex; justify-content: center; gap: clamp(10px, 3vw, 40px); margin-top: clamp(40px, 6vw, 80px); }
.tilt-card {
  width: min(30%, 320px); aspect-ratio: 3 / 4; object-fit: cover;
  border: 4px solid var(--black); border-radius: 24px;
  box-shadow: 8px 8px 0 var(--black);
  rotate: var(--r, 0deg);
  transition: opacity .9s var(--ease-out), transform .6s var(--ease-spring), rotate .6s var(--ease-spring);
}
.tilt-card:nth-child(2) { margin-top: clamp(20px, 4vw, 60px); }
.tilt-card:hover { rotate: 0deg; transform: scale(1.06); z-index: 2; }

/* ---------- MENÜ ---------- */
.menu { padding: clamp(40px, 6vw, 90px) var(--gutter) clamp(70px, 9vw, 130px); max-width: 1440px; margin: 0 auto; }
/* category buttons: all of them visible, wrapping onto several rows (no horizontal scrolling, nothing cut off);
   they stay in place at the top of the menu (not sticky) */
.menu__nav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 8px;
  margin: clamp(24px, 4vw, 48px) 0 0; padding: 10px 0 12px;
}
.menu__nav button {
  flex: none;
  font-family: var(--f-head); font-weight: 800; font-size: clamp(14px, 1.2vw, 17px); text-transform: uppercase;
  color: var(--black); background: var(--white);
  border: 2px solid var(--black); border-radius: 999px;
  padding: 9px 18px; cursor: pointer;
  box-shadow: 3px 3px 0 var(--black);
  transition: transform .35s var(--ease-spring), background .2s, color .2s;
}
.menu__nav button:hover { transform: translateY(-3px) rotate(-2deg); }
.menu__nav button.is-active { background: var(--black); color: var(--pink); transform: rotate(-2deg) scale(1.05); }
.menu__nav button:focus-visible { outline: 3px solid var(--black); outline-offset: 3px; }
/* phones: slightly smaller buttons, they take several rows */
@media (max-width: 860px) {
  .menu__nav { gap: 8px 6px; }
  .menu__nav button { padding: 7px 13px; font-size: 13px; }
}

.menu__body { display: grid; grid-template-columns: minmax(0, 1fr) clamp(180px, 17vw, 260px); gap: clamp(20px, 3vw, 44px); /* wide menu sheet, small side photos */ margin-top: clamp(20px, 3vw, 36px); align-items: start; }
.menu__body.no-photos { grid-template-columns: minmax(0, 1fr); } /* category without side photos: full-width list */
.menu__body.no-photos .menu__photos { display: none; }
.menu__section-title {
  font-family: var(--f-head); font-weight: 900; font-stretch: 118%;
  font-size: clamp(34px, 5vw, 80px); line-height: .9; letter-spacing: -.035em; text-transform: uppercase;
  margin-bottom: clamp(16px, 2vw, 28px);
}
/* the category as one "paper" menu (white sheet, thick border + offset shadow, like the rest of the site);
   inside it calm, printed-menu lines separated by dashed rules. Two newspaper-style columns (the lines flow
   down the left column, then continue in the right one), with a dashed rule between them; a single column
   when a column would be narrower than ~340px (tablets, phones) */
.menu__items {
  --thumb: 72px; --thumb-gap: 16px;
  columns: 2 340px; column-gap: clamp(28px, 4vw, 56px); column-rule: 1.5px dashed rgba(0, 0, 0, .18);
  background: var(--white); color: var(--black);
  border: 3px solid var(--black); border-radius: 26px; box-shadow: 8px 8px 0 var(--black);
  padding: clamp(6px, 1vw, 12px) clamp(18px, 2.4vw, 34px);
}
.item {
  /* inline-flex = an atomic box: no browser (Safari included) can split it between the two columns,
     and its bottom margin (with the box shadow in it) belongs to its own line, so nothing spills into the next column */
  display: inline-flex; width: 100%; vertical-align: top; gap: var(--thumb-gap); align-items: flex-start;
  padding: 14px 0; border-bottom: 1.5px dashed rgba(0, 0, 0, .2);
  break-inside: avoid; -webkit-column-break-inside: avoid; /* a line never splits between the two columns */
  animation: itemIn .5s var(--ease-out) both;
}
@keyframes itemIn { from { opacity: 0; transform: translateY(14px); } }
.item__body { flex: 1; min-width: 0; }
/* lines without a photo in a list that has photos: same indent, so every name starts in one column */
.menu__items.has-photos .item:not(.item--photo) .item__body { padding-left: calc(var(--thumb) + var(--thumb-gap)); }
.item__head { display: flex; align-items: baseline; gap: 10px; }
.item__name { flex: 0 1 auto; min-width: 0; font-family: var(--f-head); font-weight: 900; font-stretch: 106%; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.2; }
.item__dots { flex: 1 1 16px; min-width: 16px; border-bottom: 2px dotted rgba(0, 0, 0, .35); transform: translateY(-5px); }
.item__price { flex: none; font-family: var(--f-head); font-weight: 900; font-size: clamp(16px, 1.3vw, 19px); white-space: nowrap; }
.item__new {
  display: inline-block; vertical-align: 2px; margin-left: 4px;
  font-family: var(--f-head); font-weight: 900; font-size: 10px; letter-spacing: .08em;
  background: var(--black); color: var(--pink); padding: 3px 7px 2px; border-radius: 999px; rotate: -4deg;
}
.item__desc { margin-top: 5px; font-size: 15px; line-height: 1.45; color: #3b3b3b; }
.item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 7px; font-size: 13px; line-height: 1.35; color: #6b6b6b; }
.tag { font-family: var(--f-head); font-weight: 800; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--black); background: var(--pink); border-radius: 999px; padding: 3px 9px 2px; }
/* optional dish photo: small square thumbnail at the start of the line; click → large view */
.item__photo {
  flex: none; display: block; width: var(--thumb); aspect-ratio: 1; margin: 0; padding: 0;
  border: 2px solid var(--black); border-radius: 14px; overflow: hidden; background: #fbe9f1; cursor: zoom-in;
}
.item__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.item__photo:hover img { transform: scale(1.06); }
.item__photo:focus-visible { outline: 3px solid var(--black); outline-offset: 3px; }
@media (max-width: 700px) {
  .menu__items { --thumb: 64px; --thumb-gap: 14px; box-shadow: 5px 5px 0 var(--black); border-radius: 20px; }
  .item { padding: 15px 0; }
  /* phones: the name gets the full width, the price goes under it (no dotted leader) */
  .item__head { flex-wrap: wrap; row-gap: 3px; }
  .item__name { flex-basis: 100%; font-size: 16.5px; }
  .item__dots { display: none; }
  .item__price { font-size: 15.5px; }
  .item__desc { font-size: 14.5px; }
}
/* "boxes" look (MENU_STYLE = "boxes" in script.js): every dish in its own white box with a thin black border
   and a small offset shadow, on the pink background – same 2 newspaper columns and same line layout */
.menu__items.is-boxes {
  background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0;
  column-gap: clamp(16px, 2vw, 24px); column-rule: none;
}
.menu__items.is-boxes .item {
  background: var(--white);
  border: 2.5px solid var(--black); border-radius: 18px; box-shadow: 5px 5px 0 var(--black);
  width: calc(100% - 6px); padding: 14px 16px; margin: 0 6px 16px 0; /* right margin: room for the shadow inside the column */
  transition: translate .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.menu__items.is-boxes .item:hover { translate: -2px -2px; box-shadow: 7px 7px 0 var(--black); }
/* in boxes the names don't need to share one column across the list */
.menu__items.is-boxes.has-photos .item:not(.item--photo) .item__body { padding-left: 0; }
@media (max-width: 700px) {
  .menu__items.is-boxes { box-shadow: none; border-radius: 0; }
  .menu__items.is-boxes .item { padding: 13px 14px; margin-bottom: 12px; box-shadow: 4px 4px 0 var(--black); }
}
/* footnotes under the dishes (the category's note + the general note, e.g. service charge): small, quiet type */
.menu__notes { display: grid; gap: 4px; max-width: 72ch; margin-top: clamp(10px, 1.4vw, 18px); padding: 10px 2px 0; border-top: 1.5px dashed rgba(0, 0, 0, .28); }
.menu__note { font-size: 13.5px; line-height: 1.45; font-style: italic; color: rgba(0, 0, 0, .7); }
.lightbox { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; overflow: visible; }
.lightbox::backdrop { background: rgba(0, 0, 0, .85); }
.lightbox__img { display: block; max-width: min(86vw, 1600px); max-height: 86vh; border: 3px solid var(--pink); border-radius: 18px; cursor: zoom-out; }
.lightbox__close {
  position: absolute; top: -16px; right: -12px; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--black); background: var(--pink); color: var(--black);
  font-family: var(--f-head); font-size: 26px; font-weight: 900; line-height: 1; cursor: pointer;
}
.allergen-group { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; white-space: nowrap; }
.allergen-tooltip {
  position: absolute; z-index: 80; max-width: 260px;
  background: var(--white); color: var(--black); border: 2px solid var(--black);
  font-size: 14px; font-weight: 700; padding: 8px 12px; border-radius: 12px; box-shadow: 4px 4px 0 var(--black);
}

.menu__photos { position: sticky; top: 150px; display: grid; gap: 0; justify-items: center; padding-top: 10px; }
.menu__photos img {
  width: 82%; aspect-ratio: 1; object-fit: cover;
  border: 4px solid var(--black); border-radius: 26px; box-shadow: 8px 8px 0 var(--black);
  rotate: var(--r, 0deg); margin-top: -12%;
  animation: itemIn .7s var(--ease-spring) both;
  transition: transform .5s var(--ease-spring), rotate .5s var(--ease-spring);
}
.menu__photos img:first-child { margin-top: 0; }
.menu__photos img:hover { rotate: 0deg; transform: scale(1.08); z-index: 2; position: relative; }
.menu__photos img.is-cutout { border: 0; box-shadow: none; border-radius: 0; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(0,0,0,.35)); animation: itemIn .7s var(--ease-spring) both, spin 50s linear infinite; }
.menu__photos img.is-tall { aspect-ratio: 3 / 4; width: 62%; }
@media (max-width: 900px) {
  .menu__body { grid-template-columns: minmax(0, 1fr); }
  .menu__photos { position: static; grid-auto-flow: column; grid-auto-columns: 46%; overflow: hidden; justify-content: center; padding: 10px 0 24px; order: -1; }
  .menu__photos img, .menu__photos img.is-tall { width: 92%; margin-top: 0; aspect-ratio: 1; }
  .menu__photos img:nth-child(n+3) { display: none; }
}

.allergens { margin-top: clamp(30px, 4vw, 56px); border: 3px solid var(--black); border-radius: 24px; padding: 4px 22px; }
.allergens summary { cursor: pointer; font-family: var(--f-head); font-weight: 900; font-size: clamp(18px, 1.8vw, 24px); text-transform: uppercase; padding: 14px 0; }
.allergens ul { columns: 2 280px; column-gap: 40px; padding-bottom: 10px; }
.allergens li { padding: 4px 0; break-inside: avoid; }
.allergens li b { display: inline-block; min-width: 2.4em; font-family: var(--f-head); }
.allergens p { padding: 8px 0 18px; font-weight: 700; }

/* ---------- ÚJRAMELEGÍTÉS ---------- */
.reheat { background: var(--black); color: var(--pink); padding: clamp(70px, 10vw, 140px) var(--gutter); overflow: hidden; }
.reheat > * { max-width: 1320px; margin-inline: auto; }
.reheat__head { display: grid; grid-template-columns: minmax(0, 1fr) clamp(180px, 26vw, 380px); align-items: center; gap: clamp(20px, 4vw, 60px); }
.reheat__title { font-family: var(--f-head); font-weight: 300; font-style: italic; font-size: clamp(20px, 5.6vw, 70px); line-height: 1; overflow-wrap: anywhere; }
.reheat__title span { display: block; font-weight: 900; font-style: normal; font-stretch: 112%; font-size: 1.22em; letter-spacing: -.03em; color: var(--white); margin-top: .1em; text-transform: uppercase; }
.reheat__pizza { position: relative; aspect-ratio: 1; }
.reheat__pizza img { position: relative; width: 100%; animation: spin 40s linear infinite; filter: drop-shadow(0 0 30px rgba(255, 120, 60, .35)); }
.reheat__glow { position: absolute; inset: -12%; border-radius: 50%; background: radial-gradient(circle, rgba(255,120,60,.6), transparent 65%); filter: blur(18px); animation: glow 2.6s ease-in-out infinite; }
@keyframes glow { 0%, 100% { opacity: .35; transform: scale(.94); } 50% { opacity: .95; transform: scale(1.04); } }
.reheat__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: clamp(36px, 5vw, 70px); counter-reset: none; }
.step {
  position: relative; min-height: clamp(150px, 15vw, 220px);
  display: flex; align-items: flex-end;
  border: 3px solid var(--pink); border-radius: 26px; padding: 20px;
  overflow: hidden;
  transition: opacity .9s var(--ease-out), transform .5s var(--ease-spring), background .3s, color .3s;
}
.step__num { position: absolute; right: 6px; top: -22px; font-family: var(--f-head); font-weight: 900; font-stretch: 125%; font-size: clamp(110px, 13vw, 200px); line-height: 1; opacity: .22; transition: opacity .3s, transform .5s var(--ease-spring); }
.step__text { position: relative; min-width: 0; overflow-wrap: anywhere; font-family: var(--f-head); font-weight: 800; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.15; color: var(--white); }
.step:hover { background: var(--pink); color: var(--black); transform: rotate(-2deg) scale(1.03); }
.step:hover .step__text { color: var(--black); }
.step:hover .step__num { opacity: .9; transform: rotate(8deg); }
@media (max-width: 900px) { .reheat__steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .reheat__head { grid-template-columns: 1fr; } .reheat__pizza { width: 56%; margin: 0 auto; order: -1; } }
@media (max-width: 420px) { .reheat__steps { grid-template-columns: 1fr; } .step { min-height: 110px; } }

/* ---------- RÓLUNK ÍRTÁK ---------- */
.reviews { padding: clamp(80px, 10vw, 140px) var(--gutter) clamp(60px, 8vw, 110px); max-width: 1440px; margin: 0 auto; }
.carousel { margin-top: clamp(24px, 4vw, 50px); }
.carousel__viewport { overflow: hidden; border-radius: clamp(24px, 3vw, 44px); touch-action: pan-y; cursor: grab; }
.carousel__track { display: flex; transition: transform .8s var(--ease-out); }
.review {
  flex: 0 0 100%;
  background: var(--black); color: var(--pink);
  padding: clamp(26px, 5vw, 70px);
  display: flex; flex-direction: column; gap: clamp(14px, 2vw, 26px);
  min-height: clamp(300px, 30vw, 440px);
}
.review__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.review__stars { font-size: clamp(24px, 3vw, 42px); letter-spacing: .08em; color: #ffd700; line-height: 1; }
.review__platform { font-family: var(--f-head); font-weight: 800; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; border: 2px solid var(--pink); border-radius: 999px; padding: 4px 14px; }
.review__text { font-family: var(--f-head); font-weight: 600; font-style: italic; font-size: clamp(20px, 2.7vw, 40px); line-height: 1.2; color: var(--white); flex: 1; }
.review__author { font-family: var(--f-head); font-weight: 900; font-size: clamp(18px, 1.8vw, 26px); }
.carousel__nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 20px; }
.carousel__btn {
  width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--black);
  background: var(--white); color: var(--black); cursor: pointer;
  font-family: var(--f-head); font-weight: 900; font-size: 26px; line-height: 1;
  box-shadow: 4px 4px 0 var(--black);
  transition: transform .35s var(--ease-spring), background .2s, color .2s;
}
.carousel__btn:hover { transform: scale(1.12) rotate(-8deg); background: var(--black); color: var(--pink); }
.carousel__dots { display: flex; gap: 8px; }
.carousel__dots button { width: 14px; height: 14px; padding: 0; border-radius: 50%; border: 2px solid var(--black); background: transparent; cursor: pointer; transition: transform .3s var(--ease-spring), background .2s; }
.carousel__dots button.is-active { background: var(--black); transform: scale(1.4); }

.rate {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: clamp(40px, 6vw, 80px); padding-top: clamp(24px, 3vw, 40px); border-top: 3px solid var(--black);
}
.rate p { font-size: clamp(18px, 1.6vw, 22px); margin-top: 6px; }
.rate__btns { display: flex; gap: 16px; }

.round {
  display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%;
  background: var(--black); color: var(--pink); text-decoration: none;
  rotate: var(--r, 0deg);
  transition: opacity .9s var(--ease-out), transform .45s var(--ease-spring), background .25s, color .25s, box-shadow .25s, rotate .45s var(--ease-spring);
}
.round svg { width: 44%; fill: currentColor; }
.round--lg { width: clamp(70px, 7vw, 96px); }
.round--xl { width: clamp(96px, 16vw, 220px); }
.round:hover { transform: scale(1.12); rotate: 10deg; background: var(--white); color: var(--black); box-shadow: 8px 8px 0 var(--black); }
.round:focus-visible { outline: 3px solid var(--black); outline-offset: 5px; }

.parallax-band { height: clamp(300px, 52vw, 700px); overflow: hidden; position: relative; background: #000; }
.parallax-band img { position: absolute; left: 0; top: -15%; width: 100%; height: 130%; object-fit: cover; will-change: transform; }

/* ---------- AHOL MEGTALÁLSZ ---------- */
.where { background: var(--black); color: var(--pink); padding: clamp(70px, 10vw, 140px) var(--gutter); }
.where > * { max-width: 1320px; margin-inline: auto; }
.where__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 4vw, 64px); margin-top: clamp(26px, 4vw, 56px); align-items: stretch; }
.where__address { font-family: var(--f-head); font-weight: 800; font-size: clamp(24px, 3vw, 44px); line-height: 1.1; color: var(--white); margin-bottom: 24px; }
.where__photo { margin-top: clamp(28px, 4vw, 50px); border-radius: 26px; overflow: hidden; box-shadow: 12px 12px 0 var(--pink); }
.where__photo img { width: 100%; height: 100%; object-fit: cover; }
.where__map {
  position: relative; min-height: clamp(320px, 40vw, 560px);
  border: 4px solid var(--pink); border-radius: 30px; overflow: hidden;
  background:
    linear-gradient(rgba(246,192,216,.14) 2px, transparent 2px) 0 0 / 46px 46px,
    linear-gradient(90deg, rgba(246,192,216,.14) 2px, transparent 2px) 0 0 / 46px 46px,
    #141212;
}
.where__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.where__pin { position: absolute; left: 50%; top: 50%; width: clamp(110px, 14vw, 190px); translate: -50% -50%; animation: pinBob 2.4s ease-in-out infinite; }
.where__pin img { width: 100%; animation: spin 14s linear infinite; filter: drop-shadow(0 16px 18px rgba(0,0,0,.6)); }
@keyframes pinBob { 50% { translate: -50% -58%; } }
@media (max-width: 860px) { .where__grid { grid-template-columns: 1fr; } }

/* ---------- KÖVESS MINKET ---------- */
.social { padding: clamp(80px, 10vw, 140px) var(--gutter) clamp(50px, 7vw, 100px); text-align: center; }
.social__lead { font-family: var(--f-head); font-weight: 700; font-size: clamp(18px, 2vw, 28px); margin-top: 16px; }
.social__btns { display: flex; justify-content: center; gap: clamp(14px, 4vw, 56px); margin-top: clamp(30px, 5vw, 60px); }

/* ---------- KAPCSOLAT ---------- */
.contact { padding: clamp(30px, 5vw, 70px) var(--gutter) clamp(70px, 9vw, 130px); max-width: 1440px; margin: 0 auto; }
.contact__card {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px);
  padding: clamp(28px, 5vw, 72px);
  background: var(--black); color: var(--pink);
  border-radius: clamp(24px, 3vw, 44px);
  box-shadow: 14px 14px 0 var(--white);
}
.contact__intro { container-type: inline-size; min-width: 0; }
.contact__title { font-family: var(--f-head); font-weight: 900; font-stretch: 118%; font-size: clamp(28px, 13.2cqi, 96px); /* "KAPCSOLAT" is ~7.3em wide → fits the column */ line-height: .9; letter-spacing: -.04em; text-transform: uppercase; }
.contact__lead { display: inline-block; margin-top: 20px; font-family: var(--f-head); font-weight: 800; font-style: italic; font-size: clamp(18px, 1.8vw, 26px); background: var(--pink); color: var(--black); padding: .35em .8em; transform: rotate(-2deg); }
.contact__note { margin-top: 18px; color: var(--white); }
.quick { align-self: center; display: grid; gap: 16px; border-left: 2px solid var(--pink); padding-left: clamp(24px, 4vw, 64px); }
.quick h3 { font-family: var(--f-head); font-weight: 900; font-size: clamp(20px, 2vw, 28px); text-transform: uppercase; }
.quick dt { font-family: var(--f-head); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.quick dd { color: var(--white); font-size: clamp(17px, 1.5vw, 21px); }
.quick a { text-underline-offset: 3px; }

@media (max-width: 900px) {
  .contact__card { grid-template-columns: minmax(0, 1fr); box-shadow: 8px 8px 0 var(--white); }
  .quick { border-left: 0; padding-left: 0; border-top: 2px solid var(--pink); padding-top: 22px; }
}

/* ---------- FOOTER ---------- */
.footer { background: var(--black); color: var(--pink); padding: clamp(50px, 7vw, 100px) var(--gutter) 40px; text-align: center; overflow: hidden; }
.footer__logo { width: min(70vw, 900px); aspect-ratio: 103.15 / 49.43; fill: currentColor; overflow: visible; transition: transform .6s var(--ease-spring); }
.footer__logo:hover { transform: rotate(-4deg) scale(1.04); }
.footer__motto { font-family: var(--f-head); font-weight: 800; font-style: italic; font-size: clamp(14px, 1.8vw, 24px); margin-top: 26px; color: var(--white); }
.footer__copy { margin-top: 26px; font-size: 14px; }
.footer__links { display: flex; justify-content: center; gap: 8px 22px; flex-wrap: wrap; margin-top: 10px; }
.footer__links a { font-family: var(--f-head); font-weight: 800; font-size: 14px; text-transform: uppercase; text-underline-offset: 4px; }
.footer__links a:hover { color: var(--white); }

/* ---------- COOKIE ---------- */
.cookie {
  position: fixed; left: 50%; bottom: 14px; z-index: 90;
  width: min(760px, calc(100% - 24px));
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--black); color: var(--white);
  border: 3px solid var(--pink); border-radius: 22px; padding: 14px 18px;
  font-size: 14px; line-height: 1.35;
  transform: translate(-50%, 160%); transition: transform .7s var(--ease-spring);
}
.cookie.show { transform: translate(-50%, 0); }
.cookie p { flex: 1 1 280px; }
.cookie__btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- LEGAL PAGES ---------- */
.legal { max-width: 860px; margin: 0 auto; padding: 120px var(--gutter) 80px; }
.legal h1 { font-family: var(--f-head); font-weight: 900; font-stretch: 116%; font-size: clamp(26px, 8.4vw, 86px); /* "ADATVÉDELMI" ~8.5em fits the 860px column */ line-height: .92; letter-spacing: -.04em; text-transform: uppercase; margin-bottom: 30px; }
.legal h2 { font-family: var(--f-head); font-weight: 900; font-size: clamp(20px, 2.4vw, 28px); margin: 34px 0 10px; }
.legal .contact-info { background: var(--black); color: var(--white); border-radius: 20px; padding: 18px 22px; }
.legal .contact-info strong { color: var(--pink); }
.legal p { margin: 6px 0; }
.legal ul { list-style: disc; padding-left: 22px; margin: 6px 0; }
.legal a { text-underline-offset: 3px; }
.legal .back { display: inline-block; margin-top: 36px; }
.legal .btn--line { color: var(--black); border-color: var(--black); }
.legal .btn--line:hover { background: var(--black); color: var(--pink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}