/* ============================================================
   MONDIALI 2026 – Stylesheet
   Font: Barlow Condensed (titoli) + Barlow (testo)
   Palette: bianco/grigio chiarissimo + verde FIFA + rosso accento
   ============================================================ */

:root {
  --green:       #1a7a3c;
  --green-dark:  #145f2e;
  --green-light: #e8f5ed;
  --red:         #c0392b;
  --gold:        #d4a017;
  --text:        #1a1a2e;
  --text-muted:  #6b7280;
  --border:      #e5e7eb;
  --bg:          #f8f9fa;
  --white:       #ffffff;
  --shadow:      0 2px 12px rgba(0,0,0,.08);
  --radius:      10px;
  --font-cond:   'Barlow Condensed', sans-serif;
  --font-body:   'Barlow', sans-serif;
  --nav-h:       64px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ── Layout ── */
.container { max-width: 1140px; margin: 0 auto; padding: 0 1rem; }
.site-main  { flex: 1; padding-bottom: 3rem; }

/* ── HEADER ── */
.site-header {
  background: var(--green);
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 100%;
}
.logo {
  display: flex; align-items: center; gap: .5rem;
  color: var(--white);
}
.logo img {
  height: 52px;
  width: auto;
  display: block;
  max-width: 220px;
  object-fit: contain;
}
.logo-trophy { font-size: 1.8rem; line-height: 1; }
.logo-text   { display: flex; flex-direction: column; line-height: 1; }
.logo-main   { font-family: var(--font-cond); font-size: 1.4rem; font-weight: 800; letter-spacing: .05em; }
.logo-year   { font-family: var(--font-cond); font-size: 1rem; font-weight: 600; opacity: .85; }

.main-nav { display: flex; gap: .25rem; }
.main-nav a {
  font-family: var(--font-cond);
  font-size: 1rem; font-weight: 600; letter-spacing: .04em;
  color: rgba(255,255,255,.85);
  padding: .4rem .75rem;
  border-radius: 6px;
  transition: background .2s, color .2s;
}
.main-nav a:hover, .main-nav a.active {
  background: rgba(255,255,255,.18);
  color: var(--white);
}
.nav-toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  padding: .5rem; flex-direction: column; gap: 5px;
}
.nav-toggle span {
  display: block; width: 24px; height: 2px;
  background: var(--white); border-radius: 2px;
  transition: transform .2s, opacity .2s;
}

/* ── MEGAMENU ── */
.nav-item { position: relative; display: flex; }
.nav-mega-trigger {
  display: flex; align-items: center; gap: .25rem;
  font-family: var(--font-cond);
  font-size: 1rem; font-weight: 600; letter-spacing: .04em;
  color: rgba(255,255,255,.85);
  background: none; border: none; cursor: pointer;
  padding: .4rem .75rem;
  border-radius: 6px;
  transition: background .2s, color .2s;
}
.nav-mega-trigger:hover, .nav-mega-trigger.active, .nav-item.open .nav-mega-trigger {
  background: rgba(255,255,255,.18);
  color: var(--white);
}
.mega-caret { font-size: .65rem; opacity: .8; transition: transform .2s; }

/* Pannello: largo come tutta la barra di navigazione, sotto l'header */
.megamenu {
  display: none;
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  max-height: calc(100vh - var(--nav-h));
  overflow-y: auto;
  background: var(--white);
  color: var(--text);
  box-shadow: var(--shadow);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  z-index: 200;
}
/* Apertura SOLO via classe .open (gestita da JS al click/tap).
   Niente apertura via :hover: su touch/tablet l'hover resta "bloccato"
   dopo il tap e impedirebbe la chiusura al click successivo. */
.nav-item.open .megamenu {
  display: block;
}
.nav-item.open .mega-caret {
  transform: rotate(180deg);
}
.megamenu-inner { padding: 1.5rem 1rem; }

