/* ==========================================================
   PROGETTO: TUO METABOLISMO
   File: responsive.css

   Tutti gli override responsive del progetto.
   Non inserire @media negli altri CSS.
========================================================== */
@media (max-width:1300px){
/* ================= LOGO ================= */
	.logo img{
		 width: 200px;
	}
	
	nav a{    

    font-size:17px;
    font-weight:600;
	}
	
	nav a.active::before{
		display:none;
	}

}
/* ==========================================================
   TABLET E LAPTOP PICCOLI (1000px)
========================================================== */

@media (max-width:1000px){

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

    .site-header{
        position:relative;
    }

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

    .site-header nav{

        display:none;

        position:absolute;

        top:100%;
        left:0;

        width:100%;

        background:#fff;

        box-shadow:0 10px 30px rgba(0,0,0,.08);

        z-index:1000;

    }

    .site-header nav.active{
        display:block;
    }

    .site-header nav > ul{

		display:flex;

		flex-direction:column;

		gap:0;

		padding:20px 0;

	}

    .site-header nav li{
        width:100%;
    }
	
	.site-header nav li{

		transform: none;

	}

	.site-header nav li:hover{

		transform: none;

	}


    .site-header nav a{

        display:block;

        padding:16px 30px;

    }
	
	
    .site-header nav li.dropdown > .dropdown-menu {
		display:none;
	}

    /* Si apre solo quando il li riceve la classe .open */
    .site-header nav li.dropdown.open > .dropdown-menu {
        display:flex;
        position:static;
        transform:none;
        width:100%;
        min-width:0;
        padding:0;
        background:#fff;
        border:none;
        border-radius:0;
        box-shadow:none;
    }

   
	
	.auth-user {
    width: 90px;
    margin-left: auto;
    flex-shrink: 0;
}

.auth-user-name {
    max-width: 60px;
}

.menu-toggle {
    display: flex;
    flex-shrink: 0;
    margin-left: 8px;
}

}


/* ==========================================================
   TABLET (992px)
========================================================== */

@media (max-width:992px){

    /* ================= VARIABILI ================= */

    :root{
        --spazio-sezione:80px;
    }

    /* ================= LAYOUT ================= */

    .container{
        width:90%;
    }

    /* ================= TIPOGRAFIA ================= */

    h1{
        font-size:2.9rem;
    }

    h2{
        font-size:2rem;
    }

    h3{
        font-size:1.3rem;
    }

    h2.section-title{
        margin-bottom:20px;
    }
	

    /* ================= HERO ================= */

    .hero-content{

        grid-template-columns:1fr;

        gap:50px;

        text-align:center;

    }

    .hero-text p{

        max-width:650px;

        margin:0 auto 35px;

    }

    .hero-image{

        order:2;

        padding:0;

        justify-content:center;

    }

    .hero-image img{

        width:100%;

        max-width:700px;

    }

    .hero-buttons{

        margin:25px 0 0;
		justify-content:center;

    }

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

    .card-grid{

        grid-template-columns:1fr;

    }

}

@media (max-width:900px){
/* ==========================================================
   PAGINA RICERCA SCIENTIFICA
========================================================== */

    .research-grid{

        grid-template-columns:1fr;

    }


    .project-grid{
        grid-template-columns:1fr;
    }
	
	.publication-card img{

		max-height:500px;
	}
}

/* ==========================================================
   SMARTPHONE (768px)
========================================================== */

@media (max-width:768px){

    /* ================= VARIABILI ================= */

    :root{

        --spazio-sezione:64px;

    }

    /* ================= LAYOUT ================= */

    .container{

        width:100%;

        max-width:1200px;

        margin:0 auto;

        padding:0 22px;

        box-sizing:border-box;

    }

    section{

        padding:30px 0;

        scroll-margin-top:-15px;

    }

    /* ================= TIPOGRAFIA ================= */

    h1{

        font-size:2rem;

    }

    h2{

        font-size:1.6rem;

    }

    h3{

        font-size:1.2rem;

    }

    p{

        font-size:.98rem;

        text-align:left;

    }

    /* ================= HERO ================= */

    .hero-text p{

        padding:0 8px;

    }

    .hero-buttons{

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:16px;

    }

    .hero-buttons .btn{

        width:100%;

        max-width:320px;

    }

    /* ================= LANDING ================= */

    #heroproject-status{

        padding:70px 0;

    }

    .heroproject-numbers{

        margin-bottom:45px;

        gap:18px;

    }

    .number-card .number{

        font-size:2.5rem;

    }

    /* ================= SHARE ================= */

    .share-floating{

        position:static;

        display:flex;

        justify-content:center;

        flex-direction:row;

        gap:10px;

        padding:8px;

        margin:0 0 60px;

        border:none;

        opacity:.85;

    }

    .share-btn{

        width:60px;

        height:60px;

    }

    .share-btn img{

        width:50px;

        height:50px;

    }
	
	/* ==========================================================
   ARTICOLI
========================================================== */


    .article-page{

        padding:30px 18px 60px;

    }

    .article h1{

        font-size:2rem;

    }

    .article h2{

        font-size:1.5rem;

    }
	
	/* ==========================================================
   MODAL BOX
========================================================== */



    .modal-box{

        padding:30px 22px;

    }

    .modal-gif{

        width:130px;

    }

}


/* ==========================================================
   PICCOLI SMARTPHONE (480px)
========================================================== */
@media (max-width:480px){
	
	/* ================= ARTICOLO ================= */

 	
	.article p{

    text-align:left;
	}
	
	
	/* ================= HEADER ARTICOLO ================= */
	
	.doc-article-info{
		display:none;
	}

	.doc-article-header {
		padding: 0.7rem 1rem;
		gap: 0.5rem;

		flex-wrap: wrap;
		justify-content: center;
	}

	/* Logo */

	.doc-article-brand {
		order: 1;

		flex: 1 1 100%;
		min-width: 0;

		justify-content: center;
	}

	.doc-article-brand img {
		width: 170px;
		max-width: 100%;
	}

	/* Stato accesso */

	#article-auth-status {
		order: 2;

		flex: 0 1 auto;
		min-width: 0;

		white-space: normal;
		text-align: center;

		font-size: 0.65rem;
	}

	/* Pulsante chiudi */

	.doc-article-close {
		order: 3;

		flex: 0 0 auto;

		padding: 0.5rem 0.6rem;
		font-size: 0.85rem;
	}
	
	

   

    .doc-article-page {
        padding: 2rem 1.2rem;
    }

    .doc-article-meta {
        margin-bottom: 0.25rem;
		font-size:0.9rem;
    }

	
/* ================= LOGO ================= */
	.logo img{
		max-height:64px;
		 width: 180px;
	}
	
	.footer-logo {
		
		 height:60px;
	}
	

	
    h1{

        font-size:1.75rem;

    }

    h2{

        font-size:1.5rem;

    }

    .hero-text{

        padding:0 4px;

    }



    .report-access-icon {
        flex: 0 0 50px;
        width: 50px;
        height: 50px;
    }

    .report-access-icon svg {
        width: 28px;
        height: 28px;
    }


}