/* GENERATO da _BUILD/converti-tema.mjs (dalla sezione TENDINA di 1-SITO-PRINCIPALE/sorgente/style.css): non modificare a mano */
/* ============ TENDINA (settembre 2026) ============
   Menu a pannello unico sotto la barra: Catering (le cinque occasioni con una
   foto), Pasticceria (i nove reparti), Locali (i sei indirizzi). Solo schermi
   larghi (>900px); sul telefono resta il drawer.
   Markup: _BUILD/effetti-2026-09/tendina-applica.py · movimento: assets/js/tendina.js
   Senza JavaScript pulsanti e pannelli restano [hidden] e valgono i link.
   Più in fondo: il contorno di fuoco da tastiera dei comandi della barra. */

/* [hidden] deve battere i display di questo blocco */
.rs-mnav-btn[hidden], .rs-mnav-viewport[hidden], .rs-mnav-pannello[hidden]{ display:none; }

/* ---------- 1. la freccina accanto alla voce ---------- */
header#hdr nav.rs-mnav-vivo{ --rs-mnav-gap:30px; position:relative; gap:var(--rs-mnav-gap); }
/* 6 voci + 3 freccine + lingua + carrello: sotto i 1200px la barra si stringe, cosi' il
   marchio non viene schiacciato piu' di prima (misurato: a 1024px la barra resta
   larga quanto quella senza freccine, a 960px un po' meno) */
