/* FNC UGL Liguria – styles.css */
:root{
  --primary: #2a89ff;       /* light blue accent */
  --primary-600: #1f6ed4;
  --primary-050: #eaf4ff;
  --bg: #ffffff;            /* white background */
  --text: #0f172a;          /* slate-900 */
  --muted: #475569;         /* slate-600 */
  --border: #e2e8f0;        /* slate-200 */
  --radius: 12px;
  --shadow: 0 10px 25px rgba(16, 42, 67, .08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}
img{max-width:100%;height:auto}
.container{width:min(1100px, 92vw);margin-inline:auto}

p.justified{text-align: justify;}

#about {
  scroll-margin-top: 100px;
}

#sectors {
  scroll-margin-top: 100px;
}

#events {
  scroll-margin-top: 100px;
}

#media {
  scroll-margin-top: 100px;
}

#contact {
  scroll-margin-top: 100px;
}

#main {
  scroll-margin-top: 100px;
}

#join {
  scroll-margin-top: 100px;
}

/* Accessibility */
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:1rem;top:1rem;background:#000;color:#fff;padding:.5rem 1rem;border-radius:8px;z-index:1000}

/* Header */
.site-header{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--border);z-index:100}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:.7rem 0}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit}
.brand-name{font-weight:700}

.site-nav ul{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
.site-nav a{color:inherit;text-decoration:none;padding:.5rem .7rem;border-radius:8px}
/*.site-nav a:hover{background:var(--primary-050)}*/

.nav-toggle{display:none;background:none;border:0;cursor:pointer}
.nav-toggle .bar{display:block;width:22px;height:2px;background:#111;margin:5px 0;border-radius:2px}

/* Buttons */
.btn{display:inline-block;padding:.7rem 1rem;border-radius:10px;text-decoration:none;font-weight:600;border:1px solid transparent;transition:all .2s;}
.btn-primary{background:var(--primary);color: #ffffff !important;font-weight: bold;}
.btn-outline{background:#fff;color:var(--primary);border-color:var(--primary);cursor: pointer;}
.blue-button {
  background-color: var(--primary);
  color: #ffffff;
  font-weight: bold;
  cursor: pointer;
}


/* Hero */
.hero{background:linear-gradient(135deg, #f6fbff 0%, #ffffff 40% 60%, #f1f8ff 100%);padding:4rem 0 3rem;border-bottom:1px solid var(--border)}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
.hero-copy h1{font-size:clamp(1.8rem, 2.2vw + 1rem, 3rem);line-height:1.2;margin:0 0 1rem}
.hero-copy p{color:var(--muted);max-width:60ch}
.hero-visual{height:280px;border-radius:var(--radius);box-shadow:var(--shadow);
  background:
    radial-gradient(60px 60px at 20% 80%, rgba(42,137,255,.15), transparent),
    radial-gradient(50px 50px at 80% 20%, rgba(42,137,255,.15), transparent),
    linear-gradient(120deg, #ffffff, #dff2ff);
  position:relative;overflow:hidden;border:1px solid var(--border)}
.hero-visual:before,
.hero-visual:after{
  content:"";position:absolute;inset:0;background-repeat:no-repeat;background-size:cover;opacity:.7
}
.hero-visual:before{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 280"><g fill="none" stroke="%232a89ff" stroke-width="3" opacity=".35"><path d="M40 80 h320 v120 h-320 z"/><path d="M40 80 l160 90 l160 -90"/></g></svg>')}

/* Sections */
.section{padding:3rem 0}
.section.alt{background:#fcfeff;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section-header{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.5rem}
.section-header p{color:var(--muted)}
.section-header.with-controls{align-items:stretch}
.section-header.with-controls>div:first-child{flex:1}

/* Features */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.feature{padding:1rem;border:1px solid var(--border);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow)}

/* Sector cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)}
.card h3{margin-top:0}
.card .links{padding-left:1.1rem;color:var(--muted)}
.card .links a{color:var(--primary)}

/* Events */
.filters{display:flex;gap:.5rem;align-items:center;margin-top:.5rem}
.chip{border:1px solid var(--border);background:#fff;border-radius:999px;padding:.4rem .8rem;cursor:pointer}
.chip.active,.chip:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-050)}

.event-list{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.event{display:flex;gap:1rem;border:1px solid var(--border);border-radius:var(--radius);padding:1rem;background:#fff;box-shadow:var(--shadow)}
.event-date{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:64px;border:1px solid var(--border);border-radius:10px;background:var(--primary-050);color:var(--primary)}
.event-date .day{font-weight:800;font-size:1.6rem;line-height:1}
.event-date .mon{font-size:.9rem}
.event-date .year{font-size:.9rem}
.event .meta{color:var(--muted)}

/* Media */
.media-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.media-card{display:grid;grid-template-columns:180px 1fr;gap:1rem;border:1px solid var(--border);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);padding:1rem}
.media-thumb{border-radius:10px;border:1px solid var(--border);background:linear-gradient(135deg, #dff2ff, #ffffff)}
.media-thumb.yt{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 80"><rect width="120" height="80" rx="10" fill="%23ff0000"/><polygon points="50,55 50,25 80,40" fill="white"/></svg>');background-size:cover;background-position:center}
.media-thumb.tw{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 80"><rect width="120" height="80" rx="10" fill="%232a89ff"/><path d="M30 45c20 15 40 15 60-10" stroke="white" stroke-width="6" fill="none" stroke-linecap="round"/></svg>');background-size:cover;background-position:center}
.media-thumb.wp{background-image:url('../assets/wzp.png');background-size:cover;background-position:center}

.social-list{display:flex;gap:.6rem;flex-wrap:wrap}
.social{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:#fff;color:var(--primary);font-weight:700;text-decoration:none}

/* CTA band */
.cta-band{background:linear-gradient(90deg, #eaf4ff, #ffffff);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.contact-card{border:1px solid var(--border);border-radius:var(--radius);padding:1rem;background:#fff;box-shadow:var(--shadow)}
.map-card{border:1px solid var(--border);border-radius:var(--radius);padding:.5rem;background:#fff;box-shadow:var(--shadow)}

/* Footer */
.site-footer{border-top:1px solid var(--border);padding:1.2rem 0;background:#fff}
.footer-inner{display:flex;align-items:center;justify-content:space-between}
.back-to-top{text-decoration:none;color:var(--primary)}

/* Responsive */
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr}
  .features-grid,.cards,.event-list,.media-grid,.media-card,.contact-grid{grid-template-columns:1fr}
  .media-card{grid-template-columns:140px 1fr}
}
@media (max-width: 700px){
  .site-nav{position:fixed;inset:64px 0 auto 0;background:#fff;border-bottom:1px solid var(--border);transform:translateY(-110%);transition:transform .2s;padding:1rem}
  .site-nav ul{flex-direction:column}
  .nav-toggle{display:block}
  .site-nav.open{transform:translateY(0)}
}