/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Quattrocento+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Quattrocento:wght@400;700&display=swap');

/* CSS Variables */
:root {
    --primary-font: "Playfair Display", Serif;
    --secondary-font: "Quattrocento", Serif;
    --primary-text-color: #585a47;
    /* Dark green */
    --primary-background-color: #eedada;
    /* light pink */
    --highlight: #83757e;
    /* Dark purple */
    --light-highlight: #bdafc3;
    /* Light purple */
    --second-light-highlight: #939883;
    /* Light green */
}

/* Global Styles */
body {
    font-family: var(--secondary-font);
    background-color: var(--primary-background-color);
    color: var(--primary-text-color);
    padding-top: 56px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--primary-font);
    font-style: italic;
    color: var(--primary-text-color);
}

hr {
    width: 60%;
    opacity: 1;
    border: none;
    border-top: 3px solid var(--highlight);
}

.text-upper {
    text-transform: uppercase;
}

.sub-header-font-size {
    font-size: 2rem;
}

.bold-text {
    font-weight: bold;
}

.border-right {
    border-right: 1px solid black;
}

.white-background {
    background-color: white;
}

.white-gradient-background {
    background-image: linear-gradient(var(--primary-background-color), white);
}

.pink-gradient-background {
    background-image: linear-gradient(white, var(--primary-background-color));
}

.margin-top-auto {
    margin-top: auto;
}

/* This is for the Recent Concerts section and Calendar page. It adds a margin bottom when the cards go into 2 or more rows */
.top-row-card {
    margin-bottom: 24px
}

/* Button Styles*/
.primary-button {
    border: 2px solid var(--second-light-highlight);
    padding: 6px 8px;
    border-radius: 0.3rem;
    text-decoration: none;
    color: white;
    background-color: var(--second-light-highlight);
}

.primary-button:hover {
    border: 2px solid var(--light-highlight);
    padding: 6px 8px;
    border-radius: 0.3rem;
    text-decoration: none;
    color: var(--primary-text-color);
    background-color: var(--light-highlight);
}

/* Nav Bar Styles */
#navbar {
    background-color: var(--highlight);
}

#navbar .navbar-brand {
    font-family: var(--primary-font);
    font-style: italic;
}

#navbar .dropdown-menu {
    background-color: var(--highlight);
    padding-top: 0;
    padding-bottom: 0;
    border-color: transparent;
}

#navbar .dropdown-item:hover {
    background-color: var(--light-highlight);
    color: var(--primary-text-color);
    border-radius: 0.37rem;
}

#navbar .nav-button-container {
    margin-top: 1rem;
}

/* Header Styles */
#header {
    padding-bottom: 1.5rem;
}

#header .primary-button {
    font-size: 1.2rem;
}

#header .left-side {
    margin-bottom: 1rem;
}

.header-image-fit {
    max-height: 204px;
    object-fit: cover;
}

/* Services Styles */
.services-grid {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.services-box {
    width: 100%;
    height: 25vh;
}

.services-box h3 {
    color: white;
}

.services-wedding {
    /* Overlay technique taken from https://dev.to/selbekk/how-to-overlay-your-background-images-59le */
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../images/index-services-box-1-wedding.webp);
    background-position: center;
    background-size: cover;
    gap: 2rem;
}

.services-private {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../images/index-services-box-2-private.webp);
    background-position: center;
    background-size: cover;
    gap: 2rem;
}

.services-public {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../images/index-services-box-3-public.webp);
    background-position: center;
    background-size: cover;
    gap: 2rem;
}

.services-masterclass {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../images/index-services-box-4-masterclass.webp);
    background-position: center;
    background-size: cover;
    gap: 2rem;
}

.modal-header h3 {
    color:var(--primary-text-color);
}

/* Reviews Styles */
#reviews h2 {
    margin-bottom: 1rem;
}

#reviews .double-border {
    border: 10px double var(--light-highlight);
    padding: 20px 15px;
    margin: 0px 1rem 1.5rem;
}

.reviews-grid {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

.review-box {
    justify-items: center;
    padding-top: 10px;
    margin-bottom: 1.2rem;
    display: flex;
    flex-direction: column;
}

.review-rating {
    margin-top: auto;
}

/* Landmark Concerts Styles */
#recent-concerts {
    margin-bottom: 1.5rem;
}

#recent-concerts .card {
    height: 353px;
}

#recent-concerts h2 {
    margin-bottom: 2rem;
}

#recent-concerts img {
    height: 50%;
}

#recent-concerts .card,
#recent-concerts .card-img-top {
    border-radius: 0px;
}

/* Newsletter Signup Styles */
#newsletter-signup .primary-button {
    padding-top: 2px;
    padding-bottom: 2px;
}

/* Footer Styles */
#footer {
    margin-bottom: 2rem;
}

.footer-border {
    border: 10px double var(--light-highlight);
    max-width: 92vw;
    margin: auto;
}

#contact-us p,
#socials p {
    font-size: 1.2rem;
    margin-bottom: 0;
}

#contact-us a {
    color: var(--primary-text-color);
    text-decoration: none;
    -webkit-transition: color 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
}

#socials .icons {
    margin-right: 0.5rem;
    font-size: large;
    color: var(--primary-text-color);
    -webkit-transition: color 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
}

#contact-us a:hover,
#socials .icons:hover {
    color: var(--highlight)
}

#contact-us i {
    padding-right: 0.7rem;
}

/* Selected Excerpts Styles */
#links-excerpts ul {
    list-style: none;
    padding-left: 0px;
    text-decoration: underline;
}

