/* --- Base Styles and Typography --- */
:root {
    --body-font: Verdana, Arial, Helvetica, sans-serif;
    --dark-green: #003300; 
    --white: #FFFFFF;
    --text-color-body: #003333;
    --text-color-sm: #003366;
    --text-color-red: #FF0000;
    --text-color-black: #000000;
    --text-color-gray: #333333; 
    --text-color-white: #FFFFFF;
    --text-color-promo-green: #339933; /* The Green Color */
    --content-max-width: 800px;
    --border-radius-lg: 15px;
    --border-radius-sm: 5px;
}

/* New main page background color */
.dark-background {
    background-color: var(--dark-green);
}

/* Replicated Original Class Mappings */
.body-text {
    font-family: var(--body-font);
    font-size: 12px;
    color: var(--text-color-body);
    text-align: center;
}

/* 🔄 UPDATED CSS: Green text now matches .body-text style */
.youtube-promo-text {
    font-family: var(--body-font);
    font-size: 12px; /* Matched .body-text size */
    font-weight: normal; /* Matched .body-text weight */
    color: var(--text-color-promo-green); /* Retains green color */
    text-align: center;
}
/* Removed old, conflicting styles like .youtube-text-green and .body-text-green */


.body-bold-black {
    font-family: var(--body-font);
    font-size: 13px;
    color: var(--text-color-black);
    font-weight: bold;
    text-align: center;
}

.body-bold-red {
    font-family: var(--body-font);
    font-size: 20px;
    color: var(--text-color-red);
    font-weight: bold;
    text-align: center;
}

.body-sm {
    font-family: var(--body-font);
    font-size: 10px;
    color: var(--text-color-sm);
    text-align: center;
}

.body-bold-white {
    font-family: var(--body-font);
    font-size: 20px;
    color: var(--text-color-white);
    font-weight: bold;
}

/* --- Layout and Responsiveness (UNCHANGED) --- */
.page-container {
    max-width: var(--content-max-width);
    margin: 0 auto;
    background-color: var(--white);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.header-section {
    padding: 20px 0;
    text-align: center;
    background-color: var(--white);
}

.nav-links {
    padding: 10px 0;
}

.nav-link {
    text-decoration: none;
    padding: 0 10px;
}

/* Logo styling: Centered, no border, no radius */
.main-logo {
    max-width: 576px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 10px;
    border-radius: 0; 
    border: none; 
}

/* Main content wrapper background set to white */
.content-section {
    background-color: var(--white); 
    padding: 10px;
}

.intro-box, .contact-box {
    background-color: var(--white);
    padding: 20px;
    margin-bottom: 10px;
    border-radius: var(--border-radius-sm); 
    text-align: center;
}

.main-image-container {
    text-align: center;
    padding: 20px 0;
    background-color: var(--white);
    margin-bottom: 10px;
}

.main-car-image {
    max-width: 95%;
    height: auto;
    display: block;
    margin: 0 auto 10px;
}

/* --- YouTube Section Styling --- */
.youtube-promo-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    text-align: center;
    gap: 10px;
}

.youtube-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.promo-image, .promo-banner {
    width: auto; 
    max-width: 100%; 
    height: auto;
}

/* Ensure YouTube logos and banners get rounded corners */
.promo-image {
    max-width: 177px;
}

.youtube-embed-box {
    text-align: center;
    margin: 20px 0;
    padding: 0 10px;
    background-color: var(--dark-green); 
}

.youtube-embed-box iframe {
    max-width: 100%;
    width: 100%;
    height: 45vw; 
    max-height: 450px; 
}

/* --- Photo Gallery Styling (Two-Column on Desktop) --- */
.gallery-heading {
    text-align: center;
    padding: 20px 0 10px 0;
}

.two-col-gallery {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 20px;
    padding: 10px;
    margin-top: 0;
}

.two-col-gallery a {
    text-align: center;
    display: block;
}

/* Media Query for Tablet/Desktop Layout */
@media (min-width: 600px) {
    .two-col-gallery {
        grid-template-columns: 1fr 1fr; 
        column-gap: 20px;
    }
    .youtube-promo-box {
        flex-direction: row;
        justify-content: center;
    }
    .youtube-logo {
        flex-basis: 200px;
    }
    .youtube-text {
        align-items: flex-start;
        text-align: left;
    }
}

/* --- Before/After Gallery Styling (Dedicated two-column grid) --- */
.before-after-section {
    margin-top: 20px;
}

.before-after-heading {
    background-color: var(--text-color-black); 
    padding: 15px 10px;
    margin: 0;
    text-align: center;
}

.before-after-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: center;
    font-weight: bold;
    padding: 10px 0;
}

.before-col-title {
    background-color: #CC0000; 
    color: var(--white);
    font-size: 16px;
    padding: 5px;
}

.after-col-title {
    background-color: #006600; 
    color: var(--white);
    font-size: 16px;
    padding: 5px;
}

.before-after-gallery {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 10px;
    padding: 10px;
}

/* Media Query for Before/After Two-Column Layout */
@media (min-width: 600px) {
    .before-after-gallery {
        grid-template-columns: 1fr 1fr; 
        column-gap: 20px;
    }
}


/* --- Universal Image Styles (Rounded Corners) --- */
/* Selects ALL images that are NOT the main-logo class */
.rounded-image, .main-car-image, .two-col-gallery img, .before-after-gallery img {
    border-radius: var(--border-radius-lg); 
    border: 1px solid var(--text-color-gray);
    display: block; 
    width: 100%;
    height: auto;
    max-width: 640px; 
    margin: 0 auto;
}

/* Remove border from the YouTube logos */
.promo-image, .promo-banner {
    border: none;
}