/* ==========================================================
   STYLE.CSS
   Sito personale - Simone Pescuma
   ----------------------------------------------------------
   SEZIONI DA MODIFICARE

   1. VARIABILI (colori, font)
   2. BODY
   3. LAYOUT
   4. HEADER
   5. MENU
   6. CONTENUTO
   7. PUBBLICAZIONI
   8. CARD
   9. PULSANTI
   10. FOOTER
   11. RESPONSIVE
==========================================================*/


/* ==========================================================
   1. VARIABILI
   Cambia QUI colori e font
==========================================================*/

:root{

    --primary-color:#991212;

    --secondary-color:#1e293b;

    --background-color:#ffffff;

    --text-color:#334155;

    --light-gray:#f1f5f9;

    --border-color:#e2e8f0;

    --font-main:"Inter",Arial,sans-serif;

    --font-paper:Georgia,"Times New Roman",serif;

    --max-width:1250px;

}


/* ==========================================================
   RESET
==========================================================*/

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    margin:0;

    padding:0;

    background:var(--background-color);

    color:var(--text-color);

    font-family:var(--font-main);

    font-size:17px;

    line-height:1.8;

}

.abstract {
    text-align: justify;
}

/* ==========================================================
   LINK
==========================================================*/

a{

    color:var(--primary-color);

    text-decoration:none;

}

a:hover{

    text-decoration:underline;

}


/* ==========================================================
   LAYOUT
==========================================================*/
.wrapper {

    width:90%;

    max-width:var(--max-width);

    margin:auto;

}

.mobile-break {

    display:none;

}

/* ==========================================================
   HEADER / NAVBAR
==========================================================*/

header {

    background:#991212;

    color:white;

    position:sticky;

    top:0;

    z-index:1000;

    width:100vw;

    margin-left:calc(50% - 50vw);

    box-shadow:0 3px 12px rgba(0,0,0,.15);

}


