/* style.css - AAG Inspections Master Styles */

:root {
    --primary-blue: #0056b3; 
    --dark-black: #111111;
    --light-gray: #f8f9fa;
    --white: #ffffff;
    --header-gray: #cccccc;
}

/* 1. THE RESET - This prevents things from looking "out of place" */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', sans-serif;
    color: var(--dark-black);
    background-color: var(--light-gray);
    line-height: 1.6;
    overflow-x: hidden; /* Prevents horizontal scrolling */
}

/* 2. NAVIGATION & LOGO FIX */
header {
    background-color: var(--white);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    width: 100%;
}

.nav-container {
    width: 90%;            /* Give it some breathing room on the sides */
    max-width: 1200px;     /* Keeps logo/menu aligned with your content cards */
    margin: 0 auto;        /* Centers the whole container */
    display: flex;
    justify-content: space-between; /* Pushes logo left and menu right */
    align-items: center; 
    padding: 15px 0;       /* Slightly more vertical breathing room */
}

/* Ensure the logo itself doesn't have extra margins pushing it */
.nav-container a img {
    display: block;
    max-height: 120px;     /* Slightly smaller keeps the header sleeker */
    width: auto;
}


nav ul { 
    list-style: none; 
    display: flex; 
    align-items: center; 
}

nav ul li { 
    margin-left: 40px; 
}

nav ul li a { 
    text-decoration: none; 
    color: var(--dark-black); 
    font-weight: 600;           /* Bolder weight for better visibility */
    font-size: 1rem;         /* Increased from 1rem */
    font-family: 'Montserrat', sans-serif;
    transition: color 0.3s ease; 
    letter-spacing: 0.3px;
}
nav ul li a:hover,
nav ul li a.active { 
    color: var(--primary-blue); 
}

.btn-header { 
    background-color: var(--primary-blue); 
    color: var(--white) !important; 
    padding: 12px 25px;         /* Increased padding */
    border-radius: 5px; 
    font-size: 1rem;          /* Match the new menu size */
    font-weight: 800;
}
/* 3. THE BLACK BOX HEADER FIX */
.page-header { 
    background-color: var(--dark-black); 
    color: var(--white); 
    text-align: center; 
    padding: 60px 20px; 
    width: 100%;
}

.page-header h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0;
}

.page-header p {
    font-size: 1.1rem;
    color: var(--header-gray); 
    max-width: 800px;
    margin: 10px auto 0 auto;
}

/* 4. CONTENT & GRID LAYOUT */
.content-section { 
    padding: 60px 20px; 
    max-width: 1200px; 
    margin: 0 auto; 
}

.grid-3 { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 30px; 
}

.card { 
    background: var(--white); 
    padding: 30px; 
    border-radius: 8px; 
    border-top: 5px solid var(--primary-blue); 
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
}

h2, h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    margin-bottom: 15px;
}

.btn-main { 
    display: inline-block; 
    background-color: var(--primary-blue); 
    color: var(--white); 
    padding: 15px 30px; 
    font-weight: 700; 
    text-decoration: none; 
    border-radius: 4px;
    text-transform: uppercase;
}

/* 5. FOOTER & MOBILE FIXES */
footer { 
    background-color: #0a0a0a; 
    color: #999; 
    text-align: center; 
    padding: 50px 20px; 
    margin-top: 50px;
}

/* Floating Call Button - Perfected Size & Placement */
.mobile-call-btn {
    position: fixed !important;
    bottom: 25px !important;
    right: 20px !important; 
    background-color: #28a745 !important;
    color: white !important;
    padding: 12px 20px !important; /* Balanced padding */
    border-radius: 50px !important; /* Round pill shape looks cleaner */
    font-weight: 700 !important;
    font-size: 1.1rem !important; /* Readable but not overwhelming */
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
    z-index: 99999 !important;
    display: none; /* Hidden on desktop */
    font-family: 'Montserrat', sans-serif !important;
    border: 2px solid white; /* Adds a nice "pop" against the background */
}

@media(max-width: 1024px) {
    .mobile-call-btn { 
        display: block !important; 
    }
}
/* Optional: Add a subtle pulse so they can't miss it */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

@media(max-width: 1024px) {
    .mobile-call-btn { 
        display: block !important; 
        animation: pulse 2s infinite ease-in-out;
    }
}
@media(max-width: 1024px) {
    .nav-container { flex-direction: column; }
    nav ul { margin-top: 20px; flex-wrap: wrap; justify-content: center; }
    nav ul li { margin: 5px 10px; }
    .mobile-call-btn { display: block; }
    .page-header h1 { font-size: 2rem; }
}