/* Google Fonts import */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans:wght@400;700&display=swap");

/* CSS Variables for consistent theming */
:root {
    /* Brand Colours */
    --primary-green: #15803d; /* buttons */
    --secondary-navy: #1e3a8a; /* navbar, dark headings */

    /* Text Colours */
    --text-dark: #111827; /* main body text */
    --text-light: #f8fafc; /* text on dark backgrounds */

    /* Backgrounds */
    --bg-light: #f8fafc;
    --bg-dark: #1e3a8a;

    /* Light border */
    --border-light: #e2e8f0;

    /* Navigation active and hover */
    --nav-hover: #ffffff38;

    /* Form validation border */
    --field-required: #0f2257;

    /* Testimonials */
    --star: #f5d742;
}

/* General document styling */
html {
    scroll-padding-top: 82px; /* To prevent content from being hidden behind fixed navbar */
    height: 100%;
}

body {
    color: var(--text-dark);
    font-family: "Montserrat", sans-serif;
    min-height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-top: 82px; /* To prevent content from being hidden behind fixed navbar */
}

body p {
    font-family: "Open Sans", sans-serif;
    margin-bottom: 1.5rem;
}

main {
    background-color: var(--primary-green);
    color: var(--text-light);
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1; /* Ensure main takes up remaining space for sticky footer */
}

/* Navbar custom styles */
.navbar-custom {
    background-color: var(--secondary-navy);
}

/* Make text white */
.navbar-custom .nav-link {
    color: var(--text-light);
}

/* Navbar button icon color */
.btn-success i.fa-car {
    color: var(--secondary-navy);
}
/* Make active nav link pop */
.navbar-custom .nav-link.active {
    background-color: var(--nav-hover);
    font-weight: 700;
    border-radius: 5px;
}

/* Hover effect for nav links */
.navbar-custom .nav-link:hover {
    background-color: var(--nav-hover);
    border-radius: 5px;
}

/* Make car icons primary green in navbar and body */
.navbar-brand .fa-car,
body .fa-car {
    color: var(--primary-green);
}

/* Hero section styling */
.hero picture {
    max-width: 88%;
    margin: 0 auto;
    display: block;
}

#hero {
    background-color: var(--secondary-navy);
    text-align: center;
    color: var(--text-light);
}

/* Services and Testimonials sections */

#services,
#testimonials {
    background-color: var(--primary-green);
    color: var(--text-light);
    padding-top: 82px; /* To prevent content from being hidden behind fixed navbar */
    margin-top: -75px; /* To pull section up slightly for better visual flow */
}

/* Card styling for services and testimonials */

.card-body {
    display: flex;
    flex-direction: column;
}

.card .badge {
    background-color: var(--secondary-navy);
    color: var(--text-light);
    margin-top: auto; /* Push badge to bottom of card */
}

body .fa-check,
body .fa-asterisk {
    color: var(--secondary-navy);
}

.form-check-input:checked {
    background-color: var(--field-required);
    border-color: var(--secondary-navy);
}

/* Clear validation styling for all required fields on booking form */
input:invalid,
select:invalid,
textarea:invalid {
    border-color: var(--secondary-navy);
    border-width: 4px;
}

/* Footer styling */

footer {
    background-color: var(--secondary-navy);
    color: var(--text-light);
    padding: 20px 0;
}

footer a {
    color: var(--text-light);
    font-family: "Open Sans", sans-serif;
}

.social-links a {
    text-decoration: none;
}

/* Booking form styling */
.booking-form {
    background-color: var(--primary-green);
    padding: 1rem;
    color: var(--bg-light);
    box-shadow: 0 0 0 4px var(--secondary-navy);
}

/* Booking form button styling */
.booking-form .submit {
    background-color: var(--secondary-navy);
}

/* Success page button styling */
#return-home {
    background-color: var(--secondary-navy);
}

/* Style for testimonials section */
.card .fa-star {
    color: var(--star);
}

/* Style for modals */

.modal-body .fa-star {
    color: var(--star);
}