/* engine-diagnostics-repair.html — FAQ section heading (affidavit block layers + faq-template, engine diagnostics repair only) */

/* --- Layout (affidavit section-heading--faq-template) --- */
html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 2.6vw, 30px);
  overflow: visible;
}

html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template > div,
html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template > p {
  flex: 1 1 0;
  min-width: 0;
}

html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template > div {
  max-width: 520px;
}

html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template > p {
  flex: 1 1 360px;
  max-width: 600px;
  align-self: center;
}

/* --- Left column: outer glass block shell (affidavit main .section-heading > div) --- */
html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template > div {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 26px;
  background:
    radial-gradient(circle at top right, rgba(72, 27, 130, 0.14), transparent 34%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.9), rgba(250, 248, 255, 0.72) 52%, rgba(245, 240, 252, 0.62)),
    rgba(255, 255, 255, 0.44);
  box-shadow:
    0 30px 62px rgba(72, 27, 130, 0.18),
    0 12px 26px rgba(72, 27, 130, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 0 -2px 0 rgba(72, 27, 130, 0.1);
  backdrop-filter: blur(26px) saturate(154%);
  -webkit-backdrop-filter: blur(26px) saturate(154%);
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}

html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template > div::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.04) 42%, rgba(255, 255, 255, 0.16));
  pointer-events: none;
}

html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template > div > * {
  position: relative;
  z-index: 2;
}

html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template > div:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 255, 255, 0.76);
  box-shadow:
    0 38px 72px rgba(72, 27, 130, 0.22),
    0 16px 32px rgba(72, 27, 130, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(72, 27, 130, 0.12);
}

/* --- Inner raised blocks: eyebrow + h2 (affidavit glass pill layers) --- */
html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template .eyebrow,
html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template h2 {
  position: relative;
  overflow: hidden;
  transform: translateY(0);
  border: 1px solid rgba(255, 255, 255, 0.5);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(245, 240, 252, 0.46)),
    rgba(255, 255, 255, 0.38);
  box-shadow:
    0 18px 36px rgba(72, 27, 130, 0.12),
    0 8px 18px rgba(72, 27, 130, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 -1px 0 rgba(72, 27, 130, 0.08);
  backdrop-filter: blur(18px) saturate(142%);
  -webkit-backdrop-filter: blur(18px) saturate(142%);
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s ease,
    border-color 0.28s ease,
    background 0.28s ease,
    filter 0.28s ease;
}

html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template .eyebrow::before,
html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template h2::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto;
  height: 54%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0));
  pointer-events: none;
}

html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 14px;
  padding: 9px 16px;
  border-radius: 999px;
  color: #481b82;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.82rem;
  font-weight: 800;
}

html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template .eyebrow::after {
  content: "";
  position: relative;
  width: 48px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}

html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template h2 {
  display: block;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 12px 16px;
  border-radius: 24px;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.55rem, 2.15vw, 2.15rem);
  font-weight: 600;
  line-height: 1.08;
  color: #2e0c5e !important;
  text-wrap: balance;
}

/* --- Right column: intro glass block + inner faq-intro-button layer --- */
html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template > p {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: 0;
  padding: 18px 20px;
  border-radius: 24px;
  border: 1px solid rgba(72, 27, 130, 0.14);
  background:
    radial-gradient(circle at top right, rgba(72, 27, 130, 0.16), transparent 34%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.9), rgba(250, 248, 255, 0.72) 52%, rgba(245, 240, 252, 0.62)),
    rgba(255, 255, 255, 0.46);
  box-shadow:
    0 34px 70px rgba(72, 27, 130, 0.2),
    0 14px 30px rgba(72, 27, 130, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -2px 0 rgba(72, 27, 130, 0.1);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  color: #4a4a4a;
  line-height: 1.75;
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}

html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template > p::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto;
  height: 54%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0));
  pointer-events: none;
}

html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template .faq-intro-button {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(245, 240, 252, 0.58)),
    rgba(255, 255, 255, 0.5);
  box-shadow:
    0 18px 34px rgba(72, 27, 130, 0.14),
    0 8px 18px rgba(72, 27, 130, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -1px 0 rgba(72, 27, 130, 0.1);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  color: #2e0c5e !important;
  font-weight: 600;
  line-height: 1.55;
  transition:
    transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.24s ease,
    border-color 0.24s ease,
    filter 0.24s ease;
}

html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template .faq-intro-button::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto;
  height: 54%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0));
  pointer-events: none;
}

/* --- Hover lift on inner blocks (affidavit glass template) --- */
html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template .eyebrow:hover,
html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template h2:hover,
html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template > p:hover,
html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template .faq-intro-button:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.74);
  box-shadow:
    0 32px 56px rgba(72, 27, 130, 0.18),
    0 14px 26px rgba(72, 27, 130, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -1px 0 rgba(72, 27, 130, 0.11);
  filter: brightness(1.02);
}

@media (max-width: 860px) {
  html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template {
    flex-wrap: wrap;
    align-items: stretch;
  }

  html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template > div,
  html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template > p {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }

  html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template h2 {
    width: 100%;
  }
}

