/* Lander Page Stylesheet October 2024 */ 

/*Compatible with lander page template from June 2024. Optional styles refer to styles found in pre-template pages or pages with special requirements (ex. videos). For these special requirements, it may be worth checking infopage.css or checking the code on another lander page with a similar feature. -NR 3/10/2024 */

/* styling for RECITE bar */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

*, *:before, *:after {
    box-sizing: border-box;
}

/* Recite Me Toolbar container*/
div.top-block {
    width: 100%;
    padding: 0 22rem 3rem 22rem;
}

/*Closer handling of div with two recite me menus */
#recite-menus{
    display:inline-block;
    margin-bottom:70px;
    vertical-align:top;
  
}


/* Contains Choose-A-Language Menu */
#recite-choose-language{
    display:inline-block; 
    position:relative;
}

#recite-translation-button {
    /*position: absolute;*/
    top: 10px;
    right: 10px;
    /*padding: 10px 20px;*/
    font-size: 10pt;
    color: #eee;
    background-color: #e6e6e6;
    margin-right:25px; 
    height: 50px; 
    width: auto;
    cursor:pointer;
}

#recite-translation-dropdown {
    position: absolute;
    top: 46px;
    right: 0;
    min-width: 255px;
    padding: 0;
    background-color: #fff;
    border: solid 1px #e6e6e6;
    color: #111;
    font-size: 10pt;
    display: none;
    z-index: 1;
    cursor:pointer;
}

    #recite-translation-dropdown ul {
        margin: 0;
        padding: 0;
    }

    #recite-translation-dropdown li {
        margin: 0;
        padding: 20px 30px;
        font-size: 10pt;
        list-style: none;
        cursor: pointer;
    }

        #recite-translation-dropdown li:hover {
            color: #eee;
            background-color: #c11c30;
        }



 #enableRecite-container{
    display:inline-block;
    vertical-align:top;

 }

 #enableRecite {
    height: 50px; 
    width: auto; 
    cursor: pointer;
 }

/*  #recite-dictionary {
    display: none !important;
 } Bug handling for when page that has previously accessed Recite features loads and has closed out will display a  non-functional dictionary area at the bottom of the pag. May need refinements, but as this is hiding a broken site area anyway so no accesssibility lost. */

/* End of Recite Styling*/


/* Whole Page */
body, form {
    font-size: 1em;
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    font-family: 'roboto', sans-serif;
    background-color: #e6e6e6;
}

/* Site Container */
.main-container {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    position: relative;
}

/* Header Container*/
.main-header {
    width: 100%;
    height: auto;
    background-color: #fff;
    margin-bottom: 4em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Align Header Row Icons*/

#header-icons {
    align-items: center;
    width: 100%;
}

/* NHS Connect.Org icon in header. See template for handling other header icons.*/
#nhs-connect-icon{
    margin-left: 25px;
    height: 40px; 
    width: auto
}

/* Main Section*/
.main-content {
    width: 100%;
}



/* Info block container in relation to page boundaries*/
div.block {
    width: 100%;
    padding: 0 22rem 3rem 22rem;
}
                
div.block p {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
}

/* Controls info block text and icons*/
div.block-content-small {
    width: 100%;
    min-height: 10rem;
    background-color: #FFF;
    position: relative;
    border-radius: 25px;
    padding: 2rem 10rem 2rem 10rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: left;
}


/* Heading style options. Centering text requests to be handled on individual pages in <style> tags as it may change per lander. */                    
                
    .title-text-1 {
                    font-family: 'Roboto', sans-serif;
                    font-weight: 500;
                    font-size: 1.6rem;
                    text-align: left;
                    margin-bottom: 20px;
                }
                
    .title-text-2 {
                    font-family: 'Roboto', sans-serif;
                    font-weight: 500;
                    font-size: 1.1rem;
                }/*Optional*/
                
    .title-text-3 {
                    font-family: 'Roboto', sans-serif;
                    font-weight: 500;
                    font-size: 1.3rem;
                }
                
    .title-text-1-thin {
                    font-family: 'Roboto', sans-serif;
                    font-weight: 400;
                    font-size: 1.8rem;
                }/*Optional*/

 /* Section icons in each block*/               
img.block-icon{
        width:100px; 
        height:100px; 
        position:absolute;
        top:50%;
        left:0;
        transform:translate(-50%,-50%);
    }


/* Portal Block Styles */
#portal-block h2 {
        text-align: center;
}
    
#portal-button-container {
    text-align: center; 
    margin-top: 40px; 
    margin-bottom: 20px;
}
 
/* .button-link controls Access Portal Button* directly */               
    a.button-link {
                    background-color: #30B3A3;
                    color: white;
                    padding: 15px 25px;
                    text-decoration: none;
                    margin-top:20px;
                }
                
    a.button-link:hover {
                        box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
                    }
                
    a.button-link:active {
                        box-shadow: 0 0 0 white;
                    }

/* About Us Block Styles */                    
#about-us-block {
        text-align: center;
    }


/* Footer Styles*/

