/*
Theme Name: Roofing Custom
Author: Antigravity
Description: Custom roofing theme with Tailwind support.
Version: 1.0
*/

/* We will use a CDN for Tailwind for simplicity in this Docker setup, 
   but specific overrides can go here. */

body {
  font-family: "Inter", sans-serif;
}

/* Unique Project Styling */
.project-single-layout {
    max-width: 1200px;
    margin: 0 auto;
}

/* Hero Section */
.project-hero {
    height: 400px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}
.hero-overlay {
    background: rgba(0,0,0,0.6); /* Darkens image so text pops */
    padding: 20px;
    border-radius: 5px;
}

/* The ACF Data Bar */
.project-details-bar {
    display: flex;
    justify-content: space-around;
    background-color: #f4f4f4; /* Light grey bar */
    padding: 20px;
    margin-bottom: 40px;
    border-bottom: 3px solid #d32f2f; /* Roof Red accent */
}

/* Content Layout */
.project-body-content {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Text takes 2 parts, Sidebar 1 part */
    gap: 40px;
    padding: 0 20px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .project-body-content {
        grid-template-columns: 1fr; /* Stack on mobile */
    }
    .project-details-bar {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}