/* services.css — page-scoped styles for services.html (based on about.css template) */

/* Compatibility: allow replacing id="cards" with class="cards" without layout regressions. */
#cards, .cards {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* Main container for services page cards */
#services-card, .services-card {
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;
  background: transparent;
}

.services-content, #services-content {
  max-width: 900px;
  margin: 0.75rem auto;
  padding: 0.5rem 0;
  color: var(--brand-black);
  font-size: 0.9rem;
  line-height: 1.5;
  box-sizing: border-box;
}
h1.services-title {
  display: table !important;
  width: auto !important;
  margin: 0.5rem auto 0.5rem auto !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: var(--brand-blue) !important;
  text-align: center !important;
  padding-bottom: 0.125rem !important;
  border-bottom: 2px solid var(--brand-red) !important;
  white-space: normal !important;
}
h2.services-title {
    display: block !important;
    width: fit-content !important;
    margin: 0 auto 1rem !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
  color: var(--brand-blue) !important;
    text-transform: uppercase !important;
    padding-bottom: 0.25rem !important;
    border-bottom: 2px solid var(--brand-red) !important;
    text-align: center !important;
}
h2.services-title-white {
    display: block !important;
    width: fit-content !important;
    margin: 0 auto 1rem !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--brand-gold) !important;
    text-transform: uppercase !important;
    padding-bottom: 0.25rem !important;
    border-bottom: 2px solid var(--brand-red) !important;
    text-align: center !important;
}

h1.contact-emergency, h1.contact-emergency a {
  display: table !important;
  width: auto !important;
  margin: 0.5rem auto 0.5rem auto !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: var(--brand-red) !important;
  text-align: center !important;
  padding-bottom: 0.125rem !important;
  white-space: normal !important;
  text-transform: uppercase !important;
  border-bottom: none !important;
}
h1.contact-emergency a {
  color: inherit !important;
  text-decoration: none !important;
}
h1.contact-emergency a:hover {
  display: table !important;
  width: auto !important;
  margin: 0.5rem auto 0.5rem auto !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: var(--brand-red) !important;
  text-align: center !important;
  padding-bottom: 0.125rem !important;
  white-space: normal !important;
  text-transform: uppercase !important;
}

/* Title style matching Area Search / about page headings */
.services-title {
  display: table !important;
  width: auto !important;
  margin: 0.5rem auto 0.5rem auto !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: var(--brand-blue) !important;
  text-align: center !important;
  padding-bottom: 0.125rem !important;
  border-bottom: 2px solid var(--brand-red) !important;
}

.services-summary {
  color: var(--brand-black) !important;
  font-size: 0.9rem !important;
  font-style: italic !important;
  margin: 0.25rem auto 0.75rem auto !important;
  max-width: 900px !important;
  text-align: center !important;
}

/* Ensure injected content flows vertically inside the services card */
.services-card > .ninehundred,
.services-card.ninehundred,
.services-card .ninehundred {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left !important;
}

/* Buttons inside services content follow general-button with larger touch area */
.services-content .general-button,
.services-content a.general-button,
.services-content button.general-button {
  font-size: 1.05rem !important;
  padding: 8px 22px !important;
}

/* CTA centering */
.services-cta { text-align: center !important; margin-top: 1rem !important; }

/* Override the site-wide #cards .ninehundred flex layout for services sections
   so section cards (900px) stack and the plumbing service grid inside them
   can use the standard `service-overview` helpers without interference. */
#services-section > .ninehundred,
#services-section > .ninehundred.card-inner {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Stronger override for the theme/index rule that applies flex to
   any .ninehundred directly inside a .background-blue within #cards. */
#cards .background-blue > .ninehundred.background-eggshell.services-content {
  display: block !important;
  flex-direction: initial !important;
  justify-content: initial !important;
  align-items: initial !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
}

/* Small horizontal gutter inside 900px cards */
.services-content { padding-left: 20px !important; padding-right: 20px !important; }

/* Ensure the eggshell 900px container can position badges absolutely */
.services-content { position: relative !important; }

/* Duplicate emergency badge styling for badges placed inside the
   services content (top-of-page badge which is not inside .service-overview). */
.services-content .emergency-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--brand-red) !important;
  color: var(--brand-white) !important;
  padding: 0px 16px !important;
  border-radius: 5px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12) !important;
}

/* Emergency list and grid: ensure content is left-aligned (overrides theme .ninehundred centering) */
.services-content .emergency-grid,
.services-content .services-body,
.services-content .services-body ul,
.services-content .services-body li {
  text-align: left !important;
  color: var(--brand-black) !important;

}

/* Specifically left-align the secondary content column inside the emergency grid */
.services-content .emergency-grid > div:nth-child(2) {
  text-align: left !important;
  margin-left: 0 !important;

}

/* Give lists a consistent left inset so bullets align visually */
.services-content .services-body { margin: 0; padding-left: 1.25rem !important; }
.services-content .services-body li { margin-bottom: 0.5rem; }

/* Plumbing services layout: reuse theme's .service-overview layout but scope
   adjustments to this page. The `.services-grid` should use the same 4-up
   layout inside the 900px content area. */
.services-grid .ninehundred { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; justify-content: space-between !important; }
.services-grid .service-overview { box-sizing: border-box; width: calc((100% - 24px) / 4); min-width: 180px; max-width: 260px; }

@media (max-width: 980px) {
  .services-grid .service-overview { width: calc(50% - 8px) !important; }
}
@media (max-width: 600px) {
  .services-grid .ninehundred { display: block !important; }
  .services-grid .service-overview { width: 100% !important; }
}

@media print {
  .services-card { box-shadow: none; border: none; max-width: 100% !important; padding: 5px; }
  .services-content { font-size: 12pt; line-height: 1.4; }
}

/* Page-scoped utility: small centered toolbar matching about.css */
.services-toolbar { display: flex !important; gap: 12px !important; align-items: center !important; justify-content: center !important; padding: 0.5rem 0 !important; }

/* Make sure headings inside service cards are readable on eggshell backgrounds */
.service-overview h4 { color: var(--brand-blue) !important; }

/* End of services.css */