:root{
    --bordeaux: #7a1220;
    --bordeaux-deep: #5c0d18;
    --crimson: #d6291f;
    --gold: #e8a93a;
    --gold-soft: #f0c674;
    --cream: #f7ecd9;
    --cream-2: #fbf5e9;
    --ink: #2b1710;
    --ink-soft: #5a3a2e;
    --off-white: #fbf3e4;
    --radius-soft: 6px;
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
    *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  }

  body{
    margin:0;
    font-family: 'Karla', sans-serif;
    color: var(--ink);
    background: var(--cream);
    line-height: 1.55;
  }

  h1,h2,h3{
    font-family: 'Baloo 2', sans-serif;
    margin: 0;
    line-height: 1.08;
  }

  a{ color: inherit; }
  img{ max-width: 100%; display:block; }

  .container{
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 28px;
  }

  a:focus-visible, button:focus-visible{
    outline: 3px solid var(--gold);
    outline-offset: 3px;
  }

  header{
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--cream-2);
    border-bottom: 3px solid var(--bordeaux);
  }
  .nav{
    display:flex;
    align-items:center;
    justify-content: space-between;
    padding: 10px 28px;
    max-width: 1120px;
    margin: 0 auto;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
  }
  .brand img{ height: 56px; width:auto; }
  .brand span{
    font-family:'Baloo 2', sans-serif;
    font-weight:800;
    font-size: 1.25rem;
    color: var(--bordeaux);
    letter-spacing: 0.2px;
  }
  nav.links{
    display:flex;
    align-items:center;
    gap: 28px;
  }
  nav.links a{
    text-decoration:none;
    font-weight:600;
    color: var(--ink);
    font-size: 0.98rem;
    padding: 6px 2px;
    border-bottom: 2px solid transparent;
    transition: border-color .15s ease, color .15s ease;
  }
  nav.links a:hover{ border-color: var(--gold); color: var(--bordeaux); }

  .btn{
    display:inline-block;
    font-family:'Karla', sans-serif;
    font-weight:700;
    text-decoration:none;
    padding: 12px 26px;
    border-radius: 999px;
    border: 2px solid transparent;
    cursor:pointer;
    font-size: 0.98rem;
  }
  .btn-primary{
    background: var(--crimson);
    color: var(--off-white);
    box-shadow: 0 3px 0 var(--bordeaux-deep);
  }
  .btn-primary:hover{ background: #c0221a; }
  .btn-primary:active{ transform: translateY(2px); box-shadow: 0 1px 0 var(--bordeaux-deep); }
  .btn-ghost{
    background: transparent;
    color: var(--cream);
    border-color: var(--cream);
  }
  .btn-ghost:hover{ background: rgba(255,255,255,0.12); }

  .menu-toggle{ display:none; }


  .hero{
    position:relative;
    overflow:hidden;
    background-color: var(--bordeaux);
    background-image:
      radial-gradient(circle at 74% 38%, rgba(232,169,58,0.30), transparent 55%),
      repeating-conic-gradient(from 6deg at 74% 38%, #7a1220 0deg 9deg, #8a1626 9deg 18deg);
    color: var(--cream);
    padding: 76px 0 96px;
  }
  .hero .container{
    display:grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 32px;
    align-items:center;
  }
  .hero h1{
    font-size: clamp(2.4rem, 4.6vw, 3.4rem);
    color: var(--off-white);
  }
  .hero .kicker{
    font-family:'Baloo 2', sans-serif;
    font-weight:700;
    color: var(--gold-soft);
    font-size: 1.05rem;
    margin-bottom: 10px;
  }
  .hero p.lead{
    margin-top: 18px;
    font-size: 1.12rem;
    max-width: 46ch;
    color: rgba(251,243,228,0.92);
  }
  .hero-actions{
    display:flex;
    gap:14px;
    margin-top: 30px;
    flex-wrap: wrap;
  }
  .hero-art{
    position:relative;
    display:flex;
    justify-content:center;
  }
  .hero-art img{
    width: min(420px, 100%);
    transform: rotate(-3deg);
    filter: drop-shadow(0 18px 30px rgba(0,0,0,0.35));
  }

  .ribbon-wrap{
    display:flex;
    justify-content:center;
    margin: 0 0 46px;
  }
  .ribbon{
    position:relative;
    background: var(--crimson);
    color: var(--off-white);
    font-family:'Baloo 2', sans-serif;
    font-weight:700;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    padding: 14px 46px;
    clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
    box-shadow: 0 3px 0 var(--bordeaux-deep);
  }

  section{ padding: 84px 0; }
  .section-cream{ background: var(--cream); }
  .section-bordeaux{
    background: var(--bordeaux-deep);
    color: var(--off-white);
  }

  .story{
    display:grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 56px;
    align-items:center;
  }
  .story-badge{
    justify-self: center;
    width: 100%;
    max-width: 340px;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
      radial-gradient(circle at 50% 50%, var(--gold-soft) 0%, var(--gold) 55%, var(--bordeaux) 56%, var(--bordeaux) 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow: 0 12px 0 rgba(0,0,0,0.08);
  }
  .story-badge img{ width: 70%; }
  .story h2{
    font-size: 2rem;
    color: var(--bordeaux);
    margin-bottom: 18px;
  }
  .story p{ max-width: 56ch; color: var(--ink-soft); font-size: 1.05rem; }
  .story p + p{ margin-top: 14px; }

  .menu-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
  .menu-group h3{
    font-size: 1.35rem;
    color: var(--gold-soft);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(232,169,58,0.4);
  }
  .menu-item{
    display:flex;
    align-items: baseline;
    gap: 10px;
    padding: 11px 0;
  }
  .menu-item .name{ font-weight:600; }
  .menu-item .leader{
    flex:1;
    border-bottom: 2px dotted rgba(251,243,228,0.35);
    transform: translateY(-4px);
  }
  .menu-item .price{
    font-family:'Baloo 2', sans-serif;
    color: var(--gold-soft);
    font-weight: 700;
    white-space: nowrap;
  }
  .menu-note{
    margin-top: 40px;
    font-size: 0.92rem;
    color: rgba(251,243,228,0.65);
    text-align:center;
  }

  .location{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items:start;
  }
  .hours-table{
    width:100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 1.02rem;
  }
  .hours-table td{ padding: 9px 0; border-bottom: 1px solid rgba(43,23,16,0.12); }
  .hours-table td:last-child{ text-align:right; font-weight:700; color: var(--bordeaux); }
  .addr{
    font-size: 1.15rem;
    font-weight:700;
    color: var(--bordeaux);
    margin-top: 6px;
  }
  .map-frame{
    border-radius: var(--radius-soft);
    overflow:hidden;
    border: 3px solid var(--bordeaux);
    aspect-ratio: 4/3;
  }
  .map-frame iframe{ width:100%; height:100%; border:0; }

  .contact-row{
    display:flex;
    gap: 28px;
    flex-wrap: wrap;
    margin-top: 22px;
  }
  .contact-item{ display:flex; align-items:center; gap:10px; font-weight:600; }
  .contact-item svg{ flex-shrink:0; }

  footer{
    background: var(--bordeaux);
    color: rgba(251,243,228,0.75);
    padding: 34px 0;
    font-size: 0.92rem;
  }
  footer .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap: wrap;
    gap: 14px;
  }
  footer a{ color: var(--gold-soft); text-decoration:none; font-weight:600; }

  @media (max-width: 860px){
    nav.links{
      position:fixed;
      inset: 76px 0 auto 0;
      background: var(--cream-2);
      flex-direction:column;
      align-items:flex-start;
      padding: 18px 28px 22px;
      border-bottom: 3px solid var(--bordeaux);
      display:none;
      gap: 4px;
    }
    nav.links.open{ display:flex; }
    nav.links a{ width:100%; padding: 10px 0; }
    .menu-toggle{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:none;
      border: 2px solid var(--bordeaux);
      border-radius: 8px;
      width: 42px; height: 42px;
      cursor:pointer;
    }
    .hero .container, .story, .location, .menu-grid{
      grid-template-columns: 1fr;
    }
    .hero-art{ order: -1; }
    .hero-art img{ width: min(280px, 70%); margin: 0 auto; }
    .story-badge{ max-width: 240px; }
    section{ padding: 58px 0; }
  }
.allergia{
  text-align: center;
}

/* ===== Lenyíló szekciók ===== */
.dropdown summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
}
.dropdown summary::-webkit-details-marker{ display: none; }
.dropdown .ribbon{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  transition: background .15s ease;
}
.dropdown summary:hover .ribbon{ background: #c0221a; }
.dropdown .ribbon::after{
  content: "▾";
  font-size: 0.9em;
  transition: transform .25s ease;
}
.dropdown.expanded .ribbon::after{ transform: rotate(180deg); }
.dropdown summary:focus-visible{ outline: 3px solid var(--gold); outline-offset: 6px; }
.dropdown .menu-grid{ margin-top: 46px; }

.menu-item.sub{ padding-left: 18px; font-size: 0.95rem; opacity: .9; }
section[id]{ scroll-margin-top: 80px; }
.allergia{ text-align: center; }

/* Animált lenyílás */
.dropdown .menu-grid{ will-change: height, opacity; }

/* Egyoszlopos lenyíló (Waffel) */
.menu-grid.single{
  grid-template-columns: 1fr;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* Kisebb hely a lenyíló szekciók között */
.dd-section{ padding: 14px 0; }
#etlap.dd-section{ padding-top: 56px; }
#uditok.dd-section{ padding-bottom: 56px; }
.dropdown .menu-grid{ padding-bottom: 28px; }
.dd-section .ribbon-wrap{ margin: 0; }
@media (max-width: 860px){
  .dd-section{ padding: 10px 0; }
  #etlap.dd-section{ padding-top: 40px; }
  #uditok.dd-section{ padding-bottom: 40px; }
}

/* Menü: 2x2-es rács, a szakaszcímek soronként egy vonalban */
.menu-grid.aligned{ row-gap: 36px; }

/* ===== Egységes ételsorok ===== */
.menu-item{ padding: 12px 0; }
.menu-item .name{ font-weight: 700; letter-spacing: .3px; }
.menu-item.has-desc{ flex-wrap: wrap; row-gap: 3px; }
.menu-item .desc{
  flex: 0 0 100%;
  font-size: .86rem;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(251,243,228,.7);
}
.menu-group h3:not(:first-child){ margin-top: 30px; }

/* "Rakd magad" feltétek */
.menu-item.sub{
  padding: 8px 0 8px 16px;
  margin-left: 4px;
  border-left: 2px solid rgba(232,169,58,.45);
  font-size: .95rem;
  opacity: 1;
}
.menu-item.sub .name{ font-weight: 600; }