/*
Theme Name: Magyaros menü
Description: Magyaros menü Győr – a v6 „Piros kockás, friss modern” dizájn, WordPressből szerkeszthető étlappal, Scheo komponens-készlettel. Zammad #12888.
Author: Scheo Tanácsadó Kft.
Version: 1.0.0
Requires PHP: 8.0
Text Domain: magyaros-menu
*/

:root{
  --sc-brand:#c8102e; --sc-brand-sotet:#9b0c23; --sc-brand-2:#e2462c;
  --sc-deep:#241012; --sc-ink:#241012; --sc-muted:#6a565a; --sc-line:#f0dadb; --sc-ok:#26773f;
  --piros:#c8102e; --piros-s:#9b0c23; --ink:#241012; --muted:#6a565a; --halvany:#fff7f6;
  --wolt:#009de0; --wolt-ink:#06243a; --foodora:#d70f64;
  --disp:Bitter,Georgia,serif; --sans:Rubik,system-ui,-apple-system,"Segoe UI",sans-serif;
  --kocka:linear-gradient(0deg,rgba(214,40,40,.09) 33.3%,transparent 33.3%,transparent 66.6%,rgba(214,40,40,.09) 66.6%),
          linear-gradient(90deg,rgba(214,40,40,.09) 33.3%,transparent 33.3%,transparent 66.6%,rgba(214,40,40,.09) 66.6%);
  --nav-h:72px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 70px)}
