/* =========================================================
   Bdumpa PUB - Menu
   Elegante, mobile-first, NO scroll chips, sticky index,
   hero categorie (foto o placeholder compatto), bundle coerenti
========================================================= */

/* =========================
   Tokens
========================= */
:root{
  /* palette chiara/pastello */
  --bg: #0f1626;
  --bg2:#0b1220;
  --card:#111a2b;
  --card2:#0e1626;

  --text:#eef2ff;
  --muted: rgba(238,242,255,.72);
  --line: rgba(238,242,255,.12);
  --shadow: 0 18px 55px rgba(0,0,0,.45);

  /* accenti UI */
  --brand: #a855f7;   /* viola */
  --brand2:#0284c7;   /* azzurro scuro */
  --ok:#15803d;       /* verde scuro */

  /* giallo/nero (titoli overlay) */
  --yb-yellow: #f5c542;
  --yb-black:  #0b0f14;

  --radius: 18px;
  --radius2: 14px;
  --max: 980px;
}

/* =========================
   Base
========================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 18% -10%, rgba(168,85,247,.18), transparent 60%),
    radial-gradient(900px 600px at 92% 10%, rgba(2,132,199,.14), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px 14px 34px;
}

/* =========================
   Top logo + header
========================= */
.menuLogoTop{
  display:flex;
  justify-content:center;
  padding: 6px 0 10px;
}
.menuLogoTop img{
  width: min(760px, 92vw);
  height: auto;
  display:block;
}

.Title{
  margin:0;
  font-size: clamp(34px, 6vw, 60px);
  font-weight: 1000;
  letter-spacing: .2px;
  line-height: 1.05;
}
.subTitle{
  margin:6px 0 0 0;
  font-size: 13px;
  font-weight: 950;
  color: var(--muted);
  letter-spacing: .6px;
  text-transform: uppercase;
}
.subTitle2{
  margin:3px 0 0 0;
  font-size: 13px;
  font-weight: 850;
  color: var(--muted);
}

/* (facoltativo: se lo rimetti in pagina) */
.separatore{
  display:block;
  width: 100%;
  max-width: 520px;
  margin: 14px auto 0;
  opacity: .9;
}

/* =========================
   Sticky index (chips)
========================= */
.menuNavSticky{
  position: sticky;
  top: calc(10px + env(safe-area-inset-top));
  z-index: 50;
  margin-top: 12px;
}
.menuNavStickyInner{
  border-radius: var(--radius);
  background: rgba(17,26,43,.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  padding: 10px;
}

/* Griglia chips (NO scroll orizzontale) */
.menuNav{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 980px){ .menuNav{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px){ .menuNav{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 360px){ .menuNav{ grid-template-columns: 1fr; } }

.navChip{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding: 10px 12px;
  border-radius: 16px;

  /* stile "titolo overlay" */
  border: 1px solid rgba(245,197,66,.38);

  color: var(--yb-yellow);
  text-decoration:none;

  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .45px;
  text-transform: uppercase;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  transition: transform .08s ease, filter .18s ease, border-color .18s ease;
}
.navChip:hover{
  border-color: rgba(245,197,66,.62);
  filter: brightness(1.06);
}
.navChip:active{
  transform: scale(1.10);
}

/* focus accessibile */
.navChip:focus-visible{
  outline: 3px solid rgba(245,197,66,.35);
  outline-offset: 2px;
}

/* offset quando clicchi un anchor */
.menuSection{
  scroll-margin-top: 110px;
}
@media (min-width: 981px){
  .menuNavSticky{ top: 14px; }
  .menuSection{ scroll-margin-top: 90px; }
}

/* =========================
   Sections (cards)
========================= */
.menuSection{
  margin-top: 14px;
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--card), var(--card2));
  box-shadow: var(--shadow);
  overflow:hidden;
}

/* =========================
   Category hero (foto o placeholder)
========================= */
.menuCatHero{
  position: relative;
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

/* Hero con foto */
.menuCatHeroImg{
  display:block;
  width:100%;
  height: clamp(170px, 28vw, 320px);
  object-fit: cover;
  object-position: center;
  filter: saturate(1.02) contrast(1.02);
}

/* Hero placeholder (senza foto / bundle) -> COMPATTO ~80px */
.menuCatHeroPh{
  width:100%;
  height: 80px;
  position: relative;
  background:
      radial-gradient(700px 240px at 18% -30%, rgba(168,85,247,.22), transparent 60%),
      radial-gradient(700px 240px at 92% -10%, rgba(2,132,199,.18), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}

/* linea decorativa giallo/nero nel placeholder */
.menuCatHeroPh::before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--yb-yellow), var(--yb-black), var(--yb-yellow));
  opacity: .9;
}

