/* ============================================================================
   HOME — PIECE 1: riga RAGGRUPPAMENTI + riga SPORT
   Richiesta Dav (rif. Dav_modifica_non_fatta.png). Tema scuro nostro.
   Solo struttura vestita: il comportamento (click raggruppamento → sport,
   click sport → contenuto) lo wira B col partial-load.
   Design D, 22-07-2026.

   ⚠️ Due varianti di colore, si sceglie con UNA classe sul contenitore:
     .hm            → tema scuro nostro (accento arancio)   ← default
     .hm.hm--vivid  → lettura letterale del riferimento: raggruppamenti ROSSI
                      e sport VERDE fluo
   (Nel riferimento i rettangoli rosso/verde sono le ANNOTAZIONI di Dav sopra
   lo screenshot, non i colori del sito: lì i tab sono bianchi su blu. Lascio
   entrambe pronte, sceglie Dav/GC.)
   ========================================================================== */

.hm{
  --hm-bg:#0a3350;          /* fondo delle due righe */
  --hm-bg2:#052033;         /* riga sport, un gradino più scura */
  --hm-line:#16496b;
  --hm-ink:#eaf2f8;
  --hm-dim:#9fbdd2;
  --hm-acc:#ff7900;         /* accento: attivo */
  --hm-acc-ink:#2b1400;     /* testo sopra l'accento */
  --hm-live:#ff3b3b;
  background:var(--hm-bg);
  border:1px solid var(--hm-line);
  border-radius:10px;
  overflow:visible;   /* i dropdown (cascata) devono poter uscire */
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--hm-ink);
}
.hm *{box-sizing:border-box}