@media (min-width:901px) and (max-width:1200px){ header#hdr nav.rs-mnav-vivo{ --rs-mnav-gap:22px; } }
@media (min-width:901px) and (max-width:1100px){ header#hdr nav.rs-mnav-vivo{ --rs-mnav-gap:18px; } }
@media (min-width:901px) and (max-width:1000px){ header#hdr nav.rs-mnav-vivo{ --rs-mnav-gap:14px; } }
@media (min-width:901px) and (max-width:1180px){
  header#hdr, header#hdr.solid{ padding-left:24px; padding-right:24px; }
  header#hdr .brand{ flex-shrink:0; }
  header#hdr nav a.navlink{ font-size:11.5px; letter-spacing:.08em; }
  header#hdr nav .rs-langsel-btn{ padding:5px 9px; gap:5px; }
  header#hdr nav .rs-langsel-btn .nm{ display:none; } /* il nome resta nel menu e nell'etichetta */
}
@media (min-width:901px) and (max-width:1000px){ header#hdr nav.rs-mnav-vivo{ --rs-mnav-gap:12px; } }
.rs-mnav-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:24px; padding:0; margin-left:calc(4px - var(--rs-mnav-gap,30px));
  background:none; border:0; border-radius:4px; color:var(--ink); opacity:.7; cursor:pointer;
  transition:opacity .2s ease, color .2s ease; }
.rs-mnav-btn::before{ content:""; position:absolute; inset:-4px -6px; }   /* bersaglio di 32px */
.rs-mnav-btn .chev{ display:block; transition:transform .24s cubic-bezier(.22,.61,.36,1); }
.rs-mnav-btn:hover, .rs-mnav-btn[aria-expanded="true"]{ opacity:1; color:var(--brand); }
.rs-mnav-btn[aria-expanded="true"] .chev{ transform:rotate(180deg); }
header#hdr.accent .rs-mnav-btn{ width:22px; height:22px; color:#fff; opacity:1; background:rgba(20,14,10,.2); border-radius:50%; }
header#hdr.accent .rs-mnav-btn:hover,
header#hdr.accent .rs-mnav-btn[aria-expanded="true"]{ color:#fff; opacity:1; }

/* ---------- 2. il filo che segue le voci (sostituisce navlink::after) ---------- */
header#hdr nav.rs-mnav-vivo a.navlink::after{ display:none; }
.rs-mnav-indicatore{ position:absolute; left:0; top:0; width:100px; height:1px; background:var(--brand);
  transform-origin:0 0; transform:translate3d(0,0,0) scaleX(0); opacity:0; pointer-events:none;
  transition:transform .32s cubic-bezier(.22,.61,.36,1), opacity .2s ease; }
.rs-mnav-indicatore.is-visibile{ opacity:1; }
.rs-mnav-indicatore.is-salto{ transition:opacity .2s ease; }
header#hdr.accent .rs-mnav-indicatore{ background:#fff; }

/* ---------- 3. il riquadro unico ----------
   Il viewport sta DENTRO l'header (fisso), sotto la barra: si sposta in orizzontale
   sotto la voce aperta (--mnav-x, calcolato da tendina.js) e la superficie prende
   la misura del pannello (--mnav-w / --mnav-h). I 10px trasparenti in alto fanno
   da ponte: passando dalla voce al pannello il puntatore non esce mai. */
.rs-mnav-viewport{ position:absolute; top:100%; left:0; z-index:5; padding-top:10px;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translate3d(var(--mnav-x,32px),-6px,0);
  transition:opacity .2s ease, transform .32s cubic-bezier(.22,.61,.36,1), visibility 0s linear .2s; }
.rs-mnav-viewport.is-aperta{ opacity:1; visibility:visible; pointer-events:auto;
  transform:translate3d(var(--mnav-x,32px),0,0);
  transition:opacity .2s ease, transform .32s cubic-bezier(.22,.61,.36,1), visibility 0s; }
.rs-mnav-viewport.is-salto,
.rs-mnav-viewport.is-salto .rs-mnav-superficie{ transition:none; }
/* sempre opaca, anche sulla barra trasparente della home; stessa famiglia del selettore lingua */
.rs-mnav-superficie{ position:relative; width:var(--mnav-w,640px); height:var(--mnav-h,320px);
  max-width:calc(100vw - 64px); overflow:hidden; background:#fff; border:1px solid var(--paper2);
  border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition:width .32s cubic-bezier(.22,.61,.36,1), height .32s cubic-bezier(.22,.61,.36,1); }
/* filo in alto nel colore della sezione (bordeaux, argento sul catering, oro sulla storia).
   E' un bordo, non un riquadro interno: cosi' resta fermo anche quando il pannello scorre. */
.rs-mnav-superficie{ border-top:2px solid var(--accent); }
.rs-mnav-superficie.is-scorre{ overflow-y:auto; overscroll-behavior:contain; }

/* ---------- 4. i pannelli ---------- */
.rs-mnav-pannello{ position:absolute; top:0; left:0; max-width:calc(100vw - 66px); padding:30px 32px 28px;
  color:var(--ink); font-family:var(--sans); text-align:left; }
.rs-mnav-pannello.is-uscente{ pointer-events:none; }
.rs-mnav-lista{ list-style:none; margin:0; padding:0; }
.rs-mnav-lista li{ margin:0; padding:0; }
.rs-mnav-voce{ position:relative; display:block; padding:7px 22px 7px 0; font-family:var(--serif);
  font-size:22px; line-height:1.25; font-weight:500; color:var(--ink); transition:color .2s ease; }
/* freccia sottile sulla riga scelta (quella che comanda foto e frase) */
.rs-mnav-voce::after{ content:"→"; position:absolute; right:0; top:50%; margin-top:-.62em;
  font-family:var(--sans); font-size:14px; line-height:1.25em; color:var(--accent-d);
  opacity:0; transform:translateX(-6px); transition:opacity .2s ease, transform .2s ease; }
.rs-mnav-voce:hover, .rs-mnav-voce.is-attiva{ color:var(--ink); }
.rs-mnav-voce:hover::after, .rs-mnav-voce.is-attiva::after{ opacity:1; transform:none; }
/* la pagina in cui ci si trova: sottolineata nel colore della sezione (il testo resta scuro, contrasto pieno) */
.rs-mnav-voce[aria-current="page"] .rs-mnav-nome,
.rs-mnav-lista--righe .rs-mnav-voce[aria-current="page"]{ text-decoration:underline; text-decoration-thickness:1px;
  text-decoration-color:var(--accent); text-underline-offset:5px; }
.rs-mnav-occhiello, .rs-mnav-link, .rs-mnav-indirizzo{ font-family:var(--sans); font-size:12px;
  letter-spacing:.13em; text-transform:uppercase; font-weight:500; color:rgba(35,25,26,.7); }
.rs-mnav-occhiello{ margin:0; }
.rs-mnav-frase{ margin:10px 0 0; font-family:var(--serif); font-size:21px; line-height:1.3; color:var(--ink); }
/* sottolineatura come testo (non bordo): se l'etichetta va a capo, resta sotto ogni riga */
.rs-mnav-link{ text-decoration:underline; text-decoration-thickness:1px; text-decoration-color:var(--paper2);
  text-underline-offset:6px; line-height:1.9; transition:color .2s ease, text-decoration-color .2s ease; }
.rs-mnav-link:hover, .rs-mnav-link[aria-current="page"]{ color:var(--ink); text-decoration-color:var(--accent); }
.rs-mnav-piede{ display:flex; flex-wrap:wrap; gap:8px 26px; margin:18px 0 0; padding-top:16px;
  border-top:1px solid var(--paper2); }
.rs-mnav-disegno{ display:block; width:100%; height:auto; object-fit:contain; }
.rs-mnav-pannello img.is-mancante{ visibility:hidden; }
.rs-mnav-pannello a:focus-visible{ outline:2px solid var(--accent-d); outline-offset:4px; border-radius:2px; }

/* Catering: frase | occasioni | una cornice 4:5 */
.rs-mnav-pannello--catering{ width:740px; display:grid; grid-template-columns:196px minmax(0,1fr) 158px;
  gap:0 30px; align-items:start; }
.rs-mnav-pannello--catering .rs-mnav-link{ display:inline-block; margin-top:18px; }
.rs-mnav-lista--righe li + li{ border-top:1px solid var(--paper2); }
.rs-mnav-foto{ position:relative; aspect-ratio:4 / 5; border-radius:4px; overflow:hidden; background:var(--paper); }
.rs-mnav-foto img{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover;
  opacity:0; transition:opacity .32s ease; }
.rs-mnav-foto img.is-attiva{ opacity:1; }

/* Pasticceria: nove reparti in due colonne (letti dall'alto in basso) | disegno */
.rs-mnav-pannello--pasticceria{ width:680px; display:grid; grid-template-columns:minmax(0,1fr) 132px; gap:0 30px; }
.rs-mnav-lista--due{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(5,auto);
  grid-auto-flow:column; gap:0 26px; }
.rs-mnav-lista--due .rs-mnav-voce{ font-size:20px; padding:6px 0; }
.rs-mnav-lista--due .rs-mnav-voce::after{ display:none; }
.rs-mnav-lista--due .rs-mnav-voce:hover{ text-decoration:underline; text-decoration-thickness:1px;
  text-decoration-color:var(--accent); text-underline-offset:5px; }
.rs-mnav-pannello--pasticceria .rs-mnav-piede{ grid-column:1; }
.rs-mnav-pannello--pasticceria .rs-mnav-disegno{ grid-column:2; grid-row:1 / span 2; align-self:center;
  aspect-ratio:360 / 423; opacity:.92; }

/* Locali: sei indirizzi | la frase del locale scelto sopra il disegno */
.rs-mnav-pannello--locali{ width:740px; display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:0 30px; }
.rs-mnav-lista--sedi li + li{ border-top:1px solid var(--paper2); }
.rs-mnav-voce--sede{ padding:7px 22px 7px 0; }
.rs-mnav-nome{ display:block; font-size:20px; line-height:1.2; }
.rs-mnav-indirizzo{ display:block; margin-top:3px; font-size:11px; line-height:1.4; }
.rs-mnav-lato{ display:flex; flex-direction:column; gap:18px; padding:4px 0 0 26px; border-left:1px solid var(--paper2); }
/* tutte le frasi nella stessa cella: l'altezza è quella della più lunga, il riquadro non balla */
.rs-mnav-descs{ display:grid; }
.rs-mnav-desc{ grid-area:1 / 1; margin:0; font-family:var(--serif); font-style:italic; font-size:18px; line-height:1.35;
  color:#4a3f38; opacity:0; visibility:hidden; transition:opacity .24s ease, visibility 0s linear .24s; }
.rs-mnav-desc.is-attiva{ opacity:1; visibility:visible; transition:opacity .24s ease, visibility 0s; }
.rs-mnav-pannello--locali .rs-mnav-disegno{ margin-top:auto; aspect-ratio:360 / 340; opacity:.92; }
.rs-mnav-pannello--locali .rs-mnav-piede{ grid-column:1 / -1; }

/* ---------- 5. telefono e tablet stretto: la tendina non esiste ---------- */
@media (max-width:900px){
  header#hdr .rs-mnav-btn, header#hdr .rs-mnav-viewport, header#hdr .rs-mnav-indicatore{ display:none; }
}
body.rs-nav-lock header#hdr .rs-mnav-viewport{ display:none; }

/* ---------- 6. riduci movimento: niente scivolamenti, solo una breve dissolvenza ---------- */
@media (prefers-reduced-motion:reduce){
  .rs-mnav-viewport{ transform:translate3d(var(--mnav-x,32px),0,0); transition:opacity .12s linear, visibility 0s linear .12s; }
  .rs-mnav-viewport.is-aperta{ transition:opacity .12s linear, visibility 0s; }
  .rs-mnav-superficie, .rs-mnav-btn .chev, .rs-mnav-voce::after{ transition:none; }
  .rs-mnav-indicatore{ transition:opacity .12s linear; }
  .rs-mnav-foto img, .rs-mnav-desc, .rs-mnav-desc.is-attiva{ transition:none; }
}

/* ---------- 7. fuoco da tastiera sui comandi della barra ----------
   Finora nessuno: il contorno segue il colore della sezione, bianco sulle barre colorate
   e sul pannello bordeaux del drawer. */
header#hdr .brand:focus-visible,
header#hdr nav a.navlink:focus-visible,
header#hdr .rs-mnav-btn:focus-visible,
header#hdr .rs-cart:focus-visible,
header#hdr .menu-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:2px; }
/* la freccina della tendina e' tonda sulle barre colorate: il fuoco non la squadri */
header#hdr.accent .rs-mnav-btn:focus-visible{ border-radius:50%; }
header#hdr.accent .brand:focus-visible,
header#hdr.accent nav a.navlink:focus-visible,
header#hdr.accent .rs-mnav-btn:focus-visible,
header#hdr.accent .rs-cart:focus-visible,
header#hdr.accent .menu-btn:focus-visible,
body.rs-nav-lock header#hdr .menu-btn:focus-visible{ outline-color:#fff; box-shadow:0 0 0 4px #23191a; }