/* These are styles which apply to all pages. Allows better design consistency between pages. */

/* Styling for the header of each page. */
.header {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #bdbaba;
    border-radius: 4px;
}

.header img { /* French flag icon. */
    float: left;
    padding-left: 20px;
    padding-right: 20px;
    max-height: 40px;
}

/* Navigation bar code adapted from W3Schools, n.d.. */
.navbar a { /* Styling for navigation bar links. */
    margin: 10px;
    padding-left: 5px;
    padding-right: 5px;
    line-height: 40px;
    font-size: 20px;
    border-radius: 4px;
}

.navbar a:hover {
    background-color: white;
    font-weight: bolder;
}

.navbar a:link, .navbar a:visited {
    color: red;
}

.navbar {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}
/* End of code adapted from W3Schools, n.d.. */

/* Basic styling for the text content of each page. */
body {
    background-color: bisque;
}

h1 {
    width: 100%;
    margin: 0px;
    padding-top: 10px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 50px;
    font-weight: bolder;
    text-align: center;
    color: black;
}

h2 {
    width: 100%;
    margin: 0px;
    padding-top: 10px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: bold;
    color: black;
}

h3 {
    width: 100%;
    margin: 0px;
    padding-bottom: 5px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: bold;
    color: black;
}

p {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    display: block;
}

a {
    text-decoration: none;
}

img { /**/
    max-width: 100%;
    vertical-align: middle;
}

/* Styling for the footer of each page. */
.footer {
    display: flex;
    width: 100%;
    margin: 0px;
    padding: 5px;
    background-color: #bdbaba;
    border-radius: 4px;
}

.footer p {
    padding-left: 5px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 18px;
    color: black;
    font-weight: bold;
}

/*-----------------------------------------------------------------------------------------------------------------------------------*/
/* Styles for the home/index page. */

/*Start of code adapted from Rabby, M. (2018).*/
*, *::before, *::after {
  box-sizing: border-box;
}

/* Styling for card's more info button. */
.card-button {
    display: block;
    width: 100%;
    padding: 15px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 14px;
    font-weight: bolder;
    color: black;
    text-transform: uppercase;
    text-align: center;
    background: transparent;
    border: 1px solid black;
    border-radius: 4px;
    cursor: pointer;
}

.card-button:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

/* Styling for cards. */
.cards {
    display: flex;
    width: 100%;
    margin: 0px;
    padding: 0px;
    flex-wrap: wrap;
    list-style: none;
}

.card-item {
    display: flex;
    width: 33.3333333%;
    padding: 15px;
}

.card {
    display: flex;
    flex-direction: column;
    background-color: #bdbaba;
    border-radius: 10px;
    box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

/* Styling for card content (title and text). */
.card-content {
    padding: 15px;
}

.card-title {
    display: block;
    margin: 0px;
    padding-left: 10px;
    font-size: 20px;
    font-weight: 700;
}

.card-text {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    padding-left: 10px;
    line-height: 1;
    font-size: 16px;
    font-weight: 400;
}
/*End of code adapted from Rabby, M. (2018).*/

/*--------------------------------------------------------------------------------------------------------*/
/* Styles for the history and culture page. */

.container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding-bottom: 40px;
}

/* Styling for the history quatre of the page. */
.history {
    width: 50%;
}

.video-container {
    display: flex;
    justify-content: center;
}

.video {
    width: 90%;
    aspect-ratio: 16 / 9; /* Ensures video fits on page regardless of the size of screen. */
}

/* Styling for the culture quatre of the page. */
.culture {
    width: 50%;
    padding-right: 20px;
    text-align: center;
}

.main a, p {
    display: block;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: medium;
}
  
/* Styling for the map half of the page. */
.map-container iframe {
    display: block;
    position: relative;
    width: 100%; 
    padding: 30px;
}

/*----------------------------------------------------------------------------------------------------------------------*/
/* Styles for the what's on page. */

/* Style for each event card. */
.events {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 20px;
    gap: 10px;
    align-items: center;
}

.event {
    display: block;
    width: 49%;
    margin: 0 auto;
    padding: 20px;
    background-color: white;
    border: 2px solid #bdbaba;
    border-radius: 20px;
    clear: both;
}

/* Style for event image. */
.event img {
    display: block;
    width: 50%;
    float: left;
    padding: 10px;
    margin: 10px;
    border-radius: 20px;
}

/* Style for event heading. */
.events h2 {
    font-weight: bold;
    width: 100%;
    margin: 0px;
    padding-top: 20px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: medium;
}

.events h3 {
    font-size: small;
}

/* Style for event text. */
.event p {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    display: block;
    font-weight: lighter;
    margin-top: 5px;
    font-size: small;
}

