*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* Sfondi Discord-soft */
    --bg:         #313338;
    --bg2:        #2b2d31;
    --bg3:        #232428;
    --border:     #3f4147;

    /* Bandiera italiana */
    --green:      #009246;
    --green-h:    #00b455;
    --red:        #ce2b37;
    --red-h:      #e0404c;
    --white:      #f0f0f0;

    /* Accent principale = verde */
    --accent:     #009246;
    --accent-h:   #00b455;

    /* Testi */
    --text:       #f2f3f5;
    --text-soft:  #d5d8dc;
    --text-muted: #b5bac1;

    /* Utility */
    --danger:     #ce2b37;
    --success:    #00a355;
    --radius:     8px;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-h); }

img { max-width: 100%; display: block; }

/* ── NAV ── */
.site-nav {
    background: var(--bg3);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
    letter-spacing: .01em;
}

/* tricolore nel logo: LSLI con le tre lettere colorate */
.nav-logo .logo-it {
    display: inline-flex;
    gap: 1px;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: .03em;
}
.nav-logo .logo-it .g { color: var(--green); }
.nav-logo .logo-it .w { color: var(--white); }
.nav-logo .logo-it .r { color: var(--red); }

.nav-logo-img {
    height: 32px;
    width: 32px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
}

.nav-links {
    display: flex;
    gap: 2px;
    list-style: none;
}

.nav-links a {
    color: var(--text-soft);
    font-size: .88rem;
    font-weight: 500;
    padding: 7px 14px;
    border-radius: var(--radius);
    transition: color .15s, background .15s;
}

.nav-links a:hover { color: var(--text); background: var(--bg2); }
.nav-links a.active { color: var(--green); background: rgba(0,146,70,.12); }

.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: var(--text);
    font-size: 1.4rem;
}

/* ── MAIN ── */
main { flex: 1; }

/* ── HERO ── */
.hero {
    background: var(--bg3);
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--green) 33%, var(--white) 33% 66%, var(--red) 66%) 1;
    padding: 80px 24px 72px;
    text-align: center;
}

.hero h1 {
    font-size: clamp(1.9rem, 5vw, 3rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin-bottom: 16px;
    color: var(--text);
}

.hero h1 .hl-g { color: var(--green); }
.hero h1 .hl-r { color: var(--red); }

.hero p {
    color: var(--text-soft);
    font-size: 1.02rem;
    max-width: 560px;
    margin: 0 auto 32px;
}

.hero-badges {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 36px;
}

.badge {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: .8rem;
    color: var(--text-soft);
    display: flex;
    align-items: center;
    gap: 6px;
}

.badge .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 6px var(--success);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(.6); }
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 26px;
    border-radius: var(--radius);
    font-size: .9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: filter .15s, transform .1s;
    border: none;
    text-decoration: none;
}

.btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--green); color: #fff; }
.btn-outline  { background: transparent; border: 1px solid var(--border); color: var(--text-soft); }
.btn-outline:hover { border-color: var(--green); color: var(--green); filter: none; }
.btn-discord  { background: #5865f2; border: none; color: #fff; }
.btn-discord:hover { background: #4752c4; filter: none; color: #fff; }

.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── CONTAINER ── */
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* ── SECTION ── */
.section { padding: 60px 0; }

.section-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: -.01em;
    color: var(--text);
}

.section-sub {
    color: var(--text-muted);
    font-size: .88rem;
    margin-bottom: 32px;
}

/* ── CARDS NEWS ── */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 22px;
    transition: border-color .2s, transform .15s;
}

.card:hover { border-color: var(--green); transform: translateY(-2px); }

.card-date {
    font-size: .72rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.card h3 { font-size: .95rem; font-weight: 600; margin-bottom: 8px; color: var(--text); }
.card p, .card .rich-content { font-size: .86rem; color: var(--text-soft); line-height: 1.55; }

.card-tag {
    display: inline-block;
    background: rgba(0,146,70,.15);
    color: var(--green);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 8px;
}

/* ── STAFF ── */
.staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px;
}

.staff-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 24px 18px;
    text-align: center;
    transition: border-color .2s;
}

.staff-card:hover { border-color: var(--green); }

.staff-avatar {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: var(--bg3);
    border: 2px solid var(--border);
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    overflow: hidden;
}

.staff-avatar img { width: 100%; height: 100%; object-fit: cover; }
.staff-card h3 { font-size: .9rem; font-weight: 600; margin-bottom: 4px; color: var(--text); }

