@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,700;1,300;1,700&family=Passion+One&display=swap');

/* Font from: https://www.fontzip.com/celtic */
@font-face {
    font-family: Celtic;
    src: url('../fonts/Celtic.ttf')  format('truetype');
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    padding: 0;
    margin: 0;
    position: relative;
    font-family: 'Merriweather', serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Passion One', Arial;
}

/* heading and logo */

header {
    background-color: rgb(255, 193, 37);
    display: flex;
    justify-content: space-between;
    line-height: 4.68rem;
}

header a, 
footer a {
    text-decoration: none;
}

header a, 
a:visited, 
a:hover, 
a:active {
    color: inherit;
}

#logo {
    align-self: flex-start;
    font-family: Celtic;
    font-size: 3.75rem;
    padding-left: 1.25rem;
}

/* navigation links */

#menu {
    font-size: 110%;
    letter-spacing: 0.25rem;
    padding-right: 20px;
}

#menu li {
    list-style-type: none;
    padding-right: 10px;
    display: inline-block;
}

#menu a:hover {
    border-bottom: 1px solid #000;
}

.active {
    border-bottom: 1px solid #000;
}

/* hero image */

#hero-outer {
    min-height: 28rem;
    max-width: 100%;
    overflow: hidden;
    position: relative;
}

#hero-image {
    min-height: 28rem;
    max-width: 100%;
    background: url("../images/hero-min.webp") no-repeat center;
    background-size: cover;
}

#cover-text {
    display: flex;
    width: 70%;
    height: fit-content;
    text-transform: uppercase;
    position: absolute;
    left: 15%;
    top: 10%;
    text-align: center;
}

#cover-text h2 {
    font-size: 2rem;
    font-family: Celtic;
    margin: auto;
}

#intro-paragraph {
    text-align: center;
}

/* Newsletter */

.newsletter-div {
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
}

.heading-1-body {
    font-size: 2.5rem;
    text-align: center;
    padding: 2rem 0;
}

#newsletter-signup {
    padding: 2rem;
    text-align: center;
    margin: auto;
}

#newsletter-signup input {
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    margin: 0;
    font-family: inherit;
    font-size: 1.5rem;
}

#newsletter-signup button {
    font-size: 1.5rem;
    border-radius: 5px;
    border: none;
    background-color: rgb(255, 193, 37);
    padding: 0.6rem;
    margin: 0.5em;
}

#newsletter-signup button:hover {
    cursor: pointer;
}

/* Google Maps */

/* Was getting issues in validator for inline width for iframe
    Found this solution: https://stackoverflow.com/questions/325273/make-iframe-to-fit-100-of-containers-remaining-height
*/

#map-container {
    display: flex; 
    width: 100%; 
    flex-direction: column; 
    overflow: hidden;
}

#google-maps-homepage {
    width: 100%;
    margin: 0; 
    padding: 0;
    min-height: 25rem;
    border: none;
}

/* Flex box set up */
.container {
    display: flex;
    flex-direction: column;
}

.center-of-container {
    width: 100%;
    align-self: center;
}

.container-for-section {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

/* Clubs page */

.heading-2-body {
    font-size: 2rem;
    text-align: center;
    padding-bottom: 2rem;
    margin: auto;
}

.main-info-left {
    width: 50%;
}

.main-info-right {
    width: 50%;
}

.club-contact-list {
    list-style: none;
}

.club-contact-list li i, 
.social-media {
    font-size: larger;
}

.club-contact-list li {
    padding: 0.4em 0;
}

.club-contact-list li a {
    text-decoration: none;
    color: inherit;
}

/* https://stackoverflow.com/questions/2573544/how-can-i-select-all-children-of-an-element-except-the-last-child/2573566 */
.flex-item {
    margin: auto;
    display: flex;
    padding: 1em;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
}

tbody tr:first-child {
    text-decoration: underline;
}

tbody tr:not(:first-of-type) td:first-child {
    padding-right: 1.8rem;
    font-style: italic;
}

table p {
    margin: auto;
}

.team-crest {
    margin: auto;
}

.training-times {
    padding-bottom: 2rem;
}

.newsletter-div-clubs-page {
    background-color: #D2D5DD;
    margin-bottom: 2rem;
}

/* updates */

.news-img {
    margin: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.news-article {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

#even-news-color {
    background-color: rgb(255, 193, 37);
}

.news-paragraph {
    max-width: 65ch;
    padding: 0 0 2rem 0;
    text-align: justify;
    margin: auto;
}

.video {
    padding-bottom: 2rem;
    margin: 0;
    height: 18rem;
    width: 100%;
}

/* Contact Form */

#contact-page-container {
    width: 100%;
    height: 90vh;
}

#contact-form {
    margin: auto;
    width: 80%;
}

