/* ==========================================================================
   ODEN-STEEL COMPONENT / SERVICE FAQ
   --------------------------------------------------------------------------
   Root → Intro → List → Item → Answer → Footer → Responsive → Utilities
   Phone CTA: shared component (components/phone-cta/).
   ========================================================================== */

@import url("../phone-cta/phone-cta.css");
@import url("../../css/utilities/layout.css");

/* --------------------------------------------------------------------------
   Root
   -------------------------------------------------------------------------- */

.service-faq {
  position: relative;
  padding: var(--space-faq-section-y) 0;
  background: linear-gradient(
    180deg,
    var(--color-faq-bg-start),
    var(--color-faq-bg-end)
  );
  color: var(--color-white);
  overflow: clip;
}

/* --------------------------------------------------------------------------
   Intro
   Width + horizontal centering: css/utilities/layout.css (.service-section-intro)
   -------------------------------------------------------------------------- */

.service-faq__eyebrow {
  margin: 0 0 var(--space-xl);
  color: var(--color-gold);
  font-size: var(--fs-faq-eyebrow);
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.service-faq__title {
  max-width: var(--faq-title-max-width);
  margin: 0;
  font-size: var(--fs-faq-title);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-display);
  letter-spacing: -0.05em;
  overflow-wrap: var(--text-wrap-display);
}

.service-faq__lead {
  max-width: var(--faq-lead-max-width);
  margin: var(--space-xl) 0 0;
  color: var(--color-text);
  font-size: var(--fs-faq-lead);
  line-height: var(--line-height-body);
}

/* --------------------------------------------------------------------------
   List
   -------------------------------------------------------------------------- */

.service-faq__list {
  width: min(100% - var(--space-6xl), var(--container-faq));
  margin: 0 auto;
}

.faq-item {
  position: relative;
  padding: 0;
}

.faq-item + .faq-item::before {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--color-gold-line-fade),
    var(--color-gold-separator),
    var(--color-gold-line-fade)
  );
}

/* --------------------------------------------------------------------------
   Item
   -------------------------------------------------------------------------- */

.faq-item__toggle {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-xl);
  width: 100%;
  min-height: var(--faq-toggle-min-height);
  padding: var(--space-md) 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.faq-item__toggle:focus-visible {
  outline: var(--focus-outline-width) solid var(--color-gold);
  outline-offset: var(--focus-outline-offset);
}

.faq-item__question {
  margin: 0;
  color: var(--color-white);
  font-size: var(--fs-faq-question);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: -0.02em;
  overflow-wrap: var(--text-wrap-display);
}

.faq-item__icon {
  position: relative;
  flex-shrink: 0;
  width: var(--faq-icon-size);
  height: var(--faq-icon-size);
  margin-top: 0.2em;
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--color-gold);
  transform: translate(-50%, -50%);
  transition: opacity var(--duration-medium) var(--easing-standard);
}

.faq-item__icon::before {
  width: var(--faq-icon-line);
  height: var(--faq-icon-stroke);
}

.faq-item__icon::after {
  width: var(--faq-icon-stroke);
  height: var(--faq-icon-line);
}

.faq-item.is-open .faq-item__icon::after {
  opacity: 0;
}

/* --------------------------------------------------------------------------
   Answer
   -------------------------------------------------------------------------- */

.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding-top: 0;
  transition:
    max-height var(--duration-medium) var(--easing-standard),
    opacity var(--duration-medium) var(--easing-standard),
    padding-top var(--duration-medium) var(--easing-standard);
}

.faq-item.is-open .faq-item__answer {
  max-height: var(--faq-answer-max-height);
  opacity: 1;
  padding-top: var(--space-faq-answer-top);
}

.faq-item__answer p {
  max-width: var(--faq-answer-max-width);
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-faq-answer);
  line-height: 1.8;
}

/* --------------------------------------------------------------------------
   Footer + premium phone CTA
   -------------------------------------------------------------------------- */

.service-faq__footer {
  width: min(100% - var(--space-6xl), var(--container-faq));
  margin: var(--space-faq-footer-top) auto 0;
  text-align: center;
}

