/* apeskinian| - 2024 Code Institue HTML & CSS Project 1 */
 
/* IMPORTING GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css2?family=Cantarell:ital,wght@0,400;0,700;1,400;1,700&family=Fjalla+One&display=swap');

/* OVERRIDE BROWSER DEFAULTS */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overscroll-behavior: none;
}

/* GENERAL STYLES */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Cantarell',sans-serif;
}

h1,h2,h3 {
    font-family: 'Fjalla One', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    color: #f5f5f5;
}

p {
    font-size: larger;
}

/* HIDDEN ELEMENTS */
.hidden-elements {
    display: none;
}

/* HEADER */
header {
    height: 0;
    color: #f5f5f5;
}

header a {
    text-decoration: none;
    color: inherit;
}

/* FLOATING TITLE */
#title-area {
    background-color: rgba(59, 77, 102, 0.8);
    position: relative;
    width: fit-content;
    top: 40px;
    right: 0.5%;
    padding: 0.5rem 0.5rem 0.5rem 20%;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 2px 2px 2px #3a3a3a;
    font-size: 1.25rem;
}
/* END OF FLOATING TITLE */

/* NAVBAR (WILL BE AT THE BOTTOM FOR MOBILE DEVICES AS IT'S EASIER TO REACH AND THEN MOVED TO TOP FOR LARGER DEVICES*/
#nav-area {
    background: #3b4d66;
    position: fixed;
    bottom: 0%;
    z-index: 99;
    width: 100%;
    height: 49px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
}

nav {
    background-color: #3b4d66;
    position: absolute;
    bottom: 100%;
    width: 100%;
    display: none;
}

#menu {
    background-color: #f2eace;
    color: #3b4d66;
    border: 2px solid #3b4d66;
    text-align: center;
    list-style-type: none;
}

#menu>li {
    margin: 1rem;
}

#nav-toggle {
    display: none;
}

#nav-toggle:checked~nav {
    display: block;
}

.nav-toggle-label {
    font-size: 1.5rem;
}

.current-page {
    border-bottom: 1px solid #3b4d66;
}

/* MAIN */
main {
    flex-grow: 1;
}

/* HOMEPAGE */
#hero {
    height: 500px;
    width: 100%;
    background: url(../images/bgfc-hero.webp) no-repeat 10% 85%/cover;    
}

#details h2,h3 {
    color: #3a3a3a;
}

#details h2 {
    text-align: center;
    font-size: 2rem;
    margin-top: 0.7rem;
    margin-bottom: 0.7rem;
}

#details h3 {
    font-size: 1.5rem;
}

#details {
    padding: 10px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}

#details>div {
    margin-bottom: 20px;
    text-align: center;
    max-width: 800px;
}

#map-frame {
    width: 100%;
    height: 200px;
    border: 2px solid #3b4d66;
    border-bottom: 0;
}

#google-map {
    height: 200px;
    margin-top: 5px;
    position: sticky;
    top: 100%;
}
/* END HOMEPAGE */

/* UPCOMING PAGE */
#upcoming-container {
    display: flex;
}

#upcoming-section {
    width: 100%;
    background: url(../images/bgfc-upcoming.webp) no-repeat center center /cover;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    padding-top: 170px;
    padding-bottom: 10px;
    flex-grow: 1;
}

.date-box {
    color: #f5f5f5;
    background-color: rgba(59, 77, 102, 0.8);
    padding: 10px;
    width: 90%;
    text-align: center;
    border-radius: 5px;
    margin: 5px;
}
/* END UPCOMING PAGE */

/* NEWSLETTER PAGE */
#newsletter-container {
    display: flex;
}

#newsletter-section {
    display: flex;
    justify-content: center;
    flex-grow: 1;
    width: 100%;
    background: url(../images/bgfc-news.webp) no-repeat center center / cover;
    background-attachment: fixed;
}

#newsletter-form-box {
    align-self: center;
    color: #f5f5f5;
    background-color: rgba(59, 77, 102, 0.8);
    border-radius: 5px;
    height: fit-content;
    padding: 20px;
    width: 80%;
}

#newsletter-form-box>h2 {
    text-align: center;
    margin-bottom: 15px;
}

#signup-button {
    margin-top: 15px;
    font-size: 1.2rem;
    padding: 2px;
    width: 100%;
    background-color: #f2eace;
    border: none;
    color: #3b4d66;
    border-radius: 5px;
    text-transform: uppercase;
    font-family: 'Fjalla One', sans-serif;
    font-weight: 700;
}

.input-box {
    background: transparent;
    border: 1px solid #f5f5f5;
    width: 100%;
    height: 25px;
    margin-bottom: 5px;
    color: #f5f5f5;
}
/* END NEWSLETTER PAGE */

/* 404 PAGE */
#error-container {
    display: flex;
}

#error-section {
    display: flex;
    justify-content: center;
    flex-grow: 1;
    width: 100%;
    background: url(../images/bgfc-404.webp) no-repeat center center / cover;
    background-attachment: fixed;
}