.navbar {

    width:90%;
    max-width:var(--max-width);

    margin:auto;

    padding:12px 0;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.site-info h1 {

    margin:0;

    font-size:1.8rem;

}


.site-info h1 a {

    color:white;

    text-decoration:none;

    font-weight:700;

    letter-spacing:.5px;

}

.site-description {

    margin:2px 0 0 0;

    color:#f8dddd;

    font-size:.65rem;

}

header img {

    width:55px;

    height:55px;

    border-radius:50%;

}

.paper-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.abstract-container {

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:10px;

}


.abstract-text {

    flex-basis:100%;

}

.abstract-button {

    display:inline-flex;

    align-items:center;

    margin-right:10px;

    padding:8px 14px;

    background:#f1f5f9;

    border:none;

    border-radius:20px;

    color:var(--primary-color);

    font-family:var(--font-main);

    font-size:22px;

    font-size:.95rem;

    font-weight:normal;

    line-height:1.8;

    cursor:pointer;

    transition:.25s;

    text-decoration:none;

}

.abstract-button:hover {

    background:#991212;

    color:white;

    text-decoration:none;

}


.abstract-text {

    display:none;

    margin-bottom:15px;

    padding:15px;

    background:#fafafa;

    border-left:5px solid var(--primary-color);

    border-radius:10px;

    text-align:justify;

   font-size:0.9rem;

}

/* ==========================================================
   MENU
==========================================================*/

nav {

    display:flex;

    gap:8px;

    align-items:center;

}

nav a {

    display:inline-block;

    padding:7px 14px;

    font-weight:600;

    color:white;

    text-decoration:none;

    border-radius:8px;

    transition:.25s;

}


nav a:hover {

    background:white;

    color:#991212;

    text-decoration:none;

}

.menu-toggle {

    display:none;

    background:white;

    color:#991212;

    border:none;

}

/* ==========================================================
   CONTENUTO
==========================================================*/

section{

    padding-top:10px;

}

h1,h2,h3{

    color:var(--secondary-color);

}

h2{

    margin-top:45px;

    border-bottom:2px solid var(--border-color);

    padding-bottom:8px;

}

h3{

    margin-top:30px;

}


/* ==========================================================
   IMMAGINI
==========================================================*/

section img{

    max-width:100%;

    border-radius:10px;

}


/* ==========================================================
   CODICE
==========================================================*/

code{

    background:var(--light-gray);

    padding:3px 6px;

    border-radius:5px;

}

pre{

    background:#0f172a;

    color:white;

    padding:20px;

    border-radius:10px;

    overflow-x:auto;

}


/* ==========================================================
   CARD GENERICHE
==========================================================*/

.card{

    background:white;

    border:1px solid var(--border-color);

    border-radius:12px;

    padding:20px;

    margin:25px 0;

    box-shadow:0 5px 15px rgba(0,0,0,.05);

}

.card h3{

    margin-top:0;

}


/* ==========================================================
   PUBBLICAZIONI
==========================================================*/

.paper{

    background:#fafafa;

    border-left:5px solid var(--primary-color);

    padding:22px;

    margin:25px 0;

    border-radius:10px;

}

.paper h2{

    margin-top:0;

    border:none;

    font-family:var(--font-paper);

}

.authors{

    font-weight:bold;

    margin-top:10px;

}

.journal{

    font-style:italic;

    color:#666;

    margin:10px 0;

}

.links{

    margin-top:15px;

}

.links a{

    display:inline-block;

    margin-right:15px;

    margin-bottom:8px;

    padding:6px 12px;

    background:var(--light-gray);

    border-radius:20px;

    font-size:.95rem;

}

.links a:hover{

    background:var(--primary-color);

    color:white;

    text-decoration:none;

}


/* ==========================================================
   TABELLE
==========================================================*/

table{

    width:100%;

    border-collapse:collapse;

    margin:20px 0;

}

th,td{

    border:1px solid var(--border-color);

    padding:10px;

}

th{

    background:var(--light-gray);

}


/* ==========================================================
   PULSANTI
==========================================================*/

.button{

    display:inline-block;

    background:var(--primary-color);

    color:white;

    padding:10px 18px;

    border-radius:8px;

    font-weight:bold;

}

.button:hover{

    opacity:.9;

    color:white;

    text-decoration:none;

}


/* ==========================================================
   FOOTER
==========================================================*/

footer {

    margin-top:60px;

    border-top:1px solid var(--border-color);

    padding:25px 0;

    text-align:center;

}

/* ==========================================================
   FEATURED PAPER
==========================================================*/

.featured-paper{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

    margin:40px 0;

}


.paper-text{

    flex:2;

}


.paper-image{

    flex:1;

    text-align:center;

}

.paper-image img{

    width:100%;

    max-width:320px;

    border-radius:10px;

    box-shadow:0 5px 15px rgba(0,0,0,.15);

}


.paper-links{

    margin-top:0;

}


.paper-links a{

    display:inline-block;

    margin-right:10px;

    padding:8px 14px;

    background:#f1f5f9;

    border-radius:20px;

    font-size:0.95rem; 

    transition:.25s;

    text-decoration:none;

}


.paper-links a:hover{

    background:#991212;

    color:white;

    text-decoration:none;

}

.abstract {
    text-align: justify;
    font-size: 0.85rem;
}

/* ==========================================================
   HOME - FEATURED PAPER ABSTRACT
==========================================================*/

.featured-paper .abstract {

    background:#f1f5f9;

    padding:20px;

    border-radius:12px;

    text-align:justify;

    font-size:0.85rem;

    line-height:1.7;

}

.featured-paper h3 {

    background:#991212;

    color:white;

    padding:15px 20px;

    border-radius:10px;

    line-height:1.4;

    margin-top:10px;

}

.featured-paper .paper-authors {

    font-size:1.0rem;

    color:var(--text-color);

    font-style:italic;

    margin-bottom:4px;

}

.profile-card{
    display:flex;
    gap:40px;
    align-items:center;
    margin:20px 0 60px;
}

.profile-photo{
    flex:0 0 250px;
    width:250px;
    height:250px;
    border-radius:50%;
    overflow:hidden;
    border:4px solid #991212;
}

.profile-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:left center;
    transform:scale(1.40) translateX(6%);
    display:block;
}

.profile-text{
    flex:1;

    background:#f1f5f9;     

    padding:20px;           

    border-radius:12px;     

    line-height:1.7;

    box-shadow:none;       
}

.profile-text h1{
    margin-top:0;
}

@media (max-width:800px){

.profile-card{
    flex-direction:column;
}

.profile-photo{
    flex:0 0 220px;
    width:220px;
    height:220px;
}

}
/* ==========================================================
   MOBILE
==========================================================*/

@media (max-width:800px){

    .wrapper{

        display:block;

        width:90%;

    }


    header{

        position:sticky;

    }


    header img{

        width:130px;

    }


    .navbar{

        flex-direction:column;

        gap:10px;

    }


    .menu-toggle{

        display:block;

    }


    nav{

        display:none;

        flex-direction:column;

        width:100%;

        margin-top:15px;

    }


nav.open{

    display:flex;

    animation: menuFade .25s ease;

}

   .featured-paper{

    flex-direction:column;

}


.paper-image{

    width:100%;

}


@keyframes menuFade {

    from {

        opacity:0;

        transform:translateY(-10px);

    }


    to {

        opacity:1;

        transform:translateY(0);

    }

}


    nav a{

        width:100%;

        text-align:center;

        margin:8px 0;

    }


    section{

        padding-top:5px;

    }

    .mobile-break {

        display:inline;

    }

}