/* Andy Hanton Painter & Decorator - Stylesheet */

/* --- Base Reset & Defaults --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth; /* Enable smooth scrolling for anchor links */
    font-size: 16px; /* Base font size */
}

body {
    font-family: sans-serif; /* Basic fallback font - choose a better one later */
    line-height: 1.6;
    color: #333; /* Default text color */
    /* Removed padding-top: 400px; */
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit; /* Inherit color from parent by default */
}

/* --- Header --- */
header#home {
    /* Removed background image properties */
    /* Removed fixed height */
    /* Removed position: fixed and related properties */
    width: 100%;
    /* color: #fff; */ /* Color likely not needed if nav is below */
    display: block; /* Change from flex */
    /* Removed justify-content */
    padding: 0; /* Remove padding if any was added */
    line-height: 0; /* Prevent extra space below image */
}

/* Visually hide the H1, but keep it for SEO */
/* Style the header image */
#header-img {
    width: 100%; /* Fill container width */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra space */
}

/* Remove the visually hidden H1 style as it's gone */
/* header#home h1 { ... } */
/* Removed extra closing brace */

/* Basic Nav Styling (placeholder) */
/* Adjust Nav Styling - now below the image */
header nav {
    background-color: #333; /* Solid background for nav below image */
    padding: 0.75rem 1rem; /* Adjust padding */
    text-align: center;
    /* position: absolute; bottom: 0; width: 100%; */ /* Remove absolute positioning */
}

header nav ul {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

header nav a {
    color: #fff;
    font-weight: bold;
    padding: 0.5rem;
    transition: color 0.3s ease;
}

header nav a:hover {
    color: #ddd; /* Simple hover effect */
}

/* --- Main Content Area --- */
/* No main styles needed at the moment */

/* --- Sections --- */
section {
    padding: 4rem 2rem; /* Add some padding to sections */
    border-bottom: 1px solid #eee; /* Separator */
}

section:last-of-type {
    border-bottom: none;
}

h2 {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2rem;
    color: #444;
}

/* Utility Container */
.container {
    max-width: 960px; /* Max width for content */
    margin: 0 auto; /* Center the container */
    padding: 0 1rem; /* Padding inside container */
}

/* General Section Content Styling */
section p {
    margin-bottom: 1rem;
    max-width: 75ch; /* Limit line length for readability */
    margin-left: auto; /* Center paragraphs within their container if needed */
    margin-right: auto;
    text-align: center; /* Center text in paragraphs */
}

section strong {
    color: #0056b3; /* Example accent color - choose better later */
}

/* --- About Section --- */
#about {
    /* padding-top: 0; */ /* Re-add default section padding */
    display: flex; /* Use flexbox for side-by-side layout */
    align-items: center; /* Vertically align items in the center */
    gap: 2rem; /* Add space between image and text */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    justify-content: center; /* Center items if they wrap */
}

/* Remove the specific #about p rule, rely on general section p or .about-content p */
/* #about p { ... } */

/* Style for the photo within the flex layout */
.about-photo {
    flex: 0 0 200px; /* Don't grow, don't shrink, base width 200px */
    /* display: block; */ /* Flex handles display */
    /* margin: 0 auto 2rem auto; */ /* Remove auto margins */
    max-width: 200px; /* Adjust size */
    height: 200px; /* Make height explicit for circle */
    object-fit: cover; /* Ensure image covers the area nicely */
    border-radius: 50%;
    border: 5px solid #eee;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Style for the text content wrapper */
.about-content {
    flex: 1 1 400px; /* Allow text to grow and shrink, base width 400px */
    max-width: 65ch; /* Limit text width for readability */
}

/* Adjust text alignment within the content block */
.about-content p {
    text-align: left; /* Align text to the left */
    margin-left: 0; /* Remove centering margins */
    margin-right: 0;
    max-width: none; /* Remove max-width from general rule */
}


/* --- Services Section --- */
#services .services-container { /* Add a container div in HTML if needed for layout */
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    gap: 2rem;
    justify-content: center;
}

.service-item {
    flex: 1 1 300px; /* Flex properties for responsive items */
    background-color: #f9f9f9;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    text-align: center;
}

.service-item h3 {
    margin-bottom: 1rem;
    color: #0056b3; /* Example accent color */
}
.service-item h4 {
    margin-bottom: 1rem;
    color: #0056b3; /* Example accent color */
} 

.service-item p {
     max-width: none; /* Override general paragraph width limit */
     text-align: left; /* Align service description text left */
}


