/* ============================================================
   HOME — indice ricette (per lettera + ricerca) e indice per ingrediente.
   Usa i token di base.css (--display, --mono, --ottone, --carta).
   ============================================================ */

.recipe-index{padding-block:clamp(2rem,6vh,4rem)}

/* intestazione: occhiello + ricerca */
.ri-head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem 2rem; margin-bottom:1.4rem;
}
.ri-search{flex:1 1 260px; max-width:420px}
#recipeSearch{
  width:100%; box-sizing:border-box;
  font-family:var(--mono); font-size:15px; letter-spacing:.02em;
  color:var(--carta); background:rgba(243,234,220,.05);
  border:1px solid rgba(243,234,220,.18); border-radius:999px;
  padding:.8rem 1.2rem; outline:none; transition:border-color .2s, background .2s;
}
#recipeSearch::placeholder{color:rgba(243,234,220,.4)}
#recipeSearch:focus{border-color:var(--ottone); background:rgba(243,234,220,.08)}

/* filtri per tipo (IBA / Sour / Frozen) — link a /tipi/* (SEO), con JS filtrano in pagina */
.ri-filters{display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.4rem; width:100%}
.ri-filter{
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--carta); background:rgba(243,234,220,.05);
  border:1px solid rgba(243,234,220,.18); border-radius:999px;
  padding:.42rem .95rem; cursor:pointer; text-decoration:none; line-height:1;
  transition:border-color .18s, background .18s, color .18s;
}
.ri-filter:hover{border-color:var(--ottone); color:var(--ottone)}
.ri-filter.is-on{background:var(--ottone); border-color:var(--ottone); color:#14100a; font-weight:600}

/* indice lettere */
.letter-nav{
  position:sticky; top:0; z-index:5;
  display:flex; flex-wrap:wrap; gap:.2rem;
  padding:.6rem 0; margin-bottom:1rem;
  background:linear-gradient(var(--bg-b,#0A0E13) 70%, transparent);
  border-bottom:1px solid rgba(243,234,220,.1);
}
.letter-nav a{
  font-family:var(--mono); font-size:13px; letter-spacing:.1em;
  color:var(--ottone); text-decoration:none;
  min-width:1.9rem; text-align:center; padding:.25rem .1rem; border-radius:6px;
  transition:background .15s, color .15s, opacity .15s;
}
.letter-nav a:hover{background:rgba(201,162,74,.16)}
.letter-nav a.off{opacity:.28; pointer-events:none}

/* La ricerca nasconde card e gruppi con l'attributo [hidden]. Ma .rec-item e
   .letter-group hanno display:grid, che sovrascrive il display:none del browser
   per [hidden]: senza questa regola d'autore gli elementi "nascosti" resterebbero
   visibili e la ricerca sembrerebbe non filtrare. */
.rec-item[hidden], .letter-group[hidden]{display:none}

/* gruppo lettera: prima colonna a larghezza FISSA (non 'auto'), così la lettera —
   M larga o I stretta — occupa sempre lo stesso spazio e le card si allineano tra
   i gruppi. Se un glifo largo sfora, sconfina nel gap (innocuo). */
.letter-group{
  display:grid; grid-template-columns:3.6rem 1fr; gap:1.4rem 1.8rem;
  align-items:start; padding-block:1.4rem;
  border-top:1px solid rgba(243,234,220,.08);
}
.letter-group:first-of-type{border-top:none}
.letter-head{
  font-family:var(--display); font-weight:900; font-size:clamp(2.6rem,7vw,4.4rem);
  line-height:.8; color:var(--ottone); margin:0; opacity:.85;
  position:sticky; top:3.4rem;
}

.rec-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.7rem}
.rec-item{
  display:grid; gap:.3rem; text-decoration:none; color:inherit;
  padding:1rem 1.1rem; border:1px solid rgba(243,234,220,.12); border-radius:14px;
  background:rgba(243,234,220,.03); transition:border-color .2s, transform .2s, background .2s;
}
.rec-item:hover{border-color:var(--ottone); transform:translateY(-2px); background:rgba(243,234,220,.06)}
.rec-name{font-family:var(--display); font-weight:700; font-size:1.35rem; letter-spacing:-.01em}
.rec-tag{color:rgba(243,234,220,.6); font-size:.9rem; line-height:1.3}
.rec-ings{display:flex; gap:.32rem; margin-top:.35rem}
.rec-ings i{width:11px; height:11px; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.25) inset}

.ri-empty{
  font-family:var(--mono); color:rgba(243,234,220,.55);
  text-align:center; padding:2.4rem 0;
}

/* ---- indice per ingrediente ---- */
.ingredients-index{padding-block:clamp(2rem,6vh,4rem); border-top:1px solid rgba(243,234,220,.1)}
.ingredients-index .prose{max-width:52ch; margin-bottom:1.8rem}
.ing-index-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.4rem 2rem}
.ing-index{display:grid; gap:.55rem}
.ing-index-name{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--display); font-weight:700; font-size:1.25rem;
  color:var(--carta); text-decoration:none; width:max-content;
  border-bottom:1px solid transparent; transition:border-color .2s;
}
.ing-index-name:hover{border-color:var(--ottone)}
.ing-index-name i{width:14px; height:14px; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.25) inset}
.ing-index-name small{font-family:var(--mono); font-size:11px; color:rgba(243,234,220,.5); font-weight:400}
.ing-index-links{display:flex; flex-wrap:wrap; gap:.4rem; align-items:flex-start; align-content:flex-start}
.ing-index-links a{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.02em;
  color:rgba(243,234,220,.72); text-decoration:none;
  padding:.3rem .7rem; border:1px solid rgba(243,234,220,.14); border-radius:999px;
  transition:border-color .2s, color .2s, background .2s;
}
.ing-index-links a:hover{border-color:var(--ottone); color:var(--carta); background:rgba(201,162,74,.12)}

