body{
	background:#F7FBFB;
	
}

#simplified-button {
    border: none;
    background: none;
    padding: 0;
    margin: 0;

    color: var(--primary-color);
    font: inherit;
    font-weight: 600;

    cursor: pointer;
}

#simplified-button:hover {
    text-decoration: underline;
}

.doc-article-header{

   /* position:sticky; */
    max-width:850px;
    width: 100%;

    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;

    z-index:100;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:2rem;

    padding:1rem 1.5rem;

    margin-bottom:0.5rem;

    background:#fff;

    border:1px solid #e5e7eb;
    border-radius:12px;

    box-shadow:0 2px 8px rgba(0,0,0,.05);


}

.doc-article-meta{

    max-width:850px;
     width: 100%;

    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
	margin-bottom:0.3rem;

    position:relative;
	
	background:#fff;

    border-radius:18px;

    box-shadow:0 8px 30px rgba(0,0,0,.06);

    padding:0.3rem;
	text-align:center;
	
	font-size: 0.94rem;

}



.doc-article-info{

    margin:0;
    

    font-size:.78rem;

    line-height:1.5;

}

.doc-article-brand{

    display:flex;
    align-items:center;
    gap:.8rem;

    text-decoration:none;
    color:inherit;

}

.doc-article-brand img{

    width:200px;
    height:auto;

}

.doc-article-brand span{

    font-size:1.45rem;
    font-weight:700;

    color:var(--primary);

}

#article-auth-status {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border: 1px solid #d8e5e8;
    border-radius: 999px;
    background: #f5f9fa;
    color: #54717c;
    font-size: 0.8rem;
    white-space: nowrap;
}



.doc-article-close{

   background:transparent;
   opacity: 0.7;
    color:var(--primary-text);
    border:none;
    border-radius:10px;

    padding:.75rem 1.3rem;

    font-weight:600;

    cursor:pointer;

    transition:.2s;

}

.doc-article-close:hover {
    color: var(--primary-color);
    background: #f1f7f7;
}

.doc-article-separator {
    display: inline-block;
    width: 1px;
    height: 14px;
    margin: 0 8px;
    background: var(--primary-text);
    opacity: .35;
    vertical-align: middle;
}
.doc-article-page{

    max-width:850px;
    margin:0 auto;

    position:relative;
	
	background:#fff;

    border-radius:18px;

    box-shadow:0 8px 30px rgba(0,0,0,.06);

    padding:3rem;

}
@media (min-width: 1300px) {
	
    .doc-article-header, .doc-article-meta, .doc-article-page {
        max-width: 920px;
    }
}

@media (min-width: 1600px) {
    .doc-article-header, .doc-article-meta, .doc-article-page {
        max-width: 1100px;
    }
}



.article{
/*
    display:flex;
    flex-direction:column;
	*/
   font-family: "Lato", sans-serif;

}

.article h1,
.article h2,
.article h3{

    font-family: "Inter", sans-serif;

}

.article h1{
	text-align:center;
    margin-top:0;
    margin-bottom:1rem;


    font-size:2.0rem;
    line-height:1.2;

    color:var(--primary-color);

}


/* Titoli H2 degli articoli */

/* Titoli H2 degli articoli */
.article h2 {
    position: relative;

    margin-top: 1rem;
    margin-bottom: .8rem;

    padding: 10px 18px 10px 18px;

    color: var(--primary-title);
    background: #f0f5f8;

    border-radius: 10px;

    font-weight: 650;
    line-height: 1.4;
}


/* Accento laterale H2 */
.article h2::before {
    content: "";
    position: absolute;

    top: 0px;
    bottom: 0px;
    left: -12px;

    width: 12px;

    background: var(--primary-color-light);

    /* Arrotondamento solo sul lato sinistro */
    border-radius: 8px 0 0 8px;
}




.article h3{
	margin-top:0.8rem;
    margin-bottom:.4rem;
	
	padding-left: 12px;

    font-size:1.15rem;
    line-height:1.4;

    color:var(--heading-color);

}




.article p{

    margin-top:0.4rem;
    margin-bottom:0.4rem;
	
	padding-left: 12px;

    font-size:1.16rem;
    line-height:1.62;
   

    text-align:justify;

}

