/* ==========================================================================
   ASD REAL RF — Associazione Sportiva Dilettantistica
   Foglio di stile unico. Mobile-first.
   ========================================================================== */

/* --- font self-hosted ------------------------------------------------- */
@font-face{
  font-family:"Barlow Condensed";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("/assets/fonts/barlow-condensed-600.woff2") format("woff2");
}
@font-face{
  font-family:"Barlow Condensed";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("/assets/fonts/barlow-condensed-700.woff2") format("woff2");
}
@font-face{
  font-family:"Barlow Condensed";
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url("/assets/fonts/barlow-condensed-800.woff2") format("woff2");
}
@font-face{
  font-family:"Barlow";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/assets/fonts/barlow-400.woff2") format("woff2");
}
@font-face{
  font-family:"Barlow";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("/assets/fonts/barlow-500.woff2") format("woff2");
}
@font-face{
  font-family:"Barlow";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("/assets/fonts/barlow-600.woff2") format("woff2");
}

/* --- design tokens ------------------------------------------------------ */
:root{
  --pitch:      #005D21;   /* verde scudetto — titoli, nav attiva, ink */
  --pitch-900:  #003D16;   /* verde più scuro — hover/press */
  --emerald:    #00895B;   /* verde smeraldo — bottoni, accenti, bordi */
  --emerald-100:#E3F3EC;
  --gold:       #DEB407;   /* oro corona — badge su sfondo scuro, dettagli */
  --gold-100:   #FBF3D9;
  --ink:        #10201A;   /* quasi nero verdastro — corpo testo */
  --muted:      #55655D;
  --paper:      #FFFFFF;
  --paper-alt:  #F1F7F3;
  --border:     #CFE0D5;

  --font-display: "Barlow Condensed", "Segoe UI Condensed", sans-serif;
  --font-text: "Barlow", -apple-system, "Segoe UI", sans-serif;

  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1.25rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 5.5rem;
  --sp-8: 7.5rem;

  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.6rem;
  --step-3: 2.1rem;
  --step-4: 2.9rem;
  --step-5: 3.8rem;

  --focus: 3px solid var(--gold);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-text); font-size:var(--step-0); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--emerald); text-decoration-thickness:1.5px; }
a:hover{ color:var(--pitch); }
:focus-visible{ outline:var(--focus); outline-offset:2px; }

h1,h2,h3,h4{
  font-family:var(--font-display); font-weight:700; line-height:1.05;
  letter-spacing:0.01em; text-transform:uppercase; text-wrap:balance;
  color:var(--pitch); margin:0 0 var(--sp-2);
}
h1{ font-size:var(--step-5); }
h2{ font-size:var(--step-3); }
h3{ font-size:var(--step-2); }
p{ margin:0 0 var(--sp-3); max-width:68ch; }
.lede{ font-size:var(--step-1); color:var(--muted); max-width:60ch; }

.wrap{ max-width:1180px; margin:0 auto; padding-left:var(--sp-3); padding-right:var(--sp-3); }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--pitch); color:#fff;
  padding:0.8em 1.2em; z-index:200; font-weight:600;
}
.skip-link:focus{ left:var(--sp-2); top:var(--sp-2); }

/* --- header -------------------------------------------------------------- */
.site-header{
  border-bottom:3px solid var(--pitch); position:sticky; top:0; background:var(--paper); z-index:50;
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:var(--sp-2); padding-bottom:var(--sp-2); gap:var(--sp-3);
  position:relative;
}
.logo{ display:flex; align-items:center; gap:var(--sp-2); text-decoration:none; color:var(--ink); flex-shrink:0; }
.logo-mark{ height:52px; width:auto; }
.logo-word{
  font-family:var(--font-display); font-weight:800; font-size:var(--step-2);
  letter-spacing:0.01em; color:var(--pitch); line-height:1;
}
.logo-sub{ display:block; font-size:0.65rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.1em; margin-top:2px; font-weight:600; }

