/* Fix per scroll orizzontale */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* ========================================
   FIX HEADER iOS - Rimuove spazio bianco sopra navbar
   ======================================== */
@supports (-webkit-touch-callout: none) {
    /* iOS only */
    .header__section {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    .header__sticky {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    .main__header {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        margin-top: 0 !important;
    }
}

/* Fix generale per mobile - rimuove spazio bianco sopra header */
@media only screen and (max-width: 991px) {
    .header__section {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    .header__sticky {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    .main__header {
        padding-top: 0.8rem !important;
        padding-bottom: 0.8rem !important;
        margin-top: 0 !important;
        min-height: auto !important;
    }
    
    /* Rimuove altezza minima che potrebbe causare spazio extra */
    .main__logo {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .main__logo--img {
        max-height: 40px !important;
    }
}

/* Fix per container che potrebbero causare overflow - SOLO MOBILE */
@media only screen and (max-width: 991px) {
    .container-fluid,
    .main__header,
    .header__sticky {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
}

/* Miglioramenti menu mobile offcanvas */
.side__menu {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-left: 3px solid #527cb5;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.side__menu--header {
    background: linear-gradient(135deg, #527cb5 0%, #4a6ba3 100%);
    color: white;
    padding: 2rem 3rem;
    border-bottom: none;
    box-shadow: 0 2px 10px rgba(90, 126, 187, 0.3);
}

.side__menu--title {
    color: white;
    font-weight: 700;
    font-size: 2rem;
    margin: 0;
}

.side__menu--close__btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 700;
    transition: all 0.3s ease;
}

.side__menu--close__btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
    border-color: rgba(255, 255, 255, 0.5);
}

.side__menu--body {
    padding: 2rem;
}

/* Animazioni fluide per apertura/chiusura */
.offcanvas-end.show {
    transform: translateX(0) !important;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.offcanvas-end {
    transform: translateX(100%) !important;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.offcanvas {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.offcanvas-backdrop {
    transition: opacity 0.4s ease !important;
}

/* Stili per le sezioni del menu mobile */
.sidebar__gallery--title {
    color: #527cb5;
    font-weight: 700;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #527cb5;
    padding-bottom: 0.5rem;
}

.sidebar__gallery--wrapper {
    gap: 1rem;
    margin-bottom: 2rem;
}

.sidebar__gallery--thumbnail {
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sidebar__gallery--thumbnail:hover {
    transform: scale(1.05);
}

.sidebar__gallery--img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

/* Footer del menu mobile */
.side__menu--footer {
    background: #f8f9fa;
    padding: 2rem;
    margin: 0 -2rem -2rem -2rem;
    border-top: 1px solid #e9ecef;
}

.side__menu--info__title {
    color: #527cb5;
    font-weight: 600;
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
}

.side__menu--info__text {
    color: #6c757d;
    text-decoration: none;
    transition: color 0.3s ease;
}

.side__menu--info__text:hover {
    color: #527cb5;
}

.side__menu--share__title {
    color: #527cb5;
    font-weight: 600;
    font-size: 1.6rem;
    margin-bottom: 1rem;
}

.side__menu--share__icon {
    width: 40px;
    height: 40px;
    background: #527cb5;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    text-decoration: none;
}

.side__menu--share__icon:hover {
    background: #4a6ba3;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(90, 126, 187, 0.4);
}

.side__menu--share__wrapper {
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Fix per elementi che potrebbero causare scroll orizzontale - SOLO MOBILE */
@media only screen and (max-width: 991px) {
    .container-fluid.padding-lr-120 {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

@media only screen and (max-width: 768px) {
    .container-fluid.padding-lr-120 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Fix per il logo che potrebbe essere troppo largo - SOLO MOBILE */
@media only screen and (max-width: 991px) {
    .main__logo {
        max-width: 200px !important;
        width: auto !important;
    }

    .main__logo--img {
        max-width: 100%;
        height: auto;
    }

    /* Prevenzione overflow su tutti gli elementi principali - SOLO MOBILE */
    .main__header,
    .header__section,
    .header__sticky {
        overflow-x: hidden !important;
    }
}

/* Responsive migliorato per evitare overflow */
@media only screen and (max-width: 991px) {
    .main__menu {
        display: none !important;
    }
    
    .main__logo {
        width: auto !important;
        max-width: 150px !important;
    }
}

/* Stili per il nuovo menu mobile */
.mobile__menu--wrapper {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile__menu--items {
    border-bottom: 1px solid #e9ecef;
}

.mobile__menu--link {
    display: flex;
    align-items: center;
    padding: 1.5rem 2rem;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    font-size: 1.6rem;
    transition: all 0.3s ease;
}

.mobile__menu--link:hover {
    background: linear-gradient(135deg, #527cb5 0%, #4a6ba3 100%);
    color: white;
    transform: translateX(5px);
}

.mobile__menu--link svg {
    margin-right: 1rem;
    width: 16px;
    height: 16px;
}

.mobile__menu--arrow {
    margin-left: auto;
    transition: transform 0.3s ease;
}

.mobile__menu--toggle[aria-expanded="true"] .mobile__menu--arrow {
    transform: rotate(180deg);
}

.mobile__submenu {
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
}

.mobile__submenu--link {
    display: flex;
    align-items: center;
    padding: 1.2rem 3rem;
    color: #6c757d;
    text-decoration: none;
    font-size: 1.4rem;
    transition: all 0.3s ease;
    border-bottom: 1px solid #e9ecef;
}

.mobile__submenu--link:hover {
    background: #527cb5;
    color: white;
    transform: translateX(3px);
}

.mobile__submenu--link.logout-link {
    color: #dc3545;
}

.mobile__submenu--link.logout-link:hover {
    background: #dc3545;
    color: white;
}

/* ========================================
   FIX HEADER DESKTOP - SUBMENU CHE ESCONO DALL'HEADER
   ======================================== */

/* Fix per permettere ai submenu di uscire dall'header - SOLO DESKTOP */
@media only screen and (min-width: 992px) {
    /* Forza overflow visible su header e container - SOLO DESKTOP */
    .header__section {
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }
    
    .header__sticky {
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }
    
    .main__header {
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }
    
    .container-fluid.padding-lr-120 {
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }
    
    .main__menu {
        overflow: visible !important;
    }
    
    .main__menu--navigation {
        overflow: visible !important;
    }
    
    .main__menu--wrapper {
        overflow: visible !important;
    }
    
    .main__menu--items {
        overflow: visible !important;
    }
    
    /* Assicura che il submenu sia sopra tutto */
    .sub__menu {
        z-index: 9999 !important;
        position: absolute !important;
    }
}