/* =========================================================
   Menu page — 15 JS-rendered categories / ~150+ items (see
   js/menu-data.js, js/menu-render.js, js/menu-page-init.js —
   logic untouched, this file only restyles the markup they
   produce). Reuses css/style.css for :root tokens, .section__
   eyebrow/.section__title and the shared footer, same as
   contact.css.

   Greek text (category labels, most item names/ingredients)
   uses var(--greek) throughout, never var(--latin) — Anton has
   no Greek glyph subset (see the fix notes in style.css). Anton
   is used only for genuinely Latin/numeric content: prices
   (digits + € + comma, all in Anton's latin subset) and the
   VEGAN badge.
   ========================================================= */

.menu-page-header{
  padding: calc(var(--nav-height) + 3.5rem) 1.5rem 2rem;
  text-align: center;
}
.menu-page-header .section__title{ margin: 0 auto .5rem; }
/* κλάση, όχι γενικό "p" — ίδιο bug/fix με το contact.css: bare "p" selector
   έπιανε και το <p class="section__eyebrow"> και το παρέκαμπτε. */
.menu-page-header__lede{
  margin: 0 auto; max-width: 44ch;
  font-family: var(--greek); font-weight: 500; font-size: 1.02rem; color: var(--ink);
}

/* Banner προς τη σελίδα προσφορών. Κάθεται εκεί που ήταν η πρώτη κατηγορία
   του μενού («Προσφορά 7,99€», που μεταφέρθηκε στο prosfores.html), οπότε
   πρέπει να τραβά το μάτι όσο τραβούσε κι εκείνη: γεμάτο κόκκινο, όχι
   διακριτικό pill. Ολόκληρο είναι ένας σύνδεσμος — το «Δες τη λίστα» είναι
   ένδειξη, όχι ξεχωριστός στόχος, οπότε δεν φωλιάζει δεύτερο <a> μέσα. */
.menu-offer-banner{
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
  /* width/max-width μείον 3rem, όχι σκέτο max-width: 85rem — το .menu-layout
     από κάτω κρατά τα ίδια 85rem αλλά με padding: 0 1.5rem εσωτερικά, οπότε
     το πραγματικό του περιεχόμενο ξεκινά 1.5rem πιο μέσα. Χωρίς την αφαίρεση
     το banner ακουμπούσε τις άκρες της οθόνης ενώ τα tabs από κάτω όχι. */
  width: calc(100% - 3rem); max-width: calc(85rem - 3rem);
  margin: 0 auto 2.5rem;
  padding: 1.35rem 1.75rem;
  border-radius: 1rem;
  background: var(--red); color: var(--white); text-decoration: none;
  transition: background .18s ease;
}
.menu-offer-banner:hover, .menu-offer-banner:focus-visible{ background: var(--red-ink); }
.menu-offer-banner__text{ display: flex; flex-direction: column; gap: .2rem; }
.menu-offer-banner__kicker{
  font-family: var(--greek); font-weight: 800; font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase; opacity: .9;
}
.menu-offer-banner__title{
  font-family: var(--greek); font-weight: 800; font-size: clamp(1.25rem, 3.5vw, 1.7rem);
  line-height: 1.15;
}
.menu-offer-banner__cta{
  font-family: var(--display); font-weight: 800; font-size: .95rem;
  letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.menu-offer-banner__cta i{ font-style: normal; display: inline-block; transition: transform .2s ease; }
.menu-offer-banner:hover .menu-offer-banner__cta i{ transform: translateX(.25em); }

.menu-layout{
  display: flex; align-items: flex-start; gap: 2rem;
  max-width: 85rem; margin: 0 auto;
  padding: 0 1.5rem;
}

.menu-tabs{
  display: flex; flex-direction: column; gap: .4rem;
  flex: 0 0 auto; width: 14rem;
  position: sticky; top: calc(var(--nav-height) + 1.5rem);
}
.menu-tabs a{
  display: block; padding: .55rem 1rem; border-radius: .5rem;
  background: var(--beige); color: var(--ink);
  font-family: var(--greek); font-weight: 700; font-size: .85rem;
  letter-spacing: .02em; text-decoration: none; text-align: left;
  transition: background .18s ease, color .18s ease;
}
.menu-tabs a:hover, .menu-tabs a:focus-visible, .menu-tabs a.is-active{
  background: var(--red); color: var(--white);
}

#menu-categories{ flex: 1 1 auto; min-width: 0; }

.menu-category{ padding: 3.5rem 0 0; scroll-margin-top: var(--nav-height); }
.menu-category:first-child{ padding-top: 0; }

/* var(--display) — ανάλογο του .section__title, ελληνικοί
   τίτλοι σε κεφαλαία. font-weight ρητό, γιατί από τη Roboto Condensed
   φορτώνουμε μόνο 700/800 — βλ. --display στο style.css. Το h2
   παίρνει ήδη bold από το user-agent stylesheet. */
.menu-category__title{
  margin: 0 0 1.5rem;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 1.6rem; color: var(--ink);
  padding-bottom: .75rem; border-bottom: 1px solid var(--rule);
}

.menu-category__grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
  padding-bottom: 1rem;
}

