/* ==========================================================================
   AdviseCore — service-detail.css (2026 redesign)
   Shared across all 8 service detail pages. Replaces the old inline <style>.
   ========================================================================== */

/* These pages use their own .service-hero, so hide the auto breadcrumb band */
.breadcrumbs { display: none !important; }

/* ---- Service hero -------------------------------------------------------- */
.service-hero {
  position: relative; overflow: hidden;
  background: var(--color-dark);
  color: #F4EFE4;
  padding: 160px 0 84px;
  text-align: center;
}
.service-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(184,134,11,.16) 1px, transparent 1px);
  background-size: 26px 26px; opacity: .5;
}
.service-hero::after {
  content: ""; position: absolute; top: -120px; right: 120px; width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(184,134,11,.2), rgba(184,134,11,0) 66%); pointer-events: none;
}
.service-hero .container { position: relative; z-index: 1; }
.service-hero h1 { font: 800 46px/1.12 var(--heading-font); letter-spacing: -.015em; margin: 0 0 18px; color: #F6F2E8; }
.service-hero h2 { font: 400 20px/1.5 var(--default-font); color: var(--gold-light); margin: 0 auto; max-width: 760px; opacity: .95; }

/* ---- Intro --------------------------------------------------------------- */
.intro-section { padding: 80px 0 40px; background: var(--background-color); }
.intro-card {
  background: #fff; border-radius: 18px; padding: 44px;
  box-shadow: 0 24px 60px rgba(55,66,59,.1); border-left: 5px solid var(--color-primary);
}
.intro-card h3 { font: 700 26px/1.25 var(--heading-font); color: var(--color-secondary); margin-bottom: 18px; }
.intro-card p { font: 400 16px/1.7 var(--default-font); color: #5F655F; }
.highlight-text { color: var(--color-primary); font-weight: 600; }

/* ---- Audit coverage ------------------------------------------------------ */
.audit-coverage { padding: 70px 0; background: var(--background-color); }
.section-title { position: relative; margin-bottom: 18px; font: 700 32px/1.2 var(--heading-font); color: var(--color-secondary); }
.section-title::after { content: ""; position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; border-radius: 3px; background: var(--color-primary); }

.coverage-item {
  background: #fff; border: 1px solid rgba(55,66,59,.1); border-radius: 16px; padding: 32px;
  margin-bottom: 24px; height: 100%; transition: transform .3s, box-shadow .3s, border-color .3s;
}
.coverage-item:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(55,66,59,.12); border-color: rgba(184,134,11,.4); }
.coverage-icon {
  width: 60px; height: 60px; border-radius: 15px; margin-bottom: 20px;
  background: rgba(184,134,11,.1); display: flex; align-items: center; justify-content: center;
}
.coverage-icon i { font-size: 26px; color: var(--color-primary); }
.coverage-item h4 { font: 700 19px/1.3 var(--heading-font); color: var(--color-secondary); margin-bottom: 12px; }
.coverage-item p { font: 400 14.5px/1.65 var(--default-font); color: var(--color-muted); margin: 0; }

/* ---- Services sidebar ---------------------------------------------------- */
.services-sidebar { position: sticky; top: 104px; background: #fff; border: 1px solid rgba(55,66,59,.1); padding: 28px; border-radius: 16px; box-shadow: 0 14px 40px rgba(55,66,59,.06); }
.services-sidebar h4 { font: 700 18px/1.2 var(--heading-font); color: var(--color-secondary); margin: 0 0 18px; }
.services-sidebar h5 { font: 700 15px/1.3 var(--heading-font); color: var(--color-secondary); margin: 0 0 8px; }
.services-sidebar > .mt-4 p { font: 400 14px/1.6 var(--default-font); color: var(--color-muted); }
.services-list { display: flex; flex-direction: column; gap: 8px; }
.services-list a {
  display: block; padding: 13px 18px; border-radius: 10px;
  background: var(--background-color); color: var(--color-secondary);
  font: 500 14.5px/1.3 var(--nav-font); border-left: 3px solid transparent; transition: all .3s;
}
.services-list a.active, .services-list a:hover { background: var(--color-primary); color: #fff; border-left-color: var(--color-secondary); }

/* ---- Benefits ------------------------------------------------------------ */
.benefits-section { padding: 80px 0; background: linear-gradient(180deg, #F6F2E9, var(--background-color)); }
.benefit-item {
  display: flex; align-items: flex-start; gap: 18px; margin-bottom: 22px; padding: 22px 24px;
  background: #fff; border: 1px solid rgba(55,66,59,.08); border-radius: 14px;
  box-shadow: 0 8px 24px rgba(55,66,59,.05); transition: transform .3s, box-shadow .3s;
}
.benefit-item:hover { transform: translateX(8px); box-shadow: 0 14px 34px rgba(55,66,59,.1); }
.benefit-icon { flex: none; width: 48px; height: 48px; border-radius: 12px; background: var(--color-primary); display: flex; align-items: center; justify-content: center; }
.benefit-icon i { color: #fff; font-size: 20px; }
.benefit-item h5 { font: 700 17px/1.3 var(--heading-font); color: var(--color-secondary); margin: 2px 0 6px; }
.benefit-item p { font: 400 14px/1.55 var(--default-font); color: var(--color-muted); margin: 0; }

/* ---- Contact CTA --------------------------------------------------------- */
.contact-cta-section {
  position: relative; overflow: hidden;
  background: var(--color-dark-2); color: #F4EFE4;
  padding: 70px 0; margin: 70px auto 80px; max-width: 1104px; border-radius: 20px; text-align: center;
}
.contact-cta-section::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 700px; height: 360px; background: radial-gradient(ellipse, rgba(184,134,11,.18), rgba(184,134,11,0) 70%); pointer-events: none; }
.contact-cta-section .container { position: relative; }
.contact-cta-section h3 { font: 700 30px/1.2 var(--heading-font); color: #F6F2E8; margin-bottom: 14px; }
.contact-cta-section p { color: #AEB3AC; margin-bottom: 28px; font-size: 17px; }

/* Bootstrap text helpers within these pages */
.audit-coverage .lead, .benefits-section .lead { color: var(--color-muted) !important; }

@media (max-width: 991px) {
  .service-hero h1 { font-size: 34px; }
  .service-hero h2 { font-size: 17px; }
  .services-sidebar { position: static; margin-bottom: 30px; }
  .intro-card { padding: 32px 26px; }
  .contact-cta-section { margin: 50px 18px 60px; }
}