/*Per Fabrizio. Questo foglio stile ha priorità su stili.css e deve essere utilizzato per modificare o correggere gli stili cgenerati da stili.scss.*/
:root {
    --iq-primary: #e50914;
    --iq-primary-hover: #bf000a;
    --iq-light-primary: #d7d3f8;
    --iq-secondary: #6c757d;
    --iq-white: #ffffff;
    --iq-black: #000000;
    --iq-title-text: #23203c;
    --iq-body-text: #D1D0CF;
    --iq-body-bg: #141414;
    --iq-bg1: #191919;
    --iq-body-border: #393750;
    --iq-gold: #E6C75F;
    --iq-black: #000000;
    --iq-light-card: #363636;
}
.iq-search-bar .search-input {
    width: 100%;
    height: 40px;
    padding: 5px 15px 5px 40px;
    border: none;
    border-radius: 0;
    color: var(--iq-white);
    background: var(--iq-bg1);
}

    @media only screen and (min-width:1200px) and (max-width:1366px) {
        .search:focus, .search:hover {
            width: 220px !important;
        }
    }

   

 

    .search-box {
    position: absolute;
    z-index:100;
    
    right: 20px;
    top: 46px;
    min-width: 25rem;
    width:400px;
    opacity: 0;
    transform: translate(0, 70px);
    -webkit-transform: translate(0, 70px);
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
}
.search-toggle {
    padding: 0 !important;
}

.search-toggle {
    padding: .25rem .75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: .25rem;
}
.navbar-right .iq-sub-dropdown .iq-card-body div {
    border-radius: 0;
}

.navbar-right .iq-show .iq-sub-dropdown, .iq-show .search-box {
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0);
}

.navbar-right .iq-sub-dropdown {
    width: 300px;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 100%;
    right: 15px;
    background: var(--iq-bg1);
    transform: translate(0, 70px);
    -webkit-transform: translate(0, 70px);
    transition: all 0.3s;
    padding: 0;
    -webkit-box-shadow: 0px 0 20px 0 rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0 20px 0 rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0 20px 0 rgba(0, 0, 0, 0.5);
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    z-index: 1;
}

.navbar-light .navbar-toggler-icon {
    background: url(../images/menu.png) no-repeat scroll center center;
}

.search-toggle:hover, header .navbar ul li.menu-item a:hover {
    color: var(--iq-primary) !important;
}
.m-profile .form-group {
    margin-bottom: 1.2rem;
}
.search-wrapper {
    position: relative;
    display: inline-block;
    height: 36px;
    vertical-align: bottom;
}

.searchbutton {
    position: absolute;
    font-size: 22px;
    width: 100%;
    margin: 0;
    padding: 0;
    right: 16px;
    color: var(--iq-body-text);
}

.search:focus + .searchbutton {
    transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    color: var(--iq-primary);
}

.search:hover + .searchbutton {
    color: var(--iq-white);
}

.search {
    position: absolute;
    left: 49px;
    background-color: transparent;
    outline: none;
    border: none;
    border-bottom: 1px solid transparent;
    padding: 0 0 0 16px;
    width: 0;
    height: 100%;
    z-index: 10;
    color: var(--iq-white);
    transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
}

    .search:focus, .search:hover {
        width: 350px;
        padding: 0 0 0 0;
        border-color: var(--iq-body-text)
    }

.expandright {
    left: auto;
    right: -6px;
    bottom: -2px;
}

.iq-search-bar .searchbox .search-link {
    position: absolute;
    left: 15px;
    top: 6px;
    font-size: 16px;
}
    
    .mobile-more-menu

{
    display: none;
}
.nav-overlay {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    z-index: 900;
    display: block;
    width: 100%;
    position: fixed;
    visibility: hidden;
    background: rgba(0, 0, 0, 0.6);
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.more-toggle {
    color: var(--iq-white) !important;
    font-size: 22px;
}

.dropdown-toggle.more-toggle::after {
    content: none;
}

.mobile-more-menu {
    display: none;
}

.more-menu {
    position: absolute;
    top: 50px;
    left: auto;
    right: 0;
    min-width: 18rem;
    padding: 0.35rem 0.5rem;
    margin: 0;
    opacity: 0;
    transform: translate(0, 70px);
    -webkit-transform: translate(0, 70px);
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    background: var(--iq-bg1);
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.75);
    visibility: hidden;
    z-index: 999;
}

    .more-menu.show {
        opacity: 1;
        transform: translate(0, 0);
        visibility: visible;
    }

