/* Phoenix Pool Resurfacing — site-specific color overrides for v2.5 */
:root {
  --color-accent:      #e94560;
  --color-accent-dark: #c73652;
  --color-accent-glow: rgba(233, 69, 96, 0.3);
  --color-warm:        #f4a261;
}

/* Fixed header is 74px tall — clear it on every hero so titles aren't clipped */
.page-hero    { padding-top: 7rem; padding-bottom: 3rem; }
.service-hero { padding-top: 7rem; }

@media (max-width: 768px) {
  .page-hero    { padding-top: 6rem; padding-bottom: 2.5rem; }
  .service-hero { padding-top: 6rem; }
}

/* Breathing room between hero and first content section */
.page-hero + section,
.service-hero + section,
.service-hero + .content-section,
main > section:first-of-type {
  padding-top: 3.5rem;
}
@media (max-width: 768px) {
  .page-hero + section,
  .service-hero + section,
  .service-hero + .content-section,
  main > section:first-of-type {
    padding-top: 2rem;
  }
}

/* Mobile contact grid — stack columns and prevent card overflow */
@media (max-width: 640px) {
  .contact-grid { grid-template-columns: 1fr !important; }
  .contact-info-card,
  .contact-info-column,
  .contact-form-column { min-width: 0; max-width: 100%; }
  .contact-email-link,
  .contact-info-card a,
  .contact-info-card span { word-break: break-word; overflow-wrap: anywhere; }
}

/* Wide content tables — horizontal scroll inside content instead of overflowing the page */
main table,
.content-container table,
.content-section table,
.blog-article-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Tables: override width:100% so columns use natural width → overflow-x:auto kicks in */
@media (max-width: 768px) {
  .blog-article-content table {
    width: auto !important;
    min-width: 460px;
  }
}
/* On narrow phones, drop the Lifespan column (4th) — reduces needed scroll width */
@media (max-width: 480px) {
  .blog-article-content table th:nth-child(4),
  .blog-article-content table td:nth-child(4) {
    display: none;
  }
}

/* Remove decorative quote-mark pseudo-elements — faint, misaligned on mobile, confusing */
.testimonial-card::before,
.testimonial-section .testimonial-quote::before {
  content: none !important;
}

/* Bullet points — restore padding stripped by * { padding: 0 } CSS reset */
.svc-section ul,
.loc-section ul,
.blog-article-content ul,
.content-section ul,
.calc-content ul,
.faq-item ul {
  padding-left: 1.6rem;
}
.svc-section li,
.loc-section li,
.blog-article-content li,
.content-section li,
.calc-content li {
  margin-bottom: 0.4rem;
}

/* Testimonial quote text — remove italic, bump contrast for mobile legibility */
.testimonial-card__text {
  font-style: normal !important;
  color: rgba(241, 245, 249, 0.95) !important;
}

/* Location page testimonial section — fix low-contrast heading + italic quote */
.testimonial-section h2 {
  color: #ffffff;
  text-align: center;
  margin-bottom: 2.5rem;
}
.testimonial-section .testimonial-quote {
  font-style: normal !important;
}