/* Basic Reset and General Styles */
* {
    /* CSS Reset: Removes default browser margin and padding */
    margin: 0;
    padding: 0;
    /* Sets the box model to include padding and border within the element's width/height */
    box-sizing: border-box;
}

body {
    /* Sets a clean, standard sans-serif font */
    font-family: sans-serif;
    /* Default text color for non-background sections */
    color: #000000;
    /* Removed padding from the body so the sections can have their own margin/padding */
    padding: 0;
    /* Light background color to highlight the margin/padding around the main content sections */
    background-color: #000000;
}

/* ----------------- Top Bar Styling (Fixed and Reverted) ----------------- */

.top-bar {
    /* Positions the top bar fixed at the very top of the viewport */
    position: fixed;
    top: 0;
    left: 0;
    /* Ensures the bar spans the full width of the viewport */
    width: 100%;

    /* Uses Flexbox for easy horizontal alignment of logo and navigation */
    display: flex;
    /* Pushes the logo and nav to opposite ends */
    justify-content: space-between;
    /* Vertically centers the items */
    align-items: center;

    padding: 0;
    /* Dark background color for the header */
    background-color: #000000;
    /* Subtle shadow for depth */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    /* High z-index to ensure it stays above all other content */
    z-index: 1000;
    height: 60px;

    /* Removed border-radius as a full-width fixed bar doesn't need it */
    border-radius: 0;
}

.logo {
    /* Ensures the logo container takes up the full height of the top bar */
    height: 100%;
    /* Prevents extra space below the image inside the logo container */
    line-height: 0;
}

.logo img {
    /* Sets image height to match top-bar height for vertical alignment */
    height: 60px;
    width: auto;
    display: block;
}

/* Navigation Links Styling (Desktop) */
.nav-links {
    /* Adds space on the right side of the navigation */
    margin-right: 20px;
}

.nav-links ul {
    list-style: none;
    /* Uses Flexbox to display links horizontally */
    display: flex;
    /* Space between the list items */
    gap: 25px;
}

.nav-links a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    /* Adds padding for a larger clickable area */
    padding: 10px 10px;
    /* Smooth transition for the hover effect */
    transition: color 0.3s;
}

.nav-links a:hover {
    /* Gold color on hover for visual feedback */
    color: #ffd700;
}

/* Hamburger Menu Button Styling (Hidden on Desktop) */
.menu-toggle {
    /* Initially hide it for desktop view */
    display: none;
    background: none;
    border: none;
    color: #fff; /* White color */
    font-size: 30px;
    cursor: pointer;
    padding: 0 20px;
    line-height: 60px; /* Center icon vertically */
}


/* ----------------- Main Content (Home) Styling - UPDATED ----------------- */
.pre-content {
    padding-top: 60px;
}

.main-content {
    /* NOTE: padding-top needs to be at least 60px (top-bar height) to avoid content overlap */
    padding-top: 0px;
    /* ADDED: 10px margin all around and rounded corners to separate from body background */
    margin: 5px;
    border-radius: 10px;

    /* Sets the hero image as the background */
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('../assets/images/AB_Front.jpg');
    /* Ensures the image covers the entire element */
    background-size: cover;
    /* Centers the background image */
    background-position: 50% 50%;
    background-repeat: no-repeat;

    /* Sets a minimum height for a prominent hero section */
    min-height: 800px;

    /* Uses Flexbox to position the content-overlay */
    display: flex;
    /* Centers horizontally */
    justify-content: center;
    /* Aligns content to the top (but respects the margin set on the overlay) */
    align-items: flex-start;
    text-align: center;
    /* Clips the background image to honor the border-radius */
    overflow: hidden;
}