header .navbar ul li:last-child {
    margin-right: 0;
}


.avatar-40 {
    height: 40px;
    width: 40px;
    min-width: 40px;
    line-height: 40px;
    font-size: 0.6rem;
}
#course-container {
    transition: opacity .25s ease, transform .25s ease;
    opacity: 1;
    transform: translateY(0);
}

    #course-container.is-out {
        opacity: 0;
        transform: translateY(10px);
        pointer-events: none;
    }


#course-container {
    position: relative;
}

    /* wrapper "stage" */
    #course-container .course-stage {
        transition: opacity .25s ease, transform .25s ease;
    }

        /* nuovo stage che entra sopra */
        #course-container .course-stage.stage-new {
            position: absolute;
            inset: 0;
            width: 100%;
            opacity: 0;
            transform: translateY(8px);
        }

            /* attivazione animazione ingresso */
            #course-container .course-stage.stage-new.is-in {
                opacity: 1;
                transform: translateY(0);
            }

        /* vecchio stage che esce */
        #course-container .course-stage.stage-old.is-out {
            opacity: 0;
            transform: translateY(-8px);
        }
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
/* =========================
   SEARCH (solo searchDesk)
========================= */

/* contenitore generale della ricerca: centra e stacca dai bordi */
#search #contenuto-indice_src{

  margin: 0 auto;          /* centra il blocco */
  padding: 0 24px;         /* stacca da sinistra/destra */
}

/* barra ricerca */
#search .barra-ricerca-indice{
  margin-top: 16px;
  margin-bottom: 12px;
}

/* input non full width */
#search .barra-ricerca-indice .input-group{
  max-width: 520px;        /* <-- cambia qui la larghezza */
  width: 100%;
}

/* se non usi input-group: fallback */
#search #searchDesk{
  max-width: 520px;        /* <-- stesso valore */
  width: 100%;
}

/* mobile: torna a piena larghezza */
@media (max-width: 576px){
  #search #contenuto-indice_src{
    padding: 0 14px;
  }
  #search .barra-ricerca-indice .input-group,
  #search #searchDesk{
    max-width: 100%;
  }
}

.btn-primary {
    color: #fff !important;
}
#search {
    margin-top: 170px; 
}


@media (max-width: 576px) {
    #search {
        margin-top: 126px;
    }
}

/* =========================
   Skeleton corsi (12 card)
========================= */

:root {
    --pm-skel-base: #e9ecef;
    --pm-skel-hi: #f6f7f8;
    --pm-skel-h: #dde2e6;
    /* taratura: cambia solo questi 2 se vuoi */
    --pm-card-img-ratio: 16/9; /* se le tue copertine sono verticali, prova 3/4 o 2/3 */
    --pm-line-h: 12px;
}

/* lo skeleton non deve essere cliccabile */
#course-container .pm-skel {
    pointer-events: none;
}

    /* thumb “copertina” */
    #course-container .pm-skel .pm-skel-thumb {
        display: block;
        width: 100%;
        aspect-ratio: var(--pm-card-img-ratio);
        border-radius: 12px;
        background: linear-gradient(110deg, var(--pm-skel-base) 8%, var(--pm-skel-hi) 18%, var(--pm-skel-base) 33%);
        background-size: 200% 100%;
        animation: pmSkShimmer 1.2s linear infinite;
    }

    /* righe testo */
    #course-container .pm-skel .pm-skel-line {
        display: block;
        height: var(--pm-line-h);
        border-radius: 999px;
        margin-top: 10px;
        background: linear-gradient(110deg, var(--pm-skel-h) 8%, var(--pm-skel-hi) 18%, var(--pm-skel-h) 33%);
        background-size: 200% 100%;
        animation: pmSkShimmer 1.2s linear infinite;
    }

        #course-container .pm-skel .pm-skel-line.lg {
            height: calc(var(--pm-line-h) + 4px);
        }

        /* larghezze “realistiche” */
        #course-container .pm-skel .pm-skel-line.w50 {
            width: 50%;
        }

        #course-container .pm-skel .pm-skel-line.w55 {
            width: 55%;
        }

        #course-container .pm-skel .pm-skel-line.w60 {
            width: 60%;
        }

        #course-container .pm-skel .pm-skel-line.w65 {
            width: 65%;
        }

        #course-container .pm-skel .pm-skel-line.w75 {
            width: 75%;
        }

        #course-container .pm-skel .pm-skel-line.w80 {
            width: 80%;
        }

        #course-container .pm-skel .pm-skel-line.w85 {
            width: 85%;
        }

        #course-container .pm-skel .pm-skel-line.w90 {
            width: 90%;
        }