#contact-form button {
    font-size: 1.2rem;
    border-radius: 5px;
    background-color: rgb(255, 193, 37);
    padding: 10px;
    margin: 0.5rem 0 1rem 0;
    float: right;
    border: none;
}

#contact-form button:hover {
    cursor: pointer;
}

/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_contact_form */
#contact-form input, 
#contact-form select, 
#contact-form textarea {
    width: 100%;
    padding: 9px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-top: 6px;
    margin-bottom: 16px;
}

.required {
    color: red;
    font-size: 80%;
}

/* Footer */

/* Used to center and have on different rows: https://stackoverflow.com/questions/42753253/vertically-center-multiple-lines-of-flex-items */
#footer-wrapper {
    width: 100%;
    height: 6rem;
    background-color: rgb(0, 0, 0);
    color: rgb(255, 193, 37);
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
}

#footer-nav li {
    list-style-type: none;
    display: inline;
}

footer a, 
a:visited, 
a:hover, 
a:active {
    color: inherit;
}

#footer-nav span {
    padding: 0 5px;
}

#footer-wrapper p {
    margin: 3px auto;
}

#footer-nav {
    padding-top: 10px;
}

/* media queries - (px) = pixels of media uery with default font size of 16px */

/* For iPad Pro */

@media only screen and (min-width: 1024px) and (min-height: 1000px) {
    .newsletter-div h1 {
        padding: 2.7rem 0;
    }

    #newsletter-signup {
        padding: 3.3rem 0;
    }
}

/* for paragraph on news page (760px) */

@media screen and (max-width: 47.5em) {
    .news-paragraph {
        width: 85%;
    }
}

/* home page changes on smaller width screens (712px) */

@media screen and (max-width: 47.5em) {
    header {
        flex-wrap: wrap;
        justify-content: center;
    }

    #logo {
        padding-right: 1.25rem;
    }

    #intro-paragraph {
        width: 90%;
        text-align: justify;
        margin: 0 auto;
    }

    #menu {
        padding-left: 20px;
    }

    #newsletter-signup span {
        display: block;
    }

}

/* Add padding to sign up input for when changing (560) */

@media screen and (max-width: 35em) {
    #logo {
        padding-top: 10px;
    }

    #newsletter-signup input {
        margin: 0.375rem 0 0 0;
    }

    .main-info-left {
        width: 30%;
    }

    .main-info-right {
        width: 70%;
    }

    .heading-1-body,
    .heading-2-body {
        padding: 0.3em;
    }

    #cover-text {
        display: none;
    }
}

/* home page changes on mobile screens (~450px) */

@media screen and (max-width: 27.25em) {

    #menu {
        line-height: 3.125em;
        letter-spacing: 0.15em;
        padding: 0;
        font-size: 87%;
    }

    #menu li {
        padding-right: 5px;
    }

    #logo {
        padding: 0;
    }

    #newsletter-signup input {
        width: 90%;
    }

    .main-info-left {
        width: fit-content;
    }

    .main-info-right {
        width: fit-content;
    }

    .news-img {
        width: 90%;
    }
}

/* for clubs page main deading (328px) */

@media screen and (max-width: 20.5em) {
    .remove-padb-sm-screen {
        padding-bottom: 0;
    }
}