.staff-role {
    font-size: .74rem;
    color: var(--green);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ── REGOLAMENTO ── */
.rules-list { display: flex; flex-direction: column; gap: 12px; }

.rule-item {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--green);
    border-radius: 0 10px 10px 0;
    padding: 18px 22px;
}

.rule-item h3 {
    font-size: .92rem;
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
}

.rule-num {
    background: var(--green);
    color: #fff;
    border-radius: 4px;
    padding: 1px 7px;
    font-size: .72rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── RICH CONTENT ── */
.rich-content {
    font-size: .88rem;
    color: var(--text-soft);
    line-height: 1.7;
}

.rich-content p { margin-bottom: .7em; }
.rich-content p:last-child { margin-bottom: 0; }

.rich-content h1,
.rich-content h2,
.rich-content h3,
.rich-content h4 {
    color: var(--text);
    font-weight: 600;
    margin: 1.2em 0 .4em;
    line-height: 1.3;
}

.rich-content h1 { font-size: 1.15rem; }
.rich-content h2 { font-size: 1.02rem; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.rich-content h3 { font-size: .95rem; }
.rich-content h4 { font-size: .88rem; color: var(--text-soft); }

.rich-content ul,
.rich-content ol {
    padding-left: 1.5em;
    margin-bottom: .7em;
}

.rich-content li { margin-bottom: .3em; }

.rich-content strong { color: var(--text); font-weight: 600; }
.rich-content em { font-style: italic; color: var(--text-soft); }

.rich-content blockquote {
    border-left: 3px solid var(--green);
    padding: 6px 14px;
    color: var(--text-muted);
    background: rgba(0,146,70,.06);
    border-radius: 0 6px 6px 0;
    margin: .8em 0;
    font-style: italic;
}

.rich-content a { color: var(--green); }
.rich-content a:hover { color: var(--green-h); }

.rich-content hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1em 0;
}

/* ── DIVIDER ── */
.divider { border: none; border-top: 1px solid var(--border); margin: 0; }

/* ── EMPTY STATE ── */
.empty-state {
    text-align: center;
    padding: 56px 20px;
    color: var(--text-muted);
    font-size: .88rem;
}

/* ── PAGE HEADER ── */
.page-header {
    background: var(--bg3);
    border-bottom: 1px solid var(--border);
    padding: 36px 0 28px;
}

.page-header h1 { font-size: 1.7rem; font-weight: 700; margin-bottom: 4px; color: var(--text); }
.page-header p  { color: var(--text-muted); font-size: .88rem; }

/* ── FOOTER ── */
.site-footer {
    background: var(--bg3);
    border-top: 1px solid var(--border);
    padding: 24px;
    text-align: center;
    font-size: .78rem;
    color: var(--text-muted);
}

.site-footer a { color: var(--text-muted); }
.site-footer a:hover { color: var(--green); }

/* ── FONTAWESOME OVERRIDES ── */
.fa-solid, .fa-regular, .fa-brands {
    line-height: 1;
    vertical-align: middle;
}

/* Nav toggle */
.nav-toggle .fa-solid { font-size: 1.1rem; color: var(--text-muted); }
.nav-toggle:hover .fa-solid { color: var(--text); }

/* Sidebar hamburger */
.sidebar-toggle .fa-solid { font-size: .9rem; }

/* Connect box copy icon */
.copy-icon { font-size: .78rem; color: var(--text-muted); }

/* Modulo trigger chevron */
.modulo-chevron { transition: transform .2s; font-size: .75rem; }
.modulo-row.open .modulo-chevron { transform: rotate(180deg); }

/* Sidebar widget titles */
.sidebar-widget-title .fa-solid { font-size: .65rem; opacity: .7; }

/* Bottone connetti: icone allineate */
.btn .fa-solid,
.btn .fa-brands { font-size: .85em; }

/* File upload */
.file-upload-area .fa-folder-open { font-size: 1rem; color: var(--green); }
.file-item .fi-icon { font-size: .75rem; color: var(--green); }

/* Search icon regolamento */
.search-icon.fa-solid { font-size: .85rem; }

/* Accordion arrow */
.accordion-arrow { font-size: .75rem; }
.accordion-item.open .accordion-arrow { transform: rotate(180deg); }

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0; right: 0;
        background: var(--bg3);
        border-bottom: 1px solid var(--border);
        padding: 10px 14px;
        gap: 2px;
    }
    .nav-links.open { display: flex; }
    .nav-toggle { display: block; }
    .site-nav { position: relative; }
    .hero { padding: 50px 20px 44px; }
    .section { padding: 40px 0; }
}