/* quando NON sto caricando, se per caso rimane qualcosa, lo nascondo */
#course-container:not(.pm-is-loading) .pm-skel {
    display: none;
}

@keyframes pmSkShimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}


/* =========================================
   STOP LAYOUT SHIFT: slideshow + corsi
   (solo #slideshow e #course-container)
========================================= */

/* 1) Taratura in un solo punto */
:root {
    --pm-hero-h: clamp(220px, 32vw, 420px); /* altezza fissa “elastica” slideshow */
    --pm-course-ratio: 16/9; /* <-- cambia qui se le copertine sono verticali (es. 2/3 o 3/4) */
}


/* ========== CORSI: copertina con ratio fisso ========== */
/* Adatta questi selettori se la tua struttura differisce */
#course-container .item .copertina {
    aspect-ratio: var(--pm-course-ratio); /* riserva spazio prima del load */
    overflow: hidden;
    border-radius: 12px;
    background: #e9ecef; /* fallback mentre carica */
}

    #course-container .item .copertina img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block; /* evita micro “salti” */
    }

/* ========== Skeleton HTML: usa lo stesso ratio delle card reali ========== */
#course-container .pm-skel .pm-skel-thumb {
    aspect-ratio: var(--pm-course-ratio);
    display: block;
    width: 100%;
    border-radius: 12px;
    background: linear-gradient(110deg, #e9ecef 8%, #f6f7f8 18%, #e9ecef 33%);
    background-size: 200% 100%;
    animation: pmSkShimmer 1.2s linear infinite;
}

@keyframes pmSkShimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* =========================
   SLIDESHOW: spazio sempre uguale (no layout shift)
========================= */

/* --- Loading slide dentro lo slideshow --- */
#slideshow .pm-loading-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef6ff; /* opzionale */
}

    /* la tua immagine di loading al centro, senza crop */
    #slideshow .pm-loading-slide img.immagine {
        width: min(520px, 88%);
        height: auto;
        object-fit: contain;
        display: block;
    }

/* disattiva lo spinner "iniettato" da pmEnsureSwapStyles sullo slideshow */
#slideshow.pm-is-loading::before {
    display: none !important;
    content: "" !important;
    animation: none !important;
    box-shadow: none !important;
}
/* Loading slide (pagina riga) */
#slideshow .pm-loading-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

    #slideshow .pm-loading-slide img.immagine {
        width: min(520px, 88%);
        height: auto;
        object-fit: contain;
        display: block;
    }
/* =========================
   SKELETON contenuti (pagina riga)
========================= */
:root {
    --pm-skel-base: #e9ecef;
    --pm-skel-hi: #f6f7f8;
    --pm-skel-lo: #dde2e6;
}

/* shimmer */
@keyframes pmSkShimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* card skeleton (vista per tipo) */
.pm-skel {
    pointer-events: none;
}

    .pm-skel .pm-skel-thumb {
        display: block;
        width: 100%;
        aspect-ratio: 16/9; /* cambia se le copertine sono verticali */
        border-radius: 12px;
        background: linear-gradient(110deg,var(--pm-skel-base) 8%,var(--pm-skel-hi) 18%,var(--pm-skel-base) 33%);
        background-size: 200% 100%;
        animation: pmSkShimmer 1.2s linear infinite;
    }

    .pm-skel .pm-skel-line {
        display: block;
        height: 12px;
        margin-top: 10px;
        border-radius: 999px;
        background: linear-gradient(110deg,var(--pm-skel-lo) 8%,var(--pm-skel-hi) 18%,var(--pm-skel-lo) 33%);
        background-size: 200% 100%;
        animation: pmSkShimmer 1.2s linear infinite;
    }

        .pm-skel .pm-skel-line.lg {
            height: 16px;
        }

    .pm-skel .w50 {
        width: 50%;
    }

    .pm-skel .w60 {
        width: 60%;
    }

    .pm-skel .w80 {
        width: 80%;
    }

    .pm-skel .w90 {
        width: 90%;
    }

/* list skeleton (vista indice) */
.pm-skel-list {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pm-skel-icona {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(110deg,var(--pm-skel-base) 8%,var(--pm-skel-hi) 18%,var(--pm-skel-base) 33%);
    background-size: 200% 100%;
    animation: pmSkShimmer 1.2s linear infinite;
    flex: 0 0 auto;
}

.pm-skel-list .pm-skel-lines {
    flex: 1;
}

/* FORZA visibilità controlli carousel */
#slideshow .carousel-indicators,
#slideshow .carousel-control-prev,
#slideshow .carousel-control-next {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 100 !important; /* sopra alle slide e sopra a qualunque overlay */
}

