/*
 * Styles for the Motor Works of Hudson website
 *
 * This file defines a clean, modern aesthetic with a dark header,
 * vibrant accent colors, and responsive layouts. Sections are
 * clearly delineated and spaced for an easy‑to‑scan reading
 * experience. A modal is used for appointment scheduling.
 */

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

/* ========================================================================
   Certifications / Badges Section
   A light section that showcases logos like the CARFAX Service Center badge.
   Adjust the background and text colors here to fit your brand palette.
*/
.certifications-section {
    background-color: #f2f4f6;
    text-align: center;
    padding: 2rem 0;
}

/* Carfax logo sizing
   Reduce the maximum width so that the badge does not overpower the layout on larger screens.  You
   can adjust the max-width here to taste. */
.certifications-section .carfax-logo {
    max-width: 220px;
    width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.certifications-section .certification-text {
    margin-top: 1rem;
    font-size: 1.2rem;
    font-weight: 500;
    color: #222;
}

html, body {
    height: 100%;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: #222;
    background-color: #f8f9fa;
}

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

ul {
    list-style: none;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Header */
header {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #ffffff;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 0;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 1.4rem;
    color: #00d4ff;
}

.logo-container img {
    height: 45px;
    width: auto;
}

.brand-name {
    color: #f97316;
    font-weight: 600;
    font-size: 1.5rem;
    margin-left: 0.5em;
    white-space: nowrap;
}

.contact-details {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    align-items: center;
    font-size: 0.9rem;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.contact-item .icon {
    font-size: 1rem;
}

/* Navigation */
.nav-bar {
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4px);
    border-top: 1px solid rgba(255,255,255,0.1);
}

.nav-bar ul {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 0.5rem 0;
}

.nav-bar li a {
    color: #ffffff;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-bar li a:hover {
    color: #ff6b35;
}

/* Hero Section */
/* Hero Section
   Using a uniquely named hero file prevents browser caching issues. If you update
   the image in the future, rename the file and update this path accordingly. */
.hero {
    position: relative;
    height: 80vh;
    background-image: url('hero-new.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-align: center;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
}

.hero-content h1 {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
}

.hero-content p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.btn {
    display: inline-block;
    background: linear-gradient(45deg, #ff6b35, #f7931e);
    color: #ffffff;
    padding: 14px 32px;
    border-radius: 50px;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 15px rgba(255,107,53,0.3);
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255,107,53,0.4);
}

/* Commitment Section */
.commitment-section {
    padding: 4rem 0;
    background: #ffffff;
    text-align: center;
}

.commitment-section h2 {
    font-size: 2rem;
    color: #1a1a2e;
    margin-bottom: 1rem;
}

.commitment-section p {
    font-size: 1.1rem;
    color: #555;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Services Section */
.services-section {
    padding: 4rem 0;
    background: #f8f9fa;
}

.services-section h2 {
    text-align: center;
    font-size: 2rem;
    color: #1a1a2e;
    margin-bottom: 2rem;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.service-card {
    background: #ffffff;
    border-left: 4px solid #00d4ff;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}

.service-card h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: #1a1a2e;
}

.service-card p {
    font-size: 0.95rem;
    color: #555;
}

/* Map Section */
.map-section {
    padding: 4rem 0;
    background: #ffffff;
}

.map-section h2 {
    text-align: center;
    font-size: 2rem;
    color: #1a1a2e;
    margin-bottom: 2rem;
}

/* Amenities Section */
.amenities-section {
    padding: 4rem 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #ffffff;
    text-align: center;
}

.amenities-section h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.amenities-section p {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.9);
}

.amenities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.amenity-card {
    background: rgba(255,255,255,0.9);
    color: #1a1a2e;
    padding: 1.5rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.amenity-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.25);
}

.amenity-icon {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
    color: #00d4ff;
}

.amenity-card h3 {
    font-size: 1rem;
    margin: 0.2rem 0;
}

/* Footer */
footer {
    background: #1a1a2e;
    color: #cccccc;
}

.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    padding: 3rem 0 2rem;
}

.footer-section h3 {
    color: #00d4ff;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.footer-section ul li {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.footer-section ul li a {
    color: #cccccc;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: #00d4ff;
}

.footer-bottom {
    border-top: 1px solid #333;
    text-align: center;
    padding: 1.5rem 0;
    font-size: 0.85rem;
    color: #888;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
}

.modal-content {
    background-color: #ffffff;
    margin: 5% auto;
    padding: 2rem;
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    animation: slideIn 0.3s ease forwards;
}

@keyframes slideIn {
    from { transform: translateY(-30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal .close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.5rem;
    color: #888;
    cursor: pointer;
    transition: color 0.3s ease;
}

.modal .close:hover {
    color: #ff6b35;
}

.modal h2 {
    text-align: center;
    color: #1a1a2e;
    margin-bottom: 1.5rem;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.form-group {
    flex: 1;
    min-width: 240px;
}

.form-group label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 500;
    color: #1a1a2e;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #00d4ff;
    box-shadow: 0 0 0 3px rgba(0,212,255,0.2);
}

.submit-btn {
    display: block;
    width: 100%;
    background: linear-gradient(45deg, #ff6b35, #f7931e);
    color: #ffffff;
    padding: 14px;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 15px rgba(255,107,53,0.3);
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255,107,53,0.4);
}

.success-message {
    display: none;
    background: linear-gradient(45deg, #28a745, #20c997);
    color: #ffffff;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    .contact-details {
        justify-content: center;
    }
    .nav-bar ul {
        flex-wrap: wrap;
        gap: 1rem;
    }
    .hero {
        height: 60vh;
    }
    .hero-content h1 {
        font-size: 2rem;
    }
    .hero-content p {
        font-size: 1rem;
    }
    .services-grid,
    .amenities-grid,
    .footer-container {
        grid-template-columns: 1fr;
    }
    .form-row {
        flex-direction: column;
    }
    .form-group {
        min-width: 100%;
    }
}

/* ========================================================================
   Reviews Section

   This section displays recent Google reviews dynamically using the Google
   Places API.  Update the styling here to match your brand colors.  The
   review cards use soft shadows and rounded corners to separate them from
   the background. */
.reviews-section {
    padding: 4rem 0;
    background: #ffffff;
    text-align: center;
}

.reviews-section h2 {
    font-size: 2rem;
    color: #1a1a2e;
    margin-bottom: 2rem;
}

#google-reviews {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.review {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    text-align: left;
}

.reviewer-name {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #1a1a2e;
}

.review-rating {
    font-weight: 500;
    color: #ff6b35;
    margin-bottom: 0.5rem;
}

.review-text {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.4;
}

.leave-review-btn {
    margin-top: 2rem;
}