/* style.css - AAG Inspections Master Styles (clean version)
   This stylesheet is adapted from the previous SWFL optimized site.  
   It preserves the original color palette and layout while ensuring the
   logo sizing stays consistent across pages and devices.  
   Note: avoid special characters in the CSS file itself to prevent
   encoding issues when the server serves the files. */

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

/* 1. THE RESET - 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; /* Prevent horizontal scrolling */
}

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

.nav-container {
    width: 90%;            /* Breathing room on the sides */
    max-width: 1200px;     /* Keeps logo/menu aligned with content cards */
    margin: 0 auto;        /* Center the container */
    display: flex;
    justify-content: space-between; /* Push logo left and menu right */
    align-items: center;
    padding: 15px 0;       /* Vertical breathing room */
}

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;
    font-size: 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;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 800;
}

/* 3. 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;
}

@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; }
}

/* --- 2026 SWFL SEO & Lead-Gen Enhancements --- */
.topbar {
    background: var(--primary-blue);
    color: var(--white);
    text-align: center;
    padding: 10px 15px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.topbar a {
    color: var(--white);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
.topbar a:hover {
    border-bottom-color: rgba(255, 255, 255, 0.85);
}

.hero-new {
    background: linear-gradient(135deg, rgba(0, 86, 179, 0.95), rgba(17, 17, 17, 0.92));
    color: var(--white);
    padding: 70px 20px;
}

/* Homepage-only hero art direction:
   drop a real photo at /swfl-hero.jpg for the full Southwest Florida look */
.home-page .hero-new.hero-swfl {
    background-image:
        linear-gradient(135deg, rgba(0, 52, 110, 0.70), rgba(9, 17, 26, 0.68)),
        url("swfl-hero.jpg"),
        linear-gradient(135deg, #1d6db8, #0e2137 62%, #08131f);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

@media (max-width: 768px) {
    .home-page .hero-new.hero-swfl {
        background-position: center 40%;
    }
}

.hero-inner {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.hero-new h1 {
    font-size: clamp(2rem, 4vw, 3.3rem);
    margin-bottom: 12px;
}

.hero-new p {
    font-size: 1.15rem;
    max-width: 780px;
    margin: 0 auto 22px auto;
}

.hero-cta {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.btn-outline {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.85);
}
.btn-outline:hover { opacity: 0.95; }

.hero-trust {
    display: flex;
    gap: 12px 18px;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 0.98rem;
    opacity: 0.95;
}

/* Footer links styling */
.footer-links {
    list-style: none;
    padding-left: 0;
    margin-top: 0;
}
.footer-links li { margin: 8px 0; }
.footer-links a { color: var(--header-gray); text-decoration: none; }
.footer-links a:hover { color: var(--white); }

/* Sticky mobile CTA */
.sticky-cta {
    position: fixed;
    right: 14px;
    left: auto;
    bottom: max(14px, env(safe-area-inset-bottom));
    display: none;
    background: transparent;
    padding: 0;
    gap: 0;
    justify-content: flex-end;
    z-index: 9999;
}

.sticky-btn {
    display: inline-block;
    text-decoration: none;
    padding: 12px 14px;
    border-radius: 8px;
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-weight: 800;
    letter-spacing: 0.3px;
    min-width: 90px;
    text-align: center;
}

.sticky-btn.primary {
    background: #28a745;
    border-color: rgba(255, 255, 255, 0.0);
}

.sticky-call {
    width: auto;
    min-width: 112px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

@media (max-width: 820px) {
    .sticky-cta { display: flex; }
    body { padding-bottom: 0; }
}

/* Lead form */
.lead-form { margin-top: 18px; }
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 700; margin-bottom: 6px; }
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 12px;
    border: 1px solid #d8d8d8;
    border-radius: 6px;
font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
}
.form-group textarea { resize: vertical; }
@media (max-width: 720px) {
    .form-row { grid-template-columns: 1fr; }
}

/* Header logo consistency */
.logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Visually hidden (screen reader) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* Service area list styling */
.service-area-list {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.service-area-list li {
    margin-bottom: 6px;
    padding-left: 20px;
    position: relative;
}

.service-area-list li::before {
    /* Use a unicode bullet via CSS to avoid encoding issues */
    content: "\2022";
    color: var(--primary-blue);
    position: absolute;
    left: 0;
    top: 0;
}

/* Utility class to center text */
.text-center {
    text-align: center;
}
/* Active nav link highlight */
.site-header nav ul li a.active {
    color: var(--primary-blue) !important;
    font-weight: 700;
}

.site-header nav ul li a.btn-header.active,
.site-header nav ul li a.btn-header:hover {
    color: var(--white) !important;
}

.site-header nav ul li a:hover {
    color: var(--primary-blue);
}


/* =========================
   HEADER: Desktop + Mobile Fix
   ========================= */

/* Desktop defaults */
.logo-img{
  display:block;
  max-height: 136px;
  width:auto;
  height:auto;
}

.site-header .nav-container{
  width:min(95%, 1320px);
  max-width:1320px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:nowrap;
  padding: 14px 0; /* breathing room so logo text isn't cramped */
}

.site-header nav{
  flex: 1 1 auto;
  margin-left:24px;
  min-width:0;
}

.site-header nav ul{
  display:flex;
  align-items:center;
  gap:8px 12px;
  flex-wrap:nowrap;
  justify-content:flex-end;
  margin:0;
  padding:0;
  list-style:none;
}

.site-header nav ul li a{
  white-space:nowrap;
  padding:8px 6px;
  font-size:0.95rem;
}

.btn-header{
  white-space:nowrap;
  padding:9px 12px;
  min-width:auto;
  text-align:center;
}

/* Mid-size screens: tighten before breaking */
@media (max-width: 1100px){
  .logo-img{ max-height: 112px; }
  .site-header nav ul{
    gap:8px;
    flex-wrap:nowrap;
  }
  .site-header nav ul li a{
    font-size:0.9rem;
    padding:8px 6px;
  }
  .btn-header{
    min-width:auto;
    padding:10px 12px;
  }
}

/* Mobile: stack logo above nav, allow nav to wrap nicely */
@media (max-width: 768px){
  .logo-img{ max-height: 100px; }

  .site-header .nav-container{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding: 10px 0 12px;
  }

  .site-header nav{
    width:100%;
  }

  .site-header nav ul{
    flex-wrap:wrap;             /* allow wrap instead of squeezing/cropping */
    justify-content:center;
    gap:10px 14px;              /* row/column gap */
  }

  .site-header nav ul li a{
    font-size:0.95rem;
    padding:8px 8px;
  }

  /* keep Request Quote nice on mobile */
  .btn-header{
    display:inline-block;
    width:auto;
    padding:10px 14px;
    border-radius:10px;
  }
}
/* =========================
   FAQ Spacing Fix
   ========================= */

.content-section h2 {
  margin-bottom: 22px;
}

.content-section h3 {
  margin-top: 28px;
  margin-bottom: 8px;
  font-size: 1.15rem;
}

.content-section h3:first-of-type {
  margin-top: 12px;
}

.content-section h3 + p {
  margin-top: 0;
  margin-bottom: 18px;
  line-height: 1.6;
}

/* Improve FAQ button spacing */
.content-section .btn-main {
  margin-top: 20px;
  display: inline-block;
}
/* ===== FAQ Polish Upgrade ===== */

.content-section h3 {
  border-top: 1px solid #e5e5e5;
  padding-top: 18px;
}

.content-section h3:first-of-type {
  border-top: none;
  padding-top: 0;
}