.pizza-card{
  background: var(--beige);
  border-top: 4px solid var(--red);
  border-radius: .6rem;
  padding: 1.25rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.pizza-card__badges{ display: flex; gap: .4rem; }
.badge{
  display: inline-flex; align-items: center;
  padding: .25rem .8rem; border-radius: 999px;
  font-family: var(--latin); font-size: .68rem;
  letter-spacing: .06em; text-transform: uppercase;
}
/* #4b7b3f: μοναδική χρήση εκτός παλέτας, μόνο εδώ — σηματοδοτεί "vegan"
   σημασιολογικά, το πράσινο δεν έχει νόημα να μπει στο μοιρασμένο :root. */
.badge--vegan{ background: #4b7b3f; color: var(--white); }

.pizza-card__name{
  margin: 0;
  font-family: var(--greek); font-weight: 700; font-size: 1.05rem; color: var(--ink);
}
/* Κάθεται κολλητά κάτω από το όνομα (αρνητικό margin ακυρώνει το gap .5rem
   της κάρτας κατά το ήμισυ), σε κόκκινο ώστε να διαβάζεται ως ετικέτα του
   πιάτου και όχι ως πρώτο υλικό. */
.pizza-card__subtitle{
  margin: -.3rem 0 0;
  font-family: var(--greek); font-weight: 700; font-size: .78rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--red);
}
.pizza-card__ingredients{
  margin: 0; flex: 1 1 auto;
  font-family: var(--greek); font-weight: 500; font-size: .9rem; line-height: 1.45;
  color: #6b5f4f;
}
.pizza-card__price{
  font-family: var(--latin); font-size: 1.1rem; letter-spacing: .01em; color: var(--red);
}

.menu-notes{
  max-width: 85rem; margin: 0 auto; padding: 1rem 1.5rem 5rem; text-align: center;
}
.menu-notes p{
  margin: 0 0 .3rem;
  font-family: var(--greek); font-weight: 500; font-size: .85rem; color: #6b5f4f;
}
/* Η δήλωση αλλεργιογόνων, αυτολεξεί από τον τυπωμένο κατάλογο (οδηγία του
   συμβούλου του πελάτη, 2026-09-16). Πρέπει να ΔΙΑΒΑΖΕΤΑΙ, όχι απλώς να
   υπάρχει: πλήρες ink αντί για το ξεθωριασμένο #6b5f4f των υπόλοιπων
   σημειώσεων, μετρημένο πλάτος γραμμής και λίγο αέρας γύρω της. Ο επιλογέας
   είναι (0,2,0) επίτηδες, για να κερδίζει το `.menu-notes p` (0,1,1) πιο πάνω. */
.menu-notes .menu-notes__allergens{
  max-width: 62ch; margin: .75rem auto 1rem;
  color: var(--ink); line-height: 1.55;
}

@media (max-width: 768px){
  .menu-category__grid{ grid-template-columns: 1fr; }

  /* Σε αυτό το breakpoint το .menu-layout χάνει το padding του και το
     κρατούν οι ίδιες οι .menu-category (1.1rem), οπότε το banner
     ευθυγραμμίζεται σε αυτό αντί για τα 1.5rem του desktop. */
  .menu-offer-banner{
    width: auto; max-width: none;
    margin: 0 1.1rem 2rem; padding: 1.15rem 1.35rem; border-radius: .75rem;
  }

  .menu-layout{ flex-direction: column; padding: 0; }

  .menu-tabs{
    flex-direction: row; flex-wrap: nowrap; width: 100%; min-width: 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    position: sticky; top: var(--nav-height); z-index: 5;
    background: var(--cream); border-bottom: 1px solid var(--rule);
    padding: .85rem 1.1rem; gap: .5rem;
  }
  .menu-tabs::-webkit-scrollbar{ display: none; }
  .menu-tabs a{ flex: 0 0 auto; white-space: nowrap; }

  .menu-category{ padding: 2.5rem 1.1rem 0; }
  .menu-category:first-child{ padding-top: 2.5rem; }
}

@media (max-width: 480px){
  .menu-page-header{ padding-top: calc(var(--nav-height) + 2.5rem); }
}