/* Footer container*/
div.block-content-small-copyright {
    width: 100%;
    min-height: 7rem;
    background-color: #FFF;
    position: relative;
    border-radius: 25px;
    padding: 2rem 6rem 2rem 6rem;
    font-size: 1.5rem; 
    color: #C8C8C8;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: left;
}

/* Footer copyright text*/
.Eclipsecopyright {
    font-size: 11px;
    color: #C8C8C8;
    text-align: left;
}


/* Responsive Classes. Not sure which are preferred, but both are likely in use on different lander pages. - NR. 3/10/2024 */
div.responsive {
    width: 90%;
    max-width: 627px;
    height: auto;
    margin-right: auto;
    margin-left: auto;
}/*Optional*/


.responsive {
    width: 60%;
    height: auto;
    display: block;
}/*Optional*/

.marginauto {
    margin: 10px auto 20px;
    display: block;
}/*Optional*/

/* responsive youtube */
div.videos-container {
    display: flex;
    justify-content: space-between;
    width: 100%
}/*Optional*/

div.videos-container-inner {
    width: 50%;
    padding: 10px;
}/*Optional*/


.videowrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}/*Optional*/

.tubewrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0
}/*Optional*/

    .tubewrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }/*Optional*/


/* Media Queries/Responsive Behaviours */    

@media screen and (max-width: 480px) {

    #recite-translation-button {
        margin-bottom: 20px;
    }


    .main-content {
        padding-bottom: 3em;
    }

    .main-header {
        margin-bottom: 4em;
    }

}

/*
          ##Device = Desktops
          ##Screen = 1281px to higher resolution desktops
        */

@media (min-width: 1281px) {

    /* CSS */
    div.videos-container {
        flex-direction: column;
    }/*Optional*/

    div.videos-container-inner {
        width: 100%;
    }/*Optional*/

    div.responsive {
        width: 100%;
        max-width: 627px;
        height: auto;
    }/*Optional*/
}

/*
          ##Device = Laptops, Desktops
          ##Screen = B/w 1025px to 1280px
        */

@media (min-width: 1025px) and (max-width: 1280px) {

    div.top-block {
        width: 100%;
        padding: 0 5rem 3rem 5rem;
    }

    div.block {
        width: 100%;
        padding: 0 10rem 3rem 10rem;
    }

    div.block-content-small {
        padding: 2rem 7rem 2rem 7rem;
    }

    div.videos-container {
        flex-direction: column;
    }/*Optional*/

    div.videos-container-inner {
        width: 100%;
    }/*Optional*/

    div.responsive {
        width: 100%;
        max-width: 627px;
        height: auto;
    }/*Optional*/

}

/*
          ##Device = Tablets, Ipads (portrait)
          ##Screen = B/w 768px to 1024px
        */

@media (min-width: 481px) and (max-width: 1024px) {

    div.top-block {
        width: 100%;
        padding: 0 5rem 3rem 5rem;
    }

    div.block {
        width: 100%;
        padding: 0 5rem 3rem 5rem;
    }

    div.block-content-small {
        padding: 2rem 7rem 2rem 7rem;
    }

    div.videos-container {
        flex-direction: column;
    }/*Optional*/

    div.videos-container-inner {
        width: 100%
    }/*Optional*/

    div.responsive {
        width: 90%;
        max-width: 627px;
        height: auto;
        margin-right: auto;
        margin-left: auto;
    }/*Optional*/
}

/*
          ##Device = Most of the Smartphones Mobiles (Portrait)
          ##Screen = B/w 320px to 479px
        */

@media (min-width: 200px) and (max-width: 480px) {

        #recite-translation-button {
            margin-bottom: 20px;
        }


        #header-icons {
            flex-wrap: nowrap;
            flex-direction: column;
        }

        #header-icons div {
            /*text-align: center;*/ /*  This would be necessary to center the header icons. Also unset margin-left in selector below to complete.*/
        }

        #header-icons div img {
            margin-right: unset;
            margin-left: 2rem;
            float: unset;
            margin-top: .5rem;
            margin-bottom: 1rem;
            max-height: 60px;
        }

        div.top-block {
            width: 100%;
            padding: 0 2rem 0 2rem;
        }

        div.block {
            width: 100%;
            padding: 5rem 1rem 1rem 1rem;
        }

        div.block-content-small {
            padding: 4rem 2rem 2rem 2rem;
        }

        .block-icon {
            top: 0 !important;
            left: 50% !important;
        }

        .title-text-1 {
            font-size: 1.4rem;
        }

        div.videos-container {
            flex-direction: column;
        } /*Optional*/

        div.videos-container-inner {
            width: 100%;
        }/*Optional*/

        div.responsive {
            width: 90%;
            max-width: 232px;
            height: auto;
            margin-right: auto;
            margin-left: auto;
        }/*Optional*/

        div.block-content-small-copyright {
            width: 100%;
            min-height: 7rem;
            background-color: #FFF;
            position: relative;
            border-radius: 25px;
            padding: 2rem 3rem 2rem 3rem;
            color: #989898;
        }
}