/*!
*  css file for AT1
*
*  Whilst reproducing this i encounted a number of issues
*   - Accessability colours used in the refernce material are not complaint alternate colour choices have been added but commented out
*   - The use of viewport width size attributes did not function correctly on my high definition monitor for testing always reporting an incorrect size based on the monitors resolution this made it rather hard for responsive testing (Known issue)
*   - In line with best practices there is one issue and that relates to the aspect ratio of the header image at mobile sized viewports the image is out slightly but not visible to the eye
*/

/*Adding in the CSS reset as required by this task*/
/* Credit https://piccalil.li/blog/a-modern-css-reset/ */
*,
*::before,
*::after {
    box-sizing: border-box;
}
body,h1,h2,h3,h4,p,li,figure,figcaption,blockquote,dl,dd {
    margin: 0;
}
html:focus-within {
    scroll-behavior: smooth;
}
ul[role='list'],
ol[role='list'] {
    list-style: none;
}
a:not([class]) {
    text-decoration-skip-ink: auto;
}
img {
    max-width: 100%;
    display: block;
}
input,button,textarea,select {
    font: inherit;
}
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
/* End CSS Reset*/


/* Gloabal Elements and elements used site wide*/

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Poppins, "sans-serif";
}
html{
    font-size: 16px;  /* Using the rem sizing is dependent on this root font size */
    overflow-x: hidden;
}
body{
    background-image: url(images/bg800bulbs.jpg);
    background-position: top left;
    background-color: #544d47;
    background-repeat: no-repeat;
    background-attachment: fixed;
    max-width: 50vw;
    margin: auto auto;
}
.container{
    width: 50vwmax !important;
    margin: auto auto;
}

.float-r{
    float: right;
}
.float-l{
    float: left;
}
/* Header elements*/
header{
    background-color: #ffffff;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-left-radius: 0.55rem;
    border-top-right-radius: 0.55rem;
    margin-top: 50px;
}
nav{
    padding: 0.25rem;
    width: 100%;
}

.logo {
    float: left;
    margin-left: 1.6rem;
}
.logo img{
    width: 40px;
}
.navigation {
    display: flex;
    justify-content: right;
}
.navigation a {
    color: #000000;
    text-decoration: none;
    font-weight: normal;
    padding: 0.55rem;
    transition: all .3s ease-in-out;
    margin: 0.25rem;
}
.navigation a:hover{
    color: #6C3106;
    transition: all .3s ease-in-out;
}
/*Setting up the hero section background and the heading text*/
.hero{
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: flex-end;
    background: linear-gradient(#cd9064, #a2724e);  /* This colour matches reference material but is not compliant with accessibility standards*/
    /*background: linear-gradient(#a16940, #7a3b0b); This slight change makes it compliant*/
    min-height: 7rem;
}

.hgroup{
    display: flex;
    align-content: flex-start;
    justify-content: flex-start;
    width: 100%;
    z-index: 99;
    margin-top: 2rem;
}

.hero h1{
    color: #ffffff;
    font-size: 2.6rem;
    width: 100%;
    margin-left: 2rem;
    display: block;
    position: absolute;
    flex-shrink: 3;
}
.hero h2{
    color: #ffffff;
    font-size: 1rem;
    width: 100%;
    margin-left: 2.6rem;
    display: block;
    position: absolute;
    margin-top: 3.8rem;
}
.hero img{
    height: auto;
    width: auto;
    z-index: 20;
}
/*Main body content Elements*/
main{
    background-color: #ffffff;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
}
/* Defined this so that the style only applies to all article elements*/
article{

}
article:after{
    content: "";
    display: block;
    clear: both;
}
/* Defined this so that the style only applies to the main content section*/
#content article h2{
    margin-bottom: .55rem;
    border-bottom: 1px solid #000;
}
#content article img{
    display: flex;
    width: 100%;
    max-width: 250px;
    height: auto;
    border-radius: .75rem;
    margin-left: .75rem;
    margin-bottom: .75rem;
}
#content article p{
    word-break: keep-all;
    padding: .75rem;
}

/* Defined this so that the style applies to the main content section and the testimonials section*/
#content .btt, #testimonials .btt{
    display: flex;
    justify-content: center;
    text-decoration: none;
}
#content .btt span, #testimonials .btt span{
    border-radius: 2rem;
    padding: .75rem;
    width: 13rem;
    color: #000000;
    border: 0.005rem solid #a9a6a6;
    cursor: pointer;
    background-color: #e1e1e1;
    text-align: center;
    transition: all .3s ease-in-out;
}
#content .btt span:hover, #testimonials .btt span:hover{
    background-color: #f3f3f3;
    transition: all .3s ease-in-out;

}

/* Defined this so that the style only applies to the testimonials section*/
#testimonials h3{
    margin-bottom: .55rem;
}
#testimonials blockquote{
    background-color: #F8FFFE;/* colour close to reference material however is not compliant with accessibility foreground and back colours are to close to each other so is non compliant */
    /*background-color: #bee7e1; colour is compliant */
    border-width: 0.15rem;
    border-left-width: 0.35rem;
    border-style: solid;
    border-color: #D4F0EC;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}
blockquote:after{
    content: "";
    display: block;
    clear: both;
}
#testimonials blockquote img{
    display: flex;
    width: 100%;
    max-width: 200px;
    height: auto;
    border-radius: .15rem;
    margin-right: .75rem;
    margin-bottom: .75rem;
}
#testimonials blockquote p{
    word-break: keep-all;
    padding: .75rem;
}
#testimonials blockquote cite{
    word-break: keep-all;
    font-weight: bold;
    font-style: normal;
}

/*Footer elements*/
footer{
    background-color: #ab4c09;   /*Colour in reference material does not meet accessability standards adjust this to be compliant*/
    border-bottom-left-radius: 0.55rem;
    border-bottom-right-radius: 0.55rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5rem;
    padding: 0.75rem;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 500;
}
@media only screen and (max-width: 799px) {
    .logo{
        display: none;
    }
    .navigation {
        display: flex;
        width: 100%;
        justify-content: center;
        overflow-x: scroll;
    }
    .navigation a {
        font-size: .85rem;
        text-align: center;
    }
    .hero h1{
        margin-left: 1.7rem;
        font-size: 2rem;
    }
    .hero h2{
        margin-left: 1.9rem;
        margin-top: 2.4rem;
        font-size: .90rem;

    }
    .hero img{
        display: block;
        max-width: 100%;
        max-height: 100%;
        /*width: auto;
        height: auto;*/
    }

}