@media (max-width: 760px) {
  html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template > p {
    padding: 14px 16px;
  }
}

@media (max-width: 480px) {
  html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template .eyebrow,
  html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template h2,
  html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template > p {
    padding: 12px 14px;
  }
}

/* FAQ accordion — answer body text black only; summary titles keep shared purple heading */
html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .faq-item__body,
html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .faq-item__body p,
html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .faq-item__body li,
html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .faq-item__body h3 {
  color: #000000 !important;
}

/* ═══════════════════════════════════════════════════════════════
   FAQ PHASE 2 — Accordion Body Glass (canonical contact reference)
   Copied from contact-page-faq-section.css Phase 2, scoped to engine-diagnostics-repair-page
   ═══════════════════════════════════════════════════════════════ */

/* Section background with radial gradients */
html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount #hydraulic-system-service-faq-blog {
  position: relative;
  overflow: hidden;
  padding-top: clamp(64px, 8vw, 92px);
  padding-bottom: clamp(72px, 9vw, 104px);
}

html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount #hydraulic-system-service-faq-blog::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 10%, rgba(250, 204, 21, 0.1), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(72, 27, 130, 0.12), transparent 32%);
  pointer-events: none;
}

html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount #hydraulic-system-service-faq-blog > .container {
  position: relative;
  z-index: 1;
}

/* FAQ grid layout */
html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .faq {
  display: grid;
  gap: 18px;
}

/* FAQ item outer card (Layer 0 — glass tray with sheen) */
html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .faq-item {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at top right, rgba(72, 27, 130, 0.12), transparent 34%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.9), rgba(250, 248, 255, 0.74) 52%, rgba(245, 240, 252, 0.64)),
    rgba(255, 255, 255, 0.5) !important;
  box-shadow:
    0 30px 62px rgba(72, 27, 130, 0.18),
    0 12px 26px rgba(72, 27, 130, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 0 -2px 0 rgba(72, 27, 130, 0.1) !important;
  backdrop-filter: blur(24px) saturate(152%);
  -webkit-backdrop-filter: blur(24px) saturate(152%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}

html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .faq-item::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.04) 42%, rgba(255, 255, 255, 0.16));
  pointer-events: none;
}

html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .faq-item > * {
  position: relative;
  z-index: 2;
}

html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .faq-item:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.76) !important;
  box-shadow:
    0 38px 76px rgba(72, 27, 130, 0.22),
    0 16px 32px rgba(72, 27, 130, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(72, 27, 130, 0.12) !important;
}

/* Summary pill (Layer 2) */
html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .faq-item summary {
  margin: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(245, 240, 252, 0.56)),
    rgba(255, 255, 255, 0.42) !important;
  color: #2e0c5e !important;
  box-shadow:
    0 18px 36px rgba(72, 27, 130, 0.12),
    0 8px 18px rgba(72, 27, 130, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(72, 27, 130, 0.08) !important;
}

/* FAQ body grid */
html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .faq-item__body {
  display: grid;
  gap: 12px;
  padding: 0 18px 18px !important;
}

/* Per-element pills inside FAQ body */
html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .faq-item__body p,
html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .faq-item__body ul,
html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .faq-item__body h3 {
  position: relative;
  overflow: hidden;
  margin: 0 !important;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.54) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(245, 240, 252, 0.48)),
    rgba(255, 255, 255, 0.38) !important;
  box-shadow:
    0 16px 32px rgba(72, 27, 130, 0.1),
    0 7px 16px rgba(72, 27, 130, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 -1px 0 rgba(72, 27, 130, 0.08) !important;
  backdrop-filter: blur(16px) saturate(138%);
  -webkit-backdrop-filter: blur(16px) saturate(138%);
}

html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .faq-item__body p,
html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .faq-item__body ul {
  padding: 14px 16px !important;
}

html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .faq-item__body ul {
  padding-left: 2rem !important;
}

html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .faq-item__body h3 {
  width: fit-content;
  max-width: 100%;
  padding: 10px 14px !important;
  color: #2e0c5e !important;
  font-weight: 800;
}

/* Triple-stack depth */
html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .faq-item::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 2px;
  height: calc(100% - 12px);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(46, 12, 94, 0.05), rgba(46, 12, 94, 0.13));
  box-shadow: 0 28px 56px rgba(46, 12, 94, 0.2);
  transform: translateY(11px) scale(0.985);
  z-index: 0;
  pointer-events: none;
}

html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .faq-item summary,
html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .faq-item__body { position: relative; z-index: 3; }
html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .faq-item summary { transform: translateY(-2px); }
html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .faq-item:hover summary { transform: translateY(-6px); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template > div,
  html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template .eyebrow,
  html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template h2,
  html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template > p,
  html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template .faq-intro-button,
  html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .faq-item {
    transition: none !important;
  }

  html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template > div:hover,
  html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template .eyebrow:hover,
  html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template h2:hover,
  html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template > p:hover,
  html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .section-heading--faq-template .faq-intro-button:hover,
  html[data-hydraulic-system-service-page] #hydraulic-system-service-faq-discount .faq-item:hover {
    transform: none !important;
  }
}