/* overlay leggibilità (foto o placeholder) */
.menuCatHero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.38) 0%,
    rgba(0,0,0,.18) 45%,
    rgba(0,0,0,.55) 100%
  );
  pointer-events:none;
}

/* Titolo overlay (giallo su nero) */
.menuCatHeroTitle{
  position:absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 2;

  max-width: min(92%, 760px);
  padding: 10px 14px;

  background: rgba(0,0,0,.78);
  border: 1px solid rgba(245,197,66,.35);
  border-radius: 16px;

  color: var(--yb-yellow);
  font-weight: 1100;
  letter-spacing: .4px;
  text-transform: uppercase;
  text-align: center;

  font-size: clamp(18px, 3.2vw, 28px);
  line-height: 1.1;

  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}

/* Quando l'hero è compatto: titolo centrato verticalmente */
.menuCatHero.is-compact .menuCatHeroTitle{
  bottom: auto;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* La sezione usa sempre hero, quindi l'head testuale non serve */
.menuSection.withHero .menuSectionHead{ display:none; }

/* =========================
   Menu list
========================= */
.divContMenu{ padding: 10px 14px 14px; }
.menuList{ display:flex; flex-direction:column; gap: 10px; }

.menuItem{
  padding: 12px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius2);
  background: rgba(255,255,255,.03);
}

.menuLine{
  display:flex;
  align-items:baseline;
  gap:10px;
}

.menuName{
  font-size: 16px;
  font-weight: 1000;
  letter-spacing: .1px;
}

.asterisco{
  color: var(--brand);
  font-weight: 1100;
  margin-left: 4px;
}

/* linea puntinata */
.menuDots{
  flex: 1 1 auto;
  border-bottom-color: rgba(238,242,255,.22);
  opacity: .85;
  transform: translateY(-3px);
}

/* prezzo */
.prezzo{
  font-size: 16px;
  font-weight: 1100;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
  color: var(--text);
}
.menuDesc{
  margin-top: 7px;
  font-size: 13px;
  font-weight: 850;
  color: var(--muted);
  line-height: 1.35;
}

/* =========================
   Bundles
========================= */
.bundleGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
}
@media (max-width: 720px){
  .bundleGrid{ grid-template-columns: 1fr; }
}

.bundleCard{
  border: 1px solid rgba(168,85,247,.22);
  border-radius: var(--radius2);
  background: rgba(168,85,247,.06);
  padding: 12px 12px;
}

.bundleTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}

.bundleName{
  font-size: 16px;
  font-weight: 1000;
  letter-spacing: .1px;
}

.bundlePrice{
  font-weight: 1200;
  font-size: 16px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.bundleSub{
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

.bundleIncludes{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.bundlePill{
  border: 1px solid rgba(2,132,199,.25);
  background: rgba(2,132,199,.10);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 1000;
}

.bundleDetails{
  margin-top: 10px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.bundleDetails summary{
  cursor:pointer;
  list-style:none;
  font-weight: 950;
  font-size: 13px;
  color: var(--muted);
}
.bundleDetails summary::-webkit-details-marker{ display:none; }

.bundleOptGroup{
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: rgba(255,255,255,.03);
}

.bundleOptTitle{
  font-weight: 1100;
  font-size: 16px;
  margin-bottom: 8px;
}

.bundleOptList{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

.bundleOpt{
  border: 1px solid rgba(21,128,61,.25);
  background: rgba(21,128,61,.10);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
}