/* se hai loading-slide con sfondo chiaro, assicura contrasto icone */
#slideshow .carousel-control-prev,
#slideshow .carousel-control-next {
    color: #000; /* oppure #fff in base allo sfondo reale */
}

/* =====================================
   Slideshow: descrizione max 5 righe
===================================== */
#slideshow .descrizione {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5; /* <-- cambia 4 o 5 */
    overflow: hidden;
    word-break: break-word;
}

/* fallback per browser senza line-clamp */
@supports not (-webkit-line-clamp: 1) {
    #slideshow .descrizione {
        max-height: 7.5em; /* circa 5 righe se line-height ~1.5 */
        overflow: hidden;
    }
}
/* Bootstrap 4: modal fullscreen */
.modal-dialog.modal-fullscreen {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    margin: 0;
}

    .modal-dialog.modal-fullscreen .modal-content {
        height: 100vh;
        border: 0;
        border-radius: 0;
    }

    .modal-dialog.modal-fullscreen .modal-body {
        overflow: auto;
    }


/* ===== Toggle testi: bottone sempre visibile ===== */

/* layout affiancato */
#video .contributo.video {
    display: flex;
    gap: 16px;
}

    #video .contributo.video .filmato {
        flex: 1 1 auto;
        min-width: 0;
    }







    /* riduci icona */
    #video .btn-toggle-testi [class^="icon-"],
    #video .btn-toggle-testi [class*=" icon-"] {
        font-size: 14px;
        line-height: 1;
    }




/* ruota la freccia */
#video .contributo.video.is-testi-collapsed .btn-toggle-testi .icon-chevron-thin-right {
    transform: rotate(180deg);
    display: inline-block;
    transition: transform .2s ease;
}






/* Toolbar: non deve restringere il bottone */
#video .testi-toolbar {
    flex: 0 0 auto;
    min-width: 28px;
}

/* Quando collassato: riduci padding così resta spazio al bottone */
#video .contributo.video.is-testi-collapsed .testi-toolbar {
    padding: 6px 6px 0 6px; /* tienilo basso; se era più grande, lo schiacciava */
}
/* Se viene tagliato, lascia visibile la toolbar anche con overflow hidden */
#video .contributo.video.is-testi-collapsed .testi {
    overflow: visible; /* ✅ non clippa il bottone */
}




/* opzionale: quando riapri, puoi avere fade-in */
#video .contributo.video.is-testi-expanding .testi-panel {
    opacity: 0;
}


#video .btn-toggle-testi {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    min-width: 28px;
    min-height: 28px;
    flex: 0 0 28px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}



/* ===== Toggle testi: NO shrink in chiusura e apertura ===== */

/* transizione larghezza colonna */
#video .contributo.video .testi {
    flex: 0 0 360px;
    max-width: 40%;
    min-width: 0;
    transition: flex-basis .25s ease, max-width .25s ease;
}

/* pannello testi: fade */
#video .testi-panel {
    opacity: 1;
    transition: opacity .12s ease;
}

/* CHIUSURA - fase 1: fade-out */
#video .contributo.video.is-testi-collapsing .testi-panel {
    opacity: 0;
    pointer-events: none;
}

/* CHIUSURA - fase 2: colonna stretta + testi nascosti */
#video .contributo.video.is-testi-collapsed .testi {
    flex-basis: 44px;
    max-width: 44px;
    overflow: visible;
}

#video .contributo.video.is-testi-collapsed .testi-panel {
    display: none;
}

/* APERTURA - fase A: allargo colonna ma tengo testi nascosti */
#video .contributo.video.is-testi-opening .testi-panel {
    display: none;
}

/* APERTURA - fase B: preparo fade-in (display:block ma opacità 0) */
#video .contributo.video.is-testi-fadein .testi-panel {
    display: block;
    opacity: 0;
}

/* APERTURA - attivo fade-in */
#video .contributo.video.is-testi-fadein.is-testi-visible .testi-panel {
    opacity: 1;
}


.blocchi-area .blocco .testi .titolo{
    color:#fff !important;
}
.tastoni .item .titoli .autore{
    font-weight:1000;
    color:#0173bd
}
.copertine .item .titoli .autore {
    font-weight: 1000;
    color: #fff
}
/* sr-only se non ce l’hai già */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
#pagina .rubriche {
	display: none;
}