/* ------------------------------------------------*/
/* ----------------- VARIABLES --------------------*/
/* ------------------------------------------------*/
:root {
  
    /* article variables */
    --article-max-width: 45rem; /*720px*/
    --avatar-size: 3rem;
    --bg-card: #1a1a1a;
    --text-light: #e0e0e0;
    --primary-purple: hsl(208, 59%, 67%);
    --border-radius-lg: 1.5rem;
}


/* ---------------------------------------------*/
/* ----------------- LAYOUT --------------------*/
/* ---------------------------------------------*/
.navbar {
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    .img_nav_logo {height:30px;width:auto;}
}
[data-bs-theme="dark"] .navbar {
    box-shadow: 0 2px 4px rgba(0,0,0,.4);
}

.navbar-brand,
.nav-link {
    color: var(--bs-body-color) !important;
}



/* --------------------------------------------------*/
/* ----------------- ARTICLE CSS --------------------*/
/* --------------------------------------------------*/
.article-container {
    max-width: var(--article-max-width);
}

.author-avatar {
    width: var(--avatar-size);
    height: var(--avatar-size);
}


/* GESTIONE immagini chiaro scuro*/
[data-bs-theme="dark"] .img-light { display: none; }
[data-bs-theme="dark"] .img-dark { display: block; }
[data-bs-theme="light"] .img-light { display: block; }
[data-bs-theme="light"] .img-dark { display: none; }


/* --------------------------------------------------*/
/* ---------------------- ALTRO ---------------------*/
/* --------------------------------------------------*/
.social-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--bg-card);
    border: 2px solid transparent;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    text-decoration: none;
}

.social-btn:hover {
    background-color: var(--primary-purple);
    border-color: var(--primary-purple);
    color: white;
    transform: translateY(-3px);
}


.action-card {
    background-color: var(--bg-card);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem 2rem;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    display: block;
    color: var(--text-light);
}

.action-card:hover {
    border-color: var(--primary-purple);
    background-color: rgba(139, 47, 201, 0.1);
    transform: translateY(-2px);
    color: var(--text-light);
}

.action-card i {
    color: var(--primary-purple);
    margin-right: 0.75rem;
}

@media (max-width: 576px) {
    :root {
        --profile-size: 140px;
    }
    
    .action-card {
        padding: 1.25rem 1.5rem;
    }
}