/* Styles for event button. */
/* Button style adapted from previously referenced Rabby, M. (2018).*/
.button {
    display: block;
    width: 100%;
    padding: 13px;
    float: left;
    background: transparent;
    cursor: pointer;
    border: 1px solid black;
    border-radius: 4px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 14px;
    font-weight: bolder;
    color: black;
    text-transform: uppercase;
    text-align: center;
}

.button:hover {
    background-color: rgba(255, 255, 255, 0.12);
}
/* End of code adapted from Rabby, M. (2018).*/

/*----------------------------------------------------------------------------------------------------------------------*/
/* Styles for the gallery page. */

/* Styling for the top row of images. */
.topcontainer {
    display: block;
    width: 100%;
    padding: 20px;
}

/* Styling for the middle row of images. */
.middlecontainer {
    display: block;
    width: 100%;
    padding: 20px;
    clear: both; 
}

/* Styling for the bottom row of images. */
.bottomcontainer {
    display: block;
    width: 100%;
    padding: 20px;
    clear: both;
}

/* Styling for each column of images. */
.column {
    width: 25%;
    float: left;
}

/* Styling for the image reference text. */
.tile {
    display: block;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: medium;
    font-weight: bold;
    padding: 10px;
}

/* Styling for the image. */
.tile img {
    width: 100%;
    border-radius: 10px;
}

/* Styling for the image reference links.*/
.tile a {
    display: inline-block;
    margin: 1px;
}

/*----------------------------------------------------------------------------------------------------------------------*/
/* Styles for the contact us page. */

/* Code adapted from Learn Web, 2024. */

/* Styling for the form. */
form {
    display: inline;
    flex: 1;
    max-width: 600px;
    margin-top: 5px;
    margin-bottom: 10px;
    margin-right: 10px;
    padding: 20px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-align: center;
    background-color: #bdbaba;
    border-radius: 10px;
    box-shadow:5px 5px #919090;
}

form, .contact-details {
    margin-bottom: 20px;
    margin-right: 0px;
}

/* Styling for the layout of the inputs. */
.inputs {
    display: flex;
    width: 75%;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: auto;
}

/* Styling for the input areas and their labels. */
form label {
    display: block;
    margin-bottom: 0px;
    font-weight: bold;
    text-align: left;
}

form input, form textarea {
    width: 100%;
    margin-top: 0px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    outline: none;
}

/* Styling for the contact details. */
.contact-details {
    flex: 1;
    max-width: 400px;
    margin: auto;
    margin-bottom: 20px;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 5px 5px #dbdbdb;
    text-align: center;
}

.contact-details p {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: medium;
    font-weight: lighter;
}
/* End of code adapted from Learn Web, 2024. */

/*----------------------------------------------------------------------------------------------------------------------*/
/* Media Queries. */

/* Tablet Device. */
@media (max-width: 900px) {
    .header { /* Header query adapted from W3Schools, n.d.. */
        float: none;
        display: block;
        text-align: left;
    }
    .card-item { /* For: Index/Home Page. Only 2 cards will show in a row instead of 3. */
        width: 50%;
    }
    .column { /* For: Gallery Page. Only 2 images per row instead of 4. */
        width: 50%;
    }
    .history { /* For: History and Culture Page. Makes the History part of the page take up the full width of the screen. */
        width: 100%;
    }
    .culture { /* For: History and Culture Page. Makes the Culture part of the page take up the full width of the screen. */
        width: 100%;
        align-items: center;
        padding: 0px;
    }
    .event { /* For: What's On Page. Only 1 event per row instead of 2. */
        width: 90%;
    }
}

/* Phone Device. */
@media (max-width: 500px) {
    .header { /* Header query adapted from W3Schools, n.d.. */
        float: none;
        display: block;
        text-align: left;
    }
    .card-item { /* For: Index/Home Page. Make a card full screen instead of 3 being in a row. */
        width: 100%;
    }
    .column { /* For: Gallery Page. Only 1 image per fow instead of 4. */
        width: 100%;
    }
    .event { /* For: What's On Page. Only 1 event per row. Event tile is made slightly larger. */
        width: 100%;
    }
    .events img { /* For: What's On Page. Makes image an appropriate size of the tile. */
        width: 90%;
    }
    .video { /* For: History and Culture Page. Makes the History part of the page take up the full width of the screen. Makes the video slightly larger. */
        position: relative;
        width: 100%;
    }
    .culture { /* For: History and Culture Page. Makes the Culture part of the page take up the full width of the screen. */
        width: 100%;
        align-items: center;
        padding: 0px;
    }
}