/*CSS document*/

html, body, div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit;}


header {
    padding: 1rem .5rem 0;
}

img {
    width: 100%;
    display: block;
}

img.logo-light {
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, nav.topbar {
    font-family: quasimoda;
}

label, p, figcaption {
    font-family: komet;
}

h1 {
    width: 13rem;
}

h2 {
    line-height: 1em;
    padding-bottom: .3em;
}

h3 {
    font-size: 1.2em;
    margin: 0 .5rem;
}

h2, h3, li a {
    font-weight: 700;
}

h2, p, figcaption, h4 {
    margin: 0 .5rem;
}

h3, li a,.secondary h2, .mainstory h2, .gallery h2, aside.home h2, h4, .newsletter h2 {
    color: #f58020;
}

li {
    line-height: 1.4em;
}

p {
    color: rgb(10, 10, 10);
    padding-bottom: 1.8rem;
    line-height: 1.2em;
    font-size: 1.2em;
}

figure.chairs {
    margin: 1.2em 0;
}

body {
    background-color: rgb(246, 244, 238);
} 

div.container, div.home-container {
    max-width: 40em;
    margin: auto;
}


a {
    text-decoration: none; /* Remove underline from links */
}

ul li {
    list-style-type: none;
    text-transform: uppercase;
}

nav.topbar {
    padding: 1rem 0;
}

/* Styles for font sizes */
.mainstory h2, .gallery h2{
    padding-top: .5rem;
    font-size: 2.5em;
}

.secondary h2 {
    padding-top: .5rem;
    font-size: 1.8em;
}

.tertiary h2 {
    padding-top: .7em;
    font-size: 1.4em;
    color: #87bee8;
}

a:hover {
    color: #87bee8;
}

.secondary {
    height: fit-content;
}

footer {
    width: 100%;
    box-sizing: border-box;
}

footer p {
    border-top: 2px solid #87bee8;
    padding: auto;
    padding-top: .75rem;
}

/* Consistent styles for asides */
aside {
    height: fit-content;
} 

/* Different style for homepage aside */
aside.home {
    background-color: none;
} 

aside.home p {
    color: rgb(10, 10, 10);
}

aside.home h2 {
    border-top: 1.5px solid #87bee8;
}

/* Different style for in-story asides */
aside.story {
    padding: 1rem .5rem;
    background-color: #31302c;
} 

aside.story p {
    color: rgb(246, 244, 238);
}

aside.story h2 {
    color: #87bee8;
    font-size: 1.2em;
    line-height: 1.2em;
    margin-top: .5em;
}

aside.story h2:hover {
    color: #f58020;
}
aside.story h2 {
    padding-top: .3rem;
}

/* Styles elements in individual stories */

figcaption {
    font-style: italic;
    color: rgb(113, 113, 113);
    padding: .5rem 0 1.2rem;
}

article h2 {
    font-size: 2.5em;
    padding: .6rem 0 .5rem 0;
    color: #f58020;
}

/* Photo gallery code */
.gallery img {
    width: 100%;
}

.gallery {
    margin: 0 .5em 5em;
}

.gallery main {
    margin-top: 3em;
    position: relative;
    overflow: hidden; 
    padding-bottom: calc(75% + 5.5em);
}

.gallery figure{
    margin: 0;
    width: calc(100%-2em);
    position: absolute;
    opacity: 0;
    transition: opacity 0.5s;
}

.gallery figcaption {
    font-size: 1.2em;
    font-weight: bold;
    margin: 1em 0;
    color: #888;
}


input:nth-of-type(1):checked ~ main figure:nth-of-type(1),
input:nth-of-type(2):checked ~ main figure:nth-of-type(2),
input:nth-of-type(3):checked ~ main figure:nth-of-type(3),
input:nth-of-type(4):checked ~ main figure:nth-of-type(4),
input:nth-of-type(5):checked ~ main figure:nth-of-type(5),
input:nth-of-type(6):checked ~ main figure:nth-of-type(6),
input:nth-of-type(7):checked ~ main figure:nth-of-type(7),
input:nth-of-type(8):checked ~ main figure:nth-of-type(8),
input:nth-of-type(9):checked ~ main figure:nth-of-type(9){
    opacity: 1; /* photo opacity 100% when nav checked */
}

nav.thumbnails {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 0.2em;
}

.gallery input {
    display: none; /* Hide radio button input */
}


/* Newsletter page */
.newsletter h2 {
    font-size: 1.8em;
}

.newsletter {
    display: block;
    padding: 0 0 2em 0;
}

.input-fields {
    margin-bottom: 4em;
}

.form {
    display: block;
    background-color: rgb(246, 244, 238);
    padding: 1em 0;
    width: 25em; 
    margin-bottom: 1.25em; 
    border-bottom: 1px solid rgb(51,29,12);
    border-top: none;
    border-right: none;
    border-left: none;
}

form {
    margin: 0 0 0 .5rem;
}

input::placeholder {
    color: rgb(160, 145, 134);
    font-family: komet;
    font-weight: 400;
    font-style: normal;
}

div.selection {
    line-height: 1.5em;
}

a.button { /* Form submission button */
    background-color: #f58020;
    display:inline-block;
    color: rgb(246, 244, 238);
    font-size:1em;
    font-family: quasimoda;
    font-weight: 700;
    font-style: normal;
    padding: 1em 2em;
    margin-top: 2em;
    margin-bottom: 2em;
    text-decoration:none;
    text-transform: uppercase;
}

a.button:hover {
    background-color: #87bee8;
}

@media screen and (min-width: 60em) {
    nav.thumbnails {
        margin-bottom: 2em;
        grid-template-columns: repeat(9, 1fr);
    }

    nav.topbar ul li {
        display: inline;
        margin-right: 0.75rem;
    }

    h2, p, figcaption, h4 {
        margin: 0;
    }

    figcaption {
        color: #555;
        font-style: italic;
        margin: .2rem 0 1rem;
    }

    header {
        padding: 1rem 0 0 0;
    }

    p {
        padding-bottom: .8em;
    }

    aside p {
        margin: 0 0 0.7rem 0;
    }

    main p {
        margin: 0 0 1rem 0;
    }
    
    a {
        padding-left: 0;
    }

    h3 {
        margin: 0;
    }

    div.home-container {
        max-width: 70em;
        padding: 0 1em;
        display: grid;
        grid-template-columns: 3fr 1fr;
        grid-gap: 1em;
    }

    /* Newsletter */
    div.newsletter-container {
        max-width: 70em;
        margin: 0 auto 3em;
        display: block;
        padding: 0 1em;
    }


    /* Other stuff */
    header, footer {
        grid-column: 1/3;
    }

    div.container {
        max-width: 60em;
        padding: 0 1em;
        display: grid;
        grid-template-columns: 3fr 1fr;
        grid-gap: 1em;
    }

    footer p {
        margin-left: 0;
    }

    form {
        margin: 0;
    }

    div.home-container main {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 1em;
        height: fit-content;
    }

    div.home-container aside {
        padding: 0 1.2em 1.2em;
        height: fit-content;
    }

    section.mainstory {
        grid-column: 2/4;
        grid-row: 1/3;
        display: flex;
    }

    section.mainstory a {
        flex: 1 0 8em;
        display: flex;
        flex-direction: column;
    }

    section.mainstory a figure {
        flex: 1 0 8em;
        display: flex;
    }

    section.mainstory a figure img {
        object-fit: cover;
    }

    section.mainstory a h2 {
        flex: 0 0 1em;
    }

    section.mainstory a p {
        flex: 0 0 4em;
    }

    section.secondary {
        display: flex;
    }
    section.secondary a {
        flex: 1 0 8em;
        display: flex;
        flex-direction: column;
    }

    section.secondary a figure {
        flex: 1 0 8em;
    }

    section.secondary a figure img {
        object-fit: cover;
    }

    section.secondary a h2 {
        flex: 0 0 1em;
    }

    section.secondary a p {
        flex: 0 0 4em;
    }

    .gallery {
        margin: 0;
    }
    
}

/* Light and dark mode */
@media screen and (prefers-color-scheme: dark) {
    body {
        background-color: #31302c;
    }

    h1 {
        background-image: url("logo_sat-alt.svg");
        background-repeat: no-repeat;
        background-size: contain;
    }

    img.logo-light {
        opacity: 0;
    }

    p, figcaption, label, aside.home p {
        color: rgb(246, 244, 238);
    }

    aside.story {
        /* background-color: rgb(246, 244, 238); */
        outline: 2px solid rgb(246, 244, 238);
    } 

    aside.story p {
        color: rgb(208, 206, 200);
    }

    aside.story h2 {
        /* color: #f58020; */
        color: #87bee8;
    }
    
    aside.story h2:hover {
        /* color: #87bee8; */
        color: #f58020;
    }
}