/* Le prime 3 posizioni, disposte in orizzontale, come box quadrati (dimensione contenuta) */
.mega-grid {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.mega-box {
  flex: 1 1 0;
  max-width: 180px;
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .3rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  text-align: center;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.mega-box:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--green);
}
.mega-box-pos { font-size: 1.6rem; line-height: 1; }
.mega-box-flag { font-size: 2rem; line-height: 1; }
.mega-box-name {
  font-family: var(--font-cond); font-weight: 800; font-size: 1.05rem;
  line-height: 1.1;
}
.mega-box-team { font-size: .78rem; color: var(--text-muted); }
.mega-box-val {
  font-family: var(--font-cond); font-weight: 800; font-size: 1.1rem;
  color: var(--green-dark);
  margin-top: .15rem;
}
.mega-empty { font-size: .9rem; color: var(--text-muted); margin-bottom: 1rem; text-align: center; }
.mega-link {
  display: block;
  text-align: center;
  font-size: .9rem; font-weight: 700;
  color: #fff !important;
  background: var(--green);
  border-radius: 8px;
  padding: .7rem 1rem;
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.mega-link:hover { background: var(--green-dark); color: #fff !important; }


/* ── HERO (homepage) ── */
.hero {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 60%, #2ecc71 100%);
  color: var(--white);
  padding: 4rem 0 3rem;
  text-align: center;
  position: relative; overflow: hidden;
}
.hero::before {
  content: '⚽';
  position: absolute; top: -20px; right: -20px;
  font-size: 14rem; opacity: .06; line-height: 1;
  pointer-events: none;
}
.hero-flag-bar {
  display: flex; justify-content: center; flex-wrap: wrap; gap: .3rem;
  font-size: 1.6rem; margin-bottom: 1.5rem;
}
.hero h1 {
  font-family: var(--font-cond); font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800; letter-spacing: .06em; line-height: 1.05;
  text-transform: uppercase;
}
.hero .subtitle {
  font-size: 1.1rem; opacity: .9; margin-top: .6rem;
  font-weight: 500;
}
.hero-meta {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 1rem 2rem; margin-top: 2rem;
}
.hero-meta-item {
  display: flex; flex-direction: column; align-items: center;
}
.hero-meta-item .value {
  font-family: var(--font-cond); font-size: 2rem; font-weight: 800; line-height: 1;
}
.hero-meta-item .label {
  font-size: .8rem; opacity: .8; text-transform: uppercase; letter-spacing: .05em;
}

/* ── PAGE TITLE BAND ── */
.page-band {
  background: var(--green);
  color: var(--white);
  padding: 1.5rem 0;
}
.page-band h1 {
  font-family: var(--font-cond);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.page-band p { opacity: .85; margin-top: .25rem; }

/* ── CARDS ── */
.card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card-header {
  background: var(--green);
  color: var(--white);
  padding: .7rem 1rem;
  font-family: var(--font-cond);
  font-size: 1.15rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: .5rem;
}
.card-body { padding: 1rem; }

/* ── SECTION TITLE ── */
.section-title {
  font-family: var(--font-cond);
  font-size: 1.6rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--green);
  border-left: 4px solid var(--green);
  padding-left: .75rem;
  margin-bottom: 1.25rem;
}

/* ── PARTITA CARD ── */
.match-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: .5rem;
  transition: box-shadow .2s, transform .2s;
}
.match-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.match-team {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-cond); font-size: 1.05rem; font-weight: 700;
}
.match-team.home { justify-content: flex-end; text-align: right; }
.match-team.away { justify-content: flex-start; }
.flag { font-size: 1.4rem; flex-shrink: 0; }
.match-score {
  text-align: center;
  min-width: 70px;
}
.score-box {
  background: var(--text);
  color: var(--white);
  font-family: var(--font-cond); font-size: 1.4rem; font-weight: 800;
  padding: .25rem .6rem; border-radius: 6px;
  display: inline-block; letter-spacing: .1em;
}
.score-box.upcoming {
  background: var(--green);
  font-size: 1rem; letter-spacing: 0;
  padding: .3rem .5rem;
}
.match-info {
  font-size: .78rem; color: var(--text-muted);
  margin-top: .3rem; text-align: center;
}