/* --- Reviews Section --- */
.button {
    display: inline-block;
    background-color: #007bff; /* Example button color */
    color: #fff;
    padding: 0.8rem 1.5rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
    border: none;
    cursor: pointer;
}

.button:hover {
    background-color: #0056b3;
    color: #fff;
}

/* Review Form Specific Styles */
#review-form {
    max-width: 650px; /* Slightly wider */
    margin: 3rem auto 0 auto; /* More space above, centered */
    padding: 2rem 2.5rem; /* More padding */
    background-color: #f8f9fa; /* Lighter background */
    border-radius: 8px;
    border: 1px solid #dee2e6; /* Subtle border */
    box-shadow: 0 3px 6px rgba(0,0,0,0.07); /* Slightly softer shadow */
}

#review-form .form-group {
    margin-bottom: 1rem;
}

#review-form label {
    display: block;
    margin-bottom: 0.6rem; /* Slightly more space */
    font-weight: bold;
    color: #495057; /* Darker label color */
    text-align: left;
}

#review-form input[type="text"],
#review-form textarea {
    width: 100%;
    padding: 0.75rem 1rem; /* Adjust padding */
    border: 1px solid #ced4da; /* Standard bootstrap-like border color */
    border-radius: 4px;
    font-size: 1rem;
    line-height: 1.5;
    background-color: #fff; /* Ensure white background */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
#review-form input[type="text"]:focus,
#review-form textarea:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

#review-form textarea {
    resize: vertical; /* Allow vertical resizing */
    min-height: 100px;
}

#review-form button {
    display: block;
    width: 100%;
    margin-top: 1.5rem; /* More space above button */
    padding: 0.9rem 1.5rem; /* Larger button padding */
    font-size: 1.1rem; /* Slightly larger font */
}

.status-message { /* For success/error messages on forms */
    font-weight: bold;
    text-align: center;
}
.status-message.success { color: green; }
.status-message.error { color: red; }


/* Review Display Area Styles */
#review-display-area {
    max-width: 700px;
    margin: 2rem auto; /* Center the display area and add vertical margin */
    position: relative;
    min-height: 150px;
    overflow: hidden;
    text-align: center; /* Center align the content within the area */
}

.review-item {
    background-color: #fdfdfd; /* Slightly off-white background */
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    padding: 2rem 2.5rem; /* Increase padding */
    margin: 0 auto 1.5rem auto; /* Center item horizontally, add bottom margin */
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    display: none; /* Hide all reviews by default */
    text-align: center;
    max-width: 90%; /* Prevent review item from stretching full width */
    /* transition: opacity 0.5s ease-in-out; */ /* Keep transition commented for now */
    /* opacity: 0; */
}

.review-item.active {
    display: block; /* Show active reviews */
    /* opacity: 1; */
}

.review-text {
    font-style: italic;
    color: #444; /* Slightly darker text */
    margin-bottom: 1.5rem; /* More space below text */
    font-size: 1.15rem; /* Slightly larger */
    line-height: 1.6;
    position: relative; /* For pseudo-elements */
    padding: 0 1em; /* Add padding to prevent text hitting quotes */
}
/* Add visual quotation marks */
.review-text::before,
.review-text::after {
    content: '"';
    font-size: 2.5em; /* Larger quotes */
    color: #007bff; /* Use accent color */
    opacity: 0.6;
    position: absolute;
    line-height: 1;
}
.review-text::before {
    content: open-quote;
    top: -0.1em;
    left: -0.2em;
}
.review-text::after {
    content: close-quote;
    bottom: -0.3em; /* Adjust position */
    right: -0.2em;
}

.reviewer-name {
    font-weight: bold;
    color: #333;
    text-align: center; /* Center the name */
    margin-top: 1.5rem; /* More space above name */
    font-size: 1rem;
}
/* Removed extra closing brace here */

/* --- Contact Section --- */
#contact .contact-container { /* Add a container div in HTML if needed */
     display: flex;
     flex-wrap: wrap;
     gap: 2rem;
     align-items: flex-start; /* Align items top */
     justify-content: center;
}

.contact-details {
    flex: 1 1 300px; /* Allow details to take space */
    text-align: center;
}

.contact-details p {
    margin-bottom: 0.5rem;
    text-align: center; /* Center contact details */
}

.contact-details strong {
    margin-right: 0.5em;
}

.contact-details a {
    color: #007bff; /* Link color */
    text-decoration: underline;
}

.contact-details a:hover {
    color: #0056b3;
}

#map-container {
    flex: 2 1 400px; /* Allow map to take more space */
    min-height: 300px;
    background-color: #eee; /* Placeholder background */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    overflow: hidden; /* Ensure map iframe fits */
}

