/* =========================================
   ARTICLE NAVIGATOR
   ========================================= */

.article-navigator{

    position:fixed;
	width:300px;

    right:16px;
    top:50%;

    transform:translateY(-50%);

    display:flex;
    flex-direction:row-reverse;
    align-items:center;
    gap:8px;
	
	background: transparent;

    z-index:1000;

}
.article-navigator-clickable {
    cursor: pointer;
}

.article-navigator-clickable:hover {
    color: var(--primary-dark);
}

/* =========================================
   FRECCE
   ========================================= */

.article-navigator-arrows{

    display:flex;
    flex-direction:column;
    gap:8px;

}


.article-navigator-arrows button{

    width:48px;
    height:48px;

    padding:0;

    color:var(--primary-text);
    border:none;

    border-radius:50%;

    background:rgba(var(--primary-color-extralight-rgb),.55);

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

    cursor:pointer;

    z-index:20;

    transition:.2s;
	
	font-weight:600;

}


.article-navigator-arrows button:hover{

    background:rgba(var(--primary-color-extralight-rgb),.75);

}


/* =========================================
   PANNELLO
   ========================================= */

.article-navigator-panel{
	position:relative;
    width:200px;
    max-height:70vh;
	background:var(--primary-color-light);
	border-radius:10px;
    box-shadow:0 4px 14px rgba(0,0,0,.12);
	overflow:hidden;

}

.article-navigator-panel.fade-top::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8%;
    pointer-events: none;
    z-index: 80;
    background: linear-gradient(
        to top,
		transparent,
		var(--primary-color-light) 30%,
        color-mix(in srgb, var(--primary-color-light) 70%, var(--secondary-dark))
        
    );
}

.article-navigator-panel.fade-bottom::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8%;
    pointer-events: none;
    z-index: 80;
    background: linear-gradient(
		to bottom,
		transparent,
		var(--primary-color-light) 30%,
		color-mix(in srgb, var(--primary-color-light) 70%, var(--secondary-dark))
	);
}

.article-navigator.open .article-navigator-panel{
	width:300px;
}


/* =========================================
   BREADCRUMB
   ========================================= */

.article-navigator-breadcrumb{

    display:block;

    width:100%;
	margin-left:auto;

    padding-left:8px;
	padding-right:30px;
	padding-top:20px;
	padding-bottom:10px;

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

    border:none;

    cursor:pointer;

    text-align:center;

    font:inherit;

    transition:.2s;

}


.article-navigator-breadcrumb:hover{

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

}


/* =========================================
   INDICE
   ========================================= */

.article-navigator-index{
   
    display:none;
	background:inherit;
	position:relative;

}


/* =========================================
   CLOSE BUTTON
   ========================================= */

.article-navigator-close{

    position:absolute;

    top:2px;
    right:2px;

    width:34px;
    height:34px;

    padding:0;

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

    border:none;

    cursor:pointer;

    z-index:500;

    transition:.2s;
	
	font-size:18px;

}


.article-navigator-close:hover{

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

}


/* =========================================
   STATO APERTO
   ========================================= */

.article-navigator.open .article-navigator-breadcrumb{

    display:none;

}


.article-navigator.open .article-navigator-index{

    display:flex;

    flex-direction:column;

    max-height:70vh;

    overflow-y:auto;

    padding:12px;

    overscroll-behavior: contain;

}


/* =========================================
   ELEMENTI INDICE
   ========================================= */

.article-navigator-index button{

    width:100%;

    padding:7px 10px;

    border:none;
    border-radius:6px;

    background:inherit;

    color:var(--primary-text);

    text-align:left;

    font:inherit;

    cursor:pointer;

    transition:.15s;
	
	margin: 4px 0;
	
	scroll-margin: 10px;
	
	opacity:1;
	transition: opacity 0.3s ease;

}






.article-navigator-item:hover, .article-navigator-start:hover, .article-navigator-end:hover{

filter: brightness(1.07) saturate(80%);



}


/* Sezione corrente */

.article-navigator-item.current, .article-navigator-start.current,.article-navigator-end.current{
	opacity:1;
    background:var(--primary-color);
	color: white;
	opacity:0.78;
	border: 1px solid var(--primary-dark);

    font-weight:550;
	scroll-margin:40px;


}




/* =========================================
   GERARCHIA TITOLI
   ========================================= */

.article-navigator-h1{

    font-weight:600;

}


.article-navigator-h2{

    padding-left:22px !important;

}


.article-navigator-h3{

    padding-left:36px !important;

}


/* =========================================
   INIZIO / FINE
   ========================================= */

.article-navigator-start,
.article-navigator-end{

    font-weight:600;

}


/* =========================================
   VISIBILITÀ NAVIGATORE
   ========================================= */

.article-navigator:not(.visible) .article-navigator-arrows,
.article-navigator:not(.visible) .article-navigator-panel{
    opacity: 0;
	transition: opacity 1s ease;
}

.article-navigator.visible .article-navigator-arrows,
.article-navigator.visible .article-navigator-panel {
    opacity: 1;
	transition: opacity 2s ease;
}


.article-navigator:not(.visible){

    pointer-events:none;

}

.article-navigator.visible {
    pointer-events:auto;
}


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

@media (max-width:700px){



    .article-navigator {
        right:16px;
        top:auto;
        bottom:10%;
        transform:none;
        background:transparent;
    }


    .article-navigator-panel {
        width:200px;
    }

	.article-navigator.open .article-navigator-panel{
		width:270px;
	}

    .article-navigator-arrows button{

        width:42px;
        height:42px;

    }

    .article-navigator-index{

        max-height:65vh;

    }

}