@media (max-width:640px){
  .letter-group{grid-template-columns:1fr; gap:.6rem}
  .letter-head{position:static; font-size:2.4rem}
}

/* --- Segnala una ricetta / contatto (home) --- */
.segnala{padding:6vh 0 3vh; max-width:720px}
.segnala .prose{margin-bottom:2rem}
.form-note{padding:.9rem 1.1rem; border-radius:10px; font-size:.95rem; margin:0 0 1.4rem}
.form-note--ok{background:rgba(94,138,52,.16); border:1px solid rgba(94,138,52,.5); color:#cfe3b6}
.form-note--err{background:rgba(168,22,39,.16); border:1px solid rgba(168,22,39,.5); color:#f0b8bf}
.segnala-form{display:flex; flex-direction:column; gap:1.1rem}
.sf-hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.sf-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
@media (max-width:560px){.sf-grid{grid-template-columns:1fr}}
.sf-field{display:flex; flex-direction:column; gap:.45rem}
.sf-field span{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(243,234,220,.55)}
.sf-field input, .sf-field textarea{
  width:100%; box-sizing:border-box; font-family:var(--body); font-size:15px; color:var(--carta);
  background:rgba(243,234,220,.05); border:1px solid rgba(243,234,220,.18); border-radius:10px;
  padding:.8rem 1rem; outline:none; transition:border-color .2s, background .2s; resize:vertical;
}
.sf-field input::placeholder, .sf-field textarea::placeholder{color:rgba(243,234,220,.35)}
.sf-field input:focus, .sf-field textarea:focus{border-color:var(--ottone); background:rgba(243,234,220,.08)}
.sf-btn{
  align-self:flex-start; font-family:var(--mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:#14100a; background:var(--ottone); border:none; border-radius:999px; padding:.85rem 1.8rem;
  cursor:pointer; transition:transform .15s, filter .2s;
}
.sf-btn:hover{filter:brightness(1.08); transform:translateY(-1px)}

/* --- Consenso privacy: checkbox "tumbler che si riempie di liquido" --- */
.gc{display:flex; align-items:flex-start; gap:.85rem; cursor:pointer; margin:.3rem 0 .2rem}
.gc-glass{position:relative; flex:none; width:38px; height:44px; margin-top:-3px}
.gc-input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:2}
.gc-glass svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible}
.gc-wall{fill:none; stroke:rgba(243,234,220,.42); stroke-width:1.6; transition:stroke .3s}
.gc-rim{stroke:rgba(243,234,220,.55); stroke-width:1.9; stroke-linecap:round; transition:stroke .3s}
/* il liquido parte sotto (fuori dal clip) e sale al check */
.gc-fill{transform:translateY(32px); transition:transform .55s cubic-bezier(.22,.68,.32,1)}
.gc-input:checked ~ svg .gc-fill{transform:translateY(0)}
.gc-input:checked ~ svg .gc-wall{stroke:rgba(201,162,74,.85)}
.gc-input:checked ~ svg .gc-rim{stroke:var(--ottone)}
.gc-input:focus-visible ~ svg .gc-wall{stroke:var(--ottone)}
.gc-input:focus-visible ~ svg{filter:drop-shadow(0 0 3px rgba(201,162,74,.7))}
.gc-text{font-size:.9rem; line-height:1.5; color:rgba(243,234,220,.72)}
.gc-text a{color:var(--ottone); text-decoration:underline; text-underline-offset:2px}
@media (prefers-reduced-motion:reduce){.gc-fill{transition:none}}

/* ---- Cocktail del giorno ---- */
.cotd{padding:2vh 0 4vh}
.cotd-card{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:stretch;
  border:1px solid color-mix(in srgb, var(--cotd-accent,#C9A24A) 45%, transparent);
  border-radius:18px; overflow:hidden; background:rgba(0,0,0,.22); text-decoration:none; color:inherit;
  box-shadow:0 18px 50px rgba(0,0,0,.35); transition:transform .35s ease, border-color .35s ease}
.cotd-card:hover{transform:translateY(-3px); border-color:color-mix(in srgb, var(--cotd-accent,#C9A24A) 80%, transparent)}
.cotd-media{position:relative; min-height:280px; overflow:hidden}
.cotd-media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 55%, rgba(0,0,0,.28) 100%),
             radial-gradient(120% 120% at 100% 50%, color-mix(in srgb, var(--cotd-accent,#C9A24A) 22%, transparent), transparent 60%)}
.cotd-media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease}
.cotd-card:hover .cotd-media img{transform:scale(1.04)}
.cotd-body{display:flex; flex-direction:column; justify-content:center; gap:.5rem; padding:clamp(1.4rem,3.5vw,2.6rem)}
.cotd-eyebrow{font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cotd-accent,#C9A24A)}
.cotd-occasion{color:var(--carta); font-weight:600}
.cotd-name{font-family:var(--serif,'Bodoni Moda',serif); font-weight:700; line-height:1.02;
  font-size:clamp(2.2rem,5.5vw,3.6rem); margin:.1rem 0}
.cotd-reason{font-size:1rem; line-height:1.5; color:rgba(243,234,220,.82)}
.cotd-tag{font-size:.88rem; color:rgba(243,234,220,.55)}
.cotd-cta{margin-top:.6rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cotd-accent,#C9A24A)}
@media (max-width:760px){
  .cotd-card{grid-template-columns:1fr}
  .cotd-media{min-height:200px; aspect-ratio:16/10}
}

/* Promo stagionale (Natale): spazio riservato in home dal 1° al 26 dicembre (helper xmas_active). */
.season-promo{margin:1.4rem auto 0}
.season-promo__card{display:flex; align-items:center; gap:1.25rem; padding:1.1rem 1.4rem; background:linear-gradient(100deg,#39101a 0%,#57121f 55%,#5e1a12 100%); border:1px solid rgba(201,162,74,.55); color:var(--carta); text-decoration:none; transition:border-color .2s ease, transform .2s ease}
.season-promo__card:hover{border-color:rgba(201,162,74,.95); transform:translateY(-1px)}
.season-promo__deco{font-size:2.1rem; line-height:1; color:#EAD9B0; flex:0 0 auto}
.season-promo__txt{display:flex; flex-direction:column; gap:.25rem; flex:1 1 auto; min-width:0}
.season-promo__eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ottone)}
.season-promo__title{font-family:var(--display); font-weight:900; font-size:1.5rem; color:#F6ECDD}
.season-promo__sub{font-size:.92rem; color:rgba(243,233,219,.82); max-width:56ch}
.season-promo__cta{flex:0 0 auto; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#EAD9B0; border:1px solid rgba(234,217,176,.5); padding:.6rem .9rem; white-space:nowrap}
.season-promo__card:hover .season-promo__cta{background:rgba(234,217,176,.12)}
@media (max-width:640px){
  .season-promo__card{flex-wrap:wrap; gap:.7rem}
  .season-promo__title{font-size:1.25rem}
  .season-promo__cta{width:100%; text-align:center}
}