/* variante "come le annotazioni": rosso + verde fluo */
.hm.hm--vivid{ --hm-acc:#e0322b; --hm-acc-ink:#fff; }
.hm.hm--vivid .hm-sports{ --hm-acc:#3ef07a; --hm-acc-ink:#042312; }

/* ───────────────────────── riga 1 · RAGGRUPPAMENTI ───────────────────────── */
.hm-groups{
  display:flex; align-items:stretch; gap:2px;
  padding:0 8px; border-radius:10px 10px 0 0;
  border-block-end:1px solid var(--hm-line);
  overflow-x:auto; scrollbar-width:none;
}
.hm-groups::-webkit-scrollbar{display:none}

/* le briciole a sinistra (casa › sport › torneo) come nel riferimento */
.hm-crumbs{
  display:flex; align-items:center; gap:7px; flex:none;
  padding-inline-end:10px; margin-inline-end:4px;
  border-inline-end:1px solid var(--hm-line);
  color:var(--hm-dim);
}
.hm-crumbs span{display:grid;place-items:center;width:22px;height:22px;cursor:pointer}
.hm-crumbs span:hover{color:var(--hm-ink)}

.hm-g{
  flex:none; position:relative; cursor:pointer;
  padding:12px 14px 11px;
  font-size:13.5px; font-weight:700; white-space:nowrap;
  color:var(--hm-dim); background:transparent; border:0;
  transition:color .12s;
}
.hm-g:hover{color:var(--hm-ink)}
/* attivo: testo pieno + filo d'accento sotto (non un pill: la riga resta pulita) */
.hm-g.on{color:var(--hm-ink)}
.hm-g.on::after{
  content:""; position:absolute; inset-inline:10px; inset-block-end:0;
  height:3px; border-radius:3px 3px 0 0; background:var(--hm-acc);
}
.hm-g:focus-visible{outline:2px solid var(--hm-acc);outline-offset:-3px;border-radius:6px}

/* nella variante vivid l'attivo è una pastiglia piena, come i tab del riferimento */
.hm--vivid .hm-g.on{
  background:var(--hm-acc); color:var(--hm-acc-ink); border-radius:6px;
  margin-block:6px; padding-block:6px;
}
.hm--vivid .hm-g.on::after{display:none}

/* ───────────────────────────── riga 2 · SPORT ───────────────────────────── */
.hm-sports{
  display:flex; align-items:center; gap:6px;
  padding:0 8px; background:var(--hm-bg2); border-radius:0 0 10px 10px;
}
/* SOLO gli sport scorrono; interruttore a sx e controlli a dx restano FISSI */
.hm-s-scroll{
  flex:1 1 auto; min-width:0;
  display:flex; align-items:center; gap:2px;
  overflow-x:auto; scrollbar-width:none;
}
.hm-s-scroll::-webkit-scrollbar{display:none}

/* interruttore «Con live streaming», a sinistra come nel riferimento */
.hm-stream{
  display:flex; align-items:center; gap:8px; flex:none;
  padding-inline-end:12px; margin-inline-end:6px;
  border-inline-end:1px solid var(--hm-line);
  color:var(--hm-dim); font-size:12.5px; font-weight:600; white-space:nowrap;
  cursor:pointer;
}
.hm-stream i{
  width:32px; height:18px; border-radius:999px; background:#123c5c;
  border:1px solid var(--hm-line); position:relative; flex:none; transition:background .15s;
}
.hm-stream i::after{
  content:""; position:absolute; inset-block-start:2px; inset-inline-start:2px;
  width:12px; height:12px; border-radius:50%; background:var(--hm-dim); transition:.15s;
}
.hm-stream.on i{background:var(--hm-acc);border-color:var(--hm-acc)}
.hm-stream.on i::after{inset-inline-start:16px;background:#fff}
.hm-stream.on{color:var(--hm-ink)}

.hm-s{
  flex:none; display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:9px 12px; border:0; background:transparent;
  font-size:13px; font-weight:700; white-space:nowrap; color:var(--hm-dim);
  border-radius:7px; transition:color .12s,background .12s;
}
.hm-s img,.hm-s svg{width:18px;height:18px;flex:none;opacity:.85}
.hm-s:hover{color:var(--hm-ink);background:rgba(255,255,255,.06)}
.hm-s:hover img,.hm-s:hover svg{opacity:1}
.hm-s.on{color:var(--hm-acc)}
.hm-s.on img,.hm-s.on svg{opacity:1}
.hm-s.on::after{
  content:""; position:absolute; inset-inline:8px; inset-block-end:2px; height:2px;
  border-radius:2px; background:var(--hm-acc);
}
.hm-s{position:relative}
.hm-s:focus-visible{outline:2px solid var(--hm-acc);outline-offset:-2px}
/* pallino LIVE sullo sport che ha eventi in corso */
.hm-s .hm-dot{
  width:7px;height:7px;border-radius:50%;background:var(--hm-live);flex:none;
  box-shadow:0 0 0 2px rgba(255,59,59,.22);
}
/* nella variante vivid lo sport attivo è pieno di verde fluo */
.hm--vivid .hm-s.on{background:var(--hm-acc);color:var(--hm-acc-ink)}
.hm--vivid .hm-s.on::after{display:none}

/* le due icone a destra (altri sport / e-sport) — FISSE, non scorrono */
.hm-more{display:flex;align-items:center;gap:4px;flex:none;
  padding-inline-start:10px;border-inline-start:1px solid var(--hm-line)}
.hm-more button{
  display:inline-flex;align-items:center;gap:4px;cursor:pointer;
  background:transparent;border:0;color:var(--hm-dim);padding:7px 9px;border-radius:7px;
  font-size:13px;
}
.hm-more button:hover{color:var(--hm-ink);background:rgba(255,255,255,.06)}

/* ─────────────────────────────── responsive ─────────────────────────────── */
@media (max-width:760px){
  .hm-crumbs{display:none}                 /* le briciole non servono sul telefono */
  .hm-g{padding:10px 11px;font-size:12.5px}
  .hm-s{padding:8px 10px;font-size:12.5px}
  .hm-stream span{display:none}            /* resta solo l'interruttore */
}
@media (prefers-reduced-motion:reduce){
  .hm-g,.hm-s,.hm-stream i,.hm-stream i::after{transition:none}
}

/* ============================================================================
   PREMATCH — lato DESTRO della barra sport: SELECT vestita + toolbar icone
   (dalla prematch.html di Dav: select `.select-input` in alto a destra + icone
   print/view/sorting/largeView…). Usa l'icon-pack (`iconpack.css`, classi .ic-ui--*).
   Va DENTRO `.hm-sports`, dopo `.hm-more` (o al posto suo). Design D, 22-07-2026.
   ========================================================================== */

/* la select vestita del tema, portata sul nostro scuro */
.hm-select{position:relative;flex:none;margin-inline-start:8px}
.hm-select select{
  appearance:none;-webkit-appearance:none;
  background:var(--navy-2,#0f3f61);color:var(--hm-ink,#eaf2f8);
  border:1px solid var(--hm-line,#16496b);border-radius:7px;
  padding:7px 30px 7px 11px;font:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;outline:none;
}
.hm-select select:hover{border-color:var(--hm-dim,#9fbdd2)}
.hm-select select:focus{border-color:var(--hm-acc,#ff7900)}
.hm-select .ic{position:absolute;inset-block-start:50%;inset-inline-end:9px;
  transform:translateY(-50%);pointer-events:none;color:var(--hm-dim,#9fbdd2);font-size:16px}

/* la barra di icone (view/print/sorting…) */
.hm-tools{display:flex;align-items:center;gap:2px;flex:none;margin-inline-start:6px}
.hm-tool{
  width:32px;height:32px;flex:none;cursor:pointer;border:0;border-radius:7px;
  background:transparent;color:var(--hm-dim,#9fbdd2);
  display:grid;place-items:center;transition:background .12s,color .12s;
}
.hm-tool .ic{font-size:18px}
.hm-tool:hover{background:rgba(255,255,255,.06);color:var(--hm-ink,#eaf2f8)}
.hm-tool.on{color:var(--hm-acc,#ff7900)}          /* vista attiva (es. largeView) */
.hm-tool.on{background:rgba(255,121,0,.12)}
.hm-tool:focus-visible{outline:2px solid var(--hm-acc,#ff7900);outline-offset:-2px}
.hm-tools .sep{width:1px;height:20px;background:var(--hm-line,#16496b);margin:0 4px;flex:none}

@media (max-width:760px){
  .hm-select select{padding-block:6px;font-size:12px}
  .hm-tool{width:30px;height:30px}
}

/* ============================================================================
   HOME — PIECE 2: «Cerca» in alto a destra (riga raggruppamenti) + PIECE 3: box
   con le 2 icone a CASCATA (altri sport / e-sport) sulla riga sport.
   Estende home_tabs.css. Design D, 22-07-2026. Comportamento (apri/filtra) = B.
   ========================================================================== */

/* --- riga raggruppamenti: i gruppi scorrono, il CERCA resta FISSO a destra --- */
.hm-groups{gap:6px}
.hm-g-scroll{
  flex:1 1 auto;min-width:0;display:flex;align-items:stretch;gap:2px;
  overflow-x:auto;scrollbar-width:none;
}
.hm-g-scroll::-webkit-scrollbar{display:none}
.hm-search{
  flex:none;margin-inline-start:8px;align-self:center;position:relative;
}
.hm-search input{
  width:200px;max-width:38vw;
  background:var(--navy-2,#0f3f61);border:1px solid var(--hm-line,#16496b);border-radius:999px;
  color:var(--hm-ink,#eaf2f8);font:inherit;font-size:12.5px;
  padding:8px 34px 8px 14px;outline:none;
}
.hm-search input::placeholder{color:var(--hm-dim,#9fbdd2)}
.hm-search input:focus{border-color:var(--hm-acc,#ff7900)}
.hm-search .ic{
  position:absolute;inset-block-start:50%;inset-inline-end:12px;transform:translateY(-50%);
  color:var(--hm-dim,#9fbdd2);pointer-events:none;font-size:15px;
}

/* --- le 2 icone a destra della riga sport: ognuna apre un menu a CASCATA --- */
.hm-more button{position:relative}
.hm-menu{
  position:absolute;inset-block-start:100%;inset-inline-end:0;z-index:40;margin-block-start:6px;
  min-width:214px;max-height:60vh;overflow-y:auto;
  background:var(--hm-bg,#0a3350);border:1px solid var(--hm-line,#16496b);border-radius:10px;
  box-shadow:0 14px 34px rgba(2,12,22,.55);padding:5px;
  opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity .12s ease,transform .12s ease;
}
/* B: apri col hover del contenitore o con .is-open sul button (tap mobile) */
.hm-more button:hover > .hm-menu,
.hm-more button.is-open > .hm-menu{opacity:1;visibility:visible;transform:translateY(0)}
/* ponte anti-gap (stessa lezione dell'header submenu) */
.hm-menu::before{content:"";position:absolute;inset-inline:0;top:-8px;height:10px}

.hm-menu-it{
  display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;cursor:pointer;
  color:var(--hm-ink,#eaf2f8);font-size:12.5px;font-weight:600;position:relative;
}
.hm-menu-it:hover{background:rgba(255,255,255,.07)}
.hm-menu-it .ic,.hm-menu-it img{width:18px;height:18px;flex:none;opacity:.9}
.hm-menu-it .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-menu-it .cnt{font-size:11px;color:var(--hm-dim,#9fbdd2);font-weight:700}
/* la freccina "ha un sottomenu" */
.hm-menu-it.has-sub > .car{color:var(--hm-dim,#9fbdd2);font-size:11px}

/* il SOTTOMENU (competizioni dello sport): si apre a fianco */
.hm-menu-sub{
  position:absolute;inset-block-start:-5px;inset-inline-end:100%;margin-inline-end:4px;
  min-width:200px;max-height:56vh;overflow-y:auto;
  background:var(--hm-bg,#0a3350);border:1px solid var(--hm-line,#16496b);border-radius:10px;
  box-shadow:0 14px 34px rgba(2,12,22,.55);padding:5px;
  opacity:0;visibility:hidden;transform:translateX(4px);
  transition:opacity .12s ease,transform .12s ease;
}
.hm-menu-it.has-sub:hover > .hm-menu-sub,
.hm-menu-it.has-sub.is-open > .hm-menu-sub{opacity:1;visibility:visible;transform:translateX(0)}
.hm-menu-sub::before{content:"";position:absolute;inset-block:0;inset-inline-end:-6px;width:8px}
/* gruppo "Leghe popolari" nel sottomenu */
.hm-menu-grp{padding:8px 10px 4px;font:800 9.5px/1 ui-monospace,Menlo,monospace;
  letter-spacing:.1em;text-transform:uppercase;color:var(--hm-dim,#9fbdd2)}

@media (max-width:760px){
  .hm-search input{width:150px}
  /* su mobile il sottomenu si apre SOTTO invece che a fianco (spazio) */
  .hm-menu-sub{position:static;inset:auto;margin:2px 0 2px 10px;box-shadow:none;
    border:0;border-left:2px solid var(--hm-line,#16496b);border-radius:0;
    opacity:1;visibility:visible;transform:none;display:none}
  .hm-menu-it.has-sub.is-open > .hm-menu-sub{display:block}
}
@media (prefers-reduced-motion:reduce){.hm-menu,.hm-menu-sub{transition:none}}

/* ── Widget LOGO (Dav 24/07): logo skin cliccabile → home, posizionabile ── */
.wg-logo{display:inline-flex;align-items:center;text-decoration:none;line-height:0}
.wg-logo-img{max-height:44px;max-width:200px;width:auto;height:auto;object-fit:contain}
.wg-logo-word{font:800 22px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  letter-spacing:.02em;color:var(--header-color-menu,#f5b301);line-height:1}