/* =========================================================
   Jackson a-typical — tema scuro "saloon" (stile Geronimo's)
   Usare aggiungendo class="jm-theme" al <body>.
   ========================================================= */
:root{
  --jm-bg:#0b0908; --jm-card:#15110d; --jm-card2:#1c1712; --jm-line:#2b241b;
  --jm-gold:#d6a84a; --jm-gold-d:#b68834; --jm-text:#ece5d8; --jm-mute:#b3a893; --jm-dim:#8a8070;
}

/* ---------- Sfondo con cappelli, stelle, ferri e stivali ---------- */
body.jm-theme{
  background-color:var(--jm-bg);
  background-image:url("../img/pattern-cappelli.svg");
  background-size:440px 440px;
  background-attachment:fixed;
  color:var(--jm-text);
}
.jm-theme .main-wrapper,
.jm-theme .menu-area,
.jm-theme .video-sec-area{background:transparent !important;color:var(--jm-text)}
.jm-theme .menu-area h1,.jm-theme .menu-area h2,.jm-theme .menu-area h3,
.jm-theme .video-sec-area h1{color:#fff !important}
.jm-theme .menu-area p,.jm-theme .video-sec-area p{color:var(--jm-mute)}
.jm-theme .menu-area .title h1{letter-spacing:.06em;text-transform:uppercase}

/* ---------- Menù a categorie (pillole in alto + piatti con foto a destra) ---------- */
/* la colonna non deve allargarsi per colpa della fila di categorie */
.jm-theme .menu-area [class*="col-"]{min-width:0;max-width:100%}
.jm-tabs{
  display:flex;flex-wrap:nowrap;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:4px 2px 14px;margin:0 0 26px;scroll-snap-type:x proximity;scrollbar-width:none;
}
.jm-tabs::-webkit-scrollbar{display:none}
.jm-tab{
  flex:0 0 auto;scroll-snap-align:center;cursor:pointer;white-space:nowrap;
  background:rgba(21,17,13,.9);color:#f3ede2;border:1px solid #4a3f30;border-radius:14px;
  padding:13px 22px;font:inherit;font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;
  transition:background .2s,color .2s,border-color .2s;
}
.jm-tab:hover{border-color:var(--jm-gold);color:var(--jm-gold)}
.jm-tab.active,.jm-tab[aria-selected="true"]{background:var(--jm-gold-d);border-color:var(--jm-gold-d);color:#140f08}
.jm-tab:focus-visible{outline:2px solid var(--jm-gold);outline-offset:2px}

.jm-panel{margin-bottom:30px}
.js .jm-panel{display:none}
.js .jm-panel.active{display:block}
.jm-panel-title{margin:0 0 6px;font-size:30px;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.jm-body{padding:0}

/* riga piatto: testo a sinistra, foto grande a destra */
.jm-item{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:26px;align-items:start;padding:26px 0;border-bottom:1px solid #2b241b}
.jm-item:last-child{border-bottom:none}
.jm-row{display:contents}
.jm-dots{display:none}
.jm-name{grid-column:1;order:0;font-weight:800;color:#fff;font-size:22px;line-height:1.25}
.jm-desc{grid-column:1;order:1;color:var(--jm-mute);font-size:15.5px;margin:8px 0 0;max-width:62ch}
.jm-supp{grid-column:1;order:2;color:var(--jm-gold-d);font-size:14px;font-weight:600;margin:6px 0 0}
.jm-price{grid-column:1;order:3;font-weight:800;color:var(--jm-gold);font-size:22px;margin-top:10px}
.jm-thumb{grid-column:2;grid-row:1 / span 6;width:140px;height:140px;object-fit:cover;border-radius:12px;border:1px solid var(--jm-line);align-self:center}
.jm-detail{color:var(--jm-dim);font-size:12.5px;font-weight:400;white-space:nowrap;margin-left:6px}
.jm-all{color:var(--jm-gold-d);font-size:12px;font-weight:600;letter-spacing:.02em;white-space:nowrap;margin-left:6px}
.jm-new{display:inline-block;background:var(--jm-gold-d);color:#140f08;font-size:10px;font-weight:800;letter-spacing:.06em;padding:3px 8px;border-radius:20px;vertical-align:middle;margin-left:8px}
.jm-note{background:#1f1913;border-left:3px solid var(--jm-gold-d);border-radius:0 8px 8px 0;padding:12px 16px;margin:16px 0 4px;color:var(--jm-mute);font-size:14px;line-height:1.55}
.jm-gf{--jm-gf-bg:#14211a;display:flex;align-items:center;gap:20px;background:var(--jm-gf-bg);border:1px solid #2f5a34;border-left:5px solid #5aa95a;border-radius:14px;padding:20px 26px;margin:30px 0 0;color:#a9e0a9}
.jm-gf-icon{flex:0 0 auto;width:64px;height:64px;color:#a9e0a9}
.jm-gf p{margin:0;color:#e6f5e6 !important;font-size:21px;font-weight:600;line-height:1.35}
.jm-gf strong{color:#a9e0a9;text-transform:uppercase;letter-spacing:.04em}
.jm-sub{color:var(--jm-gold);font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.05em;margin:26px 0 0}
.jm-allergeni{margin-top:40px;background:rgba(21,17,13,.94);border:1px solid var(--jm-line);border-radius:14px;padding:26px;box-shadow:0 6px 22px rgba(0,0,0,.45)}
.jm-allergeni p.jm-reg{color:var(--jm-dim);font-size:13px;margin:4px 0 14px}
.jm-allergeni ol{columns:2;column-gap:40px;padding:0;list-style:none;color:var(--jm-mute);font-size:14px;margin:0}
.jm-allergeni ol li{display:flex;align-items:baseline;gap:12px;margin-bottom:8px;break-inside:avoid;list-style:none}
.jm-allergeni ol li::marker{content:''}
.jm-n{flex:0 0 auto;min-width:26px;height:26px;line-height:26px;text-align:center;border-radius:50%;background:var(--jm-gold-d);color:#140f08;font-weight:800;font-size:12.5px}
.jm-allergeni .jm-finali{margin:16px 0 0;padding-top:12px;border-top:1px dashed #3a3125;color:var(--jm-dim);font-size:13px}

/* ---------- Pannelli laterali ("Evento del mese", ecc.) ---------- */
.jm-side{position:fixed;top:50%;z-index:990;transform:translateY(-50%)}
.jm-side--left{left:0}
.jm-side--right{right:0}
.jm-side-tab{
  display:block;border:0;cursor:pointer;background:var(--jm-gold-d);color:#140f08;
  font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  padding:22px 11px;writing-mode:vertical-rl;box-shadow:0 4px 18px rgba(0,0,0,.55);
  transition:background .2s,padding .2s;
}
.jm-side--left .jm-side-tab{border-radius:0 12px 12px 0;transform:rotate(180deg);writing-mode:vertical-rl}
.jm-side--right .jm-side-tab{border-radius:12px 0 0 12px}
.jm-side-tab:hover,.jm-side-tab:focus-visible{background:var(--jm-gold);padding-left:14px;padding-right:14px}
.jm-side-card{
  position:absolute;top:50%;width:300px;max-width:78vw;transform:translateY(-50%);
  background:var(--jm-card);border:1px solid var(--jm-gold-d);border-radius:14px;padding:22px 22px 20px;
  box-shadow:0 14px 40px rgba(0,0,0,.65);color:var(--jm-text);
}
.jm-side--left .jm-side-card{left:46px}
.jm-side--right .jm-side-card{right:46px}
.jm-side-card[hidden]{display:none}
.jm-side-kicker{margin:0 0 6px;color:var(--jm-gold);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.jm-side-card h3{margin:0 0 4px;color:#fff !important;font-size:22px;line-height:1.2}
.jm-side-date{margin:0 0 10px;color:var(--jm-gold);font-weight:700;font-size:14px}
.jm-side-text{margin:0;color:var(--jm-mute);font-size:14.5px;line-height:1.6}
.jm-side-close{position:absolute;top:8px;right:10px;background:none;border:0;color:var(--jm-dim);font-size:24px;line-height:1;cursor:pointer}
.jm-side-close:hover{color:#fff}

@media (max-width:640px){
  .jm-allergeni ol{columns:1}
  .jm-tab{padding:11px 16px;font-size:13.5px}
  .jm-panel-title{font-size:24px}
  .jm-item{column-gap:16px;padding:20px 0}
  .jm-name{font-size:18px}
  .jm-price{font-size:19px}
  .jm-thumb{width:100px;height:100px}
  .jm-gf{gap:14px;padding:16px 18px}
  .jm-gf-icon{width:46px;height:46px}
  .jm-gf p{font-size:17px}
  /* su telefono le linguette diventano pillole in basso, per non coprire il testo */
  .jm-side{top:auto;bottom:14px;transform:none}
  .jm-side--left{left:12px}
  .jm-side--right{right:12px}
  .jm-side--left .jm-side-tab,.jm-side--right .jm-side-tab{writing-mode:horizontal-tb;transform:none;border-radius:999px;padding:11px 18px;font-size:11.5px}
  .jm-side-card{top:auto;bottom:50px;transform:none;width:280px;max-width:calc(100vw - 24px)}
  .jm-side--left .jm-side-card{left:0;right:auto}
  .jm-side--right .jm-side-card{right:0;left:auto}
}
@media (prefers-reduced-motion:reduce){
  .jm-tab,.jm-side-tab{transition:none}
}


/* ---------- Font dei titoli (simile al logo Jackson) — solo titoli, non i piatti ---------- */
@font-face{
  font-family:"Federo";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/Federo-Latin.woff2") format("woff2");
}
.jm-theme .generic-banner-content h2,
.jm-theme .menu-area .title h1,
.jm-theme .video-sec-area h1,
.jm-panel-title,
.jm-allergeni h3,
.jm-side-card h3{
  font-family:"Federo","Poppins",sans-serif !important;
  font-weight:400 !important;
  letter-spacing:.06em;
  text-transform:uppercase;
  -webkit-text-stroke:.7px currentColor;
}
.jm-theme .generic-banner-content h2{font-size:clamp(34px,5vw,58px);letter-spacing:.08em}
.jm-theme .menu-area .title h1{font-size:clamp(30px,4.4vw,50px)}

/* ---------- Foto di apertura "Chi siamo" (sfuma nel nero, niente bordo strappato) ---------- */
.jm-theme .generic-banner::before,
.jm-theme .generic-banner::after{display:none !important;content:none !important}
.jm-theme .generic-banner{
  background-color:var(--jm-bg) !important;
  background-image:
    linear-gradient(to bottom,rgba(11,9,8,0) 0%,rgba(11,9,8,0) 45%,rgba(11,9,8,.55) 70%,rgba(11,9,8,.92) 90%,#0b0908 100%),
    linear-gradient(rgba(0,0,0,.42),rgba(0,0,0,.42)),
    url("../img/hero-chi-siamo.jpg") !important;
  background-size:cover !important;
  background-position:50% 27% !important;
  background-repeat:no-repeat !important;
}
@media (max-width:640px){
  .jm-theme .generic-banner{background-position:50% 40% !important}
}


/* ---------- Evento del mese (tra la foto di apertura e il menù) ---------- */
.jm-evento{position:relative;z-index:3;padding:0 0 10px;margin-top:-40px}
.jm-evento-card{max-width:760px;margin:0 auto;text-align:center;background:rgba(21,17,13,.94);border:1px solid var(--jm-gold-d);border-radius:18px;padding:34px 30px 32px;box-shadow:0 18px 50px rgba(0,0,0,.55)}
.jm-evento-kicker{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 12px;color:var(--jm-gold);font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase}
.jm-evento-kicker::before,.jm-evento-kicker::after{content:"";width:36px;height:1px;background:var(--jm-gold-d)}
.jm-evento-titolo{margin:0 0 8px;color:#fff !important;font-family:"Federo","Poppins",sans-serif !important;font-weight:400 !important;font-size:clamp(28px,4vw,42px);letter-spacing:.06em;text-transform:uppercase;-webkit-text-stroke:.6px currentColor;line-height:1.15}
.jm-evento-data{margin:0 0 14px;color:var(--jm-gold);font-weight:700;font-size:16px;letter-spacing:.04em}
.jm-evento-testo{margin:0 auto;max-width:58ch;color:var(--jm-mute) !important;font-size:16px;line-height:1.65}
.jm-evento-btn{display:inline-block;margin-top:24px;background:var(--jm-gold-d);color:#140f08 !important;border-radius:999px;padding:15px 36px;font-weight:800;font-size:15px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none !important;box-shadow:0 8px 22px rgba(182,136,52,.25);transition:background .2s,transform .2s}
.jm-evento-btn:hover,.jm-evento-btn:focus-visible{background:var(--jm-gold);transform:translateY(-1px);outline:none}
.jm-theme .jm-evento + .main-wrapper .menu-area.section-gap{padding-top:70px}

/* finestra di prenotazione */
.jm-book{width:min(680px,94vw);height:min(86vh,860px);max-width:none;max-height:none;padding:0;border:1px solid var(--jm-gold-d);border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.7)}
.jm-book[open]{display:flex;flex-direction:column}
.jm-book::backdrop{background:rgba(0,0,0,.72)}
.jm-book-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 12px 20px;background:#15110d;color:#fff}
.jm-book-title{margin:0;color:#fff !important;font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:13px}
.jm-book-close{background:none;border:0;color:#d6cdbd;font-size:30px;line-height:1;cursor:pointer;padding:0 6px}
.jm-book-close:hover{color:#fff}
.jm-book-frame{flex:1;width:100%;border:0;background:#fff}
.jm-book-alt{margin:0;padding:9px 14px;background:#15110d;color:#b3a893 !important;font-size:12.5px;text-align:center}
.jm-book-alt a{color:var(--jm-gold)}

/* ---------- Foto in fondo alla pagina (birra alla spina), bordi sfumati nel nero ---------- */
.jm-theme .video-sec-area::before,
.jm-theme .video-sec-area::after{display:none !important;content:none !important}
.jm-theme .video-sec-area{
  position:relative;overflow:hidden;
  min-height:680px;display:flex;align-items:center;
  background:transparent none !important;
  padding-bottom:100px !important;
}
.jm-birra{
  position:absolute;top:0;bottom:0;right:0;z-index:0;width:min(62%,900px);
  background:url("../img/birra-jackson.jpg") center 55%/cover no-repeat;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 45%),linear-gradient(to bottom,transparent 0%,#000 18%,#000 80%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0%,#000 45%),linear-gradient(to bottom,transparent 0%,#000 18%,#000 80%,transparent 100%);
  mask-composite:intersect;
  opacity:.85;
}
.jm-theme .video-sec-area > .container{position:relative;z-index:1;width:100%;box-sizing:border-box}
.jm-theme .video-sec-area .video-left h1{color:#fff !important}
.jm-theme .video-sec-area .video-left p{color:#ece5d8 !important;text-shadow:0 1px 10px rgba(0,0,0,.85)}
.jm-theme .video-sec-area .video-left{background:rgba(11,9,8,.6);border-radius:14px;padding:26px 28px}

@media (max-width:640px){
  .jm-evento{margin-top:-24px}
  .jm-evento-card{padding:26px 18px 24px;border-radius:14px}
  .jm-evento-btn{display:block;margin-top:20px;padding:15px 20px}
  .jm-book{width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:0}
  .jm-theme .video-sec-area{min-height:0;display:block}
  .jm-birra{width:100%;opacity:.55;background-position:center 50%}
  .jm-theme .video-sec-area .video-left{margin-top:24px;padding:20px}
}