/* colors - see style guide for docs. 
Clearly there is more you could place in variables, up to you if you want to use them. My answer does not go beyond colors to keep the code easier to read. */

:root {
    --color1: #001219;
    --color2: #005f73;
    --color3: #3d9397;
    --color4: #94d28d;
    --color5: #e9d8a6;
    --color6: #ee9800;
    --color7: #ca6702;
    --color8: #bb3e03;
    --color9: #ae2012;
    --color10: #9b2226;
}


/* generic site styles */

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #080808;
    color: #DBE5DE;
    padding: 0;
    margin: 0;
}

section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

section h2 {
    font-size: 2rem;
}


/*****************
New styles begin here and continue to the end of the page 
****************/


#popart figure img {
    object-position: 0;
    object-fit: cover;
}

#popart figure {
    border-color: var(--color8);
}
section ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/* header and nav styles */


/* stretches completely across the page with the color */
.header{
    background-color: var(--color5);
}

/* width limited and centered to line up with the rest of the page */

header{
    padding: 1rem;
    max-width: 1200px;
    margin: 0 auto;
}


/* hero styles */
#hero{
    background-color: var(--color7);
    text-align: center;
    max-width: 100%;
    padding: 0;
    margin: 0;
}

#hero img{
    max-width: 100%;
    max-height: 500px;
}

/* To keep mobile screens from being stupid long, consider setting a max height on the images and hide the overflow. 

Spelled out the individual border styles so border-color could go elsewhere. Styling is the same for all borders except the color. */

figure {
    margin: 0 0 0.7rem 0;
    padding: 0;
    max-height: 400px;
    overflow: hidden;
    position: relative;
    border-width: 10px;
    border-style: solid;
    border-radius: 5px;
}
/* navigation styling - universal across breakpoints */

nav ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-flow:row wrap;
    justify-content: space-around;
    align-items: space-between;
}

nav li{
    flex-basis: 48%;
    margin-bottom: 0.5rem;
}

nav li:first-child{
    flex-basis: 100%;
    text-align: center;
}

nav li:first-child a{
    background-color: transparent;
}

nav a{
    text-decoration: none;
    font-size: 1.2rem;
    color: #DBE5DE;
    display: block;
    padding: 0.5rem;
    text-align: center;
    background-color: var(--color4);
    border-radius:5px ;
}

nav a:hover{
    background-color: var(--color6);
    color: var(--color4);
}

/* mission styles */
#mission{
    margin-bottom: 3rem;
}

.missiontext{
    display: block;
    line-height: 1.7;
}

.missionimg{
    max-height: 100px;
    display: block;
}

/* strange open space at the bottom of the box which shows through the transparent overlay - this kills it */

figure img {
    margin-bottom: -5px;
    width: 100%;
    object-fit: cover;
    object-position: 0 -150px;
}

figcaption {
    background-color: rgba(245, 253, 248, 0.637);
    font-size: 1.875rem;
    position: absolute;
    bottom: 0;
    width: 100%;
    margin: 0;
    padding: 0;
}


/* make the a have a big clickable area with display: block - the link occupies its containing element, the figcaption */

figcaption a {
    display: block;
    padding: 1rem;
    text-decoration: none;
    color: var(--color1);
}


/* green stripe for popular images */
.stripe{
    background-color: var(--color2);
    color: #DBE5DE;
    padding: 1rem 0 2rem 0;
}


/* featured image styles */
#featured figure{
    max-height: 700px;
}

#featured img{
    object-position: 0;
}


/* style is doing double duty, styling border color and hover color. Only one declaration usually applies though.  */

.color2,
.color2 a:hover {
    border-color: var(--color2);
    color: var(--color2);
}

.color3,
.color3 a:hover {
    border-color: var(--color3);
    color: var(--color3);
}

.color4,
.color4 a:hover {
    border-color: var(--color4);
    color: var(--color4);
}

.color6,
.color6 a:hover {
    border-color: var(--color6);
    color: var(--color6);
}

.color7,
.color7 a:hover {
    border-color: var(--color7);
    color: var(--color7);
}

.color8,
.color8 a:hover {
    border-color: var(--color8);
    color: var(--color8);
}

.footer{
    background-color: var(--color5);
    color: #080808;
}

footer {
    padding: 3rem;
    display: flex;
    flex-flow: column wrap;
    max-width: 1200px;
    margin: 0 auto;
}

footer h4{
    font-size: 1.2rem;
    margin-top: 0;
}

footer ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-flow: row wrap;
}

footer li{
    margin-right: 1rem;
}

footer address{
    font-style: normal;
    margin-top: 1rem;
    font-weight: bold;
}


/* turn on flexbox here - prior to this, elements stacked individually as blocks */

@media (min-width: 550px) {
    section ul {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
    }
    section li,
    .social,
    address {
        flex-basis: 49.5%;
    }
    /* turn off object position, inherit object-fit: cover */
    figure img {
        object-position: 0;
    }
    .missionimg{
        float: left;  
        shape-outside: polygon(35.84% 94.87%, 34.64% 87.05%, 51.64% 4.06%, 55.1% 2.38%);
        max-height: 200px;
    }
    .missiontext{
        display: flow-root;
        max-width: 900px;
    }
    footer address{
        margin-top: 0;
    }
    nav ul{
        justify-content: center;
        gap: 1.2rem;
    }
    nav li{
        flex-basis: auto;
        margin-bottom: 0;
    }
    nav a{
        color: var(--color1);
        background-color: transparent;
        padding: 0;
    }
    nav a:hover{
        color: var(--color4);
        background-color: transparent;
    }
    header{
        padding: 3rem;
    }
    #popular li:last-child{
        flex-basis: 100%;
    }
    #popular li:last-child figure img{
        object-position: 0 -300px;
    }

    #popart ul{
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(3, 1fr);
    }
    .colspan2{
        grid-column: span 2;
    }
    .colspan3{
        grid-column: span 3;
    }
    .rowspan2{
        grid-row: span 2;
    }
    .rowspan2 figure{
        max-height: unset;
    }
}

@media (min-width: 800px) {
    section h2 {
        margin-left: 100px;
    }
    section li,
    .social,
    #popular li:last-child {
        flex-basis: 32.5%;
    }
    address{
        flex-basis: 66%;
    }
    nav ul{
        justify-content: flex-end;
    }
    nav li:first-child{
        flex-basis: auto;
        margin: 0 auto;
        order: 2;
    }

    nav li:nth-child(2),
    nav li:nth-child(3){
        order: 1;
    }
    nav li:nth-child(4),
    nav li:nth-child(5){
        order: 3;
    }
    #popular li:last-child {
        flex-basis: 32.5%;
    }
    #popular li:last-child figure img {
        object-position: 0;
    }
}