body{margin:0;font-family:var(--sans);color:var(--ink);background:#fff;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--piros)}
h1,h2,h3,h4{font-family:var(--disp);line-height:1.12;margin:0}
.wrap{max-width:1220px;margin:0 auto;padding:0 28px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:12px;top:-60px;z-index:99;background:var(--ink);color:#fff;padding:12px 16px;border-radius:10px}
.skip-link:focus{top:12px}
:focus-visible{outline:3px solid var(--piros);outline-offset:3px}

/* ---------- gombok */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;border-radius:999px;
  font:700 15px/1.1 var(--sans);text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,background .25s ease}
.btn:hover{transform:translateY(-2px)}
.btn--piros{background:var(--piros);color:#fff;box-shadow:0 14px 26px -14px rgba(200,16,46,.9)}
.btn--piros:hover{background:var(--piros-s)}
.btn--wolt{background:var(--wolt);color:var(--wolt-ink)}
.btn--wolt:hover{background:#1fb0ee}
.btn--foodora{background:var(--foodora);color:#fff}
.btn--foodora:hover{background:#b90c55}
.linkgomb{background:none;border:0;padding:0 4px;min-height:44px;color:var(--piros);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}

/* ---------- fejléc */
.nav{position:sticky;top:0;z-index:40;height:var(--nav-h);background:rgba(255,255,255,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid #f3dfe0;transition:box-shadow .3s ease}
.nav.is-gorgetve{box-shadow:0 10px 30px -22px rgba(36,16,18,.55)}
.nav::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:repeating-linear-gradient(90deg,var(--piros) 0 12px,#fff 12px 24px)}
.nav__in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--piros);min-height:44px}
.brand__kocka{width:38px;height:38px;border-radius:10px;flex:none;background-color:#fff;background-image:
  linear-gradient(45deg,var(--piros) 25%,transparent 25%,transparent 75%,var(--piros) 75%),
  linear-gradient(45deg,var(--piros) 25%,transparent 25%,transparent 75%,var(--piros) 75%);
  background-size:12px 12px;background-position:0 0,6px 6px;box-shadow:inset 0 0 0 2px var(--piros);transform:rotate(-6deg)}
.brand__nev{font:800 23px/1 var(--disp);display:flex;flex-direction:column}
.brand__nev small{font:600 11px/1.4 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.nav__links{display:flex;gap:6px}
.nav__links a{color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;padding:12px 14px;border-radius:999px;transition:background .25s ease,color .25s ease}
.nav__links a:hover{background:#fdeceb;color:var(--piros)}
.nav__order{display:flex;gap:10px}
.nav__order .btn{min-height:44px;padding:10px 18px;font-size:14px}

/* ---------- hero */
.hero{position:relative;overflow:hidden;background-color:#fff;background-image:var(--kocka);background-size:34px 34px}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:90px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff)}
.hero__in{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding-top:64px;padding-bottom:84px}
.eyebrow{display:inline-block;font:700 13px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--piros);margin-bottom:16px}
.eyebrow--vilagos{color:#ffe1e1}
.hero h1{font-size:clamp(40px,5.6vw,70px);font-weight:800;color:var(--piros);max-width:13ch;letter-spacing:-.01em}
.hero h1 em{font-style:italic;color:var(--ink)}
.mm-ig{all:unset;display:block;margin:22px 0 0;font:700 clamp(21px,2.4vw,27px)/1.3 var(--disp);color:var(--ink)}
.mm-ig .sc-ig-szo{background:none;color:var(--piros);-webkit-text-fill-color:var(--piros)}
.mm-ig .sc-ig-kurzor{background:var(--piros)}
.lead{font-size:18px;line-height:1.65;color:#4f3d40;max-width:540px;margin:16px 0 30px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.hero__cta--kozep{justify-content:center}
.hero__fotok{position:relative;min-height:470px}
.polaroid{position:absolute;margin:0;background:#fff;padding:12px 12px 40px;border-radius:6px;box-shadow:0 30px 60px -30px rgba(36,16,18,.55),0 2px 0 #f1e3e3;width:74%}
.polaroid img{border-radius:3px;aspect-ratio:16/9;object-fit:cover;width:100%;height:auto}
.polaroid--1{right:0;top:6px;transform:rotate(3deg);z-index:3;animation:mm-lebeg 7s ease-in-out infinite}
.polaroid--2{left:0;top:150px;transform:rotate(-5deg);z-index:2;animation:mm-lebeg 8s ease-in-out -2s infinite}
.polaroid--3{right:4%;top:300px;transform:rotate(2deg);z-index:1;width:62%;animation:mm-lebeg 9s ease-in-out -4s infinite}
@keyframes mm-lebeg{0%,100%{translate:0 0}50%{translate:0 -12px}}

/* ---------- csík */
.strip{background:#fff}
.strip__in{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;background:var(--piros);color:#fff;border-radius:20px;padding:22px 26px;
  margin-top:-34px;position:relative;z-index:2;box-shadow:0 26px 40px -30px rgba(200,16,46,.9)}
.strip__in>div{text-align:center;padding:4px 8px}
.strip__in>div+div{border-left:1px solid rgba(255,255,255,.28)}
.strip b{display:block;font:800 22px/1.2 var(--disp)}
.strip small{display:block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#ffe6e6;margin-top:4px}

/* ---------- szekció-fej */
section{padding:84px 0}
.sec-head{text-align:center;max-width:680px;margin:0 auto 42px}
.sec-head h2{font-size:clamp(32px,4vw,46px);color:var(--ink);margin-bottom:12px}
.sec-head p{color:var(--muted);font-size:17px;margin:0}
.sec-head--bal{text-align:left;margin:0}

/* ---------- K-24 karusszel */
.kostolo{padding-bottom:40px}
.mm-kr .sc-kr-card{flex-basis:280px;border-color:#f0dadb}
.mm-kr .sc-kr-card img{height:158px}
.mm-kr .sc-kr-tag{color:var(--piros)}
.mm-kr .sc-kr-b p{font-weight:700;color:var(--ink)}
.mm-kr .sc-kr-more{color:var(--piros-s)}

/* ---------- étlap */
.menu{padding-top:60px}
.szuro{position:sticky;top:var(--nav-h);z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-top:1px solid #f3dfe0;border-bottom:1px solid #f3dfe0;margin-bottom:34px}
.szuro__in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:10px;padding-bottom:10px}
.katnav .chip{padding:10px 13px;font-size:14px}
.katnav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px;min-width:0;flex:1 1 auto}
.katnav::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border-radius:999px;border:1.5px solid #ecc9cc;background:#fff;
  color:var(--ink);font:600 14.5px/1 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.chip:hover{border-color:var(--piros);color:var(--piros)}
.chip.is-aktiv,.chip[aria-pressed="true"],.chip[aria-expanded="true"]{background:var(--piros);border-color:var(--piros);color:#fff}
.szuro__eszk{display:flex;gap:10px;align-items:center;flex:none}
.kereso{display:flex;align-items:center;gap:8px;min-height:44px;border:1.5px solid #ecc9cc;border-radius:999px;padding:0 14px;background:#fff}
.kereso:focus-within{border-color:var(--piros)}
.kereso svg{width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2.2;stroke-linecap:round}
.kereso input{border:0;outline:0;font:500 15px var(--sans);width:160px;min-height:40px;background:transparent;color:var(--ink)}
.allerg{padding-bottom:14px}
.allerg__cim{margin:4px 0 8px;font-weight:700}
.allerg__gombok{display:flex;flex-wrap:wrap;gap:8px}
.allerg__megj{margin:10px 0 0;font-size:13.5px;color:var(--muted);max-width:760px}
.ures{text-align:center;font-size:17px;color:var(--muted);padding:30px 0}

.mcat{margin-bottom:56px}
.mcat[hidden]{display:none}
.mcat__h{display:flex;align-items:center;gap:16px;margin-bottom:8px}
.mcat__h h3{font-size:34px;color:var(--piros);font-weight:800;border-bottom:4px solid var(--piros);padding-bottom:4px;white-space:nowrap}
.mcat__h::after{content:"";flex:1;height:2px;background:#f3d0d3;order:2}
.mcat__db{order:3;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mcat__p{margin:6px 0 0;color:var(--muted)}
.mcat .cgrid{margin-top:24px}

/* K-18 termékkártya a Magyaros étlapra igazítva: max 3 egy sorban, a csonka sor középen */
.sc-tk-wrap.cgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;max-width:none;perspective:1600px}
.cgrid .sc-tk{transform-style:flat;width:calc((100% - 48px)/3);border-color:#f0dadb;box-shadow:0 18px 36px -28px rgba(200,40,40,.55)}
.cgrid .sc-tk[hidden]{display:none}
.cgrid .sc-tk:hover,.cgrid .sc-tk:focus-within{border-color:#e7a9ae}
.cgrid .sc-tk-media{aspect-ratio:16/9;background:#f7eeee}
.cgrid .sc-tk-media img{object-fit:contain}
.sc-tk-badge{background:var(--piros)}
.etel__nokep{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;text-align:center;font:700 20px var(--disp);color:var(--piros);background-image:var(--kocka);background-size:28px 28px}
.cgrid .sc-tk-buy{background:linear-gradient(180deg,rgba(36,16,18,0),rgba(36,16,18,.78))}
.cgrid .sc-tk-btn{border-radius:999px;min-height:46px}
.cgrid .sc-tk-btn.btn--wolt{background:var(--wolt);color:var(--wolt-ink)}
.cgrid .sc-tk-btn.btn--foodora{background:var(--foodora);color:#fff}
.cgrid .sc-tk-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.cgrid .sc-tk-body{gap:6px;flex:1}
.etel__cimkek{display:flex;flex-wrap:wrap;gap:6px;min-height:0}
.etel__cimkek:empty{display:none}
.tag{display:inline-block;padding:4px 10px;border-radius:999px;font:700 11.5px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--tag,#6a565a)}
.tag--koret{background:#fff;color:var(--muted);box-shadow:inset 0 0 0 1.5px #e2c9cb}
.cgrid .sc-tk-name{font-family:var(--disp);font-size:19px;font-weight:700;color:var(--ink)}
.etel__p{margin:0;color:#5f4b4f;font-size:14.5px;line-height:1.55}
.etel__allerg{font-size:13px;color:var(--muted)}
.cgrid .sc-tk-price{margin-top:auto;padding-top:6px}
.cgrid .sc-tk-price b{font-family:var(--disp);font-size:21px;color:var(--piros)}
.etel.is-kiemelt{animation:mm-kiemel 2.2s ease}
@keyframes mm-kiemel{0%,60%{box-shadow:0 0 0 4px var(--piros),0 30px 50px -30px rgba(200,16,46,.8)}100%{box-shadow:0 18px 36px -28px rgba(200,40,40,.55)}}
.armegj{text-align:center;color:var(--muted);font-size:14px;margin:0}

/* ---------- lépések, GYIK */
.rendeles{background-color:var(--halvany);background-image:var(--kocka);background-size:34px 34px}
.rendeles .sc-st-p{color:#5f4b4f}
.rendeles .sc-st-track::after{box-shadow:0 6px 16px rgba(200,16,46,.28)}
.rendeles .sc-st.is-on .sc-st-dot{box-shadow:0 18px 30px -10px rgba(200,16,46,.5),inset 0 2px 5px rgba(255,255,255,.55),inset 0 -6px 12px rgba(36,16,18,.22)}
.rendeles .sc-st.is-on .sc-st-dot::before{background:rgba(200,16,46,.3)}
.rendeles .sc-st.is-on .sc-st-step:nth-child(4) .sc-st-dot{box-shadow:0 18px 30px -10px rgba(38,119,63,.5),inset 0 2px 5px rgba(255,255,255,.5),inset 0 -6px 12px rgba(36,16,18,.22)}
.gyik__in{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}
.gyik .sc-ac{max-width:none}

/* ---------- CTA, lábléc */
.cta{background:var(--piros);color:#fff;text-align:center;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background-image:linear-gradient(0deg,rgba(255,255,255,.08) 33.3%,transparent 33.3%,transparent 66.6%,rgba(255,255,255,.08) 66.6%),linear-gradient(90deg,rgba(255,255,255,.08) 33.3%,transparent 33.3%,transparent 66.6%,rgba(255,255,255,.08) 66.6%);background-size:40px 40px}
.cta__in{position:relative}
.cta h2{font-size:clamp(30px,4vw,46px);margin-bottom:12px}
.cta p{color:#ffe6e6;font-size:18px;margin:0 0 28px}
.cta .btn--wolt{box-shadow:0 14px 28px -16px rgba(0,0,0,.6)}
.lab{background:var(--ink);color:#e7cfd2;text-align:center;padding:56px 0 48px}
.brand--lab{color:#fff;justify-content:center}
.brand--lab .brand__nev small{color:#cdb1b5}
.brand--lab .brand__kocka{box-shadow:inset 0 0 0 2px #fff}
.fnav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px;margin:22px 0}
.fnav a{color:#f0dde0;text-decoration:none;padding:12px 10px;min-height:44px;display:inline-flex;align-items:center}
.fnav a:hover{color:#fff;text-decoration:underline}
.lab__order{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.lab small{display:block;color:#c4a9ad;font-size:13px}
.lap{padding:80px 28px}
.lap h1{font-size:40px;color:var(--piros);margin-bottom:18px}

/* lebegő rendelés-sáv (mobil) */
.floatbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);box-shadow:0 -12px 30px -20px rgba(36,16,18,.5);transform:translateY(110%);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.floatbar .btn{flex:1;padding:12px 10px}
.floatbar.is-lathato{transform:none}

/* ---------- megjelenés-animáció (csak ha fut a JS) */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- reszponzív */
@media (max-width:1240px){
  .nav__links{display:none}
  .cgrid .sc-tk{width:calc((100% - 24px)/2)}
  .szuro__in{flex-direction:column;align-items:stretch}
  .szuro__eszk{justify-content:space-between}
  .kereso{flex:1}.kereso input{width:100%}
}
@media (max-width:860px){
  :root{--nav-h:64px}
  .hero__in{grid-template-columns:1fr;padding-top:40px;padding-bottom:70px}
  .hero__fotok{min-height:370px;margin:0 8px}
  .strip b{font-size:18px}
  .polaroid{width:70%;padding:8px 8px 26px}
  .polaroid--2{top:90px}.polaroid--3{top:180px}
  .strip__in{grid-template-columns:repeat(2,1fr);row-gap:18px}
  .strip__in>div:nth-child(3){border-left:0}
  .gyik__in{grid-template-columns:1fr;gap:26px}
  .sec-head--bal{text-align:center}
  .floatbar{display:flex}
  .lab{padding-bottom:110px}
}
@media (max-width:620px){
  .wrap{padding:0 18px}
  section{padding:62px 0}
  .brand__nev{font-size:20px}
  .brand__kocka{width:32px;height:32px}
  .nav__order{display:none}
  .cgrid .sc-tk{width:100%}
  .mcat__h h3{font-size:28px}
  .mcat__db{display:none}
  .hero__cta .btn{flex:1 1 auto}
  .chip--allerg{padding:10px 14px}
}
/* érintős eszközön és keskeny kijelzőn a gombsor a kártya alján, nem a fotón */
.etel__rendel{display:none;gap:10px;margin-top:10px}
.etel__rendel .btn{flex:1;min-height:46px;padding:10px 12px;font-size:14.5px}
@media (hover:none),(max-width:860px){
  .cgrid .sc-tk-buy{display:none}
  .etel__rendel{display:flex}
  .cgrid .sc-tk:hover,.cgrid .sc-tk:focus-within{transform:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .polaroid{animation:none}
  .js .reveal{opacity:1;transform:none;transition:none}
  .btn,.chip{transition:none}
}

/* ================================================================
   #12888 - Peter kerese (2026-09-14): "a nagy egybefuggo feher reszek
   moge nagyon halvany minta, mint a TesztaPont Pecs oldalan" + "garantaltan
   tokeletes mobilnezet". Csak CSS, nulla extra letoltes.
   ================================================================ */

/* 1. Halvany hatter-minta: keresztszemes (himzett) motivum + finom rács + meleg fenyfoltok.
      A body-n van, igy a feher kartyak kiemelkednek belole; a sajat hatteru szekciok
      (hero, rendeles, CTA, lablec) a sajatjukat tartjak. */
body{
  background-color:#fffdfc;
  background-image:
    radial-gradient(circle at 10% 12%,rgba(200,16,46,.045),transparent 40%),
    radial-gradient(circle at 90% 80%,rgba(226,70,44,.05),transparent 44%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cg fill='none' stroke='%23c8102e' stroke-width='1.3' stroke-linecap='round' opacity='.10'%3E%3Cpath d='M33 33l6 6M39 33l-6 6M33 23l6 6M39 23l-6 6M33 43l6 6M39 43l-6 6M23 33l6 6M29 33l-6 6M43 33l6 6M49 33l-6 6'/%3E%3C/g%3E%3Cg fill='%23c8102e' opacity='.08'%3E%3Ccircle cx='0' cy='0' r='1.6'/%3E%3Ccircle cx='72' cy='0' r='1.6'/%3E%3Ccircle cx='0' cy='72' r='1.6'/%3E%3Ccircle cx='72' cy='72' r='1.6'/%3E%3C/g%3E%3C/svg%3E"),
    repeating-linear-gradient(45deg,rgba(36,16,18,.018) 0 1px,transparent 1px 14px),
    repeating-linear-gradient(-45deg,rgba(36,16,18,.018) 0 1px,transparent 1px 14px);
  background-size:auto,auto,72px 72px,auto,auto;
  background-attachment:fixed,fixed,scroll,scroll,scroll;
}
.strip{background:transparent}
.szuro{background:rgba(255,253,252,.95)}
/* a hero kockas mintaja alul atlatszoba fut, nem feher savba */
.hero{background:transparent}
.hero::before{content:"";position:absolute;inset:0;background-color:#fff;background-image:var(--kocka);background-size:34px 34px;
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 120px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 120px),transparent)}
.hero::after{display:none}

/* 2. Mobil-finomitasok */
@media (max-width:760px){
  /* lepes-korongok: laposan, hogy a fuggoleges vonal soha ne takarja a szamot */
  .sc-st,.rendeles .sc-st{perspective:none}
  .sc-st-track,.sc-st-step,.sc-st-txt,.sc-st-dot{transform-style:flat}
  .sc-st-track::before,.sc-st-track::after{z-index:0}
  .sc-st-dot,.sc-st.is-on .sc-st-dot{transform:none;z-index:2}
  .sc-st-dot::before{display:none}
  .sc-st-h{transform:none}
  .sc-st-track{padding-left:2px}
}
@media (max-width:620px){
  .mm-ig{min-height:2.6em}
  .hero__cta .btn--piros{flex:1 1 100%}
  .hero__cta .btn--wolt,.hero__cta .btn--foodora{flex:1 1 0;min-width:0;padding:12px 10px}
  .strip__in{padding:18px 10px;gap:8px}
  .strip__in>div{padding:4px 4px}
  .strip b{font-size:clamp(15px,4.5vw,18px);white-space:nowrap}
  .strip small{font-size:11.5px;letter-spacing:.05em}
  .etel__rendel .btn{padding:10px 8px}
}