/* Western Söröző és Pizzéria, koncepció-oldal
   Kraft-western: kraft-papír alap, szárazbélyegző-szerű nyomdai szedés,
   kötél-keretvonal és rozettás sarkok. */

/* ---------- Fontok ---------- */
@font-face {
  font-family: 'Hepta Slab';
  src: url('assets/fonts/hepta-slab-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hepta Slab';
  src: url('assets/fonts/hepta-slab-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Libre Caslon Text';
  src: url('assets/fonts/libre-caslon-text-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Libre Caslon Text';
  src: url('assets/fonts/libre-caslon-text-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

/* ---------- Paletta ---------- */
:root {
  --papir:  #DCC9A8;
  --papir2: #D0BA95;
  --karton: #E6D8BE;
  --tinta:  #2E2419;
  --tinta2: #544430;
  --sotet:  #241C13;
  --pecset: #8E3123;
  --krem:   #F2E8D5;

  --display: 'Hepta Slab', Georgia, 'Times New Roman', serif;
  --szoveg: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;

  --sav: clamp(1.1rem, 5vw, 3rem);
  --max: 74rem;
}

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

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

body {
  margin: 0;
  background-color: var(--papir);
  background-image:
    repeating-linear-gradient(97deg, rgba(46,36,25,.030) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(3deg,  rgba(46,36,25,.022) 0 1px, transparent 1px 9px);
  color: var(--tinta);
  font-family: var(--szoveg);
  font-size: 1.0625rem;
  line-height: 1.68;
  overflow-x: hidden;
}

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

a { color: var(--pecset); }

h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.04; margin: 0; }

p { margin: 0; }

:focus-visible {
  outline: 3px solid var(--pecset);
  outline-offset: 3px;
}

.ikon { width: 1.05em; height: 1.05em; flex: none; }
.ikon--nagy { width: 1.7rem; height: 1.7rem; }

/* ---------- Demó-sáv ---------- */
.demosav {
  margin: 0;
  padding: .55rem var(--sav);
  background: var(--sotet);
  color: var(--krem);
  font-size: .74rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: center;
}

/* ---------- Fejléc ---------- */
.fejlec {
  border-bottom: 1px solid rgba(46,36,25,.35);
  background: rgba(230,216,190,.55);
}
.fejlec__belso {
  max-width: var(--max);
  margin: 0 auto;
  padding: .85rem var(--sav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.fejlec__marka {
  text-decoration: none;
  color: var(--tinta);
  display: block;
}
.fejlec__nev {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1;
}
.fejlec__alnev {
  display: block;
  font-size: .78rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--tinta2);
  margin-top: .2rem;
}
.tel-gomb {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem;
  border: 1.5px solid var(--tinta);
  box-shadow: 3px 3px 0 rgba(46,36,25,.22);
  color: var(--tinta);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .04em;
  background: var(--karton);
  transition: background-color .18s ease, color .18s ease;
}
.tel-gomb:hover { background: var(--pecset); color: var(--krem); }

/* ---------- Kötél-keret és rozetták ---------- */
.kotel {
  position: relative;
  padding: clamp(2.4rem, 7vw, 4.6rem) clamp(1.4rem, 5vw, 3.4rem);
  background-color: var(--karton);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14'%3E%3Cg fill='none' stroke='%232E2419' stroke-width='1.25' stroke-linecap='round'%3E%3Cpath d='M0 12.5 8 1.5M8 12.5 16 1.5M16 12.5 24 1.5'/%3E%3C/g%3E%3Cg fill='none' stroke='%232E2419' stroke-width='.9'%3E%3Cpath d='M0 .8h24M0 13.2h24'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14'%3E%3Cg fill='none' stroke='%232E2419' stroke-width='1.25' stroke-linecap='round'%3E%3Cpath d='M0 12.5 8 1.5M8 12.5 16 1.5M16 12.5 24 1.5'/%3E%3C/g%3E%3Cg fill='none' stroke='%232E2419' stroke-width='.9'%3E%3Cpath d='M0 .8h24M0 13.2h24'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='24'%3E%3Cg fill='none' stroke='%232E2419' stroke-width='1.25' stroke-linecap='round'%3E%3Cpath d='M1.5 0 12.5 8M1.5 8 12.5 16M1.5 16 12.5 24'/%3E%3C/g%3E%3Cg fill='none' stroke='%232E2419' stroke-width='.9'%3E%3Cpath d='M.8 0v24M13.2 0v24'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='24'%3E%3Cg fill='none' stroke='%232E2419' stroke-width='1.25' stroke-linecap='round'%3E%3Cpath d='M1.5 0 12.5 8M1.5 8 12.5 16M1.5 16 12.5 24'/%3E%3C/g%3E%3Cg fill='none' stroke='%232E2419' stroke-width='.9'%3E%3Cpath d='M.8 0v24M13.2 0v24'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-position: left top, left bottom, left top, right top;
}
.rozetta {
  position: absolute;
  width: 34px; height: 34px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' fill='%23E6D8BE'/%3E%3Cg fill='none' stroke='%232E2419' stroke-width='1.5'%3E%3Ccircle cx='20' cy='20' r='13'/%3E%3Ccircle cx='20' cy='20' r='8.5'/%3E%3Cpath d='M20 3v6M20 31v6M3 20h6M31 20h6M8 8l4.2 4.2M27.8 27.8 32 32M32 8l-4.2 4.2M12.2 27.8 8 32'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='3.6' fill='%238E3123'/%3E%3C/svg%3E");
}
.rozetta--bf { top: -6px;  left: -6px; }
.rozetta--jf { top: -6px;  right: -6px; }
.rozetta--ba { bottom: -6px; left: -6px; }
.rozetta--ja { bottom: -6px; right: -6px; }

/* ---------- Hirdetmény-hero ---------- */
.hirdetmeny {
  max-width: var(--max);
  margin: clamp(1.6rem, 5vw, 3.4rem) auto clamp(2.6rem, 8vw, 5rem);
  padding: 0 var(--sav);
}
.hirdetmeny__fejlec {
  text-align: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(.66rem, 2.4vw, .8rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tinta2);
  margin-bottom: clamp(1.2rem, 4vw, 2rem);
}
.vonalrozetta {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 2vw, 1rem);
}
.vonalrozetta__vonal { flex: 1 1 auto; height: 12px; min-width: 0; }
.vonalrozetta__jel { flex: none; width: clamp(20px, 5vw, 28px); height: clamp(20px, 5vw, 28px); }

.nevtabla {
  text-align: center;
  padding: clamp(.7rem, 3vw, 1.4rem) 0;
}
.nevtabla__fo {
  display: block;
  font-size: clamp(2.3rem, 10.4vw, 7.6rem);
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--tinta);
  text-shadow: 1px 1px 0 rgba(242,232,213,.75), 2px 2px 0 rgba(46,36,25,.14);
}
.nevtabla__al {
  display: block;
  margin-top: clamp(.55rem, 2vw, .9rem);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(.72rem, 3.1vw, 1.35rem);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--pecset);
}
.hirdetmeny__mondat {
  margin: clamp(1.3rem, 4vw, 2rem) auto 0;
  max-width: 34rem;
  text-align: center;
  font-size: clamp(1.05rem, 3.4vw, 1.32rem);
  color: var(--tinta);
}
.hirdetmeny__lista {
  margin: .9rem auto 0;
  text-align: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(.72rem, 2.6vw, .92rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta2);
}
.hirdetmeny__gombok {
  margin-top: clamp(1.6rem, 5vw, 2.4rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
}

.gomb {
  display: inline-block;
  padding: .8rem 1.5rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid var(--tinta);
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.gomb--tomor {
  background: var(--pecset);
  border-color: var(--pecset);
  color: var(--krem);
  box-shadow: 4px 4px 0 rgba(46,36,25,.3);
}
.gomb--tomor:hover { background: var(--tinta); border-color: var(--tinta); box-shadow: 2px 2px 0 rgba(46,36,25,.3); }
.gomb--vonalas { color: var(--tinta); background: transparent; }
.gomb--vonalas:hover { background: var(--tinta); color: var(--krem); }
.gomb--vilagos {
  background: var(--krem);
  border-color: var(--krem);
  color: var(--sotet);
  box-shadow: 4px 4px 0 rgba(0,0,0,.35);
}
.gomb--vilagos:hover { background: var(--papir); border-color: var(--papir); }

.pecset {
  margin: clamp(1.8rem, 5vw, 2.4rem) auto 0;
  width: clamp(112px, 28vw, 132px);
  height: clamp(112px, 28vw, 132px);
  display: grid;
  place-items: center;
  border: 2.5px solid var(--pecset);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--karton), 0 0 0 5.5px var(--pecset);
  background: var(--karton);
  transform: rotate(-9deg);
  color: var(--pecset);
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(.55rem, 1.45vw, .72rem);
  letter-spacing: .06em;
  line-height: 1.55;
  text-transform: uppercase;
  text-align: center;
}
.pecset small { font-size: .8em; letter-spacing: .16em; font-weight: 600; }

/* Nagyobb lapon a pecset a hirdetmeny jobb also sarkara kerul, mint egy leutott belyegzo. */
@media (min-width: 62rem) {
  .pecset {
    position: absolute;
    right: clamp(.4rem, 1.6vw, 1.6rem);
    bottom: clamp(-1.6rem, -1.2vw, -1rem);
    margin: 0;
    width: clamp(116px, 12vw, 136px);
    height: clamp(116px, 12vw, 136px);
  }
}

/* ---------- Szakasz-fej ---------- */
.szakaszfej { max-width: 40rem; }
.szakaszfej__cim {
  font-size: clamp(1.7rem, 6vw, 2.9rem);
  letter-spacing: .01em;
}
.szakaszfej__alcim {
  margin-top: .9rem;
  color: var(--tinta2);
  font-size: 1rem;
}

/* ---------- Plakát-kártyák ---------- */
.kinalat {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 3.5rem) var(--sav) clamp(3rem, 9vw, 5.5rem);
}
.plakatok {
  margin-top: clamp(2rem, 6vw, 3.2rem);
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.2rem);
}
.plakat {
  position: relative;
  padding: clamp(1.3rem, 3.5vw, 2rem);
  background: var(--karton);
  border: 2px solid var(--tinta);
  box-shadow: 0 0 0 1px var(--karton) inset, 0 0 0 3px var(--tinta) inset, 6px 7px 0 rgba(46,36,25,.16);
  transform: rotate(var(--rot, 0deg));
}
.plakat__szam {
  font-family: var(--display);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--pecset);
}
.plakat__cim {
  margin-top: .5rem;
  font-size: clamp(1.55rem, 5.4vw, 2.5rem);
  letter-spacing: .01em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.plakat__szoveg {
  margin-top: .8rem;
  color: var(--tinta2);
  max-width: 26rem;
}
.plakat__ar {
  margin-top: 1.2rem;
  padding-top: .7rem;
  border-top: 1px dashed rgba(46,36,25,.5);
  font-family: var(--display);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta2);
}
.plakat__ar b { color: var(--pecset); font-weight: 800; }

.felragasztott {
  margin: 0;
  max-width: 21rem;
  transform: rotate(var(--rot, 0deg));
}
.felragasztott img {
  width: 100%;
  border: 8px solid var(--krem);
  box-shadow: 0 0 0 1.5px var(--tinta), 5px 6px 0 rgba(46,36,25,.18);
}
.felragasztott figcaption {
  margin-top: .8rem;
  font-size: .84rem;
  font-style: italic;
  color: var(--tinta2);
}

/* Tablet: ket sav, eltolt sorokkal, hogy a felragasztott jelleg itt se vesszen el. */
@media (min-width: 48rem) and (max-width: 74.99rem) {
  .plakatok {
    grid-template-columns: repeat(6, 1fr);
    align-items: start;
    gap: clamp(1.4rem, 3vw, 2rem);
  }
  .plakat--a { grid-column: 1 / span 4; grid-row: 1; }
  .plakat--b { grid-column: 3 / span 4; grid-row: 2; margin-top: -.6rem; }
  .plakat--c { grid-column: 1 / span 4; grid-row: 3; margin-top: -.6rem; }
  .plakat--d { grid-column: 2 / span 5; grid-row: 4; margin-top: -.6rem; }
  .felragasztott { grid-column: 4 / span 3; grid-row: 5; margin-top: 1.2rem; }
}

/* Szabalytalan, felragasztott elrendezes: a szeles szedesu nevek szeles plakatot kapnak. */
@media (min-width: 75rem) {
  .plakatok {
    grid-template-columns: repeat(12, 1fr);
    align-items: start;
    gap: clamp(1.6rem, 3vw, 2.4rem);
  }
  .plakat--a { grid-column: 1 / span 5;  grid-row: 1; }
  .plakat--b { grid-column: 6 / span 7;  grid-row: 1; margin-top: 3.5rem; }
  .plakat--c { grid-column: 2 / span 5;  grid-row: 2; margin-top: -1rem; }
  .plakat--d { grid-column: 7 / span 6;  grid-row: 2; margin-top: -3.5rem; }
  .felragasztott { grid-column: 3 / span 4; grid-row: 3; margin-top: 1.5rem; }
}

/* ---------- Házhozszállítás ---------- */
.szallitas {
  background: var(--sotet);
  color: var(--krem);
  border-top: 2px solid var(--tinta);
  border-bottom: 2px solid var(--tinta);
}
.szallitas__belso {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2.6rem, 8vw, 4.6rem) var(--sav);
}
.szallitas__eyebrow {
  font-family: var(--display);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--papir2);
}
.szallitas__cim {
  margin-top: .8rem;
  font-size: clamp(1.9rem, 7.5vw, 3.6rem);
  max-width: 20ch;
  color: var(--krem);
}
.szallitas__szoveg {
  margin-top: 1.1rem;
  max-width: 34rem;
  color: var(--papir);
  font-size: 1.08rem;
}
.tabla {
  margin-top: 1.8rem;
  display: inline-block;
  padding: 1rem 1.4rem;
  border: 1.5px solid var(--papir2);
  border-left: 5px solid var(--pecset);
  background: rgba(242,232,213,.06);
}
.tabla__cim {
  font-family: var(--display);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--papir2);
}
.tabla__szoveg { margin-top: .35rem; color: var(--krem); }
.szallitas__kitolt {
  margin-top: 1.6rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: .84rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--papir2);
}
.szallitas__kitolt b { color: var(--krem); font-weight: 800; }
.szallitas .gomb { margin-top: 1.8rem; }