#error-box {
    display: flex;
    flex-direction: column;
    align-self: center;
    background-color: rgba(59, 77, 102, 0.8);
    color: #f5f5f5;
    height: fit-content;
    width: 80%;
    max-width: 800px;
    padding: 30px;
    border-radius: 5px;
    align-items: center;
    margin: 30px 0;
}

#error-box>h2 {
    margin-bottom: 10px;
    font-size: 1.2rem;
}

#error-box a {
    text-decoration: underline;
    font-weight: 900;
    color: #f5f5f5;
}

#error-box p {
    text-align: center;
    font-size: 1rem;
}

#error-box ul {
    margin-left: 30px;
}
/* END 404 PAGE */

/* CONFIRMATION PAGE */
#confirmation-container {
    display: flex;
}

#confirmation-section {
    display: flex;
    justify-content: center;
    flex-grow: 1;
    width: 100%;
    background: url(../images/bgfc-confirmation.webp) no-repeat center center / cover;
    background-attachment: fixed;
}

#confirmation-box {
    align-self: center;
    background-color: rgba(59, 77, 102, 0.8);
    color: #f5f5f5;
    height: fit-content;
    width: 80%;
    max-width: 500px;
    text-align: center;
    padding: 20px;
    border-radius: 5px;
}

#confirmation-box>h2 {
    margin-bottom: 10px;
}

#confirmation-message {
    margin-bottom: 10px;
}

#timer-notice {
    font-size: 0.9rem;
}
/* END CONFIRMATION PAGE */

/* FOOTER */
#social-networks {
    background-color: #f2eace;
    border: 2px solid #3b4d66;
    text-align: center;
    padding: 10px;
    display: flex;
    justify-content: space-evenly;
    list-style-type: none;
    margin-bottom: 49px; /* move up due to navbar at the bottom */
}

#social-networks i {
    font-size: 1.25rem;
    color: #3b4d66;
}

/* RESPONSIVE LAYOUT CHANGES TO TABLETS 768PX */
@media screen and (min-width: 768px) {
    
    #title-area {
        font-size: 1.4rem;
        padding: 0.8rem 0.8rem 0.8rem 20%;
    }

    /* UPCOMING PAGE */
    /* change title to fixed so that it remains on screen */
    .static-title-page #title-area {
        position: fixed;
        left: -0.5%;
    }

    #upcoming-section {
        padding-top: 35px;
    }

    .date-box {
        margin-right: 5%;
        width: 42%;
        align-self: flex-end;
    }
    /* END UPCOMING PAGE */

    /* NEWSLETTER PAGE */
    #newsletter-form-box {
        width: 60%;
    }
    /* END NEWSLETTER PAGE */

    /* 404 PAGE */
    #error-box>h2 {
        font-size: 2rem;
    }

    #error-box p {
        font-size: larger;
    }

    #error-box ul {
        font-size: larger;
    }
    /* END 404 PAGE */

}

/* RESPONSIVE LAYOUT CHANGES FOR LAPTOPS AND DESKTOPS 992PX */
@media screen and (min-width: 992px) {
    /* HEADER */
    /* push body content down to account for new navbar at the top */
    header {
        height: 40px;
    }
  
    #title-area {
        font-size: 2rem;
        top: 89px;
        padding: 1rem 1rem 1rem 20%;
    }

    /* moving navbar up and disable burger menu toggling putting all links in the bar*/
    #nav-area {
        position: fixed;
        top: 0%;
        height: 35px;
    }

    nav {
        display: block;
        position: static;
        width: 100%;
    }

    #menu {
        background-color: #3b4d66;
        color: #f5f5f5;
        display: flex;
        justify-content: center;
    }

    #menu>li {
        margin: 0.8rem 1rem;
    }

    .nav-toggle-label {
        display: none;
    }

    .current-page {
        border-bottom: 1px solid whitesmoke;
    }
    
    /* MAIN */
    /* HOMEPAGE */
    #hero {
        height: 600px;
    }

    #details h2 {
        font-size: 2.5rem;
    }
    
    #details h3 {
        font-size: 1.5rem;
    }

    #map-frame {
        height: 400px;
    }

    #google-map {
        height: 400px;
    }
    /* END HOMEPAGE */

    /* UPCOMING PAGE */
    #upcoming-section {
        padding-top: 43px;
    }

    .date-box {
        width: 40%;
    }
    /* END UPCOMING PAGE */

    /* NEWSLETTER PAGE */
    #newsletter-form-box {
        width: 40%;
    }

    #signup-button {
        padding: 10px;
    }

    #signup-button:hover {
        background-color: #3b4d66;
        color: #f2eace;
        border: 1px solid #f2eace;
    }
    /* END NEWSLETTER PAGE */

    /* FOOTER */
    /* move social bar back down */
    #social-networks {
        margin-bottom: 0;
    }   
}