/* ==========================================================================
   Category pages (/billing/, /it/, /automation/)
   Additive only - this file does not modify style.css.
   Loaded by layouts/_default/category-page.html.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FIX: .final-cta phone number and lead paragraph were unreadable.
   .final-cta sets `color: var(--white)` on the section, but the bare element
   selectors `p { color: var(--gray-dark) }` (style.css:126) and
   `a { color: var(--primary) }` (style.css:92) match the children DIRECTLY,
   and a directly-matching declaration always beats an inherited one
   regardless of specificity. Result: grey text and a #B65209 link on the
   #B65209 rust band - the phone number rendered invisible.

   This scopes the fix. Apply the same two rules in style.css to fix the
   band everywhere it appears (it is on all 35 legacy service pages,
   /about-us/, and /brevard-county/).
   -------------------------------------------------------------------------- */
.final-cta p,
.final-cta .cta-note {
  color: #fff;
}
.final-cta a,
.final-cta .cta-note a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.final-cta a:hover,
.final-cta a:focus-visible {
  color: #fff;
  text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   Wrapper. The site has no shared `.container` class - existing sections each
   declare `padding: 5rem 8%; max-width: 1400px; margin: 0 auto` individually
   (see .solution-content, .services-catalog in style.css). This matches that
   convention rather than inventing a competing grid.
   -------------------------------------------------------------------------- */
.category-container {
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 8%;
  padding-right: 8%;
}

/* --------------------------------------------------------------------------
   Category quicknav - the pattern /pricing/ already uses, scoped to one
   category so a visitor faces ~12 choices instead of 35.
   -------------------------------------------------------------------------- */
.category-quicknav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--light, #e9ecef);
  padding: 0.75rem 0;
}
@supports (backdrop-filter: blur(6px)) {
  .category-quicknav { backdrop-filter: blur(6px); }
}
.category-quicknav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.category-quicknav a {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--light, #e9ecef);
  border-radius: 999px;
  font-size: 0.9rem;
  line-height: 1.3;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--dark-soft, #2a2a2a);
  text-decoration: none;
}
.category-quicknav a:hover,
.category-quicknav a:focus-visible {
  border-color: var(--primary, #b65209);
  color: var(--primary, #b65209);
}

/* --------------------------------------------------------------------------
   Service blocks. Left-aligned with a real measure - the centred long-measure
   body text is the readability problem flagged across the rest of the site.
   -------------------------------------------------------------------------- */
.category-service {
  padding: 3.5rem 0;
  border-top: 1px solid var(--light, #e9ecef);
  scroll-margin-top: 5rem; /* clears the sticky quicknav on anchor jump */
}
.category-service-alt {
  background: var(--off-white, #f8f9fa);
}
.category-service h2 {
  margin: 0 0 0.35rem;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  line-height: 1.2;
  text-wrap: balance;
}
.category-service-tagline {
  margin: 0 0 1.75rem;
  max-width: 62ch;
  color: var(--gray, #6c757d);
  font-size: 1.05rem;
}

.category-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem 2.5rem;
  margin-bottom: 1.75rem;
}
.category-service-grid h3,
.category-service-features h3 {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray, #6c757d);
}
.category-service-grid ul {
  margin: 0;
  padding-left: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.category-service-grid li {
  max-width: 58ch;
  line-height: 1.6;
}

.category-service-features dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem 2.5rem;
}
.category-service-features dl > div {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.category-service-features dt {
  font-weight: 700;
  line-height: 1.35;
}
.category-service-features dd {
  margin: 0;
  max-width: 58ch;
  color: var(--gray-dark, #495057);
  line-height: 1.65;
}

@media (max-width: 640px) {
  .category-service { padding: 2.5rem 0; }
  .category-service-grid { gap: 1.25rem; }
  .category-quicknav { position: static; }
}