#links-excerpts li:hover {
    list-style: none;
    padding-left: 0px;
    text-decoration: underline;
    color: var(--light-highlight);
}

#links-excerpts a {
    color: inherit;
    text-decoration: none;
}

.excerpt {
    padding-top: 56px;
}

.excerpt .text-center {
    margin-bottom: 1.5rem;
}

.excerpts-image {
    object-fit: cover;
    width: 258px;
    margin: auto;
    display: block;
    margin-bottom: 2rem;
}

.excerpt h3 {
    text-align: center;
}

/* Calendar Styles */
#calendar .card,
#calendar .card-img-top {
    border-radius: 0px;
}

#calendar .card {
    height: 353px;
}

#calendar h2 {
    margin-bottom: 2rem;
}

#calendar hr {
    margin-bottom: 1.5rem;
}

#calendar img {
    height: 50%;
    object-fit: cover;
}

/* Booking Form Styles */
#book-form legend {
    font-family: var(--primary-font);
    font-style: italic;
    font-size: 2rem;
}

#book-form input,
#booking-type {
    width: 100%;
    height: 2rem;
}

#booking-message {
    width: 100%;
}

#book-form fieldset {
    border: 8px double var(--light-highlight);
    padding: 0px 15px;
}

/* Pricing Guide Styles */
#pricing {
    padding-top: 1rem;
    padding-bottom: 1.5rem;
}

#pricing table {
    margin-left: auto;
    margin-right: auto;
}

#pricing th {
    border-top: 1px solid black;
    padding: 0.7rem 0.4rem;
    font-size: 0.9rem
}

#pricing td {
    padding: 0.7rem 0.4rem;
    font-size: 0.7rem;
}

/* Pseudo class taken from https://www.w3schools.com/html/html_table_styling.asp */
#pricing tr:nth-child(even) {
    background-color: rgba(146, 152, 131, 0.1);
    color: var(--highlight);
}

#pricing tr {
    border-bottom: 1px solid black;
    font-weight: bold;
}

/* Media Queries */
/* Small sized screens (mobiles up, min width 576px) */
@media screen and (min-width: 576px) {

    /* Header Styles */
    .header-image-fit {
        max-height: 344px;
    }

    /* Landmark Concerts Styles */
    #recent-concerts .card {
        height: 368px;
    }

    /* Selected excerpts Styles */
    .excerpts-image {
        width: 75%;
        max-height: 372px;
    }

    /* Pricing Guide Styles */
    #pricing th {
        padding: 0.7rem 0.7rem;
        font-size: 1rem;
    }

    #pricing td {
        padding: 0.7rem 0.7rem;
        font-size: 0.8rem;
    }

    /* Calendar Styles */
    #calendar .card {
        height: 368px;
    }

    /*Footer Styles */
    .footer-border {
        margin: auto;
    }
}

/* Medium sized screens (tablets up, min width 768px) */
@media screen and (min-width: 768px) {

    /* Header Styles */
    .header-image-fit {
        max-height: 400px;
    }

    /* Services Styles */
    .services-box {
        width: 50%;
        height: 40vh;
        flex-shrink: 0;
    }

    /* Reviews Styles */
    .review-box {
        width: 50%;
        flex-shrink: 0;
    }

    /* Landmark Concerts Styles */
    #recent-concerts .card {
        height: 348px;
    }

    /* Selected Excerpts Styles */
    .excerpt .text-center {
        font-size: 1.2rem;
    }

    .excerpt h3 {
        text-align: left;
    }

    /* Pricing Guide Styles */
    #pricing th {
        padding: 0.7rem 2rem;
        font-size: 1.2rem;
    }

    #pricing td {
        padding: 0.7rem 2rem;
        font-size: 1rem;
    }

    /*Success Styles*/
    .footer-fix {
        display: flex;
        min-height: calc(100vh - 56px);
        flex-direction: column;
        justify-content: space-between;
    }

    /* Landmark Concerts Styles */
    #Calendar .card {
        height: 348px;
    }

    /*Footer Styles */
    #socials .icons {
        font-size: 1.8rem;
        padding-top: 0.5rem;
    }

    .footer-border {
        max-width: 78vw;
        margin: auto;
    }
}

/* Large sized screens (Small laptop up, min width 992px) */
@media screen and (min-width: 992px) {

    /* Nav Bar Styles */
    #navbar .nav-button-container {
        align-self: center;
        margin-top: 0rem;
    }

    /* Reviews Styles */
    .review-box {
        width: 25%;
        flex-shrink: 0;
    }

    #reviews h2 {
        margin-bottom: 2.5rem;
    }

    /* Landmark Concerts Styles */
    #recent-concerts .card {
        height: 353px;
    }

    /* Selected Excerpts Styles */
    .excerpt .text-center {
        font-size: 1.5rem;
    }

    /* Calendar Styles */
    #calendar .top-row-card {
        margin-bottom: 0px
    }

    #calendar .card {
        height: 353px;
    }

    /* Footer Styles */
    .footer-border {
        max-width: 65vw;
        margin: auto;
    }
}

/* Extra Large sized screens (laptop up, min width 1200px) */
@media screen and (min-width: 1200px) {

    /* Header Styles */
    #header .left-side {
        margin-bottom: 0;
    }

    /* Landmark Concerts Styles */
    #recent-concerts .card {
        height: 359px;
    }

    /* Calendar Styles */
    #calendar .card {
        height: 359px;
    }
}