/* Transparent Bar (Overlay) Styling */
.content-overlay {
    /* Semi-transparent black background for better text contrast */
    background-color: rgba(0, 0, 0, 0);
    color: white;
    padding: 10px 0px;
    /* Pushes the overlay down from the top of the main-content container */
    margin-top: 0px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content-text {
    flex:1;
    padding-right: 20px;
    text-align: center;
}

.content-overlay h1 {
    font-size: 3em;
    margin-bottom: 20px;
}

.content-image {
    flex: 0.3;
    text-align: center;
}

.content-image img {
    max-height: 400px;
    width: auto;
    border-radius: 100%;
}

/* ----------------- Section Styling ----------------- */

.page-section {
    /* Standard vertical and horizontal padding for sections */
    padding: 80px 0px;
    /* Separator line between sections */
    border-bottom: 1px solid #eee;
    text-align: center;
    /* Inherits color for text that may be affected by the parent section's color change */
    color: inherit;
}

.page-section h2 {
    font-size: 2.5em;
    margin-bottom: 40px;
    /* Inherits color to allow specific section overrides */
    color: inherit;
}

/* Services Section with AB_Shop.jpg Background - UPDATED */
.services-bg {
    /* ADDED: 10px margin all around and rounded corners */
    margin: 5px;
    border-radius: 10px;

    /* Re-applies padding to be inside the rounded section */
    padding: 0 0 80px 0;
    overflow: hidden;
    background-image: linear-gradient(rgb(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('../assets/images/AB_Paint_Booth.JPG');
    background-size: 125%;
    background-position: 50% 80%;
    color: #fff;
}

/* Ensure headings are white for contrast */
.services-bg h2 {
    color: #ffffff;
    /* Semi-transparent black bar */
    background-color: rgba(0, 0, 0, 1); 
    /* Spacing inside the bar */
    padding: 20px 0; 
    /* Space between the bar and the service cards */
    margin-bottom: 40px; 
    /* Ensures it stretches side to side */
    width: 100%;
}
/* Services Layout */
.services-container {
    /* Limits the maximum width of the service cards */
    max-width: 900px;
    margin: 0 auto;
    /* Uses Flexbox to lay out service items */
    display: flex;
    justify-content: center;
    /* Space between service items */
    gap: 30px;
    /* Allows items to wrap onto the next line on smaller screens */
    flex-wrap: wrap;
}

.service-item {
    /* Slightly transparent white background for the cards */
    background-color: rgba(255, 255, 255);
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 30px;
    /* Calculates card width for two columns with gap, min-width for mobile fallback */
    width: calc(55% - 15px);
    min-width: 600px;
    /* Shadow for a lifted effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    /* Smooth transition for hover effect */
    transition: transform 0.3s;
}

.service-item:hover {
    /* Lifts the card slightly on hover */
    transform: translateY(-5px);
}

.service-item h3 {
    /* Primary blue color for service titles */
    color: #0056b3;
    margin-bottom: 10px;
}

.service-item p {
    /* Dark text for readability on the light card background */
    color: #333;
    font-size: 1.1em;
}

/* Contact Section Specifics - UPDATED */
.contact-section {
    /* NOTE: padding-top needs to be at least 60px (top-bar height) to avoid content overlap */
    padding-top: 20px;

    /* ADDED: 10px margin all around and rounded corners to separate from body background */
    margin: 5px;
    border-radius: 10px;

    /* Sets the hero image as the background */
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('../assets/images/AB_Front_Office.jpg');
    /* Ensures the image covers the entire element */
    background-size: cover;
    /* Centers the background image */
    background-position: center center;
    background-repeat: no-repeat;

    /* Sets a minimum height for a prominent hero section */
    min-height: 800px;

    background-color: #f0f0f0;
    /* Added margin and radius to match other sections */
    margin: 5px;
    border-radius: 10px;
    /* Removed the line under the contact section (as it's the last section) */
    border-bottom: none;
}
.contact-overlay {
    /* Semi-transparent black background for better text contrast */
    background-color: rgba(255, 255, 255);
    color: white;
    padding: 0px 0px;
    /* Pushes the overlay down from the top of the main-content container */
    margin-top: 70px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    align-items: center;
}

.contact-info h2 {
    color:#000000;
    margin: 10px 0;
    font-size: 3em;
}
.contact-info p {
    color:#000000;
    margin: 10px 0;
    font-size: 1.1em;
}

.contact-info a {
    /* Primary blue color for links */
    color: #0056b3;
    text-decoration: none;
    font-weight: bold;
}

.contact-info a:hover {
    text-decoration: underline;
}

/* Footer Styling - UPDATED */
footer {
    text-align: center;
    padding: 20px;
    background-color: #000000;
    color: #fff;
    border-radius: 0px;
    /* Removed border-top since margin is applied */
    border-top: none;
}

/* ----------------- MOBILE OPTIMIZATIONS ----------------- */
@media (max-width: 768px) {
    /* 1. Header & Menu Toggle */
    .menu-toggle {
        display: block; 
    }

    .nav-links {
        margin-right: 0;
        position: absolute;
        top: 60px;
        right: 0;
        width: 100%;
        background-color: #000000;
        box-shadow: 0 4px 5px rgba(0, 0, 0, 0.4);
        display: none; 
        z-index: 1001;
    }

    .nav-links.active {
        display: block;
    }

    .nav-links ul {
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding: 10px 0;
    }

    .nav-links a {
        display: block;
        width: 100%;
        padding: 15px 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* 2. UPDATED: Sections (Moved UP by reducing padding) */
    .main-content, .contact-section {
        min-height: 450px; 
        /* Reduced from 60px to 20px to move everything closer to the top bar */
        padding-top: 20px; 
    }

    /* 3. Scale down text and SHRINK ICON */
    .content-overlay h1, 
    .contact-info h2, 
    .services-bg h2 {
        font-size: 1.8em;
    }

    .content-image img {
        /* Reduced from 250px to 180px to shrink the icon */
        max-height: 180px; 
    }

    .services-bg {
        max-height: fit-content;
        background-size: 325%;
        background-position: 50% 100%;
    }
    /* 4. Service Items - Single Column */
    .service-item {
        width: 95%; 
        min-width: 0;
        padding: 20px;
        margin: 0 auto;
    }

    .service-item p {
        font-size: 1rem;
    }

    /* 5. Contact Overlay Adjustment */
    .contact-overlay {
        /* Pulls the contact box up higher */
        margin-top: 20px; 
        width: 90%;
        padding: 20px;
    }
}