.article b {
    font-weight: 700;
    color: var(--primary-color);

    padding: 0px 4px;
    
}

.article b.first-inline {
    padding-left: 0;
}



/* ==========================
   Elenchi articolo
========================== */


.article ul {
    margin-top: 6px;
    margin-bottom: 6px;
    padding-left: 20px;
    list-style: none;
}

.article li {
    position: relative;
	font-size:1.1rem;

    margin-top: 8px;
    margin-bottom: 8px;
    padding-left: 28px;
    font-weight: 520;

      color: var(--primary-dark-saturated);
	background:transparent;
    filter:brightness(0.8);
}



.article li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 18px;
    height: 18px;
	
	opacity:0.8;

    background-color: var(--primary-color);

    mask: url("../assets/molecola.svg") no-repeat center;
    mask-size: contain;

    -webkit-mask: url("../assets/molecola.svg") no-repeat center;
    -webkit-mask-size: contain;
	
	transform: scaleX(-1);
}

.article hr{

    margin-top:1.5rem;
    margin-bottom:1.5rem;

    border:none;

    border-top:1px solid #d9e2e8;

}

.article img{

    width:100%;
    height:auto;

    border-radius:12px;

}
.article-image {
    display: block;
    margin: 0.8rem auto 1rem;
}

@media (max-width: 600px) {

    .article-image-grid:has(> .article-image:only-child) .article-image {
        width: 100% !important;
    }

}



.article table {
    width: 100%!important;
	table-layout: auto;
    margin: 1.7rem 0;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid #d4e8f0;
    border-radius: 12px;
    background: #fff;
    font-size: 1.1rem;
    line-height: 1.5;
}

.article-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}



.article table.table-scroll {
    table-layout: auto;
    width: var(--table-width);
    min-width: var(--table-width);
    max-width: none;
    margin: 1.7rem 0;
}



.article table th:first-child,
.article table td:first-child {
    min-width: 120px;
    box-sizing: border-box;
}
	


.article table th {
    background: var(--primary-color);
    color: #ffffff;
    font-weight: 600;
    text-align: left;
    padding: 10px 12px;
    border-bottom: 2px solid var(--primary-dark-saturated);
}

.article table td {
    padding: 11px 14px;
    border-bottom: 1px solid #e1e7e9;
    color: #263238;
    vertical-align: middle;
}

.article table tbody tr:nth-child(odd) {
    background: rgb(250, 250, 250) ;
}
.article table tbody tr:nth-child(even) {
    background: rgb(245, 245, 255) ;
}

.article table tbody tr:last-child td {
    border-bottom: none;
}

.article table tbody td:not(:first-child) {
    text-align: center;
}

/* Prima colonna più evidente */
.article table tbody td:first-child {
    font-weight: 600;
    color: var(--primary-dark-saturated);
}



/* Mobile */
@media (max-width: 600px) {
	
	.article table {
		display: table;
		overflow: visible;
		white-space: normal;
		font-size: 0.97rem;
	}


}


.doc-article-tags{

    display:flex;

    flex-wrap:wrap;

    gap:.5rem;

    margin-top:2rem;

}

.doc-article-tag{

    padding:.35rem .8rem;

    border-radius:999px;

    background:#eef5f8;

    color:#3c6178;

    font-size:.8rem;

}

#navigator-button {
    padding: 0;
    border: none;
    background: none;
    color: var(--primary-text);
    font: inherit;
    cursor: pointer;
    transition: .2s;
}

#navigator-button:hover {
    color: var(--primary-dark);
}

#navigator-button.active {
    font-weight: 600;
    color: var(--primary-dark);
}

.article-share-button {
    position: fixed;
    z-index: 9999;
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #174f5f;
    color: white;
    font-size: 20px;
    cursor: pointer;

    opacity: 0;
    pointer-events: none;
    transition: opacity 1.4s ease;
}

.article-share-button.visible {
    opacity: 1;
    pointer-events: auto;
}

.article-share-button:hover {
    background: rgba(23, 79, 95, 1);
}

.article-share-menu {
	position: fixed;
	z-index: 10000;
	background: white;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
	padding: 5px;
}

.article-share-menu button {
	display: block;
	width: 120px;
	padding: 8px 10px;
	border: none;
	background: white;
	text-align: left;
	cursor: pointer;
}