#map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}


/* --- Gallery Grid & Lightbox --- */
#gallery {
    background-color: #f0f0f0; /* Light background for gallery section */
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* Fixed 5 columns */
    gap: 1rem;
    max-width: 1200px; /* Adjust max width as needed */
    margin: 0 auto; /* Center the grid */
}

.gallery-item {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    aspect-ratio: 1 / 1; /* Keep items square */
    background-color: #fff; /* Background for the frame */
    padding: 8px; /* Padding to create the frame effect */
}

.gallery-item img,
.gallery-item video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the square area, clipping if needed */
    display: block;
    transition: transform 0.3s ease;
}

.gallery-item:hover img,
.gallery-item:hover video {
    transform: scale(1.05); /* Slight zoom on hover */
}

/* Style for video play icon overlay */
.gallery-item[data-type="video"]::after {
    content: '▶'; /* Play symbol */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.8);
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    padding: 0.5rem 1rem 0.5rem 1.2rem; /* Adjust padding for centering */
    pointer-events: none; /* Don't interfere with clicks */
    transition: background-color 0.3s ease;
}

.gallery-item[data-type="video"]:hover::after {
    background-color: rgba(0, 0, 0, 0.6);
}


/* Lightbox Modal Styles */
.lightbox-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.lightbox-content {
    margin: auto;
    display: flex; /* Use flex to center content */
    justify-content: center;
    align-items: center;
    width: 90%;
    max-width: 900px; /* Max width for content */
    height: 90%; /* Max height */
    position: relative; /* For positioning content inside */
    top: 50%; /* Center vertically */
    transform: translateY(-50%);
}

.lightbox-content img,
.lightbox-content video {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: auto; /* Center the media */
    border-radius: 5px;
}

.lightbox-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: 1001; /* Above content */
}

.lightbox-close:hover,
.lightbox-close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* --- Gallery Toggle Button --- */
.gallery-toggle-button {
    display: block; /* Make it block level */
    margin: 1.5rem auto; /* Center it below the grid */
    background-color: #6c757d; /* Grey color */
    border: none;
}

.gallery-toggle-button:hover {
    background-color: #5a6268;
}


/* --- Basic Responsiveness --- */
@media (max-width: 768px) {
    header nav ul {
        flex-direction: column;
        gap: 1rem; /* Increased gap for more vertical space */
    }

    header nav {
        padding: 0.5rem;
    }

    /* Mobile Nav Link Styling */
    header nav a {
        display: block; /* Make links take full width */
        text-align: center; /* Center text */
        padding: 0.8rem 0; /* Add vertical padding */
        /* border-bottom: 1px solid #555; */ /* Removed border, gap provides separation */
    }

    /* Removed rule for last-child border */
    /* header nav li:last-child a {
        border-bottom: none;
    } */

    section {
        padding: 2rem 1rem; /* Reduce padding on smaller screens */
    }

    h2 {
        font-size: 1.8rem;
    }
    .about-photo { margin-bottom: 2rem; } /* Add space below photo when stacked */
    .about-content p { text-align: center; } /* Center text when stacked */

     #about, /* Make about section stack vertically too */
     #services .services-container,
     #contact .contact-container {
        flex-direction: column; /* Stack items vertically */
        align-items: center;
     }

     .about-photo, /* Center photo when stacked */
     .about-content, /* Ensure text block takes full width */
     .service-item, .contact-details, #map-container {
         flex-basis: auto; /* Reset flex-basis */
         width: 90%; /* Control width when stacked */
         margin-left: auto; /* Center items when stacked */
         margin-right: auto;
         max-width: 500px; /* Limit max width */
     }
}

/* --- Footer --- */
footer {
    text-align: center; /* Keep this */
    padding: 2rem 1rem;
    background-color: #f8f8f8;
    color: #555;
    font-size: 0.9rem;
}

/* New Footer Logo Styles - Forceful approach */
footer .footer-logo-link {
    display: block; /* Change to block */
    width: fit-content; /* Allow margin auto to work */
    margin-top: 1rem;
    line-height: 0;
    margin-left: auto; /* Center the block link */
    margin-right: auto;
}

footer .footer-logo-link .footer-logo {
    height: 15px !important;   /* Force height */
    width: auto !important;    /* Force width */
    display: block !important; /* Force display */
    margin: 0 auto !important; /* Force centering */
    transition: transform 0.2s ease-in-out;
}

footer .footer-logo-link .footer-logo:hover {
    transform: scale(1.05);
}