/* ================================================================
   Shared styles for individual location pages (charlotte-nc.php,
   and any future ones like tampa-fl.php / key-west-fl.php).
   Reuses the same color values as home.css/managed-services.css.
   Shares header.css/footer.css (both are loaded on these pages too).
   ================================================================ */

:root{
  --navy-dark: #000026;
  --navy: #0b2545;
  --blue: #1e6fd9;
  --blue-light: #eaf2fd;
  --white: #ffffff;
  --gray-text: #4a5568;
  --muted: #9fb3d1;
}

body{
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--navy);
}

.container{
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============ Page hero ============ */
.page-hero{
  background: var(--navy-dark);
  color: var(--white);
  padding: 56px 0;
  text-align: center;
}
.page-hero h1{
  margin: 0 0 12px;
  font-size: 2.2rem;
}
.page-hero p{
  margin: 0 auto;
  max-width: 560px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* ============ Area served ============ */
.area-section{
  padding: 56px 0;
  text-align: center;
}
.area-section h2{
  margin: 0 0 10px;
  font-size: 1.6rem;
}
.area-section .section-lede{
  margin: 0 auto 28px;
  max-width: 560px;
  color: var(--gray-text);
  line-height: 1.6;
}
.area-pills{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
.area-pills li{
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--blue-light);
  color: var(--navy);
  font-weight: 500;
  font-size: 0.9rem;
}

/* ============ Services grid ============ */
.local-services-section{
  background: var(--blue-light);
  padding: 56px 0;
}
.local-services-section h2{
  margin: 0 0 8px;
  text-align: center;
  font-size: 1.6rem;
}
.local-services-section .section-lede{
  margin: 0 auto 32px;
  max-width: 560px;
  text-align: center;
  color: var(--gray-text);
  line-height: 1.6;
}
.local-services-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.local-service-card{
  background: var(--white);
  border: 1px solid #d6e2f5;
  border-radius: 12px;
  padding: 22px;
}
.local-service-card h3{
  margin: 0 0 6px;
  font-size: 1rem;
}
.local-service-card p{
  margin: 0;
  color: var(--gray-text);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ============ Locations directory grid (our-locations.php) ============ */
.locations-directory{
  padding: 56px 0;
}
.locations-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.location-card{
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid #d6e2f5;
  border-radius: 14px;
  padding: 28px;
}
.location-card h3{
  margin: 0 0 8px;
  font-size: 1.2rem;
}
.location-card .location-tag{
  display: inline-block;
  align-self: flex-start;
  margin: 0 0 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--blue-light);
  color: var(--blue);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.location-card p{
  margin: 0 0 20px;
  color: var(--gray-text);
  font-size: 0.92rem;
  line-height: 1.6;
  flex-grow: 1;
}
.location-card .btn{
  align-self: flex-start;
}

.locations-note{
  background: var(--blue-light);
  border-radius: 14px;
  padding: 32px;
  text-align: center;
  margin-top: 32px;
}
.locations-note h2{
  margin: 0 0 10px;
  font-size: 1.4rem;
}
.locations-note p{
  margin: 0 auto;
  max-width: 560px;
  color: var(--gray-text);
  line-height: 1.6;
}

/* ============ Final CTA ============ */
.local-cta{
  padding: 64px 0;
  text-align: center;
}
.local-cta h2{
  margin: 0 0 12px;
  font-size: 1.7rem;
}
.local-cta p{
  margin: 0 auto 24px;
  max-width: 480px;
  color: var(--gray-text);
  line-height: 1.6;
}
.local-cta-actions{
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.local-address{
  margin: 28px 0 0;
  font-size: 0.95rem;
}
.local-address a{
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--blue);
}
.local-address a:hover{
  color: var(--blue);
}

.local-hours{
  list-style: none;
  margin: 14px auto 0;
  padding: 18px 24px;
  max-width: 320px;
  background: var(--blue-light);
  border-radius: 12px;
  text-align: left;
}
.local-hours li{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0;
  color: var(--navy);
  font-size: 0.92rem;
}
.local-hours li span:first-child{
  color: var(--gray-text);
}

.local-walkin{
  margin: 14px 0 0;
  color: var(--gray-text);
  font-size: 0.85rem;
  font-style: italic;
}

.btn{
  display: inline-block;
  padding: 11px 22px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-primary{
  background: var(--blue);
  color: var(--white);
  border: 1.5px solid var(--blue);
}
.btn-primary:hover{
  background: #175bb3;
  border-color: #175bb3;
}
.btn-outline{
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
}
.btn-outline:hover{
  background: var(--navy);
  color: var(--white);
}

@media (max-width: 860px){
  .local-services-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .locations-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px){
  .page-hero{ padding: 40px 0; }
  .page-hero h1{ font-size: 1.7rem; }
  .area-section, .local-services-section, .local-cta, .locations-directory{ padding: 40px 0; }
  .local-services-grid{
    grid-template-columns: 1fr;
  }
  .locations-grid{
    grid-template-columns: 1fr;
  }
}