body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            margin: 0;
            background-color: #f0f2f5;
            color: #1c1e21;
        }
        header {
            background-color: #ffffff;
            padding: 20px;
            text-align: center;
            border-bottom: 1px solid #dddfe2;
            position: relative;
        }
        #language-selector-container {
            position: absolute;
            top: 20px;
            right: 20px;
        }
        #language-selector {
            padding: 8px;
            border-radius: 6px;
            border: 1px solid #dddfe2;
            background-color: #f0f2f5;
            font-size: 1em;
        }

        @media (max-width: 768px) {
            #language-selector-container {
                position: static;
                margin-bottom: 15px;
            }
        }
        header h1 {
            margin: 0;
            font-size: 2.5em;
            color: #000;
        }
        header #subtitle {
            margin: 5px 0 0;
            font-size: 1.2em;
            font-weight: normal;
            color: #606770;
        }
        .visually-hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            padding: 0;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            border: 0;
        }
        main {
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        #articles-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }
        .article-card {
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            text-decoration: none;
            color: inherit;
        }
        .article-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        .article-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        .article-card-content {
            padding: 15px;
        }
        .article-card-content h3 {
            margin: 0 0 10px;
            font-size: 1.2em;
        }
        .article-card-content p {
            margin: 0;
            font-size: 0.9em;
            color: #606770;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        #article-view {
            background-color: #ffffff;
            padding: 20px 40px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        #article-view img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
        }
        #article-view h1 {
            font-size: 2.2em;
        }
        #article-view p {
            line-height: 1.6;
        }
        .post-author {
            color: #606770;
            font-size: 1em;
            font-style: italic;
            margin-bottom: 20px;
            margin-top: -10px;
            border-bottom: 1px solid #dddfe2;
            padding-bottom: 20px;
        }
        .back-button {
            display: inline-block;
            margin-bottom: 20px;
            padding: 10px 15px;
            background-color: #1877f2;
            color: white;
            text-decoration: none;
            border-radius: 6px;
            font-weight: bold;
        }
        .footer-back-button {
            margin-top: 30px;
            text-align: center;
        }
        footer {
            text-align: center;
            padding: 20px;
            margin-top: 40px;
            background-color: #ffffff;
            border-top: 1px solid #dddfe2;
            color: #606770;
        }
        footer p {
            margin: 5px 0;
        }
        footer a {
            color: #0056b3;
            text-decoration: none;
        }
        footer a:hover {
            text-decoration: underline;
        }
        .subscribe-link {
            font-size: 0.8em;
            font-weight: bold;
            text-decoration: none;
            color: #0056b3;
            background-color: #e7f3ff;
            padding: 8px 12px;
            border-radius: 6px;
            transition: background-color 0.3s;
        }
        .subscribe-link:hover {
            background-color: #dcebff;
            text-decoration: none;
        }
        .pagination-controls {
            display: flex;
            justify-content: space-between;
            margin-top: 40px;
        }
        .pagination-controls a {
            background-color: #ffffff;
            padding: 10px 20px;
            border-radius: 6px;
            text-decoration: none;
            color: #1c1e21;
            font-weight: bold;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: all 0.2s;
        }
        .pagination-controls a:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
            text-decoration: none;
        }
        /* Styles for thank-you and newsletter pages */
        .container {
            background-color: #ffffff;
            padding: 40px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            max-width: 600px;
            margin: 40px auto;
            text-align: center;
        }
        .article-card-date {
            font-size: 0.8em;
            color: #606770;
            margin-bottom: 10px;
        }
        .article-card-tags {
            margin-top: 15px;
        }
        .tag {
            display: inline-block;
            background-color: #e7f3ff;
            color: #0056b3;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.75em;
            font-weight: bold;
            margin-right: 5px;
            margin-bottom: 5px;
        }
        .tag-filter-button {
            padding: 8px 16px;
            border: 1px solid #ddd;
            border-radius: 20px;
            background-color: #fff;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 0.9em;
        }
        .tag-filter-button:hover {
            background-color: #f0f2f5;
        }
        .tag-filter-button.active {
            background-color: #0056b3;
            color: white;
            border-color: #0056b3;
        }
        #view-more-container {
            display: flex;
            justify-content: center;
            margin-top: 40px;
        }
        .view-more-button {
            background-color: #ffffff;
            padding: 10px 20px;
            border-radius: 6px;
            text-decoration: none;
            color: #1c1e21;
            font-weight: bold;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: all 0.2s;
            border: none;
            cursor: pointer;
        }
        .view-more-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
        .view-more-button:disabled {
            background-color: #e9ebee;
            color: #bec3c9;
            cursor: not-allowed;
            transform: none;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        @media (max-width: 768px) {
            #tag-filter-bar {
                display: none !important;
            }
        }

/* ===== Stile per Link Autore negli Articoli ===== */
.post-author a {
    display: inline-flex;
    align-items: center;
    gap: 0.4em; /* Spazio tra icona e testo */
    text-decoration: none;
    color: #333;
    font-weight: 600;
    border-bottom: 1px dotted #999;
    transition: color 0.2s, border-bottom-color 0.2s;
}

.post-author a:hover {
    color: #007bff; /* Un blu per evidenziare */
    border-bottom-color: #007bff;
}

/* Aggiunge l'icona "utente" prima del link */
.post-author a::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor; /* L'icona prende il colore del testo */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
}


/* ===== Stile per Link Social nella Pagina Autore ===== */
.author-social-link {
    font-size: 0; /* Nasconde il testo originale (es. "Linkedin") */
    display: inline-block;
    width: 28px;
    height: 28px;
    transition: opacity 0.2s;
    opacity: 0.7;
}

.author-social-link:hover {
    opacity: 1;
}

/* Stile base per tutte le icone social */
.author-social-link::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: #2c3e50; /* Colore scuro per le icone */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Icona specifica per LinkedIn */
.author-social-link[href*="linkedin.com"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z'%3E%3C/path%3E%3Crect x='2' y='9' width='4' height='12'%3E%3C/rect%3E%3Ccircle cx='4' cy='4' r='2'%3E%3C/circle%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z'%3E%3C/path%3E%3Crect x='2' y='9' width='4' height='12'%3E%3C/rect%3E%3Ccircle cx='4' cy='4' r='2'%3E%3C/circle%3E%3C/svg%3E");
}

/* Icona specifica per GitHub */
.author-social-link[href*="github.com"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22'%3E%3C/path%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22'%3E%3C/path%3E%3C/svg%3E");
}

/* Icona generica per "sito web" o altri link */
.author-social-link:not([href*="linkedin.com"]):not([href*="github.com"])::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.72'%3E%3C/path%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.72-1.72'%3E%3C/path%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.72'%3E%3C/path%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.72-1.72'%3E%3C/path%3E%3C/svg%3E");
}