@import "variables.less";

@media screen and @screen-mobile {
    .mobile{display: block;}
    .desktop{display: none;}
    .menu-desktop{display: none;}

    /*
    ------------------------------------------------------------------------------------------------
    = STYLES GENERAUX
    = Listes d'articles, pagination, plan du site, formulaires, wysiwyg...
    ------------------------------------------------------------------------------------------------
    */

    /* = pagination */
    .custom_pager{padding:0;}
    .btn-previous,
    .btn-next{.s(.75em);}
    .title-home-priorities{.s(1.875em); margin-top:1em;}

    /*
    ------------------------------------------------------------------------------------------------
    = STYLES GENERAUX FORMULAIRE
    ------------------------------------------------------------------------------------------------
    */
    /* = breadcrumb */
    .breadcrumb{margin-top:20px;}

    /*
    ------------------------------------------------------------------------------------------------
    = ENTÊTE DU SITE
    = blocs, menus...
    ------------------------------------------------------------------------------------------------
    */

    #header {background-image:none; .box-shadow(0);}


    .header-top{
        .my-profile,/* select my profil */
        .link-header {display: none;}/* lien header top */

        /* mdr */
        #block-iiep-unesco-specifics-gcse{margin-left:40px; vertical-align:top;
            .ico-loupe{
                span{display: none;}
            }

            #form-gcse-button{vertical-align:top;}
        }
    }

    /* reduire logo */
    #logo img{.w(80px);}

    /*
    ------------------------------------------------------------------------------------------------
    = NAVIGATION
    = Menu de navigation principale du site
    ------------------------------------------------------------------------------------------------
    */
    .header-right{.w(100%); margin:9px 0 0 0;}
    #header > .section{position: relative; .h(48px);}

    /* boutons ouverture / fermeture menu */
    #menu-mobile-bouton{
        position: absolute; right:0; top:0;

        &:hover{text-decoration:none;}
        &.menu-mobile-closed{
            .ico-burger{display: block;}
            .ico-close{display: none;}
        }
        &.menu-mobile-open{
            .ico-burger{display: none;}
            .ico-close{display: block;}
        }
    }

    /* afficher / masquer menu */
    .menu-mobile #nav{
        &.menu-mobile-open{display: block; position: absolute; z-index:20; top:47px; left:0px; .w(100%); .box-sizing;}
        &.menu-mobile-closed{display: none;}
    }

    .menu-mobile{
        display: block;

        #nav{padding:0 20px; .bk(@txtBlueLigth);
        /* niveau 1 */
        .menu li{
            text-transform: uppercase; .s(1.563em); padding:15px 0; border-top:1px dashed #fff;

            &:first-child{border-top:none;}
            a{color:#fff; display:inherit; .bk(url('../images/menu-n1-mobile.png') center right no-repeat); }

            &.opened{
                > a{background-image:url('../images/menu-n1-mobile-opened.png'); background-repeat:no-repeat;}
            }
        }

        /* niveau 2*/
        [data-menu-parent="menu-depth-1"] > .menu-depth-3, // niveau 3 sans niveau 2
        .menu-depth-2{
            display: inline-block; margin-top:15px; .w(100%); .box-sizing;
            li{.s(.68em); .bk(#fff); padding:0;
                a{color:@txtBlueLigth; padding:15px 20px; display: inline-block; .w(100%); .box-sizing; border-top:1px dashed @txtBlueLigth; .bk(url('../images/menu-n2-mobile.png') center right no-repeat);}

                &.opened{
                    > a{background-image:url('../images/menu-n2-mobile-opened.png'); background-repeat:no-repeat;}
                }
            }
        }
        .menu-item-decription{display: none;}


        /* niveau 3 */
        [data-menu-parent="menu-depth-1"] > .menu-depth-3 .menu-depth-4 li, // niveau 4 sans niveau 2
        .menu-depth-3 li{
            .s(.824em); display:block !important;
            a{border:none; color:@blue; background-image:none;}

            &.first{border-top:1px dashed @txtBlueLigth;}

            &.opened{
                > a{background-image:none;}
            }
        }

        /* niveau 4 */
        .menu-depth-4 li{
            .s(1.143em); text-transform: none;
            a{color:@darkBlue; .bk(url('../images/arrow-blue.png') 20px center no-repeat); padding: 10px 20px 10px 32px;}
                &.first{border-top:none;}
            }
        }
    }


    /*
    ------------------------------------------------------------------------------------------------
    = PIED DE PAGE - FOOTER
    = blocs, menus, coordonnées...
    ------------------------------------------------------------------------------------------------
    */
    /* = footer top */
    .footer-top{padding-left:20px; padding-right:20px;
        .region-footer > .block{.w(100%); margin-left:0; margin-top:30px;
            &.first{margin-top:0;}
        }

        /* our offices */
        /* onglets */
        .quicktabs-tabs{
            li{min-width:27%; padding-left:15px; padding-right:15px;}
        }
        /* stay connected */
        .stay-connected{
            .form-submit{padding:4px 8px 5px;}
        }
    }

    /* = footer bottom */
    .footer-bottom{text-align:center;
        /* liste de liens */
        .footer-menu{display: block; .w(100%); margin-bottom:20px;}

        /* ressources */
        #block-iiep-unesco-specifics-ressources-hub{display: inline-block; .w(100%);
            form{float:none;}
        }
    }


    /*
    ------------------------------------------------------------------------------------------------
    = CONTENU
    = Article, type de contenus, listes...
    ------------------------------------------------------------------------------------------------
    */
    .node-page-standard .media-element-container{
        img{max-width:100%; .h(auto);}
    }

    /*
    ------------------------------------------------------------------------------------------------
    = LISTE EXPERTS
    ------------------------------------------------------------------------------------------------
    */
    .section-expert-directory{
        #main-wrapper{padding:0 8px;}

        .node-fiche-expert{.w(100%); height: auto !important; margin-left:0;
            &.item-1,
            &:nth-child(3n+1),
            &:nth-child(2n+1){margin-left:0;}
        }
    }


    /*
    ------------------------------------------------------------------------------------------------
    = PAGE CARTE INTERACTIVE - MAP
    ------------------------------------------------------------------------------------------------
    */
    #map { .w(312px); .h(176px);}


    /*
    ------------------------------------------------------------------------------------------------
    = FICHE PAYS
    ------------------------------------------------------------------------------------------------
    */
    .node-type-fiche-pays{
        /* intro fiche pays */
        #block-fieldblock-node-fiche-pays-default-body{display: none;}

        /* suppression equalize-height */
        #block-iiep-unesco-specifics-list-news-related-state,
        #block-iiep-unesco-specifics-list-activities-related-state,
        .node-fiche-pays .field-collection-container{height:100% !important;}

        /* bloc activites */
        #block-iiep-unesco-specifics-list-activities-related-state{margin-left:0;}

        /* bloc publication + planipolis */
        .node-fiche-pays .field-collection-container{margin-left:0;}

        /* autres liens unesco */
        #block-fieldblock-node-fiche-pays-default-field-body{margin-bottom:20px;}
    }

    /*
    ------------------------------------------------------------------------------------------------
    = PAGE FORMATION
    ------------------------------------------------------------------------------------------------
    */
    /* menu gauche - sticky */
    #article-aside.sticked{.w(100%); margin-bottom:10px;
        &.stick{.w(95%); z-index:1;}
        .title{display: block; padding:12px; .bk(@blue); text-transform: uppercase; .s(1.125em); color:#fff;
            span{.PNovaEB;}
            a{display: inline-block; .w(100%); color:#fff; .bk(url('../images/menu-sticky.png') right center no-repeat);}
        }
        .content,
        .footer{display: none;}
    }

    /*
    ------------------------------------------------------------------------------------------------
    = Formulaire contact / newsletter
    ------------------------------------------------------------------------------------------------
    */
    .node-webform{margin-bottom:30px;}

    /* select type de demande */
    #edit_submitted_type_de_demande_chosen{float:none;}

    /*
    ------------------------------------------------------------------------------------------------
    = ACCUEIL
    = Page d'accueil
    ------------------------------------------------------------------------------------------------
    */
    .front{
        /* mise en avant inscription newsletter */
        #block-iiep-unesco-specifics-stay-connected-homepage {
            .block-title {
                width: 100%;
                margin: 0 auto 20px;
                text-align: center;
            }

            form {
                margin: 0 10px;
                padding-right: 10px;
                padding-left: 10px;
                width: ~"calc(100% - 20px)";
                box-sizing: border-box;
                text-align: center;
                border-radius: 26px;
            }
        }

        /* slideshow */
        #rs-carousel-slideshow-hp {.h(546px); .w(100%); text-align:center;
            .rs-carousel-runner{.h(546px);}
            .rs-carousel-item,
            .slide-infos{.h(283px);}
            .slide-infos{position: absolute; top:262px; max-width:320px;}
            .slide-image{text-align:center;}
        }
        #block-iiep-unesco-specifics-slideshow-homepage {.h(546px);
            .slide-infos, .slide-image {.w(100%); display: block;
                img{max-width:320px;}
            }
            .slide-text-infos{.w(100%); padding:19px 20px 30px; text-align:center;}

            .slide-node-title{.s(1.25em);}
            .field-name-body{display: none;}

            .item-background{display: none;
                &.rs-carousel-item-active{display: block;}
            }
            /* lire plus */
            .more-info-link{position: static; margin-top:24px;}

            /* btn ctrl slideshow */
            .actions-wrapper-outside2{.w(320px);}
            .rs-carousel-actions{position: static; margin-top:-70px; text-align:center;}
        }

        /* slideshow feature */
        #block-iiep-unesco-specifics-featured-homepage{padding:35px 20px;

            .rs-carousel-mask,
            .slide-item{.h(280px);}

            /* learn more */
            .learnmore{padding:50px 0 0 0; text-align:center;
                .content{.w(100%); padding:0 50px 50px 50px; .bk(none);}
                .slide-node-title{position: relative;
                    &:after{content:''; position:absolute; bottom:-50px; right:-60px; .w(100px); .h(60px); .sprite(right -279px); /* guillemet fermeture */}
                }
                .featured-more-link{.w(100%); display: block; }
            }

            /* read more */
            .callout{padding:110px 0 0 0px; .s(1.25em); text-align:center; .sprite(center -548px); /* calendrier */
                .slide-node-date{.s(.65em); margin-bottom: 20px;}

                .content{.w(100%);}
                .featured-more-link{.w(100%); display: block;}
            }

            /* boutons de controles */
            .rs-carousel-actions{text-align:center;
                a{margin-left:4px;}
            }
        }

        /* priorités */
        .our-priorities{margin-left:0; margin-top:40px; .w(100%);
            &.first{margin-top:0;}

            /* bouton lire plus */
            .more-link{display: inline-block; text-align:left; .w(60%);}
        }

        /* 2 blocs worldwide + get involved */
        .footer-hightlight{

        &:before{display: none;}
        &:after{display: none;}

        /* alignement blocs */
        .block-by-two{.w(100%); height: auto !important; display: block;

            &.first{padding:20px; .bk(url('../images/pave-world.png') no-repeat right top @bkGrey);}
            &.last{padding:20px; .bk(url('../images/pave-involved.png') no-repeat 52% top @bkBlueL); border-top: solid 1px #9ab5bc;
                .btn-white-red{.w(100%); display: block;
                    &:nth-child(even){margin-right:0;}
                }
            }
        }
        }
    }

    /*
    ------------------------------------------------------------------------------------------------
    = PIED DE PAGE - FOOTER
    = blocs, menus, coordonnées...
    ------------------------------------------------------------------------------------------------
    */
    /* = footer bottom */
    .footer-top{
        .stay-connected .form-submit{.h(29px);}
    }

    /* = footer bottom */
    .footer-bottom{
        /* ressources */
        #block-iiep-unesco-specifics-ressources-hub{
            .form-type-select{.w(89%);}
        }
    }

    /*
    ------------------------------------------------------------------------------------------------
    = PAGE COURS V2
    ------------------------------------------------------------------------------------------------
    */
    .type-learn-list  {

        #block-iiep-unesco-specifics-list-learn-card {
            .node-teaser{margin-right:0;}
        }
    }

   

}/*Fin media*/

/* media-mobile et hack web-kit */
@media screen and @screen-mobile and (-webkit-min-device-pixel-ratio:0){
    .form-item-country{max-width:81%;}
    select{width:95% !important; display: inline-block;}
}

@media screen and (max-width: 380px) {
    .front{
        /* mise en avant inscription newsletter */
        #block-iiep-unesco-specifics-stay-connected-homepage {
            .form-item,
            .form-submit { width: 100%; }

            .form-item {
                margin: 0 auto 15px auto;
            }

            .form-submit {
                margin: 0 auto;
                max-width: 330px;
            }
        }
    }
}