.service-faq__footer p {
  margin: 0;
  color: var(--color-white);
  font-size: var(--fs-faq-footer);
  font-weight: var(--font-weight-extrabold);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.service-faq__footer .phone-cta {
  margin-top: var(--space-phone-cta-top);
}

/* --------------------------------------------------------------------------
   Engine hooks
   -------------------------------------------------------------------------- */

.service-faq.is-faq-ready .faq-item__answer {
  max-height: none;
  transition: none;
  height: 0;
  overflow: hidden;
  opacity: 0;
  padding-top: 0;
}

.service-faq.is-faq-ready .faq-item.is-open .faq-item__answer {
  max-height: none;
  height: auto;
  opacity: 1;
}

.service-faq.is-faq-ready .faq-item__icon::after {
  transition: opacity var(--duration-faq-icon) ease;
}

/* --------------------------------------------------------------------------
   Responsive — Tablet
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .service-faq {
    padding: var(--space-faq-section-y-tablet) 0;
  }

  .service-faq__list,
  .service-faq__footer {
    width: calc(100% - var(--space-4xl));
  }

  .service-faq__eyebrow {
    font-size: var(--fs-faq-eyebrow);
  }

  .service-faq__title {
    font-size: var(--fs-faq-title-tablet);
  }

  .service-faq__lead {
    font-size: var(--fs-faq-lead-tablet);
    line-height: 1.7;
  }

  .faq-item__toggle {
    min-height: var(--faq-toggle-min-height-tablet);
  }

  .faq-item__question {
    font-size: var(--fs-faq-question-tablet);
  }

  .faq-item__answer p {
    font-size: var(--fs-faq-answer);
  }

  .faq-item.is-open .faq-item__answer {
    padding-top: var(--space-faq-answer-top-tablet);
  }

  .service-faq__footer {
    margin-top: var(--space-faq-footer-top-tablet);
  }
}

/* --------------------------------------------------------------------------
   Responsive — Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .service-faq {
    padding:
      var(--space-faq-section-y-mobile-top)
      0
      var(--space-faq-section-y-mobile-bottom);
  }

  .service-faq__list,
  .service-faq__footer {
    width: calc(100% - var(--space-2xl));
  }

  .service-faq__eyebrow {
    margin-bottom: var(--space-lg);
    font-size: var(--fs-faq-eyebrow-mobile);
    letter-spacing: 0.24em;
  }

  .service-faq__title {
    max-width: 100%;
    font-size: var(--fs-faq-title-mobile);
  }

  .service-faq__lead {
    max-width: 100%;
    margin-top: var(--space-lg);
    font-size: var(--fs-body);
    line-height: 1.65;
  }

  .faq-item__toggle {
    gap: var(--faq-toggle-gap-mobile);
    min-height: var(--faq-toggle-min-height-mobile);
  }

  .faq-item__question {
    display: block;
    overflow: visible;
    font-size: var(--fs-faq-question-mobile);
    line-height: var(--line-height-heading);
    overflow-wrap: var(--text-wrap-display);
  }

  .faq-item__icon {
    width: var(--faq-icon-size-mobile);
    height: var(--faq-icon-size-mobile);
    min-width: var(--faq-icon-size-mobile);
    min-height: var(--faq-icon-size-mobile);
  }

  .faq-item__icon::before {
    width: var(--faq-icon-line-mobile);
    height: var(--faq-icon-stroke);
  }

  .faq-item__icon::after {
    width: var(--faq-icon-stroke);
    height: var(--faq-icon-line-mobile);
  }

  .faq-item__answer p {
    font-size: var(--fs-faq-answer-mobile);
    line-height: 1.75;
  }

  .faq-item.is-open .faq-item__answer {
    padding-top: var(--space-faq-answer-top-mobile);
    padding-bottom: var(--space-faq-answer-bottom-mobile);
  }

  .service-faq__footer {
    margin-top: var(--space-faq-footer-top-mobile);
  }

  .service-faq__footer p {
    font-size: var(--fs-faq-footer-mobile);
    line-height: 1.15;
  }

  .service-faq__footer .phone-cta {
    margin-top: var(--space-phone-cta-top-mobile);
  }
}

/* --------------------------------------------------------------------------
   Responsive — Landscape
   -------------------------------------------------------------------------- */

@media (max-width: 767px) and (max-height: 700px) {
  .service-faq {
    padding:
      var(--space-faq-section-y-landscape-top)
      0
      var(--space-faq-section-y-landscape-bottom);
  }

  .service-faq__title {
    font-size: var(--fs-faq-title-landscape);
  }

  .faq-item__question {
    font-size: var(--fs-faq-question-landscape);
  }
}

/* --------------------------------------------------------------------------
   Utilities — Touch + Reduced Motion
   -------------------------------------------------------------------------- */

@media (hover: none) {
  .service-faq .faq-item__toggle:hover {
    background: transparent;
  }

  .faq-item:hover {
    border-color: inherit;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-faq__intro,
  .service-faq__list,
  .service-faq__footer,
  .faq-item,
  .faq-item__answer,
  .faq-item__answer p {
    opacity: 1 !important;
    transform: none !important;
  }

  .service-faq.is-faq-ready .faq-item__answer {
    transition: none;
  }

  .service-faq.is-faq-ready .faq-item__icon::after {
    transition: none;
  }
}