/* =========================================================================
   ASD Highlander Mercogliano — tema Tailwind (dark, verde/oro, glass).
   Tailwind (CDN) gestisce le utility; qui: base, glass-card, animazioni e
   il "compat layer" per le pagine legacy (area soci / admin) che usano
   classi proprie (.card, table, form, .cta, .big, .grid, .error, .ok...).
   ========================================================================= */

:root{
  --primary:#70dd88; --primary-container:#00873e; --on-primary-container:#f8fff4;
  --tertiary:#f0c048; --on-tertiary:#3f2e00;
  --bg:#0b0b0b; --surface:#131313; --surf-low:#1c1b1b; --surf:#201f1f;
  --surf-high:#2a2a2a; --surf-highest:#353534; --lowest:#0e0e0e;
  --on-surface:#e5e2e1; --on-surface-variant:#bdcabb; --secondary:#c6c6c6;
  --outline:#3e4a3e; --line:rgba(192,192,192,.15);
}

html{scroll-behavior:smooth}
body{background-color:#000;color:var(--on-surface)}

/* glass card from the approved mockup */
.glass-card{
  background:rgba(26,26,26,.8);backdrop-filter:blur(12px);
  border:1px solid rgba(192,192,192,.15);transition:all .3s ease;
}
.glass-card:hover{border-color:rgba(112,221,136,.4);box-shadow:0 0 20px rgba(0,135,62,.2)}

.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;vertical-align:middle}

