/* ==========================
  ORGANIGRAMMA & LAYOUT
========================== */

/* Contenitore principale */
.page-layout {
    display: flex;
    flex-wrap: wrap;
    min-height: 100vh;
}

/* Sidebar a sinistra con slide-in */
.sidebar-organigramma {
    width: 25%;
    min-width: 260px;
    padding: 40px 25px;
    box-shadow: 2px 0 12px rgba(0,0,0,0.05);
    transform: translateX(-50px);
    opacity: 0;
    animation: slideInLeft 1s 0.3s forwards;
    overflow: visible;
    position: relative;
}

@keyframes slideInLeft {
    to { transform: translateX(0); opacity: 1; }
}

/* Ruoli sidebar */
.org-role strong {
    color: #0c76a4;
}

/* Main content con fade-in */
.main-content {
    flex: 1;
    padding:40px;
    transform: translateX(50px);
    opacity: 0;
    animation: fadeInRight 1s 0.5s forwards;
}

@keyframes fadeInRight {
    to { transform: translateX(0); opacity: 1; }
}

/* Header organigramma */
.org-header h1 { font-family: 'Montserrat', Arial, sans-serif; font-size: 40px; font-weight: 800; color: #0c76a4; margin: 20px 0 25px; }
.org-header h2 { font-size: 22px; font-weight: 700; color: #000; margin: 3px 0 25px; }
.org-header p { font-size: 15px; color: #666; margin-bottom: 35px; max-width: 90%; }
.org-pretitle {
    position: absolute; top: 20px; left: 25px; font-size: 46px; font-weight: 700;
    color: rgba(0,0,0,0.055); line-height: 1.1; z-index: -1; pointer-events: none; white-space: nowrap;
}
@media (max-width: 768px) { .org-pretitle { top: calc(40px - 1.2rem); left: 25px; } }

/* Liste organigramma */
.org-list { list-style: none; padding: 0; margin-top: 30px; }
.org-list li { margin: 20px 0 12px 0; }
.org-role-title { display: block; font-size: 13px; font-weight: 700; color: #999; text-transform: uppercase; }
.org-name { display: block; font-size: 16px; font-weight: 600; color: #0c76a4; margin-left: 15px; position: relative; }
.org-name::before { content:"•"; position: absolute; left: -15px; top: 50%; transform: translateY(-50%); color:#0c76a4; font-size:20px; line-height:1; }

/* Titoli principali */
h1, h2, h3 { color: #0c76a4; }

/* Sezioni interne della main content */
.other-sections { margin-top: 40px; }
.other-sections .content { margin-bottom: 30px; }

/* Collegamenti con effetto hover */
a { color:#0c76a4; text-decoration:none; position:relative; transition: color 0.3s ease; }
a::after { content:''; position:absolute; width:0; height:2px; left:0; bottom:-2px; background-color:#0c76a4; transition: width 0.3s ease; }
a:hover { color:#084a7a; }
a:hover::after { width:100%; }

/* Liste valori e finalità */
.valori-list { list-style:none; padding:0; margin-top:25px; }
.valori-list li { position:relative; padding-left:18px; margin-bottom:22px; }
.valori-list li::before { content:"•"; position:absolute; left:0; top:50%; transform:translateY(-50%); color:#0c76a4; font-size:18px; }
.valori-list strong { display:block; font-size:15px; font-weight:700; color:#000; margin-bottom:5px; }
.valori-list p { font-size:14px; color:#555; margin:0; }

/* Responsive */
@media (max-width: 992px) {
    .page-layout { flex-direction: column; }
    .sidebar-organigramma { width:100%; min-width:100%; box-shadow:none; margin-bottom:30px; animation:none; transform:none; opacity:1; }
    .main-content { padding:20px; animation:none; transform:none; opacity:1; }
}

/* Bottone personalizzato */
.btn-download {
    background-color: #0c76a4;
    color: white;
    padding: 6px 12px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    text-decoration: none; /* rimuove sottolineatura */
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.btn-download:hover {
    background-color: #084a7a; /* colore hover più scuro */
	color:cadetblue;
	transition: background-color 0.3s ease;

}

.btn-download .btn-icon {
    width: 18px;
    margin-right: 8px; /* spazio tra icona e testo */
}

/* Forza rimozione sottolineatura e line-effect per il pulsante download */
.btn-download,
.btn-download:hover,
.btn-download:focus,
.btn-download:active {
    text-decoration: none !important;
}

.btn-download::after {
    content: none !important;
}

@media (max-width: 576px) {
    .org-pretitle {
        top: -50px;   /* aumenta questo valore per alzare la scritta */
        left: 15px;  /* margine sinistro leggermente più stretto */
        font-size: 46px; /* rimane uguale a post */
        line-height: 1.1;
    }
}