/* ---------- Nyitvatartás ---------- */
.nyitva {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(3rem, 9vw, 5.5rem) var(--sav);
}
.orarend {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(1.6rem, 5vw, 2.8rem) clamp(1.2rem, 4vw, 2.6rem);
  background: var(--karton);
  border-top: 6px double var(--tinta);
  border-bottom: 6px double var(--tinta);
}
.orarend__cim {
  text-align: center;
  font-size: clamp(1.5rem, 5.5vw, 2.4rem);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.orarend__lista {
  list-style: none;
  margin: clamp(1.4rem, 4vw, 2.2rem) 0 0;
  padding: 0;
}
.orarend__lista li {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .75rem 0;
  border-bottom: 1px solid rgba(46,36,25,.22);
}
.orarend__lista li:last-child { border-bottom: 0; }
.nap {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(.8rem, 2.9vw, .98rem);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pont {
  flex: 1 1 auto;
  min-width: 1rem;
  border-bottom: 1.5px dotted rgba(46,36,25,.55);
  transform: translateY(-.25rem);
}
.ora {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(.88rem, 3.2vw, 1.12rem);
  letter-spacing: .02em;
  white-space: nowrap;
}
.ora--kitolt { color: var(--pecset); font-size: clamp(.74rem, 2.7vw, .92rem); letter-spacing: .06em; }

/* ---------- Kapcsolat ---------- */
.kapcsolat {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--sav) clamp(3rem, 9vw, 5.5rem);
}
.kapcsolat__cim {
  font-size: clamp(1.7rem, 6vw, 2.9rem);
  text-align: center;
}
.kapcsolat__racs {
  margin-top: clamp(1.8rem, 5vw, 2.6rem);
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.tabla-link {
  display: block;
  padding: 1.3rem 1.4rem;
  background: var(--karton);
  border: 1.5px solid var(--tinta);
  box-shadow: 5px 5px 0 rgba(46,36,25,.16);
  color: var(--tinta);
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.tabla-link:hover { background: var(--pecset); color: var(--krem); box-shadow: 2px 2px 0 rgba(46,36,25,.3); }
.tabla-link__cimke {
  display: block;
  margin-top: .7rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .85;
}
.tabla-link__ertek {
  display: block;
  margin-top: .3rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1rem, 3.2vw, 1.15rem);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* ---------- Lábléc ---------- */
.lablec {
  background: var(--sotet);
  color: var(--papir);
  border-top: 2px solid var(--tinta);
}
.lablec__belso {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2.2rem, 6vw, 3.4rem) var(--sav);
}
.lablec__marka {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--krem);
}
.lablec__sor {
  margin-top: 1rem;
  max-width: 44rem;
  font-size: .88rem;
  line-height: 1.65;
  color: var(--papir);
}

/* ---------- Szignatúra-mozgás: a plakátok felragasztódnak ---------- */
.js .plakat,
.js .felragasztott {
  opacity: 0;
  transform: rotate(0deg) scale(.955) translateY(14px);
  transition: opacity .5s ease, transform .55s cubic-bezier(.2,.85,.3,1);
}
.js .plakat.rag,
.js .felragasztott.rag {
  opacity: 1;
  transform: rotate(var(--rot, 0deg)) scale(1) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .plakat,
  .js .felragasztott {
    opacity: 1;
    transform: rotate(var(--rot, 0deg));
  }
}