/* ============================================================================
   MondoDilettanti — design system
   Estratto fedelmente dalle SCSS reali del portale Nuxt (mondodilettanti-portal):
   navy #0c1d2e (topbar/header/footer), verde #16a05f (azione) + gold #dca326 (accenti), Poppins + Catamaran,
   titoli con sottolineatura arancio, header trasparente sopra la hero, footer
   navy a 3 colonne, tabs "line" con triangolo arancio, news card #f6f6f6.
   ============================================================================ */
:root{
  --navy:#0c1d2e; --navy2:#16314c; --navy-bd:#2a4765; --navy-soft:#314b65;
  --topbar-tx:#cdd1d4;
  --g:#16a05f; --g2:#dca326; --link:#0775bd;  /* brand: verde=azione, gold=accenti/numeri */
  --bg:#f1f2f4; --card:#fff; --soft:#f6f6f6; --line:#e6e7eb;
  --ink:#23303b; --mut:#7b8794; --grey:#a7a7a7;
}
*{box-sizing:border-box}
html{background:#fff;overflow-x:hidden}
body{overflow-x:hidden}
body{margin:0;font:15px/1.6 'Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
     background:var(--bg);color:var(--ink)}
a{color:inherit;text-decoration:none;cursor:pointer}
img{max-width:100%}
h1,h2,h3,h4{margin:0}

/* ---- banner: topbar + header trasparente sopra la foto hero -------------- */
.banner{position:relative;color:#fff;
  background:linear-gradient(180deg,rgba(12,29,46,.74) 0%,rgba(12,29,46,.5) 55%,rgba(12,29,46,.78) 100%),
             var(--hero,linear-gradient(120deg,#0c1d2e,#1d3a57)) center/cover no-repeat}
.wrapin{max-width:1280px;margin:0 auto;padding:0 22px}

/* topbar (service menu) — striscia navy piena */
.topbar{background:var(--navy);border-bottom:1px solid var(--navy-soft);font-size:13.5px;font-weight:300}
.topbar .wrapin{display:flex;align-items:center;height:44px;gap:20px}
.topbar a{color:var(--topbar-tx);transition:.15s}
.topbar a:hover{color:var(--g)}
.topbar .sp{color:var(--navy-soft)}
.topbar .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.topbar .right .reg{color:var(--g);font-weight:600}
.topbar .right .reg:hover{color:#fff}

/* main header — trasparente, sopra la hero */
.header{position:relative;z-index:3}
.header .wrapin{display:flex;align-items:center;gap:8px;height:78px}
.header .logo{height:34px;display:block;margin-right:18px}
.header nav.main{display:flex;align-items:stretch;height:100%}
.header .navitem{position:relative;display:flex;align-items:center;height:100%;padding:0 14px;
  font-family:'Catamaran',sans-serif;font-weight:800;font-size:13px;text-transform:uppercase;
  letter-spacing:.045em;color:#fff;white-space:nowrap;border-bottom:3px solid transparent;transition:.15s}
.header .navitem:hover{color:var(--g)}
.header .navitem.active{color:#fff;border-bottom-color:var(--g)}
.header .navitem .navlabel{display:flex;align-items:center;height:100%;color:inherit;text-decoration:none;cursor:pointer}
.header .navitem .car{position:absolute;top:78px;left:0;min-width:190px;background:var(--g);
  box-shadow:0 6px 14px rgba(0,0,0,.45);padding:6px;display:none;flex-direction:column;z-index:20}
.header .navitem:hover .car{display:flex}
.header .navitem .car a{color:var(--navy);font-family:'Poppins';font-weight:500;font-size:13px;
  text-transform:none;letter-spacing:0;padding:6px 10px;border-radius:3px}
.header .navitem .car a:hover{background:rgba(255,255,255,.28);color:var(--navy)}
.header .spacer{margin-left:auto}
.header .envbadge{font-size:12px;color:#cdd6df;font-weight:300}
.header .envbadge b{color:#fff;font-weight:600}

/* hero body */
.herobody{position:relative;z-index:1}
.herobody .wrapin{padding:30px 22px 36px}
.banner.tall .herobody .wrapin{padding:64px 22px 80px}
.herobody h1{font-family:'Catamaran',sans-serif;font-weight:900;font-size:30px;line-height:1.08;
  text-shadow:0 2px 14px rgba(0,0,0,.35)}
.banner.tall .herobody h1{font-size:46px}
.herobody p{margin:10px 0 0;max-width:640px;font-weight:300;opacity:.94}
.herobody .crumb{font-size:12.5px;font-weight:300;opacity:.8;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.herobody .crumb a:hover{color:var(--g)}
.hero-tags{margin-top:16px;display:flex;gap:9px;flex-wrap:wrap}
.hero-tags .tag{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.22);
  border-radius:22px;padding:5px 13px;font-size:12.5px;font-weight:500;backdrop-filter:blur(2px)}
/* hero search (home) */
.herosearch{margin-top:22px;max-width:560px;display:flex;background:#fff;border-radius:10px;overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.28)}
.herosearch input{flex:1;border:0;padding:15px 18px;font:inherit;color:var(--ink)}
.herosearch input:focus{outline:none}
.herosearch button{border-radius:0}

/* ---- page layout: content 60% + aside 40% ------------------------------- */
main.page{max-width:1280px;margin:0 auto;padding:34px 22px 10px;display:flex;gap:34px;align-items:flex-start}
.content{flex:1 1 60%;min-width:0}
.aside{flex:0 0 320px;width:320px}
@media(max-width:920px){main.page{flex-direction:column}.aside{width:100%;flex-basis:auto}}

/* section title (Catamaran 900 + underline arancio) */
.title{font-family:'Catamaran',sans-serif;font-weight:900;color:var(--navy);text-transform:uppercase;
  font-size:23px;letter-spacing:.01em;border-bottom:3px solid var(--g);padding-bottom:9px;margin:6px 0 18px;
  display:flex;align-items:center;gap:10px}
.title .ico{height:22px}
.title small{font-family:'Poppins';font-weight:400;text-transform:none;letter-spacing:0;color:var(--mut);font-size:13px;margin-left:auto}

/* card */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 22px;
  box-shadow:0 1px 3px rgba(16,33,52,.06);margin-bottom:22px}
.card h2{font-family:'Catamaran',sans-serif;font-weight:800;font-size:15px;color:var(--navy);
  text-transform:uppercase;letter-spacing:.03em;margin:0 0 14px;display:flex;align-items:center;gap:8px}
.card h2 .bar{width:7px;height:15px;background:var(--g);border-radius:2px;display:inline-block}
.card h2 .ico{height:18px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:760px){.grid2{grid-template-columns:1fr}}
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.cards4 .card{margin:0;padding:14px 12px}
@media(max-width:620px){.cards4{grid-template-columns:1fr 1fr}}

/* tables */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line)}
thead th{color:var(--mut);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
tbody tr:hover{background:#fffaf1}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
table a:hover{color:var(--link)}

/* bits */
.pill{display:inline-block;background:rgba(253,160,0,.13);color:#b5730a;border-radius:20px;padding:1px 9px;font-size:12px;font-weight:600}
.pill.navy{background:#eef2f6;color:#46606e}
.pill.green{background:#e8f5ea;color:#2f9e44}
.pill.warn{background:#fbeee6;color:#b06a2c}
.mat{color:var(--mut);font-size:12px}
.muted{color:var(--mut);font-size:13.5px}
.sim{font-variant-numeric:tabular-nums;color:var(--g2);font-weight:700}
.lnk{color:var(--link)}
.lnk:hover{text-decoration:underline}

/* forms / inputs — DESIGN SYSTEM
   Selettore robusto: copre anche gli <input> SENZA attributo type (es. il login box),
   tutti i tipi testuali, select e textarea. Esclude checkbox/radio/bottoni/file/range. */
input:where(:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):not([type=file]):not([type=range]):not([type=color])),
select, textarea{
  width:100%; min-height:44px; padding:11px 13px; border:1px solid var(--line); border-radius:10px;
  font:inherit; line-height:1.4; background:#fff; color:var(--ink);
  -webkit-appearance:none; appearance:none; transition:border-color .15s, box-shadow .15s, background .15s}
textarea{min-height:96px; resize:vertical}
input:where(:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]):not([type=range])):hover,
select:hover, textarea:hover{border-color:#c9ced6}
input:where(:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]):not([type=range])):focus,
select:focus, textarea:focus{outline:none; border-color:var(--g); box-shadow:0 0 0 3px rgba(22,160,95,.20)}
::placeholder{color:var(--mut); opacity:1}
input:disabled, select:disabled, textarea:disabled, input[readonly], textarea[readonly]{
  background:var(--soft); color:var(--mut); cursor:not-allowed; box-shadow:none}
/* select: freccia custom (appearance:none la rimuove) */
select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%237b8794' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 13px center; padding-right:36px}
/* helper: label + input impilati, e stato di errore */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.field>label,.field-label{font-size:12px; font-weight:600; color:var(--mut); text-transform:uppercase; letter-spacing:.04em}
.input-error{border-color:#d8463b !important; box-shadow:0 0 0 3px rgba(216,70,59,.15) !important}

/* buttons */
.row{display:flex;gap:9px;margin-bottom:11px;flex-wrap:wrap}
button{background:var(--g);color:#fff;border:0;border-radius:8px;padding:11px 20px;cursor:pointer;
  font-weight:600;text-transform:uppercase;letter-spacing:.5px;font-size:13px;
  box-shadow:0 1px 3px rgba(0,0,0,.12);transition:.18s}
button:hover{filter:brightness(.96)}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink);text-transform:none;
  letter-spacing:0;font-weight:500;box-shadow:none}
.btn-ghost:hover{border-color:var(--g);background:#eef8f1;filter:none}
.toggle{display:flex;gap:6px;margin-bottom:12px}
.toggle button{padding:7px 15px;font-size:12px}
.toggle button.off{background:#eef0f2;color:var(--mut);box-shadow:none}

/* tabs .line (categoria) — sottolineatura arancio + triangolo */
.tabsline{display:flex;border-bottom:4px solid #d8d6d6;margin-bottom:22px;flex-wrap:wrap}
.tabsline a{position:relative;padding:11px 22px;font-weight:600;font-size:13.5px;color:#575757;
  text-transform:uppercase;letter-spacing:.02em;margin-bottom:-4px;border-bottom:4px solid transparent}
.tabsline a:hover{color:#666}
.tabsline a.active{color:var(--navy);border-bottom-color:var(--g)}
.tabsline a.active:before{content:'';position:absolute;left:calc(50% - 9px);top:100%;
  border-left:9px solid transparent;border-right:9px solid transparent;border-top:9px solid var(--g)}

/* subnav segments (navbarPage) */
.subnav{display:flex;gap:8px;margin:18px 0;flex-wrap:wrap}
.subnav a{flex:1;text-align:center;background:var(--grey);color:#fff;font-weight:700;font-size:13px;
  text-transform:uppercase;padding:10px;border-radius:3px}
.subnav a.active,.subnav a:hover{background:var(--navy)}

/* entity header (player/team) */
.ehead{display:flex;align-items:center;gap:20px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:22px 24px;margin-bottom:22px;box-shadow:0 1px 3px rgba(16,33,52,.06)}
.ehead .crest{width:74px;height:74px;border-radius:50%;background:var(--navy) var(--crest,none) center/58% no-repeat;
  display:flex;align-items:center;justify-content:center;flex:0 0 74px}
.ehead .crest img{width:58%}
.ehead .nm{font-family:'Catamaran',sans-serif;font-weight:900;font-size:26px;color:var(--navy);line-height:1.05}
.ehead .meta{color:var(--mut);font-size:14px;margin-top:3px}
.ehead .big{margin-left:auto;text-align:center}
.ehead .big .v{font-family:'Catamaran',sans-serif;font-weight:900;font-size:34px;color:var(--g2);line-height:1}
.ehead .big .l{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}

/* provvedimento / event rows */
.prov{background:#fff;border:1px solid var(--line);border-radius:9px;padding:11px 14px;margin:8px 0;font-size:13.5px}
.prov .hd{font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.evrow{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--line)}
.evrow:last-child{border-bottom:0}
.evrow .min{width:38px;font-weight:700;color:var(--navy)}
.evrow img{height:18px}

/* scoreboard */
.scoreboard{font-family:'Catamaran',sans-serif;font-weight:900;font-size:22px;text-align:center;padding:18px;
  border-radius:12px;background:linear-gradient(120deg,var(--navy),#1d3a57);color:#fff;margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;gap:8px}
.scoreboard .s{color:var(--g);font-size:30px;margin:0 14px}
.scoreboard .tm{flex:1}
.scoreboard .tm.h{text-align:right}.scoreboard .tm.a{text-align:left}

/* content prose (faq/collabora/contatti/legal) */
.prose h3{font-family:'Catamaran',sans-serif;font-weight:800;color:var(--navy);font-size:20px;margin:22px 0 10px}
.prose p{margin:0 0 12px}
.prose a{color:var(--link)}.prose a:hover{text-decoration:underline}
.qa{background:var(--soft);border-radius:9px;padding:18px 20px;margin-bottom:16px}
.qa strong{display:block;font-size:17px;color:var(--navy);border-bottom:1px dotted #d6d6d6;padding-bottom:9px;margin-bottom:9px}
.gridtable{width:100%;border-collapse:collapse;margin:14px 0;font-size:13.5px}
.gridtable th{background:var(--navy);color:#fff;text-transform:uppercase;font-size:11px;letter-spacing:.04em;padding:9px 11px}
.gridtable td{border:1px solid var(--line);padding:9px 11px}

/* news cards */
.newsgrid{display:flex;flex-wrap:wrap;gap:22px;margin-top:6px}
.newscard{width:calc(33.33% - 15px);background:var(--soft);border-radius:9px;overflow:hidden;
  display:flex;flex-direction:column;transition:.15s;border:1px solid var(--line)}
.newscard:hover{background:#eee;transform:translateY(-2px)}
@media(max-width:760px){.newscard{width:calc(50% - 11px)}}
@media(max-width:520px){.newscard{width:100%}}
.newscard .ph{position:relative;padding-top:54%;background:linear-gradient(120deg,var(--navy),#23506f) center/cover;color:#fff}
.newscard .ph .sc{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Catamaran',sans-serif;font-weight:900;font-size:22px}
.newscard .ph .sc .s{color:var(--g);margin:0 10px}
.newscard .tx{padding:14px 15px;display:flex;flex-direction:column;gap:7px;flex:1}
.newscard .tx strong{color:#111;font-size:14px;line-height:1.3}
.newscard .tx .hour{color:var(--g2);font-size:12.5px;margin-top:auto}

/* standings (classifica reale) */
table.standings td:first-child{font-variant-numeric:tabular-nums;color:var(--mut);font-weight:600}
table.standings tr.zwin td:first-child{box-shadow:inset 3px 0 0 #2f9e44}
table.standings tr.zrel td:first-child{box-shadow:inset 3px 0 0 #d6453a}
table.standings tr.zwin{background:#f1faf3}
table.standings tr.zrel{background:#fdf3f2}
.zlegend{display:inline-block;width:11px;height:11px;border-radius:2px;vertical-align:-1px;margin-right:3px}
.zlegend.zwin{background:#2f9e44}.zlegend.zrel{background:#d6453a}

/* team directory cards */
.teamgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:16px;margin-bottom:10px}
@media(max-width:430px){.teamgrid{grid-template-columns:1fr}}
.teamcard{min-width:0}
.teamcard .tn{overflow-wrap:anywhere}
.teamcard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 14px;
  box-shadow:0 1px 3px rgba(16,33,52,.06);transition:.15s}
.teamcard:hover{border-color:var(--g);transform:translateY(-3px);box-shadow:0 8px 22px rgba(16,33,52,.12)}
.teamcard .cr{width:54px;height:54px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center}
.teamcard .cr img{width:64%}
.teamcard .tn{font-family:'Catamaran',sans-serif;font-weight:800;font-size:14px;color:var(--navy);line-height:1.2}
.teamcard .tm{font-size:12px;color:var(--mut)}

/* aside widgets */
.widget{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-bottom:22px;
  box-shadow:0 1px 3px rgba(16,33,52,.06)}
.widget .wt{font-family:'Catamaran',sans-serif;font-weight:800;text-transform:uppercase;color:var(--navy);
  font-size:13px;letter-spacing:.04em;border-bottom:2px solid var(--g);padding-bottom:8px;margin-bottom:12px}
.widget .li{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.widget .li:last-child{border-bottom:0}
.widget .li .hour{color:var(--g2);font-size:12px;display:block;margin-top:2px}
.adbox{border-radius:10px;background:linear-gradient(120deg,#23303b,#0c1d2e);color:#fff;padding:22px;text-align:center;margin-bottom:22px}
.adbox .k{font-family:'Catamaran';font-weight:900;font-size:18px}
.adbox .s{font-size:12.5px;opacity:.8;margin-top:4px}

/* ---- footer (navy 3 colonne) -------------------------------------------- */
footer.site{background:var(--navy);color:#fff;margin-top:40px}
footer.site .wrapin{display:flex;gap:50px;padding:46px 22px}
footer.site .col1{flex:1.3}
footer.site .col1 img{height:34px;margin-bottom:16px}
footer.site .col1 p{font-size:13px;opacity:.78;line-height:1.7;max-width:430px}
footer.site .col2{display:flex;flex-direction:column;gap:9px;font-size:14px}
footer.site .col2 a:hover{color:var(--g)}
footer.site .col3{max-width:300px}
footer.site .col3 .k{font-weight:700;font-size:14px;margin-bottom:14px;display:block}
footer.site .store{display:flex;gap:10px}
footer.site .store .b{flex:1;border:1px solid var(--navy-bd);border-radius:8px;padding:9px;text-align:center;
  font-size:12px;color:#cdd6df}
footer.site .store .b:hover{border-color:var(--g);color:#fff}
footer.site .gdpr{margin-top:18px;color:var(--g);font-size:13px;display:flex;gap:8px}
footer.site .gdpr a:hover{color:#fff}
footer.site .colophon{border-top:1px solid var(--navy-bd);font-size:12.5px;opacity:.7}
footer.site .colophon .wrapin{padding:18px 22px;display:block}
@media(max-width:820px){footer.site .wrapin{flex-direction:column;gap:30px}}

/* responsive header — topbar nascosta, nav a riga singola scrollabile (come il portale) */
@media(max-width:760px){
  .topbar{display:none}
  .header .wrapin{height:60px;gap:0;padding:8px 16px}
  .header .logo{height:28px;margin-right:10px}
  .header nav.main{margin-left:0;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .header nav.main::-webkit-scrollbar{display:none}
  .header .navitem{height:60px;padding:0 11px;font-size:12px;border-bottom-width:3px}
  .header .navitem .car{display:none}
  .header .spacer,.header .envbadge{display:none}
  .wrapin{padding:0 16px}
  .banner.tall .herobody h1{font-size:30px}
  .banner.tall .herobody .wrapin{padding:40px 16px 48px}
  .herobody .wrapin{padding:24px 16px 28px}
  .herosearch{max-width:100%}
  main.page{padding:24px 16px 10px;gap:24px}
  .title{font-size:20px}
}