/* ── GRUPPO BADGE ── */
.group-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--gold);
  color: var(--white);
  font-family: var(--font-cond); font-weight: 800; font-size: .9rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── CLASSIFICA TABLE ── */
.standings-table {
  width: 100%; border-collapse: collapse;
  font-size: .82rem;
  table-layout: fixed;
}
.standings-table th {
  background: var(--green);
  color: var(--white);
  font-family: var(--font-cond); font-weight: 700; letter-spacing: .04em;
  padding: .5rem .3rem; text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
.standings-table th:nth-child(2) { text-align: left; padding-left: .5rem; width: 38%; }
.standings-table th:first-child  { width: 6%; padding-left: .5rem; }
.standings-table th:not(:nth-child(2)):not(:first-child) { width: 7%; }
.standings-table td {
  padding: .5rem .3rem; text-align: center;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.standings-table td:nth-child(2) { text-align: left; padding-left: .5rem; }
.standings-table td:first-child   { padding-left: .5rem; }
.standings-table tr:last-child td { border-bottom: none; }
.standings-table tr:nth-child(even) td { background: #f9fafb; }
.standings-table tr.qualify-1 td { background: #dcf5e7; }
.standings-table tr.qualify-2 td { background: #e8f5ed; }
.standings-table tr:hover td { background: #f0fdf4 !important; }
.team-cell {
  display: flex; align-items: center; gap: .35rem;
  font-family: var(--font-cond); font-weight: 700; font-size: .88rem;
  white-space: nowrap; overflow: hidden;
}
.team-cell span:last-child {
  overflow: hidden; text-overflow: ellipsis;
}
.pts { font-family: var(--font-cond); font-weight: 800; font-size: .95rem; color: var(--green); }

/* ── GIRONI GRID ── */
.gironi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

/* ── SQUADRE GRID ── */
.squadre-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
.squadra-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1rem;
  display: flex; align-items: center; gap: .75rem;
  transition: box-shadow .2s, transform .2s;
}
.squadra-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.squadra-flag { font-size: 2.2rem; flex-shrink: 0; }
.squadra-info { min-width: 0; }
.squadra-nome {
  font-family: var(--font-cond); font-weight: 700; font-size: 1.05rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.squadra-badge {
  font-size: .72rem; color: var(--text-muted);
  display: flex; align-items: center; gap: .3rem; margin-top: .1rem;
}

/* ── CALENDARIO DATE HEADER ── */
.date-header {
  font-family: var(--font-cond);
  font-size: 1rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: #f3f4f6;
  border-left: 3px solid var(--green);
  padding: .4rem .75rem;
  margin: 1rem 0 .5rem;
  border-radius: 0 6px 6px 0;
}

/* ── FILTRO GIRONE ── */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-bottom: 1.5rem;
}
.filter-btn {
  font-family: var(--font-cond); font-weight: 700; font-size: .9rem;
  letter-spacing: .04em;
  background: var(--white); border: 2px solid var(--border);
  color: var(--text); padding: .3rem .8rem; border-radius: 20px;
  cursor: pointer; transition: all .15s;
}
.filter-btn:hover  { border-color: var(--green); color: var(--green); }
.filter-btn.active { background: var(--green); border-color: var(--green); color: var(--white); }

/* ── QUALIFICA LEGGENDA ── */
.legend {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  margin-bottom: 1rem; font-size: .8rem; color: var(--text-muted);
}
.legend-item { display: flex; align-items: center; gap: .35rem; }
.legend-dot {
  width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0;
}

/* ── TABS ── */
.tabs { display: flex; gap: .25rem; border-bottom: 2px solid var(--border); margin-bottom: 1.5rem; }
.tab-btn {
  font-family: var(--font-cond); font-weight: 700; font-size: 1rem; letter-spacing: .04em;
  background: none; border: none; border-bottom: 3px solid transparent;
  margin-bottom: -2px; padding: .5rem 1rem;
  cursor: pointer; color: var(--text-muted); transition: all .15s;
}
.tab-btn:hover  { color: var(--green); }
.tab-btn.active { color: var(--green); border-bottom-color: var(--green); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── HOME STATS STRIP ── */
.stats-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1rem; margin: 2rem 0;
}
.stat-box {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.2rem 1rem; text-align: center;
  box-shadow: var(--shadow);
}
.stat-box .stat-val {
  font-family: var(--font-cond); font-size: 2.2rem; font-weight: 800; color: var(--green); line-height: 1;
}
.stat-box .stat-lbl { font-size: .78rem; color: var(--text-muted); margin-top: .25rem; }

/* ── EMPTY STATE ── */
.empty { text-align: center; padding: 2rem; color: var(--text-muted); font-style: italic; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .logo img { height: 40px; max-width: 160px; }
  .main-nav {
    display: none; flex-direction: column;
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: var(--green-dark);
    padding: .5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: .7rem 1rem; border-radius: 6px; }

  /* Megamenu in versione mobile: statico, dentro al flusso del menu */
  .nav-item { flex-direction: column; }
  .nav-mega-trigger { padding: .7rem 1rem; }
  .megamenu {
    display: none;
    position: static;
    margin: 0 0 .25rem;
    box-shadow: none;
    border: none;
    background: rgba(255,255,255,.08);
  }
  .nav-item.open .megamenu { display: block; }
  .megamenu-inner { padding: 1rem .5rem; }
  .mega-grid { gap: .5rem; max-width: none; }
  .mega-box { max-width: none; padding: .5rem .3rem; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); }
  .mega-box-name, .mega-box-pos { color: rgba(255,255,255,.95); }
  .mega-box-team { color: rgba(255,255,255,.65); }
  .mega-box-val { color: #fff; }
  .mega-empty { color: rgba(255,255,255,.7); }
  .mega-link { background: rgba(255,255,255,.15); color: #fff !important; }
  .mega-link:hover { background: rgba(255,255,255,.25); }


  .gironi-grid { grid-template-columns: 1fr; }

  .match-card {
    grid-template-columns: 1fr;
    text-align: center; gap: .4rem;
  }
  .match-team.home { justify-content: center; }
  .match-team.away { justify-content: center; }
  .match-score { order: -1; }

  .standings-table { font-size: .72rem; }
  .standings-table th, .standings-table td { padding: .4rem .2rem; }
  .team-cell { font-size: .78rem; gap: .2rem; }

  .hero { padding: 2.5rem 0 2rem; }
  .hero::before { font-size: 8rem; }
}

@media (max-width: 480px) {
  .squadre-grid { grid-template-columns: 1fr 1fr; }
  .stats-strip  { grid-template-columns: 1fr 1fr; }
  .mega-grid    { flex-direction: column; gap: .6rem; }
  .mega-box     { aspect-ratio: auto; flex-direction: row; justify-content: flex-start; text-align: left; padding: .6rem .8rem; max-width: none; }
}

/* ── FOOTER ── */
.site-footer {
  background: var(--text);
  color: rgba(255,255,255,.75);
  margin-top: auto;
}
.footer-inner {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  justify-content: space-between; align-items: center;
  padding: 1.5rem 0;
}
.footer-brand .footer-logo {
  font-family: var(--font-cond); font-size: 1.2rem; font-weight: 800;
  color: var(--white); display: block; margin-bottom: .25rem;
}
.footer-brand p { font-size: .82rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
.footer-links a { font-size: .85rem; transition: color .15s; }
.footer-links a:hover { color: #2ecc71; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: .75rem 0; text-align: center; font-size: .78rem;
}