/* page-load reveal */
.reveal{opacity:0;transform:translateY(16px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
.reveal.d1{animation-delay:.10s}.reveal.d2{animation-delay:.22s}.reveal.d3{animation-delay:.34s}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.reveal{animation:none;opacity:1;transform:none}}

/* =========================================================================
   COMPAT LAYER — pagine legacy (area soci / admin) dentro <main>.
   Centra e impagina i blocchi che NON fanno parte del layout Tailwind.
   ========================================================================= */
main{display:block;padding-bottom:64px}
main > h1, main > h2, main > h3, main > p, main > ul, main > form,
main > table, main > .card, main > .grid, main > .lead, main > .eyebrow,
main > .section-head, main > .feature-grid{
  max-width:1120px;margin-left:auto;margin-right:auto;
  padding-left:clamp(16px,4vw,40px);padding-right:clamp(16px,4vw,40px);
}
main > h1{font-family:"Anton",sans-serif;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(2rem,5vw,3rem);margin:2rem auto .4rem;color:#fff}
main > h2{font-family:"Anton",sans-serif;text-transform:uppercase;margin:.4rem auto;color:#fff}
main > p.lead{font-size:1.1rem;color:var(--on-surface-variant);max-width:62ch}
main > .eyebrow{color:var(--primary);text-transform:uppercase;letter-spacing:.3em;
  font-size:.78rem;font-weight:600;display:block;margin-top:1.4rem}

/* cards */
.card{background:rgba(26,26,26,.8);border:1px solid var(--line);border-radius:.75rem;
  padding:1.4rem 1.6rem;margin:1.2rem auto;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.card.accent{border-left:4px solid var(--tertiary)}
.card h2,.card h3{margin-top:0;color:#fff;font-family:"Anton",sans-serif;text-transform:uppercase}

/* tables (classifica/admin) */
table{width:100%;border-collapse:collapse;margin:1rem auto;background:var(--surf-low);
  border-radius:.75rem;overflow:hidden}
th,td{padding:.7rem .85rem;text-align:left;border-bottom:1px solid var(--line)}
th{background:rgba(0,135,62,.15);color:var(--tertiary);text-transform:uppercase;
  letter-spacing:.06em;font-size:.78rem}
tbody tr:hover{background:rgba(255,255,255,.03)}
.big{font-family:"Anton",sans-serif;font-size:3rem;color:var(--tertiary);line-height:1}

/* forms — testo sempre leggibile su tema scuro (vince su eventuali reset) */
form{margin:0}
form p{margin:1rem 0}            /* ripristina lo spazio azzerato dal Preflight (pulsanti non attaccati) */
form label{display:block;margin:.9rem 0 .3rem;font-weight:600;color:var(--on-surface-variant)}
input,select,textarea,
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date]{
  width:100%;max-width:520px;font-family:"Hanken Grotesk",sans-serif;
  font-size:1rem;padding:.85rem .95rem;min-height:52px;line-height:1.35;
  background-color:#0c0f0c !important;color:#f3efe6 !important;
  border:1px solid var(--line);border-radius:.6rem;-webkit-text-fill-color:#f3efe6}
textarea{min-height:140px;resize:vertical}
select option{background:#14201a;color:#f3efe6}

/* ---- Select2 (tema scuro) ---- */
.select2-container{max-width:520px;width:100% !important}
.select2-container--default .select2-selection--single{
  background:#0c0f0c;border:1px solid var(--line);height:52px;border-radius:.6rem}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  color:#f3efe6;line-height:52px;padding-left:.95rem}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:50px;right:8px}
.select2-container--default.select2-container--open .select2-selection--single{border-color:var(--primary)}
.select2-dropdown{background:#14201a;border:1px solid var(--line);color:#f3efe6}
.select2-results__option{color:#f3efe6}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--primary-container);color:#fff}
.select2-container--default .select2-results__option[aria-selected=true]{background:#1c2b22}
.select2-search--dropdown .select2-search__field{
  background:#0c0f0c !important;color:#f3efe6 !important;border:1px solid var(--line);min-height:auto;border-radius:.4rem}
.select2-container--default .select2-selection--multiple{background:#0c0f0c;border:1px solid var(--line);min-height:52px;border-radius:.6rem}
input[type=checkbox]{width:auto;accent-color:var(--primary)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary) !important;
  box-shadow:0 0 0 3px rgba(112,221,136,.25)}
::placeholder{color:#7d877e}
/* autofill di Chrome/Safari: mantieni sfondo scuro e testo leggibile */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
  -webkit-text-fill-color:#f3efe6 !important;
  caret-color:#f3efe6 !important;
  -webkit-box-shadow:0 0 0 1000px #0c0f0c inset !important;
  box-shadow:0 0 0 1000px #0c0f0c inset !important;
  transition:background-color 9999s ease-in-out 0s;
}

/* pulsanti — identici al bottone "Area soci":
   bg-primary-container text-on-primary-container px-6 py-2 rounded-full font-label-lg
   hover:scale-105 active:scale-95 transition-all. !important per battere il Preflight di Tailwind */
button,input[type=submit],input[type=button],.btn,.cta{
  font-family:"Hanken Grotesk",sans-serif;font-weight:600 !important;font-size:14px !important;line-height:20px !important;cursor:pointer;
  background:var(--primary-container) !important;color:var(--on-primary-container) !important;
  border:0 !important;border-radius:9999px !important;padding:.5rem 1.5rem !important;
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;transition:all .2s}
button:hover,input[type=submit]:hover,input[type=button]:hover,.btn:hover,.cta:hover{transform:scale(1.05)}
button:active,input[type=submit]:active,input[type=button]:active,.btn:active,.cta:active{transform:scale(.95)}

/* "sfoglia" dei file (immagini) come pulsante coerente */
input[type=file]{padding:.5rem .6rem;cursor:pointer;min-height:auto}
input[type=file]::file-selector-button{
  font-family:"Hanken Grotesk",sans-serif;font-weight:700;cursor:pointer;
  background:var(--primary-container);color:var(--on-primary-container);
  border:0;border-radius:999px;padding:.5rem 1.1rem;margin-right:.9rem;transition:.18s}
input[type=file]::file-selector-button:hover{filter:brightness(1.1)}

/* azioni nelle tabelle: i link diventano pulsanti coerenti */
td form{display:inline-block;margin:0}
td a, td button{font-size:.82rem !important;padding:.4rem .85rem !important;border-radius:999px !important;margin:.12rem .15rem 0 0;text-decoration:none;line-height:1.3 !important}
td a{display:inline-block;background:var(--surf-high) !important;color:var(--on-surface) !important;
  border:1px solid var(--line);font-weight:600}
td a:hover{border-color:var(--primary);color:var(--primary) !important;filter:none}
td button{vertical-align:middle}

.error{color:#ffb4ab;font-weight:600}.ok{color:#70dd88;font-weight:600}
.muted{color:#8b978e;font-size:.85rem}

/* dynamic content cards (campioni/gare/news/proprietario) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.4rem;margin:1.4rem auto}
.content-item{background:rgba(26,26,26,.8);border:1px solid var(--line);border-radius:.75rem;
  overflow:hidden;transition:.3s}
.content-item:hover{border-color:rgba(112,221,136,.4);box-shadow:0 0 20px rgba(0,135,62,.2)}
.content-item .content-img{width:100%;height:190px;object-fit:cover;display:block}
.content-item h3{color:#fff;font-family:"Anton",sans-serif;text-transform:uppercase;margin:.9rem 1.1rem .2rem}
.content-item p{margin:.2rem 1.1rem;color:var(--on-surface-variant)}
.content-item p:last-child{padding-bottom:1.1rem}

/* ---- tabelle responsive su mobile (scroll orizzontale) ---- */
@media (max-width:760px){
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  table th, table td{white-space:nowrap}
}

/* ---- mappa full-width tema scuro + pin ---- */
.map-band{position:relative;width:100%;height:300px;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0b0d0c}
.map-frame{width:100%;height:100%;border:0;display:block;
  filter:invert(.92) hue-rotate(180deg) grayscale(.35) contrast(.9) brightness(.95)}
.map-pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-72%);pointer-events:none;
  width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#8cfaa2,#00873e);color:#003916;
  box-shadow:0 8px 22px rgba(0,0,0,.5),0 0 0 4px rgba(112,221,136,.25)}
.map-pin .material-symbols-outlined{font-size:28px;font-variation-settings:'FILL' 1}
@media (max-width:760px){.map-band{height:230px}}

/* ---- banner cookie ---- */
#cookieBar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#0b0d0c;border-top:1px solid var(--line);
  box-shadow:0 -10px 30px rgba(0,0,0,.45)}
#cookieBar .cookie-inner{max-width:1120px;margin:0 auto;padding:1rem clamp(16px,4vw,40px);
  display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;justify-content:space-between}
#cookieBar p{margin:0;color:var(--on-surface-variant);font-size:.92rem;max-width:70ch}
#cookieBar p a{color:var(--primary);text-decoration:underline}
#cookieBar .cookie-actions{display:flex;align-items:center;gap:.8rem}
#cookieBar .cookie-reject{cursor:pointer;color:var(--on-surface-variant);font-weight:600;
  padding:.5rem 1rem;border:1px solid var(--line);border-radius:9999px}
#cookieBar .cookie-reject:hover{color:#fff;border-color:var(--primary)}