.nav-toggle{
  display:inline-flex; align-items:center; gap:var(--sp-1);
  background:var(--pitch); color:#fff; border:none; padding:0.6em 1em;
  font-family:var(--font-display); font-weight:700; font-size:var(--step-0);
  text-transform:uppercase; letter-spacing:0.04em; cursor:pointer;
}
.site-nav{ display:none; }
.site-nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--sp-3); }
.site-nav a{
  font-family:var(--font-display); font-weight:700; font-size:var(--step-0);
  text-transform:uppercase; letter-spacing:0.03em; color:var(--ink); text-decoration:none;
  padding-bottom:4px; border-bottom:3px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current="page"]{ color:var(--pitch); border-bottom-color:var(--emerald); }

.site-nav.is-open{
  display:block; position:absolute; left:0; right:0; top:100%; background:var(--paper);
  border-bottom:3px solid var(--pitch); padding:var(--sp-3);
}
.site-nav.is-open ul{ flex-direction:column; gap:var(--sp-2); }

@media (min-width:64rem){
  .nav-toggle{ display:none; }
  .site-nav{ display:block; }
}

/* --- buttons --------------------------------------------------------- */
.btn{
  display:inline-block; padding:0.85em 1.6em; font-family:var(--font-display);
  font-weight:700; font-size:var(--step-0); text-transform:uppercase; letter-spacing:0.03em;
  text-decoration:none; border:3px solid transparent; cursor:pointer;
}
.btn-primary{ background:var(--emerald); color:#fff; }
.btn-primary:hover{ background:var(--pitch); color:#fff; }
.btn-outline{ border-color:var(--pitch); color:var(--pitch); background:transparent; }
.btn-outline:hover{ background:var(--pitch); color:#fff; }
.btn-group{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }

/* --- hero ------------------------------------------------------------ */
.hero{ background:var(--pitch); color:#fff; position:relative; overflow:hidden; }
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,0.06), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(222,180,7,0.10), transparent 45%);
}
.hero .wrap{ position:relative; padding-top:var(--sp-6); padding-bottom:var(--sp-6); display:grid; gap:var(--sp-5); }
.hero-crest{ width:132px; height:auto; margin-bottom:var(--sp-3); }
.hero .tag{ margin-bottom:var(--sp-2); }
.hero h1{ color:#fff; margin-bottom:var(--sp-2); }
.hero p{ color:#D7EADD; }
.hero .btn-outline{ border-color:#fff; color:#fff; }
.hero .btn-outline:hover{ background:rgba(255,255,255,.14); color:#fff; }

@media (min-width:56rem){
  .hero .wrap{ grid-template-columns:1.1fr 0.9fr; align-items:center; }
  .hero-crest{ width:100%; max-width:340px; justify-self:end; margin-bottom:0; }
}

/* --- tag / badge -------------------------------------------------------- */
.tag{
  display:inline-block; background:var(--emerald-100); color:var(--pitch);
  font-family:var(--font-display); font-weight:700; font-size:0.78rem;
  text-transform:uppercase; letter-spacing:0.08em; padding:0.4em 0.9em;
}
.tag-dark{ background:rgba(255,255,255,0.14); color:#fff; }
.tag-gold{ background:var(--gold-100); color:#7A5F04; }

/* --- sections ----------------------------------------------------------- */
section{ padding-top:var(--sp-6); padding-bottom:var(--sp-6); }
.section-tinted{ background:var(--paper-alt); }
.section-dark{ background:var(--pitch); color:#fff; }
.section-dark h2, .section-dark h3{ color:#fff; }
.section-head{ max-width:70ch; margin-bottom:var(--sp-5); }
.section-head .tag{ margin-bottom:var(--sp-2); }

.page-header{ background:var(--paper-alt); border-bottom:3px solid var(--pitch); }
.page-header .wrap{ padding-top:var(--sp-5); padding-bottom:var(--sp-5); }
.page-header p{ color:var(--muted); font-size:var(--step-1); max-width:60ch; }
.page-header-dark{ background:var(--pitch); }
.page-header-dark h1{ color:#fff; }
.page-header-dark p{ color:#D7EADD; }
.page-header-dark .breadcrumb, .page-header-dark .breadcrumb a{ color:#BFE0CB; }

.breadcrumb{ font-size:var(--step--1); color:var(--muted); margin-bottom:var(--sp-2); }
.breadcrumb a{ color:var(--muted); text-decoration:none; }
.breadcrumb a:hover{ color:var(--pitch); text-decoration:underline; }

/* --- grid / cards --------------------------------------------------- */
.grid{ display:grid; gap:var(--sp-4); }
.grid-2{ grid-template-columns:1fr; }
.grid-3{ grid-template-columns:1fr; }
@media (min-width:44rem){ .grid-2{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:56rem){ .grid-3{ grid-template-columns:repeat(3,1fr); } }

.card{ border:3px solid var(--pitch); background:var(--paper); display:flex; flex-direction:column; }
.card-body{ padding:var(--sp-4); flex:1; display:flex; flex-direction:column; }
.card h3{ font-size:var(--step-2); margin-bottom:var(--sp-1); }
.card p{ color:var(--muted); margin-bottom:var(--sp-2); }
.card .btn{ margin-top:auto; align-self:flex-start; }
.card-band{ height:10px; background:var(--emerald); }

/* --- deflist -------------------------------------------------------- */
.deflist{ display:grid; grid-template-columns:auto 1fr; gap:0.4em 1.2em; margin:0 0 var(--sp-3); }
.deflist dt{ font-weight:600; color:var(--pitch); font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.03em; font-size:0.85rem; }
.deflist dd{ margin:0; color:var(--ink); }

/* --- sponsor strip ---------------------------------------------------- */
.sponsor-strip{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-5); justify-content:center; }
.sponsor-strip img{ height:56px; width:auto; filter:grayscale(0%); }
.sponsor-card{ border:3px solid var(--border); background:var(--paper); padding:var(--sp-4); display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-2); }
.sponsor-card img{ height:64px; width:auto; max-width:100%; object-fit:contain; }

/* --- stats row --------------------------------------------------------- */
.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-4); }
@media (min-width:44rem){ .stats{ grid-template-columns:repeat(4,1fr); } }
.stat-num{ font-family:var(--font-display); font-weight:800; font-size:var(--step-4); color:var(--gold); line-height:1; }
.stat-label{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.04em; font-size:0.85rem; color:#D7EADD; margin-top:0.3em; }

/* --- staff -------------------------------------------------------------- */
.staff-card{ border:3px solid var(--pitch); background:var(--paper); }
.staff-photo{ aspect-ratio:1/1; background:var(--paper-alt); border-bottom:3px solid var(--pitch); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:0.8rem; text-align:center; padding:var(--sp-2); }
.staff-body{ padding:var(--sp-3); }
.staff-role{ font-family:var(--font-display); text-transform:uppercase; font-size:0.78rem; letter-spacing:0.05em; color:var(--emerald); font-weight:700; margin-bottom:0.2em; }

/* --- footer -------------------------------------------------------- */
.site-footer{ background:var(--pitch-900); color:#BFE0CB; padding-top:var(--sp-6); padding-bottom:var(--sp-6); }
.site-footer a{ color:#fff; }
.footer-brand{ display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-2); }
.footer-logo{ height:38px; width:auto; }
.footer-heading{ color:#fff; font-family:var(--font-display); font-size:0.9rem; text-transform:uppercase; letter-spacing:0.06em; margin:0 0 var(--sp-2); }
.footer-grid{ display:grid; gap:var(--sp-4); grid-template-columns:1fr; margin-bottom:var(--sp-4); }
@media (min-width:44rem){ .footer-grid{ grid-template-columns:repeat(3,1fr); } }
.footer-grid p, .footer-grid li{ font-size:var(--step--1); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.15); padding-top:var(--sp-3); font-size:0.78rem; color:#9FC4AC; }

/* --- utility ------------------------------------------------------------ */
.section-head h2{ margin-bottom:var(--sp-1); }